このシリーズのパート1では、Dreamweaverでサイトを定義して、ローカルのファイルとフォルダーの場所を設定する方法を学習します。
必要な情報
はじめに
Dreamweaverは、webサイトを視覚的に構築してデザインできる、優れたアプリケーションです。しかし、初めてDreamweaverを開くと、使いこなすのはかなり難しそうに感じるかもしれません。Dreamweaverには様々な機能がありますが、これらの機能にはどのような目的があるのでしょうか。
8つのパートで構成されたこのチュートリアルシリーズは、Dreamweaverで、シンプルながらも洗練されたwebサイトを作成する手順を案内します。サイトを定義するところから、Hypertext Markup Language（HTML）で構造を組み立て、テキストと画像を追加し、Cascading Style Sheets（CSS）でページのスタイルを設定するまでのプロセス全体を説明します。
チュートリアルシリーズが程良い長さになるように、作成するwebページは2つだけになっていますが、完了した時点で自分でさらにページを作成するのに十分な知識が身に付いているはずです。
注意：Dreamweaverの使用経験は必要ありません。ただし、HTMLとCSSの一般的な知識があると、このシリーズで取り上げるトピックのコンテキストを理解するのに役立ちます。HTMLとCSSはいずれも標準化されたweb技術であり、この2つについて学ぶために利用できるリソースは数多くあります。基礎知識を身に付けるには、「HTMLを使用してページ構造を定義」、「CSSによるwebページのレイアウトとスタイル設定」、および「HTML & CSS」が役立ちます。
プロジェクトの概要
まず、サンプルファイルをダウンロードして、完成版のプロジェクトを見てみましょう。
- このページの上部にあるリンクからサンプルファイルをダウンロードします。
- サンプルファイルはすべて、1つのZIPファイルに圧縮されています。任意の場所（デスクトップなど）にファイルを展開します。
- macOSでは、FinderでダウンロードしたZIPファイルをダブルクリックすると、自動的にファイルが展開されます。
- Windowsでは、ダウンロードされたZIPファイルを右クリックして、コンテキストメニューから「すべて展開」を選択します。保存先のフォルダーを選択し、「展開」をクリックします。
- 抽出されたファイルの中に、baysideという名前のフォルダーがあります。このフォルダーには、図1に示されているように9つのサブフォルダーが含まれています。
- part7フォルダーを開いて、その中にあるindex.htmlをダブルクリックしてブラウザーで表示します。図2のように、プロジェクト完成時のホームページが表示されます。
contentフォルダーにはwebページのテキストコンテンツ、jsフォルダーにはJavaScriptファイルが含まれています。このJavaScriptファイルは、小さな画面解像度でナビゲーションメニューを制御するために使用します。他のフォルダーには、このシリーズの各パートを完了した時点での状態を保存した、完全なプロジェクトが含まれています。自分のコードと比較してチェックするのに使用できます。パート8のフォルダーはありません。最後のパートは、完成したプロジェクトをwebサーバーにアップロードする方法を説明するものだからです。
- ウィンドウの境界を内側にドラッグして、ブラウザーのサイズを変更します。ビューポートが700 pxより狭くなると、レイアウトが2カラムから1カラムに変わります。ナビゲーションバーに代わって、黒い背景色の「MENU」が表示されます。図3に示すように、ゴールデンゲートブリッジの画像に重ねられていたボックス内の白いテキストは濃いピンクになり、画像の下に配置されるようになります。
- 「MENU」をクリックします。半透明の黒い背景色のナビゲーションメニューがスライドダウンしてきます（図4を参照）。
- もう一度、「MENU」をクリックします。ナビゲーションメニューが上にスライドしてビューから消えます。
- ナビゲーションメニューをもう一度開き、「SIGHTS」をクリックして2ページ目を表示します（その他のメニュー項目はダミーのリンクです）。
以上が、このシリーズでDreamweaverを使用して作成するプロジェクトです。このプロジェクトを作成する過程で、以下の方法を学びます。
- Dreamweaverでサイトを定義する
- HTML5要素を使用してwebページの構造を定義する
- DOMパネルを使用してページのどこにいるのかを調べ、新しい要素を追加する
- ページにテキストと画像を追加する
- Creative Cloudライブラリから画像をダウンロードしてリサンプリングする
- DreamweaverのCSSデザイナーを使用してページのスタイルを設定する
- 2枚目のwebページを作成して、同じようにスタイルを設定する
- ビジュアルメディアクエリバーを使用して各種レイアウトを制御する
- 完成したページをオンラインのwebサーバーにアップロードする
この過程で、Dreamweaverユーザーインターフェイスの最も重要な部分についても知ることができます。
これは詳しいチュートリアルです。十分に時間をとってください。それぞれのパートは複数の短いセクションに分かれています。各セクションでは、何をおこなうかだけでなく、なぜそうするのかについても説明されます。セクションを完了するごとに時間を取り、そこで説明されたテクニックをきちんと理解してから、次のセクションに進んでください。
注意：このチュートリアルシリーズの初版は、Dreamweaver 2015.2を対象に作成されました。そのためそれより前のバージョンでは利用できない機能も使用しています。前のバージョンのDreamweaverでも同じwebサイトを作成できますが、このチュートリアルにはDreamweaver 2015.2以降のバージョンを使用することをおすすめします。Creative Cloudのサブスクリプションをお持ちでない場合は、無料体験版を使用できます。
Dreamweaverのワークスペースを設定する
作業を開始する前に、標準ワークスペースに切り替えてください。これにより、このチュートリアルに必要なすべてのメインパネルにアクセスできるようになります。Windowsでは、画面の右上にあるワークスペーススイッチャーを使用して簡単にワークスペースを切り替えることができます（図5を参照）。
macOSでも、ワークスペーススイッチャーはデフォルトで同じ場所にありますが、アプリケーションフレームを無効にしている場合は左側に配置されます。アプリケーションバーも無効にしている場合は、ワークスペーススイッチャーは非表示になっています。ワークスペースを選択する別の方法として、ウィンドウ／ワークスペースのレイアウト／標準を使用することもできます。
Dreamweaverでサイトを設定する
初心者にありがちな失敗は、Dreamweaverでwebページの作業を始める前に、サイトを定義しないことです。その結果、画像やスタイルシートなどのアセットへのリンクが、ローカルコンピューター内の保存先を参照してしまいます。その状態で問題なく作業を進められるのは、サイトをリモートサーバーにアップロードする時点までです。アップロードすると、すべてのリンクがリンク切れになり、修正が必要になります。この問題を避けるために、必ずサイトを定義してください。サイトの定義は簡単で、すぐに終わります。
Dreamweaverでは、ローカルコンピューター上のwebサイトに関連付けられているドキュメントのすべてを、1つのサイトにまとめて整理します。サイトによって、リンクのトラックと維持、ファイルの管理、webサーバーへのサイトファイルの転送などがおこなえます。標準的なDreamweaverのサイトは、以下の2つのパートで構成されています。
- ローカルフォルダー：作業ディレクトリです。通常、ローカルコンピューター内および外付けで接続されたドライブのフォルダーになります。Dreamweaverでは、このフォルダーをローカルサイトルートと呼びます。
- リモートフォルダー：webサーバーを実行しているコンピューター上にある、ファイルの保管場所です。webサーバーは多くの場合（ただし、常にではなく）、webでサイトを一般公開するコンピューターです。
ヒント：複数のサイトで作業することを予定している場合は、ローカルコンピューター内のドライブにそれらのサイトを保管するためのフォルダーを1つ作成することをおすすめします。Mac OS Xの場合、ホームのフォルダー内に、Sitesという名前のフォルダーがあらかじめ含まれています。WindowsおよびmacOSどちらの場合でもユーザーのDocumentsフォルダーにSitesという名前のフォルダーを作成してください。そして、ダウンロードした練習ファイルの「bayside」フォルダーをコピーします。このシリーズで使用するスクリーンショットはWindowsで撮られたものですが、キーボードショートカットと一部のボタンのラベルを除き、手順はmacOSの場合でもまったく同じです。
Bayside Beatサイトのローカルサイトフォルダーを定義する
作業を始めるために必要なのは、サイトに名前を付けて、ローカルコンピューター上でファイルを保管する場所を指定することだけです。サイトをインターネット上で実際に稼働するwebサーバーにアップロードする用意ができるまでは、リモートフォルダーを定義する必要はありません。
- Dreamweaverを起動して、サイト／新規サイトを選択します。「サイト設定」ダイアログボックスが表示されます。
- 「サイト名」フィールドに、サイトの名前として「Bayside Responsive」と入力します。この名前は、Dreamweaverがサイトを識別するために内部で使用されます。スペースが含まれていても問題ありません。
- 「ローカルサイトフォルダー」フィールドの横のフォルダーアイコンをクリックしてブラウズし、ダウンロードしたサンプルファイルの中からbaysideフォルダーを選択します。「サイト設定」ダイアログボックスは図6のようになります。ただし、ローカルサイトフォルダーのファイルパスは、ハードドライブのどこにbaysideフォルダーをコピーしたかによって異なります。
- 「サイト設定」ダイアログボックスの左側のカラムにある「詳細設定」を展開し、「ローカル情報」を選択します。
- 「デフォルトのイメージフォルダー」フィールドの右にあるフォルダーアイコンをクリックして、画像フォルダーの選択ダイアログボックスを開きます。
- 「「新しいフォルダー（Windows）」」または「新規フォルダ（macOS）」をクリックします。新しい画像フォルダーに「images」と名前を付け、このフォルダーを選択してから「フォルダーの選択」（Windows）または「選択」（macOS）をクリックします。サイト設定ダイアログボックスは図7のようになります。
- その他のオプションはデフォルト値のままにします。このチュートリアルではドキュメントへの相対リンクを使用するため、「Web URL」フィールドに値を入力する必要はありません。
- 「保存」、続けて「完了」をクリックします。
Dreamweaverのファイルパネルに、現在のサイトの新しいローカルルートフォルダーが表示されます（図8を参照）。ファイルパネルに表示されるファイルのリストは、ファイルマネージャーとして機能します。これを使用して、デスクトップと同じようにファイルをコピー、削除、移動したり、ファイルを開いたりすることができます。
これで、Bayside Responsiveサイトのローカルサイトフォルダーが定義されました。ここが、ローカルコンピューター上でwebページの作業用コピーを保管する場所となります。また、画像を保管するデフォルトフォルダーも指定されました。サイトルートフォルダー外から画像をインポートすると、Dreamweaverは自動的にこの指定のフォルダーに画像をコピーします。
webサイトのファイルとフォルダーに名前を付ける際のベストプラクティス
通常、webサイトは多数のファイルとフォルダーで構成されます。簡単に維持できるように、ファイルとフォルダーを論理的に整理することが重要です。画像、ビデオ、スタイルシート、外部JavaScriptファイルのそれぞれに、適切に名前を付けた個別のフォルダーを作成してください。また、以下の点も考慮する必要があります。
- webサイトのファイル名とフォルダー名に、スペースおよび次の文字
/\?%*:|”<>を使用することはできません。
- 使用できる記号もありますが、通常は、英数字、ハイフン、下線だけを使用することをおすすめします。
- ほとんどのファイル名とフォルダー名は、webページのURLの一部として組み込まれるため、簡潔で、ただし意味のある名前にしてください。URLが長いと、ユーザーが覚えにくく、モバイルデバイス上のブラウザーに入力するのも大変です。
- webサイトの大半は、大文字と小文字が区別されるLinuxサーバーでホストされます。ファイル名とフォルダー名にすべて小文字を使用することで、ファイルが見つからないという問題を避けることができます。
プロジェクトのアセットをCreative Cloudライブラリに保存する
このプロジェクトの画像とカラースキームは、共有Creative Cloudライブラリにオンラインで保管されます。CCライブラリに保管されたビジュアルアセットはどこからでも使用できるようになるため、他の人と共同作業をおこなっている場合は特に役立ちます。例えば、実際のサイトを作成している間、別の人がビジュアルアセットの作成を担当する場合などです。DreamweaverでのCCライブラリの使用方法について詳しくは、オンラインドキュメントを参照してください。
共有ライブラリ内のアセットは、自分のライブラリに保存する必要があります。
- Bayside Beatライブラリ内のアセットを使用します。
- 共有アセットをまだ自分のライブラリに保存していない場合は、ブラウザー画面の右上にある「Create a copy」をクリックし、保存します。
- DreamweaverのCCライブラリパネルで同期が有効化されていると、Baisydeライブラリが表示されます。クリックで選択すると、図9に示すように、4つの画像と6つのカラースウォッチが表示されます。
実際にwebページを作成する
このセクションでは、Bayside Beat webサイトを一から作成します。ダウンロードしたサンプルファイルには、Microsoft Wordファイルとリッチテキストフォーマットファイルがあり、そこにテキストコンテンツが含まれています。また、JavaScriptファイル、そして自分が作業しているファイルと比較できる、各段階のプロジェクトのコピーがあります。
まずは、サイトの2つのHTMLページを作成しましょう。
- Dreamweaverのスタートアップスクリーンが表示されている場合は、「新規作成」セクションの「HTML」をクリックします。または、メインメニューからファイル／新規を選択します。いずれの場合も、図10に示されているように、新規ドキュメントダイアログボックスが表示されます。
- 左側のカラムで「新規ドキュメント」が選択されていること、「ドキュメントタイプ」が「HTML」に設定されていること、「フレームワーク」が「なし」に設定されていることを確認します。
- 「Bayside Beat: Cable Cars」と、「タイトル」フィールドに入力します。
- 「ドキュメントタイプ」がデフォルトの「HTML5」に設定されていること、「CSSを添付」フィールドに何も表示されていないことを確認します。「CSSを添付」フィールドに何かが表示されている場合は、それを選択してから、フィールドの右側にあるゴミ箱アイコンをクリックします。
- 「作成」をクリックします。Dreamweaverによって、ドキュメントウィンドウに空白のHTMLページが作成されます。
- 必要に応じて、ドキュメントウィンドウの上部にある「分割」（図11を参照）をクリックしてもとになるHTMLマークアップを表示します。
- ドキュメントウィンドウ（ライブビュー）は完全に空白ですが、図12に示すように、基本となるHTML構造がコードビューに表示されます。
- ファイルを保存するために、ファイル／保存を選択するか、キーボードショートカットのCtrl + Sキー（Windows）またはCmd + Sキー（macOS）を使用します。
- 名前を付けて保存ダイアログボックスで、baysideローカルサイトフォルダーが保存先として選択されていることを確認してから、ファイルにindex.htmlという名前を付けて、「保存」をクリックします。
- 新しいHTMLファイルを作成します。スタートアップスクリーンはもう表示されていないので、メニューバーからファイル／新規を使用して新規ドキュメントダイアログボックスを開きます。別の方法として、Ctrl + Nキー（Windows）または Cmd + Nキー（macOS）を押して開くこともできます。
- ステップ2で選択したオプションと同じオプションを選択します。ただし今回は「タイトル」フィールドを空白にしたまま、「作成」をクリックします。
- ファイルにsights.htmlという名前を付けて、サイトルートフォルダーに保存します。
- コードビューで、5行目の
<title>タグで囲まれた値が"無題ドキュメント"になっています。
ブラウザーのタブまたはタイトルバーに、この値がそのまま表示されることになります。検索エンジンでも、これをタイトルとして取得します。この値を変更しないままにしておくことが、初心者によくある失敗です。
値を変更するには、次の2つの方法があります。
- コードを直接手動で変更します。この場合、HTMLタグの終了と開始のペアがそのままの状態で維持されるよう注意してください。
- Dreamweaverのプロパティインスペクターを使用します。この方法を使って値を変更しましょう。
- コードを直接手動で変更します。この場合、HTMLタグの終了と開始のペアがそのままの状態で維持されるよう注意してください。
- ウィンドウ／プロパティを選択します。プロパティインスペクターと呼ばれる水平のパネルが表示されます。ドラッグしてドキュメントウィンドウ下部にドッキングします。ウィンドウ／プロパティを選択します。プロパティインスペクターと呼ばれる水平のパネルが表示されます。ドラッグしてドキュメントウィンドウ下部にドッキングします。
- 変更を確定するには、Tabキーを押すか、EnterキーまたはReturnキーを押します。5行目のHTMLコードの「無題ドキュメント」が、「ドキュメントタイトル」フィールドに入力したテキストに置き換えらえます（図13を参照）。
1行目は、ブラウザーにこれがHTMLファイルであることを指示する、ドキュメントタイプ（doctype）の宣言です。
HTMLは、タグベースの言語です。タグは山括弧で囲まれます。ほとんどのタグはペアとなっていて、終了タグは開始山括弧の後ろにあるスラッシュで示されます。
ページ全体は、<html>タグのペア（2行目と10行目）の中にネストされます。2行目から6行目までの<head>セクションには、ブラウザーのための情報が含まれています。ページのコンテンツはすべて、開始<body>タグから終了<body>タグまでの間に収容されます。
ほとんどの場合、ユーザーがDreamweaverのビジュアルインターフェイスとダイアログボックスで作業すると、Dreamweaverがそれに伴って自動的に必要なすべてのコードを作成します。ただし、ほかの場所からコードをコピー＆ペーストする場合には注意が必要です。人間と同じように、HTMLページは1つの頭（head）と1つの体（body）しか持つことができません。コンテンツがライブビューまたはブラウザーに表示されない場合、最も可能性の高い理由として、bodyの外にコンテンツをペーストしたことが考えられます。
保存したファイルがファイルパネルに表示され、ドキュメントウィンドウの左上のタブに、ファイル名が表示されます。
ヒント：名前を付けて保存ダイアログボックスの下部にある「サイトルート」ボタンをクリックすることで、いつでも現在のwebサイトのローカルサイトフォルダーに移動できます。
「ドキュメントタイトル」フィールドで、「無題ドキュメント」を「Bayside Beat: Sightseeing」に変更します。なお、入力中はHTMLソースにその変更は反映されません。
- sights.htmlを保存します。
Dreamweaverは自動的にHTMLマークアップを作成しますが、webページを処理している間はできるだけ分割ビューにしておくことをおすすめします。分割ビューによって、おこなった変更が正しく実装されていることを確認できます。これは、Dreamweaverは信頼性に欠けるという意味ではありません。特殊な状況を除けば、Dreamweaverは指示した通りのことをおこないます。重要なのは、自分がドキュメントのどの部分を処理しているのかを把握することです。挿入ポイントが間違っていると、新しいコードがそこに追加されてしまいます。注意を怠ると、修正するのが難しい、複雑で面倒な結果になり兼ねません。ページの構造を記録する上では、DOMパネルも大切な役割を果たします。DOMパネルは、チュートリアルシリーズの次のパートで使用します。
ヒント：もととなるコードとページの視覚的なビューを左右に並べて表示する場合は、表示／分割／左右に分割を選択します。表示／分割／上下に分割を選択すると、ドキュメントウィンドウが上下に分割された状態に戻ります。表示メニューでは、ライブビューをどちらの側に配置するかも選択できます。コードビューとライブビューを分割するバーをドラッグすると、2つのビューの相対サイズを調整できます。これらの設定は、Dreamweaverが自動的に記憶します。
ここまでで、サイトを定義し、2つの空白のページを作成しました。次はこの空白のページにコンテンツを追加していきます。
