今回は Dreamweaverでサイトを定義する方法を紹介します Dreamweaverでプロジェクトを開始するとき 毎回、最初におこなう作業です どのサイトでもすべてのファイルを 一元管理するのがポイントです サイトの定義例をご覧ください これは標準ビュー画面ですが デベロッパー画面にすると ファイルパネルは左側になります 標準画面では右側です 表示されないときは ウィンドウ／ファイル を選択します これが作成済みの サイトの定義です 実際には、デスクトップにある Renderedフォルダーの内容です 中には、HTMLファイル CSSファイルのほか、Javascript 画像、ビデオのフォルダーもあります デスクトップで確認してみましょう こちらのフォルダーですが まったく同じものが入っています HTML、CSS、imagesフォルダー サイトの定義とは、これらのリンクを設定することです 新しいサイトの定義を作成しましょう 画面上部にある「サイト」から 「新規サイト」を選択します 「サイト名」には 任意の名前を入力します 編集中に参照しやすくするためなので 自由に指定してください 私は「My Portfolio」にします 名前の途中にスペースを入れても構いません 「ローカルサイトフォルダー」では サイトに使用する各種ファイルの 保存先を指定します ここでは、フォルダーを参照して デスクトップを選択 新しいフォルダーを作成します 私は「my_portfolio」と名付けます フォルダー名の途中には スペースを入れないでください ハイフンかアンダースコアでつなげます 「作成」をクリック 「選択」をクリックすれば ファイルの保存先が指定されます 次に 画像の保存先を指定します 詳細設定／ローカル情報 を選択します 「デフォルトのイメージフォルダー」で フォルダーを参照し、「新しいフォルダー」をクリック 「images」と入力して 「作成」をクリック 「選択」をクリックします Webサイトで画像を使うときに 効率的に作業できます 複数のソースから画像を挿入しても Dreamweaverが自動的に 画像を認識して このimagesフォルダーに入れます 一元管理が Dreamweaverの基本です サイトの基本的な定義は以上です 「保存」をクリックします 確認のため デスクトップに作成された フォルダーを見てみましょう my_portfolioを開くと imagesフォルダーがありますね 今はまだ空ですが サイトに挿入した画像がすべて入ります Dreamweaverでサンプルファイルを作成しましょう 右側にローカルサイトが表示されます imagesフォルダーがありますね HTMLドキュメントを作成します 本文は空のままで 「保存」をクリックします 「index.html」と名付けます 「保存」をクリックすると 既定のフォルダーに入りました デスクトップも確認しましょう indexファイルが作成されています ファイルを整理して1箇所にまとめるのが サイトの定義を作成する理由です Dreamweaverのサイトの定義には 他にもメリットがあります Dreamweaverで 作成済みのサイトの定義を表示しています HTML、すべての画像 CSSシートなども作成済みです それでは、サイトを開くため index.htmlをダブルクリックします 左側に内容が表示されます コードビューですが、分割、ライブ デベロッパービューへの切り替えも可能です index.htmlとimagesフォルダーがあります imagesフォルダーはサイトで頻繁に 参照されています 例えば...
ここに1つ、images/menu-hamburger.png ここにもあります サイト全体で使用されています ここにもimages images、ここにもimages このサイトには数多くの画像が含まれるからです ブラウザーでプレビューしてみましょう ファイルメニューから リアルタイムプレビュー／Google Chrome を選択すると サイトが表示されます 背景に美しいビデオが再生されます これも画像 小さな画像 たくさんあります 画像、画像、画像 大量の画像が参照されています Dreamweaverに戻りましょう ファイル名を変更する必要が生じたとします デスクトップで 例えば、imagesフォルダー名を変更し よく使う「img」にします Dreamweaverを使わずに コンピューター上で 名前を変更するとどうなるでしょうか Dreamweaverは元の名前で参照しているので プレビューすると 画像の読み込みに失敗します ファイルの変更やフォルダー内の ファイル名を変更するときは ファイルパネルを使用してください ここでは元の名前に戻し Dreamweaverを開きます ファイルパネルのフォルダー名で 右クリックして「編集」を選択 「名前の変更」で 「img」と入力し 「OK」をクリックします ポップアップメッセージで このフォルダーを参照するすべてのコードを 更新するか確認を求められます 「更新」をクリックします するとどうなるでしょう すべて「img」に変わっています プレビューしてみましょう すべて問題なく表示されています 画像を入れるフォルダーだけでなく どの名前を変更しても問題ありません どのページでも、名前を変更するときは ファイルパネルを使いましょう 自動的にコードが更新され リンク切れの心配がなくなります サイト構築の基本事項を説明しました ここからは、応用編です サイトの定義を編集したい場合は 「サイト」をクリックして 「新規サイト」ではなく「サイトの管理」を選択します 設定済みのサイトの定義が記録されています さきほど作成した定義 「My Portfolio」を開きましょう ダブルクリックします サイト名の変更や ローカルサイトフォルダーを移動したときは そのパスの変更ができます サーバーも重要な設定項目です 接続先として、リモートホスティングサイト またはテストサイトを指定します インターネットにサイトを表示する方法を指定します 「+」ボタンをクリックして ホスティング情報を入力します 詳細はホスティング会社からの メール等で確認してください 詳しい設定方法については 別のビデオで説明します 詳しい設定方法はそちらをご覧ください ここでは、「保存」をクリック もう一度「保存」をクリック 「OK」をクリックします 「サイトの管理」には便利な共有機能があります 「My Portfolio」というサイトの定義に ローカルフォルダーを作成し ホストサーバーのリモートサイトも定義しました これを他の人と共有するには 共有者も同じWebサイトに接続する必要があります または、自分自身でもラップトップからデスクトップに デバイスを変更することがあるでしょう その場合は、接続情報を再入力するのではなく 「選択したサイトの書き出し」をクリック 「保存」をクリックして STEファイルを作成すれば 電子メール送信も、共有もできます 共有者がどこにいても...
画面を閉じますね 同じ画面を開き サイト／サイトの管理／サイトの読み込み をクリックして 設定を読み込めば すぐに作業に入れます 削除には「-」ボタンを使います 設定を選択して、「-」をクリックしますが 一点ご確認ください 「-」をクリックすると 「この操作は取り消しできません」と表示されますが 「はい」、「完了」をクリックします デスクトップを見ると my_portfolioサイトには 作成したすべてのファイルが残っています 削除されたのはファイル自体ではなく サイトの定義だけということです これでローカルサイトが定義できました サーバーへの接続と ファイルパネルの機能を確認しました 最後に サイトを設定した後の重要な点として 最初のページが表示される仕組みを確認しましょう index.htmlというページを作成しました 覚えておいてください 最初のサイトの最初のページには index.htmlを置く必要があります なぜかと言うと ブラウザーがサイトを認識するために探すページだからです 事実上のホームページであり すべてのWebサイトに必ず1つは存在します その他のページは自由に名付けて構いませんが indexに限ってはスペルはそのままにしておきましょう ブラウザーで確認しましょう Adobe.comサイトの後に index.htmlを入力し Enter（Return）をクリックします URLでは非表示ですが、正しく ホームページが表示されます 1000ページものサイトを作成しても indexページがなければ そのサイトは何も表示されず エラーページが表示されてしまいます もう1つ、サイトとファイル管理で 重要な点は Dreamweaver外でファイルを追加したときの 更新についてです imagesフォルダーをご覧ください たくさん画像が入っていますが Dreamweaver外でもう1つ追加するとします ドライブのimagesフォルダーを開きます このフォルダーに このファイルを追加するため ドラッグします ほとんどの場合、時間はかからず 自動的に更新されますが 何かの理由で更新されていなければ 「更新」をクリックすれば 強制的に更新されます よし サイトの定義は、デスクトップのフォルダーと 関連付けるために設定し そのサイトのすべてのファイルを 定義したフォルダーに入れます また、サイトの定義を使って ホスティングまたはテストサーバーと接続します ファイル名変更の注意点は ファイルパネルを使うこと そうすれば、コードが自動的に更新されます 最後に、index.htmlページを必ず作ること 忘れたら最後、サイトは表示されません 苦労が水の泡です Dreamweaverのサイトの定義について説明しました
