欢迎来到天天文库
浏览记录
ID：5353536
大小：337.02 KB
页数：12页
时间：2017-12-08
《实验12 网页布局与框架设计》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。
1、实验12网网页布局与框架网页布局与框架设计一一、一、、实验、实验目的1.掌握用网页的表格布局方法。2.掌握用网页的DIV+CSS布局方法。3.掌握用网页的框架设计方法。4.理解网页布局的在网页设计中的作用。二二、二、、实验、实验理论1.网页布局LOGO导航栏内容页脚图12-1上海应用技术学院主页如图12-1，从上到下分别是：学院LOGO，导航栏，内容、页脚等几个部分，这和普通的WORD文档排版没什么区别。故此，布局无非是将页面在划分为几个部分，每个部分负责不同的作用。由于网页是HTML语句构成，本质上是纯文本，如何将文字放在页面的任意位置，是
2、个问题。故此布局必须利用特定技术来完成这一需求。特定的技术目前有两种：一是表格，一是DIV+CSS。当然就当前主流而言，表格技术已过时，DIV+CSS大行其道。2.框架技术通常1个浏览器窗口只能显示1个网页，而框架技术允许你在1个浏览器窗口中显示多个网页。如图12-2所示。第页计算机网络应用基础实验指导实验12网页布局与框架设计图12-2上海应用技术学院教学管理系统图12-2中虚线框标出了3个区域，每个区域中显示了1个网页内容。在图中页面上，当你点击左边的功能选项时，右边的内容会更新，而左边和顶部的内容始终保持不变。这是最常见的框架技术引用场
3、合。3.表格语法1,11,21,32,12,22,3上面斜体文字将显示2行3列的表格，表示表格的开始与结束；表示表格一行的开始与结束；表示表格一列的开始与结束，在1个中有几个表示改行有几列。4.DIV与CSSDIV本质就是1个HTML标签，一个什
4、么格式都不呈现的标签，但它是一个容器，可以包含几乎所有的其他HTML语句，所有你可以将DIV作为一个整体来移动它的位置。而如何移动，就要用CSS中的相关属性了。当然，CSS表示层叠样式表，是一种改变网页中元素的样式技术，说白了和WORD中的样式是一回事。5.框架语法第2页计算机网络应用基础实验指导实验12网页布局与框架设计
5、<body>您的浏览器无法处理框架！</body>上面的语句中，定义了一个框架集合，并申明该框架集合中有3列，各列的宽度分为为25%,50%,25%。3句分别定义了3列分别显示的网页文件名。因为不是所有的浏览器都支持框架技术，故此中的文本用于在框架无法识别时
6、显示，如果浏览器能够正确识别框架，则中的文本可以认为是不存在的。三三、三、、实验、实验条件1.实验设备接入Internet的计算机2.实验软件Windows98/2000/XP、Web浏览器(IE)、文本编辑器四四、四、、实验、实验内容1.制作表格布局网页。2.制作DIV+CSS布局网页。3.制作框架网页。五五、五、、、实验实验步骤本实验主要制作如图12-3所示的网页。请任选文本编辑器，如记事本、FrontPage或dreamwaver等，输入后续步骤中的斜体文字，当然你也可以复制过去。第3页计算机网
7、络应用基础实验指导实验12网页布局与框架设计图12-3实验页面1.制作表格布局网页。表格布局8、arset=gb2312"/>
8、arset=gb2312"/>
此文档下载收益归作者所有
