レイアウト自由自在！Dreamweaver CS3（ドリームウィーバーCS3）CSSデザイン手法

レイアウト自由自在！Dreamweaver CS3 CSSデザイン手法は、CSS（カスケーディングスタイルシート）を使用したWebサイトデザインの制作を目標に、必要な知識とテクニックを習得するトレーニング講座です。各種ブラウザーでの見え方の違いや、Web標準化などの話題もご紹介します。

こんな方におすすめ！テーブルレイアウトでお困りの方に！

• テーブルを使ってレイアウトしているが、柔軟性がなく四苦八苦している
• Webサイト全体のデザインを変更したいが、ページがたくさんありすぎて挫折した
• CSSを利用すると非常に便利だ、と話には聞いているが、実際にどこから始めていいのかわからない
• ポータルサイトなどでよくみかける、2段組み、3段組みのレイアウトを作ってみたい
• 各ブラウザーでの見え方の違いに悩んでいる
• CSSを使ったWeb制作のワークフローを確認したい
• Web制作業務の担当になったが、ちまたにあるようなサイトが作れない

HTMLがすっきり

CSSとは、Cascading Style Sheets（カスケーディングスタイルシート）の略で、Webページのレイアウトを制御する技術（規格）です。

HTMLは、もともと文書構造の記述を目的としていました。そして時代とともにインターネットの利用頻度が高まるにつれ、見た目やレイアウトが重視され始めます。しかし本来、HTMLにそのような制御を行う要素は少なく、代替手段としてテーブル（table）が利用されるようになります。

しかしテーブルレイアウトには大きな欠点がありました。

• Webサイト全体のレイアウトをテーブルで作った場合、少し修正しただけでも、すべてのページを修正しなくてはならない
• 細かくレイアウトを指定しようとすると、テーブルが入れ子の状態になり、HTMLが複雑になる
• 複雑になったHTMLは、修正もしにくく、視認性も悪く、もちろんファイルサイズも大きくなる
• table要素は、もともと表（ひょう）を記載するためのものなので、そもそも使い方がまちがっている

そこでCSSの登場です。HTMLは文書の論理構造のみを記述し、レイアウトや文字デザインなど、見た目の制御はCSSにまかせるようになったのです。内容と表現を別々に制御する、本来あるべき姿になりました。

現在この流れは世界のWebサイトの主流となり、Webの標準規格への準拠と言われています。標準規格に準拠することにより、アクセシビリティとSEO（検索エンジンへの最適化）の効果も高まります。

CSSでレイアウト自由自在

テーブルはあくまで「列と行がある表」でしかありませんので、細やかなデザインの指定ができません。しかしCSSを利用すれば、きめ細かい制御も行え、さらに「画面表示用にはこのレイアウト」「印刷したときはこのレイアウト」など、ユーザーの利用シーンに応じて自動的にデザインを変更することができます。

Dreamweaver（ドリームウィーバー）で作業工数が削減

Adobe Dreamweaver CS3（アドビ ドリームウィーバーCS3）は、複雑になりがちなCSSを管理するために、使い勝手のよい機能やインターフェースを搭載しています。このDreamweaverを利用して、CSSの設計から作成、管理方法をマスターします。

※この講座ではDreamweaver自体の初歩的な操作は学習しませんので、基本操作に不安がある方はAdobe Dreamweaver CS3：Fundamentalsの受講をおすすめします。

Adobe Dreamweaver CS3 販売中！

もちろんデザインテクニックだけでなく、CSSでデザインする際の大きな課題である「各ブラウザーでの見え方の違い」に関するトラブルシューティングも、多数ご紹介します。その日からすぐに使える、実践的なテクニックが満載です。

レイアウト自由自在！Dreamweaver CS3 CSSデザイン手法で、フルCSSサイトにチャレンジ！

---

レイアウト自由自在！Dreamweaver CS3 CSSデザイン手法

講座種別	この講座はm-Schoolオリジナル講座です
対象者	Webデザイナーを目指す方 企業のWeb担当の方 Adobe Dreamweaver CS3：Fundamentalsを受講済み、もしくは同等の知識があり、さらにレベルアップを目指す方
前提条件	ファイルの操作やテキストの編集など、一般的なパソコンの操作ができる Dreamweaver CS3の基本操作（イメージの配置やリンクの設定など）ができる CSSの基本的な使い方を理解している 前提条件の習得におすすめの講座 Adobe Dreamweaver CS3：Fundamentals
講座内容	CSSの概要と記述方法 セレクタの種類と特徴 DreamweaverでのCSS設定方法 CSSで2段組、3段組のWebページをレイアウトする 便利なツール紹介 CSSでナビゲーションバーのレイアウトやリンクをデザインする ブラウザごとの特徴と違い、原因と対処方法 見出しの効果的な表現方法（例：角丸デザイン） 印刷用レイアウトの作成 テンプレート機能を用いた文章構造（HTML）と視覚的デザイン（CSS）の管理 総合実習：サンプルサイトを作成する
講座目録	講座の目録をご確認頂けます。
習得目標	CSSで自在にページレイアウトができる 各種ブラウザーの見え方の違いに対応できる アクセシビリティを考慮したWebサイトを作成できる
受講環境	受講環境はWindowsです。Macintoshをご利用の方でも、ツールの操作などはWindows版とほぼ同等ですので、安心してお申し込みください。 ノート、筆記用具等はご持参ください。受講に必要なPC等の器材・資料はご用意しております。 そのほかご不明な点がありましたら、講座のFAQをご確認ください。
受講期間	2日間
受講時間	［通常コース］ 10:00～17:00 （受付9:40より / 13:00～14:00は昼休み）
会場	m-School / 東京都千代田区三崎町1-3-12 水道橋ビル8階 会場地図
受講料	63,000円 （税込）
支払方法	銀行振込にてお支払いください。 お振り込み先等は、お申し込み手順にてご確認ください。
セット講座	セットでお得なバリューパックもあります。 Dreamweaver CS3 ＋ CSS スタートパック
集合研修	この講座は、集合研修・企業研修として、お客さまのもとへ講師を派遣して開催できます。詳細は法人・自治体向け 集合研修のご案内をご覧ください。
その他	進行状況により、講座の内容や（お昼をはさむ場合は）昼休みの時間等、若干変更される場合がございますので、あらかじめご了承ください。 ご不明な点はお申し込み手順ページにてご確認、またはお問い合わせページよりお問い合せください。