1. 書籍情報

Dreamweaverで学ぶHTML/XHTML&スタイルシート レッスンブック ― CS5対応

Dreamweaverを利用してステップ・バイ・ステップでページを作成。Dreamweaverの基本的な使い方からHTML/XHTML&CSSの活用方法までを習得できるように構成した一冊。

Dreamweaverで学ぶHTML/XHTML&スタイルシート  レッスンブック ― CS5対応

2011年01月 ソシム株式会社刊
B5変型 320ページ / 978-4883377503

はじめに

DreamweaverはWebページ制作を強力にサポートしてくれるビジュアルツールです。しかし、ワープロやDTPソフトとは勝手が違い、Webページの基本的な作法を理解していないとちょっとしたデザインやレイアウトも思い通りにコントロールすることができません。そのため、「習得途中で挫折した」という声をよく耳にします。

それでは、Dreamweaverを活用するためには、別途、HTML/XHTMLやCSSを勉強し、文法などを完全に熟知しておく必要があるのでしょうか?

答えは “NO” です。

必要となるのは、HTML/XHTMLでマークアップし、CSSでデザインを指定するという基本的な作法や、「ボックスモデル」をベースとした考え方の理解です。このあたりがある程度見えてくると、細かな文法などの知識はDreamweaverが補ってくれます。特に、Dreamweaver CS5からはボックスモデルをわかりやすく、視覚的に確認できるようになり、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 段組みレイアウトとナビゲーション

3段組みでレイアウトするサイトのトップページを作成します。

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 3段組みでレイアウトする
 STEP 11 ナビゲーションバーを作成する

Chapter 7 サイト構築編:テンプレートの活用とコンテンツページの作成

 STEP 1 外部スタイルシートを利用する
 STEP 2 テンプレートを作成する
 STEP 3 テンプレートを利用してページを作成する
 STEP 4 トップページにテンプレートを適用する
 STEP 5 コンテンツページを2段組みでレイアウトする
 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 画面サイズに応じてページのデザインを変更する

APPENDIX WordPressのサイトをカスタマイズする