このチュートリアルシリーズのパート2では、Dreamweaverでテキストコンテンツを追加し、HTMLのタグでマークアップする方法について説明します。パート1では、サイトを定義して2つのwebページを作成しました。この時点では、これらのページにあるのはタイトルだけです。このパートでは、サイトのホームページindex.htmlにテキストコンテンツを追加します。まずライブビューの編集モードで直接入力し、Microsoft Wordから書式設定されたテキストをコピー＆ペーストします。Wordを使用できない場合は、リッチテキストフォーマットファイルからコンテンツをペーストし、簡単な調整を加えることができます。

グラフィックデザインの経験があるユーザーであれば、なぜページのビジュアルをデザインすることから始めないのか不思議に思うかもしれません。デザインについて考慮するのは確かに優れたアイデアですが、検索エンジンは魅力的なデザインには関心がありません。検索エンジンが対象とするのは、わかりやすい見出しとリンクなどの関連性の深いテキスト情報です。

テキストを追加する前に、忘れずにページ全体のコンテナを追加しておきましょう。これで、高解像度の画面の場合でもページのコンテンツを中央に配置することができます。同時に、外部スタイルシートをページにリンクさせます。

注意： サイトのホームページにはindex.htmlを使用するのが一般的なルールです。これは、ほとんどのwebサーバーがindex.htmlまたはindex.htmをディレクトリー（フォルダー）のデフォルトページと見なすためです。このため、URLの末尾にファイル名が追加されていない場合、このページが自動的に表示されます。

1. ライブビューの任意の場所をクリックして、フォーカスがページ本文にあることを確認します。
   

2. 画面右のパネルグループでタブをクリックして「挿入 」パネルを開き、パネルの左上のドロップダウンメニューで「HTML」が選択されていることを確認します（図2）。

1. 「Div 」（上部の最初の項目）をクリックします。表示された「Divを挿入」ダイアログボックスでOKをクリックします。これにより、HTML要素と１行のプレースホルダーテキストが、基になるHTMLのタグの間に挿入されます。プレースホルダーテキストは、明るい青色の枠線で囲まれてライブビューに表示されます。青色の枠線には、HTML要素の名前を持つタブが表示されます（図3を参照）。このタブは、エレメントディスプレイと呼ばれます。

1. 要素は、CSSを使用してスタイルを設定できる汎用コンテナです。この要素を識別するため、IDを付ける必要があります。このdiv には、すべてのページのコンテンツを格納または「ラップ（包む）」するため、「wrapper 」と名づけることにしましょう。
   

2. 作成したばかりのIDについてスタイルルールのソースの選択を求めるポップアップパネルが、エレメントディスプレイと一緒に表示されます。ドロップダウンメニューを開き、図4に示されているように「CSSファイルを新規作成 」を選択します。

1. 新規 CSSファイルを作成 ダイアログボックスが開きます。「ファイル/URL」フィールドの右側にある「参照 」ボタンをクリックし、スタイルシートファイルを別名で保存ダイアログボックスを開きます。
   

2. Baysideサイトのルートにstyles という新規フォルダーを作成し、そのフォルダーに移動します。
   

3. 「ファイル名 」フィールドに"responsive.css "と入力し、「保存 」をクリックします。「OK 」をクリックして最初のダイアログボックスを閉じます。図4のポップアップがそのまま表示されている場合は、ポップアップ以外の場所をクリックして閉じます。
   

4. コードビューの

   開始タグには次のようなID属性が含まれるようになりました。
   
   

   新規Divタグの内容がここに入ります

   id

5. ドキュメントウィンドウの上にある、ファイル名の付いたタブと「分割 」ボタンの間に新しいツールバーが表示されます（図5を参照）。これは、関連ファイル ツールバーといい、現在のwebページに関連付けられたすべてのファイルが表示されます。

1. 関連ファイルツールバーで「ソースコード 」をクリックすると、index.htmlのHTMLに戻ります。
   

2. セクションの6行目にあるコードを確認します。コードは、次のような記述によって現在のページとスタイルシートをリンクさせています。
   
   

3. どちらのファイル名にもアスタリスクが付いています。これは、変更がまだ保存されていないことを示しています。ファイル／すべての関連ファイルを保存 を選択します。
   

4. 「ファイル」パネルを開き、stylesフォルダーを展開してスタイルシートresponsive.cssが正しい場所に作成されていることを確認します（図7を参照）。

Dreamweaverのライブビューは、Chrome Embedded Frameworkを使用することで、ドキュメントウインドウを実際のブラウザーとして利用できます。これは編集可能なサーフェスでもあり、新しいコンテンツの追加や、既存のコンテンツを再配置することもできます。後ほど説明しますが、ライブビューにはテキストや画像をドラッグ＆ドロップ追加でき、そのボーダーをドラッグすることによってサイズの変更や配置をおこなえます。ですが、ライブビューは視覚的にレイアウトをするためのツールではありません。レイアウトおよび配置はすべてCSSによって管理されます。

パート4でスタイルを追加するまでページはかなりあっさりしているように見えます。ライブビューに直接入力することでいくつかのテキストコンテンツを実際に追加してみましょう。

1. ライブビューで、プレースホルダーテキストが大きい太字で表示されるようになり、エレメントディスプレイはこれが

   要素、つまりトップレベルの見出しであることを示しています。
   

1. 見出しを選択したままの状態で、「ライブビュー 」のテキスト内の任意の場所をダブルクリックして、編集モードに入ります。青色の枠線はオレンジ色の枠線に変わり、コードビュー内で該当するコードの範囲がグレーで表示されます。
   

2. プレースホルダーテキスト全体を選択し、"Bayside Beat"と入力します。オレンジ色の枠線以外の場所をクリックして編集モードを終了します。コードビューの

   タグの間のテキストは、今入力した内容とまったく同じになるはずです。
   

3. 次に、後でナビゲーションメニューとして利用する箇条書きを追加します。HTMLでは、順序のない箇条書きは、

   タグのペアで囲まれます。ライブビューで順序のないリストを作成するには、段落から始める必要があります。
   

4. 配置アシストダイアログ（図10を参照）が表示されるので、新しい要素を入力する場所を指定します。段落は見出しの後にくる必要があるので、「後 」をクリックします。

1. Dreamweaverはプレースホルダーテキストを含む新しい段落を主見出しの直後に挿入します。
   

2. ライブビューで段落が選択されたままの状態で、プロパティインスペクターの順序のない「リスト」アイコンをクリックして、段落を箇条書きに変換します（図11を参照）。

1. ページが図12のように表示されていることを確認します。ライブビューでプレースホルダーテキストの前に箇条書き記号が表示されており、エレメントディスプレイは

2. （リスト項目）要素が選択されていることを示しています。基になるHTMLでは、単一の
3. 要素が
   タグのペアの内部にネストされています。

1. ライブビューでリスト項目を選択したままの状態で、プレースホルダーテキスト内の任意の場所をダブルクリックして、編集モードに入ります。すべてのプレースホルダーテキストを選択し、"Home "に置き換えます。
   

2. 編集モードのままで、EnterキーまたはReturnキーを押して"Sights "と入力します。
   

3. さらに3度同じ操作を実行し、"Dining "、"Events "、および"Lodging "を箇条書きのリストに追加します。
   

4. オレンジ色の枠線以外の場所をクリックして編集モードを終了します。ページは図13のようになります。

1. index.htmlを保存します。

Dreamweaverはワードプロセッサーではなくweb制作環境です。大量のテキストをライブビューに入力するのはとても面倒です。ただし、Dreamweaverは見出し、段落、箇条書き、番号付きリスト、および太字やイタリックを保持して、Microsoft Word文書を正しいHTMLに変換することができます。

これから使用するテクニックは、Microsoft Wordで文書をHTMLとして保存することとは異なります。Wordは、生成されるHTMLに独自のコードを多く追加しますが、Wordからコピー＆ペーストするときに、Dreamweaverは不要なコードをすべて削除し、HTMLをクリーンな状態に保ちます。

Microsoft Wordを所有していない場合は、サンプルファイルにはリッチテキスト形式（RTF）のテキストコンテンツも含まれています。このセクションの後で、RTFファイルを使用するための手順について説明します。Wordの代わりに、Open OfficeまたはLibre Officeを使用することはしないでください。OpenDocument形式からペーストすると、除去するのが難しい不要なコードが追加されてしまいます。

1. 編集／ペーストスペシャル を選択するか、キーボードのショートカットCtrl+Shift+V（Windows）またはCmd+Shift+V（macOS）を使用します。これでペーストスペシャルダイアログボックスが表示されます（図15を参照）。

注意： 同じ色およびフォントを使用する場合でも、完全な書式設定をペーストするための4番目のラジオボタンは絶対に選択しないでください。これをおこなうと、大量のMicrosoft独自のコードがHTMLページにコピーされ、CSSを使用してページをスタイル設定するのが非常に難しくなります。

1. Copyright のテキスト内の任意の場所をクリックします。図17で示されるように、これはページの最後の段落であり、段落であることを示すエレメントディスプレイが表示されます。

1. エレメントディスプレイ表示されない場合は、コードビューでCopyright のテキストを選択して書式設定を調整する必要があります。下の図18に示されているように、プロパティインスペクターの「フォーマット 」ドロップダウンメニューから「段落 」を選択します。

この方がライブビューにすべてのテキストを直接入力するよりもかなり簡単であることに気づくでしょう。Dreamweaverはペーストスペシャルダイアログボックスの設定を記憶するので、その後は通常のキーボードショートカットCtrl+V（Windows）およびCmd+V（macOS）を使用してライブビューに直接ペーストできます。ライブビューにペーストする前に、新しいコンテンツの直前の要素を選択してください。

基になるHTMLをコードビューで詳しく見ると、’ という記述がいくつかあることに気づくでしょう。Word文書のテキストでで用いられていたシングルクオートをDreamweaverはシングルクオートを表すHTML文字エンティティに変換しました。

Microsoft Wordからコンテンツをペーストした場合でも、次のセクションはテキスト要素のエレメントディスプレイを使用してフォーマットを変更する方法について説明しているので、是非お読みください。

Microsoft WordまたはWord Viewerを持っていない場合、リッチテキストフォーマットファイルからテキストコンテンツをコピー＆ペーストしてから、見出しをフォーマットする必要があります。これは、すべてのテキストが段落としてフォーマットされるからです。

1. リッチテキストフォーマットからペーストする場合、見出しは認識されません。このため、"Riding the Cable Cars"という段落の任意の場所をクリックします。
   

2. 図21で示されているように、エレメントディスプレイの左にあるハンバーガーアイコンをクリックしてクイックプロパティインスペクターを開き、フォーマットドロップダウンメニューから「h2 」を選択します。これで、段落が第2レベルの見出しに変換されます。

リッチテキストフォーマットファイルからのテキストコンテンツのコピー＆ペーストは簡単です。重要なポイントは次のとおりです。

これで、Bayside Beatのホームページにすべてのテキストコンテンツが含まれるようになりましたが、あっさりしすぎしているように見えます。ブラウザーでページをロードすると、段落はビューポートいっぱいに広がります。CSSを使用すればこれを整えることができますが、他のHTML構造要素も追加して、スタイルを設定するためにページを論理グループに分割する必要があります。