Webデザイン演習

講義概要

（科目の概要）

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

評価方法

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

●自ら決めたWebサイトのテーマに沿ったWeb作品を、前半と後半で計2回の課題提出を実施します。
●評価方法は2つの課題提出によって決める。
●下記スケジュールは随時更新をおこなっていきます。注意してください。

課題提示

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

講義計画

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

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

第2講[画面構成とレイアウト （基礎レイアウト練習）]

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

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