基金訓練に行ってきました。(68日目)


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

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

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

基金訓練に行ってきました。(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:"メイリオ", "MS ゴシック";
        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部

<ul>
<li class="navi1"><a href="#">メニュー1</a></li>
<li class="navi2"><a href="#">メニュー2</a></li>
</ul>

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は、配られたプリントで習っており、下に紹介している教本には載っていません。




関連記事

カテゴリー:職業訓練
.

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください