Dreamweaver网页制作教程 第4章 表格和布局.ppt

第第4章表格和布局章表格和布局课前复习课前复习n n图像文件的类型n n插入图像和设置图像属性n n插入鼠标经过图像n n插入导航条n n创建网站相册本章要点本章要点n n插入表格n n设置表格属性n n选择表格n n使用表格n n插入布局表格n n插入布局单元格 n n使用布局表格4.1插入表格插入表格 4.1.14.1.1插入表格并设置表格的属性插入表格并设置表格的属性n n插入菜单插入菜单 表格命令。表格命令。n n在插入栏中的在插入栏中的“常用常用”选项卡中，单击表格选项卡中，单击表格按钮按钮 n n设置表格对话框选项设置表格对话框选项 例例4-1 4-1（4_1.htm4_1.htm）插入一个）插入一个4 4行行3 3列，宽为列，宽为200200（像（像素）高为素）高为120120（像素），边框为（像素），边框为1 1，边距为，边距为2 2，间框为间框为2 2的表格。的表格。4.1.2导入和导出表格式数据导入和导出表格式数据 1 1导入表格数据，执行以下操作：导入表格数据，执行以下操作：1 1）执行下列操作之一：）执行下列操作之一：选择文件菜单选择文件菜单 导入导入 表格式数据命令。表格式数据命令。选择插入选择插入 表格对象表格对象 导入表格式数据。导入表格式数据。即会出现即会出现“导入表格式数据导入表格式数据”对话框。如图对话框。如图4-4 4-4 所示。所示。2 2）在该对话框中，输入有关包含数据的文件的信息。）在该对话框中，输入有关包含数据的文件的信息。3 3）单击确定。）单击确定。2 2导出表格，执行以下操作：导出表格，执行以下操作：1 1）将插入点放置在表格中的任意单元格中。）将插入点放置在表格中的任意单元格中。2 2）选择文件）选择文件 导出导出 表格。表格。即会出现导出表格对话框。如图即会出现导出表格对话框。如图4-54-5所示。所示。3 3）在导出表格对话框中，指定导出表格的选项。）在导出表格对话框中，指定导出表格的选项。定界符指定应该使用哪个分定界符指定应该使用哪个分隔符字符在导出的文件中隔开各项。隔符字符在导出的文件中隔开各项。4 4）单击）单击“导出导出”。即会出现即会出现“导出表格为导出表格为”对话框。对话框。5 5）输入文件名称。）输入文件名称。6 6）单击保存。）单击保存。例例4-2(4_2.html)导入表格数据。导入表格数据。1)打开Excel建立工作表book1，选取数据区域，另存为book.txt(制表符分隔的文本文件)。2）在Dreamweaver 中，选择文件菜单导入表格式数据命令3）在导入表格式数据对话框中，选择文本文件book.txt4)单击确定。4.2选取表格选取表格 4.2.1 选择整个表格4.2.2 选择行或列 4.2.3选择单元格 4.3设置表格属性设置表格属性 4.3.14.3.1表格属性表格属性4.3.2 4.3.2 单元格属性单元格属性 4.4表格的操作表格的操作4.4.1 4.4.1 插入行和列插入行和列1.1.添加单个行或列添加单个行或列 2.2.添加多行或多列添加多行或多列 4.4.2 4.4.2 删除行或列删除行或列4.4.3 4.4.3 拆分单元格拆分单元格 4.3.4 4.3.4 合并单元格合并单元格4.3.54.3.5复制、粘贴复制、粘贴 例例例例4-3 4-3（4_3.html4_3.html）插入如图）插入如图）插入如图）插入如图4-164-16所示的课程表格所示的课程表格所示的课程表格所示的课程表格 1 1）在）在DreamweaverDreamweaver中按中按Ctrl+Alt+TCtrl+Alt+T，弹出插入表格，弹出插入表格的对话框，如图。的对话框，如图。2)2)设置表格属性，表格高为设置表格属性，表格高为210210，具中对齐方式。，具中对齐方式。背景色为背景色为#99CCFF#99CCFF。3 3）选择条一行的第）选择条一行的第2-52-5单元格，单击合并单元格按单元格，单击合并单元格按钮，合并单元格，其他类似操作。钮，合并单元格，其他类似操作。4)4)在表格内的单元格内输入文字。完成表格。在表格内的单元格内输入文字。完成表格。4.5调整表格调整表格 4.5.1 4.5.1 调整表格大小调整表格大小 n n在水平方向调整表格的大小，在水平方向调整表格的大小，拖动右边的选择柄。拖动右边的选择柄。n n在垂直方向调整表格的大小，在垂直方向调整表格的大小，拖动底部的选择柄。拖动底部的选择柄。n n在两个方向调整表格的大小，在两个方向调整表格的大小，拖动右下角的选择柄。拖动右下角的选择柄。4.5.2 4.5.2 调整列和行的大小调整列和行的大小 1 1更改列宽度并保持整个表的宽更改列宽度并保持整个表的宽度不变，拖动想更改的列的右度不变，拖动想更改的列的右边框。边框。2 2更改某个列的宽度并保持其他更改某个列的宽度并保持其他列的大小不变，按住列的大小不变，按住 Shift Shift 键，键，然后拖动列的边框。然后拖动列的边框。4.6嵌套表格嵌套表格 嵌套表格是在另一个表格的单元格中的表格。可以嵌套表格是在另一个表格的单元格中的表格。可以像对任何其他表格一样对嵌套表格进行格式设置；像对任何其他表格一样对嵌套表格进行格式设置；但是，其宽度受它所在单元格的宽度的限制。但是，其宽度受它所在单元格的宽度的限制。1)1)单击现有表格中的一个单元格。单击现有表格中的一个单元格。2)2)选择插入选择插入 表格。表格。即会出现插入表格即会出现插入表格对话框。对话框。3)3)完成对话框。完成对话框。4)4)单击确定。单击确定。该表格即出现在现有表格中。该表格即出现在现有表格中。4.7排序表格排序表格 可以根据单个列的内容对表格中的行进行排序。还可以根据单个列的内容对表格中的行进行排序。还可以根据两个列的内容执行更加复杂的表格排可以根据两个列的内容执行更加复杂的表格排序。不能对包含合并单元格的表格进行排序。序。不能对包含合并单元格的表格进行排序。1)1)选择该表格或单击任意单元格。选择该表格或单击任意单元格。2)2)选择选择“命令命令”“排序表格排序表格”。3)3)设置排序表格对话框选项。设置排序表格对话框选项。4)4)单击确定。单击确定。例例4-4(4_4.html)4-4(4_4.html)绘制如图绘制如图4-234-23的成绩表格。按第三列的成绩表格。按第三列成绩升序排序。成绩升序排序。4.8使用设计方案对表格进行格式设置使用设计方案对表格进行格式设置 使用表格格式设置命令将预先设置的设计快速应用到表使用表格格式设置命令将预先设置的设计快速应用到表格。然后，可以选择选项进一步自定义该设计。格。然后，可以选择选项进一步自定义该设计。只有简单的表格才能使用预先设置的设计进行格式设置。不只有简单的表格才能使用预先设置的设计进行格式设置。不能使用这些设计对包含合并单元格、列组或任何其他表格能使用这些设计对包含合并单元格、列组或任何其他表格的表格进行格式设置。的表格进行格式设置。例例4-5 4-5（4_5.html4_5.html）使用预先设置的表格设计）使用预先设置的表格设计1 1）选择表格。）选择表格。2 2）选择）选择“命令命令”“表格格式设置表格格式设置”。即会出现即会出现“表格格式表格格式设置设置”对话框。对话框。3 3）按需要自定义选项。）按需要自定义选项。如选择如选择AltRowsAltRows red red格式格式4 4）单击应用或确定用所选的设计对表格进行格式设）单击应用或确定用所选的设计对表格进行格式设置。置。例例4-6(4-6.html)创建基于表格的页面布局创建基于表格的页面布局操作步骤操作步骤1 1）插入第）插入第1 1个表格个表格(1(1行行1 1列，列，宽宽700)700)。2 2）在表格下方插入第）在表格下方插入第2 2个表个表格格(1(1行行8 8列，宽列，宽700)700)。3 3）在表格下方插入第）在表格下方插入第3 3个表个表格（格（1 1行行3 3列，宽列，宽700700）。将）。将第第2 2列分开为列分开为2 2行。行。4 4）在表格下方插入第）在表格下方插入第4 4个表个表格格(宽宽700700，1 1行行1 1列列)。如图。如图4-294-29所示。所示。4.8 在布局模式对页进行布局在布局模式对页进行布局4.8.1“标准”模式和“布局”模式切换到“布局”模式切换出布局模式4.9.2 在布局模式中绘制在布局模式中绘制单元格和表格单元格和表格绘制布局单元格绘制布局单元格单击绘制布局单元格按钮单击绘制布局单元格按钮 ,拖动指针以创建布拖动指针以创建布局表格。局表格。绘制布局表格绘制布局表格 单击绘制布局表格按钮单击绘制布局表格按钮 ,拖动指针以创建布局拖动指针以创建布局表格。表格。3 3嵌套布局表格嵌套布局表格 单击单击“绘制布局表格绘制布局表格”按钮。按钮。指向现有布局表格中的空白（灰色）区域，然后拖指向现有布局表格中的空白（灰色）区域，然后拖动指针以创建嵌套布局表格。动指针以创建嵌套布局表格。4 4在现有布局单元格或表格周围绘制布局表格在现有布局单元格或表格周围绘制布局表格4.9.3 将内容添加到布局单元格中将内容添加到布局单元格中 1 1将文本添加到布局单元格将文本添加到布局单元格1 1）将插入点放置在要添加文本的布局单元格中。）将插入点放置在要添加文本的布局单元格中。2 2）在单元格中键入文本。在单元格中键入文本。当进行键入时，单元格当进行键入时，单元格将按需要自动扩展，或粘贴从其他文档复制的文将按需要自动扩展，或粘贴从其他文档复制的文本。本。2 2将图像添加到布局单元格中将图像添加到布局单元格中1 1）将插入点放置在要添加图像的布局单元格中。）将插入点放置在要添加图像的布局单元格中。2 2）选择选择“插入插入”“图像图像”。或在。或在“插入插入”栏的栏的“常用常用”类别中，单击类别中，单击“图像图像”按钮上的箭头，然按钮上的箭头，然后选择后选择“图像图像”。4.9.4 调整布局单元格和表格的大小以及移动调整布局单元格和表格的大小以及移动 1 1调整布局单元格的大小调整布局单元格的大小 1 1）选择一个单元格，方法是单击该单元格的边缘，或者在按住）选择一个单元格，方法是单击该单元格的边缘，或者在按住 Ctrl Ctrl 键的同时单键的同时单击该单元格中的任何位置。该单元格周围出现选择控制点。击该单元格中的任何位置。该单元格周围出现选择控制点。2 2）拖动选择控制点来调整单元格的大小。如图）拖动选择控制点来调整单元格的大小。如图4-35 4-35 所示。所示。2 2移动布局单元格移动布局单元格 1 1）选择一个单元格，方法是单击该单元格的边缘，或者在按住）选择一个单元格，方法是单击该单元格的边缘，或者在按住 Ctrl Ctrl 键的同时单键的同时单击该单元格中的任何位置。击该单元格中的任何位置。该单元格周围出现选择控制点。该单元格周围出现选择控制点。2 2）将该单元格拖到其布局表格中的另一个位置。或按箭头键移动该单元格，每将该单元格拖到其布局表格中的另一个位置。或按箭头键移动该单元格，每次移动次移动 1 1 个像素。（个像素。（在按住在按住 Shift Shift 键的同时按箭头键移动该单元格，每次键的同时按箭头键移动该单元格，每次 10 10 个像素。）个像素。）3 3调整布局表格的大小调整布局表格的大小.1.1）通过单击表格顶部的标签选择一个表格。）通过单击表格顶部的标签选择一个表格。该表格周围出现选择控制点。该表格周围出现选择控制点。2)2)拖动选择控制点来调整表格的大小。拖动选择控制点来调整表格的大小。表格边缘与其他单元格和表格的边缘自表格边缘与其他单元格和表格的边缘自动靠齐。动靠齐。4 4移动布局表格移动布局表格1 1）通过单击表格顶部的标签选择一个表格。该表格周围出现选择控制点。）通过单击表格顶部的标签选择一个表格。该表格周围出现选择控制点。2 2）将表格拖到页上的另一个位置。或按箭头键移动该表格，每次移动将表格拖到页上的另一个位置。或按箭头键移动该表格，每次移动 1 1 个像素。个像素。（在按住在按住 Shift Shift 键的同时按箭头键移动该单元格，每次键的同时按箭头键移动该单元格，每次 10 10 个像素。）个像素。）只有当布局表格嵌套在另一个布局表格中时，才可以移动该布局表格。只有当布局表格嵌套在另一个布局表格中时，才可以移动该布局表格。4.9.5设置布局单元格的格式设置布局单元格的格式1 1选择一个单元格选择一个单元格2 2打开打开“属性属性”检查器检查器 3.3.通过设置属性更改单元格的格式设置。通过设置属性更改单元格的格式设置。4.9.6设置布局表格的格式设置布局表格的格式1 1通过单击表格顶部的标签选择一个表格。通过单击表格顶部的标签选择一个表格。2.2.打开打开“属性属性”检查器检查器 3 3通过设置属性更改表格的格式设置通过设置属性更改表格的格式设置 4.9.7设置列宽度设置列宽度表格中的列可以具有固定的宽度或自动延伸。表格中的列可以具有固定的宽度或自动延伸。在布局完成之前让某个列自动伸展可能会对表格布在布局完成之前让某个列自动伸展可能会对表格布局产生无法预料的效果。为了防止列变得出乎意局产生无法预料的效果。为了防止列变得出乎意料的宽或窄，在让某个列自动伸展之前，先创建料的宽或窄，在让某个列自动伸展之前，先创建完整的布局，并在使列自动伸展时使用间隔图像。完整的布局，并在使列自动伸展时使用间隔图像。（但是，如果每个列都包含其他内容，可以使该（但是，如果每个列都包含其他内容，可以使该列保持所需的宽度，则无需使用间隔图像。）列保持所需的宽度，则无需使用间隔图像。）1 1）使列自动伸展）使列自动伸展2 2）设置为固定宽度）设置为固定宽度例例4-7(4_7.html)绘制如图绘制如图4-39所示的所示的布局表格和布局单元格。布局表格和布局单元格。操作步骤如下：操作步骤如下：1 1）建立站点和网页。）建立站点和网页。2 2）在插入栏的布局类别中单击布局模式按钮。）在插入栏的布局类别中单击布局模式按钮。3 3）在第）在第1 1行行插入第插入第1 1个个宽宽780780的的单元格。插入图像单元格。插入图像j1.jpgj1.jpg。4)4)在第在第2 2行行插入第插入第2 2个个宽宽780780的的单元格。插入单元格。插入FlashFlash对象对象banner3.swfbanner3.swf。5 5）在第）在第3 3行行插入第插入第3 3个个宽宽780780的的单元格。并单元格。并在插入栏的布局类别在插入栏的布局类别中单击标准模式按钮。中单击标准模式按钮。6)6)在第在第3 3个个宽宽780780的的单元格内插入单元格内插入1 1行行(宽宽100%)9100%)9列的表格，建立用于导航列的表格，建立用于导航的表格，在表格各单元格内插入文字的表格，在表格各单元格内插入文字(首页首页 厦门特产厦门特产 魅力厦门魅力厦门 特产特产展示展示 茶叶专区厦门旅游我要购买茶叶专区厦门旅游我要购买 加盟合作加盟合作 联系我们联系我们)。并。并在插在插入栏的布局类别中单击布局模式按钮入栏的布局类别中单击布局模式按钮7)7)在第在第4 4行行并排插入第并排插入第4 4、5 5、6 6个单元格（个单元格（3 3个个单元格的单元格的宽合计宽合计为为780780的的）。）。(1)(1)在第在第4 4个单元格内插入图像个单元格内插入图像g.gifg.gif。(2)(2)在第在第5 5个单元格内插入图像个单元格内插入图像g6.jpgg6.jpg，右对齐，右对齐 。插入文本。插入文本。(3)(3)在第在第6 6个单元格内插入图像个单元格内插入图像g2.gifg2.gif，右对齐。插入文本。，右对齐。插入文本。8)8)在第在第5 5行行并排插入第并排插入第7 7、8 8个单元格（个单元格（2 2个个单元格的单元格的宽合计宽合计为为780780的的）。）。(1)(1)在第在第7 7个单元格内插入文本。个单元格内插入文本。(2)(2)在第在第8 8个单元格内插入图像个单元格内插入图像ind_03a.jpg ind_03a.jpg。9 9）在第）在第6 6行行并排插入第并排插入第9 9、1010个单元格（个单元格（2 2个个单元格的单元格的宽合计宽合计为为780780的的）。）。1010）在第在第9 9个单元格内插入图像个单元格内插入图像jj1-1.gifjj1-1.gif。1111）单击标准模式按钮）单击标准模式按钮,在第在第1010个单元格内插入表格个单元格内插入表格(4(4行行6 6列列)。在表格。在表格内分别插入图像和文字，并设置对齐方式。注意将图像设置成宽内分别插入图像和文字，并设置对齐方式。注意将图像设置成宽9090高高116116并重新取样。保存。并重新取样。保存。1212）在第在第7 7行行并排插入并排插入宽宽780780的的单元格。插入文字，并具中对齐。单元格。插入文字，并具中对齐。1313）设置文字大小。）设置文字大小。14)14)将各行的表格（单元格将各行的表格（单元格 ）具中对齐。）具中对齐。4.9本章小结本章小结 本章介绍插入表格和编辑表格的方法，要要求理解单元格，表格，间距，填充，边框的含义。重点的如何调整行和列的宽度、高度以及拆分和合并单元格的方法。思考与习题思考与习题 一、填空题一、填空题（2 2）DreamweaverDreamweaver提供了提供了3 3种方式来查看和操作表格，分别是种方式来查看和操作表格，分别是_。（5 5）确保浏览器显示的表格没有无边框，边框粗细是）确保浏览器显示的表格没有无边框，边框粗细是_。（6 6）在绘制布局表格或布局单元格之前，必须从）在绘制布局表格或布局单元格之前，必须从_模式切换到模式切换到_模式。模式。（7 7）如果不是在布局表格中绘制布局单元格，）如果不是在布局表格中绘制布局单元格，DreamweaverDreamweaver 会自动创建会自动创建一个一个_以容纳该单元格。布局单元格不能存在于以容纳该单元格。布局单元格不能存在于_之外。之外。二、简答题二、简答题(3)(3)简要说明选择整个表格的步骤。简要说明选择整个表格的步骤。(4)(4)简要说明插入行和列的步骤。简要说明插入行和列的步骤。(6)(6)简要说明拆分与合并单元格的步骤。简要说明拆分与合并单元格的步骤。(9)(9)简述在布局模式下如何绘制表格和单元格？简述在布局模式下如何绘制表格和单元格？本章小结本章小结 本章主要介绍了如何创建和设置本地站点；创建和本章主要介绍了如何创建和设置本地站点；创建和设置远程站点的方法；如何创建新的文档和文档设置远程站点的方法；如何创建新的文档和文档的属性设置。一般来说，应该直接在网站内创建的属性设置。一般来说，应该直接在网站内创建网页，或在创建网页之后将其保存在网站内，而网页，或在创建网页之后将其保存在网站内，而不要单独创建并随意保存网页。本章的重点是创不要单独创建并随意保存网页。本章的重点是创建网站和网页，在建网站和网页，在页面属性面板内页面属性面板内设置网页的属设置网页的属性，这种设置将作用于站点内的所有网页。本章性，这种设置将作用于站点内的所有网页。本章的难点创建和设置远程站点，理解远程站点作用，的难点创建和设置远程站点，理解远程站点作用，理解远程站点与本地站点之间的关系。理解远程站点与本地站点之间的关系。作业作业1 1填空题填空题1 1）Dreamweaver Dreamweaver 站点由三部分站点由三部分_组成组成。2 2）本地站点位于本地站点位于_上，也可以位上，也可以位于于_上。上。3 3）测试服务器是测试服务器是_的文件夹。的文件夹。4 4）一般说来，远端文件夹位于运行一般说来，远端文件夹位于运行 _上上。2 2简答题简答题1 1）若要更改页面标题如何如何操作？）若要更改页面标题如何如何操作？2 2）简述通过模板创建文档的方法？）简述通过模板创建文档的方法？3 3）简述创建和设置本地站点的步骤）简述创建和设置本地站点的步骤?