网页设计与制作案例教程 教学课件 陈承欢 第9单元.pdfVIP

7.1　使用表格布局网页 7.1　使用表格布局网页  课程引导 表格是常用的页面元素，制作网页经常 要借助表格进行排版，在网页布局方面，表 格可谓起着举足轻重的作用，通过设置表格 以及单元格的属性，对页面中的元素进行准 确定位，表格能够有序地排列数据又能对页 面进行更加合理的布局。灵活地使用表格的 背景、框线等属性可以得到更加美观的效果。 （1）学会添加表格、设置表格属性。 （2）掌握设置表格中行和列属性的方法。 （3）掌握拆分单元格，合并单元格的方法。 （4）掌握在表格中输入文字并定位的方法。 （5）掌握在表格中插入图像并定位的方法。 网页浏览效果展示 应用表格布局的网页04.html预览效果 如图所示。 图7-1　　应用表格布局网页的预览效果  本章操作任务 （1）在“长沙世界之窗”网站文件夹中 “04表格布局”中创建命名为“04.html” 的网页，网页的标题为“长沙世界之窗的国 际街”。 （2）插入一张3行4列的表格，表格宽度 设置为100％。 （3）拆分单元格，合并单元格。 （4）设置表格以及行、列、单元格的属性。 （5）为单元格设置背景图像。 （6）在表格的多个不同单元格中插入多幅 图像。 7.1.1　认识表格 7.1.1　认识表格 1．表格的组成元素 1．表格的组成元素 表格的组成元素主要包括行、列、单元 格。 （1）单元格：表格中的每一个小格称为 一个单元格。 （2）行：水平方向的一排单元格称为一 行。 （3）列：垂直方向的一排单元格称为一 列。 （4）边框：整张表格的外边缘称为边框。 （5）间距：指单元格与单元格之间的距 离。 2．表格的应用 2．表格的应用 （1）利用表格布局网页中的文字、图像 等页面元素 （2）利用表格合成尺寸较大的图像 （3）应用表格存储文本或数据，便于对 数据进行排序 7.1.2　表格的基本操作 7.1.2　表格的基本操作 在“长沙世界之窗”网站文件夹“04表格 布局”中创建命名为“04.html”的网页， 该网页利用表格布局页面元素，具体操作过 程如下。 1．新建网页 1．新建网页 （1）启动Dreamweaver 8，切换到“长沙 世界之窗”站点。如果该站点不存在，则新 建一个名为“长沙世界之窗”的站点。 （2）在站点下创建子文件夹“04表格布 局”，在“04表格布局”文件夹中创建子文 件夹“image”，并将所需图像复制到该文 件夹下。 （3）在Dreamweaver 8主窗口中，单击菜 单【文件】→【新建】，打开“新建文档” 对话框，在“常规”选项卡中，“类别”列 表框中选择“基本页”，“基本页”列表框 中选择“HTML”，单击【创建】按钮，该站 点下一个名为“Untitled-1”文档便创建。 单击标准工具栏上的【保存】按钮，打开 “另存为”对话框，保存位置为“04表格布 局”，文件名为“04.html”，单击【保存】 按钮，保存该网页文档。 （4）设置网页标题，在文档工具栏的 “标题”文本框直接输入文档标题“长沙世 界之窗的国际街”即可，如图7-3所示。如 果需要设置网页的其他页面属性，单击“属 性”面板【页面属性】按钮，打开“页面属 性”对话框，在该对话框中设置页面属性即 可，这里暂不设置其他属性。 （5）保存该网页。 2．插入表格 2．插入表格 （1）打开网页04.html，将光标置于网页 文档04.html第一行的最左端，在 Dreamweaver 8主窗口中，单击菜单【插入】 →【表格】。 （2）对“表格”对话框中的各个参数进 行设置 （2）对“表格”对话框中的各个参数进 行设置  在“行数”文本框中输入“3”，在“列 数”文本框中输入“4”。  在“表格宽度”文本框输入“100%”，其 后的下拉列表框中选择宽度的单位为“百分 比”。 在“边框粗细”文本框中指定表格边框的 宽度，默认值为1，单位为像素。如果在游 览器中浏览时要使表格不显示边框，将“边 框粗细”设置为0。 在“单元格边距”中设置单元格边框与单 元格内容之间的距离。这里设置为2。 在“单元格间距”中设置相邻的表格单元 格之间的距离。这里设置为3。 在“页眉”选项组定义页眉样式，可以在 四种样式中选择一种，这里选择“无”。 在“辅助功能”选项组中可以设