第4章网页元素定位

来源：网络收集时间：2026-09-18

导读：网页制作课程第1篇第4章网页元素定位4.1 标准表格4.1.1 建立表格 4.1.2编辑表格 4.2 布局表格4.2.1 绘制布局表格与布局单元格 4.2.2 编辑布局表格与布局单元格 4.3 层4.3.1 层的特点 4.3.2 层的基本操作 4.3.3 层面板 4.3.4 设置层属性 4.4 框架4.4.1 框

网页制作课程

第1篇第4章网页元素定位4.1 标准表格4.1.1 建立表格 4.1.2编辑表格

4.2 布局表格4.2.1 绘制布局表格与布局单元格 4.2.2 编辑布局表格与布局单元格

4.3 层4.3.1 层的特点 4.3.2 层的基本操作 4.3.3 层面板 4.3.4 设置层属性

4.4 框架4.4.1 框架基础 4.4.2 框架的基本操作 4.4.3 框架与框架集属性

思考题

网页制作课程

4.1 标准表格在信息世界中表格主要用于装载数据信息。由于表格能将单元格中的内容规划整齐后显示出来，表格属性能改变对象在浏览器中的显示效果，所以表格就成为网页中组织规划文字、图像等内容的排版工具。本节主要介绍表格的建立、对表格的一些基本操作和怎样利用表格来构造页面的整体框架。

网页制作课程

4.1.1 建立表格<table属性名="属性值" …> <caption属性名="属性值" …>表格标题</caption> <tr属性名="属性值" …> <th属性名="属性值" …>表头1</th> <td属性名="属性值" …>表项1</td> </tr> <tr属性名="属性值" …> <th属性名="属性值" …>表头2</th> <td属性名="属性值" …>表项2</td> </tr> </table>

网页制作课程

4.1.1 建立表格表格标签<table>的常用属性有width、height、border、 align、cellpadding(表项内部空白)、cellspacing (表项间隙)、bordercolor、 background、bgcolor 标题标签<caption>的常用属性有align、 valign(标题在表格的上部或下部，值为bottom|top)。行标签<tr>、单元格标签<td>、表头标签<th>的常用属性有width、height、align、valign、nowrap、 bordercolor、background、bgcolor。此外还有跨多行属性colspan和跨多列属性rowspan,如： < th colspan=x rowspan=y > 表项 < /th >

网页制作课程

4.1.1 建立表格<body> <table width="247" height="129" border="1"> <caption>学生成绩表</caption> <tr> <th rowspan="2">学号</th> <th rowspan="2">姓名</th> <th colspan="3">成绩</th> </tr> <tr><th width="40">数学</th><th width="40">语文</th><th width="40">外语</th></tr> <tr><td>040321</td><td>张三</td><td>78</td><td>88</td><td>90</td></tr> <tr><td>050833</td><td>李四</td><td>67</td><td>75</td><td>98</td></tr> <tr><td>067712</td><td>王五</td><td>90</td><td>56</td><td>70</td></tr> </table> </body>

网页制作课程

4.1.1 建立表格使用 Dreamweaver 建立表格，通过“插入” 面板或者“插入”菜单

网页制作课程

4.1.2 编辑表格1.选择表格对象选择整个表格：单击表格左上角或右边框或底边框或状态条中的<Table>标签。选择一行或一列单元格：将鼠标指针置于一行的左边框上，或置于一列的顶端边框上，当选定箭头出现时单击。选择连续的几个单元格：在一个单元格中单击并拖动鼠标横向或纵向移至另一单元格。选择不连续的几个单元格：按住Ctrl键，单击欲选定的单元格、行或列。选择单元格中的网页元素：点击单元格中的

网页元素。

网页制作课程

4.1.2 编辑表格2.编辑表格外观– 表格属性面板 – 行、列、一个或多个单元格的属性面板

【例4-2】表格嵌套和代码– 在对表格多次设置同一属性时，单元格的属性优先于表格行的属性，表格行的属性优先于整个表格的属性。

【例4-3】利用表格构造网页的整体框架

3.表格数据排序

网页制作课程

4.2 布局表格利用布局表格制作复杂的网页布局，制作简单，但布局表格可设置的属性比标准表格少。

利用布局表格布置复杂页面后，转换到标准表格设置属性。

网页制作课程

4.2.1 绘制布局表格与布局单元格

“布局表格”按钮

,“布局单元格”按钮

布局表格之间与布局单元格之间不能重叠页面中的灰色空间是不可用来添加网页元素的区域，必须在需要插入网页对象的地方插入一个布局单元格。

网页制作课程

4.2.2 编辑布局表格与布局单元格1. 调整布局表格与布局单元格的位置与大小。 2. 布局单元格的自动伸缩。 3. 设置布局表格与布局单元格的属性。【例4-4】应用布局表格重新制作的【例4-3】页面。

网页制作课程

4.3 层 4.3.1 层的特点层是可移动的，表格是不可移动的。层是三维的(x,y,z三轴),表格是二维的。层具有可见性，可以隐藏。层的标签是<p id=“层id”></p>,也可以使用 <span></span>标签。其属性不写在标签中，而是以CSS样式的id选择符写在<head>部分，故在<body>部分的代码十分简洁。

网页制作课程

4.3.2 层的基本操作选择层：点击层边框或点击层图标。调整层的大小：选中层后，拖拽层四周的控制柄。

移动层：拖动层左上角的方形标签。对齐层：选中欲对齐的多个层，执行菜单命令“修改”|“排列顺序”下左对齐、右对齐、对齐上缘和对齐下缘等子命令，以黑色控制柄的层作为对齐的标准。

网页制作课程

4.3.3 层面板禁止层重叠改变层的可见性改变层的叠放顺序选定一个或多个层建立嵌套层取消嵌套关系

网页制作课程

4.3.4 设置层属性

图4-14 单个层的属性面板

图4-15 多个层的属性面板

【例4-5】建立两个层，实现文字的阴影效果。

网页制作课程

…… 此处隐藏：753字，全部文档内容请下载后查看。喜欢就下载吧 ……