このシリーズの2番目の部分では、webページをセットアップしてテキストの追加およびスタイルの設定をおこない、ライブビューに直接テキストを追加し、既存の文書からテキストをコピーする方法について説明します。
5496-create-first-website_1408x792

注意:

このダウンロードには、このチュートリアルシリーズで使うCreative Cloudライブラリおよびプロジェクトファイル一式が含まれます。パート1で使用した開始ファイルでそのまま作成を続行するか、関連フォルダーに移動して各セクション用の開始ファイルを使用することができます。

入門

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

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

webページのコンテナの作成とスタイルシートの追加

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

  1. Bayside Responsiveサイトで、パート1で作成した空のwebページindex.htmlを開きます。sights.htmlがまだ開いている場合は閉じてください。この時点では、サイトのホームページindex.htmlに専念します。

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

  1. ドキュメントウィンドウの左上で「分割」ボタンをクリックし、分割ビューが開いていることを確認します(図1を参照)。
fig01
図1. 分割ビューを使用して、基になるコードを検証できる
  1. ライブビューの任意の場所をクリックして、フォーカスがページ本文にあることを確認します。

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

    これには、よく使われるHTML要素をwebページに挿入するためのオプションが含まれます。

  1. Div」(上部の最初の項目)をクリックします。これにより、HTML要素と一部のプレースホルダーテキストが、基になるHTMLのタグの間に挿入されます。プレースホルダーテキストは、明るい青色のボーダーで囲まれてライブビューに表示されます。青色のボーダーには、HTML要素の名前を持つタブが含まれます(図3を参照)。このタブは、エレメントディスプレイと呼ばれます。
fig03
図3. <div>要素は、ライブビューの「エレメントディスプレイ」タブで識別される
  1. <div>要素は、CSSを使用してスタイル可能な汎用コンテナです。この要素を識別するため、IDを付ける必要があります。このdivには、すべてのページのコンテンツを格納または「ラップ」するため、「wrapper」と呼ぶことにしましょう。

  2. エレメントディスプレイのプラスボタンをクリックします。これで、クラスまたはIDを要素に追加できるフィールドが開きます。フィールドに#wrapperと入力し、Tabキー、Enterキー、またはReturnキーを押して変更を確定します。

  3. 作成したばかりのIDについてスタイルルールのソースの選択を求めるポップアップパネルが、エレメントディスプレイと一緒に表示されます。ドロップダウンメニューを開き、図4に示されているように「新規CSSファイルを追加」を選択します。
fig04
図4. クラスまたはIDを要素に追加すると、スタイルルールを定義する場所を選択する画面が表示される
  1. 新規CSSファイルを作成ダイアログボックスが開きます。「ファイル/URL」フィールドの右側にある「参照」ボタンをクリックし、スタイルシートファイルを別名で保存ダイアログボックスを開きます。

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

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

  4. コードビューの<div>開始タグには次のようなID属性が含まれるようになりました。

    <div id="wrapper">新規divタグのコンテンツがここに入る</div>

    基になるHTMLのid属性の最初にハッシュは付きません。Dreamweaverの視覚的なインターフェイスでは、IDとクラスを区別するためにCSS構文が使用されます。CSSでは、IDセレクターはハッシュで始まりますが、クラスはドットつまりピリオドで始まります。

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

関連ファイルツールバーで、「responsive.css」をクリックします。ドキュメントウィンドウのコードビューの部分に、作成したばかりのスタイルシートのコードが表示されるようになります。2行目から3行目には、ラッパーID用の空のスタイルルールが含まれています(図6を参照)。

fig06
図6. 関連ファイルツールバーを使用して、関連付けられたスタイルシートにアクセスできる

    スタイルシートのセレクターはハッシュで始まります。これは、要素のスタイルが同じIDで設定されることを示しています。ラッパーの<div>に対するスタイル定義の追加は、このチュートリアルシリーズのパート4でおこない、その時にサイトのスタイル設定を開始します。

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

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

    <link href="styles/responsive.css" rel="stylesheet" type="text/css">

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

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

これは、スタイルシートをwebページに関連付ける唯一の方法ではありません。このチュートリアルシリーズの後半では、webページのスタイルを設定するためのDreamweaverのメインパネルであるCSSデザイナーを使ってこれをおこなう方法を学びます。 

ライブビューでテキストコンテンツを直接追加

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

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

  1. 関連ファイルツールバーで「ソースコード」が選択されていることを確認し、ライブビューのプレースホルダーテキスト内の任意の場所をクリックします。コードビューのテキスト内のどこかに挿入ポイント(垂直線)が表示されるはずです。

  2. プロパティインスペクターで、「形式」ドロップダウンメニューをアクティブ化し、「見出し1」を選択します(図8を参照)。形式メニューが表示できない場合、プロパティインスペクターの左上にあるHTMLボタンが選択されていることを確認します。
fig08
図8. プレースホルダーテキストをトップレベル見出しに変換する
  1. ライブビューで、プレースホルダーテキストが大きい太字で表示されるようになり、エレメントディスプレイはこれが<h1>要素、つまりトップレベルの見出しであることを示しています。

  2. 基になるコードで、Dreamweaverはラッパー<div>の内部にネストされている<h1>タグのペアでプレースホルダーテキストをラップしました。(図9を参照)。

fig09
図9. プレースホルダーテキストは<h1>要素に変換された
  1. <h1>見出しを選択したままの状態で、「ライブビュー」のテキスト内の任意の場所をダブルクリックして、編集モードに入ります。青色のボーダーはオレンジ色のボーダーに変わり、コードビューはグレー表示されます。

  2. プレースホルダーテキスト全体を選択し、"Bayside Beat"と入力します。オレンジ色のボーダー以外の場所をクリックして編集モードを終了します。コードビューで、<h1>タグの間のテキストは、今入力した内容とまったく同じになるはずです。

  3. 編集モードですべてのプレースホルダーテキストを置き換える際に、注意しないと開始HTMLタグの直後または終了HTMLタグの直前に&nbsp;が追加される場合があります。これは、区切りなしスペースのHTML文字エンティティです。これが追加されるのは、開始タグと終了タグの間に何らかのコンテンツが必要であるためです。&nbsp;が表示された場合は、コードビューに移動し、手動でそれを削除してください。基になるコードに区切りなしスペースの文字エンティティを残したままにしておくと、レイアウトの問題が発生する可能性があります。このため、コードを自分で入力しないとしても、基になるマークアップの状態を注意することが大切です。

  4. 次に、後でナビゲーションメニューに変換される箇条書きを追加します。HTMLでは、箇条書きは番号なしリストと呼ばれ、<ul>タグのペアで囲まれます。ライブビューで番号なしリストを作成するには、段落から始める必要があります。

  5. <h1>見出しをそのままライブビューで選択した状態で、「挿入」パネルを開き、HTMLカテゴリから「段落」を選択します(上から3番目の項目)。

  6. 配置アシストダイアログ(図10を参照)が表示されるので、新規の要素を入力する場所を指定します。段落は見出しの後にくる必要があるので、「」をクリックします。
fig10
図10. 配置アシストダイアログを使用すれば、新規の要素を正しく挿入できる
  1. Dreamweaverはプレースホルダーテキストを含む新規の段落を主見出しの直後に挿入します。

  2. ライブビューで段落が選択されたままの状態で、プロパティインスペクターの「番号なしリスト」アイコンをクリックして、段落を箇条書きに変換します(図11を参照)。
fig11
図11. リストを箇条書きに変換する
  1. ページが図12のように表示されていることを確認します。ライブビューでプレースホルダーテキストの前に箇条書き記号が表示されており、エレメントディスプレイは<li>(リスト項目)要素が選択されていることを示しています。基になるHTMLでは、単一の<li>要素が<ul>タグのペアの内部にネストされています。
fig12
図12. 段落は単一項目の番号なしリストに変換された
  1. ライブビューでリスト項目を選択したままの状態で、プレースホルダーテキスト内の任意の場所をダブルクリックして、編集モードに入ります。すべてのプレースホルダーテキストを選択し、"Home"に置き換えます。

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

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

  4. オレンジ色のボーダー以外の場所をクリックして編集モードを終了します。ページが図13のように表示されるはずです。
fig13
図13. この番号なしリストは後でナビゲーションメニューに変換される
  1. index.htmlを保存します。

Microsoft Wordからテキストをコピー&ペーストする

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. ファイルパネルで、コンテンツフォルダーを展開し、index.docxをダブルクリックして、このファイルをMicrosoft Wordで開きます。

  2. 著作権表示の末尾までのすべてのテキストを選択し、それをクリップボードにコピーします。

  3. Dreamweaverに戻り、番号なしリスト(リスト項目1つだけでなく)がライブビューで選択されていることを確認します。要素全体を選択するには、図14に示されているように、リスト内の任意の場所をクリックしてから、ドキュメントウィンドウ最下部のタグセレクターで「ul」をクリックします。
fig14
図14. タグセレクターにより現在の選択範囲がHTML構造のどこに存在するが表示される
  1. 編集/特殊ペーストを選択するか、キーボードのショートカットCtrl+Shift+V(Windows)またはCmd+Shift+V(Mac)を使用します。これで特殊ペーストダイアログボックスが表示されます(図15を参照)。
fig15
図15. 特殊ペーストはDreamweaverが外部文書からペーストする内容を制御する
  1. 3番目のラジオボタン「構造と基本書式(太字、イタリック)付きテキスト」を選択し、「Word の段落スペースのクリーンアップ」というラベルの付いたチェックボックスが選択されていることを確認します。「OK」をクリックします。

  2. Dreamweaverは、選択した要素(番号なしリスト)の後ろにテキストをペーストし、正しいHTMLタグを使用して段落および見出しをフォーマットします。

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

  1. ライブビューでテキスト内の任意の場所をクリックして、最初の段落("Bayside Beat keeps you"で始まる)を選択します。エレメントディスプレイは、これが<p>要素(段落)であることを示しています。コードビューで、テキストは<p>タグのペアで囲まれています。

  2. ペーストされたテキストにエレメントディスプレイがなく、基になるコードにタグが存在しない場合、Word文書からコンテンツをペーストしたときにフォーカスがコードビューにあったことを意味します。Ctrl+Z(Windows)キーまたはCmd+Z(Mac)を押して、ペースト操作を取り消します。次に、ライブビューで番号なしリストを選択してから、ペーストします。

  3. テキスト内の任意の場所をクリックして、最初の見出し"Ride the Cable Cars"を選択します。エレメントディスプレイにこれが<h2>要素(第2レベルの見出し)であることが示され、基になるコードでテキストは<h2>タグで囲まれています(図16を参照)。
fig16
図16. 見出しはWordからペーストされたときに自動的にフォーマットされている

    見出しはWordで「見出し2」としてスタイル設定されていたため、Dreamweaverは対応するHTMLタグを自動的に適用しました。

  1. 著作権表示のテキスト内の任意の場所をクリックします。図17で示されるように、これはページの最後の段落であり、段落であることを示すエレメントディスプレイが表示されるはずです。
fig17
図17. エレメントディスプレイで著作権表示が段落としてフォーマットされていることを確認する
  1. エレメントディスプレイがない場合は、コードビューで著作権表示のテキストを選択して書式設定を調整する必要があります。次に、図18に示されているように、プロパティインスペクターの「フォーマット」ドロップダウンメニューから「段落」を選択します。
fig18
図18. テキストの最終行を段落としてフォーマットしなければならない場合がある

これが起きてしまう場合がある理由は、使用するHTMLタグの種類を決定する際に、DreamweaverがWordの段落、見出し、および他のテキスト要素の最後の改行に依存するためです。Word文書でテキストを選択する場合は、必ず行の最後まで選択してください。図19に示されているように、通常、テキストの最後の部分の後には小さなスペースが存在します。

fig19
図19. Microsoft Wordからコピーするときにテキストの最後のスペースを取り込む
  1. index.htmlを保存します。

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

基になるHTMLをコードビューで詳しく見ると、&rsquo;のインスタンスがいくつかあることに気づくでしょう。Word文書のテキストではスマート(波)引用符が使用されますが、Dreamweaverはこれを右単一引用符を表すHTML文字エンティティに変換しました。

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

クイックプロパティインスペクターを使用してテキスト要素をフォーマットする

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

  1. ファイルパネルでコンテンツフォルダーを展開し、index.rtfを右クリックします。コンテキストメニューからツールを指定して開く/参照を選択し、適切なテキストエディター(TextEditなど)を選択します。

  2. ファイルにはindex.docxと同じコンテンツが含まれますが、それぞれの段落と見出しの後ろには余分の空白行があります。これは、Dreamweaverでテキストを段落として正しくフォーマットするために必要です。

  3. ファイルの先頭から著作権表示の次の行までのすべてのテキストを選択します。選択したテキストをクリップボードにコピーします。

  4. Dreamweaverに戻り、番号なしリストがライブビューで選択されていることを確認します。これをおこなう方法がわからない場合は、前のセクションのステップ3および図14を参照してください。

  5. 編集/特殊ペーストを選択するか、キーボードのショートカットCtrl+Shift+V(Windows)またはCmd+Shift+V(Mac)を使用します。これで特殊ペーストダイアログボックスが開きます。Microsoft Wordからのペーストではないため、図20で示されているように、最後の2つのラジオボタンおよび2番目のチェックボックスは無効になります。
fig20
図20. Microsoft Wordからのペーストでない場合、一部のオプションは無効になる

    2番目のラジオボタン「構造(段落、リスト、テーブル)付きテキスト」が選択されていることを確認します。さらに、「改行の保持」というラベルが付いたチェックボックスを選択解除します。次に、「OK」をクリックして、Dreamweaverに段落としてフォーマットされたすべてのテキストをペーストさせます。

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

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

 

fig21
図21. クイックプロパティインスペクターを使用してテキスト要素をライブビューでフォーマットできる
  1. 2番目の見出し"Cable Car Tips"についても前のステップを繰り返します。

  2. ページの下部にある著作権表示を選択して、それが段落としてフォーマットされていることを確認します。必要に応じて、前のセクションのステップ9で説明されているようにフォーマットを調整します。

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

  • それぞれの段落または見出しの間には2つの空白行が存在する必要があります。

  • 最後の段落の後ろに空白行をコピーしてください。

  • 必ず「編集」>「特殊ペースト」を使用するか、Ctrl+Shift+V(Windows)またはCmd+Shift+V(Mac)を使用して、「改行の保持」チェックボックスを選択解除します。Dreamweaverは設定を記憶しますが、Ctrl+VまたはCmd+Vを使用してリッチテキストフォーマットからペーストすると、基になるHTMLに余分の改行が追加されます。

  • エレメントディスプレイのハンバーガーアイコンをクリックすることによりクイックプロパティインスペクターにアクセスして、段落をHTML見出しに変換します。

次のステップ

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

04/16/2018

提供元:David PowersTom Alex Buch

このページは役に立ちましたか。