1. 書籍情報

Dreamweaver+HTML5&CSS3レッスンブック

ステップ・バイ・ステップでページを作成し、Dreamweaverの基本的な使い方からHTML5&CSS3の活用方法までを習得できるように構成した1冊です。基本的なページ作成からテンプレートを利用したサイト構築、スマートフォン対応やjQuery Mobileの活用方法などを網羅しています。

Dreamweaver+HTML5&CSS3レッスンブック

2012年6月 ソシム株式会社刊
B5変型 320ページ / 978-4883378272

はじめに

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

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

答えは “NO” です。

必要となるのは、HTMLでマークアップし、CSSでデザインを指定するという基本的な作法や考え方の理解です。このあたりがある程度見えてくると、細かな文法などの知識はDreamweaverが補ってくれます。特に、DreamweaverではWebページのデザインやレイアウトの基本となる「ボックスモデル」をわかりやすく、視覚的に確認することができ、HTMLやCSSを学ぶのにも最適なツールとなっています。異なる画面サイズでの表示も簡単に確認することができますので、スマートフォンやタブレットなど、マルチデバイス対応の設定も手軽に行うことが可能です。
そこで、本書では

といった方を対象に、ステップ・バイ・ステップでページを作成しながら、Dreamweaverの基本的な使い方からHTML5&CSS3の活用方法までを習得できるように構成しました。Dreamweaverの理解とHTML&CSSの理解を同時に進める1冊として、手元に置いていただければ幸いです。

もくじ

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 CSSのルールを作成してデザインを指定する
 STEP 7 IDで区別してデザインを指定する
 STEP 8 文章中の語句のデザインを指定する

Chapter 3 [基本編]レイアウト

 STEP 1 <div>でマークアップする
 STEP 2 ボックスを罫線で囲む
 STEP 3 ボックスの横幅を指定する
 STEP 4 ボックスの配置を指定する
 STEP 5 ボックスの余白を調節する
 STEP 6 ボックスに下線を引く
 STEP 7 ボックスの背景色を指定する
 STEP 8 区切り線を挿入する

Chapter 4 [基本]画像とアップロード

 STEP 1 画像を挿入する
 STEP 2 画像まわりの余白サイズを調節する
 STEP 3 背景画像を表示する
 STEP 4 リンクを設定する
 STEP 5 リンクのデザインを指定する
 STEP 6 ブラウザでの表示を確認する
 STEP 7 ページをアップロードする

Chapter 5 [サイト構築編]段組みレイアウトとナビゲーション

 STEP 1 下準備
 STEP 2 クラス名を利用して同じスタイルシートを適用する
 STEP 3 セレクターのグループ化を利用して同じスタイルシートを適用する
 STEP 4 3段組みのための準備
 STEP 5 スニペットで増やすためのパーツを作成する
 STEP 6 スニペットで同じデザインのパーツを増やす
 STEP 7 3段組みでレイアウトする
 STEP 8 ナビゲーションバーを作成する
 STEP 9 外部スタイルシートを利用する

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

 STEP 1 テンプレートを作成する
 STEP 2 テンプレートを利用してページを作成する
 STEP 3 テンプレートを編集して複数ページをまとめてカスタマイズする
 STEP 4 2段組みのレイアウトを設定する
 STEP 5 子テンプレートを作成する
 STEP 6 子テンプレートを利用してページを作成する
 STEP 7 IDを指定してページごとにデザインを変える
 STEP 8 表示位置や重なり順を指定してレイアウトする
 STEP 9 テーブル(表組み)を作成する
 STEP 10 フォームを作成する

Chapter 7 [応用編]スマートフォン&タブレット

 SAMPLE 1 レスポンシブWeb デザインの設定
 SAMPLE 2 可変グリッドレイアウトを利用したページ作成
 SAMPLE 3 jQuery Mobileを利用したページ作成

Chapter 8 [応用編]HTML5&CSS3

 SAMPLE 1 HTML5による論理構造のマークアップ
 SAMPLE 2 HTML5によるビデオの表示
 SAMPLE 3 HTML5によるフォームの機能拡張
 SAMPLE 4 トランジション機能を利用したアニメーションの設定