Dreamweaver 8中文版网页制作-教学大纲第6章 使用表格-电子教案.docxVIP

PAGE

1-

Dreamweaver8中文版网页制作-教学大纲第6章使用表格-电子教案

6.1表格的基本概念

表格是网页设计中常用的布局元素，它能够将信息以行和列的形式组织起来，使得内容更加清晰、有序。在Dreamweaver8中文版中，表格的创建和应用非常便捷。表格的基本概念主要包括表格的结构、属性以及如何通过表格来组织网页内容。

表格由行和列组成，行代表表格的横向元素，列则代表纵向元素。每一行和每一列都可以包含一个或多个单元格，单元格是表格中最小的单位，用于容纳实际的内容。在Dreamweaver中，一个简单的表格可以由三行两列构成，即包含六个单元格。例如，一个包含三个标题和三个描述的表格，其结构如下：

|标题1|标题2|标题3|

||||

|描述1|描述2|描述3|

表格的属性包括宽度、高度、边框、间距和单元格间距等。例如，设置表格的宽度为100%，可以使表格宽度与浏览器窗口宽度一致；设置边框为0，可以使表格无边框显示。这些属性的设置可以通过Dreamweaver的属性检查器来完成。

在网页设计中，表格的应用非常广泛。例如，在电子商务网站中，商品列表通常会使用表格来展示，通过表格的行和列来展示商品的名称、价格、库存等信息。以某电子产品销售网站为例，其商品列表表格可能如下所示：

|商品名称|价格（元）|库存|操作|

|||||

|手机A|2999|100|查看详情|

|手机B|1999|200|查看详情|

|手机C|2499|150|查看详情|

在这个表格中，商品名称、价格、库存和操作分别占据不同的列，使得用户可以快速地浏览和选择所需商品。此外，表格还可以用于制作网页的分页导航，通过设置表格的行高和列宽，可以实现分页效果。

总之，表格是Dreamweaver8中文版中一个强大的布局工具，它能够帮助我们更好地组织和展示网页内容。通过对表格结构的了解和属性的灵活运用，我们可以设计出既美观又实用的网页布局。

6.2创建表格

在Dreamweaver8中文版中，创建表格的过程简单快捷。以下为创建表格的几个步骤：

(1)打开Dreamweaver8中文版，新建或打开一个网页文档。在“插入”菜单中选择“表格”选项，或者直接点击工具栏上的“表格”按钮。

(2)在弹出的“表格”对话框中，设置表格的行数、列数、单元格边距和单元格间距等属性。例如，若要创建一个包含3行4列的表格，可以在“行”和“列”框中分别输入3和4。单元格边距和单元格间距的设置取决于个人喜好和设计需求。

(3)点击“确定”按钮后，表格将插入到网页文档中。此时，表格的每个单元格都将处于选中状态，可以开始输入内容。

(4)若要调整表格的宽度，可以将鼠标放在表格的边框上，当鼠标变为双向箭头时，拖动边框即可。同样，调整单元格的宽度只需将鼠标放在单元格的右边框上，拖动即可。

(5)在表格中输入内容时，可以选中多个单元格进行批量操作。例如，要选中连续的单元格，可以按住鼠标左键并拖动；要选中非连续的单元格，可以按住Ctrl键并点击所需单元格。

(6)若需在表格中插入新行或列，可以在表格的末尾右键点击，选择“插入行”或“插入列”选项。此外，还可以通过“表格”菜单中的“插入行”和“插入列”命令来实现。

(7)在表格中，可以设置单元格的背景颜色、边框样式和文本对齐方式等属性。通过属性检查器，可以轻松地调整这些属性。例如，设置单元格背景颜色为蓝色，可以使表格内容更加突出。

(8)当表格创建完成后，可以根据实际需求对表格进行进一步的编辑和美化。例如，可以添加边框、设置单元格间距、调整行高和列宽等。

总之，在Dreamweaver8中文版中创建表格非常简单。通过掌握上述步骤，用户可以快速创建出满足设计需求的表格，从而更好地组织和展示网页内容。在实际操作中，可以根据具体情况进行灵活调整，以达到最佳效果。

6.3表格的编辑与格式化

(1)在Dreamweaver8中文版中，编辑和格式化表格是网页设计的重要环节。表格的编辑主要涉及单元格内容的修改、行和列的增删操作等。例如，在一个包含员工信息的表格中，可以通过编辑单元格来更新员工的职位、电话或电子邮件地址。以下是一个编辑单元格的例子：

|姓名|职位|电话|电子邮件|

|||||

|张三|程序员zhangsan@|

|李四|设计师lisi@|

若需要更新张三的电话号码，可以选中张三所在的单元格，直接输入新的电话号码，然后按回车确认。

(2)表格的格式化则包括字体样式、颜色、背景色、边框样式等。这些格式化选项可以通过Dreamweaver8的属性检查器来调整。以下是一个格式化表格的案例：

|商品名称|价格（元）|库存|操作|

|||||

|手机A|2999|