正月休みでDreamweaverとMuseの基礎を習得しておこう!

第2回「ナビゲーションバーとジャンボトロンをページに配置するよ!」



Dreamweaver(+Bootstrap)/Muse+レスポンシブWebデザイン関連の記事は、以下のカテゴリーページで一覧できます。すでに学習した内容は割愛しますので、わからない箇所があったら、一読をお願いします!

Dreamweaver/Museのカテゴリーページ:




第2回の授業(テキストキャスティング)を開始します!


[01]
Dreamweaverを起動します。
新規ドキュメントのダイアログで、フレームワークから[Bootstrap]を選び、新規ドキュメントを作成してください。

この作業は、オンライン講座の第2回「サイトを定義する( http://design-zero.tv/Dreamweaver/index.html#wc-vol02 )」で詳しく解説していますので省略!
わからない人は、第2回を見ながら進めましょう。





[02]
DOMパネルの「body」タグをクリックして選択してください。
まず、ページの最上部にナビゲーションバーを挿入しますよ。





[03]
挿入パネルのポップアップメニューから[Bootstrapのコンポーネント]を選んで、[Navbar]の小さな三角形をクリック!
メニューが表示されますので[Navbar fixed to top]を選んでください。

これは、ページの最上部に固定されるナビゲーションバーです。ページをスクロールしても、ずっと最上部に表示されたままになっているナビゲーション。





[04]
ナビゲーションバーが挿入されましたね!
不必要なボタンなどを削除する学習はすでにやっていますので、割愛して、このまま進みます。

現在、ページに挿入されているナビゲーションバーが選択状態になっています。
DOMパネルを注目! 「nav」タグが選択されていますよね?
ページの余白などをクリックしちゃうと、他の要素が選択されてしまうので注意。もし、選択されていなかったら、「nav」タグをクリックしてください。

確認できたら、挿入パネルの[jumbotron]をクリック!
[エレメントディスプレィ]に「前」「後」「折り返し」「ネスト」の4つのアイコンが表示されます。

ナビゲーションバーの下に配置したい場合はどれでしょう?
わかりますね、「後」をクリックです。





[05]
ナビゲーションバーの下に、ジャンボトロン(jumbotron)が挿入されました。
ジャンボトロンの中には、タイトルとリード文、ボタンが配置されていますが、左右に余白が欲しいですね。

「コンテナ」を使いましょう。

こんなイメージです。
ジャンボトロンの中に「コンテナ」を置いて、その中に「タイトル、リード文、ボタン」を入れるのです。

ジャンボトロンの「Hello, world!」をクリックしてください。
DOMパネルを注目! 「h1」タグが選択されていますよね?






[06]
確認できたら、挿入パネルの[Container]をクリック!
[エレメントディスプレィ]に「前」「後」「折り返し」「ネスト」の4つのアイコン。

これから挿入する「コンテナ」の中に、「Hello, world!」を入れたい場合は?
そう、「折り返し」ですね。クリックしてください。

ところで、[Container]ってどんなコンテナか覚えていますよね?
固定幅のコンテナですよ。
忘れてしまった人は、カテゴリーページの第1回のテキストキャスティングで確認しましょう。





[07]
コンテナが、ジャンボトロンの中に挿入され、「Hello, world!」がコンテナの中に入りました!

リード文とボタンもコンテナの中に入れましょう。
DOMパネルを使います。





[08]
DOMパネルを見てください。

ジャンボトロンの「div」タグはどれでしょう?
わかりますよね、jumbotron(ジャンボトロン)のクラス名が付いている「div」タグなので、「div(class="jumbotron")」です。

クリックすると、折り畳んだり、展開したり、できます。
ジャンボトロンの中を全部、展開するとこうなります。





[09]
コンテナの中に入っているタイトルの下に、リード文とボタンを置きたいわけです。
つまり、「h1」タグの下に、2つの「p」タグをそれぞれ、ドラッグして移動させる。

この作業はちょっとコツが必要ですが、講座で何度も、何度も、繰り返し学びましたので、ここでは簡単に。

まず、1つ目の「p」タグをドラッグして、「h1」タグに重ねます。
そして、ゆっくり、ゆっくりと下にマウスカーソルを下げていきます。
グリーンの水平線が表示されたら、マウスボタンを離す。

まだ慣れていない人はゆっくり、操作しましょう。





[10]
2つ目の「p」タグも同じ。
展開した場合は、折り畳んでから、ドラッグしましょう。

「p」タグをドラッグして、上の「p」タグに重ねます。
そして、ゆっくり、ゆっくりと下にマウスカーソルを下げていきます。
グリーンの水平線が表示されたら、マウスボタンを離す。

はい、これでコンテナの中に、リード文とボタンも入りました。
慣れたら、あっという間の作業!





ライブビューに慣れてしまった人なら、30秒の作業です。
多少複雑なレイアウトでも、Bootstrapを使った基本ページの作成なら、ほんとに簡単。難しくなるのは、その後の「調整」の作業です。


それでは、第3回の投稿をお待ちください。
次の投稿が何時頃になるかは、交通機関次第!



関連コンテンツ:
本日のテキストキャスティングのベースになっているオンライン講座

Dreamweaver CC 2015 基礎編パート1



Muse CC 2015 ビジネスガイドブック



シンクゼロマガジンとは?

筆者:
Creative Edge School Books