1. 授業の目的

• 現在主流となっているxhtml+CSSを実習によって体験することによる、html文書の構造の理解
• タイポグラフィやレイアウトの実習を行うことによる、デザイン基礎の学習
• 自己紹介サイトを制作することによる、他の学生への自身のプレゼンテーション実習

授業概要

今日のweb制作に携わる人間は非常に多岐にわたる知識が求められている。思いつくものを挙げただけでも、以下の知識が必須になるだろう。

• グラフィックデザイン（Photoshop、Illustratorの知識含む）
• xhtml/CSS
• JavaScript
• Flash（ActionScript）
• CGI（Perl）/PHPなどのサーバプログラミング
• 情報アーキテクチャ
• ユーザビリティ/アクセシビリティ
• SEO/SEM

など。
この授業は、そういった需要に応えられる事を前提に、webデザインにおける基本的な知識やプロセスを幅広く習得する。

成績評価

小課題→20%　最終課題→30％　出席→50％

スケジュール

1. xhtml基礎 (11/20)

なぜ、xhtml+CSSの実習が必要なのか
xhtmlの構造
DOCTYPE宣言と使用言語
ヘッダ
タグ
コメント
ウェブグラフィック（gif, jpeg, png）
画像の書き出し
ハイパーリンク
htmlファイルのファイル名

実習用ファイル（教員用）

2. xhtml基礎 (11/27)

ハイパーリンクの復習
メディアファイル（サウンド／動画）
サーバへのデータアップロード
パーミッション
サイトマップ

参考：メールのリンク

○課題1　自己紹介サイトのサイトマップ作成
サンプルのサイトマップを参考にして、自身の自己紹介サイトのサイトマップを作成する。サイズはA4、フォーマットはpdf。サイボウズにアップロードする。
最低10ページ以上の項目になるようにサイトマップを作ってくること。
一般的には、趣味や略歴、作品を載せることが多いがそういったものにとらわれる必要はない。独自性の高いアイデアを期待しています。
提出期限：12/4（金）15:00まで

3. webデザイン基礎(12/4)

課題2の講評
画像の加工（Photoshop）
著作権
タイポグラフィ
和文／欧文フォント
フォントファミリー
サイズ／カーニング／トラッキング／行間
レイアウト
カラーカンプの作成（グリッド）

課題2　自身のサイトのトップページ作成（photoshop, illustrator）
幅760 x 高さ上限1000ピクセルのトップページを制作する。
作った画面に上下左右に20ピクセルずつの余白を取ってpdfファイルとして出力すること。
よって、提出するファイルは、「学籍番号.pdf」になる。

注：　個人情報なので、自身の氏名は出さずにニックネームなどにする、もしくは名字は出さない、住所なども書かないように気をつけること。

提出期限：12/11（金） 15:00まで

参考：フリー素材、参考サイトなど

4. スタイルシート基礎(12/11)

スタイルシート（文字）
webにおける配色
スタイルシート（レイアウト）

参考：XHTMLのチェックサイト
参考：スタイルシートのチェックサイト

実習用ファイル（教員用）

5. 制作期間(12/18)

作成したウェブサイトを使用して、自分自身をプレゼンテーションする。必ず、htmlとCSSを使うこと。

評価の対象として「ウェブサイトのデザイン及び内容の独自性／洗練度」、「正しくhtml+CSSが記述されているか」、「プレゼンテーション能力」を採点する。
一人3分間以内で、自身のサイトを見せながらプレゼンを行なう。

最低10ページ以上作成する。

提出期限：1/8（金）15:00までに自身のサイトのURLをサイボウズに提出。

6. プレゼン及び講評(1/8)