| 20 |
 |
- 映像
- HTMLの基本を理解しよう / HTML概論
- 個別
- Webページのヘッダー設定 [課題制作]
|
- 実習
- HTMLの基本／HTMLファイル作成／HTMLの入力
- 講義
- HTMLソース／Webサイトのリンク構造／CSSとは／ファイルサイズと文字コード
|
2h |
| 21 |
|
- 映像
- テキスト部分をマークアップしよう / インターネット概論
- 個別
- Webページのマークアップ(1) [課題制作]
|
- 実習
- Webに公開する情報の入力／見出しをつける／重要情報の強調／作者情報をつける／文章に段落をつける／コメントの挿入／そのほかテキスト要素の理解／箇条書きリストの作成／定義型リストの作成／番号リストの作成
- 講義
- インターネットとは／サーバーとサービス／URIとDNS／Webサーバーの動き／電子メール送受信の流れ
|
4h |
| 22 |
|
- 映像
- 画像・区切り線の挿入とリンクを設定しよう
- 個別
- Webページのマークアップ(2) [課題制作]
|
- 実習
- 画像の挿入／区切り線の挿入／リンクの設定
|
3h |
| 23 |
 |
- 映像
- CSS（スタイルシート）用のWebサイト画像を書き出そう
- 個別
- Webサイト画像のスライスと書き出し [課題制作]
|
- 実習
- CSS（スタイルシート）用の画像にスライス／画像を最適化／画像の書き出し／必要な画像を絞って書き出す
|
3.5h |
| 24 |
|
- 映像
- お問い合わせフォームを作成しよう / フォームレイアウト概論
- 個別
- フォーム制作 [課題制作]
|
- 実習
- フォームのテーブル作成／フォーム部品の挿入／コメントの挿入
- 講義
- フォームとは／フォーム要素の選択
|
2.5h |
| 25 |
|
- 映像
- フレームを作成しよう / Webワークフロー概論
- 個別
- Webページのフレーム制作 [課題制作]
|
- 実習
- インラインフレームの挿入／フレームの作成
- 講義
- Webサイト制作の流れ／デザイン部分の流れ／制作部分の流れ
|
3h |
| 26 |
 |
- 映像
- CSSの基本を理解しよう
- 個別
- CSSの基本 [理解度チェック]
|
- 実習
- CSSの基本／外部スタイルシートの読み込み
|
1h |
| 27 |
|
- 映像
- CSSでWebページの大枠のスタイルを設定しよう / CSSデザイン概論
- 個別
- WebページへのCSS設定(1) [課題制作]
|
- 実習
- テキストの表現に関するスタイルの設定／マージンとパディング／ページ内の全体、本文エリア、サイドエリアの作成／要素の回りこみと解除
- 講義
- CSSを使用したタイトルデザイン／ランディングページとは
|
3.5h |
| 28 |
|
- 映像
- CSSでヘッダーとナビゲーションのスタイルを設定しよう
- 個別
- WebページへのCSS設定(2) [課題制作]
|
- 実習
- 要素の配置／リストに関するスタイルの設定
|
2h |
| 29 |
|
- 映像
- CSSで本文エリアのスタイルを設定しよう / Web標準概論
- 個別
- WebページへのCSS設定(3) [課題制作]
|
- 実習
- Webサイト内の本文エリアに対するスタイル設定
- 講義
- Web標準とは／クロスブラウザ／ブラウザの表示モード／検索サービス／SEO対策とスパム／検索連動型広告
|
3.5h |
| 30 |
|
- 映像
- CSSでサイドエリアとフッタのスタイルを設定しよう / CSSレイアウト概論
- 個別
- WebページへのCSS設定(4) [課題制作]
|
- 実習
- Webサイト内のサイドエリアとフッタに対するスタイル設定／リキッドレイアウトと固定レイアウトの段組設定
- 講義
- CSSを使用したロールオーバー
|
3.5h |
| 31 |
|
- 映像
- テーブルに関するスタイルを理解しよう
- 個別
- WebページへのCSS設定(5) [課題制作]
|
- 実習
- テーブルに関するスタイルの理解
|
1.5h |
| 32 |
|
- 映像
- レイアウト調整とクロスブラウザについて理解しよう / ユーザビリティ概論
- 個別
- WebページへのCSS設定(6) [課題制作]
|
- 実習
- レイアウト調整／CSSハックでブラウザ間のバグを回避／独自拡張機能を使う
- 講義
- ユーザビリティの定義／アクセシビリティの定義／ユーザビリティとアクセスビリティの例／Web標準のメリット
|
3h |
| 33 |
 |
- 映像
- Dreamweaverの基本操作を理解しよう
- 個別
- Dreamweaverの基本操作 [理解度チェック]
|
- 実習
- Dreamweaverのインターフェース／サイトの定義／Dreamweaverの環境設定
|
1h |
| 34 |
|
- 映像
- DreamweaverでHTMLの要素を挿入しよう
- 個別
- Dreamweaverでのマークアップ [課題制作]
|
- 実習
- ページ制作の準備／div要素でのグループ化／見出しをつける／重要な情報の強調／リストの作成／文章に段落をつける／テキストへのリンク設定／画像の挿入／メディアの挿入／フォームの要素確認／特殊文字の挿入／IFRAMEとフレーム
|
4h |
| 35 |
|
- 映像
- DreamweaverでCSSを設定しよう
- 個別
- DreamweaverでのCSS設定 [課題制作]
|
- 実習
- マージン調整／見出しのスタイル設定／お問い合わせフォームの作成／リード文の作成／Webページの作成／パンくずリストの作成
|
3.5h |
| 36 |
|
- 映像
- Dreamweaverでイメージマップを作成しよう
- 個別
- イメージマップ制作 [課題制作]
|
- 実習
- Webページの作成／地図にイメージマップをつける／情報の入力
|
2h |
| 37 |
|
- 映像
- DreamweaverでWebサイトを完成させよう
- 個別
- Webページ制作 [課題制作]
|
- 実習
- ファイルの準備／Webページの作成／APエレメントを使う
|
7.5h |
| 38 |
|
- 映像
- Dreamweaverによるサイト管理の基本を理解しよう
- 個別
- サイト管理 [理解度チェック]
|
- 実習
- Dreamweaverの便利な機能／ヘッドコンテンツの確認／ファイルのアップロード／サイトのグループ管理
|
1h |
| 39 |
 |
- 映像
- JavaScriotファイルの作成 / プログラミング概論
- 個別
- Javascriptファイル作成 [課題制作]
|
- 実習
- JavaScriptの設定方法／WebページとJavaScriptファイルのリンク／簡単なJavaScriptを動かす／変数の理解
- 講義
- 動的なWebサイト／プログラミング言語とは／プログラム実行までの流れ／コンパイラとインタプリタ／クライアントサイドプログラムとサーバサイドプログラム／Webサイトとデータベースの連携
|
1.5h |
| 40 |
|
- 映像
- Javascriotのイベントと関数
- 個別
- 関数作成 [課題制作]
|
- 実習
- イベントとは／さまざまなイベント／関数の書式／関数を利用する
|
1.5h |
| 41 |
|
- 映像
- JavaScriptの条件分岐と繰り返し
- 個別
- Javascriptの実践制御構造 [課題制作]
|
- 実習
- 条件分岐とは／比較演算子／論理演算子／ifのネスト構造／繰り返し構造とは／分岐と繰り返しの組み合わせ
|
2h |
| 42 |
|
- 映像
- JavaScriptのさまざまな命令(1)
- 個別
- avascriptの命令適用(1) [課題制作]
|
- 実習
- さまざまな命令の実行／配列を利用する
|
2h |
| 43 |
|
- 映像
- JavaScriptのさまざまな命令(2)
- 個別
- Javascriptの命令適用(2) [課題制作]
|
- 実習
- ロールオーバーの展開／引数の利用／文字列処理／thisを使う
|
2h |
| 44 |
|
- 映像
- DOM（Document Object Model）基礎
- 個別
- DOM（文書オブジェクトモデル）の適用 [課題制作]
|
- 実習
- DOMの基礎知識／テキストを設定する／属性を設定する／スタイルを設定する
|
1.5h |
| 45 |
|
- 映像
- Dreamweaverでインタラクティブなページを作成しよう
- 個別
- インタラクティブなページの制作 [課題制作]
|
- 実習
- JavaScriptの基本／ビヘイビアを使う／Spryを使う／JavaScriptの外部化／TOPページのファイル名を変更する
|
3h |
| 46 |
|
- 映像
- Dreamweaverで作業を効率化しよう
- 個別
- Webサイト制作 [課題制作]
|
- 実習
- ライブラリの利用／テンプレートの利用／アセットの利用
|
7h |
![HTML/CSS/Dreamweaver/JavaScript [全27ステップ]](_img/title-html.gif)
