计算机专业 2006 年4月27日 第9周 第 1 次 章节 课题 教 学 目 的 教 学 重 点 教 学 难 点 技 能 课 型 板 书 设 计 在Dreamweaver中导入数据表格 创建细线表格 本章学习目标：学会使用【插入】【表格对象】【导入表格式数据】命令。 【文件】【新建】命令。 技能目标：学会在Dreamweaver中导入数据表格及创建细线表格的技能。 【插入】【表格对象】【导入表格式数据】命令 【常用】插入栏中的【插入表格】按钮 【常用】插入栏中的【插入表格】按钮 ·掌握在Dreamweaver中导入数据表格及创建细线表格的综合使用能力 新授课 教法 (教具) 讲练结合（多媒体计算机，课件） 1． 在实例网页中Dreamweaver中导入数作 据表格及创建细线表格。 业 2． 预习第二十六例。 课 后 小 结 0552班班完成情况良好 教 学 过 程 教学内容 一、组织教学：师生问候 检查一下机器是否正常，做好记录工作，了解一下学生的出勤情况，准备上课。 二、新课： 第24例在Dreamweaver中导入数据表格 在dreamweaver中可以很方便地将一些具有制表符、逗号、句号或其他定界符格式化好了表格导入到网页文档。图1-152所示是导入数据表格效果，具体操作步骤如下。 1．打开网页文档，如图1-153所示。 2．将光标放置在表格中，选择【插入】【表格对象】【导入表格式数据】命令，如图1-154所示。 3．弹出【导入表格式数据】对话框，在对话框中单击【数据文件】文本框右边的【浏览】按钮，弹出【打开】对话框，如图1-155所示。 4．在对话框中选择daoru.txt，单击【打开】按钮，添加到文本框中，在【定界符】下拉列表中选择【逗点】，如图1-156所示。 提示： 在导入数据表格时【定界符】必须是逗点，否则可能会造成表格格式的混乱。 5．单击【确定】按钮，将数据导入到网页文档中并生成表格，如图1-157所示。 6．选中表格，并调整其大小，在【属性】面板中将【对齐】设置为【居中对齐】，【边框颜色】设置为#993333，如图1-158所示。 7．保存文档，按F12键在浏览中预览效果，如图1-152所示。 第25例创建细线表格 细线表格是网页中常见的表格形式，细线表格看起来更加精致美观。图1-159所示是创建细线表格效果，具体操作步骤如下。 1． 选择【文件】【新建】命令，弹出【新建文档】对话框，如图1-160所示。 2． 在对话框图中选择【常规】选项卡，在【类别】列表框中选择【基本页】，然后在【基本页】列表框中选择【HTML】选项，单击【创建】按钮，创建一空白文档，如图1-161所示。 3． 选择【文件】︱【另存为】命令，弹出【另存为】对话框，如图1-162所示。 4． 在对话框中的【文件名】文本框中输入“index.htm”，【保存类型】设置为“所有文档（*.htm:*html）”，单击【保存】按钮，保存文档，如图时间 方式 多媒体演示 1-163所示。 5． 将光标放置在页面中，选择【插入】︱【表格】命令，如图1-164所示。 提示 单击【常用】插入栏中的【插入表格】按钮，也可以弹出【表格】对话框。 6． 弹出【表格】对话框，在对话框中将【行数】设置为1，【列数】设置为2，【表格宽度】设置为777像素，【边框粗细】、【单元格边距】、【单元格间距】分别设置为0，如图1-165所示。 7． 单击【确定】按钮，插入表格，此表格设置为表格1，如图1-166所示。 8． 在【属性】面板中将【对齐】设置为【居中对齐】，如图1-167所示。 9． 将光标放置在表格1的第1表单元格中，选择【插入】︱【表格】命令，弹出【表格】对话框，如图1-168所示。 10． 在对话框中将【行数】设置为9，【列数】设置为1，【表格宽度】设置为132像素，【边框粗细】、【单元格边距】、【单元格间距】分别设置为0，单击【确定】按钮，插入表格，此表格设置为表格2，如图1-169所示。 11． 将光标放置在表格2的第1行单元格中，选择【插入】︱【图像】命令，如图1-170所示。 12． 弹出【选择图像源文件】对话框，在对话框中选择图像images/button.gif，如图1-171所示。 13． 单击【确定】按钮，插入图像，如图1-172所示。 14． 将光标放置在表格2的第2行单元格中，选择【插入】︱【图像】命令，弹出【选择图像源文件】对话框，如图1-173所示。 15． 在对话框中选择图像images/button2.gif，单击【确定】按钮，插入图像，如图1-174所示。 16． 将光标放置在表格2的第3行单元格中，选择【插入】︱【图像】命令，弹出【选择图像源文件】对话框，如图1-175所示。 17． 在对话框中选择图像images/button3.gif，单击【确定】按钮，插入图像，如图1-176所示。 18． 将光标放置在表格2的第4行单元格中，选择【插入】︱【图像】命令，弹出【选择图像源文件】对话框，如图1-177所示。 19． 在对话框中选择images.button4.gif，单击【确定】按钮，插入图像，如图1-178所示。 20． 用同样的方法在其他单元格中分别插入图像，如图1-179所示。 21． 将光标放置在表格1的第2列单元格中，在【属性】面板中将【垂直】设置为【顶端】，如图1-180所示。并插入一个2行1列的表格，此表格设置为表格3，如图1-181所示。 22． 将光标放置在表格3的第1行单元格中，选择【插入】︱【图像】命令，弹出【选择图像源文件】对话框，如图1-182所示。 23． 在对话框图中选择图像images/index02.gif，单击【确定】按钮，插入图像，如图1-183所示。 24． 将光标放置在表格3的第2行单元格中，在【属性】面板中将【背景颜色】设置为#60F560，如图1-184所示。 25． 将光标放置在表格3的第2行单元格中，插入一个2行1列的表格，此表格设置为表格4，在【属性】面板中将【对齐】设置为【居中对齐】，如图1-185所示。 26． 将光标放置在表格4的第1行单元格中，选择【插入】【图像】命令，弹出【选择图像源文件】对话框，如图1-186所示 27． 在对话框中选择图像images/13.gif，单击【确定】按钮，插入图像，如图1-187所示。 28． 将光标放置在表格4的第2行单元格中，插入一个7行1列的表格，此表格设置为表格5，在【属性】面板中将【对齐】设置为【居中对齐】，如图1-188所示。 29． 将光标放置在表格5中，分别输入相应的文字，如图1-189所示。 30． 将光标放置在表格4的右边，插入一个2行1列的表格，此表格设置为表格6，在【属性】面板中将【对齐】设置为【居中对齐】，如图1-190所示。 31． 将光标放置在表格6的第1行单元格中，选择【插入】︱【图像】命令，弹出【选择图像源文件】对话框，如图1-191所示。 32． 在对话框中选择图像images/13.gif，单击【确定】按钮，插入图像，如图1-192所示。 33． 将光标放置在表格6的第2行单元格中，插入一个5行1列的表格，此表格设置为表格7，在【属性】面板中将【对齐】设置为【居中对齐】，如图1-193所示。 34． 将光标放置在表格7中，分别输入相应的文字，如图1-194所示。 保存文档，按F12键在浏览在预览效果，如图1-159所示。 三、学生练习（老师进行个别制导） 四、点评：（针对学生完成作品的情况进行点评，指出创作中应该注意的地方。） 五、作业： 1、在实例网页中Dreamweaver中导入数据表格及创建细线表格。 2、预习第二十六例。
因篇幅问题不能全部显示，请点此查看更多更全内容