HTML Frameset 範例程式碼_HTML/Xhtml_網頁製作

這篇，介紹一個Frameset做的簡單到不能再簡單的框架。

       好先來看看這個框架的頁面構成，由於是純手工做的測試程序，所以只是在Notepa 中做了一下代碼，很粗略。但還是包含了Frameset中的大致內容的。好，言歸正傳，首先看一下文件構成。

1.Frame.html包含框架的結構

2.link.html包含框架左側選單列

3.firstPage.html包含框架主頁的一行文字（個人比較懶，沒有好好做）

4.secondPage.html和上方3類似，用於測試。

下面是一個截圖（不清楚，第一次搞這東西）
 

先看一下Frame.htm中的程式碼：

 
  

html>

       是感覺很簡單？主要是一個Frameset元素，然後設定了cols="159px,*"這個屬性。這個屬性的作用就是將頁面分割成159px和其他兩塊區域。如上圖所示。

         接著是frame標記，上面的cols屬性有幾個值下面的子元素對應的也應該有幾個。然後是一些常見的屬性。包括邊框的寬度，是否出現捲軸，邊框顏色，是否允許使用者改變大小。來源檔案是哪個等等一些屬性。

         然後將第二個的原始檔案指向firstPage作為測試用。

接下來是link.html:

 

  
• 我的網站
    
  
   第一個頁

   
• 第二個頁

  

  
  

我的帳務
   

     支付

   

支付

   >管理
    

網上支付

    

登記匯款

    

線上招領

    

歷史帳務

   
  
  

網站管理
   

    
• 登入

     角色管理

    

使用者管理

;
   
  
 

var LastLeftID = "";
function menuFix() {
 var obj = document.getElementById("nav").getElementsByTagName("li");
 
for ( var i=0; i  obj[i].onmouseover=function() {
   this.className =(this.className.length>0? " ": "") "sfhover";
  }
  obj[ ] .onMouseDown=function() {
   this.className =(this.className.length>0? " ": "") "sfhover";
  }
  obj[i].onMouseUp >  }
  obj[i]。 ) {
   this.className =(this.className.length>0? " ": "") "sfhover";
  }
  obj [i].onmouseout=function() {
  obj [i].onmouseout=function() {
  . className=this.className.replace(new RegExp("( ?|^)sfhover\b"), "");
  }
 }
}
function DoMenu(emid)
{
 var obj = document.getElementById(emid);
 obj.className = (obj.className.toLowerCase() == "展開"?"collapsed":"展開");
 if((LastLeftID!="")&&(emid!=LastLeftID)) //關掉上一個選單
 {
  document.getElementById(LastLeftID).className = "collapsed";
 }
 LastLeftID = emid;
 }
 LastLeftID = emid;{
 var MenuID="";
 var _paramStr = new String(window.location.href);
 var _sharpPos = _paramStr.indexOf("#");
 _sharpPos >= 0 && _sharpPos  {
  _paramStr = _paramStr.substring(_sharpPos 1, _paramStr.length); }
 
 if (_paramStr.length > 0)
 {
  var _paramArr = _paramStr.split("&");  {
   var _paramKeyVal = _paramArr[0].split("=");
   if (_paramKeyVal.length>0)
   if (_paramKeyVal.length>0)
 🎜>   }
  }
 }
 
 if(MenuID!="")
 {
 DoMenu(MenuID)
 {
 DoMenu(MenuID)
攝取選單🎜 (); //*這兩個函數的順序要注意一下，否則在Firefox裡GetMenuID()達不到效果
menuFix();
-->


      這個其實就偷懶了，是從網路上找的一個DIV CSS JS做的一個下拉式選單，有興趣的可以自己看一下，我覺得自己能用起來，知道怎麼改就OK了。
下面是兩個測試頁面，由於這連個測試頁面有點懂點HTML的互相寫出來，這裡就只貼出頁面1的程式碼：


 

樣式>

第一頁

估計高手看到這都要吐了，一定說很垃圾，不過只是記錄下自己做的小東西。