三欄頁框

以上三欄頁框要謝謝同學全棋的告知!
若點選「左頁框」連結，「右頁框」頁面將改變，點選「右頁框」連結後，「上頁框」也會改變，以下則是HTML程式碼。

 

(1) 首先，我們要有一個首頁，也就是要用來分割三個頁面的(或是定義此三個頁面要如何分割) - index.html

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>index</title>
</head>

<!- 分割上下頁框比為1比9 -->
<frameset rows="10%,90%" cols="*">
   
    <!- 上方頁框內容為top.html -->
    <!- scrolling="no" 控制frame為不可以捲動 -->
    <!- name="top"為定義上頁框的標籤 -->
    <frame src="top.html" name="top" scrolling="no" />
   
    <!- 分割左右頁框比為2比8 -->
    <!- framespacing為控制兩個frame之間的距離 -->
    <!- frameborder為控制frame外框的粗細 -->
    <!- border為控制外框粗細，若不要外框便設成0 -->
    <frameset rows="*" cols="20%,80%" frameborder="1" framespacing="1" border="1">
       
        <!- scrolling="auto" 控制frame為可以捲動 -->
        <!- 左方頁框內容為left.html -->
        <!- name="left"為定義左頁框的標籤 -->
        <frame src="left.html" name="left" scrolling="auto" />
        <!- 右方頁框內容為right.html -->
        <!- name="right"為定義右頁框的標籤 -->
        <frame src="right.html" name="right" scrolling="auto" />
    </frameset>
</frameset>

</html>



(2) 左頁框內容 - left.html

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>left</title>
  </head>
  <body>
    <li>Left</li>
    <!- 指定right_container1.html連結給右頁框 -->
    <li><a href="right_container1.html" target="right">Container 1</a></li>
    <!- 指定right_container2.html連結給右頁框 -->
    <li><a href="right_container2.html" target="right">Container 2</a></li>
  </body>
</html>



(3) 右頁框內容 - right.html

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>right</title>
  </head>
  <body>
    <li>Right</li>
  </body>
</html>



(4) 上頁框內容 - top.html

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>top</title>
  </head>
  <body>
    <center>Top</center>
  </body>
</html>



(5) 左頁框之連結一內容 - right_container1.html

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Right Container 1</title>
  </head>
  <body>
    <li><font color="red">Right Container 1</font></li>
    <!- 指定top_container1.html連結給上頁框 -->
    <li><a href="top_container1.html" target="top">Top Container 1</a></li>
    <!- 指定top_container2.html連結給上頁框 -->
    <li><a href="top_container2.html" target="top">Top Container 2</a></li>
  </body>
</html>



(6) 左頁框之連結二內容 - right_container2.html

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Right Container 2</title>
  </head>
  <body>
    <li><font color="blue">Right Container 2</font></li>
    <!- 指定top_container1.html連結給上頁框 -->
    <li><a href="top_container1.html" target="top">Top Container 1</a></li>
    <!- 指定top_container2.html連結給上頁框 -->
    <li><a href="top_container2.html" target="top">Top Container 2</a></li>
  </body>
</html>



(7) 右頁框之連結一內容 - top_container1.html

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Top Container 1</title>
  </head>
  <body>
    <center><font color="red">Top Container 1</font></center>
  </body>
</html>



(8) 右頁框之連結二內容 - top_container2.html

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Top Container 2</title>
  </head>
  <body>
    <center><font color="blue">Top Container 2</font></center>
  </body>
</html>

 

以上的教學若有錯誤，也請告位告知或糾正，謝謝~~^^!!

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 dreamtails 的頭像
    dreamtails

    雜七雜八的小筆記!

    dreamtails 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄