FC2ブログ

スポンサーサイト

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

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

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

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

使用ソフト

DreamweaverFireworks

使用教科書

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

授業の内容

1コマ目

WEBクリエーターのベーシックデザイン

レイアウトの基礎 ベーシックデザイン P55~77

概要

●レイアウトのページ全体

基本要素・・・ヘッダー・フッダー等の要素

画面分割パターン・・・コンテンツの配列パターン

グリット高速率・・・グリットに沿ってページレイアウトを作成している率

余白・・・ページの空いている部分

●レイアウトの画像

図版率・・・文字と絵の割合

ジャンプ率・・・写真の大きさの比率

●文章

文字組・・・行間・フォントのお話

●WEBとメディアの違い

コンテンツの構成要素はほぼ同じ

WEBにはナビゲーションが必要

WEBページはサイズが固定されていない

●レイアウトの基本要素

*グリット

コンテンツの配置をする座標の考え方

*ヘッダーとフッダー

ヘッダー・・・ページの見出し

フッダー・・・版権などの表示・各ページの共通の情報を表示

*ナビゲーション

メニューバー

*版面

文字やコンテンツを表示する範囲

●リサイズにしたレイアウト

760pxで作ろう

そのページの中のどの部分に配置するか

現在は中央部分に寄せている配置が多い

●テーブルのサイズ指定

#テーブルによるレイアウト

多くのユーザーに対応しているレイアウト方法はテーブルレイアウト

ユーザーにとって自由度が高い

#レイヤー(div)によるレイアウト

幅の指定をしていないとテーブルが自動的に調整されてしまうので、注意する。

ブラウザ・ユーザーによってレイアウトが崩れる可能性もある。

ユーザーにとって自由度が低い

 

2コマ目

実習・・・テーブルを使ってレイアウトをしてみよう

教科書付属のCDROMから(1-4-1)→(141_2)→(table_fin.html)

ここでは、ウィンドウ幅を固定したい部分にスペーサーGIFを入力して幅を固定させる。

テーブルタグは、何もデータが入っていないとその部分が表示されないので何も記述されていない縦・横1pxのスペーサーGIFを作成しそれを各セルに入れてあげて幅を固定させている。

 これがページ幅を固定して表示した例

HTMLは下記参照

赤色で表示されている部分が5pxで表示させたいので、

<TD width="5" BGCOLOR="#FF3333"><img src="spacer.gif" width="5" height="1"></TD>

とスペーサーGIFの幅を5pxに指定してあげた。

HTMLはこんな感じ

<TABLE width="550" BORDER="0" align="center" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD width="5" BGCOLOR="#FF3333"><img src="spacer.gif" width="5" height="1"></TD>
<TD width="383" BGCOLOR="#FFCC33"><img src="spacer.gif" width="383" height="1"> </TD>
<TD width="5" BGCOLOR="#FF3333"><img src="spacer.gif" width="5" height="1"></TD>
<TD width="152" BGCOLOR="#FFFFCC"><DIV ALIGN="center"><img src="h_title.gif" width="152" height="33"></DIV></TD>
<TD width="5" BGCOLOR="#FF3333"><img src="spacer.gif" width="5" height="1"></TD>
</TR>
</TABLE>

 

3コマ目

 これがページ幅により可変する例

・・・※

HTMLは下記参照

テーブル幅を100%にすると、画面の幅100%に自動で調整される。

<TD BGCOLOR="#FFCC33"><img src="spacer.gif" width="1" height="1"></TD>・・・※

この部分は可変幅なのだが、データなしだとこのセルがつぶれるので、縦・横の幅が1pxのスペーサーGIFを入力している。

<TABLE width="100%" BORDER="0" align="center" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD width="5" BGCOLOR="#FF3333"><img src="spacer.gif" width="5" height="1"></TD>
<TD BGCOLOR="#FFCC33"><img src="spacer.gif" width="1" height="1"></TD>・・・※
<TD width="5" BGCOLOR="#FF3333"><img src="spacer.gif" width="5" height="1"></TD>
<TD width="152" BGCOLOR="#FFFFCC"><DIV ALIGN="center"><IMG SRC="h_title.gif" WIDTH="152" HEIGHT="33"></DIV></TD>
<TD width="5" BGCOLOR="#FF3333"><img src="spacer.gif" width="5" height="1"></TD>
</TR>
</TABLE>

 

4コマ目

●レイアウトの基本項目

画面分割の基本パターン

左右分割・・・左の幅が小さく、インデックスを表示させる。

上下分割・・・会社のWEBページなどで使用する

上下+左右分割・・・情報量が多いサイト等でしようする。

●グリット拘束率

グリットに合わせているサイト・・・グリット拘束率が高い

グリットから外れてレイアウトしたサイト・・・グリット拘束率が低い

目立たせるためにわざと目立たせたい部分だけグリットから外す手法も用いられる。

 

5コマ目

課題・・・グリット拘束率の高いサイトと低いサイトを作成する。

テキストのページを参考して、出されたイメージを使ってページを作成してみる。

●グリット拘束率の低いサイト

ドリームウィバーのテーブルレイアウト方法を使用して作成した。・・・DW&FWトレーニングブック P114~121

グリット拘束率の低いレイアウト

 

6コマ目

●グリット拘束率の高いサイト

ドリームウィバーのスタイルシートを使用して作成した。 ・・・DW&FWトレーニングブック P86~105

グリット拘束率の高いサイト

 

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

評価・感想を書いてくれた人の内容

この記事に対する評価・感想を投稿

管理者にだけメッセージを送る

トラックバック トラックバックURL:
http://hamacom.blog4.fc2.com/tb.php/42-0069b27c
サイズ変更ボタン サイズ縮小ボタン サイズ拡大ボタン サイズリセットボタン
RSSフィード

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

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

07 | 2018/08 | 09
- - - 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 31 -

ハマーにメールを送る

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

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

QRコード

覗いてくれた人

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