WEB デザイン基礎実 験 担当：清水，田代 副手：浦辺，石井 （ 1 日目） NC-2 情報通信基礎実験
Web デザイン基礎実験：主題 Web ページにおける画面デザインの考え 方および技術を実践する 今後利用する機会の多い XML を理解し， 習得する
実験日程および内容 9/14 （ 1 日目）： HTML/CSS 演習 9/28 （ 2 日目）： XML/XSLT 演習 10/5 （ 3 日目）：レポート作成日 10/12 （ 4 日目）：レポート確認日＆再提 出 10/9 （金） 23:59 レポート提出 〆切
平日扱い 出席必須 要注意 10/12 体育の日
実験の準備 Web デザイン基礎実験の 1 日目：配布資料の ページから『シンプルな自己紹介 （ HTML ）』を Download する このフォーマットに沿って『自己紹介』を作 成 各々の『自己紹介』をコンテンツとして， HTML ， CSS ， XML ， XLST の作成および演 習を進める
HTML 復習（演習） HTML 文法のおさらい Web デザイン基礎実験ページより HTML 入 門 webdesign/web/html/
HTML について HTML を XML で再定義し， XHTML へ ※ 現在はまだ， HTML4.01 が多い HTML2.0 (1995/11) HTML2.x (1997/1) HTML3.2 (1997/1) Transitional Frameset Strict HTML4.0 (1997/12) HTML4.01 (1999/12) Transitional Frameset Strict XHTML1.0 (2000/2) XHTML1.0 第 2 版 (2002/8) XHTML1.1 (2001/5)
HTML について シンプルな自己紹介 HTML を作成する – ファイル名は『学籍番号 ( 半角数 字 ).html 』 – 利用タグ <!DOCTYPE HTML PUBLIC 〜 <A HREF 〜 余力のある人は， ” 名は体を表す ” を タグで表示する
HTML について HTML は文書を構造化するためのもの 文書の構造化によるメリット – 情報が抜き出しやすい – 情報を要約しやすい – コンピュータに意味を伝える（検索エンジンな ど） HTML は見え方の表現も可能 – 構造化以外の用途 (TABLE タグによるレイアウ ト ) – 例： Yahoo! のページなど
CSS について スタイルシートは，文書の見え方を記述 する枠組み Web ページ HTML 文書構造 CSS 見え方
CSS 演習 1 まずはやってみよ う シンプルな自己紹介ページの背景色を『緑 色』に変更する –HTML ファイルの作成 学籍番号.html → 学籍番号 _CSS1.html コピーし，上記の様に名前を書き換えて作成する HEAD タグ内に CSS ファイルへのリンクを追記する
CSS 演習 1 CSS ファイルの作成 – ファイルの作成 （ css フォルダの下に CSS1.css ファイルを作 成） body{ background-color: green; }
CSS 演習 1 学籍番号 _CSS1.html をブラウザでリロード – 背景が緑色に変更されているか確認 – 自分の好みの背景色に変更 – 先程作成したシンプルな自己紹介ページを段 階に分けて装飾していく –CSS ファイルは，上書きしていくイメージ！
CSS について CSS の文法： CSS の基本構造 – bdesign/web/css/ ボックスモデル –Web デザイン基礎実験の 1 日目：配布資料のペー ジ『ボックスモデルのサンプル （ HTML&CSS ）』を Download して動かしてみ る
CSS 演習 2 飾ってみる シンプルな自己紹介ページを飾ってみる –HTML ファイルの作成 学籍番号.html → 学籍番号 _CSS2.html コピーし，上記の用に名前を書き換えて作成する HEAD タグ内に CSS ファイルへのリンクを追記する
CSS 演習 2 CSS ファイルの作成 – ファイルの作成 （ css フォルダの下に CSS2.css ファイルを作 成） – 一つ一つ定義していこう
CSS について CSS1 勧告： 1996 年 12 月 – （ CSS2 ： 1998 年 5 月， CSS2.1 ： 2004 年 2 月） CSS1 から 9 年近くかかり，ブラウザのサ ポートが充実（ IE5, NN6 以降） – ブラウザ独自の拡張タグにより，既に見え方を 整えることができていた（ NN の Font タグなど） – ブラウザによりサポートレベルが異なった 労力がかかる 無難に作ると垢抜けない
CSS 演習 3 段組み（応用） 自己紹介ページを段組み表示 –HTML ファイルの作成 学籍番号.html → 学籍番号 _CSS3.html コピーし，上記の用に名前を書き換えて作成する HEAD タグ内に CSS ファイルへのリンクを追記する 段組構成（回り込み）の設定
CSS 演習 3 CSS ファイルの作成 – ファイルの作成 （ css フォルダの下に CSS3.css ファイルを作 成） –Float を使った段組み 余力のある人は『学籍番号 _CSS4.html 』お よび『 CSS4.css 』を作成し，さらに飾って みる