8.フレームに挑戦
ここからは高度なテクニックと思考能力を要します。
フレームとは、
複数のページを1画面に表示させる
ものです。
この講座はフレームを使っています。お分かりになりますでしょうか。
上のタイトルの部分のページ、左のメニューのページ、そしてここ説明するページ
の3つのページが1画面に表示されています。
フレームファイル
というものが必要になります。
フレームファイルは、フレームに分割するページを指定するためのものなので、画面には現れません。
実際に作っていきましょう。
まず、フレームファイル「frame.html」を作ります。以下をコピーしてください。
お気づきだと思いますが、フレームファイル内にはbodyタグがありません。
bodyタグを使うことによって画面に文章を表示させていたのですから、
bodyタグの無いフレームファイルが画面に現れないのは当然だと分かるわけです。
cols
・・・
「
横分割
する」という意味です。「
rows
」に変えることで「
縦分割
」になります。
frame src="ファイル名"
・・・
ここに分割して表示したいファイル名を書きます。
ここに書くファイルは今まで作ってきた普通のファイルです。
横分割の場合、一つ目に書いたファイルが左に表示され、
縦分割の場合、一つ目に書いたファイルが上に表示されます。
なので、ひとつめに「left.html」という名前を付けました。
30%、*
・・・
これは、一つ目のファイルを30%の幅で表示し、二つ目を残りの%で表示する、という意味です。
「frame.html」「left.html」「right.html」3つのファイルを作り、実践してみてください。
この講座のように、
左メニューの各項目を押すと、指定したページが右に現れる
、というリンクフレームを作りましょう。
表示させたい方向(今回は右側)に「
name=""
」を上のように挿入します。
フレームファイルはこれだけ設定すればよいです。
次に、左側のファイル「left.html」を編集します。
2.文字をいじる
3.画像を使ってみる
4.表を作ってみる
まず普通にページを作り、リンクを貼ります。
そして、
右側に表示させたいリンク
の中に、「
target=""
」を挿入するのです。
さきほど、「name="
yamada
"」としましたから「target="
yamada
"」としなければなりません。
やってみて、うまくいかなくても、何度も繰り返しトライしてください。
私もイライラするほど全然出来ませんでしたが、よく読み、考えてやっていけば必ず出来るようになります。
フレームで制作されたページを開く事の出来ないパソコンがあります。
そういう人たちのために以下のタグを挿入してあげてください。
このページはフレームを使用しております。
文章はもちろん変えられます。
フレームで作ったページには、縦又は横に灰色の立体的なラインが表示されます。
そのラインが境界線となっているわけですが、このラインは
マウスで動かすことが出来ます
。
しかし、レイアウトにうるさい人なら思うと思いますが、勝手に動かされて
デザインを壊してほしくないですよね。
そういう人のために、ラインを
動かせなくする
ことが出来ます。
こうすることで、もう二度と動くことはありません。
境界線を消す
ことも出来ます。
この講座は境界線を消してあるので綺麗にフレーム分割されています。
frameset には、FRAMESPACING=0 BORDER=0 FRAMEBORDER=0 、
frame には、FRAMEBORDER=0
を挿入します。これで境界線が消えました。
スクロールバーを表示させない
ことが出来ます。
これでどんなに長い文章を書いてもスクロールバーは表示されません。
左側のページに、ヤフーへのリンクを張ったとします。
クリックします。
すると、左側しかヤフーへ飛びません。
とても見にくい、というかこれではとても困りますね。
とすることで左側だけではなく、ちゃんと全体がヤフーへ飛ぶようになります。
こうすると、新しいウインドウを開きます。
ページの左右と上に、若干のスペースがある事に気付きましたでしょうか。
デザインを追及する上で、このスペースを詰めたいな、と思うことがあります。
こうすることで、びっちり詰める事が出来ます。
試してみてください。
次は9へゴ→
SEO
掲示板
[PR]
爆速!無料ブログ
無料ホームページ開設
無料ライブ放送