1. 程式人生 > >嵌入式web伺服器boa -- html網頁設計總結

嵌入式web伺服器boa -- html網頁設計總結

嵌入式web伺服器boa – html網頁設計總結

(一)頁面分割的實現

  1. 四個HTML頁面:index.html(主介面)、top.html、left.html、right.html;
  2. 實現在主頁面顯示其餘三個頁面的拼接頁面,也即實現頁面分割;
  3. 程式碼實現:
    index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <meta name="content-type" content="text/html; charset=utf-8">
    <
title> 主頁面 </title> </head> <frameset rows="100,*"> <!--頁面分成上下兩部分,100表示上部分所佔空間,*表示下部分佔其餘部分--> <frame src="top.html" name="top"></frame> <!-- 上部分顯示頁面--> <frameset cols="100,*"> <!--頁面分割成左右兩部分…--> <frame src="left.html" name=
"left" noresize="noresize" scrolling="no"></frame> <!--左頁面,不調整框架大小、不顯示滾動條--> <frame src="right.html" name="right"></frame> <!--右頁面--> </frameset> </frameset> </html>

top.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <
head> <meta name="content-type" content="text/html; charset=utf-8"> <title> top頁面 </title> </head> <body> <h1> 標題 </h1> <!--顯示內容--> </body> </html>

left.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <meta name="content-type" content="text/html; charset=utf-8">
    <title> left頁面 </title>
  </head>
  
  <body> 
    <!--超連結URL--> 	
	<ul class="navbar">
	<li><a href="/cgi-bin/*.cgi" target="right">顯示狀態</a> <!--顯示內容-->
	</ul>
  </body>
</html>

right.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <meta name="content-type" content="text/html; charset=utf-8">
    <title> right頁面 </title>
  </head>
  
  <body> 
    <h3> 超連結跳轉後內容顯示頁面 </h3> 	
  </body>
</html>

注:
(1)frameset定義一個框架集,它被用來組織多個視窗;
(2)frameset不能和body標籤一起使用,它們歸屬不同的框架架構。