Ｗｅｂスタンダード １２日目

本日の授業内容

Ｌｅｓｓｏｎ８　− テーブルレイアウト　−

1. 画像の切り出し
• Ｐｈｏｔｏｓｈｏｐからの切り出し
• カンプデザインファイルを開く
• スライス
• スライスした画像に名前をつける
• ＩｍａｇｅＲｅａｄｙからの切り出し
• スライス名の確認
• 演習：スライス（検索窓、電話番号）
• メニュー部分
• その他
• レイヤーに基づく新規スライス
• スライスのファイル形式（ＧＩＦとＪＰＥＧの切り分け）
• 切り出し
• 生成したファイルの確認
• 保存とスライスの変更
• Ｆｉｒｅｗｏｒｋｓからの切り出し
• スライス
• スライスした画像に名前をつける
• 自動スライス
• スライスのファイル形式（ＧＩＦとＪＰＥＧの切り分け）
• 切り出し
2. テーブルレイアウトのコーディング
• テーブルレイアウトとは
  テーブルには、
  　「データテーブル」と「レイアウトテーブル」があります。
  ・データテーブル
  　それぞれの「セル」に文字や数字などを入れる、
  　いわゆる「表組み」と呼ばれるものです。
  　ＴＭＬの＜ｔａｂｌｅ＞要素は、データテーブルのためのものです。
  ・レイアウトテーブル
  　段組の属性を持たないＨＴＭＬで、
  　書籍や雑誌のようなレイアウトを実現するために用いられるものです。
• テーブルレイアウトの問題点
• 読み上げブラウザへの対応
• 読み込みスピード
• 複数メディアへの対応
• 完成ファイル
• 完成ソース
• 背景（背景色、背景画像）
• メイングラフィック
• テーブルコードの基本
• サブトピック
• サブトピック（内容エリアの追加）
• サブトピック（セミナーカテゴリ）
• サブトピック（最新情報カテゴリのエリア作成）
• サブトピック（最新情報コンテンツ）
• サブトピックの微調整
• フッター
• フッターの余白と区切り線
• ヘッダー
• ヘッダー画像の挿入
• ヘッダーの位置揃え
• メニュー（ヘッダー）
• 調整

　

Ｄｒｅａｍｗｅａｖｅｒでテーブルレイアウト

ｏｂｉ
ｌｏｇｏ	ｆｉｎｄ	ｔｅｌ＿ｎｕｍｂｅｒ
	ｎａｖｉ ｍｅｎｕ１ ｍｅｎｕ２ ｍｅｎｕ３ ｍｅｎｕ４ ｍｅｎｕ５

　

ｓｐａｃｅｒ

ｍａｉｎ＿ｇｒａｐｈｉｃｓ

ｓｐａｃｅｒ

ｔｉｔｌｅ＿ｎｅｗｓ　　　　　　 ｓｐａｃｅｒ ｐｉｃ１ ｓｐａｃｅｒ ｐｉｃ２ ｓｐａｃｅｒ

ｓｐａｃｅｒ

ｔｉｔｌｅ＿ｓｅｍｉｎａｒ　　　　 ｓｐａｃｅｒ ｐｉｃ３ ｓｐａｃｅｒ ＜ｐ＞ ｓｐａｃｅｒ

　

ｆｏｏｔｅｒ

ｆｏｏｔｅｒ

---