WEBデザイン＆WEBプログラミング -sei2の日記- 基金訓練に行ってきました。(68日目)

基金訓練(Webデザイン・プログラミング科)の68日目に行ってまいりました。
68日目は、PhotoshopとHTML&CSSプログラミングの実習です。

68日目の内容は下記のとおりです。

１．フォトショップでデザインしたページをコーディング

基金訓練に行ってきました。(57日目)、基金訓練に行ってきました。(63日目)で、
フォトショップを使って作成したWebページをコーディングしていきました。

フォトショップで画像のスライス

「スライスツール」を使ってスライスしたい画像を四角形で囲みます。
(通常スライスツールは、「切り抜きツール」を長押しすれば出てきます。)
スライスした画像の各角を拡大して、ちゃんと範囲に入っているかどうか、目視で確認し、違っていれば、バウンディングボックスの各辺をドラッグして修正します。
スライスした画像を右クリックして、「スライスオプションを編集」をクリックし、「スライスオプションウインドウ」を開きます。
「スライスオプションウインドウ」の項目の中の「名前」を、保存したい名称にし、「OKボタン」を押します。
(その名前のついたファイル名でサーバーにアップするので、半角英数字にします。）
「ファイルメニュー」→「Webおよびデバイス用に保存」で、「Webおよびデバイス用に保存ウインドウ」を開きます。
画面上で、画像ファイルにしたいスライスをクリックして選択します。
（選択したスライスの枠は金色になります。）
（複数選択したい時は、Shiftキーを押しながら2個目以降をクリックしてください。）
「プリセット」で、保存する画像形式を選び保存ボタンを押し「保存ウインドウ」を開きます。
(写真やグラデーションのついた画像はJPEG 高、それ以外と背景が透明の画像は、PNG-24または、GIFを選択します。)
｢設定｣で「その他」を選択し、「出力設定ウインドウ」を開きます。
「最適化ファイル｣の｢画像をフォルダーに保存｣のチェックをはずし、「OKボタン」を押して、「保存ウインドウ」に戻ります。
(任意のフォルダーへ画像ファイルを保存するため。)
｢スライス｣で、「選択したスライス｣を選択します。
保存したいフォルダーを選んで、「保存ボタン」を押せば、ファイル作成完了です。

※背景を透明にしたい時は、背景の部分の画像はあらかじめNoShowにしておきます。

コーディング

今回は、テキストエディタとして、ドリームウィバーを使用しました。

「ファイルメニュー」→「新規」で、「新規ドキュメントウインドウ」を開きます。
「ページタイプ」を「HTML」、「レイアウト」を「なし」、「ドキュメントタイプ」を「XHTML 1.0 Transitional」にして、「作成ボタン」を押し、新規HTMLドキュメントを作成します。
「ファイルメニュー」→「保存」で、名前をつけて保存します。
<head>部に、タイトルなどの必要事項を書き込みます。
ID付のdivを作成して、ヘッダーやフッターなどにグループ分けします。
例
<body>
<div id="container">
<div id="head">
</div><!–#head end–>
<div id="navi">
</div><!–#navi end–>
<div id=contents>
<div id="contL">
</div><!–#contL end–>
<div id="contR">
</div><!–#contR end–>
</div><!–#contents end–>
<div id="foot">
</div><!–#foot end–>
</div><!–#container end–>
</body>
フォトショップから、テキストを、グループ分けしたdiv内の対応する位置にコピペし、ロゴや画像は、それがわかるような内容で、対応する位置にテキストで打ち込みます。
例
<div id="contL">
特集　　　　　←（ここの見出しは画像ですが、代替にテキストを入れておきます。）
HTML特集
HTMLの特集です。
CSS特集
CSSの特集です。
</div><!–#contL end–>
グローバルナビなどをリストにします。
例
<div id="navi">
<ul>
<li>HOME</li>
<li>HTML講座</li>
<li>CSS講座</li>
<li>お知らせ</li>
</ul>
</div><!–#navi end–>
「ファイルメニュー」→「新規」で、「新規ドキュメントウインドウ」を開きます。
「ページタイプ」を「CSS」」にして、「作成ボタン」を押し、新規CSSファイルを作成します。
「ファイルメニュー」→「保存」で、名前をつけて保存します。
HTMLドキュメントにmetaタグとlinkタグを<head>内に記入して、CSSファイルと関連付けします。
例
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
CSSファイルで、基本的な体裁の設定をします。
例
body{
　　　　margin:0;
　　　　padding:0;
　　　　font-size:100%;
　　　　font-family:"メイリオ", "ＭＳゴシック";
　　　　font-style:normal;
　　　　text-align:center;
　　　　text-decoration:none;
　　　　list-type;none;
　　　　color:#ffffff;
　　　　border-style:none;
}
container{
　　　　margin-left:auto;
　　　　margin-right:auto;
}
※bodyの設定の中で、ブラウザデフォルトの設定をクリアするところは、base.cssとして、別ファイル
にする方法もあります。
画像をHTMLに記述していきます。
例
<div id="contL">
<img src="image1.gif" width="100" height="30px" alt="特集"/>
<dl>
<dt>
HTML特集</dt>
<dd>HTMLの特集です。</dd>
　　　　　　・
　　　　　　・
　　　　　　・
見出しタグを記述します。
例
<div id="contL">
<h2>s<img src="image1.gif" width="100" height="30px"
alt="特集"/></h2>
　　　　　　・
　　　　　　・
　　　　　　・
CSSで、レイアウトを整えていきます。

グローバルナビのマークアップ

ナビボタンを、CSSを用いてマウスオーバーで変化させるためには、背景画像で記述する必要があります。
その為、imgタグで設定できるaltが使用できないので、画像に対応するテキストが無く（画像に文字を書き込んだ場合）、このままではSEOによくないといわれています。
そこで、その問題を解決する為に、リスト要素のテキストを残したまま、そのテキストを見えなくする手法を紹介します。

例

HTML部

CSS部

ul{
　　　　margin:0;
　　　　padding:0;
　　　　list-style:none;
　　　　overflow:hidden;
}
li{
　　　　margin-left:5px;
　　　　float:left;
　　　　text-indent:-9999px;
　　　　overflow:hidden;
}
li a{
　　　　display:block;
　　　　width:50px;
　　　　height:50px;
　　　　background-repeat:no-repeat;
}
li.navi1 a{
　　　　background-image:url(image/kero_b.png);
}
li.navi2 a{
　　　　background-image:url(image/kero_g.png);
}
li.navi1 a:hover{
　　　　background-image:url(image/kero_r.png);
}
li.navi2 a:hover{
　　　　background-image:url(image/kero_r.png);
}

上の赤文字部なし

上の赤文字部あり

備考

jQueryは、配られたプリントで習っており、下に紹介している教本には載っていません。

実習で使用している教本