講義概要
Webデザインとは、単なる見かけのデザインだけを指すのではなく優れたHPの内容全般を設計（デザイン）する事を意味する。 本講義では魅力あるHPを目指し,WEBサイトを「自ら作るもの」としてとらえられるように既存サイトの背景・文法を紹介し、そこからWEBサイトにおける表現技法や制作技法を学ぶ。 また,この科目の習得によってインターネット上での自己表現やプレゼンテーション能力の向上を図る。
評価方法
2回の課題作成の提出により講義の理解度を判断するとともに,Webテスト（未定）を含め総合評価とする
課題提示
第1回課題制作テーマ決定、オリジナル写真収取,Ｗｅｂサイト用テンプレート活用
講義計画
- Zoomウェビナーで参加（J-PORT 時間割 WEBデザイン演習にてURL提示）
- スマホでの写真素材が重要（テーマを決め,それに従った素材写真 例地元の紹介サイト）
-
パソコンへ取り込むにはいくつか方法があります
①USBケーブルで繋ぐ
②クラウドからダウンロードする
③アプリから連携（Googleフォトなど） - 必読！Dreamweverの 教材サイト
-
CS5 CS5.5 CS6.0 （＊期限切れたら次のソフト）
- (DreamweverCS4） （DreamweverCS3） Dreamwever8 （←上記以外のソフトバージョン）
Brackets（Win版）フリーWeb制作ソフト（Adobe技術提供/サポート9月終了）
- サンプルを使ったDreamwever操作
- Webサイト作業の流れ図 資料04月19日
- 0-サンプル 03_03（クリックして解凍する）
- 1-サンプル web01（クリックして解凍する）
- 2-サンプル Web（クリックして解凍する）
- 3-サンプル 画像（クリックして解凍する）
- 4-サンプル テンプレート（背景黒の店BARサイト）
- 5-サンプル テンプレート（9つのサンプルあり）
Webデザイン演習 YouTube再生リスト
クリック
Photoshop体験版使用できない人向け再生リストクリック
（Photoshopの代替えGIMP基本操作）（DreamweaverCS4とGIMP連携）
以下再生リストと同じ動画がリンクしています。
- 02（Dreamweaver画像挿入とデータ管理）
- 03（HTMLの基礎とCSSについて基礎の基礎）
- 04（シンプルWebテンプレによる制作,Photosho画像処理スタンプ機能と明るさ調整）
- 05（新しいWebテンプレの続き。。背景画像のくりかえし貼り付け ）
- 06（⑤の続き。Webページの下の画像（緑の印）を繰り返し貼り付ける ）
- * Photoshop操作マニュアル紹介サイト（外部）
- HTMLの基礎 画像の編集 Web全体の構成と編集
- HTMLを学ぶ基礎の基礎データ
- 07 （Photoshopで画像処理,解像度,画像の部分選択「コラージュ（画像合成）方法」）
- 08 （01の関連テンプレ！このメニュー色などを変えたいができない！解決策操作 ）
- 09 （Webサイトで使用するファイル名とダメなファイル名について！画像ファイルJPG,PNG,GIFの違い ）
-
10 （超シンプルテンプレート操作。文字タイトルを加工する方法など ）
- グループテーマ決定
- 2021年第1回Webテーマ2限
- 2021年第1回Webテーマ3限
- 参考サイト CSSの基礎（スタイルシート）
- 外部サイト（超初心者のためのスタイルシート講座）
- とほほのスタイルシート入門、 WEB for Beginner作成支援 （banban）
- CSSの基礎
- カラム/ヘッダー/フッターを学ぶ基礎の基礎データ
- ゼミ生によるオリジナルＷＥＢサイトサンプルデータ
- Ｗｅｂサンプルデータ（トップ画像が大きなサイト・ブラウンベージュ）（全てのページあり）
- Ｗｅｂサンプルデータ（シンプルなグリーンサイト）（全てのページあり）
- Ｗｅｂサンプルデータ（青を基調にしたシンプルサイト）（全てのページあり）
- Ｗｅｂサンプルデータ（シンプルサイト）（全てのページあり）
- WEB制作 初級編
- Photshop操作（画像処理、アルファーチャンネル、背景透明化）
- Photoshop参考サイト
- Dreamwever基礎参考サイト
- CSS基礎用語 「幅、高さ 背景 罫線」「余白 レイアウト」「フォント リスト テーブル」
- 配布プリント
- ＊なんでも質問相談 掲示板 （匿名可）
- ZIP形式（10MB以下)でデータを下記掲示板へＵＰ
11 （課題投稿の手順動画 注意事項など）
12 （文字の色変えたい。うまく変えられない時）
- ●2時限クラス投稿掲示板 終了 ID PASSはWebclass3資料を見るように！
- ！(ZIP形式で投稿すること！）（フォルダー名は学籍番号）
- 作品のデータは、全て半角英数文字使用、ホルダーに入れて
- 圧縮形式にして投稿する（10ＭＢ以内）
- ●3時限クラス投稿掲示板 終了 ID PASSはWebclass3資料を見るように！
- (ZIP形式で投稿すること！）（フォルダー名は学籍番号）
- 作品のデータは、全て半角英数文字使用、ホルダーに入れて
- 圧縮形式にして投稿する（20ＭＢ以内）
- 6/29授業で一作品を1-2分程度でＷｅｂサイトの紹介と採点開始
- （投稿掲示板には,テーマ,学籍番号,作品内容,担当役割,工夫した点、見てもらいたいところなどを記述！）
- 最終課題、単独制作、グループでの制作
- テーマのっ選定！（課題1のブラッシュアップ作品でもOK当然、新規制作OK）
- ４ページ以上作成すること！表現は自由（JavaScriptやスマホ向けサイトでもOK)
- CSSの基礎
- カラム/ヘッダー/フッターを学ぶ基礎の基礎データ (ダウンロード)
- 後半 課題サイトのテーマ決定
- 10種類のテンプレート！（前半と同じもの)
13 （何も無いところからWebページが作成HTML,CSSファイルできる）
- Adobe Dreamweaver：CSSコーディング CSSリファレンス：
-
（1）CSSの用語集 リファレンス（別ウィンドウ）
- （2）CSS,HTMLレファレンス（別ウィンドウ）
- フォトレタッチ 中級編 サンプルデータ
- jQueryの サンプルデータ
- 画像がくるくる回る サンプルデータ
- Photoshop 文字の加工 （外部LINK）
- （おさらいのテンプレート)
- CSSを書く前の基本理念(外部サイト）
- 15（おさらい！分割されたCSSの説明、画像の入れ替え、背景画像の入れ替えなど）
- 16（ テキスト加工の方法。立体文字や文字に影をつけたり、カッコ良い文字に加工)
- 第二回課題提出の受付開始 7月5日～7/17 24時に締切り
- Web作成のおさらい。注意点
- 2021年 第2回課題 7/19 評価と発表！
- ●第2回課題 2限 投稿掲示板 ID PASSはいつもの
- 【課題作品についての評価と考察】