■ページイメージ

---

■著者からのメッセージ

アドビ システムズとマクロメディアが合併し、GoLiveがCS3ファミリーから分離した今、プロ向けのWebオーサリングツールといえば、Dreamweaver CS3が独壇場となっています。 従来から根強いテキストエディタによるハンドコーディングや、特定の機能に特化した、軽くて安い「ミニアプリ」や、Movable TypeをはじめとするCMS、さらにマイクロソフトによるExpressionシリーズの投入といった状況はあります。しかし、バージョン1.0（日本語版は1.2から）から10年、Web制作者たちが使い込んできたDreamweaverは、強力なコーディング機能や、Dreamweaverテンプレートなどをもって、これからも現役であり続けるでしょう。 Web制作の現場では、ここ数年、テーブルレイアウトからCSSレイアウトへというドラスティックなシフトが起きています。まず、それぞれのコンテンツの役割をHTMLの本来あるべき用法できちんとマークアップし、文字に関する設定やレイアウトはスタイルシート（CSS）を使って行う「構造と分離」が進みつつあります。 HTML/XHTMLのマークアップをきちんと構造化することは、クライアントには理解しにくい部分ではありますが、「Web標準」と呼ばれる大きな流れの中で、データの再利用、SEO、アクセシビリティへの対応など、さまざまなメリットにつながります。 これからDreamweaverをはじめる方、すでにWeb制作をされていてこれからCSSレイアウトに取り組む方にとって、この書籍がお役に立てれば幸いです。（本書「まえがき」より引用）

---

■編集者からのメッセージ

プロのWeb制作の現場ではスタンダード的存在となったDreamweaver。その最新版「CS3」に完全対応した入門書が完成しました。 クリエイター業界で著名な鷹野雅弘氏を著者に迎え、基本を押さえつつ、Web制作の現場に即した役立つノウハウ、テクニックを盛り込めたと思います。誌面の手順を追ってサンプルサイトを制作していくと、単に縦長に流し込まれただけのページの原稿が、CSSによってみるみる格好いいプロのデザインに変化していく様は圧巻です。しかもそれがWeb標準へとつながっていくのです。みなさんもシンプルなHTMLファイルがCSSによって大変身する感動をぜひ味わってください。そして惜しげもなく披露されているプロのテクニックをご活用ください。付属のDVD-ROMには1か月間、機能制限なしに無料で利用できるDreamweaverの体験版が収録されていますので、そちらもぜひご活用ください。

まえがき
本書を読み始める前に
Contents

■TUTORIAL
Lesson 1　ページの基本を作成しよう
Lesson 1-01　サイト制作を始める前に
Lesson 1-02　新しく作るサイトを定義しよう
Lesson 1-03　HTMLファイルの基本設定を行おうⅠ
Lesson 1-04　HTMLファイルの基本設定を行おうⅡ
Lesson 1-05　ページの内容をマークアップしよう
Lesson 1-06　必要な箇所にリンクを設定しよう
Lesson 1-07　作成したページをブラウザでプレビューしてみよう
Lesson 1-08　ページに画像を挿入しよう
Lesson 1-09　リンクにタイトルの設定をしよう
Lesson 1-10　ページの内容をグループ分けしよう
Lesson 1-11　トップページのバリデートをしよう
完成例

Lesson 2　CSSでページのレイアウトを設定しよう
Lesson 2-01　CSSファイルを作成しよう
Lesson 2-02　CSSファイルをリンクさせよう
Lesson 2-03　CSSでページの基本情報を設定しよう
Lesson 2-04　リンクをCSSで設定しよう
Lesson 2-05　コンテンツ領域全体の設定をしよう
Lesson 2-06　段組を設定しよう
完成例

Lesson 3　トップページをCSSでデザインしよう
Lesson 3-01　ヘッダー領域に背景画像を挿入しよう
Lesson 3-02　ヘッダー領域のロゴの位置を設定しよう
Lesson 3-03　グローバルナビゲーションの位置を設定しよう
Lesson 3-04　グローバルナビゲーションをボタン風にデザインしよう
Lesson 3-05　サイドバーの画像とテキストの位置をCSSで設定しよう
Lesson 3-06　挨拶文や最新情報の体裁をCSSで設定しよう
Lesson 3-07　フッター領域のナビゲーションをCSSで設定しよう
Lesson 3-08　画像リンクのデザインをコントロールしよう
Lesson 3-09　ヘッダー領域のリンクを設定しよう
完成例

Lesson 4　テンプレートを使ってページを作成しよう
Lesson 4-01　テンプレートを作成しよう
Lesson 4-02　ページを作成してリンクを設定しよう
Lesson 4-03　グローバルナビゲーションを調整しよう
完成例

Lesson 5　共通した領域を作成しよう
Lesson 5-01　ヘッダー領域の背景を変更しよう
Lesson 5-02　サイドバー領域の見出しを画像に変更しよう
Lesson 5-03　サイドバー領域のメニューを作成しよう
Lesson 5-04　サイドバー領域のメニューのリンクを設定しよう
完成例

Lesson 6　目的に合った個別ページを作成しよう
Lesson 6-01　FAQページの内容を作成しようⅠ
Lesson 6-02　FAQページの内容を作成しようⅡ
Lesson 6-03　会社概要のページを作成しようⅠ
Lesson 6-04　会社概要のページを作成しようⅡ
Lesson 6-05　代表的なお仕事のページを作成しようⅠ
Lesson 6-06　代表的なお仕事のページを作成しようⅡ
Lesson 6-07　お問い合わせのページを作成しようⅠ
Lesson 6-08　お問い合わせのページを作成しようⅡ
Lesson 6-09　ページ内リンクを設定しよう
完成例

■REFERENCE
Theme 1　Dreamweaver操作の基本
Theme 1-01　Dreamweaverの基本画面
Theme 1-02　表示画面を見やすくするには
Theme 1-03　パネルをカスタマイズするには
Theme 1-04　Dreamweaverの環境設定

Theme 2　サイトの基本設定
Theme 2-01　サイトの情報を定義するには
Theme 2-02　サイトの構成を編集するには
Theme 2-03　新しいドキュメントを作成するには

Theme 3　ソースコードの基本
Theme 3-01　コードビューの基本操作
Theme 3-02　ソースコードを効率よく編集するには

Theme 4　XHTMLの基本
Theme 4-01　マークアップの基本
Theme 4-02　ブロックレベル要素のマークアップ
Theme 4-03　そのほかのマークアップ方法

Theme 5　CSSの基本
Theme 5-01　CSSの基礎知識
Theme 5-02　CSSの組み込み

Theme 6　リンクの設定
Theme 6-01　リンクを設定するには
Theme 6-02　リンクを確認、修正するには
Theme 6-03　リンクを新しいウィンドウで表示するには
Theme 6-04　特殊なリンクとリンクの装飾

Theme 7　ファイルの読み込み
Theme 7-01　画像を挿入するには
Theme 7-02　配置画像のプロパティを設定するには
Theme 7-03　画像に文章を回り込ませるには
Theme 7-04　Flashファイルを活用するには

Theme 8　テーブルとフォーム
Theme 8-01　テーブルを挿入するには
Theme 8-02　テーブルの基本操作
Theme 8-03　セル、行、列を修正するには
Theme 8-04　テーブルの設定を変更する
Theme 8-05　Spryの基本
Theme 8-06　フォームを作成するには

Theme 9　サイトの公開と更新
Theme 9-01　リモートサイトに接続するには
Theme 9-02　ファイルをアップロードするには
Theme 9-03　複数人でリモートサイトのデータを扱うには

■TRAINING
Exercise1　リンクの下線を破線にし、ロールオーバーすると実線になるように設定しよう
解答例
Exercise2　トップページの最新情報のメンテナンス性を高めよう
解答例
Exercise3　印刷用のレイアウトを設定しよう
解答例
Exercise4　サイトのアクセシビリティを確認しよう
解答例

本書で使用しているサンプルファイルについて

コメント投稿欄