网页设计与制作案例教程 陈承欢 第9单元

《网页设计与制作案例教程 陈承欢 第9单元》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、7.1使用表格布局网页表格是常用的页面元素，制作网页经常要借助表格进行排版，在网页布局方面，表格可谓起着举足轻重的作用，通过设置表格以及单元格的属性，对页面中的元素进行准确定位，表格能够有序地排列数据又能对页面进行更加合理的布局。灵活地使用表格的背景、框线等属性可以得到更加美观的效果。课程引导（1）学会添加表格、设置表格属性。（2）掌握设置表格中行和列属性的方法。（3）掌握拆分单元格，合并单元格的方法。（4）掌握在表格中输入文字并定位的方法。（5）掌握在表格中插入图像并定位的方法。网页浏览效果展示应用表格布局的网页04.html预览效果如图

2、所示。图7-1应用表格布局网页的预览效果本章操作任务（1）在“长沙世界之窗”网站文件夹中“04表格布局”中创建命名为“04.html”的网页，网页的标题为“长沙世界之窗的国际街”。（2）插入一张3行4列的表格，表格宽度设置为100％。（3）拆分单元格，合并单元格。（4）设置表格以及行、列、单元格的属性。（5）为单元格设置背景图像。（6）在表格的多个不同单元格中插入多幅图像。7.1.1　认识表格1．表格的组成元素表格的组成元素主要包括行、列、单元格。（1）单元格：表格中的每一个小格称为一个单元格。（2）行：水平方向的一排单元格称为一行。（3）

3、列：垂直方向的一排单元格称为一列。（4）边框：整张表格的外边缘称为边框。（5）间距：指单元格与单元格之间的距离。（1）利用表格布局网页中的文字、图像等页面元素（2）利用表格合成尺寸较大的图像（3）应用表格存储文本或数据，便于对数据进行排序2．表格的应用在“长沙世界之窗”网站文件夹“04表格布局”中创建命名为“04.html”的网页，该网页利用表格布局页面元素，具体操作过程如下。7.1.2表格的基本操作（1）启动Dreamweaver8，切换到“长沙世界之窗”站点。如果该站点不存在，则新建一个名为“长沙世界之窗”的站点。（2）在站点下创建子文

4、件夹“04表格布局”，在“04表格布局”文件夹中创建子文件夹“image”，并将所需图像复制到该文件夹下。1．新建网页（3）在Dreamweaver8主窗口中，单击菜单【文件】→【新建】，打开“新建文档”对话框，在“常规”选项卡中，“类别”列表框中选择“基本页”，“基本页”列表框中选择“HTML”，单击【创建】按钮，该站点下一个名为“Untitled-1”文档便创建。单击标准工具栏上的【保存】按钮，打开“另存为”对话框，保存位置为“04表格布局”，文件名为“04.html”，单击【保存】按钮，保存该网页文档。（4）设置网页标题，在文档工具栏

5、的“标题”文本框直接输入文档标题“长沙世界之窗的国际街”即可，如图7-3所示。如果需要设置网页的其他页面属性，单击“属性”面板【页面属性】按钮，打开“页面属性”对话框，在该对话框中设置页面属性即可，这里暂不设置其他属性。（5）保存该网页。（1）打开网页04.html，将光标置于网页文档04.html第一行的最左端，在Dreamweaver8主窗口中，单击菜单【插入】→【表格】。（2）对“表格”对话框中的各个参数进行设置2．插入表格在“行数”文本框中输入“3”，在“列数”文本框中输入“4”。在“表格宽度”文本框输入“100%”，其后的下拉列表

6、框中选择宽度的单位为“百分比”。（2）对“表格”对话框中的各个参数进行设置在“边框粗细”文本框中指定表格边框的宽度，默认值为1，单位为像素。如果在游览器中浏览时要使表格不显示边框，将“边框粗细”设置为0。在“单元格边距”中设置单元格边框与单元格内容之间的距离。这里设置为2。在“单元格间距”中设置相邻的表格单元格之间的距离。这里设置为3。在“页眉”选项组定义页眉样式，可以在四种样式中选择一种，这里选择“无”。在“辅助功能”选项组中可以设置表格的标题、表格标题相对于表格的对齐方式以及备注文本。这里均使用默认的设置。“表格”对话框中的设置结果如图

7、7-4所示，设置完成后单击【确定】按钮，一个3行4列的表格就插入到页面了，如图7-5所示。在进行表格操作之前，我们必须首先选定被操作的对象，对于表格而言，可以选定整个表格、单行、单列、多行、多列、连续或不连续的单元格。3．选择表格和表格元素（1）选择整个表格选择整个表格有多种方法：方法之一：用鼠标指向表格边框线，若出现红色外框线，单击鼠标左键即可选中整个表格。方法之二：将鼠标光标置于表格的边框线上，当光标变成双成箭头形状或时，单击可以选中整个表格。方法之三：用鼠标单击标识表格宽度的数字，然后在弹出的菜单中单击【选择表格】菜单项即可选中整个表

8、格。方法之四：先将光标置于表格任一个单元格中，用鼠标单击状态栏中的