BinaryDevelop
  1. ホーム
  2. Web制作
  3. HTML/Xhtml

HTMLフレームセットのサンプルコード

2022-02-05 23:46:51

今回は、これ以上ないほどシンプルなFrameset製のフレームワークを紹介します。

       では、このフレームワークのページ構成を見てみましょう。純粋に手動でのテストプログラムなので、Notepa++でちょっとコードを書いただけで、非常にラフなものです。それでもFramesetの大まかな内容は入っています。さて、話を戻して、まずはファイル構成を見てみましょう。

1. Frame.html はフレームの構造を含む

2.link.htmlはフレームの左メニューバーを含む

3.firstPage.htmlにはフレームワークのメインページのテキストが1行入ります（個人的には手抜きでちゃんとやってません）。

4.secondPage.htmlは上記3と同様で、テスト用に使用します。

以下はスクリーンショットです（初めてこのようなものをいじったので、よくわかりません）。

まず、Frame.htmのコードから見ていきましょう。

<html>
<head>
</head>
<frameset cols="159px,*">
 <frame name="a1" src="link.html" noresize="yes" border="1px" scrolling="auto" bordercolor="blue" >
 <frame name="a2" src="firstPage.html"> 
</frameset>
</html>

       シンプルに感じませんか？メインはFrameset要素で、cols="159px,*"という属性を設定しています。この属性の目的は、ページを159pxとそれ以外の2つの領域に分割することです。上の画像のように

         次にframeタグですが、上記のcols属性は、<frame>子要素の下にいくつかの値があり、それに応じていくつかの値を持つ必要があります。それから、いくつかの <frame> 共通の属性があります。枠線の幅、スクロールバーの表示有無、枠線の色、ユーザーによるサイズ変更の可否などです。ソースファイルはどれか、などの属性があります。

         そして、2つ目のソースファイルは、テスト用にfirstPageを指しています。

次にlink.htmlです。

<style type="text/css">
<! --
*{margin:0;padding:0;border:0;}となります。
ボディ {
 font-family: arial, 宋体, serif;
 font-size:12px;
}
#nav {
 width:180px;
    ラインハイト: 24px;
 list-style-type: none;
 text-align:left。
    /*ulメニュー全体の行の高さと背景色を定義する*/
}
/*============================ レベル1ディレクトリ =============================*/
#nav a {
 width: 160px;
 display: block;
 padding-left:20px。
 /*Width (must be)、さもなければ下のLiが歪む*/
}
#nav li {
 background:#CCC; /* 第一階層ディレクトリの背景色*/
 border-bottom:#FFF 1px solid; /* 下に白い縁取り */
 float:left。
 /*float:left は、設定しない方が良いのですが、Firefoxで正しく表示されないため
 ナビの幅を継承し、幅を制限、liは自動的に下に伸びる */
}
#nav li a:hover{
 background:#CC0000; /* 第一階層ディレクトリのonMouseOver表示用背景色*/
}
#nav a:link {
 color:#666; text-decoration:none。
}
#nav a:visited {
 color:#666;text-decoration:none。
}
#nav a:hover {
 color:#FFF;text-decoration:none;font-weight:boldです。
}
/*========================================================= セカンダリーディレクトリ ===================*/
#nav li ul {
 list-style:none。
 text-align:left。
}
#nav li ul li{
 背景を指定します。#EBEB; /*セカンダリディレクトリの背景色*/
}
#nav li ul a{
         padding-left:10px。
         width:160px;
 /* セカンダリディレクトリの padding-left テキストは右に移動しますが、Width は = (全幅 - padding-left) にリセットする必要があります */。
}
/* 以下、セカンダリーディレクトリのリンクスタイルです */
#nav li ul a:link { です。
 color:#666; text-decoration:none。
}
#nav li ul a:visited {.
 color:#666;text-decoration:none。
}
#nav li ul a:hover {。
 color:#F3F3F3です。
 text-decoration:none。
 font-weight:normal。
 background:#CC0000。
 /* フォント色、セカンダリーオンマウスオーバー用背景色 */
}
/*==============================*/
#nav li:hover ul {.
 左：自動
}
#nav li.sfhover ul {。
 left: auto;
}
#content {
 clear: left;
}
#nav ul.collapsed {.
 display: none;
}
-->
#パレント
 width:180px;
}
*#PARENT{
 width:100%です。
}
</style>
<div id="PARENT">
 <ul id="nav">
  <li><a href="#Menu=ChildMenu1" onclick="DoMenu('ChildMenu1')">My Site</a>
   <ul id="ChildMenu1" class="collapsed">
    <li><a href="firstPage.html" target="a2">First Page</a></li>
    <li><a href="secondPage.html" target="a2">secondPage</a></li>
  </ul>
  </li>
  <li><a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">My Account</a>
    <ul id="ChildMenu2" class="collapsed">
     <a href="#">pay</a></li>
     <li><a href="#">admin</a></li>
     <li><a href="#">オンライン決済</a></li>
     <li><a href="#">送金の登録</a></li>
     <li><a href="#">オンライン募集</a></li>
     <li><a href="#">歴史的なアカウント</a></li>
    </ul>
  </li>
  <li><a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">Site Administration</a>
    <ul id="ChildMenu3" class="collapsed">
     <li><a href="#">ログイン&lot;/a></li>
     <a href="#">役割管理</a></li>
     <li><a href="#">ユーザー管理</a></li>.li;li>.li>
    </ul>
  </li>
 </ul>
</div>
<script type=text/javascript>
<! --
var LastLeftID = ""。
関数 menuFix() {
 var obj = document.getElementById("nav").getElementsByTagName("li");
 for (var i=0; i<obj.length;i++){。
  obj[i].onmouseover=function(){。
   this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  obj[i].onMouseDown=function(){。
   this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  obj[i].onMouseUp=function() {
   this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  obj[i].onmouseout=function() {
   this.className=this.className.replace(new RegExp(""( ? |^)sfhoverb"), "");
  }
 }
}
関数DoMenu(emid)
{
 var obj = document.getElementById(emid);
 obj.className = (obj.className.toLowerCase() == "expanded"? "collapsed":"expanded") となります。
 if((LastLeftID!="")&&(emid!=LastLeftID)) //最後のメニューを閉じる
 {
  document.getElementById(LastLeftID).className = "collapsed"。
 }
 LastLeftID = emid;
}
関数 GetMenuID()
{
 var MenuID=""。
 var _paramStr = new String(window.location.href);
 var _sharpPos = _paramStr.indexOf("#");
 if (_sharpPos >= 0 && _sharpPos < _paramStr.length - 1)
 {
  _paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length);
 }
 さもなければ
 {
  _paramStr = ""。
 }
 if (_paramStr.length > 0)
 {
  var _paramArr = _paramStr.split("&");
  if (_paramArr.length>0)
  {
   var _paramKeyVal = _paramArr[0].split("=");
   if (_paramKeyVal.length>0)
   {
    MenuID = _paramKeyVal[1];
   }
  }
 }
 if(MenuID!="")。
 {
  DoMenu(メニューID)
 }
}
GetMenuID(); //*この2つの関数の順番に注意しないと、FirefoxではGetMenuID()は動作しません。
menuFix()を使用します。
-->

</script>

       これは実際に怠惰な、インターネットからDIV + CSS + JSを見つけるためにドロップダウンメニューを行うには、自分自身のために見て興味を持って、私はそれを使い切ることができるように感じる、それを変更する方法を知っているOK.を。

ここに2つのテストページがありますが、このテストページでさえ、HTMLを少し知っていれば誰でも書けるので、ここでは1ページ目のコードだけを載せておきますね。

<html>
 <head>
<title> 最初のページ</title>
<style>
</style>
</head>
<body>
<h1> 最初のページ</h1>
</body>
</html>

巨匠はこれを見て吐くんだろうな、ゴミと言わざるを得ないが、ちょっとしたことを記録しておくだけでいいんだ。申し訳ないけど、ごめんね。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します