Webデザイン演習

講義概要

* 注意事項
5月11日より対面授業が実施できないことになりました!
出席は毎回決まった時間に,Zoomウェビナーで参加し出席をとります

下記サイトにリンクされた動画(ナレーション付き)や、教材を視聴し自己学習をする自ら決めたテーマのWeb作品を前半(6/22)と後半(8/3)に各1回提出を予定

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

(科目の概要)

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

評価方法

2回の課題作成の提出により講義の理解度を判断するとともに,Webテスト(未定)を含め総合評価とする

課題提示

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

講義計画

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

    • Zoomウェビナーで参加(J-PORT 時間割 WEBデザイン演習にてURL提示)
    • スマホでの写真素材が重要(テーマを決め,それに従った素材写真 例地元の紹介サイト)
    • パソコンへ取り込むにはいくつか方法があります
      USBケーブルで繋ぐ
      ②クラウドからダウンロードする 
      ③アプリから連携(Googleフォトなど)
    • 必読!Dreamweverの 教材サイト

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

    • CS5   CS5.5   CS6.0 (*期限切れの次のソフト)

    • サンプルを使ったDreamwever操作
    • 1-サンプル Web01(クリックして解凍する)
    • 2-サンプル Web(クリックして解凍する)
    • 3-サンプル 画像(クリックして解凍する)
    • 4-サンプル テンプレート(背景黒の店BARサイト)
    • 5-サンプル テンプレート(9つのサンプルあり)
    • 01(DreamweaverとPhotoshopの基本的流れ)
    • 02 (Dreamweaver画像挿入とデータ管理)
    • 03 (HTMLの基礎とCSSについて基礎の基礎)
    • 04 (シンプルWebテンプレによる制作,Photosho画像処理スタンプ機能と明るさ調整)
    • 05 (新しいWebテンプレの続き。。背景画像のくりかえし貼り付け )
    • 06 (⑤の続き。Webページの下の画像(緑の印)を繰り返し貼り付ける
    • * Photoshop操作マニュアル紹介サイト(外部)

     

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

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

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

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

    第6講【課題制作(1)】課題提出締め切りは6月29日AM10時!厳守!未提出者は成績評価しません

    • *なんでも質問相談 掲示板 (匿名可)
    • ZIP形式(10MB以下)でデータを下記掲示板へUP

    第7講 2020年 6月29日(月)【第1回グループWebサイト発表と採点】

     11 (ゆっくりと説明 課題投稿の手順 注意事項など)

     12 (文字の色変えたい。うまく変えられない時)

    • 2時限クラス投稿掲示板  ID PASSはWebclass3資料を見るように!
    • !(ZIP形式で投稿すること!)(フォルダー名は学籍番号)
    • 6月22日提出(最終締め切りは6月29日AM10時掲示板をロックします)
    • 作品のデータは、全て半角英数文字使用、ホルダーに入れて
    • 圧縮形式にして投稿する(10MB以内)
    • 3時限クラス投稿掲示板  ID PASSはWebclass3資料を見るように!
    • (ZIP形式で投稿すること!)(フォルダー名は学籍番号)
    • 6月22日提出(最終締め切りは6月29日AM10時掲示板をロックします)
    • 作品のデータは、全て半角英数文字使用、ホルダーに入れて
    • 圧縮形式にして投稿する(10MB以内)
    • 6/29授業で1グループ。1-2分程度でWebサイトの紹介と採点開始
    • (投稿掲示板には、テーマ、学籍番号、作品内容、担当役割、工夫した点、見てもらいたいところなどを記述!)

    第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講【最終課題作成日】

    • 制作日の時間(おさらいを少し)

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

    • 2020年 第2回課題 8/3 発表会!
    • (2020年8/2日18時掲示板 サーバストップ)
    • ●第2回課題 7/27 24時に締切り 2限クラス投稿掲示板  ID PASSはいつもの
    • ●第2回課題 7/27 24時に締切り 3限クラス投稿掲示板  ID PASSはいつもの
    • (ZIP形式で投稿すること!)(フォルダー名は漢字、カタカナは使用しないこと)
    • 作品のデータは、全て半角英数文字使用、ホルダーに入れて
    • 圧縮形式にして投稿する(15MB以内)
    • (テーマ、学籍番号、作品内容、担当役割、工夫した点、見てもらいたいところなど)