<header>の作成
先ず最初に、ヘッダー部分を作成していきます。
<header>の中には、ロゴマークやナビゲーションが入ります。
画面右上の「挿入」タブを選択します。
「挿入」には様々なコンポーネントが収録されています。
今回は、通常の「HTML」と「BOOTSTRAPのコンポーネント」の2種類を使います。
DOM の使い方
Dreamwaverのライブビュー上では、カーソルの移動が難しい場合があります。
カーソル位置を間違えると、予期しない場所にコンポーネントが追加されたり、レイアウトがズレてしまう可能性があります。
その時に便利なのが「 DOM 」の利用です。
DOM は、ページ全体に記述されているHTMLコードを一覧で見ることが出来る機能です。
しかも、綺麗にネストされているので、どのコードがどのコードに含まれているのか、一目で判断することができます。
DOM 上で要素をクリックすれば、間違いなくその要素を選択することが出来ます。
今回は<body>の中に<header>要素を入れたいので、DOM パネルで<body>を選択した状態から始めます。
<header>要素挿入
「挿入」→「HTML」→「header」の順に選択します。
headerを挿入のダイアログが表示されますので、「挿入ポイント」を選択し、「OK」をクリックします。
これで<header></header＞のコードが挿入されます。
「新規 header タグの内容がここに入ります」というテキストが自動で挿入されますので、コードビューで削除します。
ナビゲーションバーって？
BOOTSTRAPには、様々な形状のナビゲーションバーが準備されていますので、その中から気に入ったものを選択することができます。
今回は、ナビを固定させたいので、「fixed to top」を使います。
BOOTSTRAPのクラス
BOOTSTRAPに準備されているクラスはとても数が多いですが、そのほとんどが絶妙なネーミングです。
例えば、背景を白にしたい場合は「.bg-white」、画像を横幅いっぱいに表示したい場合は「.w-100」、テキストを中央寄せにしたい場合は「.text-center」など、CSSを扱ったことのある人なら何となく予測できてしまうクラス名です。
しかも、Dreamwaverには「コードヒント」という機能がありますので、「bg-」と入力しただけで候補を表示してくれます。
BOOTSTRAPのクラスについては、オフィシャルサイトで種類別に公開されていますので、どんなものがあるのか知りたい方は見てみるといいと思います。（英語ですが）
コードに関しては、「Documentation」に公開されています。
NAVBARを挿入する
ナビゲーションは<header>の中に挿入したいので、DOMパネルで<header>を選択した状態から始めます。
※思い通りの位置に挿入できない場合は、「ctrl+z」で元の状態に戻し、コードビューで<header>と</header>の間にカーソルを移動して挿入します。
「挿入」→「BOOTSTRAPのコンポネント」→「Navbar：Fixed to top」を選択します。
Navbarが挿入されます。
保存して確認してみる
ここで、一度保存して確認してみましょう。
「ファイル」→「すべてを保存」で保存し、フォルダから「index.html」をダブルクリックで開きます。
この時、画面サイズを小さくし、レスポンシブになっているか確認してください。
画面を狭くすると、メニューがハンバーガーメニューに変わります。
背景色を変更する
今回はnavbarの背景色を白に変えたいと思います。
DOMパネルで<nav>を選択すると、Navbar全体が選択された状態になりますので、クラス「.bg-light」の右の「×」をクリックして削除し、「＋」をクリックして「bg-white」を追加します。
BOOTSTRAPのカラー
Bootstrapには、配色のクラスも準備されています。
上記は背景色ですが、ボタン等様々なカラーが準備されています。
例えば、ブルーのボタンなら「.btn-primary」です。
Navbarの記述をロゴに変更する
では、NAVBARを編集していきます。
オリジナルロゴを画像で表示することも出来ますが、今回はもっと簡単な方法でロゴを編集します。
現在「Navbar」となっているテキストを、「AdobeCafe」に変更しておきましょう。
とっても便利なアイコンフォント
皆さんは、アイコンフォントの存在をご存知でしょうか？
以前はサイトにアイコンを表示する場合、画像で作成して使用していましたが、現在の主流はフォントの利用です。
表示も軽く、位置合わせの必要も無く、何より「アイコンを作る手間が省ける」という、とても有難いものです。
しかも、大抵のフォントは無料で使えてしまいます。
FontAwasome
世界的に有名なアイコンフォントが「フォントオーサム」です。
ウェブフォントなので、閲覧側に依存せず、様々なアイコンフォントを利用することができます。
今回は、このフォントオーサムを利用して、ロゴも作ります。
下の画像をクリックして、フォントオーサムのサイトを表示しましょう。（新しいタブで開きます）
メールアドレス（フリーメールで構いません）を登録し、「Send kit code」ボタンをクリックすると、フォントオーサムからメールが届きます。
届いたメールの中にある「Click to Confirm…」部分をクリックします。
再度ブラウザが起動し、パスワードの入力を求められますので、任意のパスワードを入力し、「Set password…」ボタンをクリックします。
次の画面で氏名等の入力を促されますが、スキップしても構いません。
この画面が表示されたら、利用準備完了です。
先ずはフォントを表示させるためのCSSを読み込みます。
コードはオフィシャルサイトで簡単にコピーできます。
上記の「Copy kit code」ボタンをクリックします。
「Copied」と表示されればコピー完了です。
サイトにペーストしましょう。
FontawasomeのCSSを読み込む
Dreamwaverの画面に戻り、コードビューで、BOOTSTRAPのCSSの下に、先ほどコピーしたコードをペーストします。
これでアイコンフォントを使う準備は完了です。
アイコンを表示させる
今回は、コーヒーカップのアイコンフォントをロゴの前に入れます。
Fontawasomeのサイトでは、どのページに行っても必ずグローバルナビに検索フィールドがあります。
ここに「coffee」と入力して検索します。
コーヒーに関連するアイコンが表示されますので、左メニューの「Free」にチェックを入れます。
無料で使えるアイコンのみが表示されますので、どちらかのアイコンをクリックします。
「Click to Copy HTML」部分をクリックすると、コードがコピーされますので、Dreamwaverに戻り、コードビューでAdobeCoffeeの前にペーストします。
アイコンフォントには、5種類のサイズクラスが準備されています。
好みのサイズに変更してください。
BOOTSTRAP④では、カルーセルスライダーと見出し・紹介文を入れていきます。