WEB講座中級編　Adobe Dreamweaver CS3 ＋ HTML/CSS（win版）

本講座では、WEBサイト制作の基本となるHTML/CSSの学習を通して、Adobe Dreamweaver CS3を使った正しいWEBサイト制作を学習します。アクセシビリティーやSEOに配慮したWEBサイト制作など、これからのWEB制作に必要とされる知識やスキルや、初級講座からは一歩進めた、Adobe Dreamweaver CS3を使用したWEB制作作業の効率化方法など、実践で求められるスキルを習得したい方に最適です。

C2＝11月18日(水)・19日(木)・20日(金)

[対象]

簡単なWEBサイトでも、WEBサイト制作の経験のある方が対象です。これからAdobe Dreamweaver CS3を使ってHTML/CSSのコーディングを行いたい方、HTML/CSSのコーディングの基礎を改めて学習したい方、アクセシビリティーやSEOなど、これからのWEB制作に重要とされるスキルを学習したい方など。

[講師]

伊藤あゆみ　伊藤吉樹（デジタルスケープ所属・登録講師）
＊全講座にメイン講師の他にサブ講師がつきます。

一日目

  • ●講座の目標と作業の確認
    （・課題サイトの確認　・HTMLの基礎知識　・Dreamweaverの操作画面説明　・Dreamweaverでの新規HTMLファイル作成）
  • ●HTMLの基本構造
    （・DOCTYPE宣言/xml宣言/名前空間と言語コード・〈head〉内へのコーディング　・代表的な要素［タグ］と、非推奨の要素と属性）
  • ●演習：課題サイトの構造化HTMLコーディング
    （・各部のコーディング　・画像、リンクの挿入　・divやhrで領域を区切る　・コーディングチェック、アクセシビリティチェック）
  • ◎質疑応答

ニ日目

  • ●完成デザインの確認
  • ●CSSを使ったHTMLのデザイン、CSSの適用方法
  • ●Dreamweaverでの新規CSSファイル作成
  • ●CSSパネルの解説
    （・パネルの切換え　・新規ルールの作成　等）
  • ●CSSの代表的なプロパティを理解する
    （・ボックスモデル、視覚整形モデル　・文字色、背景　等）
  • ●サンプルHTMLにCSSを設定する
  • ●代表的なセレクタ
    （・要素・ID・クラスセレクタと子孫セレクタ　・ID属性/class属性とセレクタの使い方　・優先度の見分け方　等）
  • ●よく使う／扱い辛いプロパティ実践
    （・float、position　・疑似クラスを使ったロールオーバー）
  • ◎質疑応答

三日目

  • ●完成デザインの再確認
  • ●CSSファイルの作成、HTMLへのリンク
  • ●基本タグへのCSS設定
    （・リセットCSS　・bodyタグ　等）
  • ●レイアウト構造各部のCSS設定
    （・#container、#header、#mainContent　等）
  • ●各部へのCSS設定
    （・ヘッダー、メインナビ、メインエリア　・コピーと文章　・バナー　等）
  • ●完成確認
  • ●CSSハック
  • ●画像の種類/作成に関して
  • ●Javascript
  • ●スキルチェック
  • ◎質疑応答