« ICTE情報教育セミナーみなとみらい | トップページ | 神奈川県立横浜清陵総合高等学校 »

2007年6月18日 (月)

デジハリ070617

昨日、19時よりデジハリ「XHTML+CSS講座(10)」

先週の予告どおり、今日から最終回までの3回、本格的なサイトデザインの一手法を学ぶ。

070617_00_1左はイラストレータで描いたデザイン。これを実現するために、4つのステップの説明があった。

■step1:イラレやホトショでデザインを作成
■step2:テキストのみを取り出してXHTML化
■step3-A:一つひとつの画像のパーツを作る。スライスを利用してもよい
■step3-B:テキスト部分のHTMLコーディング
■step4:デザインの余白まで考慮した構造を示す枠を描く。構造体が決まれば、DIVタグで括り、CSSでコーディング

070617_01■step2:テキストだけを抜き出し、テキストファイルとして保存する。XHTML化する準備として、h1タグにあたるヘッダーの画像や、バナー画像の部分には代替キーワードテキストを挿入しておく。
このテキストを全選択し、Drewmweaverのデザインビューに貼りつける。コードビューで見てみると、一行あいていた場合はPタグで囲まれ、単なる改行の場合はbrタグが挿入されている。

070617_02 070617_03_1

■step3-A:イラレからFWに移行してスライス。この機能はイラレよりもFWの方が優れているようだ。パーツ毎にGIF・JPEG・PNGを選び各種最適化を行って書き出す。

■step3-B:テキストの見出しには見出し(hタグ)、箇条書きには(一度brタグをpタグに代えてから)リストの設定

■stap4:枠線を書き上げて最小限のDIVタグによる構造を設計する。実際にDIVタグを挿入しながら、imgタグによる画像配置が適するものは配置していく。

070617_04 070617_05_2

今回はここまで。次回はstep1のデザインから、「情報パレット」と「物差しツール」でサイズや間隔を測りながらCSSコーディングしていく、という予告。

|

« ICTE情報教育セミナーみなとみらい | トップページ | 神奈川県立横浜清陵総合高等学校 »

コメント

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

トラックバック


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

« ICTE情報教育セミナーみなとみらい | トップページ | 神奈川県立横浜清陵総合高等学校 »