项目6制作框架网页.doc.doc

《 网页设计与制作 》课程教案 一、教案头 教学单元标题：制作框架网页 教学时数 4学时 上课地点 北区实D602，D603，D304 授课班级 15软件1班 15软件2班 15软件3班 上课时间 周三5-8节 周四5-6节，周五1-2节 周四7-8节，周五3-4节 教 学 目 标 能力（技能）目标 知识目标 1.创建框架集 2.保存框架网页 3.框架嵌套 4.框架属性设置 5.超链接目标设置 6.浮动框架应用 1、创建框架集 2、框架的嵌套 3、保存框架文件 4、设置框架集的边框、边框颜色与边框宽度 5、设置框架名称、源文件、滚动、边框与边框颜色 6、设置框架超链接目标 7、创建Iframe浮动框架 教 学 重 难 点 教学难点 教学重点及解决方式 ? 保存框架网页 ? 在框架中使用超链接 ? 浮动框架iframe ? 框架网页的概念 ? 创建框架与框架集 ? 设置框架集与框架的属性 ? 保存框架与框架集文件 ? 在框架中使用超链接 单 元 设 计 综 述 框架网页是一种被广泛应用论坛网站和企业管理信息系统网站的网页类型。利用框架网页可以将网页拆分成多个部分，每个部分拥有独立的页面，显示不同的图文信息。通过设置框架网页的超链接目标实现不同页面内容在框架中的相互切换。本单元将学习框架的建立与保存，框架属性的修改以及框架网页的超级链接。 学 习 参 考 一、参考教材： 1. 杨颖，杨秀萍，胡国生. Dreamweaver CS6网页设计与制作项目驱动教程[M].重庆：西南师范大学出版社，2014 2. 钟阳晶，赖小平，马国勤.网页设计与制作[M].北京：北京师范大学出版社，2011 二、参考网站： 1. 《网页设计与制作》精品资源共享课程8:8080/skills/solver/classView.do?classKey=9109747 2. W3School 3. 素材资源库 4. 设计资源站 5. 网页制作大宝库 6. 站酷 7. 圆点视线 8. 站长素材 9. 千图网 / 10. 太平洋学院 /pcedu/sj/wz 11. 蓝色理想 12. 天极网 13. 网页设计师联盟 14. 七色鸟设计空间 二、教学设计 教学步骤 教学内容 教学方法 教学手段 学生活动 时间分配 知识基础 一、创建框架 框架可以将浏览器窗口划分成若干个区域，每个区域中显示不同的网页，同时这些网页之间有相互的链接关系。 选择菜单【插入】→【HTML】→【框架】，在弹出的下拉菜单中可以选择各种框架结构。一些复杂的网页可能需要框架的嵌套，比如先分成左右框架，在右边再嵌套一个上下框架。 将鼠标放在网页窗口边缘的框架线上，当指针变成箭头状时，直接拖动框架的边框线可以调整某个框架的大小。如果拖动框架边框到父框架的边框上，可删除该框架。从编辑窗口边缘开始拖动鼠标，可创建新的框架。 框架结构确定以后就可以在各个窗口中分别开始编辑网页了，当然每个框架中也可以调入事先编辑好的网页作为初始网页，这要通过属性面板设置。框架网页编辑完毕后，接下来就要进行保存了。 二、框架的保存 保存的时候，可以使用菜单“文件→保存全部”，系统会自动依次保存每个框架网页，保存到哪个框架，该框架周围会有虚线框显示。或者也可以对框架集和各个框架页分别保存，方法如下： （1）框架集的保存。单击编辑窗口的边缘，保证选中整个框架结构（此时属性面板中可以修改整个框架集的属性）。使用菜单“文件→保存框架页”（或“文件→框架集另存为”），可单独保存框架集网页。 （2）各个框架的保存。把光标置于某个框架内部单击，使用菜单“文件→保存框架”（或“文件→框架另存为”），可单独保存某个框架。 三、设置框架属性 （1）框架集的属性 单击编辑窗口边缘，选中整个框架集。此时在属性面板中可以设置是否显示框架的边框、边框宽度、边框颜色，以及每个框架的宽度或高度值，单位可选择像素、百分比、相对。 （2）各个框架的属性 使用菜单“窗口→框架”，打开“框架”面板。在该面板中可以看到网页中的框架结构。 在框架面板中单击某个区域，如单击左侧框架区域，可选中此框架。此时属性面板如下图所示： “框架名称”栏用于为框架命名，框架名称将被超级链接引用。名称一般以字母开头，不要出现“-”、“.”和空格。 “源文件”栏用于指定在当前框架中显示的初始网页。 “滚动”栏用于设置框架中是否显示滚动条。 “不能调整大小”选项用于防止用户浏览时拖动框架边框来调整当前框架大小。 “边框”栏用于设置当前框架是否显示边框。 “边框颜色”栏用于设置当前框架的边框色，该设置优先于对整个框架集的边框颜色设置。 “边界宽度/高度”相当于页边距，用于设置框架内容与边框之