Dreamweaver MX 2004 をゼロから始める(4)
著者：Eve Cole
更新時間：2009-05-31 21:02:51
レイヤーの使用<BR> レイヤーとは、Web ページ内に複数のレイヤーがあり、各レイヤーを表示するかどうかを決定できることです。同時に、レイヤー間の階層関係をカスタマイズする機能。レイヤー テクノロジを習得すると、Web ページに強力なページ コントロール機能を提供できるようになります。
レイヤーの作成
レイヤーの機能を説明するために、まず、図 1 に示すような簡単なエフェクトの例を作成します (図 1)。
図1
最初のステップは、Dreamweaver MX 2004 で新しいページを作成し、「挿入→レイヤーオブジェクト→レイヤー」コマンドを実行することです。このとき、編集ウィンドウに黒い四角形のフレームが表示されます。これが挿入されたレイヤーです。マウスを長方形の枠線の上に移動すると、マウスが十字矢印の形に変わります。マウスをクリックすると、枠線の周囲に黒い四角が 8 つ表示され、左上隅に空白の四角が表示されます。このレイヤーが選択されていることを確認します。
ヒント:マウスを使用して実線の四角形をドラッグしてレイヤーのサイズを変更し、左上隅にある空の四角形をドラッグしてレイヤーの位置を変更します。
2 番目の手順では、レイヤー内でマウスをクリックして「China Computer Education News」と入力し、プロパティ パネル ウィンドウでテキストを青色に設定します。
3番目のステップは、レイヤーの境界線をクリックしてレイヤーを選択し、「編集→コピー」コマンドを実行して現在のレイヤーをコピーし、編集ウィンドウの他の空白領域でマウスをクリックして「編集→貼り付け」を実行します。コマンドを実行すると、編集ウィンドウに別のレイヤーが表示されますが、現在それらは重なっているため、2 つのレイヤーを表示するにはレイヤーを移動する必要があります。
4 番目のステップでは、一方のレイヤーのテキストの色を黒に変更し、2 つのレイヤーの位置が数ピクセル異なるようにレイヤーの位置を移動して、影の効果を生成します (図 2)。
図2
上記の操作が完了したら、「F12」ボタンを押してプレビューすると、図 1 のような効果が IE ブラウザーで確認できます。
入れ子になったレイヤー
いわゆるネストされたレイヤーとは、別のレイヤー内に作成されたレイヤーを指します。たとえば、図 3 に示されているのは、典型的なネストされたレイヤーです (図 3)。実際、この種のネストされたレイヤーの作成は非常に簡単で、親レイヤーを作成し、そのレイヤー内をマウスでクリックして、レイヤーを再度挿入するだけです。ただし、ネストされたレイヤーは、サブレイヤーが親レイヤー内に存在する必要があるという意味ではありません。それらの間には継承関係が存在します。
図3
継承の機能は、サブレイヤーの可視性を親レイヤーの可視性と一貫性を保つことです。多くの動的な Web ページの特殊効果はレイヤーの可視性を制御することによって実現されるため、親レイヤーの可視性が変化すると、その可視性も変わります。サブレイヤの可視性も変化します。また、継承関係により、子レイヤーと親レイヤーの相対的な位置を変更しないこともできます。たとえば、親レイヤーをドラッグして移動すると、子レイヤーも一緒に移動します。これは、動的にするときに非常に便利です。ウェブページ。
レイヤーの Z オーダー
テーブルと比較して、レイヤーの最大の利点は、レイヤーを重ねることができることです。どのレイヤーが上で、どのレイヤーが下であるかを示すために、各レイヤーにシリアル番号を設定する必要があります。このシリアル番号が「Z オーダー」です。これは、画面の X 座標と Y 座標に加えて、画面に垂直な Z 軸を人為的に追加することを意味します。
図 4 に示すように、左側の領域の 4 つのレイヤーは右側の領域の 4 つのレイヤーとは明らかに異なります。マウスを使用してレイヤーの順序を調整するのも非常に簡単です。 、中間層、および最上層で十分です。ただ、この操作方法はレイヤーの数が多いと少し面倒で後から調整するのに不便なので、レイヤーパネルから調整するようにします。
図4
まず、「ウィンドウ→レイヤー」コマンドを実行してレイヤーパネルをアクティブにします。この時点で、図 5 に示すパネルウィンドウが表示されます (図 5)。ここでは、シリアル番号を変更する必要があるレイヤーを選択し、 を押します。マウスを押しながら上下にドラッグし、挿入する 2 つのレイヤーの間に水平線が表示されたらマウスをドラッグして放し、各レイヤーの「Z オーダー」を変更できます。
図5
ヒント: 「Z」ボックスの値を直接クリックして、必要なレイヤー レベルに変更します。
レイヤーを使用してテーブルを作成する
Web ページの要素を見つけるためにレイヤーを使用すると、テーブルを使用するよりもはるかに便利ですが、レイヤー機能をサポートしているのは IE 4.0 以降のブラウザーだけです。そのため、苦労して作成した作品を古いブラウザーを使用している友人に見せるために、最善の方法は、レイヤーをテーブルに変換することです。
最初のステップは、図 5 に示すウィンドウの上部にある [オーバーラップを防止] チェックボックスをオンにして、各レイヤーが互いにオーバーラップできないようにすることです。オンにしないと、変換プロセス中に警告メッセージが表示されます。
2 番目のステップは、「変更→変換→レイヤーをテーブルに」コマンドを実行することです。この時点で、図 6 に示すウィンドウが表示されます (図 6)。「テーブル レイアウト」領域で「最も正確」を選択します。それぞれ「透明な GIF を使用」の 2 つのオプションです。前者は、各セル間の距離を確保するために、各レイヤーにセルを作成します。後者は、変換されたテーブルの最後の行を透明な GIF 画像で埋めます。ブラウザはどれも同じように見えます。
図6
3 番目のステップは、「OK」ボタンを押してレイヤーからテーブルへの変換操作を完了することです。
ヒント: Dreamweaver MX 2004 にもテーブルからレイヤーへの変換機能があり、手順は似ています。
独自の Web ページをカラフルにしたい場合は、レイヤー技術を習得する必要があります。そうしないと、将来動的 Web ページを作成するときに多くの困難に遭遇することになります。レイヤーテクノロジーをマスターします。
