嵌入式web伺服器boa -- html網頁設計總結
阿新 • • 發佈:2019-01-07
嵌入式web伺服器boa – html網頁設計總結
(一)頁面分割的實現
- 四個HTML頁面:index.html(主介面)、top.html、left.html、right.html;
- 實現在主頁面顯示其餘三個頁面的拼接頁面,也即實現頁面分割;
- 程式碼實現:
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標籤一起使用,它們歸屬不同的框架架構。