静态网页设计制作 教案 第7章 用表格规划网页.docVIP

项目七

项目七

用表格规划网页

思政目标

思政目标

注重培养分析能力，主动拓宽自己的视野，充分发挥创造力。

树立正确的职业观，培养正确的职业操守

技能目标

技能目标

学会创建表格、设置表格和单元格属性

掌握表格的各种操作

项目导读

项目导读

在网页设计的众多环节中，页面布局是最为重要的环节之一。表格是用于网页布局设计的常用工具，可以记载表单式的资料、规范各种数据、输入列表式的文字、排列文字和图形，在整个网页空间编排上发挥着重要的作用。合理布局表格，会使网页布局整齐，又便于管理和修改。

静态网页设计制作

任务1创建表格

任务1创建表格

任务引入

任务引入

小明已经学会了在网页中添加各种类型的内容，但是他又发现网页是分为不同的区域进行分布的，如何对网页的页面进行合理的布局呢，通过请教同事了解到，在网页中可以创建表格，通过对表格进行操作可以将网页进行布局，那么首先应该学会如何在网页中创建表格，以及如何在单元格中创建嵌套表格?

知识准备

一、创建表格、单元格

在Dreamweaver中，利用表格可以方便地将数据、文本、图片规范地显示在页面上，使网页更加美观、有条理。在HTML中，表格是很多优秀站点设计的整体标准，用表格格式化的页面在不同平台、不同分辨率的浏览器中都能保持布局和对齐。

不过，表格有一个缺陷：它会使网页显示的速度变慢。因为在浏览器中，文字是逐行显示的，即从服务器上传过来多少内容，就显示多少内容，以方便浏览。而使用表格就不同了，整个表格的内容全部下载完成之后，才能在客户端的浏览器上显示出来。因此，在多重嵌套的表格布局中，页面打开速度会比较慢。

尽管如此，表格在网页布局中仍扮演着很重要的角色，是网页设计者必须掌握的一个强大的工具。下面我们就介绍表格一些常用的操作。

表格由三个基本部分组成：行、列和单元格。在表格中，被线条分开的一个个小格称为单元格，其中可插入文字、图像等对象；分隔单元格的线条称为边框；位于水平方

向上的一排单元格称作一行，位于垂直方向上的一排单元格称作一列。单元格是表格的基本组成部分。

案例——创建表格

案例——创建表格

下面以在网页中插入一个3行3列的表格为例，介绍在网页中创建表格的操作步骤。(1)在“插入”面板顶部的下拉菜单中单击“HTML”标签，切换到“HTML”插入面

板。

(2)单击“表格”图标按钮，或执行“插入”丨“表格”菜单命令，弹出“表格”对话框，如图7-1所示。

对话框中各个选项的功能介绍如下：

“行数”:用于设置表格的行数。

Table

Table

“列”:用于设置表格的列数。

“表格宽度”:用于设置表格的宽度。

右侧的下拉列表用于设置表格宽度的单位，有“像素”和“百分比”两种。这两种单位的区别在于，以像素为单位设置的表格宽度是表格的实际宽度，是固定的；而用百分比设定的表格宽度将随浏览器窗口的大小改变而改变。

“边框粗细”:用于设置表格的边框厚度，单位为像素。设置为0时不显示边框。“单元格边距”:用于设置单元格的内容和边框的间距。

“单元格间距”:用于设置单元格之间的距离，相当于设置单元格的边框厚度。

“标题”:用于设置标题显示方式，有4个选项，具体效果见相应的图标，可以点击图标选中其一。

“辅助功能——标题”:用于设置表格的标题。

“摘要”:用于设置表格的说明信息，对表格的显示无影响。

(3)在“行数”文本框中输入表格的行数3。在“列”文本框中输入表格的列数3,“标题”选择“顶部”,在“标题”文本框中输入“第一张表格”,其余选项保持默认值。

(4)单击“确定”按钮即可插入表格，最终制作结果如图7-2所示。

费椅太个▼

费椅太个▼

的数-[

最格度度

边根用用0

单元磨距20B

n□

州1像素

图7-1“表格”对话框图7-2插入的表格

案例——使用DOM面板插入表格

使用DreamweaverCC2021中的DOM面板也可以很便捷地在网页中插入表格。方法如下：

(1)执行“窗口”|“DOM”菜单命令，打开DOM面板。按空格键或单击DOM面板中与所需元素相邻的标签，单击标签左侧的“添加元素”按钮，在弹出的下拉菜单中选择

要插入元素的位置，如图7-3所示。

(2)根据需要选择要插入元素的位置，例如要在图片后插入元素，则选择“在此项后插入”命令，将会插入并显示占位符div标签。键入需要的标签名称table,如图7-4所示。此时，在页面中将自动插入一个宽为200像素，3行3列的表格，效果如图7-5所示。

图7-9嵌套的表格效果。

图7-9嵌套的表格