はじめに
DreamweaverはWebページ制作を強力にサポートしてくれるビジュアルツールです。しかし、ワープロやDTPソフトとは勝手が違い、Webページの基本的な作法を理解していないとちょっとしたデザインやレイアウトも思い通りにコントロールすることができません。そのため、「習得途中で挫折した」という声をよく耳にします。
それでは、Dreamweaverを活用するためには、別途、HTML/XHTMLやCSSを勉強し、文法などを完全に熟知しておく必要があるのでしょうか？
答えは "NO" です。
必要となるのは、HTML/XHTMLでマークアップし、CSSでデザインを指定するという基本的な作法や、「ボックスモデル」をベースとした考え方の理解です。このあたりがある程度見えてくると、細かな文法などの知識はDreamweaverが補ってくれます。特に、Dreamweaver CS5からはボックスモデルをわかりやすく、視覚的に確認できるようになり、HTML/XHTMLやCSSを学ぶのにも最適なツールとなっています。そこで、本書は
- Dreamweaverをこれから学ぼうとしている
- Dreamweaverをすでに使っているが、使いこなせていない
- HTML/XHTML＆CSSを勉強しようと思っているものの、テキストエディタでタグを記述するのは面倒くさいと思っている
といった方を対象に、ステップ・バイ・ステップでページを作成しながら、Dreamweaverの基本的な使い方からHTML/XHTML＆CSSの活用方法までを習得できるように構成しました。Dreamweaverの理解とHTML/XHTML＆CSSの理解を同時に進める1冊として、手元に置いていただければ幸いです。
本書の構成
本書ではWebページをステップ・バイ・ステップで作成しながら、Dreamweaverの基本的な使い方や、HTML/XHTMLとCSSを利用したページ制作の考え方やテクニックを紹介していきます。
イントロダクション
Chapter 1 Dreamweaverで効率よくページを作成するために
Dreamweaverで効率よくページを作成するために知っておきたい、Webページの基本的な作法の概要を紹介します。
基本編
シンプルなページの作成を通して、DreamweaverやHTML/XHTML、CSSの基本を紹介していきます。
Chapter 2 文字の表示とデザイン
見出しや文章を入力してHTMLタグでマークアップし、スタイルシートでデザインを指定していきます。
Chapter 3 レイアウト
見出しや文章を罫線で囲み、横幅を指定して画面の中央に配置します。また、余白サイズを調節してレイアウトを仕上げていきます。
Chapter 4 画像とリンク
画像の表示やリンクの設定を行います。また、背景画像を利用してページのデザインをカスタマイズします。
Chapter 5 表示の確認とアップロード
完成したページの表示を、ブラウザやAdobe Browser Labで確認します。また、サーバーにアップロードしてインターネット上に公開します。
サイト構築編
DreamweaverのテンプレートやCSSのセレクターなどを組み合わせて、トップページとコンテンツページで構成したサイトを構築していきます。
Chapter 6 段組みレイアウトとナビゲーション
３段組みでレイアウトするサイトのトップページを作成します。
Chapter 7 テンプレートの活用とコンテンツページの作成
テンプレートを活用してコンテンツページを作成していきます。テーブルやフォームなどの作成方法も紹介します。
応用編
Chapter 8 パワーアップアレンジ
ウィジェットなどを利用して、画像のロールオーバーやライトボックスなどの設定を行います。また、CSS3やHTML5を利用する方法も紹介します。
応用編
CMS WordPressのサイトをカスタマイズする
WordPressで構築しているサイトをDreamweaverで開き、表示を確認しながらデザインをカスタマイズする方法を紹介します。
もくじ
Chapter 1 イントダクション：Dreamweaverで効率よくページを作成するために
STEP 1 ワープロやDTPソフトとDreamweaverの違い
STEP 2 Webページの作法
Chapter 2 基本編：文字の表示とデザイン
STEP 1 Dreamweaverを使ってみる
STEP 2 ページの新規作成
STEP 3 文字を入力する
STEP 4 見出しを指定する
STEP 5 スタイルシートでデザインしたい箇所を選択する
STEP 6 スタイルシートで見出しのデザインを指定する
STEP 7 スタイルシートで文章のデザインを指定する
STEP 8 著名とコピーライトをIDで区別して個別のデザインを指定する
STEP 9 文章中の一部のデザインを変更する
Chapter 3 基本編：レイアウト
STEP 1 <div>でグループ化する
STEP 2 罫線で囲む
STEP 3 横幅を指定して中央に配置する
STEP 4 見出しと段落の間隔を調節する
STEP 5 罫線内の余計な余白を削除する
STEP 6 罫線とコピーライトの間隔を調節する
STEP 7 文字に下線を引いて間隔を調節する
STEP 8 背景に色をつけて表示する
STEP 9 区切り線を表示する
Chapter 4 基本編：画像とリンク
STEP 1 画像を挿入する
STEP 2 画像をドラッグして挿入する
STEP 3 画像のまわりの余白サイズを調節する
STEP 4 背景画像を表示する
STEP 5 リンクを設定する
STEP 6 リンクのデザインを指定する
Chapter 5 基本編：表示の確認とアップロード
STEP 1 ブラウザでの表示を確認する
STEP 2 ページをアップロードする
Chapter 6 サイト構築編：段組みレイアウトとナビゲーション
STEP 1 サイト構築の準備をする
STEP 2 サイトの基本情報を表示する
STEP 3 クラスを利用してデザインを指定する
STEP 4 セレクターのグループ化を利用してデザインを指定する
STEP 5 サイト名とコピーライトのデザインを指定する
STEP 6 全体の横幅を指定して画面の中央に配置する
STEP 7 コンテンツを追加する
STEP 8 コンテンツのデザインを指定する
STEP 9 スニペットを利用してコンテンツを増やす
STEP 10 ３段組みでレイアウトする
STEP 11 ナビゲーションバーを作成する
Chapter 7 サイト構築編：テンプレートの活用とコンテンツページの作成
STEP 1 外部スタイルシートを利用する
STEP 2 テンプレートを作成する
STEP 3 テンプレートを利用してページを作成する
STEP 4 トップページにテンプレートを適用する
STEP 5 コンテンツページを２段組みでレイアウトする
STEP 6 子テンプレートを作成する
STEP 7 子テンプレートを利用してページを作成する
STEP 8 IDを指定してページごとにデザインを変える
STEP 9 表示位置を自由に調節してレイアウトする
STEP 10 テーブル（表組み）を作成する
STEP 11 フォームを作成する
Chapter 8 応用編：パワーアップアレンジ
STEP 1 画像にロールオーバーを設定する
STEP 2 ウィジェットを利用してライトボックスを設定する
STEP 3 Spryウィジェットでフォームの入力チェックを行う
STEP 4 CSS3とHTML5を利用する
STEP 5 画面サイズに応じてページのデザインを変更する