CC2015の最新機能で、素早く簡単にレスポンシブWebデザインサイトを制作する
Dreamweaver CC 2015では、レスポンシブWebデザインを簡単に実現できるように、CSSフレームワークとして定評のある「Bootstrap」が組み込まれており、複数の画面サイズに対応するための「ビジュアルメディアクエリーバー」を使うことで視覚的にWebサイトの構築が行えます。
本書では、これらの新機能を使いながら、「ビジネス系」Webサイトを作成していきます。作成手順は、レッスン形式のステップバイステップで解説し、Dreamweaverの操作だけでなく、効率よくWebサイト制作を進めるための考え方も身につくように構成しました。
●基礎
記事や概要など、シンプルな基本パーツを事前に準備することで、効率よくWebサイト制作を進める
●実践
Bootstrapとビジュアルメディアクエリーバーで、素早く簡単にレスポンシブWebデザインを実現する
●応用
Dreamweaverの強力な機能である「テンプレート」を使うことで、複数のWebページを一元管理する
1-1 Webサイトの構築場所を指定する
1-2 Webページのベースを準備する
1-3 CSSファイルを準備する
2-1 記事
2-1A 記事のデザインを指定する
2-1B パーツをスニペットとして登録する
2-2 概要
2-2A 概要にリンクを設定する
2-2B 概要のデザインを指定する
2-3 サムネイル画像付きの概要
2-4 アイコン付きの概要
2-4A アイコン付きの概要.
3-1 ページの設定
3-2 基本的な段組みのレイアウト
3-2A １段組みを２段組みに変更する
3-2B 大画面で段組みの横幅を固定する
3-3 ２段組みのレイアウト
3-3A メニューを挿入する
3-4 ２段組みをネストしたレイアウト
4-1 ナビゲーションバーのレイアウト
4-2 ヘッダー画像のレイアウト
4-3 フッターのレイアウト
5-1 余白を削除してパーツを敷き詰めたレイアウトにする
5-2 余白を追加してパーツの間隔を調整する
5-3 極小画面での文字サイズを調整する
5-4 ヘッダー画像のデザインをアレンジする
5-5 サムネイル画像付きの概要をコンパクトなデザインにする
5-6 メニューのデザインをアレンジする
5-7 サイト名のデザインをアレンジする
5-8 検索フォームを作成する
6-1 テンプレートを作成する
6-2 テンプレートを使用してコンテンツページを作成する
6-3 コンテンツページのデザインを調整する
6-4 テンプレートによる一元管理
Bootstrapについて
主要なデバイスの画面サイズ
デバイスプレビュー
