实验12 网页布局及框架设计.pdfVIP

实验实验 12 网页布局与框架网页布局与框架设计设计 实验实验 网网页布局与框架页布局与框架设计设计 一、一、实验实验 目的目的 一一、、实验实验目的目的 1. 掌握用网页的表格布局方法。 2. 掌握用网页的 DIV+ CSS 布局方法。 3. 掌握用网页的框架设计方法。 4. 理解网页布局的在网页设计中的作用。 二、二、实验实验理论理论 二二、、实验实验理论理论 1. 网页布局 LOGO 导航栏 内容 页脚 图 12-1 上海应用技术学院主页 如图 12-1，从上到下分别是：学院LOGO ，导航栏，内容、页脚 等几个部分，这和普通的 WORD 文档排版没什么区别。故此，布局 无非是将页面在划分为几个部分，每个部分负责不同的作用。 由于网页是 HTML 语句构成，本质上是纯文本，如何将文字放 在页面的任意位置，是个问题。故此布局必须利用特定技术来完成这 一需求。特定的技术目前有两种：一是表格，一是 DIV+ CSS 。当然 就当前主流而言，表格技术已过时，DIV+CSS 大行其道。 2. 框架技术 通常 1 个浏览器窗口只能显示 1 个网页，而框架技术允许你在 1 个浏览器窗口中显示多个网页。如图 12-2 所示。 第 页 计算机网络应用基础实验指导 实验 12 网页布局与框架设计 图 12-2 上海应用技术学院教学管理系统 图 12-2 中虚线框标出了 3 个区域，每个区域中显示了 1 个网页 内容。在图中页面上，当你点击左边的功能选项时，右边的内容会更 新，而左边和顶部的内容始终保持不变。这是最常见的框架技术引用 场合。 3. 表格语法 table width=”800px” trtd1,1/tdtd1,2/tdtd1,3/td/tr trtd2,1/tdtd2,2/tdtd2,3/td/tr /table 上面斜体文字将显示 2 行 3 列的表格，table/table表示表格 的开始与结束；tr/tr表示表格一行的开始与结束；td/td表示 表格一列的开始与结束，在 1 个tr/tr 中有几个td/td表示改行 有几列。 4. DIV 与 CSS DIV 本质就是 1 个 HTML 标签，一个什么格式都不呈现的标签， 但它是一个容器，可以包含几乎所有的其他 HTML 语句，所有你可 以将 DIV 作为一个整体来移动它的位置。而如何移动，就要用 CSS 中的相关属性了。 当然，CSS 表示层叠样式表，是一种改变网页中元素的样式技术， 说白了和 WORD 中的样式是一回事。 5. 框架语法 html frameset cols=25%,50%,25% 第 2 页 计算机网络应用基础实验指导 实验 12 网页布局与框架设计 frame src=/example/html/frame_a.html frame src=/ex