髭仙人の漫ろ歩き
Dreamweaver
............................ unworldly man go for a ramble in the internet world ...
チュートリアルの概要
 チュートリアルで Web ページを作成


 Dreamweaver チュートリアルでは、Web ページの作成について順を追って説明しています。ここではチュートリアルに沿って、ローカルサイトを定義するまでを記述します。また、その過程では、Dreamweaver のパネルおよびツールを使用して、Web ドキュメントを作成し編集します。

 このチュートリアルでは、Compass 社という探検ツアー専門の架空の旅行会社を設定して、この会社の Web ページを作成します。尚、このチュートリアルでは、次の Dreamweaver のタスクについて扱います。

手順
ローカルサイトを定義する
サイトホームページを作成する
レイアウトビューでページをデザインする
ページにコンテンツを追加する
スタンダードビューでの作業
[アセット] パネルを使用する
Flash オブジェクトを挿入する
テンプレートを作成する
サイトをチェックする

 これから、このページを見本として、ユーザー独自のバージョンを作成します。

 
ローカルサイトを定義する  
 作成する Web サイトごとにローカルサイトを定義


 ローカルサイトを定義するときには、特定のサイトで使用する、すべてのファイルの保存場所を Dreamweaver に通知します。効率良く作業を進めるには、作成する Web サイトごとにローカルサイトを定義します。

1.[サイト]-[新規サイト] を選択します。
2.表示された [サイト定義] ダイアログボックスで、[カテゴリ] リストの [ローカル情報] が選択されていることを確認します。
3.[サイト名] フィールドに「my_tutorial」と入力します。
4.[ローカルルートフォルダ] フィールドの右にあるフォルダアイコンをクリックします。
5.表示されるダイアログボックスで、"Tutorial\Compass_Site" フォルダにナビゲートして、[開く] をクリックして、[選択] フィールドに Compass_Site が表示されたら [選択] を選択します。
6.[キャッシュを使用可能にする] を選択して、サイト用のキャッシュファイルを作成します。
7.[OK] をクリックしてダイアログボックスを閉じます。
8.キャッシュメッセージに対して [OK] をクリックします。

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

 [サイト] ウィンドウの表示


 [サイト] ウィンドウにローカルサイト内のすべてのフォルダおよびファイルのリストが表示されます。このリストは、ファイルマネージャとしても機能し、コンピュータのデスクトップ上で行うようにファイルのコピー、ペースト、削除、移動、および開くことができます。

 
サイトホームページを作成する  
 ドキュメントを保存する


 これで Compass サイト用のページおよびアセットを保存するためのサイト構造が設定されたので、サイトのホームページになる最初のページを作成します。このページの作成が進むにつれてイメージ、テキストおよび Flash アセットを追加していくと、完成した Compass ホームページと同じデザインコンポーネントがドキュメントに含まれていきます。

1 [サイト] ウィンドウを開いたままドキュメントウィンドウをクリックしてアクティブにします。
[サイト] ウィンドウはバックグラウンドで開いたままになります。
2 [ファイル]-[保存] を選択します。
3 [名前を付けて保存] ダイアログボックスで、このドキュメントの保存先として "Compass_Site" フォルダを選択します。
4 [ファイル名] フィールドに「my_CompassHome.html」と入力します。
5 [保存] をクリックします。
ドキュメントウィンドウの上部にドキュメント名が表示されていることを確認します。

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

 ドキュメントのページタイトルを定義する


 ドキュメントにファイル名を付けても、ラベルは "無題ドキュメント" となっています。これは、ドキュメントには HTML ドキュメント名またはページタイトルが定義されていないことを示します。ぺージタイトルは、ブラウザのタイトルバーと、ブックマークのリストに表示され、サイトのビジターがブラウズしているページを識別するのに役立ちます。ページタイトルのないドキュメントを作成した場合、そのドキュメントは 無題ドキュメント というタイトルでブラウザに表示されます。

1 ドキュメントウィンドウをアクティブにして、ツールバーが表示されていない場合は、[表示]-[ツールバー] を選択します。
Dreamweaver のツールバーは、ドキュメントウィンドウの上に表示されます。
2 [タイトル] フィールドに「Compass Home Page」と入力してからドキュメントウィンドウをクリックし、ドキュメントウィンドウのタイトルバーのページタイトルが更新されていることを確認します。



3 ファイルを保存します。

 
レイアウトビューでページをデザインする  
 レイアウトビューで作業する


 最初のページは、デザインビューでの作業から開始します。つまり、ページをレイアウトしてから、イメージおよびテキストを挿入します。
 Dreamweaver には、スタンダードビューとレイアウトビューの 2 つのデザインビューがあります。レイアウトビューでの作業から開始します。このビューでは、イメージ、テキスト、またはその他のメディアなどのコンテンツを追加できる、レイアウトセルまたはレイアウトテーブルを描画できます。

1 [オブジェクト] パネルで、まだ選択されていない場合は、[レイアウトビュー] アイコンをクリックします。
2 オプションを確認し、[OK] をクリックしてダイアログボックスを閉じます。
3 [オブジェクト] パネルの [レイアウト] で、[レイアウト] オプションの [レイアウトセルを描画] および [レイアウトテーブルを描画] が利用可能であることを確認します。これらのオプションはスタンダードビューでは利用できません。

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

 レイアウトセルを描画する


 レイアウトビューでは、レイアウトセルおよびレイアウトテーブルを描画してドキュメントのデザインエリアを定義できます。このタスクは、ページのレイアウトを行う前に、作成しているページのサンプルを準備すると簡単に行えます。
 このレイアウトには、Compass ロゴ用のセル、サイトナビゲーションボタン用の 3 つのセルを備えたテーブル、ほかのグラフィック用のセル、テキストを保持する 3 つのセル用のテーブルがあります。

1 my_CompassHome ドキュメントのドキュメントウィンドウをクリックして、ドキュメントをアクティブにします。
2 [オブジェクト] パネルが開いていない場合は、[ウィンドウ]-[オブジェクト] を選択して、ツールを開きます。
[オブジェクト] パネルは、ドキュメントにオブジェクトを追加するときに使用します。
[ウィンドウ]-[プロパティ] から選択する、[プロパティ] インスペクタは、ドキュメント内のオブジェクトのプロパティまたは属性を設定するときに使用します。[プロパティ] インスペクタが拡張されていない場合は、右下の拡張矢印をクリックするとすべてのプロパティオプションが表示されます。
3 [オブジェクト] パネルで、[レイアウトセルを描画] アイコンをクリックします。
4 ポインタをドキュメントウィンドウに移動すると、マウスポインタが描画ツールに変わり、小さい十字のような形になります。ドキュメントの左上をクリックしてからドラッグして、レイアウトセルを描画します。
マウスを離すとレイアウトセルが、レイアウトテーブルに表示されます。
レイアウトテーブルを、ドキュメントウィンドウいっぱいに拡張し、ページレイアウトエリアを定義します。白い四角が描画したレイアウトセルです。レイアウトテーブルのグレーのエリアにレイアウトセルを追加できます。

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

 レイアウトセルのサイズを変更する


 ページを正確にデザインするために、ドキュメント内に追加するセルのサイズを設定できます。ページ内のセルの位置を移動することもできます。

1 レイアウトセルを選択するには、レイアウトセルの境界線をクリックします。
選択したレイアウトセルの周囲にハンドルが表示されます。



2 このレイアウトセルのサイズを変更するには、次のいずれかの操作を行います。
このレイアウトセルの [プロパティ] インスペクタ内で、[固定] フィールドに「510」と入力して、セルの幅を 510 ピクセルに設定し、ドキュメント内をクリックしてセルの幅が変更されたことを確認します。

メモ : レイアウトテーブルの幅よりも大きいピクセル値を入力した場合、またはセルがレイアウトテーブル内の別のセルにオーバーラップするようなピクセル値を入力した場合は、警告が表示されてセル幅が有効な幅に調整されます。
レイアウトセルの右側で、セルが目的の幅になるまで中央のサイズ変更ハンドルを右にドラッグします。マウスを離すと、レイアウトテーブルの上部に沿ってセルの幅が列ヘッダーエリアに表示されます。

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

 複数のレイアウトセルを追加する


 次に、今作成したロゴのセルの下に、3 つのレイアウトセルを追加します。これらのセルには、後からページのナビゲーションボタンを挿入します。

1 [オブジェクト] パネルで、[レイアウトセルを描画] アイコンをクリックして、Ctrl キー (Windows) または Command キー (Macintosh) を押します。
2 ドキュメントウィンドウで、ロゴ用に描画したセルの下にポインタを置き、ドラッグしてレイアウトセルを描画します。
Ctrl キー (Windows) または Command キー (Macintosh) を押したまま、さらに 2 つのレイアウトセルを描画します。画面は次のようになります。

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

 レイアウトセルを移動する


 セルを横に並べる場合は、必要に応じてレイアウトセルのサイズを変更して移動することができます。レイアウトセルのサイズを変更するには、サイズ変更ハンドルを使用します。

 セルをクリックしてドラッグしても、新しい場所に移動することはできません。ドキュメント内でレイアウトセルを再配置するために移動する必要がある場合は、次の手順に従ってください。

1 レイアウトセルの境界線をクリックして、レイアウトセルを選択します。
2 レイアウトセルを移動するには、次のいずれかの操作を行います。
 ・矢印キーを使用します。
 ・Shift キーを押しながら矢印キーを使用して、レイアウトセルを 5 ピクセルずつ移動します。

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

 レイアウトテーブル内のグループセル


 ここで、作成したナビゲーションボタンセルのテーブルを作成します。セルをテーブルにグループ化すると、セルの間隔を制御でき、ページレイアウトを変更する場合にセルをグループとして簡単に移動することができます。上にあるロゴセルと同じ幅の、ナビゲーションボタン用のテーブルを作成します。

 [レイアウトテーブルを描画] を使用して、ナビゲーションボタンイメージをグループ化します。

1 [オブジェクト] パネルで、[レイアウトテーブルを描画] アイコンをクリックします。
2 ドキュメントウィンドウで、ポインタを最初のナビゲーションボタンセルの左上隅に置き、ポインタをドラッグしてテーブルが 3 つのセルを含むようにし、長さがロゴセルと同じになるようにします。



3 マウスを離して、セルが新しいテーブルにグループ化されていることを確認します。

 3 つのレイアウトセル (テーブル内の白いエリア) と空のスペース (テーブル内のグレーのエリア) を含むテーブルが作成されました。

 


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

 レイアウトテーブルを移動する


 レイアウトテーブルを選択してドキュメントの別のエリアに移動することができます。ただし、レイアウトテーブルは別のレイアウトテーブルとオーバーラップする場所には移動できません。

 次に、作成したテーブルを右に数ピクセル移動して、ページ上のロゴとナビゲーションボタンが適切に整列するように揃えます。

1 ドキュメントウィンドウで、レイアウトテーブルのタブをクリックして移動します。
2 レイアウトテーブルを数ピクセル右にドラッグして再配置し、テーブルの右側にあるサイズ変更ハンドルの 1 つをドラッグして、ロゴおよびナビゲーションボタンレイアウトセルの右側を揃えます。

 新しいテーブルおよびセルを作成すると、レイアウトエリアのアウトラインを示すグリッド線が表示されます。これらのグリッド線を使用して、レイアウト要素を整列することができます。

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

 別のレイアウトセルを追加する


 次に Learn More About グラフィック用のレイアウトセルを追加します。

1 [オブジェクト] パネルで、[レイアウトセルを描画] アイコンをクリックします。
2 ドキュメントウィンドウで、ナビゲーションボタンテーブルの下のスペースに、新しいセルを描画します。

 

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

 レイアウトテーブルを作成する


 前のセクションで、セルを使用してテーブルを作成しました。ここでは、テーブルから開始してセルを追加します。

1 [オブジェクト] パネルで、[レイアウトテーブルを描画] アイコンをクリックします。
2 ポインタをドキュメントウィンドウに移動します。追加したばかりのレイアウトセルの下のエリアで、ポインタを右にドラッグして一番上のセルの右側に揃え、ドキュメントウィンドウの下部まで下にドラッグします。

 

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

 テーブル内にレイアウトセルを描画する


 ここで、旅行先の場所に関するテキストを挿入する、レイアウトセルを追加します。

1 [オブジェクト] パネルで、[レイアウトセルを描画] アイコンをクリックして、描画したばかりのレイアウトテーブルにポインタを移動します。
2 テーブル内のスペースの約 1/3 の大きさのテーブルセルを描画します。
3 レイアウトセルの境界線をクリックして選択し、[プロパティ] インスペクタの [固定] フィールドに、「170」と入力してセルの幅を設定します。
4 最初のセルの隣に、テーブル内のスペースの約 1/3 の大きさの別のテーブルセルを描画します。
5 レイアウトセルの境界線をクリックして選択し、[プロパティ] インスペクタの [固定] フィールドに、「170」と入力してセルの幅を設定します。
6 テーブル内の残りのスペースに、最後のテーブルセルを描画します。必要に応じてセルのサイズ変更をするか、または移動して、セルのサイズまたは位置を調整します。

 

 


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