5.1-《制作框架集页》教学设计

《5.1-《制作框架集页》教学设计》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、项目五任务一《制作框架集页》教学设计一、设计构想《制作框架集页》出自高等教育出版社出版的《网页设计与制作》第二版项目五，主要是通过在网页中使用框架、框架集，使各网页之间的风格相互统一，结构布局更加灵活多样，本节课将从DreamweaverCS6中框架的插入、调整、保存入手了解框架的使用方法。二、学情分析知识储备：学生已经了解DreamweaverCS6中表格布局网页，而网页的布局方法有表格布局、框架布局、CSS+DIV布局三种，因此学生可在表格布局的基础上区分框架布局。学习特点：学生对于在页面中导航不变只有

2、内容发生改变的网页有极强的学习兴趣，但操作不够细心，因此任务应从易到难依次加深难度。三、教学目标知识与技能目标：（1）理解框架的概念、框架集的概念；（2）学会正确的框架命名方法。（3）学会新建、保存框架集。过程与方法目标：通过框架的新建、保存理解框架布局的原因。情感态度价值观：培养学生学习网页的兴趣，增强对于网页设计的认识。四、教学重点框架的插入方法；框架的保存方法。五、教学难点框架保存时的顺序一、教学方法任务驱动二、教学过程第1环节：新建文档，创建框架【教师活动】（1）新建一个HTML空白页（2）在菜单栏

3、中选择‘插入’---‘HTML'----'框架’---‘对齐上缘’（3）在弹出的‘框架标签辅助功能属性’对话框中选择框架值和标题【学生活动】（1）新建文档，创建对齐上缘的框架【设计意图】（1）规范步骤，建立框架，引入今天所学内容第2环节：查看效果，区分框架、框架集【教师活动】（1）在设计视图中就会出现上下两个框架（2）讲解框架、框架集的概念l框架：把一个浏览器窗口划分为多个区域，每个区域都是一个独立的HTML文档。l框架集：定义一组框架的布局和属性，包括框架的数目、大小、位置等信息，也是一个HTML文件。l

4、框架、框架集的命名：通常采用“模块名字_内容概要”的命名方式，例如bjb_frameset；bjb_skj；bjb_xkj；分别表示笔记本-框架集；笔记本-上框架；笔记本-下框架。【学生活动】（1）认真听讲，学会区分框架、框架集的概念及其命名方法【设计意图】（1）通过讲解区分框架、框架集的概念及其命名方法第3环节：设置框架属性【教师活动】（1）讲解框架边框属性设置在设计视图中选中框架边框，如下图：这个边框很隐蔽，不好找选中边框之后，属性面板会变这样：设置边框属性为边框“是”，边框宽度“2”，边框颜色“#00

5、0000”【学生活动】（1）找到框架分割线，设置框架边框的属性。【设计意图】（1）通过框架边框的设置，让学生对于框架的结构有所了解。第4环节：框架保存【教师活动】（1）提醒学生保存框架的顺序为：先分别保存各子框架，最后保存框架集即可。（2）对于对齐上缘的框架，点击上框架，选择‘文件’--‘保存框架’，保存为bjb_list.html；点击下框架，选择‘文件’--‘保存框架’，保存为bjb_expression.html；鼠标单击选择整个框架集，选择‘文件’--‘保存框架页’，保存为bjb_Frameset.

6、html【学生活动】（1）分别保存上、下框架和框架集，为框架、框架集合理命名。【设计意图】（1）让学生理解框架保存的方法。第5环节：总结评价【教师活动】（1）利用F12快捷键快速预览网页效果。（2）总结框架在网页中可以起到布局的效果，提醒学生注意框架保存的顺序。【学生活动】（1）预览自己保存框架的效果，并记住框架保存的顺序。【设计意图】（1）总结今天所学内容。