2.2制作“佳美馨装饰——会员列表”网页（课件）《Dreamweaver网页设计立体化教程（微课版）》（人民邮电出版社）

Dreamweaver 网页设计立体化教程（微课版）（Dreamweaver CC 2020） 项目二 添加文本与表格 1 目录 Contents 任务一 制作“佳美馨装饰——网站简介”网页 任务二 制作“佳美馨装饰——会员列表”网页 实训一 制作“中国皮影——皮影戏”网页 实训二 制作“中国皮影——皮影起源传说”网页 2 在制作本网页时，首先使用表格对网页进行布局，并通过不同的背景颜色区分出网页头部、尾部和主体部分。其中主体部分又被分为左右两个区域，在右侧区域中插入一个普通表格，为表头行（第1行单元格）设置醒目的背景颜色，并加粗、加大文本的字体，使其能够突出显示。 一、任务描述 （一）任务背景 （1）能够制作表格并在表格中输入内容 （2）掌握选择表格和单元格的各种方法。 （3）掌握设置表格和单元格格式的各种方法。 （4）掌握拆分和合并单元格的各种方法。 （5）掌握添加和删除表格行或列的各种方法。 （二）任务目标 3 二、相关知识 （一）插入表格 在Dreamweaver中插入表格的方法为：将插入点定位到要插入表格的位置，选择【插入】/【Table】菜单命令，或在“插入”面板中单击“Table”按钮，打开“Table”对话框，在其中设置相应的参数后，单击“确定”按钮。 插入表格 4 二、相关知识 （二）选择表格 1．选择整个表格 1．右键菜单选择 3．使用菜单命令选择 5．在“DOM”面板中选择 7．在“代码”视图中选择 6．在“标签”栏中选择 4．使用按钮选择 2．直接选择 5 二、相关知识 （二）选择表格 2．选择行 在Dreamweaver中选择表格的行的方法主要有以下3种。 通过鼠标单击选择行 在“标签”栏中选择行 在“代码”视图中选择行 6 二、相关知识 （二）选择表格 3．选择列 在Dreamweaver中选择表格的行的方法主要有以下几种。 通过鼠标单击选择列 使用按钮选择列 7 二、相关知识 （二）选择表格 4．选择单元格 选择单个单元格只需直接将插入点定位到需要选择的单元格。 选择单个单元格 选择多个不连续的单元格 选择多个连续的单元格 直接使用鼠标在表格中拖曳选择连续的多个单元格，或选择一个单元格后，按住【Shift】键不放，单击连续的最后一个单元格。 按住【Ctrl】键的同时，使用鼠标单击需要选择的单元格。 8 二、相关知识 （三）在单元格中输入内容 表格创建完成后，即可在单元格中添加文本、图像、动画等内容，方法为：将插入点定位到需要添加内容的单元格中，然后输入文本或插入图像等网页元素。 9 二、相关知识 （四）设置表格属性 通过表格“属性”面板可设置表格的属性，方法为：先选择整个表格，然后在“属性”面板中设置相关参数。 10 二、相关知识 （五）设置单元格属性 通过单元格“属性”面板可以设置单元格的属性，方法为：先选择要设置属性的单元格，然后在“属性”面板中设置相关参数。单元格“属性”面板的上半部分和文本“属性”面板相同，用于设置单元格中文本的格式，下半部分用于设置单元格的格式。 11 二、相关知识 （六）合并和拆分单元格 1．合并单元格 合并单元格的方法有以下 3 种方法： 使用菜单命令 选择要合并的单元格区域选择【编辑】/【表格】/【合并单元格】菜单命令。 使用右键菜单 选择要合并的单元格区域并单击鼠标右键，在弹出的快捷菜单选择【表格】/【合并单元格】命令。 使用“属性”面板 选择要合并的单元格区域，在“属性”面板中单击“合并所选单元格”按钮 。 12 二、相关知识 （六）合并和拆分单元格 2．拆分单元格 拆分单元格可以将一个单元格拆分为多个单元格。选择要拆分的单元格，然后选择【编辑】/【表格】/【拆分单元格】菜单命令或单击鼠标右键，在弹出的快捷菜单中选择【表格】/【拆分单元格】命令，或在“属性”面板中单击“拆分单元格为行或列”按钮。 拆分单元格 13 二、相关知识 （七）添加和删除表格行或列 1．添加行或列 添加行或列的方法主要有以下3种方法： 使用菜单命令 选择【编辑】/【表格】/【插入行】或【插入列】菜单命令。 使用右键菜单 单击鼠标右键，在弹出的快捷菜单中选择【表格】/【插入行】或【插入列】命令。 使用对话框 选择【编辑】/【表格】/【插入行或列】菜单命令，或单击鼠标右键，选择【表格】/【插入行或列】命令. 14 二、相关知识 （七）添加和删除表格行或列 2．删除行或列 表格中不能删除单独的单元格，但可以删除整行或整列，方法有以下两种。 使用菜单命令 将插入点定位到要删除的行或列所在的单元格，选择【编辑】/【表格】/【删除行】或【删除列】菜单命令。 使用右键菜单 将插入点定位到要删除的行或列所在的单元格，单击鼠标右键，在弹出的快捷菜单中选择【表格】/【删除行】或【删除列】命令。 15 三、任务实施 下面插入一个3行2列的无边框表格对网页进行布局，并根据需要合并单元格以及设置表格和单元格的格式，具体操作如下。 （一）插入表格并设置表格属性 插入表格 设置单元格的宽度和高度 16 三、任务实施 （一）插入表格并设置表格属性 设置第1行单元格的背景颜色 合并第3行单元格并设置背景颜色 17 三、任务实施 在各个单元格中输入相应的内容，并设置格式。 （二）输入表格内容 输入“JMX”文本 输入“佳美馨”文本 输入文本并设置对齐方式 输入文本 18 三、任务实施 （二）输入表格内容 修改文本颜色 输入版权信息 输入其他文本 19 三、任务实施 下面从“会员.txt”文件导入表格数据，然后设置表格首行单元格格式和表格的边框颜色，具体操作如下。 （三）导入表格数据并设置表格属性 导入表格式数据 20 三、任务实施 （三）导入表格数据并设置表格属性 设置首行单元格格式 设置表格边框颜色 21 目录 Contents 任务一 制作“佳美馨装饰——网站简介”网页 任务二 制作“佳美馨装饰——会员列表”网页 实训一 制作“中国皮影——皮影戏”网页 实训二 制作“中国皮影——皮影起源传说”网页 22 本实训的要求是制作“中国皮影——皮影戏”网页，在其中将展示皮影戏的相关介绍，完成后的效果如下图所示。 实训要求 实训一 制作“中国皮影——皮影戏”网页 对于纯文本的网页，可以选择一张与网页内容相适合的图片作为网页的背景，图像的颜色不易过多，图案不要过于繁杂，不然文本就不能清晰且突出地显示。 实训思路 “中国皮影——皮影戏”网页效果 23 实训一 制作“中国皮影——皮影戏”网页 步骤提示 要完成本实训，首先应新建网页并设置网页属性，然后输入文本，最后设置文本的格式。其步骤如图所示。 ① 设置网页属性 ② 输入文本 ③ 设置文本格式 24 目录 Contents 任务一 制作“佳美馨装饰——网站简介”网页 任务二 制作“佳美馨装饰——会员列表”网页 实训一 制作“中国皮影——皮影戏”网页 实训二 制作“中国皮影——皮影起源传说”网页 25 本实训的要求是制作“中国皮影——皮影起源传说”网页，在其中将展示皮影的起源传说，完成后的效果如图所示。 实训要求 实训二 制作“中国皮影——皮影起源传说”网页 本网页的主体部分有4个区域，每个区域都显示一个小故事，可以通过表格来对这部分进行布局。 实训思路 “中国皮影——皮影起源传说”网页效果 26 实训二 制作“中国皮影——皮影起源传说”网页 步骤提示 完成本实训主要包括插入表格、插入嵌套表格，以及输入表格内容3步操作，其步骤如图所示。  ① 插入表格 ② 插入嵌套表格 ③ 输入表格内容 27 Dreamweaver 网页设计立体化教程（微课版）（Dreamweaver CC 2020） 学习进步 28 海量图书方便查询 免费申请样书 下载配套资源 优惠购书 成为作者 更多样书申请和资源下载需求，请登录人邮教育社区（www.ryjiaoyu.com) 囊括各大品类，您想要的应有尽有 教师免费申请样书， 我们将安排快递迅速送达 教学视频、PPT课件、教学案例、 习题答案、模拟试卷等丰富资源 免费下载 教师可以申请最低折扣 学生直接优惠购买图书 欢迎写文章／投稿，我们强大的编辑团队将为您提供专业和高效的编辑出版服务 $$