Dreamweaver CC 06章 掌握页面布局—使用表格.pptVIP

本章简介： 表格是网页设计中一个非常有用的工具，它不仅可以将相关数据有序地排列在一起，还可以精确地定位文字、图像等网页元素在页面中的位置，使得页面在形式上既丰富多彩又条理清楚，在组织上井然有序而不显单调。使用表格进行页面布局的最大好处是，即使浏览者改变计算机的分辨率也不会影响网页的浏览效果。因此，表格是网站设计人员必须掌握的工具。表格运用得是否熟练，是划分专业制作人士和业余爱好者的一个重要标准。 项目6 掌握页面布局—使用表格 学习引导 ? 知识目标 能力目标 情感目标 学习目标 1、掌握表格插入方法。 2、了解表格式数据的应用。 1、熟练掌握表格的应用及属性设置。 2、掌握表格布局的应用。 培养对表格布局应用。 实训项目 1、制作租车网页 2、制作典藏博物馆网页 任务6.1 制作租车网页 任务引入 设计理念 任务知识 任务实施 扩展实践 6.1.1 任务引入 CAR是一家大型出租车公司，公司提供价格车型查询、自驾短租、自驾长租、预约租车等多项服务。现要为公司设计制作网站，要求重点突出新款的优惠活动以及平台完善的服务模式。 6.1.2　设计理念 在网页设计和制作过程中，使用实景照片作为网页的背景图，整体画面色彩丰富，能够让人感受到自由出行给人带来的好心情，更体现出平台车型的多样和丰富；简洁干净的图文搭配使用户在浏览网页时能够迅速抓住重点。 效果图 6.1.3　任务知识：插入表格、设置表格属性 1．表格的组成 表格中包含行、列、单元格、表格标题等元素。 6.1.3　任务知识：插入表格、设置表格属性 2．插入表格 与传统意义的表格作用一样，在Dreamweaver CC 2019中插入表格，是有效组织数据的最佳手段。 “Table”对话框 6.1.3　任务知识：插入表格、设置表格属性 3．表格各元素的属性 插入表格后，通过选择不同的表格对象，可以在“属性”面板中看到它们的各项参数，修改这些参数可以得到不同风格的表格。 表格的属性 单元格、行、列的属性 6.1.3　任务知识：插入表格、设置表格属性 4．在表格中插入内容 建立表格后，可以在表格中添加各种网页元素，如文本、图像和表格等。在表格中添加元素的操作非常简单，只需根据设计要求选定单元格，然后插入网页元素即可。一般当表格中插入内容后，表格的尺寸会随内容的尺寸自动调整。当然，还可以利用单元格的属性来调整其内部元素的对齐方式和单元格的大小等。 输入文字 插入其他网页元素 6.1.3　任务知识：插入表格、设置表格属性 5．选择表格元素 表格中的元素需要先选中然后才能对其进行操作。可以选择整个表格、多行或多列，也可以选择一个或多个单元格。 ◎ 选择整个表格 ◎ 选择行或列 ◎ 选择单元格 ◎ 选择一个矩形区域 ◎ 选择不相邻的单元格 6.1.3　任务知识：插入表格、设置表格属性 6．复制、剪切、粘贴表格 在Dreamweaver CC 2019中复制表格的操作如同在Word中一样，可以对表格中的多个单元格进行复制、剪切、粘贴操作，并保留原单元格的格式，也可以仅对单元格的内容进行操作。 复制单元格 剪切单元格 粘贴单元格 粘贴操作的几点说明 6.1.3　任务知识：插入表格、设置表格属性 7．清除内容和删除行或列 删除表格的操作包括删除行或列，以及清除表格内容。 清除表格内容 删除行或列 6.1.3　任务知识：插入表格、设置表格属性 8．缩放表格 创建表格后，可根据需要调整表格、行和列的大小。 缩放表格 修改行或列的大小 6.1.3　任务知识：插入表格、设置表格属性 9．合并和拆分单元格 合并单元格 有的表格项需要几行或几列来说明，这时需要将多个单元格合并，生成一个跨多个列或行的单元格。 拆分单元格 有时为了满足设计的需要，要将一个表格项分成多个单元格以详细显示不同的内容，就必须将单元格进行拆分。 6.1.3　任务知识：插入表格、设置表格属性 10．增加表格的行和列 如果想增加网页中表格的内容，不需要重新插入新表格，通过选择“编辑 表格”中的相应子菜单命令，添加行或列，即可加入新的内容。 插入单行或单列 插入多行或多列 6.1.4　任务实施 1 2 3 4 6.1.5　扩展实践：制作信用卡网页 使用“Table”按钮，插入表格；使用“Image”按钮，插入图像；使用“CSS设计器”面板为单元格添加背景图像及控制文字大小、颜色。 效果图 任务6.2 制作典藏博物馆网页 任务引入 设计理念 任务知识 任务实施 扩展实践 6.2.1 任务引入 典藏是一家以征集、陈列和研究文化遗产的场所