2009-07-01

WEB 11・12時間目

　本来は来週（7月5日）が最終なのですが、諸般の事情で今週（6月28日）に二日分を行ない、本日でWEBの授業も終了ということになりました。
　1時間目は先週のおさらい。この時に先々週の授業で使っていたテキストの課題をすべて終了していたのですが、IE6で表示するとメニューボタンのレイアウトが崩れるのを修正。原因はIE6ならではの理由（margin=borderと認識するため）で、IE6の“困ったちゃんぶり”を痛感。何とかIE6でも正常に表示させることに成功する。
　2時間目にはFlashにいて勉強。これで先週の失敗は根本的に手順を間違えていたことが原因であることが判明。まだまだ勉強が足りないなと反省。で、何とか貼れたものの動作がちょっとおかしいため、これまた研究の余地あり。
　
↓1ページ目

↓2ページ目

↓3ページ目

↓4ページ目

3ページ目と4ページ目にはFlashがあります。
　ちなみにこのページのURLは
　http://justicerb.sa-suke.com/
です。
　これで学校での勉強は終わりましたが、私の勉強はまだまだ始まったばかり。5月から職には就いてはいるものの、ごく短期のものなので求職中であることには何ら変わりはなく、早く希望の職に就けるよう、がんばっていきたいです。

2009-06-26

WEB 10時間目

いきなり10時間目なのは、7・8・9時間目はテキスト本に沿っての授業だったのと、これは自習分とともに別枠で載せるつもりであるからです。
　今回はいよいよネットにアップです。簡単なページを作り、NINJA TOOLSを使ってアップします。アップするまではちょっと躓いたものの、何とかアップ完了。
　その後、家での復習でFLASH videoを載せようと思ったのですが、どうもうまくいかない。
　Dreamweaverで挿入→メディア→Flash Videoの手順で行なうもアップの段階でエラーが出て“images\05.flv - エラー発生 - FTP エラーが発生しました｡ - 05.flv を PUT できません。この処理を実行するにはディスク容量が足りません。”というメッセージが。
　ちなみにFlashを貼り付けた第3ページのhtmlタグです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<script type="text/javascript">
function MM_CheckFlashVersion(reqVerStr,msg){
  with(navigator){
    var isIE  = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") == -1);
    var isWin = (appVersion.toLowerCase().indexOf("win") != -1);
    if (!isIE || !isWin){  
      var flashVer = -1;
      if (plugins && plugins.length > 0){
        var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description : "";
        desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash 2.0"].description : desc;
        if (desc == "") flashVer = -1;
        else{
          var descArr = desc.split(" ");
          var tempArrMajor = descArr[2].split(".");
          var verMajor = tempArrMajor[0];
          var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r");
          var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0;
          flashVer =  parseFloat(verMajor + "." + verMinor);
        }
      }
      // WebTV has Flash Player 4 or lower -- too low for video
      else if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0;

      var verArr = reqVerStr.split(",");
      var reqVer = parseFloat(verArr[0] + "." + verArr[2]);
  
      if (flashVer < reqVer){
        if (confirm(msg))
          window.location = "http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash";
      }
    }
  } 
}
</script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<title>実験その3</title>
</head>
<body bgcolor="#FFFF00" onload="MM_CheckFlashVersion('7,0,0,0','このページのコンテンツを表示するには最新バージョンの Adobe Flash Player が必要です。今すぐダウンロードしますか?');">
<h1>第3のページ</h1>
<p>
  <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0','width','640','height','480','id','FLVPlayer','src','FLVPlayer_Progressive','flashvars','&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=images/05&autoPlay=false&autoRewind=false','quality','high','scale','noscale','name','FLVPlayer','salign','lt','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','FLVPlayer_Progressive' ); //end AC code
</script>
  <noscript>
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="640" height="480" id="FLVPlayer">
    <param name="movie" value="FLVPlayer_Progressive.swf" />
    <param name="salign" value="lt" />
    <param name="quality" value="high" />
    <param name="scale" value="noscale" />
    <param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=images/05&autoPlay=false&autoRewind=false" />
    <embed src="FLVPlayer_Progressive.swf" flashvars="&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=images/05&autoPlay=false&autoRewind=false" quality="high" scale="noscale" width="640" height="480" name="FLVPlayer" salign="LT" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" />
  </object>
  </noscript>
</p>
<p><a href="index.html">トップページ</a></p>
<p><a href="index-2.html">第2ページ</a></p>
</body>
</html>

第1ページ

第2ページ

問題の第3ページ

　Flashは、まだまだ研究の余地あり。早く解決して次に進みたいです。

2009-06-25

WEB 6時間目

これも5月24日に行なわれたものです。

　お題は、サムネイル付きのフォトアルバム。フォトギャラリーを持ってはいるものの、いわゆる“型に流し込んで終わり”というものなので、ちょっと気合が入る。
　素材・写真を使って下の画像のようにレイアウトしていく。幅のサイズの指定によって見え方がかなり変わっていき、それがよく見えたりみっともなくなったりとかなり落差があるので気をつけていかなくては。
↓htmlタグ

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css" /> 
<title>[4.3 サンプル2] Photo Album</title>
<link href="base.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="section">
<h2>Photo Album</h2>
<ul class="thumbnail">
<li><img src="images/photo01.png" width="133" height="100" alt="代替テキスト" /></li>
<li><img src="images/photo02.png" width="133" height="100" alt="代替テキスト" /></li>
<li><img src="images/photo03.png" width="133" height="100" alt="代替テキスト" /></li>
<li><img src="images/photo04.png" width="133" height="100" alt="代替テキスト" /></li>
<li><img src="images/photo05.png" width="133" height="100" alt="代替テキスト" /></li>
<li><img src="images/photo06.png" width="133" height="100" alt="代替テキスト" /></li>
<li><img src="images/photo07.png" width="133" height="100" alt="代替テキスト" /></li>
<li><img src="images/photo08.png" width="133" height="100" alt="代替テキスト" /></li>
<li><img src="images/photo09.png" width="133" height="100" alt="代替テキスト" /></li>
<li><img src="images/photo10.png" width="133" height="100" alt="代替テキスト" /></li>
</ul>
<p class="continue"><a href="album.html">Continue reading</a></p>
</div>
<pre>&nbsp;</pre>
</body>
</html>

↓cssタグ

@charset  "utf-8;

h2 {
   margin:  0.5em 16px;
   border-bottom: 5px solid #b3cd28;
   text-transform: uppercase;
   font-family: "Trebuchet MS";
   font-size: 105%;
   }

ul.thumbnail {
	margin: 0.5em 16px;
	padding: 0;
	list-style-type: none;
}

ul.thumbnail li {
	margin: 0 8px 8px 0;
	padding: 4px;
	border: 5px solid #eeeeee;
	float: left;
	width: 133px;
	}

ul.thumbnail li img {
	vertical-align: bottom;
}

p.continue {
	margin: 0.5em 16px;
	clear: both;
}

a {
	color:: #669933;
}
.section {
	clear: both;
	width: 830px;
}

↓完成画像

　サムネイルに関しては、縮小もしくは一部の画像を表示してクリックで拡大…というのも調べて作ってみたいと思っています。

2009-06-23

WEB 5時間目

　実はこの授業は、5月17日のものなので、かなり遅れてしまいましたが、記して行こうと思います。

　とある企業のホームページのトップページという設定で作っていきます。とはいえこの時点ではまだまだ何も見ずに…というわけにはいかないので“お手本どおりに”打っていくだけのことですが…
　この回の肝は、ボタン等にマウスを合わせるとそこが少し変化するというもの。画像変換を使い、rollover.isを利用。少してこずるもののうまくいって何より。

↓index.htmlのタグ

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" /> 
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>企業風土活性化の総合サポート企業|ゼロイン</title>
<link href="css/base.css" rel="stylesheet" type="text/css" media="screen,tv" />
<script src="js/rollover.js" type"text/javascript></script>
</head>

<body>
<div id="container">


<div id="header">
<h1>ゼロインは企業風土活性化の総合サポート企業です</h1>
<p><img src="images/id_zeroin01.gif" alt="企業風土活性化の株式会社ゼロイン" width="99" height="39" /></p>
<ul id="subNav">
<li><a href="#">サイトマップ</a></li>
<li><a href="#">お問い合わせ</a></li>
<li><a href="#">資料請求</a></li>
</ul>
</div>

<div id="globalNav">
<ul>
<li><img src="images/btn-gnav00_n.gif" alt="HOME" name="btn00" width="53" height="32" id="btn00" /></li>
<li><a href="#"><img src="images/btn-gnav01.gif" alt="お客様別ナビ" width="117" height="32" class="imgover" /></a></li>
<li><a href="#"><img src="images/btn-gnav02.gif" alt="サービス内容" width="117" height="32" class="imgover" /></a></li>
<li><a href="#"><img src="images/btn-gnav07.gif" alt="提案実績" width="117" height="32" class="imgover" /></a></li>
<li><a href="#"><img src="images/btn-gnav03.gif" alt="セミナー案内" width="117" height="32" class="imgover" /></a></li>
<li><a href="#"><img src="images/btn-gnav04.gif" alt="採用情報" width="117" height="32" class="imgover" /></a></li>
<li><a href="#"><img src="images/btn-gnav06.gif" alt="会社概要" width="117" height="32" class="imgover" /></a></li>
</ul>
<p>Flash ナビ領域</p>
</div>
<div id="wrapper">
<div id="mainContents">
<div class="topic">
<h2><img src="images/head_h201.gif" alt="トピックス" width="490" height="18" /></h2>
<dl>
<dt>2008.9.11</dt>
<dd>記事掲載情報</dd>
<dd><a href="#">エン･ジャパン「目指せ!カリスマ管理職」に『伝わる化』が掲載されました。</a></dd>
<dt>2008.9.10</dt>
<dd>セミナーのご案内を開始しました</dd>
<dd><a href="#">10/9開催　総務道場「総務基礎講座」</a></dd>
<dt>2008.9.3</dt>
<dd>セミナーのご案内を開始しました</dd>
<dd><a href="#">10/2開催　無料セミナー「はじめてのオフィスレイアウト変更」</a></dd>
<dt>2008.8.27</dt>
<dd>セミナーのご案内を開始しました</dd>
<dd><a href="#">9/25開催　無料セミナー「年間で考える社内コミュニケーション施策」</a></dd>
<dt>2008.7.23</dt>
<dd>新刊を発売開始しました</dd>
<dd><a href="#">『伝わる化』〜コミュニケーションを征するものがビジネスを征す〜</a></dd>
</dl>
</div>
<div class="job">
<h2><img src="images/head_h202.gif" alt="ジョブリポート" width="490" height="18" /></h2>
<div class="jobContents">
<h3>saboに流れる時間</h3>
<img src="images/img_job002.jpg" alt="オフィス移転、オフィスリニューアルを機にワークスペースを見直しませんか？" width="120" height="82" />
<p>オフィス移転、オフィスリニューアルを機にワークスペースを見直しませんか？ ゼロインが提供する『sabo（サボ）』は、社員がリラックスやコミュニケーションスペースとして自由に使える空間です。</p>
<p class="date">2007年3月20日｜<a href="#">ファシリティマネジメント</a>｜<a href="#">実績一覧検索</a></p>
</div>
<div class="jobContents">
<h3>康診断はアウトソースする時代です</h3>
<img src="images/img_job001.jpg" alt="健康診断オペレーション" width="120" height="82" />
<p>健康診断の業務運営が煩雑さを増していませんか？ ゼロインは年間15000人の企業健康診断予約をお手伝いし、平均受診率97.8％を実現。健康診断を始める前にぜひ一度ご相談ください。</p>
<p class="date">2007年3月20日｜<a href="#">健康診断オペレーション</a>｜<a href="#">実績一覧検索</a></p>
</div>
<div class="jobContents">
<h3>見直される企業イベント</h3>
<img src="images/img_job003.jpg" alt="見直される企業イベント" width="120" height="82" />
<p>不況の影響を受け、経費削減によって企業から姿を消したイベント。 しかしここ数年、組織の一体感を高めるコミュニケーション施策として、企業イベントが見直されています。</p>
<p class="date">2008年3月17日｜<a href="#">コミュニケーションプロデュース</a>｜<a href="#">実績一覧検索</a></p>
</div>
</div>
</div>
<div id="banner">
<ul>
<li><img src="images/banner-magazinewide.gif" alt="メールマガジン申込みボタン" width="230" height="100" class="imgover" /></li>
<li><img src="images/banner-archive.gif" alt="実績一覧検索ボタン：ゼロインの実績を紹介します " width="230" height="50" class="imgover" /></li>
<li><img src="images/banner-rondan002.gif" alt="論談002ボタン：「居場所感」と「縁側」で辞めない会社づくりを" width="230" height="100" class="imgover" /></li>
<li><img src="images/banner-rondan001.gif" alt="論談001ボタン：社内活性化のためのメンタルヘルス対策" width="230" height="100" class="imgover" /></li>
</ul>
<p>企業におけるメンタルヘルス対策コラム</p>
<ul class="blog">
<li><a href="#">代表取締役 大條の「熱いぜ!!」ブログ</a></li>
<li><a href="#">副社長 姥谷の「総務&amp;農業」ブログ</a></li>
</ul>
<dl>
<dt>ゼロイン社長<br />
大條充能の本</dt>
<dd><img src="images/2008080801.gif" alt="ゼロイン社長 大條充能の本" width="100" height="145" /></dd>
</dl>
<dl>
<dt>エマメイ大塚寿氏＆<br />
ゼロイン姥谷芳昭の本</dt>
<dd><img src="images/2008080802.gif" alt="ゼロイン 姥谷芳昭の本" width="100" height="145" /></dd>
</dl>
</div>
<div class="pagetop">
<p><a href="#">▲ページの先頭へもどる</a></p>
</div>
</div>
<div id="footer">
<ul id="footernav">
<li><a href="#">サイトマップ</a></li>
<li><a href="#">プライバシーポリシー</a></li>
<li><a href="#">ニュースリリース</a></li>
</ul>
<address>
&copy; ZEROin ALL RIGHTS RESERVED.
</address>
</div>
</div>
</body>
</html>

↓cssタグ

@charset "Shift_JIS";

h1,h2,h3,h4,p,ul,li,dl,dt,dd,a,img,address {
	margin: 0;
	padding: 0;
}
body {
	font-family:
		Meiryo,
		"メイリオ",
		Osaka,
		"Hiragino Kaku Gothic Pro",
		"ヒラギノ角ゴ Pro W3",
		"MS P Gothic",
		"ＭＳ Ｐゴシック",
		sans-serif;
	color: #242424;
	font-size: 96%;
	margin: 0;
	padding: 0;
	text-align: center;
	background-color: #EAF0F3;
}
a img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
a:link {
	color:#193092;
	text-decoration: underline;
}
a:visited {
	color:#193092;
}
a:hover {
	color:#f8b22b;
	text-decoration: underline;
}
a:active {
	color:#f8b22b;
}
#container {
	width: 760px;
	text-align: left;
	margin: 0px auto;
	padding-right: 6px;
	padding-left: 6px;
	background-image: url(../images/bg_zeroin01.gif);
	background-repeat: repeat-y;
}
#header {
	width: 760px;
	padding: 10px 15px 0px 20px;
}
#globalNav {
	width: 756px;
	clear: both;
}
#wrapper {
	width: 768px;
}
#mainContents {
	width: 490px;
	float: left;
	margin: 10px 0px 0px;
	padding: 0px 0px 0px 12px;
}
#banner {
	float: left;
	width: 230px;
	margin: 10px 0px 0px 12px;
	padding: 0px;
	text-align: left;
}
#footer {
	clear: both;
	border-top: 5px solid #193092;
	width: 755px;
	height: 50px;
}



#header h1 {
	padding-left: 115px;
	font-size: 80%;
	padding-top: 20px;
	color: #374BA0;
}
#header p img {
	margin-top: -28px;
	margin-left: 5px;
}
#header ul#subNav {
	list-style-type: none;
	font-size: 80%;
	left: 500px;
	position: relative;
	top: -40px;
	width: 235px;
}
#header ul#subNav li {
	font-size: 80%;
	display: block;
	float: left;
	width: 77px;
	padding-bottom: 5px;
}
#header ul#subNav li a:link, #header ul#subNav li a:visited {
	background-image: url(../images/bg_topic01.gif);
	background-repeat: no-repeat;
	padding-left: 15px;
	text-decoration: underline;
	display: block;
	background-position: left top;
	padding-bottom: 5px;
}
#header ul#subNav li a:hover, #header ul#subNav li a:active {
	color: #f8b22b;
	background-image: url(../images/bg_topic02.gif);
	background-repeat: no-repeat;
	padding-left: 15px;
	text-decoration: underline;
	display: block;
	background-position: left top;
	padding-bottom: 5px;
}
#globalNav ul {
	list-style: none;
	width: 756px;
}
#globalNav li {
	float: left;
}
#globalNav p {
	height: 200px;
	clear: both;
}
#mainContents .topic h2 {
	margin-bottom: 10px;
}
#mainContents .job h2 {
	margin-top: 25px;
	margin-bottom: 10px;
}

#mainContents dt {
	float: left;
	margin-right: 10px;
	padding-left: 20px;
	font-weight: bold;
	background-image: url(../images/bg_topic01.gif);
	background-repeat: no-repeat;
	background-position: left 4px;
}
#mainContents dd {
	padding-left: 20px;
	margin-bottom: 4px;
	font-size: 85%;
}
#mainContents h3 {
	font-size: 100%;
	border-bottom-width: 1px;
	border-left-width: 6px;
	border-bottom-style: solid;
	border-left-style: solid;
	border-left-color: #FFCC00;
	color: #444444;
	border-bottom-color: #666666;
	padding-left: 10px;
	padding-top: 2px;
	margin-left: 135px;
}
#mainContents .job .jobContents {
	width: 490px;
	background: url(../images/dot_bannerside02.gif) repeat-x center bottom;
	margin-bottom: 10px;
}
#mainContents .job .jobContents img {
	float: left;
	margin-top: -20px;
}
#mainContents .job .jobContents p {
	margin-left: 135px;
	font-size: 85%;
	line-height: 150%;
	margin-top: 7px;
}
#mainContents .job .jobContents .date {
	font-size: 70%;
	text-align: right;
	margin-top: 10px;
	padding-bottom: 15px;
}
#mainContents .job hr {
	background: url(../images/dot_bannerside02.gif) repeat-x;
	height: 10px;
	border: 0px none #FFFFFF;
	color: #FFFFFF;
}
#banner ul {
	list-style: none;
}
#banner li {
	margin-bottom: 6px;
}
#banner dl {
	width: 115px;
	float: left;
	margin: 20px 0px 0px;
	text-align: center;
	display: block;
}
#banner dt {
	font-size: 72%;
	margin-bottom: 5px;
}
#banner p {
	font-size: 80%;
}
.pagetop {
	display: block;
	clear: both;
	text-align: right;
	width: 740px;
	padding-top: 5px;
	font-size: 85%;
	padding-bottom: 10px;
}
#banner .blog {
	margin-left: 15px;
	font-size: 75%;
	margin-top: 15px;
}
#banner ul.blog li a:link, #banner ul#blog li a:visited {
	background-image: url(../images/bg_topic01.gif);
	background-repeat: no-repeat;
	padding-left: 18px;
	text-decoration: underline;
	display: block;
	background-position: left top;
	padding-bottom: 3px;
}
#banner ul.blog li a:hover, #banner ul#blog li a:active {
	color: #f8b22b;
	background-image: url(../images/bg_topic02.gif);
	background-repeat: no-repeat;
	padding-left: 18px;
	text-decoration: underline;
	display: block;
	background-position: left top;
	padding-bottom: 3px;
}
#footer ul#footernav {
	list-style-type: none;
	font-size: 80%;
	width: 480px;
	height: 30px;
	margin-left: 30px;
	margin-top: 15px;
}
#footer ul#footernav li {
	font-size: 80%;
	display: block;
	float: left;
	padding-bottom: 5px;
	padding-right: 10px;
}
#footer ul#footernav li a:link, #footer ul#footernav li a:visited {
	background-image: url(../images/bg_topic01.gif);
	background-repeat: no-repeat;
	padding-left: 15px;
	text-decoration: underline;
	display: block;
	background-position: left top;
	padding-bottom: 5px;
	color: #193092;
}
#footer ul#footernav li a:hover, #footer ul#footernav li a:active {
	color: #f8b22b;
	background-image: url(../images/bg_topic02.gif);
	background-repeat: no-repeat;
	padding-left: 15px;
	text-decoration: underline;
	display: block;
	background-position: left top;
	padding-bottom: 5px;
}
#footer address {
	font-size: 75%;
	display: block;
	text-align: right;
	margin-right: 15px;
	margin-top: -32px;
	font-style: normal;
}

完成したページ

　今まではブログの更新まではなかなか手が回りませんでしたが、授業はあと2回、なるべく早く現状に追いついていかなくては。

2009-05-13

WEB 4時間目

ゴールデンウィークで少々間が空いてしまいましたが、気合いを入れなおして。

　4時間目はMy Home Pageと題したホームページを作っていきます。
　まずはテキストの入ったデータをもらい、HTMLタグを入れていく。イラストまで入れてブラウザに表示させたのが、下のものです。

　次はCSSでスタイルシートを作っていきます。これもまだまだ“見よう見まね”というレベルですが、何とかうまく行きました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>練習</title>
<link href="base.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>My Home Page</h1>
<h2>2004/12/3</h2>
<p><img src="images/image.jpg">ここは練習用のホームページです。ここで<em>スタイルシート</em>の練習をしていきましょう。この<a href="#">HTMLファイル</a>と同じフォルダの中に<a href="#">CSSファイル</a>がありますので、そこにスタイルシートを入力していきましょう。</p>
<h2>2004/12/4CSS</h2>
<p>ファイルを編集したら、忘れずに上書き保存をしましょう。上書き保存をしていないと、入力したデザインが反映されません。</p>

<h2>Link</h2>
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
<li>Link6</li>
<li>Link7</li>
</ul>
</body>
</html>

で、こちらがCSSです。

body {
background-image:url(images/bg.jpg);
background-repeat:no-repeat;
background-position: center center;
}
h1 {
color: orange;
font-size: 1.5em;
font-family: Verdana;
border-color: gold;
border-style: dotted;
border-width: 5px
}
h2 {
color: yellowgreen
font-size: 1.2em
font-family: sans-serif;
}
em {
background-color: yellow;
}
a:link {
color: lightseagreen;
}
a:visited {
color: deeppink;
}
a:hover {
color: red;
background-color: pink;
}

これをブラウザに表示させたもの。

　少しは慣れてきたかな…とは思うものの、まだまだスラスラ入力…には程遠いので、やはり練習は怠りなくやって行かなくては。

2009-04-28

WEB 3時間目

WEBの授業の3時間目は“マイホームグリーン計画”というホームページを想定したもの。

　あらかじめ用意したテキストデータにhtmlタグを書き込んでいく。練習はしていたものの、素で打つにはまだまだ量が足りないなと実感。GW中にどれだけできるか…これは頑張るしかない。
　下はhtmlタグをいれ、ハイパーリンクをかけたもの。

　次に写真を入れる。

　最後にドキュメントタイプ宣言を入れ、タイトルの色とバックの色を指定する。それが下のものです。

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd>
<html lang="ja">
<head>
<meta http-equiv="Content-Type"content="text/html;charset=Shift_JIS">
<meta http-equiv="Content-Style-Type"content="text/css">
<title>マイホーム・グリーン計画</title>
<style type="text/css">
body {
	background: #e0efe0;
}
h1 {
	color: #50bb33;
}
</style>

</head>
<!--ここからbody開始-->
<body>
<h1>マイホーム・グリーン計画</h1>
<p>マイホームで趣味で始めた園芸が，家中を埋め尽くすくらいに大変な状態になってしまいました。</p>
<p>だから本当は「マイホームからちょっとグリーンを減らしたいかも計画」なページかもしれません。</p>
<p><a href="#"><img src="images/01.jpg" alt="" width="300" height="200"></a></p>
<h2>最新の更新情報</h2>
<ul>
<li>ハーブデータベースにパセリを追加しました(5/3)</li>
<li>ハーブ写真集にペパーミントを追加しました(4/30)</li>
</ul>
</p>
<h2>観葉植物の基礎知識</h2>
<p>観葉植物の種類や，育てる環境，コツ，購入値段の話など諸々の雑記です。</p>
<dl>
<dt><a href="#">ハーブ データベース</a></dt>
<dd>コツコツと作ってみました。現在30種類のデータがあります。</dd>
<dt><a href="#">ハーブ写真集</a></dt>
<dd>うちのハーブたちをデジカメで撮ってみました。</dd>
<dt><a href="#">掲示板</a></dt>
<dd>ハーブな話題を熱く語る掲示板です。どうぞ足跡を残していってください。</dd>
</dl>
<address>著作者　e-mail:<a href="mailto:xxx@xxx.com">xxx@xxx.com</a></address>
</body>
<!--ここでbody終了-->
</html>

　そしてブラウザに表示させたもの。

　だんだんと覚えることが増えてきていますが、ひと一つ確実に身につけていかなければ。

2009-04-25

WEB 2時間目

WEB 2時間目の授業は、ボタンを3つ作り、それを並べてみるというもの。

　最初はPhotoshopでボタンを3つ作り、それぞれ「ホーム」「新着情報」「お問い合わせ」としてみる。それをHTMLタグを入れてWEBページに

<html>
<head>
<title>Web画像｜ボタンの練習</title>
</head>
<body>
<p>
<img src="aaa/images/btn01.gif"><img src="aaa/images/btn02.gif"><img src="aaa/images/btn03.gif">
</p>
</body>
</html>

ここら辺で躓いているようでは先が思いやられる…と、言いたいところではあるのですが、うっかりミスでうまく表示されない…といったことがやはり起こってしまい、気を引き締める。

　下は家でもう一つ作ったパターンです。

　これはIllustratorで作ったボタンで、アンチエイリアスの関係等でこういう作業にはあまり向かないようです。