边做边学——Dreamweaver CS3网页设计案例教程教学课件 作者 官辛华 05.ppt

本章简介： 表格是网页设计中一个非常有用的工具，它不仅可以将相关数据有序地排列在一起，还可以精确地定位文字、图像等网页元素在页面中的位置，使得页面在形式上既丰富多彩又条理清楚，在组织上井然有序而不显单调。使用表格进行页面布局的最大好处是，即使浏览者改变计算机的分辨率也不会影响网页的浏览效果。因此，表格是网站设计人员必须掌握的工具。表格运用得是否熟练，是划分专业制作人士和业余爱好者的一个重要标准。 * 第5章　使用表格 课堂学习目标 表格的简单操作 网页中的数据表格 利用表格进行页面布局 5.1　咖啡机专卖网页 案例分析 设计理念 操作步骤 相关工具 5.1.1　案例分析 酿制一杯完美的咖啡，需要借助专门的咖啡机来完成。利用因特网可以足不出户地在网上了解咖啡机的种类和价格。因此，在咖啡机销售网页设计上要根据功能需求，合理进行布局和制作，体现出咖啡的口感和文化特色。 5.1.2　设计理念 在网页设计、制作过程中，将淡雅的浅咖啡色和咖啡机设计为背景图案，表现出咖啡机的品质和咖啡的香浓美味。咖啡色的导航条更为网页的主题增色不少。右下方的图片是咖啡机专卖产品的展示效果，整体设计浪漫温馨，使浏览者能沉浸在咖啡的香气中。 咖啡机专卖网页效果图 5.1.3　操作步骤 1 2 3 4 5.1.4　相关工具 表格的组成 表格中包含行、列、单元格、表格标题等元素。 效果图 表格的标题 名称 2.插入表格 要将相关数据有序地组织在一起，必须先插入表格，然后才能有效地组织数据。 插入表格的具体操作步骤如下： （1）在“文档”窗口中，将插入点放到合适的位置。 （2）通过以下几种方法启用“表格”对话框。 选择“插入记录 表格”命令。 单击“插入”面板“常用”选项卡上的“表格”按钮。 单击“插入”布局“布局”选项卡面板上的“表格”按钮。 （3）根据需要选择新建表格的大小、行列数值等，单击“确定”按钮完 成新建表格的设置。 3.表格各元素的属性 插入表格后，通过选择不同的表格对象，可以在“属性”面板中看到它们的各项参数，修改这些参数可以得到不同风格的表格。 表格的属性 单元格和行或列的属性 4.在表格中插入内容 建立表格后，可以在表格中添加各种网页元素，如文本、图像、表格等。在表格中添加元素的操作非常简单，只需根据设计要求选定单元格，然后插入网页元素即可。一般当表格中插入内容后，表格的尺寸会随内容的尺寸自动调整。当然，还可以利用单元格的属性来调整其内部元素的对齐方式、单元格的大小等。 输入文字 插入其他网页元素 5.选择表格元素 先选择表格元素，然后对其进行操作。用户一次可以选择整个表格、多行或多列，也可以选择一个或多个单元格。 选择整个表格 选择行或列 选择单元格 选择一个矩形块区域 选择不相邻的单元格 6.复制、粘贴表格 在Dreamweaver CS3中复制表格的操作如同在Word中一样，可以对表格中的多个单元格进行复制、剪切、粘贴操作，并保留原单元格的格式，也可以仅对单元格的内容进行操作。 复制单元格 剪切单元格 粘贴单元格 粘贴操作的几点说明 7.删除表格和表格内容 删除表格的操作包括删除行或列，清除表格内容。 清除表格内容 删除行或列 8.缩放表格 创建表格后，可根据需要调整表格、行和列的大小。 缩放表格 修改行或列的大小 9.合并和拆分单元格 有的表格项需要几行或几列来说明，这时需要将多个单元格合并，生成一个跨多个列或行的单元格。 合并单元格 拆分单元格 10.增加和删除表格的行和列 在实际工作中，随着客观环境的变化，表格中的项目也需要做相应的调整，通过选择“修改 表格”中的相应子菜单命令，可添加、删除行或列。 插入单行或单列 插入多行或多列 5.1.5 实战演练-音乐世界网页 使用“表格”按钮插入表格，使用“属性”面板改变单元格的大小，使用“图像”按钮插入图像布局网页。 效果图 5.2　设计师家园网页 案例分析 设计理念 操作步骤 相关工具 5.2.1　案例分析 设计师家园网是在