嵌入式web服务器boa – html、cgi设计总结
(一)页面分割的实现
- 四个html页面:index.html(框架)、top.html(标题栏)、left.html(菜单栏)、right.html(显示界面)；
- 实现以主页面为框架，嵌入其余三个页面作为子页面，也即实现页面分割；
- 通过left页面不同超链接实现特定cgi程序在right页面的输出；
- 实现对不同子页面(*.cgi)地址栏的隐藏；
- 代码实现：
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>
<center><h1> 头部内容 </h1></center> <!--显示内容-->
</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><br> <!--显示内容-->
</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>
<center><h3> 超链接跳转后内容显示页面 </h3></center>
</body>
</html>
注：
(1)frameset定义一个框架集，它被用来组织多个窗口；
(2)frameset不能和body标签一起使用，它们归属不同的框架架构。
1048
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
