第二回 [スライスした結果を各フレームに] | 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
  • speed_fish 引っ越ししてからつなげていなかったとても古いnetgearのnas。今日つなげようとしたらlan経由で全くつながらず。windows10が勝手にsmb1を切り捨ててたと判明するまでに3時間。httpでもpingでもつながるのにos… https://t.co/Ejd7om16t0 2018-04-24 11:41:09
  • speed_fish modxからevoが切り離しかー。まあrevoとはもう別物感溢れてたし良いんじゃないでしょうか。やりやすくなるといいなー。 2017-04-28 20:33:09
  • speed_fish Chromeの57から頻発している、ERR_BLOCKED_BY_XSS_AUDITOR。試してみたけど、hidden含め入力項目にJavaScriptが入っても発生。HTTPS化していないフォームはまあ当然発生かな。 2017-04-10 18:00:57
  • speed_fish modxサイトをcloudflare化でeFormで引っかかる。中身みたらsite_urlでリファラーチェックしてました。ssl flexibleを使おうとしてたので、eFormを改造。パラメータにsiteurlを追加しましたとさ。#modx #cloudflare #eform 2017-03-04 00:44:09
  • speed_fish メモメモ。MODxでAMP対応するスニペット。 GETのURLが気に食わないのでリライトかな。 https://t.co/Oa9qzQ5dOr 2017-02-03 01:10:54