Dreamweaver 4 の簡潔なチュートリアル (7. Web ページのレイアウト)

著者：Eve Cole 更新時間：2009-05-30 18:35:53

7. Webページのレイアウト

テーブルの使用

テーブルは Web ページの非常に重要な要素です。HTML 自体にはこれ以上のレイアウト方法が用意されていないため、Web ページの優れたレイアウトを実現するにはテーブルを使用する必要があることがよくあります。表はWebページ制作において最も重要なスキルであり、表をいかに使いこなすかがWebデザイナーのレベルに直結すると言えます。

オブジェクトパネルをクリックします

をクリックすると、次のダイアログボックスが表示されます。

①行: テーブル内の行の数; 列: テーブル内の列の数。

②幅: テーブルの幅。単位はピクセル (ピクセル数) またはパーセント (パーセンテージ) です。ピクセルで定義されたテーブルのサイズは固定されていますが、パーセントで定義されたテーブルはブラウザのサイズに応じて変化します。 2 つの定義方法の違いについては、後で詳しく説明します。

③枠線：表の線の幅。

④セルパディング: セル間隔; セル間隔: セルマージン。いわゆるセルとは、テーブル内の各小さなセルを指します。

図のように設定すると、次のフォームが得られます。

テーブル行をクリックしてテーブル全体を選択すると、プロパティパネルで確認できます。

①行、列: テーブルの行と列。

② W、H: テーブルの幅と高さ通常、テーブルの高さは定義しません。

③ CellPad、CellSpace: セルの間隔とセルの余白: 表の行の幅。

④ Ailgn: テーブルの配置。テーブルを左 (Left)、中央 (Center)、または右 (Right) に移動できます。

⑤

: 行の高さの設定を削除します。

: 列幅の設定を削除します。

: テーブルの幅設定をパーセントからピクセルに変換します。

: テーブルの幅設定をピクセルからパーセンテージに変換します。

⑥ Bg Color: テーブルの背景色を設定します。

⑦ Brdr Color: テーブルの線の色を設定します。

⑧背景画像: テーブルの背景画像を設定します。背景画像が設定されている場合は、背面のブリーフケースボタンをクリックして背景画像を選択します。

カーソルをいずれかのセルに移動すると、表示されるプロパティパネルが異なります。

①

: セルを結合します (最初に、結合する対応するセルを選択する必要があります)。

: セルを複数の行または列に分割します。

②Horz ：セル内の水平方向の配置。機能は同じです。

似ている;
Vert: セル内の垂直方向の配置。

③ W、H: セルの幅と高さ。

④ Bg: セルの背景画像。

⑤ Bg: セルの背景色。

⑥ Bdr: セルの境界線の色。