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

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

2> 細線ボーダーの作成

細い線の境界線は、Web ページ上でコンテンツを配置したり区別したりするためによく使用される方法であり、特定の画像で使用すると、多くの場合、良い結果が得られます。

ご存知のとおり、いわゆる細い境界線は 1 行 1 列の単純なテーブルのように見えます。では、テーブルオブジェクトの Border 値を 1 に設定するだけでよいでしょうか。以下の生産効果をご覧ください。

同様に、Web ページ内の指定した位置に 1 行 1 列の表を挿入し、表の外枠の任意の部分をクリックして、プロパティパネルの「境界線」の値を 1 に設定します。図に示すように、別の「CellPad」を同時に設定することもでき、「CellSpace」はゼロに設定されます。

プレビュー状態でのさまざまな効果の図:

上の図から、境界線を 1 に設定するだけでは効果が得られないことがわかります。テーブルの「賢い」設定によって必要な細かさを実現する方法を見てみましょう。

また、上の表では、プロパティパネルの「border」と「cellpad」を「0」に設定し、「cellspace」を「1」に設定します。「Cellspace」はセル間の距離を指します。写真のように

テーブルの「Bgcolor」を「赤」に設定し、セルの「Bgcolor」を同じ Web ページの背景色「白」に設定します。プレビュー効果は次のとおりです。

皆さんに分かりやすくするために、ここで著者が少し説明します。このうち「CellSpace」を1に設定します。テーブルの背景色を設定する際には、必ずこの部分が含まれています。後続のセル設定はそれを「ダンプ」しただけです。これにより表示効果が促進されるため、表の背景色を変更すると枠線の色も変更されます。