講義概要

Webデザインとは、単なる見かけのデザインだけを指すのではなく、優れたHPの内容全般を設計（デザイン）する事を意味する。 本講義では魅力あるHPを目指し、WEBサイトを「自ら作るもの」としてとらえられるように既存サイトの背景・文法を紹介し、
そこからWEBサイトにおける表現技法や制作技法を学ぶ。
また、この科目の習得によってインターネット上での自己表現やプレゼンテーション能力の向上を図る。

評価方法

2回の課題作成とレポート提出（企画書）により講義の理解度を判断するとともに,Webテストを含め総合評価とする

課題提示

20xx年yy月zz日　第一回課題制作、オリジナル写真、Ｗｅｂサイト用資料、文章作成の課題あり

講義計画

1. 第一講【授業の全体概要説明とDreamweaverについて】

   • Dreamweverの 教材サイト

2. 第二講【画面構成とレイアウト （基礎レイアウト練習）】

   • セクションペーパーを使用した画面構成/イラストレーター使用した名刺作成/
   • 2015前半のグループ制作テーマ(3時限、4時限）
   • 旧　2014前半のグループ制作テーマ
   • * Firewoks操作マニュアル紹介サイト

3. 第三講【Web全体の基礎知識／HTML(XHTML)の基本、Webページ作成の手順　Web設計と配色・バランス】

   • HTMLの基礎講義　（無料テンプレート）
   • 2015年講義用テンプレート素材
   • サンプルデータ1　（HTMLの基本：解凍されたデータを移動させて開くこと）
   • サンプルデータ3　（HTMLの基本：解凍されたデータを移動させて開くこと）
   • サンプルデータ4　（HTMLの基本：解凍されたデータを移動させて開くこと）
   • 2016年3.4時限　第1回作品グループテーマ
   • 過去の2014年3時限　第一回作品グループテーマ
   • 過去の2014年4時限　第一回作品グループテーマ
   • 過去の2013年4時限　第一回作品グループテーマ
   • 参考サイト

     スタイルシートを使うと？

   • Dreamwever8の操作画面
   • 参考サイト　CSSの基礎（スタイルシート）
   • 外部サイト（超初心者のためのスタイルシート講座）
   • やさしいホームページ入門、
   • とほほのスタイルシート入門、　WEB for Beginner作成支援　（banban）
   • CSSの基礎
   • カラム/ヘッダー/フッターを学ぶ基礎の基礎データ
   • 2014ewb_4.pdf　初級WEB　（解凍されたデータを移動させて開くこと）
   • ゼミ生によるオリジナルＷＥＢサイトサンプルデータ
   • Ｗｅｂサンプルデータ（トップ画像が大きなサイト・ブラウンベージュ）（全てのページあり）
   • Ｗｅｂサンプルデータ（シンプルなグリーンサイト）（全てのページあり）
   • Ｗｅｂサンプルデータ（青を基調にしたシンプルサイト）（全てのページあり）
   • Ｗｅｂサンプルデータ（シンプルサイト）（全てのページあり）

4. 第四講【Webサイトの装飾・レイアウトの管理に有用なCSSの基礎知識 】

   • WEB制作　初級編
   • Dreamwever基礎参考サイト
   • CSS超基礎参考サイト
   • 外部CSSと埋め込みCSSについて　(簡単に解説しています）
   • CSS基礎用語　「幅、高さ　背景　罫線」「余白　レイアウト」「フォント　リスト　テーブル」
   • 配布プリント
   • (11月13日にWeb作品発表会「単独・グループ」おこないます！）
   • スタイルシート入門　参考ＷＥＢ
   • レイアウト作成　基礎の基礎から　ダウンロード　（中にファイル4つあります）
   • Ｄｒｅａｍｗｅｖｅｒ　その１ダウンロード
   • Ｄｒｅａｍｗｅｖｅｒ　その１ダウンロード

5. 第五講【CSS 情報の意味構造と表現のデザイン（Dreamweaver基礎1）】

   • このサンプルをダウンロードしてください。実際の画像張替え、文字入れ替え演習を行います
   • 来週の中間発表に向けての作業
   • Ｄｒｅａｍｗｅｖｅｒとの連携できる画像処理ソフト（文字デザイン）

6. 第六講【課題制作(1)】

   • このサンプルをダウンロードしてください。（WEBテンプレート）
   • このサンプルをダウンロードしてください。（WEBテンプレート）
   • サンプルを使って実際の画像張替え、文字入れ替え演習を行います
   • ＺＩＰ形式でデータを下記掲示板へＵＰするか、ＵＳＢ持参で発表してもらいます

7. 第七講　2016/11/11(金）【第一回グループWebサイト作成　発表会に向けて】

   • ●3時限クラス投稿掲示板 　ID PASSは黒板を見るように
   • (ZIP形式で投稿すること！）（フォルダー名は漢字、カタカナは使用しないこと）
   • ●4時限クラス投稿掲示板 　ID PASSは黒板を見るように！
   • (ZIP形式で投稿すること！）（フォルダー名は漢字、カタカナは使用しないこと）
   • 最終締め切りは11月10日昼休みでロックします！
   • 作品のデータは、全て半角英数文字使用、ホルダーに入れて
   • 圧縮形式にして投稿する（10ＭＢ以内）
   • 11/11に、1グループ。個人で1-2分程度でＷｅｂサイト内容の説明をしてもらいます
   • （テーマ、学籍番号、作品内容、担当役割、工夫した点、見てもらいたいところなど）

8. 第八講【課題制作２入ります。ＷＥＢ、ＷＥＢ+Ｆｌａｓｈ、】

   • 最終課題、単独制作、グループでの制作　
   • 10種類のテンプレート！サンプルデータ 　
   • HTML,CSSとＦｌａｓｈデータ貼り付け　説明書　ダウンロード
   • yasuoka LABのＴＯＰページをみてください（ソース表示）
   • WEBデザイン応用
   • Flashのみの　参考サイト
   • Flashのみの　参考サイト
   • Flashのみの　参考サイト

9. 第九講【FlashとHTML.CSSサイト構築）1】

   • 後半課題作品の最終テーマ　エクセルファイル
   • Ｗｅｂ画像編集（Ｐｈｔｏｓｈｏｐを使用した、クイックマスクと透明画像を扱う方法）サンプルデータ 　
   • 新規CSSを作成するサンプルデータ 　
   • サンプルデータ 　 シンプルな　SAMPLE WEB　（解凍されたデータを移動させて開くこと）
   • ユーザビリティーとW3C準拠
   • Flashでビデオ配信と操作 参考サイト
   • ビデオ配信サンプルデータ
   • 最終課題　2012年度　4時限クラスのテーマ　　　5時限クラスのテーマ

10. 第十講【HTML.CSSサイト構築 ）2】

    • テンプレートを使用したＤｒｅａｍｗｅｖｅｒ　サンプルデータ
    • サンプルデータ2　(シンプル版サイト例）
    • テンプレートとは？参考サイト

    • Adobe Dreamweaver：CSSコーディング

      CSSリファレンス：
    • （1）http://www.tohoho-web.com/css/（別ウィンドウで開きます）
      
    • （2）http://www.htmq.com/style/index.shtml（別ウィンドウで開きます）

11. 第十一講【Flashでのメニューデザインとプログラム】

    • サンプルを渡します

12. 第十二講【Flashでのメニューデザインとプログラム】

    • サンプルデータ
    • Ｆｌａｓｈでボタン操作演習（色彩学編）

13. 第十三講【最終課題作成日】

    • Photoshop講座その他

14. 第十四講　最終課題発表会(圧縮ファイルは、ＺＩＰ形式10-15ＭＢ以内)(不要な画像データは削除すること！)

    • 新　第二回課題　12/14締め切り！3時限クラス投稿掲示板 　ID PASSは黒板を見るように！
    • 新　第二回課題　12/14締め切り　4時限クラス投稿掲示板 　ID PASSは黒板を見るように！
    • *最終締め切り！は2016年12月22日18時に　サーバは投稿は停止にします！
    • (ZIP形式で投稿すること！）（フォルダー名は漢字、カタカナは使用しないこと） 作品のデータは、全て半角英数文字使用、ホルダーに入れて 圧縮形式にして投稿する（15ＭＢ以内）
    • 12/23金に、1グループ。中間モニターで作品を提示します。発表はありません。
      （テーマ、学籍番号、作品内容、担当役割、工夫した点、見てもらいたいところなど）は2016年12月23日金に
      Webclassテストを発表前に実施します。
    • 過去2013年4時限クラス投稿掲示板 　ID PASSは黒板を見るように！
    • 過去2013年5時限クラス投稿掲示板 　ID PASSは黒板を見るように！

15. 第十五講　補足説明日

    • 1月20日は質問日となります。