Adobe Dreamweaver CS6で絶対配置（AP）部門を作成する方法 - ダミー

ビデオ: What is Dreamweaver - Introduction to Dreamweaver - Dreamweaver Tutorial [3/54] 2024

Adobe Dreamweaver CS6では、CSSで制御される仮想コンテナ、またはDIVタグによって作成されたボックスを使用してページ上のコンテンツを自由に配置します。 DIV タグは、ページ上のコンテンツの領域を作成するために使用される基本タグです。

DIVタグは、[挿入]パネルの[レイアウト]セクションを含め、Dreamweaverの複数の場所から作成できます。各DIVタグには、その位置、外観、およびサイズを制御するために割り当てられた一意のIDスタイルを割り当てることができます。コンテンツを配置するプロセスでは、DIVタグを作成して対応するスタイルを作成するという2つのステップが必要になることがあります。

<！ - 1 - >

Dreamweaverでは、ページに自由にボックスを描画し、内容を内部に配置できるAP divツールを使用して、このタスクを簡単に実行できます。

CSSはページ上のほとんどのコンテナ要素を boxes として扱います。 CSS Boxモデルと呼ばれるこのアプローチは、これらの要素がパディング、マージン、幅、高さ、および境界線などの均一なプロパティを共有できるようにします。

CSSは、ページ内のほとんどの要素をボックス（テーブルやリストなど）と見なすことができますが、DIVタグは、テキスト、画像、さらには入れ子に配置するために使用できる仮想ボックスの作成に最も一般的に使用されますボックス。

<！ - 2 - >

各ボックスは、幅、高さ、位置（上と下のプロパティを介して）、境界線、余白、およびパディングを持つことができます。それぞれは適切なCSSプロパティを使用して設定されます。

AP（Absolute-Positioned）部門を作成するには、次の手順に従います。

新しいページを作成するか、サイトから既存のページを開きます。
「挿入」パネルで、「レイアウト」カテゴリを選択します。
[描画ツール]ツールを選択します。
<！ - 3 - >
カーソルをページ上に戻すと、カーソルが十字線として表示されます。
ページの任意の場所をクリックしてドラッグして、新しいAP部門を作成します。マウスボタンを離します。
4方向矢印に変更するまで、マウスポインタをボックスの端に移動します。一度クリックすると、すべての面にハンドルが表示されます。
これらのハンドルのいずれかをクリックしてドラッグして、ボックスの縦または横のサイズを変更します。
ボックスを移動するには、左上隅にあるタブをクリックしてドラッグし、ページ上のボックスを配置します。

プロパティインスペクタを見ると、名前と多数のDIVプロパティが表示されます。
CSSスタイルパネルが開いていない場合は、ウィンドウ→CSSスタイルを選択して開きます。 [すべて]パネルの下のスタイルシート（）の左側をクリックして展開します。

作成した新しいAP Divに添付された新しい#apDiv1 IDスタイルが表示されます。作成された新しいDIVごとに、作成順に対応する番号がapDivに割り当てられます。
新しいボックスの内側をクリックして、新しいコンテンツを入力、貼り付け、または挿入します。