授業計画 |
| 回数 |
学習目標 |
学習項目 |
| 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.パスについて学ぶ |
画像を表示する。
横幅、高さ、Altを学習する
パスについて学習する |
| 【理解度確認】提出課題 |
| 5 |
1.CSSの概念を理解を確認出来る。
2.CSSの基本文法の用語を理解する。 |
CSSとは何かとその用語を学習する。
HTMLの属性とクラスを学習し、CSSを使い装飾を加える。
文字の装飾、color, font-size,font-weight,opacity,を実践する。 |
| 【理解度確認】提出課題 |
| 6 |
1.CSSの基本的なプロパティを理解を確認出来る。
2.CSSの基本文法（セレクタ、プロパティ、値、単位）で作成が出来る。
3.HTMLの基本文法（クラス、属性）を作成出来る。 |
HTMLの属性とクラスを学習し、CSSを使い装飾を加える。
文字の装飾、line-height,letter-spacing と背景の装飾 backgroundを実践する。 |
| 【理解度確認】提出課題 |
| 7 |
1.リンクの仕方を学ぶ
2.擬似クラスの概念を理解を確認出来る。 |
他サイトへリンクを行う a タグを学習する。
基本的な擬似クラスのE:visited, E:hover, E:active を学習する。 |
| 【理解度確認】提出課題 |
| 8 |
1.文字を装飾するプロパティの理解を確認出来る。 |
空のspanタグ、文字の調整に使う基本的なプロパティ、text-decoration, text-align、text-shadow、font、font-family, outline,sub,sup,text-shadow,を学習する。 |
| 【理解度確認】提出課題 |
| 9 |
1.ボックスモデルを学習する。
2.CSSの基本文法（子孫セレクタ）の理解を確認出来る。 |
ボックス要素に触れ、divタグと、レイアウトに関わるプロパティのmargin, width, height, box-shadow, border,を学習する。
レイアウトに関わるCSS、display, position, floatに触れる。 |
| 【理解度確認】提出課題 |
| 10 |
1.HTMLで表を作成出来る。
2.WEBフォントを使って書体を変更する |
HTMLのtable、CSSのpaddingを使い、表の作成を学習する。
外部サービスの機能を使う |
| 【理解度確認】提出課題 |
| 11 |
1.リッチコンテンツに触れる
2.外部サービスの埋め込みに触れる |
video, audio, iframe などを使った要素に触れる
複数クラスタ、隣接クラスタ、疑似クラスタに触れる
CSSアニメーションや疑似セレクタなどに触れる |
| 【理解度確認】提出課題 |
| 12 |
1.テンプレートファイルを用いてサイトを構築することが出来る。
2.WEBレイアウトについて理解する。 |
テンプレートファイルからサイトを構築する
WEBサイトのレイアウトについて学ぶ |
| 【理解度確認】提出課題 |
| 13 |
1.どのようなWEBサイトにするか決める
2.背景画像の更新が出来る。 |
テンプレートのサイトを更新していく。
background-imageを学習する。 |
| 【理解度確認】提出課題 |
| 14 |
1.バナー画像を作成して更新することが出来る。 |
WEBサイト上のバナーの作り方を学ぶ |
| 【理解度確認】提出課題 |
| 15 |
1.テンプレートのHTMLを完成させることが出来る。 |
文章、画像の変更を行う。 |
| 【理解度確認】提出課題 |
