ホームページ制作/SOHO/福岡
Eメール tk-1980@mx4.et.tiki.ne.jp
メニュー
トップページ
HTMLの基本
HTMLとは
書き方の基本
ファイル名について
よく使うタグ
テーブルでレイアウト
基本
特殊なテーブル
ホームページ作成
スタイルシート
スタイルシートとは
背景
小技集
テーブルでレイアウト
 ホームページ作成

実際に簡単なホームページを作ります。サンプルとしてつぎのホームページを作ります。

サンプル

 サンプルのホームページに使われている画像は、マウスを画像に合わせて
「右クリック」→「名前を付けて画像を保存」で使ってください。

「テーブルでレイアウト」で説明した作り方とほとんど同じです。
まず簡単に下書きを書きます。



枠線を引きテーブルにします。
ホームページのタイトル、ボタン部分、本文が各セルの内容になるようにテーブルを
構成します。


実際にテーブルをつくります。
2行2列で、1行目の1列目のセルと2列目のセルを結合させたテーブルを作ります。
サンプルのホームページでは、横幅を700ピクセル(一般的にこの大きさで作っている
ページが多いので)にして、ボタンの大きさを131×26で作成しています。

<html>
<head>
<title>タイトル</title>
</head>
<body>
<table border width="700" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" valign="top">タイトル</td>
</tr>
<tr>
<td width="150" valign="top">ボタン</td>
<td valign="top">本文</td>
</tr>
</table>
</body>
</html>

ボタン部分のセルの横幅は、ボタン画像より少し広くします。
セル間の空白や、セル内の空白は要らないので、0にしています。
各セル valign="top"で表示位置をトップにします。


サンプル


これでホームページの骨格が出来ました。
次は、タイトル、ボタン、本文をそれぞれテーブルで作っていきます。

次へ


△△ページトップへ△△

[HP制作][HP講座][日記][サイトマップ][掲示板]
ホームページ制作代行サービス 流文-nagarefumi-
Eメール tk-1980@mx4.et.tiki.ne.jp