ページを作る前準備の作業として、まずサイトを設定します。DreamWeaverを使って、ローカルサイトを設定します。サーバー用のリモートサイトは今回は設定しません。

つぎは新規ドキュメントの作成です。ここからいよいよページの制作です。 DreamWeaver上で新規ドキュメントを作成し、ローカルサイト内に保存します。CSSスタイルシートも準備し、新しく作ったドキュメントにリンクさせて保存します。

それではいよいよDreamweaverを使って実際の制作の作業をはじめましょう。まず練習のために簡単な記事から作ってみます。最初は見だし（タイトル）をひとつページの中に作ってみます。

次は本文です。段落要素を使って、本文をページの中に挿入します。挿入ができたらこれをhtmlソースコードで確認します。

ソースコードで内容を確認し、簡単なhtmlの文法を説明します。タグと要素について学びます。

複数の要素をグループ化する方法を学びます。最初にDreamWeaverでやってみて、同じことをソースコード上でもういちどやります。ソースコードで簡単にできることを体験します。

ソースコードでhtmlの構造について学びます。特にページには表示されないが、html文書には必須の内容について詳しく説明しています。

HTMLソースコードを書くうえで必須となるhead要素について説明します。head要素内のタイトル要素、meta要素、リンク要素の書き方、順番などについて説明しています。

CSSの基本について解説しています。スタイルシートがどんな仕組みで出来ているか、htmlのタグとどんな関係があるかなど基礎についての学習です。

このレクチャーではサンプルのうち見出しに使ったh1タグを例にして、CSSデザイナーパネルで文字の大きさを変える練習をします。セレクター、プロパティ、値をデザイナーパネルから編集することで、パネルの使い方を学びます。

同じようにして今度は同じh1要素の文字フォントを設定します。さらに設定後のスタイルシートの内容を確認して、セレクター、プロパティ、値がどのようにスタイルシートに書き込まれているかという文法についても学びます。

このレクチャーではCSSの文法について詳しく学びます。スタイルシートを見ながら、セレクター、プロパティ、値を記述するルールについての学習です。

次は同じh1要素で、文字だけでなく背景色を変更します。さらに見出しの文字を見出しの枠から離すpaddingや上下の他の要素との間を開けるmarginを使ってh1要素の外観を変える学習をします。

その後、結果をスタイルシートのコードを確認して解説し、スタイルシート記述の文法を学習します。

このレクチャーでは画像を挿入する練習をします。Bootstrapを使って画面サイズにレスポンシブに対応する画像挿入の方法を学びます。

画像の挿入を通して、サイト内に素材を保存する理由を学びます。

記事の文章をサンプルのものに変更します。つづいて、写真と記事の文章をひとまとめにしたグループを作ります。さらにグループになったひとつの記事をコピーペーストして、もうひとつ同じ記事を加えます。これはDreamWeaverのDOMパネルを使って行います。

つぎに複製した記事の内容を変更します。今度は画像と文章の内容の両方をソースコードを編集して行います。DreamWeaverをつかわずにソースコードを使った方がはるかに簡単にできることを実感します。

２本の記事のそれぞれの見出しの背景色を変えます。このとき同じh1のセレクタでは片方を特定できないので、まずそれぞれの記事にクラスで名前をつけます。

つづいて先のレクチャーでそれぞれの記事に付けられたクラス名を使って、見出しの背景をそれぞれちがった色に設定します。この作業を通じて、クラスが何故必要なのかを理解します。

これでこのセクションは終了です。

ボックスモデルはhtmlとCSSでページを制作する基本になる考え方です。今後CSSの設定を行う上で理解しておかなければならないページの構造です。説明だけで作業をしないのでつい集中力を落としがちですが、しっかり聞いて理解しておきましょう。

グリッドシステムはレスポンシブWEBデザインでページを作るときの基礎です。とくにBootstrapでのページの制作には理解しておかなければいけない仕組みです。

これから制作するページの完成したサンプルを見て、各部分の検討をします。デバイスによって画面サイズが変化したときに各要素がどう変化するかなどをきちんと理解しておきます。

つづいて実際にDreamWeaverを起動し、新しいサイトを定義します。

つづいて新規ドキュメントを作成しします。新規ドキュメントの作成ではBootstrapのページタイプを選び、段組の設定を行います。今回のサンプルではデフォルトの値でページを設定します。その上でindex.htmlの名前でサイト内に保存します。

さらに新しく空白のスタイルシートを作成し、さきほどつくったindex.htmlのページにリンクさせます。

つづいて制作するページの順番について検討します。このコースでは難易度から考えて、ヘッダー、フッターの順に制作し、最後にコンテンツの部分を作ることにします。

このレクチャーではナビゲーションバーをページに挿入します。挿入後ソースコードで正しいクラス名が入力されているか確認します。

挿入したナビゲーションバーから今回のページでは使用しないパーツを削除して必要な部分だけを残します。

挿入したナビゲーションバーのソースコードを確認し、DOMパネルで要素とソースコードを参照してbootstrapのナビゲーションバーの構造を見ます。

つづいてナビ－ションバーの下にメインイメージ画像を挿入します。Bootstrapのレスポンシブイメージとして配置し、画面幅に応じて大きさが可変になるようにします。

ソースコードを見て、Bootstrapのコンポーネントに自動的に付けられるクラス名について説明します。Bootstrapではクラス名で段組の調整などをコントロールしているので、クラス名を知っていればDreamWeaverなしにソースコードで入力してページをつくることも可能です。

ページ下のフッター部分を制作します。背景がページ一杯に広がるようにBootstrapコンポーネントと通常のdiv要素を組み合わせて設定します。

挿入したdiv要素にクラス名を付け、そのクラス名を使ってフッター部分の横幅いっぱいに広がった背景にスタイルシートで背景色を設定します。

最後にフッターをもう一行追加し、コピーライトを書きます。スタイルシートで背景色を黒に変え、テキストをセンタリングし、文字色を白にするなどの設定をします。これでこのセクションの演習は終わりです。

ここではCSSスタイルシートで書くセレクタについて説明します。セレクタはCSSで設定を加えたい要素を正確に指定するためのものです。ここではその書き方を説明しています。

このレクチャーではサンプルを見ながら制作部分を確認します。

つぎにコンテンツ部分の最初のパーツであるグローバルナビゲーションの部分を制作します。ただグローバルナビの部分はBootstrapではなくCSSを多用してつくるので仕上げは後周りにして、このレクチャーではスペースだけを確定させるためにdiv要素のみを挿入し、テキストだけを入れておきます。

次はナビゲーションバーの下の記事部分です。この行は中画面以上では右側に縦長のナビゲーションがあり、左側の記事の部分と合わせて２段組になっています。そして記事の部分もさらに内部で左に写真、右に文章の２段組に分けられています。この段組のシステムを可能にするBootstrapコンポーネントを挿入します。

段組を挿入したら、つぎにそれぞれの段の幅を変更します。挿入時は等分の大きさで分割されているので、それをサンプルと同じ大きさに変更します。bootstrapコンポーネントの再設定の方法をDreamWeaverを使う場合と、ソースコードで行う方法の２つを解説します。

見だしの編集をします。文字の大きさを変え、文字の下にパディングで空きを取り、罫線を引いて、さらにその下にマージンを取ります。CSSで行うタイトルの装飾では使用頻度の多い設定ですが、スタイルシートで直接行います。

見出しと写真、文章でつくられた１本の記事をひとつのグループにします。グループ化したらそのグループをコピーペーストして、記事の数を３本にします。

グループ化した記事のセットにクラス名をつけ、スタイルシートで編集をします。他の記事との間に間隔を取り、罫線を引いてデザインします。

これでこのセクションは終了です。

このレクチャーではSNSリンク部分のうち４つの画像の配置を行います。画像を４つ横並びに配置する方法です。

つぎは２行目以降のliです。この部分は左に小さな画像と右に文字列というレイアウトでliを構成し、そのliを4行並べて新にulを作ります。このレクチャーではそのうちのhtml部分を制作します。

このレクチャーではSNSリンクメニューのCSSを設定します。画像とテキストを横並びにレイアウトする方法と、メニュー部分全体にCSS3で角丸のボーダーを引く方法を学びます。

角丸のボーダーができたら次にこのメニュー部分の横幅が無制限に大きくならないように、最大幅を設定します。CSSスタイルシートでmax-widthというプロパティを使い、要素の幅が設定した値以上に大きくならないように制限する方法を学びます。

つぎに下のNEWS部分を挿入します。このときNEWS部分の挿入位置には２つの選択肢があり、それによって画面が小さくなったときのページのレイアウトが変わることに注意します。このサンプルではNEWS部分が小画面でも最下部に来るようにします。

このレクチャーではNEWS部分のhtmlを書きます。これまで練習してきたことを使えば簡単にできますが、量が多いので要注意です。

最後にNEWS部分のCSSを設定します。グループ化や見出しの文字の設定、罫線を引くことなどこれまでの作業の復習です。

このレクチャーが終わればこのセクションでの作業は終わりです。

このレクチャーでは息抜きのつもりでSection08-4　DreamWeaver、Bootstrap、HTML、CSSの関係について話します。なぜDreamWeaverを使うのか、Bootstrapを使うメリットは、などこれまでの学習を整理するつもりで説明しました。コーヒーブレイクのつもりで手を止めて聞いてください。

まず最初はメディアクエリです。このレクチャーではメディアクエリの説明をします。メディアクエリとはどんな仕組みなのか、なぜメディアクエリが必要なのかについての解説です。説明だけで手を動かす作業はありませんが、これが分からないと先には進めません。

つづいてスタイルシートにメディアクエリを書く準備をします。極小画面のメディアクエリを例にスタイルシートに注釈を入れる方法を学び、注釈とメディアクエリのブレークポイントを書いたスタイルシートの書式をつくります。メディアクエリでレスポンシブWEBデザインがどう実現されるかを学習します。

つづいて小画面、中画面、大画面のメディアクエリを書き、スタイルシートにすべてのデバイスのCSS設定をコーディングする場所を書いて書式を完成させます。

これまでスタイルシートに書いてきた設定を、メディアクエリを加えたスタイルシートに整理してコーディングします。メディアクエリではCSSの設定を書く位置は明確に決まっているので、そのルールに従って整理して書き込みます。

ここからページの制作をつづけます。まずヘッダー部分の調整です。ヘッダーの部分ではまずロゴの部分をテキストから画像に変えます。画像に変えると余計な空白が発生したりしますが、この原因とそれを取る方法を学びます。

ページの内容を横幅1200pxまでに設定し、画面サイズが1200px以上になった場合も内容の拡大表示をせず、左右に余白を取って内容を中央配置するようにCSSのメディアクエリで設定します。

モバイルファーストの考え方について解説しています。メディアクエリはなぜ小さな画面から大画面へと設定するのかなど、作業の内容にも関係する大切な考え方です。

つぎはグローバルナビの部分です。この部分はBootstrapを使わずすべてCSSで制作するのでCSSの高い技術が必要になるため、ここまで制作を先送りしてきましたがここで完成させます。段組をレスポンシブに変化させるなどの技術をCSSで行う方法を学びます。このレクチャーではこのうちhtmlの部分を完成させます。

つづいてグローバルナビのCSSの設定です。画面幅によって段組をCSSで変化させる方法を学びます。

グローバルナビのCSSの設定をつづけます。マウスオンで文字色をCSSの設定で変化させます。

コンテンツのうちの記事の部分を仕上げます。段組の設定はBootstrapでできているので、細かい装飾が中心です。写真に角丸のついたボーダーをつけ、右側のテキストとの間隔を調整します。

コンテンツ右側のSNSリンクを完成させます。このレクチャーでは上のsnsのロゴマークの間隔と中央配置をCSSで調整し、下線を引きます。

SNSリンク部分の下の写真とテキストの隣り合ったliの部分を調整します。ここではカラム落ちで崩れたレイアウトを修正する技術を学びます。各liの下線を引いてこの部分は完成です。

最後に全体の仕上げをします。マージンの設定や画面幅を変えたときに起きる不自然なレイアウトの変化、また見落としていた細かい点を修正してページを完成させます。