このシリーズのパート1では、Dreamweaverでサイトを定義して、ローカルのファイルとフォルダーの場所を設定する方法を学習します。
5496-create-first-website_1408x792

はじめに

Dreamweaverは、webサイトを視覚的に構築してデザインできる、優れたアプリケーションです。しかし、初めてDreamweaverを開くと、使いこなすのはかなり難しそうに感じるかもしれません。Dreamweaverには様々な機能がありますが、これらの機能にはどのような目的があるのでしょうか。

8つのパートで構成されたこのチュートリアルシリーズは、Dreamweaver CC 2015で、シンプルながらも洗練されたwebサイトを作成する手順を案内します。サイトを定義するところから、Hypertext Markup Language(HTML)で構造を組み立て、テキストと画像を追加し、Cascading Style Sheets(CSS)でページのスタイルを設定するまでのプロセス全体を説明します。

チュートリアルシリーズが程良い長さになるように、作成するwebページは2つだけになっていますが、完了した時点で自分でさらにページを作成するのに十分な知識が身に付いているはずです。


注意:
Dreamweaverの使用経験は必要ありません。ただし、HTMLとCSSの一般的な知識があると、このシリーズで取り上げるトピックのコンテキストを理解するのに役立ちます。HTMLとCSSはいずれも標準化されたweb技術であり、この2つについて学ぶために利用できるリソースは数多くあります。基礎知識を身に付けるには、「HTMLを使用してページ構造を定義」、「カスケーディングスタイルシート(CSS)の理解」、および「HTML & CSS」が役立ちます。

プロジェクトの概要

まず、サンプルファイルをダウンロードして、完成版のプロジェクトを見てみましょう。

  1. このページの上部にあるリンクからサンプルファイルをダウンロードします。

  2. サンプルファイルはすべて、1つのZIPファイルに圧縮されています。都合のいい任意の場所(デスクトップなど)にファイルを抽出します。
    • Mac OS Xでは、MacのFinderでダウンロードしたZIPファイルをダブルクリックすると、自動的にファイルが抽出されます。
    • Windowsでは、ダウンロードされたZIPファイルを右クリックして、コンテキストメニューから「すべて展開」を選択します。保存先のフォルダーを選択し、「展開」をクリックします。
  3. 抽出されたファイルの中に、baysideという名前のフォルダーがあります。このフォルダーには、図1に示されているように9つのサブフォルダーが含まれています。
fig01
図1. サンプルファイルに、開発の各段階のプロジェクトが含まれている

    contentフォルダーにはwebページのテキストコンテンツ、jsフォルダーにはJavaScriptファイルが含まれています。このJavaScriptファイルは、小さな画面解像度でナビゲーションメニューを制御するために使用します。他のフォルダーには、このシリーズの各パートを完了した時点での状態を反映した、完全なプロジェクトが含まれています。自分のコードと比較してチェックするのに使用できます。パート8のフォルダーはありません。最後のパートは、完成したプロジェクトをwebサーバーにアップロードする方法を説明するものだからです。

  1. part7フォルダーを開いて、その中にあるindex.htmlをダブルクリックしてブラウザーで表示します。図2のように、プロジェクト完成時のホームページが表示されます。
fig02
図2. プロジェクト完成時のホームページには、2カラムレイアウトが使用されている
  1. いずれかの辺を内側にドラッグして、ブラウザーのサイズを変更します。ビューポートが700 pxより狭くなると、レイアウトが2カラムから1カラムに変わります。ナビゲーションバーに代わって、黒い背景色の「MENU」が表示されます。図3に示すように、ゴールデンゲートブリッジの画像に重ねられていたボックス内の白いテキストは濃いピンクになり、画像の下に配置されるようになります。
fig03
図3. 画面が狭くなると、ページが1カラムレイアウトに変更される
  1. MENU」をクリックします。半透明の黒い背景色のナビゲーションメニューがスライドダウンしてきます(図4を参照)。
fig04
図4. ナビゲーションメニューがスライドしてビューに現れる
  1. もう一度、「MENU」をクリックします。ナビゲーションメニューが上にスライドしてビューから消えます。

  2. ナビゲーションメニューをもう一度開き、「SIGHTS」をクリックして2ページ目を表示します(その他のメニュー項目はダミーのリンクです)。

以上が、このシリーズでDreamweaver CC 2015を使用して作成するプロジェクトです。このプロジェクトを作成する過程で、以下の方法を学びます。

  • Dreamweaverでサイトを定義する

  • HTML5要素を使用してwebページの構造を定義する

  • DOMパネルを使用してページのどこにいるのかを調べ、新しい要素を追加する

  • ページにテキストと画像を追加する

  • Creative Cloudライブラリから画像をダウンロードしてリサンプリングする

  • DreamweaverのCSSデザイナーを使用してページのスタイルを設定する

  • 2番目のwebページを作成して、同じようにスタイルを設定する

  • ビジュアルメディアクエリバーを使用して各種レイアウトを制御する

  • 完成したページをオンラインのwebサーバーにアップロードする

この過程で、Dreamweaverユーザーインターフェイスの最も重要な部分についても知ることができます。

これは詳しいチュートリアルです。十分に時間をとってください。それぞれのパートは複数の短いセクションに分かれています。各セクションでは、何をおこなうかだけでなく、なぜそうするのかについても説明されます。セクションを完了するごとに時間を取り、そこで説明されたテクニックをきちんと理解してから、次のセクションに進んでください。

注意:このチュートリアルシリーズは、Dreamweaver CC 2015.2を対象に作成されているため、これより前のバージョンでは利用できない機能も使用しています。前のバージョンのDreamweaverでも同じwebサイトを作成できますが、このチュートリアルにはDreamweaver CC 2015.2以降のバージョンを使用することをおすすめします。Creative Cloudのサブスクリプションをお持ちでない場合は、無料体験版を使用できます。

Dreamweaverのワークスペースを設定する

作業を開始する前に、デザインワークスペースに切り替えてください。これにより、このチュートリアルに必要なすべてのメインパネルにアクセスできるようになります。Windowsでは、画面の右上にあるワークスペーススイッチャーを使用して簡単にワークスペースを切り替えることができます(図5を参照)。

fig05
図5. ワークスペーススイッチャーで、デザインワークスペースを選択

Mac OS Xでも、ワークスペーススイッチャーはデフォルトで同じ場所にありますが、アプリケーションフレームを無効にしている場合は左側に配置されます。アプリケーションバーも無効にしている場合は、ワークスペーススイッチャーは非表示になっています。ワークスペースを選択する別の方法として、ペイン/ワークスペースのレイアウト/デザインを使用することもできます。

Dreamweaverでサイトを設定する

初心者にありがちな失敗は、Dreamweaverでwebページの作業を始める前に、サイトを定義しないことです。その結果、画像やスタイルシートなどのアセットへのリンクが、ローカルコンピューターの場所を指してしまいます。その状態で問題なく作業を進められるのは、サイトをリモートサーバーにアップロードする時点までです。アップロードすると、すべてのリンクがリンク切れになり、修正が必要になります。この問題を避けるために、必ずサイトを定義してください。サイトの定義は簡単で、すぐに終わります。

Dreamweaverでは、ローカルコンピューター上のwebサイトに関連付けられているドキュメントのすべてを、1つのサイトにまとめて整理します。サイトによって、リンクのトラックと維持、ファイルの管理、webサーバーへのサイトファイルの転送などがおこなえます。標準的なDreamweaverのサイトは、以下の2つのパートで構成されています。

  • ローカルフォルダー:作業ディレクトリです。通常、ハードドライブ上のフォルダーになります。Dreamweaverでは、このフォルダーをローカルサイトルートと呼びます。

  • リモートフォルダー:webサーバーを実行しているコンピューター上にある、ファイルの保管場所です。webサーバーは多くの場合(ただし、常にではなく)、webでサイトを一般公開するコンピューターです。

ヒント:複数のサイトで作業することを予定している場合は、ローカルハードドライブにそれらのサイトを保管するためのフォルダーを1つ作成することをおすすめします。Mac OS Xの場合、ホームのフォルダー内に、Sitesという名前のフォルダーがあらかじめ含まれています。Windowsでは、Cドライブの最上位に、Sitesという名前のフォルダーを設定してください。このシリーズで使用するスクリーンショットはWindowsで撮られたものですが、キーボードショートカットと一部のボタンのラベルを除き、手順はMac OS Xの場合でもまったく同じです。

Bayside Beatサイトのローカルサイトフォルダーを定義する

作業を始めるために必要なのは、サイトに名前を付けて、ローカルコンピューター上でファイルを保管する場所を指定することだけです。サイトをインターネット上で実際に稼働するwebサーバーにアップロードする用意ができるまでは、リモートフォルダーを定義する必要はありません。

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

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

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

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

  3. 新規フォルダー」(Windowsの場合はダイアログボックスの上部、Macの場合は下部にあります)をクリックします。新しい画像フォルダーに「images」と名前を付け、このフォルダーを選択してから「フォルダーの選択」(Windowsの場合)または「選択」(Macの場合)をクリックします。サイト設定ダイアログボックスは図7のようになります。
fig07
図7. デフォルトのイメージフォルダーを設定
  1. その他のオプションはデフォルト値のままにします。このチュートリアルではドキュメントへの相対リンクを使用するため、「Web URL」フィールドに値を入力する必要はありません。

  2. 保存」をクリックします。

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

fig08
図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. 共有アセットをまだBaysideライブラリに保存していない場合は、ブラウザー画面の上部にある「Creative Cloudへ保存」をクリックし、保存します。

  3. Dreamweaver CCライブラリパネルで、Baysideライブラリを選択します。図9に示すように、4つの画像と6つのカラースウォッチが表示されるはずです。
fig09
図9. Bayside CCライブラリ内の共有アセット

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

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

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

  1. Dreamweaverのスタートアップスクリーンが表示されている場合は、「新規作成」セクションの「HTML」をクリックします。または、メインメニューからファイル/新規を選択します。いずれの場合も、図10に示されているように、新規ドキュメントダイアログボックスが表示されます。
fig10
図10. 新規ドキュメントダイアログボックスには、多くのタイプのファイルを作成するオプションがある
  1. 左側のカラムで「新規ドキュメント」が選択されていること、「ドキュメントタイプ」が「HTML」に設定されていること、「フレームワーク」が「なし」に設定されていることを確認します。

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

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

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

  5. 必要に応じて、ドキュメントウィンドウの左上にある「分割」ボタン(図11を参照)をクリックしてもとになるHTMLマークアップを表示します。
fig11
図11. ドキュメントウィンドウで「分割」ボタンを選択して、もとになるコードの一部を表示する
  1. ドキュメントウィンドウ(ライブビュー)は完全に空白ですが、図12に示すように、基本となるHTML構造がコードビューに表示されます。
fig12
図12. Dreamweaverにより、基本的なHTML構造が自動的に作成される

    1行目は、ブラウザーにこれがHTMLファイルであることを指示する、ドキュメントタイプ(doctype)の宣言です。

    HTMLは、タグベースの言語です。タグは山括弧で囲まれます。ほとんどのタグはペアとなっていて、終了タグは開始山括弧の後ろにあるスラッシュで示されます。

    ページ全体は、<html>タグのペア(2行目と10行目)の中にネストされます。2行目から6行目までの<head>セクションには、ブラウザーのための情報が含まれています。ページのコンテンツはすべて、開始<body>タグから終了<body>タグまでの間に収容されます。

    ほとんどの場合、ユーザーがDreamweaverのビジュアルインターフェイスとダイアログボックスで作業すると、Dreamweaverがそれに伴って自動的に必要なすべてのコードを作成します。ただし、ほかの場所からコードをコピー&ペーストする場合には注意が必要です。人間と同じように、HTMLページは1つの頭(head)と1つの体(body)しか持つことができません。コンテンツがライブビューまたはブラウザーに表示されない場合、最も可能性の高い理由として、bodyの外にコンテンツをペーストしたことが考えられます。

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

  2. 別名で保存ダイアログボックスで、baysideローカルサイトフォルダーが保存先として選択されていることを確認してから、ファイルにindex.htmlという名前を付けて、「保存」をクリックします。
  3. 保存したファイルがファイルパネルにリストされ、ドキュメントウィンドウの左上のタブに、ファイル名が表示されます。

    ヒント:別名で保存ダイアログボックスの下部にある「サイトルート」ボタンをクリックすることで、いつでも現在のwebサイトのローカルサイトフォルダーに移動できます。

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

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

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

  7. 分割ビューで、5行目の<title>タグで囲まれた値が"無題ドキュメント"になっています。

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

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

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

    • Dreamweaverのプロパティインスペクターを使用します。この方法を使って値を変更しましょう。
  8. プロパティインスペクターは、デザインワークスペースのドキュメントウィンドウ下部にある、大きな水平のパネルです。必要に応じて、「プロパティ」タブをクリックして前面表示に切り替えることができます(初期状態では、出力パネルの後ろに隠れています)。
  9. ドキュメントタイトル」フィールドで、「無題ドキュメント」を「Bayside Beat: Sightseeing」に変更します。なお、入力中はHTMLソースにその変更は反映されません。

  10. 変更を確定するには、Tabキーを押すか、EnterキーまたはReturnキーを押します。5行目のHTMLコードの「無題ドキュメント」が、「ドキュメントタイトル」フィールドに入力したテキストに置き換えらえます(図13を参照)。
fig13
図13. プロパティインスペクターを使用してドキュメントタイトルを設定
  1. sights.htmlを保存します。

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

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

次のステップ

ここまでで、サイトを定義し、2つの空白のページを作成しました。パート2:テキストコンテンツの追加と書式設定に進んで、この空白のページにテキストコンテンツを追加し、書式を設定しましょう。

04/24/2018

提供元:David PowersTom Alex Buch

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