Dreamweaverデザインブック CC 2015対応

Dreamweaver CC 2015では、レスポンシブWebデザインを簡単に実現できるように、CSSフレームワークとして定評のある「Bootstrap」が組み込まれており、複数の画面サイズに対応するための「ビジュアルメディアクエリーバー」を使うことで視覚的にWebサイトの構築が行えます。

本書では、これらの新機能を使いながら、「ビジネス系」Webサイトを作成していきます。作成手順は、レッスン形式のステップバイステップで解説し、Dreamweaverの操作だけでなく、効率よくWebサイト制作を進めるための考え方も身につくように構成しました。

●基礎
記事や概要など、シンプルな基本パーツを事前に準備することで、効率よくWebサイト制作を進める
●実践
Bootstrapとビジュアルメディアクエリーバーで、素早く簡単にレスポンシブWebデザインを実現する
●応用
Dreamweaverの強力な機能である「テンプレート」を使うことで、複数のWebページを一元管理する

Chapter1　Webサイト制作の下準備

1-1　Webサイトの構築場所を指定する
1-2　Webページのベースを準備する
1-3　CSSファイルを準備する

Chapter2　Webサイト制作の下準備

2-1　記事
2-1A　記事のデザインを指定する
2-1B　パーツをスニペットとして登録する
2-2　概要
2-2A　概要にリンクを設定する
2-2B　概要のデザインを指定する
2-3　サムネイル画像付きの概要
2-4　アイコン付きの概要
2-4A　アイコン付きの概要.

Chapter3　Bootstrapの段組みを使ったページレイアウト

3-1　ページの設定
3-2　基本的な段組みのレイアウト
3-2A　１段組みを２段組みに変更する
3-2B　大画面で段組みの横幅を固定する
3-3　２段組みのレイアウト
3-3A　メニューを挿入する
3-4　２段組みをネストしたレイアウト

Chapter4　ヘッダーとフッターの作成

4-1　ナビゲーションバーのレイアウト
4-2　ヘッダー画像のレイアウト
4-3　フッターのレイアウト

Chapter5　レスポンシブなレイアウトとデザインの調整

5-1　余白を削除してパーツを敷き詰めたレイアウトにする
5-2　余白を追加してパーツの間隔を調整する
5-3　極小画面での文字サイズを調整する
5-4　ヘッダー画像のデザインをアレンジする
5-5　サムネイル画像付きの概要をコンパクトなデザインにする
5-6　メニューのデザインをアレンジする
5-7　サイト名のデザインをアレンジする
5-8　検索フォームを作成する

Chapter6　テンプレートの作成と利用

6-1　テンプレートを作成する
6-2　テンプレートを使用してコンテンツページを作成する
6-3　コンテンツページのデザインを調整する
6-4　テンプレートによる一元管理

APPENDIX

Bootstrapについて
主要なデバイスの画面サイズ
デバイスプレビュー