Webデザイン演習

講義概要

下記サイトにリンクされた動画YouTube(ナレーション付き)や教材を視聴し自ら決めたWebサイトのテーマに沿った作品を、前半と後半で計2回の課題提出を実施します。

評価方法は2つの課題提出によって決める。下記スケジュールは随時更新をおこなっていきます。注意してください

(科目の概要)

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

評価方法

2回の課題作成の提出により講義の理解度を判断する

課題提示

 第1回課題制作テーマ決定、オリジナル写真収取,Webサイト用テンプレート活用

講義計画

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

    • スマホでの写真素材が重要(テーマを決め,それに従った素材写真)
    • パソコンへ取り込むにはいくつか方法があります
      USBケーブルで繋ぐ②クラウドからダウンロードする ③アプリから連携(Googleフォトなど)
      必読!Dreamweverの 教材サイト

    第2講【画面構成とレイアウト (基礎レイアウト練習)】

  1. Webデザイン演習向け YouTube再生リスト   クリック
  2. フリーソフトのGIMP(画像処理ソフト)再生リストクリック
  3. (Photoshopの代替えGIMP基本操作)(DreamweaverCS4とGIMP連携)
  4. 001(Photshop基本の基本操作)
  5. 001-1(ソフトの操作に役に立つショートカットキーの基本)
  6. 00(DreamweaverとPhotoshopの基本的流れ①①)
  7. 01(DreamweaverとPhotoshopの基本的流れ①)
  8. 02(Dreamweaver画像挿入とデータ管理)
  9. 03(HTMLの基礎とCSSについて基礎の基礎)
  10. 04(シンプルWebテンプレによる制作,Photosho画像処理スタンプ機能と明るさ調整)
  11. 05(新しいWebテンプレの続き。。背景画像のくりかえし貼り付け )
  12. 06(⑤の続き。Webページの下の画像(緑の印)を繰り返し貼り付ける
    1. * Photoshop操作マニュアル紹介サイト(外部)
  13.  

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

    • HTMLの基礎 画像の編集 Web全体の構成と編集
    • HTMLを学ぶ基礎の基礎データ
    • 07 (Photoshopで画像処理,解像度,画像の部分選択「コラージュ(画像合成)方法」)
    • 08 (01の関連テンプレ!このメニュー色などを変えたいができない!解決策操作 )
    • 09 (Webサイトで使用するファイル名とダメなファイル名について!画像ファイルJPG,PNG,GIFの違い
    • 10 (超シンプルテンプレート操作。文字タイトルを加工する方法など

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

      • WEB制作 初級編
      • Photshop操作(画像処理、アルファーチャンネル、背景透明化)
      • Dreamwever基礎参考サイト
      • CSS基礎用語 「幅、高さ 背景 罫線」「余白 レイアウト」「フォント リスト テーブル」
      • 配布プリント

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

      • Web画像編集(Photoshopを使用した、クイックマスクと透明画像を扱う方法)サンプルデータ  
      • このサンプルをダウンロードしてください。実際の画像張替え、文字入れ替え演習を行います
      • フォトレタッチ Photoshopを使用した中級編 サンプルデータ

      第6講【課題制作(1)】課題提出を受付開始 5月23日~28日締め切りは5月28日土24時!厳守!未提出者は評価なし

      • ZIP形式(30MB程度)でデータを下記掲示板へUP

      第7講 2022年 5月30日(月)【第1回Webサイト発表と採点】

       11 (課題投稿の手順動画 注意事項など) 12 (文字の色変えたい。うまく変えられない時)

      • 2時限クラス投稿掲示板 ID PASSはWebclass3資料を見るように!
      • !(ZIP形式で投稿すること!)(フォルダー名は学籍番号)
      • 作品のデータは、全て半角英数文字使用、ホルダーに入れて
      • 圧縮形式にして投稿する(30MB以内)
      • (投稿掲示板には,テーマ,学籍番号,作品内容,担当役割,工夫した点、見てもらいたいところなどを記述!)
      • 3時限クラス投稿掲示板 ID PASSはWebclass3資料を見るように!
      • (ZIP形式で投稿すること!)(フォルダー名は学籍番号)
      • 作品のデータは、全て半角英数文字使用、ホルダーに入れて
      • 圧縮形式にして投稿する(30MB以内)
      • (投稿掲示板には,テーマ,学籍番号,作品内容,担当役割,工夫した点、見てもらいたいところなどを記述!)

      第8講 後半【課題制作2に入ります。CSSとHTMLの連携】

      13 (何も無いところからWebページが作成HTML,CSSファイルできる)

      第9講【HTML.CSSサイト構築)1】

      14(1ページ追加できる。Googleマップ貼り付け!アクセスページ完成!)

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

      第11講【動的なWebサイト構築】

      第12講【HTML/CSS3/JQuery/JabaScript】

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

      • 16 テキスト加工の方法。立体文字や文字に影をつけたり、カッコ良い文字に加工)
      • 第二回課題提出の受付開始 7月18日(祝日授業あり~7/24(土) 24時に締切り
      • Web作成のおさらい。注意点

      第14講【最終課題発表会】

      • 2022年 第2回課題 7/25 評価と発表!
      • ●第2回課題 2限 投稿掲示板  ID PASSはいつもの

       

      • ●第2回課題 3限 投稿掲示板  ID PASSはいつもの
      • (ZIP形式で投稿すること!)(フォルダー名は漢字、カタカナは使用しないこと)
      • 作品のデータは、全て半角英数文字使用、ホルダーに入れて
      • 圧縮形式にして投稿する(40MB以内)
      • (テーマ、学籍番号、作品内容、担当役割、工夫した点、見てもらいたいところなど)

      第15講【最終課題の続き 考察 まとめ】

      • 【課題作品についての評価と考察】