嵌入式web服务器boa -- html、cgi设计总结

嵌入式web服务器boa – 网页设计总结

原野风霜324

5264人浏览 · 2018-11-25 10:58:19

原野风霜324 · 2018-11-25 10:58:19 发布

嵌入式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>