このチュートリアルシリーズのパート3では、Dreamweaverを使って疑似クラスを使用して動きのあるメニューを作成する方法について説明します。このパートでは、様々な部分をスタイル設定するために構造を定義するHTML5の要素をページに追加します。2ページ目や外部webサイトへのリンクも追加します。さらに、現在空白になっている2ページ目にコンテンツを追加します。

注意： Internet Explorer 8および他の旧バージョンのブラウザーはHTML5の要素を認識しないため、これらのブラウザーでは完成したプロジェクトは正しく表示されません。https://community.adobe.com/t5/dreamweaver/bd-p/dreamweaver?page=1&sort=latest_replies&filter=all旧バージョンのブラウザーをサポートする必要がある場合は、メインのDreamweaverサポートフォーラム でアドバイスを求めてください。

すべてのテキストコンテンツがホームページに追加され、書式設定されましたが、ページを論理的な構造にするにはさらにいくつかのHTMLタグを追加する必要があります。これらのタグは、ページの様々な部分のコンテナとして機能し、それらの部分を個別にスタイル設定することができます。

図1はページの構造を示しています。ヘッダーおよびフッターは、常にwrapper

DOMパネルを使用してこの構造をページに追加します。DOMはDocument Object Modelの略です。これは、ブラウザーがページの様々な部分を識別するためのロードマップのようなものとして機能します。web開発を初めておこなう場合、またはこれまでHTMLコードを書いたことがない場合、DOMパネルを見てはじめはうんざりするかもしれません。しかし、これはwebページの構造を確認および制御するための非常に強力なツールです。

1. DOMパネルでh1 要素を選択します。次に、Shiftキーを押しながらul 要素も選択します。選択した要素は明るい青で強調表示されているはずです。ul 要素が展開されている場合、中にネストされているli 要素も薄い青で強調表示されているはずです（図3を参照）。これは、次のステップが、子であるli 要素および親であるul 要素に影響を及ぼすことを示します。

注意： DOMパネルで複数要素を選択する機能は、Dreamweaver 2015.2より搭載された機能です。このセクションの手順はそれより前のバージョンのDreamweaverでは機能しません。

1. h1 要素の上に2つの入力フィールドが表示されます。Dreamweaverがデフォルトとしてdiv タグを表示しています。左側のフィールドにheader と入力して、これを置き換えます。入力し始めるとすぐに、コードのヒントがポップアップ表示されます。矢印キーまたはマウスを使用して"header"を選択できます。

2. DOMパネルでul 要素を選択し、左側のプラスボタンをクリックします。今回は単一の要素（およびその子）だけが選択されているため、より多くのオプションがあります（図5を参照）。

1. 「タグで囲む 」を選択して、左側のフィールドに"nav "と入力します。右側のフィールドは空のままにしておきます。
   

2. ul の直後にある最初のp 要素を選択します。ライブビューまたはコードビューを確認すると、正しい要素が選択されていることがわかります。"Bayside Beat keeps"で始まる段落が強調表示されているはずです。
   

3. プラスボタンをクリックして、「タグで囲む 」を選択し、そのまま確定します。左側のフィールドで提案されている値"div "をそのまま利用し、右側のフィールドに"#hero "と入力します。これで、

   内の段落はhero というIDの要素に囲まれます。

4. 同じやり方で最初のh2 要素と次の3つのp 要素をHTML要素で囲むために、左側のフィールドに"main "と入力します。

5. 最後に、最後の段落を要素内に囲むために、左側のフィールドに"footer "と入力します。

1. 三角形を使用してネストされた要素を折りたたんで、構造が正しいことを確認します。これで、DOMパネルは図7のようになります。

これで、DOMパネル内の構造は、このセクションの先頭にある図1で示されている概要と一致しますが、追加点が1つあります。

このようなHTML構造の作成は、魅力的なデザインからはほど遠いように思えるかもしれませんが、ページにスタイルを適切に設定するための基礎として重要です。要素が親要素内で正しくネストされていれば、グループとしてまとめてスタイル設定をおうことができます。

リンク（正式にはハイパーリンク）を使用すれば、webページを強力なものに仕上げることができます。同じwebサイトの様々な部分にリンクすることも、まったく異なるサイトにリンクすることもできます。このセクションでは、箇条書きのリストを内部リンクに変換し、主要なテキストコンテンツに外部リンクを追加します。

外部サイトにリンクする場合によくある間違いは、URLの先頭にあるhttp:// またはhttps:// を省略してしまうことです。省略してしまうと、ブラウザーはそれを内部リンクと見なし、サイト内のページを探そうとします。外部リンクを作成する最も確実な方法は、ブラウザーのアドレスバーからURLをコピーし、Dreamweaverのリンクフィールドにペーストすることです。

すべてのテキストコンテンツおよびリンクが最初のページに追加されたので、今度は2ページ目の作業に移ります。DOMパネルを使用すると、一般的な要素のコピーやページ構造の作成が簡単におこなえます。

1. ドキュメントウィンドウのファイルパネルでsights.html の名前をダブルクリックして開きます。
   

2. sights.htmlをアクティブドキュメントにしたまま、DOMパネルでbodyを選択し、右クリックして「 子としてペースト 」を選択します（図10を参照）。これで、コピーされた要素が2ページ目のタグの内部にネストされます。

これで、2ページ目のHTML構造が完成しました。

HTML構造を配置したので、メインテキストコンテンツを2ページ目に追加できるようになりました。

1. contentフォルダーからsights.docx を開き（Microsoft Wordを使用できない場合はsights.rtfを使用）、最初の見出しと次の6つの段落をクリップボードにコピーします。
   

2. Dreamweaverに戻ります。手順1でフォーマットした段落がそのまま選択されていることを確認します。編集モード（オレンジの枠）になっている場合はEscキーを押して編集モードを抜けて青い枠にします。エレメントディスプレイには、main ではなく、p と表示されているはずです（図14を参照）。

プレースホルダーテキストはフォーマットしてから削除することが必要です。これは、Dreamweaverが、選択したドキュメントの兄弟として外部ファイルのコンテンツをペーストするためです。そうしないと、ペーストされる見出しおよび段落はすべて、内側にネストされずに後に続きます。Dreamweaverでは、挿入パネルまたはメニューを使用する場合にのみ、配置アシストダイアログが表示されます。

sights.htmlのコンテンツを完成するには、テキスト内にいくつかのリンクを作成する必要があります。sights.docxおよびsights.rtfに記載されているURLを使用して、様々な外部サイトにリンクします。リンクの設定場所を確認したい場合は、サンプルファイルのpart3 フォルダーにあるバージョンのsights.htmlをご覧ください。

ここまで来たら完成です。これで、webサイトの完全に機能するページが2つできました。これらのページはあまり魅力的とはいえませんが、次のステップで変わっていきます。