网页设计与制作案例教程电子教案9.pptxVIP

7.1　使用表格布局网页;（1）学会添加表格、设置表格属性。 （2）掌握设置表格中行和列属性的方法。 （3）掌握拆分单元格，合并单元格的方法。 （4）掌握在表格中输入文字并定位的方法。 （5）掌握在表格中插入图像并定位的方法。;网页浏览效果展示 ; 本章操作任务 ; （4）设置表格以及行、列、单元格的属性。 （5）为单元格设置背景图像。 （6）在表格的多个不同单元格中插入多幅图像。;7.1.1　认识表格; （3）列：垂直方向的一排单元格称为一列。 （4）边框：整张表格的外边缘称为边框。 （5）间距：指单元格与单元格之间的距离。 ; （1）利用表格布局网页中的文字、图像等页面元素 （2）利用表格合成尺寸较大的图像 （3）应用表格存储文本或数据，便于对数据进行排序; 在“长沙世界之窗”网站文件夹“04表格布局”中创建命名为“04.html”的网页，该网页利用表格布局页面元素，具体操作过程如下。 ; （1）启动Dreamweaver 8，切换到“长沙世界之窗”站点。如果该站点不存在，则新建一个名为“长沙世界之窗”的站点。 （2）在站点下创建子文件夹“04表格布局”，在“04表格布局”文件夹中创建子文件夹“image”，并将所需图像复制到该文件夹下。 ; （3）在Dreamweaver 8主窗口中，单击菜单【文件】→【新建】，打开“新建文档”对话框，在“常规”选项卡中，“类别”列表框中选择“基本页”，“基本页”列表框中选择“HTML”，单击【创建】按钮，该站点下一个名为“Untitled-1”文档便创建。单击标准工具栏上的【保存】按钮，打开“另存为”对话框，保存位置为“04表格布局”，文件名为“04.html”，单击【保存】按钮，保存该网页文档。 ; （4）设置网页标题，在文档工具栏的“标题”文本框直接输入文档标题“长沙世界之窗的国际街”即可，如图7-3所示。如果需要设置网页的其他页面属性，单击“属性”面板【页面属性】按钮，打开“页面属性”对话框，在该对话框中设置页面属性即可，这里暂不设置其他属性。 （5）保存该网页。 ; （1）打开网页04.html，将光标置于网页文档04.html第一行的最左端，在Dreamweaver 8主窗口中，单击菜单【插入】→【表???】。 （2）对“表格”对话框中的各个参数进行设置; 在“行数”文本框中输入“3”，在“列数”文本框中输入“4”。 在“表格宽度”文本框输入“100%”，其后的下拉列表框中选择宽度的单位为“百分比”。;在“边框粗细”文本框中指定表格边框的宽度，默认值为1，单位为像素。如果在游览器中浏览时要使表格不显示边框，将“边框粗细”设置为0。 在“单元格边距”中设置单元格边框与单元格内容之间的距离。这里设置为2。 ;在“单元格间距”中设置相邻的表格单元格之间的距离。这里设置为3。 在“页眉”选项组定义页眉样式，可以在四种样式中选择一种，这里选择“无”。 ;在“辅助功能”选项组中可以设置表格的标题、表格标题相对于表格的对齐方式以及备注文本。这里均使用默认的设置。 “表格”对话框中的设置结果如图7-4所示，设置完成后单击【确定】按钮，一个3行4列的表格就插入到页面了，如图7-5所示。 ; 在进行表格操作之前，我们必须首先选定被操作的对象，对于表格而言，可以选定整个表格、单行、单列、多行、多列、连续或不连续的单元格。 ;（1）选择整个表格 选择整个表格有多种方法： 方法之一：用鼠标指向表格边框线，若出现红色外框线，单击鼠标左键即可选中整个表格。; 方法之二：将鼠标光标置于表格的边框线上，当光标变成双成箭头形状或时，单击可以选中整个表格。; 方法之三：用鼠标单击标识表格宽度的数字，然后在弹出的菜单中单击【选择表格】菜单项即可选中整个表格。 ; 方法之四：先将光标置于表格任一个单元格中，用鼠标单击状态栏中的table标签也可以选中整个表格。;（2）选择单行或者单列 将鼠标指向某一行的左边线或某一列的上边线，当鼠标指针变成一个黑色箭头形状时，单击鼠标左键即可选中单行或者单列。 ;（3）选择连续的多行或多列 将鼠标指向某一行的左边线或某一列的上边线，当鼠标指针变成一个黑色箭头形状时，单击鼠标左键并且拖动鼠标即可选中相邻的多行或多列。 ;（4）选择不连续的多行或多列 先选择一行或者一列，然后按住“Ctrl”键依次在表格的左边线或上边线单击鼠标左键即可选择不连续的多行或多列。;（5）选择一个单元格 按住“Ctrl”键，用鼠标单击任一单元格即可选中一个单元格。;（6）选择连续的单元格 先将光标置于一个单元格中，然后按住鼠标左键并拖动鼠标横向或纵向移动，可以选择多个连续的单元格。也可以先将光标