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

这里在“宽”文本框中输入“750”，其右侧的单位选择“像素”，“边框”文本框中输入“1”，“填充”文本框中输入“2”，“间距”文本框中输入“0”，对齐方式选择“居中对齐”，“边框颜色”文本框中输入“#000000”，其他表格属性保存原有设置或默认值不变。 （2）设置单元格属性 通过“属性”面板可以单独设置某一个单元格的属性，将光标置于单元格中并单击鼠标左键。 （3）设置行、列属性 通过“属性”面板也可以设置某一行或一列中所有单元格的属性，先选中一行或一列，然后在“属性”面板中设置对应行或列中所有单元格的属性，设置方法及参数含义与设置单元格属性相似。 改变表格大小 改变行高或列宽 改变单元格大小 （4）调整表格的大小 （1）插入行或列 先选中要插入行或列的单元格，然后单击鼠标右键，在弹出的快捷菜单中单击菜单【表格】→【插入行】或【插入列】，就可以完成插入行或列的操作。 5．调整表格的结构 （2）删除行或列 如果要删除行或列，只需先选中要删除的行或列，然后单击鼠标右键，在弹出的快捷菜单中单击菜单【表格】→【删除行】或【删除列】，就可以完成删除行或列的操作。 （3）合并单元格 将图7-14中“A”、“B”、“C”、“D”四个单元格合并，将图中“I”、“J”、“K”、“L”四个单元格合并。合并单元格的操作方法如下： 选择需要合并的多个单元格：“A”、“B”、“C”、“D”四个单元格，注意所合并的单元格必须是连接的 单击“属性”面板上的“合并单元格”按钮，即可合并所选的单元格。 4）拆分单元格 将图中“E”单元格拆分为2行，拆分单元格的操作方法如下： 先将光标置于需要拆分的单元格中，例如“E”单元格中，然后单击“属性”面板上的“拆分单元格”按钮。 如果想将单元格拆分为多行，可以选中“行”单选按钮；如果想将单元格拆分为多列，则可以选中“列”单选按钮。这里选择“行”单选按钮。 在“行数/列数”数值框中，输入需要拆分的行或列的数值。这里输入“2” 设置完毕，单击【确定】按钮，选中的单元格就会按照设置被拆分。 （5）单元格的复制与粘贴 选择要复制或剪切的单元格，既可以选择一个单元格，也可以选择多个单元格，但要保证选中的单元格区域呈矩形。然后单击菜单【编辑】→【拷贝】或【剪切】，将选中的单元格复制或剪切到剪贴板中。 （6）嵌套表格 在图中的“E”单元格中插入一张7行1列的表格，在“G”单元格中插入一张5行3列的表格。插入嵌套表格的方法如下： * * 尚辅网 / 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　认识表格 1．表格的组成元素 表格的组成元素主要包括行、列、单元格。 （1）单元格：表格中的每一个小格称为一个单元格。 （2）行：水平方向的一排单元格称为一行。 （3）列：垂直方向的一排单元格称为一列。 （4）边框：整张表格的外边缘称为边框。 （5）间距：指单元格与单元格之间的距离。 （1）利用表格布局网页中的文字、图像等页面元素 （2）利用表格合成尺寸较大的图像 （3）应用表格存储文本或数据，便于对数据进行排序 2．表格的应用 在“长沙世界之窗”网站文件夹“04表格布局”中创建命名为“04.html”的网页，该网页利用表格布局页面元素，具体操作过程如下。 7.1.2　表格的基本操作 （1）启动Dreamweaver 8，切换到“长沙世界之窗”站点。如果该站点不存在，则新建一个名为“长沙世界之窗”的站点