髭仙人の漫ろ歩き
Dreamweaver
............................ unworldly man go for a ramble in the internet world ...
ページにコンテンツを追加する  
 イメージを挿入する


 Dreamweaver でイメージを挿入するための方法として、Dreamweaver のメインメニューを使用する方法と、[オブジェクト] パネルを使用する方法の 2 通りがあります。

1 ロゴレイアウトセル (一番上のレイアウトセル) 内の任意の場所をクリックします。
レイアウトセル内をクリックすると、セルを選択せずにセル内に挿入点が配置されます。



2 [挿入]-[イメージ] を選択します。
3 [イメージソースの選択] ダイアログボックスで、"Compass_Site" フォルダを見つけて、"Assets" フォルダにナビゲートします。次に "images" フォルダにナビゲートして "compass_logo.gif" をクリックして選択します。
4 ダイアログボックスの下部にある [相対位置] ポップアップメニューが [ドキュメント] に設定されていることを確認し、[選択] (Windows) または [開く] (Macintosh) をクリックしてイメージを選択します。
レイアウトセルにイメージが表示されます。



5 "Learn More About" のレイアウトセル内の任意の場所をクリックして、セル内に挿入点を配置します。
6 [オブジェクト] パネルの [一般] カテゴリ内で、[イメージの挿入] アイコンをクリックします。
7 [イメージソースの選択] ダイアログボックスで "Compass_Site\Assets\images" フォルダを見つけて "learnMoreAbout.gif" にナビゲートし、[選択] (Windows) または [開く] (Macintosh) をクリックしてイメージを選択します。
レイアウトセルにイメージが表示されます。
8 [ファイル]-[保存] を選択して、ホームページに対して行った変更を保存します。

……………………………………………………………………………………………………………………

 ロールオーバーイメージを作成する


 ロールオーバーイメージは、ポインタがイメージ上を通過 (ロール) すると表示が変化するイメージです。

 [ロールオーバーイメージの挿入] コマンドを使用して、"Trip Planner"、"Destinations"、および "Travel Logs" のナビゲーションボタン用に 3 つのロールオーバーイメージを作成します。

 ロールオーバーイメージは、次の 2 つのイメージから構成されます。ページがブラウザに最初にロードされたときに表示されるイメージと、ポインタがオリジナルのイメージ上を移動したときに表示されるイメージです。同じサイズのイメージを使用してください。最初のイメージが表示のサイズを決定するので、2 番目のイメージが小さい、または大きい場合は、表示が歪んだり、不適切な 印象を与えます。

 次は、ロールオーバーイメージを備えたナビゲーションボタンを、ページに追加します。その後で、ほかのナビゲーションボタンを追加して、ブラウザでページをプレビューしてロールオーバーをテストします。

1 ドキュメントウィンドウで、ナビゲーションボタンテーブルの最初のセルをクリックします。
これにより、画像を挿入する位置を Dreamweaver に通知します。
2 ロールオーバーイメージを挿入するには、次のいずれかの操作を行います。
[オブジェクト] パネルの [一般] カテゴリ内で、[ロールオーバーイメージの挿入] アイコンをクリックします。
[挿入]-[インタラクティブイメージ]-[ロールオーバーイメージ] を選択します。
3 [ロールオーバーイメージの挿入] ダイアログボックスの [イメージ名] フィールドに「planner」と入力します。
これによりイメージにほかと重複しない一意の名前を与えて HTML コード内で簡単に識別できるようにします。
4 [元のイメージ] フィールド内で、[参照] をクリックして "MenuTripPlanner.gif" にナビゲートし、[選択] (Windows) または [開く] (Macintosh) をクリックします。
これにより、ページが最初にロードされたときに表示するイメージを Dreamweaver に通知します。
5 [ロールオーバーイメージ] フィールド内で、[参照] をクリックして "MenuTripPlanner_on.gif" にナビゲートし、[選択] (Windows) または [開く] (Macintosh) をクリックします。
これにより、ポインタがオリジナルのイメージの上を通過したときに表示するイメージを Dreamweaver に通知します。
6 [ロールオーバーイメージのプリロード] オプションが選択されていることを確認してください。ページがブラウザにロードされたときに、ロールオーバーイメージがロードされ、ユーザーがポインタをオリジナルのイメージ上に移動したときに、イメージが素早く変わるようになります。



7 [OK] をクリックしてダイアログボックスを閉じます。
イメージがドキュメントに表示されます。
8 レイアウトセルのサイズを変更してイメージに合わせます。

……………………………………………………………………………………………………………………

 別のロールオーバーイメージを作成する


 ここで、別のナビゲーションボタンにロールオーバーイメージを追加します。

1 ドキュメントウィンドウで、2 番目のナビゲーションボタンセルをクリックします。次に [オブジェクト] パネルの [一般] カテゴリ内で、[ロールオーバーイメージの挿入] アイコンをクリックします。
2 [ロールオーバーイメージの挿入] ダイアログボックスの [イメージ名] フィールドに「destinations」と入力してイメージに、ほかと重複しない一意の名前を付けます。
3 [元のイメージ] フィールド内で [参照] をクリックして、"MenuDestinations.gif" にナビゲートして選択します。
4 [ロールオーバーイメージ] フィールド内で [参照] をクリックして、"MenuDestinations_on.gif" にナビゲートして選択します。
5 [ロールオーバーイメージのプリロード] オプションが選択されていることを確認し、[OK] をクリックしてダイアログボックスを閉じます。
6 ドキュメントウィンドウで、3 番目のナビゲーションボタンセルをクリックします。次に [オブジェクト] パネルの [一般] カテゴリ内で、[ロールオーバーイメージの挿入] アイコンをクリックします。
7 [ロールオーバーイメージの挿入] ダイアログボックスの [イメージ名] フィールドに「travellog」と入力してイメージにほかと重複しない一意の名前を付けます。
8 [元のイメージ] フィールド内で、[参照] をクリックして "MenuTravelLogs.gif" にナビゲートして選択します。
9 [ロールオーバーイメージ] フィールド内で、[参照] をクリックして "MenuTravelLogs_on.gif" にナビゲートして選択します。
10 [ロールオーバーイメージのプリロード] オプションが選択されていることを確認し、[OK] をクリックしてダイアログボックスを閉じます。
11 2 つのレイアウトセルのサイズを変更してイメージに合わせます。

……………………………………………………………………………………………………………………

 ドキュメントをプレビューする


 ロールオーバービヘイビアは、Dreamweaver のドキュメントウィンドウで表示することはできません。ロールオーバーイメージはブラウザ内でのみ動作します。ただし、ドキュメントを Dreamweaver 内でプレビューして、ブラウザ関連機能を確認することができます。プレビューする前にドキュメントを保存する必要はありません。

1 Web ブラウザ内でドキュメントを確認するには、F12 キーを押します。
 作成したロールオーバーイメージの上にマウスポインタを移動して、変化を確認します。
2 ファイルのプレビューが終わったら、ブラウザウィンドウを閉じます。
3 Dreamweaver のドキュメントウィンドウに戻り、[ファイル]-[保存] を選択してホームページに対して行った変更を保存します。

……………………………………………………………………………………………………………………

 テキストを挿入する


 ここでは、下部のレイアウトテーブルのセル内にテキストを挿入します。

 Dreamweaver では、レイアウトセルに直接コンテンツを入力することも、別のドキュメントからコンテンツを切り取ってレイアウトセルに貼り付けることもできます。このチュートリアルでは、既存のテキストファイルからコンテンツをコピーして、レイアウトセルに貼り付けることによって、レイアウトセルにテキストを挿入します。

1 [ファイル]-[開く] を選択して、"Compass_Site" フォルダの "DW4_HomeText.txt" を開きます。
"DW4_HomeText.txt" ドキュメントが新しい Dreamweaver ドキュメントウィンドウ内に表示されます。
2 "DW4_HomeText.txt" からテキストの最初の 2 行、「Fly Fishing」から「ravioli」までを選択します。
3 [編集]-[コピー] を選択してテキストをコピーします。
4 [my_CompassHome] ドキュメント内で、テキスト説明レイアウトテーブル内の最初のレイアウトセルをクリックします。
5 [編集]-[ペースト] を選択してテキストをレイアウトセルにペーストします。
6 "DW4_HomeText.txt" からテキストの次の 2 行、「Level 5 Rapids」から「Siberia.」までを選択します。
7 [編集]-[コピー] を選択してテキストをコピーします。
8 [my_CompassHome] ドキュメント内で、テキスト説明レイアウトテーブル内の 2 番目のレイアウトセルをクリックします。
9 [編集]-[ペースト] を選択してテキストをレイアウトセルにペーストします。
10 "DW4_HomeText.txt" からテキストの最後の 2 行、「Puget Sound Kayaking」から「Puget Sound.」までを選択します。
11 テキストをコピーして、レイアウトテーブル内の 3 番目のセルにペーストします。
12 "DW4_HomeText.txt" を閉じて、[my_CompassHome.html] 内をクリックしてアクティブなドキュメントにします。

……………………………………………………………………………………………………………………

 テキストをフォーマットする


 [プロパティ] インスペクタ内のプロパティを設定することによってドキュメントウィンドウ内のテキストをフォーマットすることができます。まず、フォーマットするテキストを選択してから、変更を適用します。テキストのフォントタイプとサイズを変更します。

1 [プロパティ] インスペクタが開いていない場合は、[ウィンドウ]-[プロパティ] を選択します。
2 最初のテキスト説明レイアウトセル内で、「Fly」から最後の「ravioli」までのすべてのテキストを選択します。
3 [プロパティ] インスペクタの 2 番目の [フォーマット] ポップアップメニューで、現在表示されている [フォント指定なし] の代わりに [Times New Roman, Times, serif] を選択します。
4 [サイズ] ポップアップメニューで [2] を選択します。
ドキュメント内のテキストが変更を反映して自動的に更新されます。
5 上記の手順を繰り返して、ほかの 2 つのテキスト説明レイアウトセル内のテキストを選択してフォーマットします。

……………………………………………………………………………………………………………………

 カラーとスタイルを適用する


 テキストで追加のフォーマット変更を適用し、カラーとスタイルを適用して見出しのテキストを作成します。

1 最初のテキスト説明レイアウトセル内で、「Fly」から「Mountains」までの見出しのテキストを選択します。
2 [プロパティ] インスペクタ内で、カラーピッカーをクリックして、ドキュメントウィンドウ内の Learn More About イメージにスポイトを移動してイメージ内のテキストの茶色を選択します。
3 [プロパティ] インスペクタ内で、[B] アイコンをクリックして太字スタイルをテキストに適用します。
4 上記の手順を繰り返して、ほかのテキスト説明レイアウトセル内の見出しのテキストに、カラーとスタイルを適用します。
5 ブラウザでページをプレビューするには、F12 キーを押します。
ページは、次に示すページと同じようになります。
 テキストを確認します。1 つのレイアウトセル内のテキストと次のテキストの間が少し空いています。これは、チュートリアルの後の手順で修正します。
6 ブラウザウィンドウを閉じて、ドキュメントウィンドウをクリックしてアクティブにします。

 
スタンダードビューでの作業  
 スタンダードビューに切り替え


 レイアウトビューは、Web ページのレイアウトに役立ちます。ほとんどのデザイン要素をレイアウトビュー内で調整できますが、特定の変更は、スタンダードビューで実行する必要があります。スタンダードビューに切り替えると、Dreamweaver でテーブルを使用してページ構造を作成する方法を確認できます。レイアウトビュー内のレイアウトテーブルは、スタンダードビュー内では <table> タグになっています。

 ここでは、デザインを微調整するためにテーブルを使用して作業します。最初に、Dreamweaver のスタンダードビューに切り替えます。

……………………………………………………………………………………………………………………

 セルのプロパティを設定する


 セルの高さは、セル行内のスペースの高さを決定します。Compass ロゴの周囲のスペースに注目してください。ロゴとナビゲーションボタンの間の、余分なスペースを削除します。

1 Compass ロゴイメージ自体ではなく、イメージを含むセルのブランクエリア内の任意の場所でクリックします。
2 セルの [プロパティ] インスペクタ内で、現在、値を含んでいる [高さ] フィールド (高さ) の値を消去します。
3 [プロパティ] インスペクタ内で、下部エリアにある [背景色] アイコンをクリックして、スポイトを使用して黒を選択します。
背景色がセルに適用されます。
4 ドキュメント内の任意の場所をクリックして変更を確認します。

……………………………………………………………………………………………………………………

 テーブルを選択する


 次に、ナビゲーションボタンテーブル内のスペースを調整します。スタンダードビュー内でテーブルを簡単に選択するには、タグセレクタを使用します。タグセレクタは、ドキュメント内の要素の HTML タグを表示します。

タグセレクタを使用して、ナビゲーションボタンを含んでいるテーブルを選択します。

1 Trip Planner イメージを含むセルをクリックします。
ドキュメントウィンドウの左下のタグセレクタを確認します。



 メモ : タグセレクタ内のタグは、レイアウトビュー内で作成したテーブルの数によって異なります。
2 タグセレクタ内で、一番右の <table> タグをクリックします。
ドキュメントウィンドウ内の、ナビゲーションボタンテーブルの周囲に境界線が表示され、[プロパティ] インスペクタには、テーブルのプロパティが反映されています。

 

……………………………………………………………………………………………………………………

 テーブルのプロパティを設定する


 ここでは、テーブルの [プロパティ] インスペクタを使用して、ナビゲーションボタンテーブル内の余分なスペースを削除し、テーブルに背景色を追加します。

1 [プロパティ] インスペクタ内で、[行の高さをクリア] アイコンをクリックします。[プロパティ] インスペクタの下半分にある、一番左上のボタンです。
テーブルから余分なスペースが削除されます。
2 [プロパティ] インスペクタ内で、[背景色] アイコンをクリックして、スポイトを使用して黒を選択します。
黒の背景色がナビゲーションボタンテーブルに適用されます。

……………………………………………………………………………………………………………………

 セルに余白を追加する


 次に、テキストを含むセルに変更を加えます。明らかにテキストがセルの端に近づきすぎています。セルに余白を追加して、テキストとセルの間に隙間を空けます。

1 テキスト説明テーブル内の最初のセルをクリックします。
2 タグセレクタ内で、一番右の <table> タグをクリックしてテーブルを選択します。
3 [プロパティ] インスペクタの [セル余白] フィールドに「10」と入力して、テキストとテーブルセルの間に 10 ピクセル分のスペースを追加します。
4 ドキュメント内の任意の場所をクリックして変更を確認します。
5 ドキュメントを保存します。

……………………………………………………………………………………………………………………

 サイトファイルを表示する


 ローカルサイト構造を、より視覚的に分かりやすく表示するには、Dreamweaver のサイトマップビューを使用します。サイトマップを使用すると、サイトへの新しいファイルやリンクの追加、削除、変更ができます。さらに、サイトのグラフィックファイルを作成して、イメージ編集アプリケーションでインポートし、印刷などができます。

 サイトマップには、マップの上部に常にサイトのホームページが表示されます。ホームページの下には、ホームページがリンクしているファイルが表示されます。

 サイトのホームページを定義するには、いつくかの方法があります。ホームページを簡単に設定するには、[サイト] ウィンドウ内のコンテキストメニューを使用します。

1 [サイト] ウィンドウのタイトルバーをクリックして、アクティブにします。[サイト] ウィンドウが表示されていない場合は、[ウィンドウ]-[サイトファイル] を選択します。
2 [サイト] ウィンドウの [ローカルサイト] リストで、"my_CompassHome.html" ドキュメントを右クリック (Windows) または Control キーを押しながらクリック (Macintosh) します。次にコンテキストメニューから [ホームページに設定] を選択します。
3 [サイト] ウィンドウの [サイトマップ] アイコンをクリックして、サイトマップのポップアップメニューから [マップとファイル] を選択します。

 [サイト] ウィンドウがローカルサイトの 2 つのビューと共に表示されます。左側はサイトマップで、Compass サイトの現在の構造を視覚的に表します。ホームページは "my_CompassHome.html" です。右側はローカルフォルダのコンテンツのリストです。

 "my_CompassHome.html" ページには、現在リンクがありません。このチュートリアルの次のセクションで、このページにリンクを追加します。

 [サイト] ウィンドウを開いたままにしておくと、ホームページにリンクを追加したときにサイトマップがどのように更新されるかを参照できます。

……………………………………………………………………………………………………………………

 ドキュメントにリンクを作成する


 Compass ホームページの上部エリア内のイメージは、ビジターをサイト内の特定のページにガイドします。ここで、ナビゲーションボタンにリンクを追加します。

 Dreamweaver を使用してリンクを作成するにはいくつかの方法があります。まず、[プロパティ] インスペクタを使用して、Trip Planner イメージから "TripPlanner.html" ページにリンクを追加します。

1 [サイト] ウィンドウで、いずれかのパネル内の "my_CompassHome.html" ファイルのアイコンをダブルクリックします。
"my_CompassHome.html" ファイルがアクティブウィンドウになります。
2 ドキュメントウィンドウで Trip Planner イメージをクリックして選択します。
3 [プロパティ] インスペクタが開いていない場合は、[ウィンドウ]-[プロパティ] を選択して開きます。
[プロパティ] インスペクタには、選択したイメージについての情報が表示されます。



メモ : [リンク] フィールドには、ロールオーバーイメージを挿入したときに作成される、ヌルまたは "ダミー" リンクとして表されるシャープ記号 (#) が含まれます。この文字は削除しないでください。リンク先のドキュメントのファイル名に置き換わります。
4 [プロパティ] インスペクタ内で、[リンク] フィールドの右にあるフォルダアイコンをクリックします。
5 [ファイルの選択] ダイアログボックス内で "Compass_Site" フォルダを見つけて "DW4_TripPlanner.html" にナビゲートし、[選択] (Windows) または [開く] (Macintosh) をクリックして、[Trip Planner] ボタンがクリックされたときに開くファイルを選択します。
[プロパティ] インスペクタの [リンク] フィールドにファイル名が表示されます。ここで、[プロパティ] インスペクタおよび [サイト] ウィンドウを使用して、Destinations イメージにリンクを追加します。
6 [サイト] ウィンドウのタイトルバーをクリックして、アクティブにします。または [ウィンドウ]-[サイトファイル] を選択します。必要に応じてドキュメントウィンドウのサイズを変更して、ドキュメントウィンドウの左側と [サイト] ウィンドウが並ぶように配置できます。
7 ドキュメントウィンドウで、Destinations イメージをクリックして選択します。
8 [プロパティ] インスペクタで、[リンク] フィールドの右にある [ファイルの指定] アイコンをクリックし、ポインタを[サイト] ウィンドウにドラッグします。ローカルフォルダのリストで "DW4_Destinations.html" ファイルをポイントします。

製品イメージの [プロパティ] インスペクタの [リンク] フィールドにファイル名が表示されます。


9 [サイト] ウィンドウの [サイトマップ] アイコンをクリックします。追加したリンクを反映してサイトマップが更新されます。

サイトマップ内のファイルの隣に付いているプラス (+) 記号は、ファイルにほかのドキュメントへのリンクが含まれていることを示します。プラス記号をクリックすると、サイトマップが展開されて関連ファイルが表示されます。マイナス記号 (-) をクリックすると、サイトマップが縮小されます。
次に、Travelogs イメージのリンクを追加します。
10 ドキュメントウィンドウで、Travelogs イメージをクリックして選択します。
11 [プロパティ] インスペクタ内で、[ファイルの指定] アイコンを [サイト] ウィンドウにドラッグして、"DW4_Travelog.html" ファイルをポイントします。
12 [ファイル]-[保存] を選択して、ホームページに対して行った変更を保存します。

……………………………………………………………………………………………………………………

 ページをテストする


 Dreamweaver 内ではリンクをテストすることはできません。ブラウザでリンクを確認して、ページが予想通りに動作することを確認します。

1 ブラウザでページをプレビューするには、F12 キーを押します。
ナビゲーションボタンをクリックして、リンクをチェックします。ブラウザの [戻る] ボタンをクリックしてホームページに戻ります。
2 ページのテストが終了したら、[ファイル]-[閉じる] を選択してページを閉じます。

 

 


Design by unworldly man Teizo AMMA
Email amma@beach.ocn.ne.jp
URL http://www.t-amma.com/