第五课 统一风格——制作框架网页 教学设计 2023—2024学年粤经济版初中信息技术八年级下册

课 题 第五课 统一风格——制作框架网页 教学目标 1、【知识与技能：】 （1）学会创建框架、制作框架网页和保存框架网页。 （2）掌握表格的插入、拆分与合并。 （3）掌握在单元格中设置颜色、背景，插入文字、图像等。 （4）掌握制作鼠标经过图像的动态效果。 （5）会制作超级链接和电子邮件链接。 2、【过程与方法：】 （1）能通过教师引导、动脑思考、交流与实践操作学习过程，体验和感悟探究的一般过程； （2）通过探究学习体验框架对网页布局的重要性； （3）通过学习交流讨论理解框架，掌握框架的制作过程。 3、【情感态度与价值观：】 （1）通过学习了解到网页布局工具的多样性，激发学生探究的欲望； （2）通过学习体验网页制作软件Dreamweaver CS5的魅力，提高学习兴趣。 教学重、难点 重点：创建框架和制作框架网页。 难点：在制作上框架、下框架网页中准确输入、设置表格内容。 教案 1.打开Dreamweaver CS5软件，然后新建或打开“安全自护我能行”站点，新建frame文件夹，在该文件夹中新建images或other文件夹，将图片素材复制到images文件夹中。 2.创建框架和框架集 制作框架网页的前提是创建框架，并根据网页布局设计框架的样式，然后再具体设计制作网页的内容。 （1）新建框架集 步骤1：执行“文件”——》“新建”命令，打开“新建文档”对话框，在 “示例中的页”中选择 “框架页”。 步骤2：单击“创建”按钮，在弹出对话框中单击“确定”，框架创建完成。 （2）保存框架集 步骤1：执行“文件”——》“保存全部”命令，保存到frame文件夹中。 步骤2：重命名框架集文件和每个框架文件。 （3）设置框架和框架属性 框架的属性包括框架名称、源文件、边框、边界宽度和高度等；框架集的属性包括边框宽度、边框颜色、框架拆分比例等。 步骤1：执行“窗口”——》“框架”命令，打开框架面板。 步骤2：单击“框架”面板中的框架边缘部分，选中框架集，在 “属性”面板中设置框架集的属性。 步骤3：单击“框架”面板中的topFrame框架和mainFrame框架，在“属性”面板中设置所选框架的属性。 （4） 学生进行练习，解答出现的问题。 3.制作框架网页 ①制作上框架网页 步骤1：打开网页top.html，设置背景颜色#EAFF8A，上边距为0像素。 步骤2：插入一个2行5列的表格，居中对齐，并调整行列的高宽。 步骤3：在第1行中合并单元格，并插入图像。 步骤4：在第2行第1个单元格中，设置鼠标经过图像，替换文本和为图片添加超链接，设置打开方式（目标）。 步骤5：在第2行其他单元格中，分别设置鼠标经过图像。 学生进行练习、探究，学会操作方法，理解课本内容。 ②制作下框架网页 步骤1：打开网页main.html，设置背景颜色#EAFF8A，上边距为0像素。 步骤2：插入一个5行9列的表格，居中对齐，分别设置行的高度和列的宽度。 步骤3：合并相关单元格。 步骤4：插入图片或设置背景图像，并为有关图片添加超链接。 步骤5：输入文本内容，设置字体大小、颜色等。 步骤6：添加邮件链接。 4.测试网页 5.学生进行练习、探究、交流，掌握制作方法，不怕疑难，不断提高操作计算机的能力。 6.归纳、总结、拓展。　 学科网（北京）股份有限公司 $$