« デジハリ070526 | トップページ | 車が海に突入 »

2007年5月27日 (日)

デジハリ070527

19時よりデジハリ「XHTML+CSS講座(8)」

仕様書を与えられた先週の宿題の答え合わせ。といいつつ、佐藤先生はいつものように一つひとつの設定を、理由や狙いを述べながら説明してくださる。

070527_00まずは、フロートと見た目のデザインを担当するための2種類のDIVを設定する。Dreamweaver8のCSS設定の機能は実によくできている。画像の左下に、ポインタがある場所のタグの階層構造(タグインスペクタ)がある。画像クリックで拡大して確認されたい。
これはh2タグを選択した状態である。いわゆる「パンクくずリスト」と同じで、ワンクリックで必要な範囲を選択できる。DIVタグでソース全体を構造化するのはいとも簡単にできる。
さらにCSSの設定後は、右のCSSスタイルパネルから確認・修正・追加が簡単にできる。後で示す設定ダイアログも、編集したセレクタをダブルクリックすると、いつでも呼び出すことができる。

070527_01

画像部分と本文部分をそれぞれ2重のDIVタグで囲ってある。外側のDIVがフロートを担当し、内側のDIVが見た目の装飾を担当している。
これから下のリストのリンクを、背景色によりボタンのように見せて、なおかつテキスト以外の部分もヒットエリアになるように設定していく。宿題の中で一番悩んだ部分であった。

070527_02_2

CSS2では、インライン要素の aタグにでも、 displayプロパティを使用することでブロックレベル要素として設定することができる。上の画像のCSSパネルはそのaタグの設定状態である。後は、liタグに左のフロートを設定すればきれいに横並びになる。

070527_03Dreamweaver8では、各種のプロパティの意味さえわかっていれば、このようなダイアログで正確なCSS設定をすることができる。
一昔前のtableタグも高校生レベルでは十分に使えるし、校内での情報発信では全く問題がない。しかし、仕事としてWebデザインをするためにはCSSの技術は必須である。授業中の参加者の集中した様子は、ぜひ生徒にも教員にも見てもらいたい。

来週はお休み。さ来週に向けての課題(仕様書)が与えられた。
070527_10

|

« デジハリ070526 | トップページ | 車が海に突入 »

コメント

この記事へのコメントは終了しました。

トラックバック


この記事へのトラックバック一覧です: デジハリ070527:

« デジハリ070526 | トップページ | 車が海に突入 »