Adobe CS5 DreamweaverでのaP Divの作成 - ダミー

ビデオ: 001 Dreamweaver DIV與CSS基本設計 2024

Adobe Creative Suite 5（Adobe CS5）DreamweaverではCSS配置の仮想コンテナ、または DIVタグによってページ上のコンテンツを自由に配置することができます。 DIV タグは、ページ上のコンテンツの領域を作成するために使用される基本タグです。各DIVタグには、その位置、外観、およびサイズを制御するために割り当てられた一意のIDスタイルを割り当てることができます。コンテンツを配置するプロセスでは、DIVタグを作成して対応するスタイルを作成するという2つのステップが必要になることがよくあります。 AP Divツールを使用すると、ページにボックスを自由に描画し、内容を内部に配置できます。

<！ - 1 - >

AP Divは絶対配置されたDIVの略です。絶対位置を持つ項目は、ページ上の特定の場所に固定されます。 AP divを描画するとき、その位置は通常、ページの左上隅を参照ポイントとして、上部および左のCSSプロパティを使用して設定されます。

CSSは、ページ上のすべての要素をコンテンツを保持するボックスとして扱います。

CSS Boxモデルと呼ばれています。 CSSは、ページ内の要素（表やリストなど）を含むボックスを最も多く含むと考えられますが、DIVタグはテキスト、イメージ、さらにはテキストの配置に使用できるバーチャルボックスの作成に最も一般的に使用されます他のボックス。 <！ - 2 - >

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

「挿入」パネルで、「レイアウト」カテゴリを選択します。

[描画ツール]ツールを選択します。
カーソルをページ上に戻すと、カーソルが十字形として表示されます。

ページの任意の場所をクリックしてドラッグして、新しいAP部門を作成します。マウスボタンを離します。
<！ - 3 - >
Draw AP Divツールでページをクリックしてドラッグし、ボックスを作成します。
マウスポインタをボックスの端に移動して手に変えます。一度クリックすると、すべての面にハンドルが表示されます。
これらのハンドルのいずれかをクリックしてドラッグして、ボックスの縦または横のサイズを変更します。
ボックスを移動するには、左上隅にあるタブをクリックしてドラッグし、ページ上のボックスを配置します。
プロパティインスペクタを見ると、名前と多数のDIVプロパティが表示されます。

CSSスタイルパネルが開いていない場合は、ウィンドウ→CSSスタイルを選択して開きます。 [すべて]パネルの下のスタイルシート（）の左側をクリックして展開します。
作成した新しいAP Divに添付された新しい#apDiv1 IDスタイルが表示されます。作成された新しいDIVごとに、作成順に対応する番号がapDivに割り当てられます。

新しいボックスの内側をクリックして、新しいコンテンツを入力、貼り付け、または挿入します。
ページにAP divを描画すると、Dreamweaverはタグを挿入してボックスを作成し、DIVの位置、幅、高さなどのプロパティを格納するIDセレクタを作成します。 AP部門を作成したら、コンテンツを直接入力、貼り付け、挿入することができます。また、プロパティインスペクタから任意のDIVにクラスルールを割り当てることもできます。