DreamWeaverテーブルの魔法の使い方～ワイヤーフレーム制作を詳しく解説(5)

著者：Eve Cole 更新時間：2009-05-30 18:36:21

4> スペーサーボーダーの製作

「ギャップ境界線」は主に、Web ページ上の各列またはチャネルの項目リストを配置するために使用されます。作成者は、制作完了後のレンダリングを次のように示します。

対応する制作プロセスは以下のとおりです（3コマ分の制作を例にしています）

まず、図に示すように、1 行 3 列のテーブルオブジェクトを Web ページに挿入します。挿入プロセス中に、「Border」を 0、「CellSpace」を 2、「CellPad」を 1 に直接設定します。

注: ここでの設定は、プロパティパネルの設定と完全に同等です。

マウスの左ボタンを押したまま各セルをドラッグして、3 つのセルオブジェクトを同時に選択します。プロパティパネルで「Bgcolor」を「Red」に設定します。この色はガターの境界線の色であることに注意してください。

間隔の効果を実現するために、ここでは「ネストされたテーブル」の作成を使用します。著者はまず、「ネストされた」テーブルを設計するときに注意すべき点をいくつか説明します。セルにテーブルを挿入するときは、セルの内容の位置属性「Horz」（左右の位置）と「Vert」を設定するのが最善です。ネストされたテーブルのサイズを再度調整するときに不要なトラブルを避けるために、「左」と「上」に設定します。これを行うには、右下隅をドラッグするだけです。次のように

3つのセルに表オブジェクトを順番に挿入し、「Border」、「CellSpace」、「CellPad」をすべて「0」に設定し、プロパティパネルの各表の背景色を同じページに設定します。背景色は「」です。もう一つのポイントは、比例表示状態で「幅」と「高さ」を両方「100%」に設定しておくことで、サイズに合わせてユニット全体を自動的に塗りつぶすことができます。

エフェクトをプレビューできるようになりました。

ガター境界線の作成において、細線境界線との違いは、境界線 1 の幅が以前の「CellSpace」ではなく「CellPad」属性によって実現されることです。ここでの「CellPad」はセルの距離を指します。コンテンツとセル境界の間この例でコンテンツとして挿入した他の 3 つのテーブルも同様です。次に、「CellSpace」を調整すると、「6」単位の効果など、各境界線間の間隔を変更できます。

同様に、同様の方法で垂直方向のガター境界線を作成できます。

上記では、Web ページのいくつかの一般的な境界線タイプの作成プロセス、原理、調整方法を注意深く分析しました。もちろん、エフェクトを比較する形式のほうがそれぞれの違いを理解しやすく、より印象が深まると思います。