インターネット論/インターネット・リテラシー 第19回[2001/11/08]
 

フレーム


HTMLソースの編集


そもそもComposerは、ページを作成している人がWebのページを記述する文法である HTML(Hyper Text M arkup Language)を意識しなくても代わりにHTMLの文書を書いてくれるツールです。
ところが、このHTMLの文法は現在も発展し続けていて、「フレーム」の他にもComposerでは扱えない最新の機能がいくつかあるわけです。
そのような新しい機能を使ったページを作るためにはHTMLのソースを直接編集する必要があります。
実際にはCopmoserの下側にある編集モードツールバー (「標準」「すべてのタグを表示」「<HTML>ソース」「プレビュー」と並んでいる)にある「<HTML>ソース 」を選んで編集していきます。
 Composerの「HTMLソース」の編集機能がうまく動かないので以上の操作は「秀丸エディタ」で行ってください。

フレーム

フレームとはどういうものか、まずは
 
フレームのサンプル1


を見てください。このようにフレームはNetscape Navigaterなどのブラウザで表示させるといくつかの部分に分割されていますが、これらを構成しているものは各々の「ページ」と「フレーム」(枠)を設計している目に見えない「ページ」です。
このサンプルの具体的な作成手順を説明します。

フレーム内でハイパーリンク

 
フレームのサンプル2
を見てください。左のハイパーリンクをクリックすると、右にリンク先のページが表示されます。このようなパターンでフレームを使うケースが多いと思います。
 
  1. 今度はZ: ドライブのwww フォルダframesample2.html というファイル名で保存することにする。
  2. サンプル1と同様にして以下のようにframsetタグを追加する。
  3. Composerの「HTMLソース」の編集機能がうまく動かないので以上の操作は「秀丸エディタ」で行ってください

  4.  

     
     
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
      <meta name="author" content="Sakamoto Kan"> 

    <frameset COLS="25%,75%">
    <frame NAME="left" SRC="f2l.html">
    <frame NAME="right" SRC="f2r.html">
    </frameset>
    </head>
    <body>
    <br>
    </body>
    </html>

  5. サンプルの右に始めに表示される部分が  f2r.html というファイルに対応するのでそれをComposerで作っておく。
  6. 左のフレームからのハイパーリンク先のページ"page 1" "page 2" "page 3"に対応するファイル  f2r1.html  f2r2.html f2r3.html をComposerで作っておく。
  7. サンプルの左フレームに対応するページ f2l.html をComposer で作る。
  8. そこにf2r1.html f2r2.html f2r3.htmlへの ハイパーリンクを作る。

  9. Composer上で、出来たハイパーリンクをマウスで選んでおいて、 リンクボタンを押すと「リンクのプロパティ」サブウィンドウが出るので「詳細編集 」ボタンを押す。

    詳細プロパティエディタ」サブウィンドウで、
     

    属性に  target
    に    right

    を入力して「OK」を押す。

  1. f2r2.html f2r3.htmlへ のリンクも同様にしていってハイパーリンクを完成させます。
  2. 最後にNavigatorで確認してください。


上の例のようにフレーム内にハイパーリンク先を表示させるには、HTML文書の中に
TARGET= フレーム名という指定を書きます。フレーム名は frame NAME=  で指定したフレーム内の「場所」に名前を付けたものです。
フレーム名には以下のような予め用途の決まった特別な名前があります。
_blank
新しいウィンドウが開き、そこにリンク先を表示
_self
リンクが表示されていたのと同じフレームの中に、リンク先のページを表示
_parent
直前に分割されたフレーム全体にページを表示
_top
フレーム分割を解除して、ブラウザウィンドウ全体にページを表示


今後課題制作を進めながらも、実習時間にはHTMLの補足など新しいことも勉強していきます。実習時間に欠席しないようにしてください。
題製作 」とは別に授業の「実習課題」も合わせて後期は評価します。



課題のページに進む