第二回 [スライスした結果を各フレームに] | FireWorksとDreamWeaverでオーサリング

第二回 [スライスした結果を各フレームに]

誰も聞けない聞いてはいけない
HTMLオーサリング技法

~ファイアワークスとドリームウィーバーでオーサリング~

第一回でファイアワークス上で上部と下部の切り分けはできました。
今回は、ドリームウィーバー上でフレームによるレイアウトです。



1

第一回の最後にもチラっと書きましたファイル構成。



↑これ重要です。

フレーム構成的にはこんな感じにくみ上げます。



main.htmlがスクロールする個所ですね。

で、スライスされたのがmenu.htmlとfoot.htmlになってればOKです。

で、まだ、main.htmlはできてないので、先に作っておきましょう。
空っぽのファイルでいいです。
ドリームウィーバーのサイト上が

になってればOKです。


2

んで、先にmenu.html,main.html,foot.htmlをまとめる役目をするindex.htmlを作ります。
ただドリームウェーバーってフレームを作るのって思い通りにできないんですよ。ワタクシ。

なので、いつもテキストエディタで書いてます(汗

<html>
<head>
<title>フレームサンプル</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</head>
<frameset rows="160,240,1*" frameborder="NO" border="0" framespacing="0">
<frame name="lonbon_menu" scrolling="NO" noresize src="menu.html">
<frame name="lonbon_main" noresize src="main.html">
<frame name="lonbon_foot" scrolling="NO" noresize src="foot.html">
</frameset>
<noframe>
<body bgcolor="#FFFFFF" text="#000000">

</body>
</noframe>
</html>

6行目 rowsは上から順に何ピクセルずつフレームとして分けるかの数値です。
menu.htmlが高さ160ピクセル、main.htmlが240ピクセル、foot.htmlが残り全部って設定になってます。
”1*”は1ピクセル以上、いくつでもっていう設定です。
7-9行目

rowsで作成した場合、上から順に各フレームの設定を行います。
参考に、7行目は、menu.htmlの部分です。
scrolling="NO" は、スクロールさせない。=スクロールバーが表示されない。
noresizeはサイズ変更させない。=サイズバー(境目)が表示されない。
と言う意味です。

11行目以降

ブラウザがフレーム表示に対応していない場合、<noframe>~</noframe>までが表示されます。相当古いブラウザしかこれを見られることはありませんが。
サイトの仕様によっては非常に重要な意味をしめるのですが、あえて今回はここは解説しません。
興味のある方は、サーチエンジンの解説をされているサイトを見てください。


3

そして、くみ上げたindex.htmlを開くとこんな感じになっているはずです。



なんか線が出てなかったり、ビックリマークが出てたりしてますね。
ビックリマークは、ファイアワークスがスライスHTMLを出力する際につけてるコメント
(HTMLを解りやすくするための印)なので、消しちゃいましょう。


4

するとこんな感じになります。ちょっと大きめでサンプル。



なんか左端とかに空きがでてますね。
これは、マージンといって、初期状態だと上と左に余白を作っちゃうんです。

[修正]-[ページプロパティ]でマージンの設定ができます。



これで、左マージン、上マージン、マージン幅、マージンの高さを全て「0(ゼロ)」にしてください。



忘れずに全てのフレームのマージン設定をしましょう。


5

するとこんな感じになります。またまたちょっと大きめでサンプル。



これで上部と下部のレイアウトができました。

後は真中のスクロールするフレームだけですね。

次回はテーブルレイアウトです。

Written by Takayuki [email protected] 2002/12/05 Updated.


作成日
2008.04.12 (土)
最終更新日
2008.05.04 (日)
作成者
Takayuki Hirosawa