チュートリアル記事

上級

30 分

【Dreamweaverでwebサイトを作成する方法】サイトの設定

このシリーズのパート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. このページの上部にあるリンクからサンプルファイルをダウンロードします。

  2. サンプルファイルはすべて、1つのZIPファイルに圧縮されています。任意の場所(デスクトップなど)にファイルを展開します。

    • macOSでは、FinderでダウンロードしたZIPファイルをダブルクリックすると、自動的にファイルが展開されます。

    • Windowsでは、ダウンロードされたZIPファイルを右クリックして、コンテキストメニューから「すべて展開」を選択します。保存先のフォルダーを選択し、「展開」をクリックします。

  3. 抽出されたファイルの中に、baysideという名前のフォルダーがあります。このフォルダーには、図1に示されているように9つのサブフォルダーが含まれています。

  1. part7 フォルダーを開いて、その中にあるindex.htmlをダブルクリックしてブラウザーで表示します。図2のように、プロジェクト完成時のホームページが表示されます。

  1. ウィンドウの境界を内側にドラッグして、ブラウザーのサイズを変更します。ビューポートが700 pxより狭くなると、レイアウトが2カラムから1カラムに変わります。ナビゲーションバーに代わって、黒い背景色の「MENU 」が表示されます。図3に示すように、ゴールデンゲートブリッジの画像に重ねられていたボックス内の白いテキストは濃いピンクになり、画像の下に配置されるようになります。

  1. MENU 」をクリックします。半透明の黒い背景色のナビゲーションメニューがスライドダウンしてきます(図4を参照)。

  1. もう一度、「MENU 」をクリックします。ナビゲーションメニューが上にスライドしてビューから消えます。

  2. ナビゲーションメニューをもう一度開き、「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サーバーにアップロードする用意ができるまでは、リモートフォルダーを定義する必要はありません。

  1. Dreamweaverを起動して、サイト/新規サイト を選択します。「サイト設定」ダイアログボックスが表示されます。

  2. サイト名 」フィールドに、サイトの名前として「Bayside Responsive 」と入力します。この名前は、Dreamweaverがサイトを識別するために内部で使用されます。スペースが含まれていても問題ありません。

  3. ローカルサイトフォルダー 」フィールドの横のフォルダーアイコンをクリックしてブラウズし、ダウンロードしたサンプルファイルの中からbaysideフォルダーを選択します。「サイト設定」ダイアログボックスは図6のようになります。ただし、ローカルサイトフォルダーのファイルパスは、ハードドライブのどこにbaysideフォルダーをコピーしたかによって異なります。

  1. サイト設定 」ダイアログボックスの左側のカラムにある「詳細設定 」を展開し、「ローカル情報 」を選択します。

  2. デフォルトのイメージフォルダー 」フィールドの右にあるフォルダーアイコンをクリックして、画像フォルダーの選択 ダイアログボックスを開きます。

  3. 「新しいフォルダー(Windows)」 」または「新規フォルダ(macOS)」をクリックします。新しい画像フォルダーに「images」と名前を付け、このフォルダーを選択してから「フォルダーの選択 」(Windows)または「選択 」(macOS)をクリックします。サイト設定ダイアログボックスは図7のようになります。

  1. その他のオプションはデフォルト値のままにします。このチュートリアルではドキュメントへの相対リンクを使用するため、「Web URL」フィールドに値を入力する必要はありません。

  2. 保存 」、続けて「完了」をクリックします。

Dreamweaverのファイルパネルに、現在のサイトの新しいローカルルートフォルダーが表示されます(図8を参照)。ファイルパネルに表示されるファイルのリストは、ファイルマネージャーとして機能します。これを使用して、デスクトップと同じようにファイルをコピー、削除、移動したり、ファイルを開いたりすることができます。

これで、Bayside Responsiveサイトのローカルサイトフォルダーが定義されました。ここが、ローカルコンピューター上でwebページの作業用コピーを保管する場所となります。また、画像を保管するデフォルトフォルダーも指定されました。サイトルートフォルダー外から画像をインポートすると、Dreamweaverは自動的にこの指定のフォルダーに画像をコピーします。

webサイトのファイルとフォルダーに名前を付ける際のベストプラクティス

通常、webサイトは多数のファイルとフォルダーで構成されます。簡単に維持できるように、ファイルとフォルダーを論理的に整理することが重要です。画像、ビデオ、スタイルシート、外部JavaScriptファイルのそれぞれに、適切に名前を付けた個別のフォルダーを作成してください。また、以下の点も考慮する必要があります。

  • webサイトのファイル名とフォルダー名に、スペースおよび次の文字/\?%*:|”<> を使用することはできません。

  • 使用できる記号もありますが、通常は、英数字、ハイフン、下線だけを使用することをおすすめします。

  • ほとんどのファイル名とフォルダー名は、webページのURLの一部として組み込まれるため、簡潔で、ただし意味のある名前にしてください。URLが長いと、ユーザーが覚えにくく、モバイルデバイス上のブラウザーに入力するのも大変です。

  • webサイトの大半は、大文字と小文字が区別されるLinuxサーバーでホストされます。ファイル名とフォルダー名にすべて小文字を使用することで、ファイルが見つからないという問題を避けることができます。

プロジェクトのアセットをCreative Cloudライブラリに保存する

このプロジェクトの画像とカラースキームは、共有 Creative Cloudライブラリ にオンラインで保管されます。CCライブラリに保管されたビジュアルアセットはどこからでも使用できるようになるため、他の人と共同作業をおこなっている場合は特に役立ちます。例えば、実際のサイトを作成している間、別の人がビジュアルアセットの作成を担当する場合などです。DreamweaverでのCCライブラリの使用方法について詳しくは、オンラインドキュメントを参照してください。

共有ライブラリ内のアセットは、自分のライブラリに保存する必要があります。

  1. Bayside Beatライブラリ 内のアセットを使用します。

  2. 共有アセットをまだ自分のライブラリに保存していない場合は、ブラウザー画面の右上にある「Create a copy 」をクリックし、保存します。

  3. DreamweaverのCCライブラリパネルで同期が有効化されていると、Baisydeライブラリが表示されます。クリックで選択すると、図9に示すように、4つの画像と6つのカラースウォッチが表示されます。

実際にwebページを作成する

このセクションでは、Bayside Beat webサイトを一から作成します。ダウンロードしたサンプルファイルには、Microsoft Wordファイルとリッチテキストフォーマットファイルがあり、そこにテキストコンテンツが含まれています。また、JavaScriptファイル、そして自分が作業しているファイルと比較できる、各段階のプロジェクトのコピーがあります。

まずは、サイトの2つのHTMLページを作成しましょう。

  1. Dreamweaverのスタートアップスクリーンが表示されている場合は、「新規作成 」セクションの「HTML 」をクリックします。または、メインメニューからファイル/新規 を選択します。いずれの場合も、図10に示されているように、新規ドキュメントダイアログボックスが表示されます。

  1. 左側のカラムで「新規ドキュメント 」が選択されていること、「ドキュメントタイプ 」が「HTML 」に設定されていること、「フレームワーク 」が「なし 」に設定されていることを確認します。

  2. Bayside Beat: Cable Cars 」と、「タイトル 」フィールドに入力します。

  3. ドキュメントタイプ 」がデフォルトの「HTML5 」に設定されていること、「CSSを添付 」フィールドに何も表示されていないことを確認します。「CSSを添付」フィールドに何かが表示されている場合は、それを選択してから、フィールドの右側にあるゴミ箱アイコンをクリックします。

  4. 作成 」をクリックします。Dreamweaverによって、ドキュメントウィンドウに空白のHTMLページが作成されます。

  5. 必要に応じて、ドキュメントウィンドウの上部にある「分割 」(図11を参照)をクリックしてもとになるHTMLマークアップを表示します。

  1. ドキュメントウィンドウ(ライブビュー)は完全に空白ですが、図12に示すように、基本となるHTML構造がコードビューに表示されます。

  1. ファイルを保存するために、ファイル/保存 を選択するか、キーボードショートカットのCtrl + Sキー(Windows)またはCmd + Sキー(macOS)を使用します。

  2. 名前を付けて保存 ダイアログボックスで、bayside ローカルサイトフォルダーが保存先として選択されていることを確認してから、ファイルにindex.html という名前を付けて、「保存 」をクリックします。

  3. 新しいHTMLファイルを作成します。スタートアップスクリーンはもう表示されていないので、メニューバーからファイル/新規 を使用して新規ドキュメントダイアログボックスを開きます。別の方法として、Ctrl + Nキー(Windows)または Cmd + Nキー(macOS)を押して開くこともできます。

  4. ステップ2で選択したオプションと同じオプションを選択します。ただし今回は「タイトル 」フィールドを空白にしたまま、「作成 」をクリックします。

  5. ファイルにsights.html という名前を付けて、サイトルートフォルダーに保存します。

  6. コードビューで、5行目の タグで囲まれた値が<i>"無題ドキュメント"</i> になっています。<br /> <br />

    ブラウザーのタブまたはタイトルバーに、この値がそのまま表示されることになります。検索エンジンでも、これをタイトルとして取得します。この値を変更しないままにしておくことが、初心者によくある失敗です。

    値を変更するには、次の2つの方法があります。

    • コードを直接手動で変更します。この場合、HTMLタグの終了と開始のペアがそのままの状態で維持されるよう注意してください。

    • Dreamweaverのプロパティインスペクターを使用します。この方法を使って値を変更しましょう。

  7. ウィンドウ/プロパティを選択します。プロパティインスペクターと呼ばれる水平のパネルが表示されます。ドラッグしてドキュメントウィンドウ下部にドッキングします。ウィンドウ/プロパティを選択します。プロパティインスペクターと呼ばれる水平のパネルが表示されます。ドラッグしてドキュメントウィンドウ下部にドッキングします。

  8. 変更を確定するには、Tabキーを押すか、EnterキーまたはReturnキーを押します。5行目のHTMLコードの「無題ドキュメント 」が、「ドキュメントタイトル」フィールドに入力したテキストに置き換えらえます(図13を参照)。

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

Dreamweaverは自動的にHTMLマークアップを作成しますが、webページを処理している間はできるだけ分割ビューにしておくことをおすすめします。分割ビューによって、おこなった変更が正しく実装されていることを確認できます。これは、Dreamweaverは信頼性に欠けるという意味ではありません。特殊な状況を除けば、Dreamweaverは指示した通りのことをおこないます。重要なのは、自分がドキュメントのどの部分を処理しているのかを把握することです。挿入ポイントが間違っていると、新しいコードがそこに追加されてしまいます。注意を怠ると、修正するのが難しい、複雑で面倒な結果になり兼ねません。ページの構造を記録する上では、DOMパネルも大切な役割を果たします。DOMパネルは、チュートリアルシリーズの次のパートで使用します。

ヒント: もととなるコードとページの視覚的なビューを左右に並べて表示する場合は、表示/分割/左右に分割 を選択します。表示/分割/上下に分割を選択すると、ドキュメントウィンドウが上下に分割された状態に戻ります。表示メニューでは、ライブビューをどちらの側に配置するかも選択できます。コードビューとライブビューを分割するバーをドラッグすると、2つのビューの相対サイズを調整できます。これらの設定は、Dreamweaverが自動的に記憶します。

ここまでで、サイトを定義し、2つの空白のページを作成しました。次はこの空白のページにコンテンツを追加していきます。


提供元

David Powers

2022年9月13日

Dreamweaver でこれらのチュートリアルをお試しください

モダンでレスポンシブな web ページをデザイン