1. 授業の目的
- 現在主流となっているxhtml+CSSを実習によって体験することによる、html文書の構造の理解
- タイポグラフィやレイアウトの実習を行うことによる、デザイン基礎の学習
- 自己紹介サイトを制作することによる、他の学生への自身のプレゼンテーション実習
授業概要
今日のweb制作に携わる人間は非常に多岐にわたる知識が求められている。思いつくものを挙げただけでも、以下の知識が必須になるだろう。
- グラフィックデザイン（Photoshop、Illustratorの知識含む）
- xhtml/CSS
- Dreamweaverなどのオーサリングソフト
- JavaScript
- Flash（ActionScript）
- CGI（Perl）/PHPなどのサーバプログラミング
- 情報アーキテクチャ
- ユーザビリティ/アクセシビリティ
- SEO/SEM
など。
この授業は、そういった需要に応えられる事を前提に、webデザインにおける基本的な知識やプロセスを幅広く習得する。
成績評価
課題1, 2, 3→各10％ 課題4（最終課題）→20％ 出席→50％
スケジュール
1. xhtml基礎 (11/7)
なぜ、xhtml+CSSの実習が必要なのか
xhtmlの構造
DOCTYPE宣言と使用言語
文字コード
タグ
コメント
ウェブグラフィック（gif, jpeg, png）
画像の書き出し
ハイパーリンク
ファイル名に使える名称
サイトマップ
○課題1 自己紹介サイトのサイトマップ作成
サンプルのサイトマップを参考にして、自身の自己紹介サイトのサイトマップを作成する。サイズはA4、フォーマットはpdf。
最低10ページ以上の項目になるようにサイトマップを作ってくること。
独自性の高いアイデアを期待しています。
提出期限： 11/14（金）15:00まで
2. xhtml基礎 (11/14)
課題1の講評
メディアファイル（サウンド／動画）
メールのリンク
サーバへのデータアップロード
パーミッション
○課題2 自己紹介サイトのxhtmlのみによる構成
自身が作成したサイトマップに従って、xhtmlでサイトを構成する。CSSはまだ使わないこと。例えば、10ページでサイトマップを作った場合には、htmlファイルは10ページになる。
html間のリンクも作ること。
基本的に、テキスト情報と画像、サウンド、動画によって構成されたサイトになる。
あくまでもスケッチ的なものなので、最終的な情報が全部入っている必要はないが、なるべく詳しくテキストを書き出しておくこと。
作成したらサイトをサーバの自身のディレクトリにアップロードすること。
注： 個人情報なので、自身の氏名は出さずにニックネームなどにする、もしくは名字は出さない、住所なども書かないように気をつけること。
レイアウトや色を付けたりする必要はない。
3. xhtml基礎とwebデザイン基礎(11/21)
課題2の講評
著作権
テーブル
画像の加工（Photoshop）
配色、トーンの計画
レイアウト
カラーカンプの作成（グリッド）
4. webデザイン基礎とスタイルシート基礎(11/28)
タイポグラフィ
和文／欧文フォント
フォントファミリー
サイズ／カーニング／トラッキング／行間
スタイルシート（文字）
webにおける配色
○課題3 自身のサイトのトップページ作成（photoshop, illustrator）
幅955ピクセルのトップページを制作する。高さは自由だが、モニタにすべて入る目安は、高さ600ピクセル。この場合は余白含めて1055 x 700 pixelのphotoshopファイルを作ることになる。
作った画面に上下左右に50ピクセルの余白を取ってjpegファイルとして出力すること。
よって、提出するファイルは、「学籍番号.jpg」になる。
提出期限：12/5 15:00まで
5. スタイルシート基礎(12/5)
課題3の講評
スタイルシート（レイアウト）
6. プレゼン及び講評(1/9)
作成したウェブサイトを使用して、自分自身をプレゼンテーションする。
評価の対象としてウェブサイトの独自性、完成度ともに、プレゼンテーション自体も採点する。
一人3分間以内で、自身のサイトを見せながらプレゼンを行なう。
最低10ページ以上作成する。
提出期限：1/9（金）15:00までに自身のサイトのURLをサイボウズに提出。