WEBデザイン 火3.4 金1.2(4F Macルーム)
●この授業で行う内容 ・Illustrator・Photoshopで作成したデータをDreamweaverを使ってWEB上に公開する。 ・WEBの仕組みを理解しより新しい形のWEBシステムに対応したデザインを修得する。 ・3つのソフトを渡り歩く操作による表現の修得を目指す。 |
●到達目標 ・Dreamweaverの基本操作のマスター。 ・Illustlatorを使用したレイアウト技術のマスター。 ・WEBデータの作成WEBデータの作成・レイアウトの方法を修得し様々な表現を可能にする技術の修得。 |
●実 践 ・課題制作を通じて実践により近い状況でデザインソフトを使いこなし修得する。 ・Web制作を行い、自分の作品を紹介するホームページを公開する。 |
成績評価基準 操作技術50%・作画技術40%・出席状況・授業態度10% |
前期
| コ マ シ ラ バ ス | |||||||||||||||||||||||||||
| 週 | 授 業 内 容 | 実施日 | 週 | 授 業 内 容 | 実施日 | ||||||||||||||||||||||
| 1 | ・サービスのID取得の方法 ・WEBサービスの契約 | 4/11 （火） | 4/14 （金） | 9 | 第９章ショップ情報ページを作成しよう／WEBに使用する画像の形式(教科書：P.129) | 6/13 （火） | 6/16 （金） | ||||||||||||||||||||
| 2 | 第１章+11章 DREAM WEAVERに契約内容を設定 (教科書：P.19〜30.144~155) | 4/18 （火） | 4/21 （金） | 10 | 第１０章ファイルの管理 2段組みレイアウトのポイント | 6/20 （火） | 6/23 （金） | ||||||||||||||||||||
| 3 | 第２章 新規ファイルの作り方／タイトルの設定／テキストの打ち方／ファイル保存／ブラウザで確認 | 4/25 （火） | 4/28 （金） | 11 | 子孫セレクタ 3段組みレイアウトのポイント | 6/27 （火） | 6/30 （金） | ||||||||||||||||||||
| 4 | 第３章 見出しタグ／リストタグの打ち方／アドレスタグ／強調タグ | 5/9 （火） | 5/12 （金） | 12 | 1学期課題仕上げ | 7/4 （火） | 7/7 （金） | ||||||||||||||||||||
| 5 | HTMLデータをネット上に公開する方法(=提出方法)の確認 | 5/16 （火） | 5/19 （金） | 13 | |||||||||||||||||||||||
| 6 | 第４章 表の作成／画像の挿入／画像の変更 第５章リンクの設定／外部リンク／メールアドレスのリンク | 5/23 （火） | 5/26 （金） | 14 | |||||||||||||||||||||||
| 7 | 第６章グループ化 [idとclass] 第７章cssファイル作成／cssをHTMLに読み込ませる | 5/30 （火） | 6/2 （金） | 15 | |||||||||||||||||||||||
| 8 | 第８章ロールオーバーイメージを追加しよう | 6/6 （火） | 6/9 （金） | 16 | |||||||||||||||||||||||
後期
| コ マ シ ラ バ ス | |||||||||||||||||||||||||||
| 週 | 授 業 内 容 | 実施日 | 週 | 授 業 内 容 | 実施日 | ||||||||||||||||||||||
| 1 | WEB 2学期 概要 ・CSSとHTMLとは何か[1学期復習] ・【1学期の復習課題】元々作られているテンプレートを改造する | 9/5 （火） | 9/8 （金） | 7 | ・2)練習 : lightbox 作成実践 ・3)自分のサイトの表現にあったjQueryを探す→仕組みの把握 4) 〃 →作成実践 | 10/17 （火） | 10/20 （金） | ||||||||||||||||||||
| 2 | ・WEBサイト用のフローチャートの作成1 ・(1学期の復習)-- idとclassの違い／ marginとpaddingの違い | 9/12 （火） | 9/15 （金） | 8 | ・自分のサイト構成を再確認 =フローチャートの数値を詳細に書き改める ※フローチャートの提出2 | 10/24 （火） | 10/27 （金） | ||||||||||||||||||||
| 3 | ・WEBサイト用のフローチャートの作成2 ※フローチャートの提出1 ・(1学期の応用)-- スタイルシート3種類の適用方法の練習 | 9/19 （火） | 9/22 (金) | 9 | ・WEB用のフリー素材の探し方(商用利用可のデータを探す) ・(復習)WEB上に公開したコードそのものをWEBブラウザでチェックする方法 | 10/31 （火） | |||||||||||||||||||||
| 4 | ・WEBサイトのメニュー部分の作成 menu.htmlの作成実践 ・(1学期の応用)-- 子孫セレクタ---cssの効率化 | 9/26 （火） | 9/29 （金） | 10 | ・ブラウザ別CSS ・質問の出た前例のサンプルデータ | 11/7 （火） | 11/10 （金） | ||||||||||||||||||||
| 5 | ・カラム落ちとは---divボックスと段組の関係理解 ・テンプレートとは？ | 10/3 （火） | 10/6 （金） | 11 | ・仕上げ作業 1)テンプレート完成 2)メニューと各カテゴリー(コンテンツ)ページの完成 |
11/14
（火）
|
11/17
（金）
| ||||||||||||||||||||
| 6 | ・外部ツールの実装---SNSや配布パーツをサイトに表示させる方法 ・jQueryを組み込む 1)練習 : lightbox 仕組みの把握 | 10/10 （火） | 10/13 （金） | 12 | 3)jQueryを組み込み完成 4)SNSやWEBツール等の埋め込み表示完成 |
11/21
（火）
|
11/24
（金）
| ||||||||||||||||||||
| 13 | 5)作品集ページの完成1 6)作品集ページの完成2 |
11/28
（火）
|
12/1
（金）
| ||||||||||||||||||||||||
コメント
コメントを投稿