フレームレイアウトを作る

早速、サイトの骨格であるレイアウトを作りましょう。
サイト全体の幅は、低解像度(800×600)の環境を考慮して750ピクセルとします。
画面を４分割するフレームのHTMLを以下のように入力し、ファイル名をindex.htmlとして保存します。
せっかくの専用サイトなので、ここで専用フォルダーを作っておきましょう。
デスクトップに「virtual_stastion」というフォルダーを作り、その中にindex.htmlを入れます。これからはこのフォルダーに保存していきます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
　<head>
　　<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
　　<meta http-equiv="Content-Style-Type" content="text/css">
　　<title>コスモス石油　バーチャルステーション</title>
　</head>
　<frameset cols="150,600" frameborder="no" border="0">
　　<frame name="menu" src="menu.html">
　　<frameset rows="100,*,50" frameborder="no" border="0">
　　　<frame name="header" src="header.html" scrolling="no">
　　　<frame name="main" src="top.html">
　　　<frame name="footer" src="top.html" scrolling="no">
　　</frameset >
　　<noframes>
　　　このブラウザはフレームをサポートしていないため、ページを表示できません
　　</noframes >
　</frameset >
</html>
１行目で、「このページはHTMLのバージョン4.01で記述します」という宣言をしています。
<head>要素の<meta>で文書の文字コードが｢シフトJIS｣であることと、基準スタイルシート言語を明記しています。
文字コードは文字化けを防ぐための明記なので、タイトルの前に記述しておきます。
初めの<frameset>で、画面を左右に分割しています。幅750のうち150をメニュー部で使います。ここで境界線を消す指定もしています。
menuフレームには、menu.htmlを指定します。
分割した右部分をさらに３分割し、ヘッダー部・メイン部・フッター部とします。
ヘッダー部は縦100ピクセルとし、header.htmlを指定し、スクロールしないようにします。
フッター部は縦50ピクセルとし、footer.htmlを指定し、こちらもスクロールしないように指定します。縦の残りをメイン部として割り当て、top.htmlを指定します。この部分はスクロールして欲しい部分なので、放ったらかしで構いません。ブラウザの初期値「auto」を利用します。
<noframes>は、フレームをサポートしていないブラウザに対して、表示させる部分です。
ここも本来は<body>からきちんと記述するべきなのですが、フレームをサポートしていないブラウザが少なくなってきているので、ここではサボりました。

これで、サイトのレイアウトができました。


ホームページを作る
メニューへ

2009/04/06