5.1 《制作框架集页》教学设计_搭建框架教学设计1

5.1 《制作框架集页》教学设计由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“搭建框架教学设计1”。

项目五 任务一《制作框架集页》教学设计

一、设计构想

《制作框架集页》出自高等教育出版社出版的《网页设计与制作》第二版项目五，主要是通过在网页中使用框架、框架集，使各网页之间的风格相互统一，结构布局更加灵活多样，本节课将从Dreamweaver CS6中框架的插入、调整、保存入手了解框架的使用方法。

二、学情分析

知识储备：

学生已经了解Dreamweaver CS6中表格布局网页，而网页的布局方法有表格布局、框架布局、CSS+DIV布局三种，因此学生可在表格布局的基础上区分框架布局。学习特点：

学生对于在页面中导航不变只有内容发生改变的网页有极强的学习兴趣，但操作不够细心，因此任务应从易到难依次加深难度。

三、教学目标

知识与技能目标：

（1）理解框架的概念、框架集的概念；（2）学会正确的框架命名方法。（3）学会新建、保存框架集。过程与方法目标：

通过框架的新建、保存理解框架布局的原因。情感态度价值观：

培养学生学习网页的兴趣，增强对于网页设计的认识。

四、教学重点

框架的插入方法；框架的保存方法。

五、教学难点

框架保存时的顺序

六、教学方法

任务驱动

七、教学过程

第1环节：新建文档，创建框架 【教师活动】

（1）新建一个HTML空白页

（2）在菜单栏中选择‘插入’---‘HTML'----'框架’---‘对齐上缘’

（3）在弹出的‘框架标签辅助功能属性’对话框中选择框架值和标题

【学生活动】

（1）新建文档，创建对齐上缘的框架 【设计意图】

（1）规范步骤，建立框架，引入今天所学内容 第2环节：查看效果，区分框架、框架集 【教师活动】

（1）在设计视图中就会出现上下两个框架

（2）讲解框架、框架集的概念  框架：把一个浏览器窗口划分为多个区域，每个区域都是一个独立的HTML文档。

 框架集：定义一组框架的布局和属性，包括框架的数目、大小、位置等信息，也是一个HTML文件。

 框架、框架集的命名：通常采用“模块名字_内容概要”的命名方式，例如bjb_frameset；bjb_skj；bjb_xkj；分别表示笔记本-框架集；笔记本-上框架；笔记本-下框架。【学生活动】

（1）认真听讲，学会区分框架、框架集的概念及其命名方法 【设计意图】

（1）通过讲解区分框架、框架集的概念及其命名方法 第3环节：设置框架属性 【教师活动】

（1）讲解框架边框属性设置

在设计视图中选中框架边框，如下图：这个边框很隐蔽，不好找

选中边框之后，属性面板会变这样： 设置边框属性为 边框“是”，边框宽度“2”，边框颜色“#000000” 【学生活动】

（1）找到框架分割线，设置框架边框的属性。【设计意图】

（1）通过框架边框的设置，让学生对于框架的结构有所了解。第4环节：框架保存 【教师活动】

（1）提醒学生保存框架的顺序为：先分别保存各子框架，最后保存框架集即可。（2）对于对齐上缘的框架，点击上框架，选择‘文件’--‘保存框架’，保存为bjb_list.html；

点击下框架，选择‘文件’--‘保存框架’，保存为bjb_expreion.html； 鼠标单击选择整个框架集，选择‘文件’--‘保存框架页’，保存为bjb_Frameset.html 【学生活动】

（1）分别保存上、下框架和框架集，为框架、框架集合理命名。【设计意图】

（1）让学生理解框架保存的方法。第5环节：总结评价 【教师活动】

（1）利用F12快捷键快速预览网页效果。

（2）总结框架在网页中可以起到布局的效果，提醒学生注意框架保存的顺序。【学生活动】

（1）预览自己保存框架的效果，并记住框架保存的顺序。【设计意图】

（1）总结今天所学内容。