《Dreamweaver CS5实例教程 第2版 习题答案 作者 管小清 祖宝明 05章》由会员分享，可在线阅读，更多相关《Dreamweaver CS5实例教程 第2版 习题答案 作者 管小清 祖宝明 05章（12页珍藏版）》请在金锄头文库上搜索。
1、 使用表格 5.4 课堂练习设计家园网页 【练习知识要点】使用“导入表格式数据”命令导入外部表格数据。使用“排序表格”命令将 表格的数据排序，如图 5-1 所示。 【效果所在位置】光盘/Ch05/效果/设计家园网页/index.html。 图 5-1 1. 导入表格式数据 （1）选择“文件 打开”命令，在弹出的对话框中选择“Ch05 素材 设计家园网页 index.html”文件，单击“打开”按钮，效果如图 5-2 所示。 Dreamweaver CS5 中文版实例教程 2 图 5-2 （2）将光标放置在要导入表格数据的位置，如图 5-3 所示。选择“插入 表格对象 导入 表格式数据”命令，弹
2、出“导入表格式数据”对话框。 （3）在对话框中单击“数据文件”选项右侧的“浏览”按钮，弹出“打开”对话框，在光盘 目录下的“Ch05 素材 设计家园网页 images”文件夹中选择文件“jianjie.txt” ，如图 5-4 所 示。 图 5-3 图 5-4 （4）单击“打开”按钮，返回到对话框中，在“定界符”选项的下拉列表中选择“逗点” ，如 图 5-5 所示，单击“确定”按钮，导入表格式数据，如图 5-6 所示。 图 5-5 图 5-6 第 5 章 使用表格 3 （5）保持表格的选取状态，在“属性”面板中，将“宽”选项设为 500， “填充” 、 “间距”和 “边框”选项均设为 0，在“
3、对齐”下拉列表中选择“居中对齐”选项，如图 5-7 所示，效果如图 5-8 所示。 图 5-7 图 5-8 （6）将鼠标置入到第 1 行第 1 列中，按住键的同时，单击表格的第 6 行第 4 列，将表 格的单元格全部选取中，如图 5-9 所示。 图 5-9 （7）在“属性”面板中将“水平”选项设为“居中对齐” ，将“垂直”选项设为“居中” ， “高” 选项设为 20，如图 5-10 所示，表格效果如图 5-11 所示。 图 5-10 图 5-11 （8）将导入表格的第 2 行单元格全部选中，如图 5-12 所示，在“属性”面板中，将“背景颜 色”选项设为灰色（#ececec） ，表格效果如图
4、5-13 所示。用相同的方法，将其他单元格设置相同 的背景颜色，效果如图 5-14 所示。 Dreamweaver CS5 中文版实例教程 4 图 5-12 图 5-13 图 5-14 （9）保存文档，按键预览效果，如图 5-15 所示。 图 5-15 2. 排序表格 （1）返回到 Dreamweaver 界面中，选中表格，如图 5-16 所示。选择“命令 排序表格”命 令，弹出“排序表格”对话框。 图 5-16 （2）在“排列按”选项的下拉列表中选择“列 2” ， “顺序”下拉列表中选择“按字母顺序” ， 在后面的下拉列表中选择“降序” ，如图 5-17 所，单击“确定”按钮，表格进行排序，
5、效果如图 5-18 所示。 第 5 章 使用表格 5 图 5-17 图 5-18 （3）保存文档，按键预览效果，如图 5-19 所示。 图 5-19 5.5 课堂练习百货折扣网页 【练习知识要点】使用“页面属性”命令设置页面属性。使用“图像”和“表格”按钮制作网 页效果。使用“属性”面板设置单元格背景颜色，如图 5-20 所示。 【效果所在位置】光盘/Ch05/效果/百货折扣网页/index.html 图 5-20 Dreamweaver CS5 中文版实例教程 6 1. 创建并设置页面属性 （1）选择“文件 新建”命令，新建一个空白文档，选择“文件 另存为”命令，在“保 存在” 选项的下拉列
6、表中选择当前站点目录保存路径； 在 “文件名” 选项的文本框中输入 “index” ， 单击“保存”按钮，返回网页编辑窗口。 （2）选择“修改 页面属性”命令，弹出“页面属性”对话框，在“分类”列表中选择“外 观”选项，在“页面字体”选中添加字体，将“大小”选项设为 12， “左边距” 、 “上边距” 、 “右 边距” 、 “下边距”选项分别设为 0，如图 5-21 所示，单击“确定”按钮。 图 5-21 2. 插入表格和图像 （1）在“插入”面板“常用”选项卡中单击“表格”按钮，在弹出的“表格”对话框中进 行设置，如图 5-22 所示，单击“确定”按钮，保持表格的选取状态，在“属性”面板“对
7、齐”选 项的下拉列表中选择“居中对齐”选项，效果如图 5-23 所示，表格效果如图 5-24 所示。 图 5-22 图 5-23 图 5-24 第 5 章 使用表格 7 （2）将鼠标置入到第 1 行单元格中，在“插入 常用”面板中单击“图像”按钮，在弹 出的“选择图像源文件”对话框中选择光盘目录下“Ch05 素材 百货折扣网页 images”文 件夹中的“01_01.gif” ，如图 5-25 所示，单击“确定”按钮完成图片的插入，效果如图 5-26 所示。 用同样的方式将“01_03.gif”插入到第 3 列中，效果如图 5-27 所示。 图 5-25 图 5-26 图 5-27 3. 插入
8、嵌套表格 （1）将光标置入到第 2 列单元格中，在“插入”面板“常用”选项卡中单击“表格”按钮， 在弹出的“表格”对话框中进行设置，如图 5-28 所示，单击“确定”按钮，效果如图 5-29 所示。 图 5-28 图 5-29 Dreamweaver CS5 中文版实例教程 8 （2）将光标置入到第 1 行单元格中，在“属性”面板中进行设置，如图 5-31 所示。单元格效 果如图 5-31 所示。 图 5-30 图 5-31 （3）在“拆分”视图窗口中选中该单元格的“nbsp”标签，如图 5-32 所示，按键， 删除该标签，单元格效果如图 5-33 所示。 图 5-32 图 5-33 （4）将
9、光标置入到第 2 行单元格中，按一次键，置入一段空格，输入需要的空格和文 字，效果如图 5-34 所示。将光标置入到文字的右侧，按两次键，效果如图 5-35 所示。 图 5-34 图 5-35 （5）将光标置入到第 3 行中，在“属性”面板“水平”选项下拉列表中选择“居中对齐” ，在 “插入 常用”面板中单击“图像”按钮，在弹出的“选择图像源文件”对话框中选择光盘目 录下“Ch05 素材 百货折扣网页 images”文件夹中的“01_05.gif” ，单击“确定”按钮完 成图片的插入，效果如图 5-36 所示。 （6）将光标置入到第 4 行中，在“属性”面板“水平”选项下拉列表中选择“居中对齐
10、” ，用 同样的方式将“01_09.gif”插入到第 4 行中，将“垂直边距”选项设为 28，效果如图 5-37 所示。 图 5-36 图 5-37 第 5 章 使用表格 9 （7）将光标置入到最后一行中，在“属性”面板中将“高”选项设为 20，背景颜色设为灰色 （#E3E3E3） ，效果如图 5-38 所示。 图 5-38 （8）保存文档，按键预览效果，如图 5-39 所示。 图 5-39 5.6 课后习题手机频道网页 【习题知识要点】使用“页面属性”命令设置页面属性。使用“表格”按钮插入表格效果。使 用“图像”按插入图像，如图 5-40 所示。 【效果所在位置】光盘/Ch05/效果/手机频
11、道网页/index.html 图 5-40 （1）选择“文件 新建”命令，新建一个空白文档，选择“文件 另存为”命令，在“保 存在” 选项的下拉列表中选择当前站点目录保存路径； 在 “文件名” 选项的文本框中输入 “index” ， 单击“保存”按钮，返回网页编辑窗口。 （2）选择“修改 页面属性”命令，弹出“页面属性”对话框，在“分类”列表中选择“外 Dreamweaver CS5 中文版实例教程 10 观”选项，将“大小”选项设为 12， “文本颜色”设为深灰色（#323031） ， “左边距” 、 “上边距” 选项分别设为 0，如图 5-41 所示，单击“确定”按钮。 图 5-41 （3
12、）在“插入 常用”面板中单击“表格”按钮，在弹出的“表格”对话框中进行设置， 如图 5-42 所示，单击“确定”按钮，在“属性”面板“对齐”选项的下拉列表中选择“居中对齐” ， 使表格居中显示，效果如图 5-43 所示。 图 5-42 图 5-43 （4）将光标置入到第 1 列单元格中，在“插入 常用”面板中单击“图像”按钮，在弹 出的“选择图像源文件”对话框中选择光盘目录下“Ch05 素材 手机频道网页 images”文 件夹中的“8_01.jpg” ，单击“确定”按钮完成图片的插入，效果如图 5-44 所示。 （5）使用相同的方法，将图像“8_02.jpg”文件插入到第 2 列单元格中，效
13、果如图 5-45 所示。 图 5-44 图 5-45 第 5 章 使用表格 11 （6）将光标置入到第 3 列单元格中，在“属性”面板“宽”选项的数值框中输入 318，如图 5-46 所示，单元格效果如图 5-47 所示。 图 5-46 图 5-47 （7）在“插入”面板“常用”选项卡中单击“表格”按钮，在弹出的“表格”对话框中进 行设置，如图 5-48 所示，单击“确定”按钮，保持表格的选取状态，在“属性”面板“对齐”选 项的下拉列表中选择“居中对齐”选项，效果如图 5-49 所示。 图 5-48 图 5-49 （8）将光盘目录下“Ch05 素材 手机频道网页 images”文件夹中的“im
14、g.png”图片插 入到第 1 行单元格中，效果如图 5-50 所示。 （9）将光标置入到第 2 行单元格中，在“属性”面板中将“高”选项设为 80，效果如图 5-51 所示。 图 5-50 图 5-51 Dreamweaver CS5 中文版实例教程 12 （10）将光盘目录下“Ch05 素材 手机频道网页 images”文件夹中的“di.png”图片插 入到第 3 行单元格中，效果如图 5-52 所示。图片的右侧输入文字，并在“属性”面板中进行设置， 如图 5-53 所示，文字效果如图 5-54 所示。 图 5-52 图 5-53 图 5-54 （11）将光标置入到第 4 行中，在“属性”面板中将“高”选项设为 10，如图 5-55 所示，选 择“插入 HTML 水平线”命令，插入水平线效果，如图 5-56 所示。 （12）根据步骤 10 的操作方法，在最后一行中输入文字并在“属性”面板中进行设置，效果 如图 5-57 所示。 图 5-55 图 5-56 图 5-57 （13）保存文档，按键预览效果，如图 5-58 所示。 图 5-58
