■ページイメージ

---

■著者からのメッセージ

アドビ システムズとマクロメディアが合併し、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　サイトのアクセシビリティを確認しよう
解答例

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

【Dwの使い方としては小難しくなっている気が。。。】2010/02/11

作例は素敵なのでがんばろう！！という気になるのですが、CSSの設定にばかり段階が割かれ何を目指しているのか目標が見えづらいです。
文章を追うだけで疲れてしまいます。文章の赤書きと黒文字が交錯して見えます。なぜそう設定するのか理解しにくい文章でした。
がんばって達成しても、それではこれから自分はこの使用法でDwを使うぞという気持ちになれません(@_@;)これよりいい使い方が無いなら手打ちの方がいいという気にさえなります。作例１つだけで終わってしまい、私が知りたかったところは載ってなかったから、厚いしページたっぷりなのに網羅しきれていない部分もあります。（全部載ってる本なんて無いのは当たり前の話ですが）
お試し版のCDが欲しくて買ったので、そう考えれば写真も綺麗だったし良かったかな。。。でも内容の割に価格高めなようにも感じます。!本の後半にはまた少し作例が有り、ちょっと補足的な勉強は出来ました。

【思ったほどではない。というか不親切な面も多々。】2009/11/27

独習でウェブサイトも少々作っており、
分からない部分の補足も兼ね、コメントの多いこちらの本を
ま、古いけどそんなに現状は変わってないでしょうと　中古で購入。

画面が小さく見にくいのは、レビューでも多々取り上げられていますが、
これは本文の通りの補足画面なので問題は無し。

ただ。。。

本文で
「ここをこうしてください」とか
「ここにこの数値を入れます」というのに対し、

なぜ、
どんな必要があって

という、肝心なことがかかれていないことが多い。
また、こんな事端折ってもいいのにというような基本操作に限って、
重複して書かれているので　最初は苛っときます。
言われたとおりやれば、その通りになるので「ああ、コレの説明がしたいのか」と分かるが、
素人で手に取った方には使い勝手が悪そう。
また、重要な部分をもっとピックアップして書くべきで
初心者にと言うよりは、初級以上の方が手に取る方がよいかと思いました。

【デザイン・機能美・操作性】2009/07/24

単に、ページ作成の知識だけではなく、ユーザビリティに富んだ機能美に優れたwebページの概念までも汲み取ることができる書籍です。

【実際にサイトを作って納得でした】2009/06/09

これまでHTML/CSSでサイトをつくる本を色々購入しましたが、この本で詳細にDreamweaverを使いながらサイトを一歩一歩構築していく手順がわかり、実際に作ってゆけて納得しました。
サンプルサイトも、シンプルで実用的でした。

また、文字は確かに小さいですが、読めますし、内容が十分なので自分には問題ありませんでした。

Dreamweaverがなくて、ソースコードからeditorで同じサイトはつくれますから、Dreamweaverがなくても十分html/css学習に役立つ本ではないでしょうか。

【できるクリエイター Dreamweaver クリエイターシリーズ】2009/05/10

ビルダーUSERにとっては、とってもムズイ代物。だが、この本なら最初からやっていけばある程度までいけるとこが良い。難しい記述用語は興味をもったら調べれば良い。
又大体の意味は注釈に書かれているので大体のニュアンスは把握出来る所が良い。
色んな本が出てる中で上位に入る本だと思う。参考になった？

コメント投稿欄