授業計画 |
| 回数 |
学習目標 |
学習項目 |
| 1 |
1. WEBサイトが何でできているかを理解する。
2. 課題を提出出来る。 |
WEB業界、WEBの職種、授業との関係を理解する。
WEBサイトとは何でできているかを理解し、作成する。
自己紹介をする文章を作成する。
課題の提出の仕方を理解する。 |
| 【理解度確認】提出課題 |
| 2 |
1.WEBサイトファイルを作る。
2.Dreamweaverの導入を学習する。
3.HTMLについて学習する。
4.文章構造の種類を学習する |
Dreamweaverを起動し、名称を理解する。
HTML言語について理解する。
文章構造の種類を理解し、作成する。 |
| 【理解度確認】提出課題 |
| 3 |
1.HTML5の基本文法（要素、開始タグ、終了タグ、入れ子）の作成が出来る。
2.基本的なHTMLタグを理解を確認できる。
3.HTML5の基本文法の用語を理解する。 |
HTMLとは何かを学習する。
Dreamweaverを使い、基本文法を直打ちで実践し、開始タグ、終了タグを学習する。
HTMLタグのh1,h2,p,ol,li,ul,brを学習する。 |
| 【理解度確認】提出課題 |
| 4 |
1.HTMLの基本文章構造のタグを理解する。
2.HTMLの画像を表示が出来る。
3.パスについて学ぶ。 |
改行、強調、画像の表示を学習する。
横幅、高さ、Altを学習する
パスについて学習する |
| 【理解度確認】提出課題 |
| 5 |
1.WEBサーバーへWEBサイトをアップロード出来る。
2.CSSファイルを作る。
3.CSSの概念を理解が出来る。 |
CSSとは何かとその用語を学習する。
HTMLの属性とクラスを学習し、CSSを使い装飾を加える。
文字の装飾、color を実践する。 |
| 【理解度確認】提出課題 |
| 6 |
1.CSSの基本文法の用語を理解する。
2.CSSの基本的なプロパティを理解を確認出来る。
3.CSSの基本文法（セレクタ、プロパティ、値、単位）で作成が出来る。 |
CSSを使い font-size,font-weight,opacity, line-height,letter-spacingなどを実践する。 |
| 【理解度確認】提出課題 |
| 7 |
1.HTMLの基本文法（クラス、属性）を作成出来る。
2.リンクの仕方を学ぶ。
3.擬似クラスの概念を理解を確認出来る。 |
HTMLの属性とクラスを学習し、他サイトへリンクを行う a タグを学習する。
基本的な擬似クラスのE:visited, E:hover, E:active を学習する。 |
| 【理解度確認】提出課題 |
| 8 |
1.divタグを使いボックスレイアウトの作成する。
2.CSSでdivを装飾できる。
3.HTMLで表を作成できる |
空のspanタグ、文字の調整に使う基本的なプロパティ、text-decoration, text-align、text-shadow、font、font-family, outline,sub,sup,text-shadow,を学習する。 |
| 【理解度確認】提出課題 |
| 9 |
1.ボックスモデルを学習する。
2.CSSのdisplayを使用する。
2.CSSの基本文法（子孫セレクタ）の理解を確認出来る。 |
ボックス要素に触れ、divタグと、レイアウトに関わるプロパティのmargin, width, height, box-shadow, border,を学習する。
レイアウトに関わるCSS、display, position, floatに触れる。 |
| 【理解度確認】提出課題 |
| 10 |
1.CSSのPosition関連について作成ができる。
2.リッチコンテンツにふれる。
3.外部サービスの埋め込みができる。
4.応用のHTML、応用のCSSの紹介 |
Postionを使い表を自在に配置する。
XやYoutubeなどの埋込を実践する。
応用のHTMLタグ、iframe、Video、audioなどを紹介
応用のCSSプロパティ、animation などを紹介 |
| 【理解度確認】提出課題 |
| 11 |
1.テンプレートファイルを用いてサイトを構築することが出来る。
2.サイトコンテンツを考える。
3.WEBディレクターの業務内容について知る。 |
video, audio, iframe などを使った要素に触れる
複数クラスタ、隣接クラスタ、疑似クラスタに触れる
CSSアニメーションや疑似セレクタなどに触れる |
| 【理解度確認】提出課題 |
| 12 |
1.テンプレートファイルを更新する。
2.サイトコンテンツ用の素材を収集する。 |
テンプレートファイルからサイトを構築する
WEBサイトのレイアウトについて学ぶ |
| 【理解度確認】提出課題 |
| 13 |
1.どのようなWEBサイトにするか決める。
2.WEBデザイナーの業務内容について知る。 |
テンプレートのサイトを更新していく。
background-imageを学習する。 |
| 【理解度確認】提出課題 |
| 14 |
1.バナー画像を作成して更新することが出来る。 |
WEBサイト上のバナーの作り方を学ぶ |
| 【理解度確認】提出課題 |
| 15 |
1.HTML、CSSの応用について知る。
2.テンプレートのHTMLを完成させることが出来る。 |
文章、画像の変更を行う。 |
| 【理解度確認】提出課題 |
