课题课题第第 3 课课 基于表格的页面布局基于表格的页面布局教教学学目目标标知知识识与与能能力力目目标标： 1进一步熟悉 Dreamweaver 8 的工作界面。2. 掌握利用“文件”面 板打开网站的方法。3学会根据网站素材的分类规划网站的文件夹。 4熟练地创建并保存网页。5. 掌握设置网页标题的方法。 6. 能够根据网页内容使用表格恰当布局。 7. 学会设置网页背景色及 表格背景图像。8. 初步认识并尝试使用标签选择器选择对象。 9. 熟 练地使用快捷键在浏览器中预览网页效果。 过过程程与与方方法法目目标标： 1.展示两组素材相同而布局不同的网页让学生认知。 2.多媒体教学 网“表格布局网页页面”的教学演示。 3.学生实践练习并交流展示 及评价。4.项目活动教学法学会知识技能培养能力。 情情感感态态度度与与价价值值观观目目标标： 1.锻炼学生“表格的布局网页页面”知识技能。 2.培养学生的审美能力、设计和组织能力、语言表达能力、合作能力。3.使学生在活动后的体验激发更大的网站制作的学习兴趣。重点：重点：(1)在“文件”面板中规划站点 (2) 设置网页标题 (3) 设置网页背景 (4)使用表格对页面布局重点处理重点处理:首先训练学生将素材合理的存放在不同的文件夹里，在操作过程中以便管理。同时还要学会简单页面的布局。教教法法指指导导难点：难点：(1)在“文件”面板中规划站点 (2)使用表格对页面布局难点处理：难点处理：由于学生对站点目录结构的不熟悉，对素材的组织和管理还有一点欠缺，熟练操作还有问题，从而老师首先要将其结构和其作 用讲清楚。教具教具电脑电脑 、 投影仪、投影仪、 教案教案教法教法演示法、演示法、 启发、设问、启发、设问、 任务驱动任务驱动板板书书设设计计一、打开站点 （1） “文件”面板的介绍 二、创建网页首页 （1） 整理素材 （2） 创建并保存首页 三、对首页进行初步布局 （1）为网页添加背景 （2）设置网页标题并预览网页效果 （3）使用表格初步布局网页四、 测试网页教教 师师 活活 动动学学 生生 活活 动动教教学学过过程程德育：抵制垃圾食品德育：抵制垃圾食品 引导：站点已经创建成功，作为建站图纸的 网页规划也设计完毕，现在我们就可以开 始着手制作网站，首先要完成的是网站的 首页。 新授课： 一、打开站点 “文件”面板的介绍 启动 Dreamweaver 8 后，展开“文件” 面板，可以看到创建的站点，如果有多个 站点，就得从“文件”中选择所需要的站 点。面板组位于文档窗口右侧，是分组的相 关面板的集合。若要展开一个面板组，可 单击组名称左侧的展开箭头或者单击面板 标题文字。若要打开其他面板，可以执行 “窗口”菜单下的相关命令。 “文件”面 板可以管理文件和文件夹，类似于 windows 资源管理器。 二、创建网站首页 （1）整理素材步骤 1、创建文件夹。右击“文件”面 板中站点名“站点安全自护我能行 e:safe”在弹出的快捷菜单中执行“新 建文件夹”命令，然后将文件夹命名为 images。步骤 2、将首页素材图片 index.gif， 复制粘贴到 images 文件夹中。在创建文件和文件夹时，尽量避免 使用中文，因为在连接远程站点时会出现 错误识别，应当使用有意义的英文或者汉 语拼音。（2）创建并保存首页步骤 1、执行“文件新建”命令， 在弹出的“新建”对话框中选择“常规” 标签，在“基本页”列表框中选择 HTML 选项，然后单击“创建”按钮。步骤 2、执行“文件保存”命令， 在弹出“另存为”对话框中将文件名修改 为 vindex.html，保存路径无需改变。 .html 或.htm 后缀表示该文档是 HTML 观看关于“抵制垃圾食品”的视频。结合书本和老师的讲解完 成站点的创建和打开的练 习。学习和培养整理素材的方 法以及平时操作电脑的习 惯。教教 师师 活活 动动学学 生生 活活 动动教教学学过过程程文档,HTML 文档就是网页文件,也称为 web 页。 三、对首页进行初步布局（1）为首页添加背景色 步骤 1、单击文档窗口，使插入点在编 辑区内闪烁，然后单击“属性检查器” 的“页面属性”按钮。 步骤 2、在弹出的“页面属性”对话框 中单击“分类”列表框中的“外观”选 项，在窗口右侧的“外观”项中找到 “背景颜色”选项。单击色板选择颜色， 也可以输入颜色数值，单击“确定”按 钮即可。（2）设置网页标题并预览网页效果 步骤 1、在“文档”工具栏的“标题” 文本框中输入“安全自护我能行首页” 。步骤 2、执行“文件保存”命令。 步骤 3、执行“文件在浏览器中预览 IExplore6.0”或直接按 F12 预览。（3）使用表格初步布局网页 步骤 1、在文档窗口中单击，在页面左 上角放置插入点。执行“插入表格” 命令，在弹出的“表格”对话框中设置 2*1、表格宽度为 600 像素。 步骤 2、单击“标签选择器”中的 标签,选中此表格,继续在“属性 检查器”中完成表格的高度：450 像素、 对齐方式：居中对齐、背景图像： images/index.gif。 四、测试网页 步骤 1、执行“文件保存” 。 步骤 2、F12 预览网页。 五、总结：本节课让我们简单了解了网页布局 的相关知识及素材收集方法。通过学习给自己的首页添 加背景颜色并完成首页页 面的布局。完成所有任务，测试网页， 同学们相互参观作品。作业作业给自己的首页添加标题和相应内容。课课后后记记通过本节课的学习，同学们对学习网页制作比较感兴趣，知识学生 们的汉语水平有限，不能自己拓展学习更深的知识，但整体上说效 果不错。Dreamweaver 基础知识基础知识基于表格的页面布局基于表格的页面布局优质课教案单位:共和县民族中学科目：信息技术姓名：才秀措电话：15809749455