ビデオ: Dreamweaver CS5使い方講座(ドリームウィーバー)ロールオーバーイメージ/動学 2024
Abode Creative Suite 5(Adobe CS5)Dreamweaverでは、カスケードスタイルシートのページレイアウトを変更する複数の方法が用意されています。 CSSレイアウトはスタイルシートのルールによって完全に制御されるため、CSSスタイルパネルとプロパティインスペクタからページのルックアンドフィールを直接変更できます。
新しいページの各列、ボックス、およびスペースは、CSSルールとプロパティを使用して配置され、サイズが設定されます。プロパティインスペクタ(CSSスタイルパネル)またはCSSルール定義パネルから調整できます。
-
CSSスタイルパネルが開いていない場合は、ウィンドウ→CSSスタイルを選択して開きます。
-
[すべて]タブを選択すると、スタイルシートとそのルールが表示されます。
内部スタイルシートが上部に表示されます。左側の矢印をクリックして展開し、含まれているすべてのルールを表示します。添付された(外部の)スタイルシートを使用するレイアウトは、タグの代わりにスタイルシート名(styles。cssなど)を表示します。
<! - 2 - > -
ボディルールを選択します。
このタグベーススタイルは、ページ全体(タグ内のすべて)の一般的な書式設定を制御します。
-
背景ルールの横にあるフィールドをクリックして編集します。 #4E5869 (中間色の灰色)の設定を保持するのではなく、ページの背景色を変更するために16進数の色(たとえば赤の場合は #CC0000
-
カラールールの横にある色見本をクリックして、色見本パネルを開きます。ページのテキストの新しいデフォルトのタイプの色を選択します。
<! - 3 - > -
[CSSスタイル]パネルの上部で別のスタイル(たとえばtwoColElstHdr #containerスタイル)を選択してプロパティを表示します。
。 twoColHybLtHdr#コンテナIDスタイルは、ページ上のメインレイアウトコンテナのサイズと外観を制御します。
-
プロパティインスペクタで、スタイルの外観を変更するプロパティを編集します。
たとえば、[幅の規則]テキストボックスに新しい数値を入力して、ルールの幅を変更できます。たとえば、 95% と入力すると、レイアウト全体が広くなります。
レイアウトを構成する各列とセクションは、CSSスタイルパネルに表示されているIDスタイルの1つによって制御されます。ほとんどすべてのIDスタイルには、ページ上の異なる領域のサイズを変更するために使用できるwidthプロパティがあります。
[CSSスタイル]パネルに表示されているさまざまなスタイルを引き続き変更し、それらのスタイルがページ上のさまざまな要素にどのように影響するかを確認します。タイプの色、フォントファミリ、およびパディングや背景色などの他のプロパティを変更してみてください。
どのIDがどの列またはセクションを制御しているかを正確に把握するには、ページ領域内をクリックし、ドキュメントウィンドウの下部にあるタグセレクタを確認します。チェーンの最後にある最後のタグは、CSS Stylesパネル(たとえば、)で現在のコンテナとそれに対応するIDを表示します。