FC2ブログ

スポンサーサイト

  1. トップ
  2. スポンサー広告
  3. スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサー広告 | コメントを書いてくれる人はこちら(-) | トラックバック(-) | [編集]
このページのトップへ移動する。

職業訓練WEBクリエーター科22日目

  1. トップ
  2. WEB制作の勉強
  3. 職業訓練WEBクリエーター科22日目

職業訓練WEBクリエーター科22日目

使用ソフト

DreamweaverFireworks

使用教科書

DW&FWトレーニングブックホームページ辞典・ベーシックデザイン

授業の内容

1コマ目

余白(ホワイトスペース) ベーシックデザインP68~

余白が広いページのイメージ

ゆったり、落ち着きがある、ほのぼの、上品、高級感、やさしい、女性的

余白が狭いページのイメージ

情報が濃密、元気、にぎやか、男性的、うるさい、見にくい

2コマ目~3コマ目

演習課題

余白を広くとりゆったりとしたイメージのWEBページを作ろう

作成したWEBページは下記参照です。

今回もCSSを使用してレイアウトをしてみました。

今回のWEBページのテーマはパソコン同好会で、

女性が多いサイトとゆうことだったので、余白を広くとり色使いも女性らしい色にしてみました。

サイトのナビゲーションメニューも少ない点数だったので、ヘッダの下にメニューを設置した。

使用したボックスはヘッダー、メニュー、コンテンツ、フッターの4点をボックス指定してレイアウトを施した。

余白を広くとったレイアウトの制作ページ

4コマ目

文字の扱い ベーシックデザイン P71~

フォント

WEBではほとんど保障されない、大まかな形態で下記のような設定が

CSSの書式・・・font-familyで変えられる。

serif・・・明朝系のフォント

sans-serif・・・ゴシック系のフォント

cursive・・・筆記体・草書体系のフォント(英文系のフォント)

fantasy・・・装飾がメインとなっているフォント(英文系のフォント)

monospace・・・等幅フォント

フォントを特定して指定させたい場合は

画像としてWEBページに埋め込む

文字組

行間をとる。・・・CSSでline-hightで指定してあげる。だいたい120%~160%ぐらい明ける。

一行あたりの文字数の制限・・・一行あたり20~35文字ぐらいにする

5~6コマ目

課題練習

テキストの多いWEBページを読みやすいようにレイアウトをする。

作成したWEBページはこんな感じです。

今回はデザインについてのWEBページで、文字が多いコンテンツです。

今回使用したボックスは、ヘッダー、コンテンツ、右側のボックス、左側のボックス、フッターの6点で、

右側ボックスと左側ボックスは回り込みの指定をして2カラムのレイアウトを施した。

なお段落の行間の文字の間隔を調整して、見出し・小見出しにデザインを施して文字の読みやすさを考慮してデザインを施した。

テキストの読みやすいWEBデザイン

スポンサーサイト
このページのトップへ移動する。

サイズ変更ボタン サイズ縮小ボタン サイズ拡大ボタン サイズリセットボタン
RSSフィード

ブロとも申請フォーム
ブログ内検索

最近のエントリ
ユーザータグ
カレンダー

05 | 2007/06 | 07
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

ハマーにメールを送る

私ハマーにご意見・ご感想・調べてほしい事・オススメサイト等ありましたら気軽にメールしてください。

最近のコメント
全ての記事を表示する
カテゴリー
QRコード

QRコード

覗いてくれた人

月別アーカイブ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。