Webデザイン演習
講義概要
* 注意事項
5月11日より対面授業が実施できない場合
類似フリーソフトを活用した形式で,サイトにリンクされた動画(ナレーション付き)を視聴し自ら決めたテーマのWeb作品を前半と後半に各1回提出を予定とする。出席は毎回決まった時間にとる予定。評価方法は2つの課題よって決める方向となる。(Webclass試験は検討中)
下記スケジュールは、昨年度のものです。大きく変更されます。随時更新をおこなっていきます。注意してください。
Web作品制作には、オリジナル画像を複数枚必要するため、事前に準備をしおくこと。Webデザインとは、単なる見かけのデザインだけを指すのではなく、優れたHPの内容全般を設計(デザイン)する事を意味する。
本講義では魅力あるHPを目指し、WEBサイトを「自ら作るもの」としてとらえられるように既存サイトの背景・文法を紹介し、そこからWEBサイトにおける表現技法や制作技法を学ぶ。
また、この科目の習得によってインターネット上での自己表現やプレゼンテーション能力の向上を図る。
評価方法
2回の課題作成とレポート提出(企画書)により講義の理解度を判断するとともに,Webテストを含め総合評価とする
課題提示
2018年4月13日 第一回課題制作テーマ決定、オリジナル写真収取、Webサイト用テンプレート活用
講義計画
- 第一講【授業の全体概要説明とDreamweaverについて】
- 授業ガイダンス
- Dreamweverの 教材サイト
- 第二講【画面構成とレイアウト (基礎レイアウト練習)】
- イラストレーター使用した名刺作成/
- サンプルを使ったDreamwever操作
- サンプルデータ(クリックして解凍する)
- * Photoshop操作マニュアル紹介サイト
- 第三講【Web全体の基礎知識/HTML(XHTML)の基本、Webページ作成の手順 Web設計と配色・バランス】
- HTMLの基礎 画像の編集 Web全体の構成と編集
- 講義用テンプレート素材
- サンプルデータ0 (HTMLの基本:解凍されたデータを移動させて開くこと)
- サンプルデータ1 (HTMLの基本:解凍されたデータを移動させて開くこと)
- サンプルデータ3 サンプルデータ2(HTMLの基本:解凍されたデータを移動させて開くこと)
- サンプルデータ4 (HTMLの基本:解凍されたデータを移動させて開くこと)
- 単独作成ORグループテーマ決定
- 過去2016年3.4時限 第1回作品グループテーマ
- 過去の2014年3時限 第一回作品グループテーマ
- 参考サイト
スタイルシートを使うと?
- Dreamwever8の操作画面
- 参考サイト CSSの基礎(スタイルシート)
- 外部サイト(超初心者のためのスタイルシート講座)
- やさしいホームページ入門、
- とほほのスタイルシート入門、 WEB for Beginner作成支援 (banban)
- CSSの基礎
- カラム/ヘッダー/フッターを学ぶ基礎の基礎データ
- 2014ewb_4.pdf 初級WEB (解凍されたデータを移動させて開くこと)
- ゼミ生によるオリジナルWEBサイトサンプルデータ
- Webサンプルデータ(トップ画像が大きなサイト・ブラウンベージュ)(全てのページあり)
- Webサンプルデータ(シンプルなグリーンサイト)(全てのページあり)
- Webサンプルデータ(青を基調にしたシンプルサイト)(全てのページあり)
- Webサンプルデータ(シンプルサイト)(全てのページあり)
- 第四講【Webサイトの装飾・レイアウトの管理に有用なCSSの基礎知識 】
- WEB制作 初級編
- サンプルデータ1013(基本:解凍されたデータを移動させて開くこと)
- Photshop操作(画像処理、アルファーチャンネル、背景透明化)
- Photoshop参考サイト
- Dreamwever基礎参考サイト
- CSS超基礎参考サイト
- 外部CSSと埋め込みCSSについて (簡単に解説しています)
- CSS基礎用語 「幅、高さ 背景 罫線」「余白 レイアウト」「フォント リスト テーブル」
- 配布プリント
- (11月13日にWeb作品発表会「単独・グループ」おこないます!)
- スタイルシート入門 参考WEB
- レイアウト作成 基礎の基礎から ダウンロード (中にファイル4つあります)
- Dreamwever その1ダウンロード
- Dreamwever その1ダウンロード
- 第五講【CSS 情報の意味構造と表現のデザイン(Dreamweaver基礎1)】
- このサンプルをダウンロードしてください。実際の画像張替え、文字入れ替え演習を行います
- 来週の中間発表に向けての作業
- Dreamweverとの連携できる画像処理ソフト(文字デザイン)
- 第六講【課題制作(1)】 課題提出締め切りは6月2日18時!厳守!未提出者は成績評価しません
- 第七講 2018年 6/3(月)【第一回グループWebサイト発表会】
- ●2時限クラス投稿掲示板 ID PASSは黒板を見るように
- !(ZIP形式で投稿すること!)(フォルダー名は漢字、カタカナは使用しないこと)
- 作品のデータは、全て半角英数文字使用、ホルダーに入れて
- 圧縮形式にして投稿する(10MB以内)
- ●3時限クラス投稿掲示板 ID PASSは黒板を見るように!
- (ZIP形式で投稿すること!)(フォルダー名は漢字、カタカナは使用しないこと)
- 最終締め切りは6月2日18時で掲示板をロックします!
- 作品のデータは、全て半角英数文字使用、ホルダーに入れて
- 圧縮形式にして投稿する(10MB以内)
- 6/3に、1グループ。個人で1-2分程度でWebサイト内容の説明をしてもらいます
- (投稿掲示板には、テーマ、学籍番号、作品内容、担当役割、工夫した点、見てもらいたいところなどを記述!)
- 第八講【課題制作2入ります。CSSとHTMLの連携】
- 第九講【HTML.CSSサイト構築)1】
- 第十講【HTML.CSSサイト構築 )2】
- テンプレートを使用したDreamwever サンプルデータ
- サンプルデータ2 (シンプル版サイト例)
- テンプレートとは?参考サイト
-
Adobe Dreamweaver:CSSコーディング
CSSリファレンス: - (1)http://www.tohoho-web.com/css/(別ウィンドウで開きます)
- (2)http://www.htmq.com/style/index.shtml(別ウィンドウで開きます)
- 第十一講【動的なWebサイト構築】
- フォトレタッチ 中級編 サンプルデータ
- 第十二講【HTML/CSS3/JQuery/JabaScript】
- jQueryの サンプルデータ
- 画像がくるくる回る サンプルデータ
- Photoshop 文字の加工 (外部LINK)
- 第十三講【最終課題作成日】
- 最終課題作成日
- 第十四講 最終課題 (圧縮ファイルは、ZIP形式10-15MB以内)(不要な画像データは削除すること!)
- 2018年 第二回課題 7/23 Webテストと課題作品の講評会
- 第二回課題 7/21締め切り 2時限クラス投稿掲示板 ID PASSは黒板を!
- 第二回課題 7/21締め切り 3時限クラス投稿掲示板
- (ZIP形式で投稿すること!)(フォルダー名は漢字、カタカナは使用しないこと)
- 作品のデータは、全て半角英数文字使用、ホルダーに入れて
- 圧縮形式にして投稿する(15MB以内)
- 〇〇に、1グループ。中間モニターで作品を提示します。発表
- (テーマ、学籍番号、作品内容、担当役割、工夫した点、見てもらいたいところなど)
-
- 過去2013年4時限クラス投稿掲示板 ID PASSは黒板を見るように!
- 過去2013年5時限クラス投稿掲示板 ID PASSは黒板を見るように!
- 第十五講 補足説明日
- 質問日、予備日の予定