网页制作：项目07 使用框架布局论坛网页--电子教案
(完整版)网页设计与制作电子教案
H-r 母存电子教案课程：第1章网页制作基础1.4.1 Flash CS3的启动与退出1.4.2制作“蓝莲花”网页1.5 练习与提高课程：第2章Dreamweaver CS5基本操作课程：第3章创建网页基本对象H-r 母存电子教案课程：第4章布局页面电子教案课程：第5章使用AP Div和行为知识回顾：上一课时讲的如何编辑表格和框架？讨论问题：1、AP Div是什么？2 、在网页中有什么用？3 、又如何对其进行操作？第5章使用AP Div和行为5.1 AP Div的创建和设置5.1.1 创建AP Div5.1.2 AP Div的“属性”面板5.1.3 “ AP元素”面板5.1.4 应用举例——创建AP Div5.2 AP Div的基本操作5.2.1 选择AP Div5.2.2 调整AP Div的大小5.2.3 移动AP Div5.2.4 对齐AP Div5.2.5 应用举例一一使用AP Div布局页面5.3行为的基本操作5.3.1认识行为和事件5.3.2 “行为”面板课第6章创建表单电子教案知识回顾：上一课时讲的AP Div和行为的使用方法？讨论冋题：1、为什么要创建表单？2 、表单中又包含哪些对象？第6章创建表单6.1表单的概念6.1.1 表单域6.1.2表单对象6.1.3应用举例快速选择表单域和表单对象6.2创建表单对象6.2.1 文本域6.2.2复选框6.2.3单选按钮6.2.4列表和菜单6.2.5跳转菜单6.2.6表单按钮6.2.7创建图像域6.2.8用举例在添加表单对象的同时添加表单域6.3上机及项目实训6.3.1制作注册表单页面6.3.2制作搜索表单6.4练习与提高电子教案课第7章CSS与多媒体的应用课第8章Flash CS3基础知识回顾：上一课时讲的CSS与多媒体在网页中的应用? 讨论问题：1、Flash动画具体是指什么？2 、在网页中起什么作用？第8章Flash CS3基础8.1 认识Flash动画8.1.1 Flash动画的原理及应用领域8.1.2 Flash动画在网页方面的应用8.1.3 认识Flash CS3工作界面8.1.4应用举例一一设置文档属性8.2 Flash文档的基本操作8.2.1 Flash文档的创建8.2.2 Flash文档的保存8.2.3 Flash文档的打开8.2.4应用举例一一新建Flash广告动画8.3上机及项目实训8.3.1 制作“ gongzhu” Flash 文档8.3.2 制作SHOW 文档8.4 练习与提高课程：第9章绘制Flash图像电子教案知识回顾：上一课时讲的Flash动画的应用领域和基本操作方法？讨论冋题：1、Dreamweave和Flash的相同点和不同点各是什么？2 、Flash与其他网页制作软件比其优点是什么？第9章绘制Flash图像9.1绘图工具的使用9.1.1工具箱介绍9.1.2 矢量图与位图9.1.3应用举例一一绘制咖啡杯9.2图像的编辑和导入9.2.1组合与分离9.2.2 图像的导入9.2.3将位图转换为矢量图9.2.4应用举例光晕图像效果9.3图像特殊效果的创建9.3.1 “滤镜”面板9.3.2滤镜的使用9.3.3应用举例一一创建特殊字体效果9.4上机及项目实训9.4.1绘制鼠标图形电子教案课程：第10章元件和“库”面板电子教案课程：第11章用时间轴创建动画H-r 母存电子教案课程：第12章导入声音和视频电子教案课程：第13 章使用Action Script 语句13.4上机及项目实训13.4.1制作可拖动的小球动画13.4.2制作星空闪烁动画13.5练习与提高电子教案课程：第14章测试及导出影片H-r 母存电子教案课程：第15章文字和图层应用电子教案课程：第16章路径、色彩和通道应用电子教案课程：第17章项目设计案例。
网页设计电子教案项目备课
网页设计电子教案项目备课第一章：网页设计基础1.1 教学目标了解网页设计的基本概念掌握网页设计的常用软件和工具理解网页设计的基本原则和技巧1.2 教学内容网页设计的定义和作用网页设计的软件和工具介绍网页设计的原则和技巧讲解1.3 教学方法讲授法：讲解网页设计的定义和作用，介绍软件和工具实践法：演示网页设计的具体操作，让学生跟随实践1.4 教学评估课堂问答：检查学生对网页设计概念的理解实践作业：让学生完成一个简单的网页设计，检查学生对软件和工具的掌握程度第二章：网页布局与排版2.1 教学目标掌握网页布局的基本方法学会使用CSS进行网页排版理解响应式设计的概念和实现方法2.2 教学内容网页布局的方法和技巧CSS的基本语法和使用方法响应式设计的原理和实现方式2.3 教学方法讲授法：讲解网页布局的方法和技巧，介绍CSS的使用实践法：让学生跟随实践，完成一个响应式网页设计2.4 教学评估课堂问答：检查学生对网页布局和方法的理解实践作业：让学生完成一个响应式网页设计，检查学生对CSS的掌握程度第三章：网页色彩与字体3.1 教学目标学会使用色彩和字体来提升网页设计的美观度理解色彩和字体的搭配原则掌握色彩和字体的调整方法3.2 教学内容色彩的基本知识和搭配原则字体的选择和搭配原则色彩和字体的调整方法3.3 教学方法讲授法：讲解色彩和字体的基本知识，介绍搭配原则实践法：让学生跟随实践，调整网页的色彩和字体3.4 教学评估课堂问答：检查学生对色彩和字体的理解实践作业：让学生完成一个色彩和字体搭配合理的网页设计第四章：网页图像与多媒体4.1 教学目标学会使用图像和多媒体来丰富网页内容理解图像和多媒体的导入方法掌握图像和多媒体的调整和优化方法4.2 教学内容图像和多媒体的基本知识图像和多媒体的导入方法图像和多媒体的调整和优化方法4.3 教学方法讲授法：讲解图像和多媒体的基本知识，介绍导入方法实践法：让学生跟随实践，添加和调整网页的图像和多媒体4.4 教学评估课堂问答：检查学生对图像和多媒体的理解实践作业：让学生完成一个图像和多媒体丰富的网页设计第五章：网页交互与动画5.1 教学目标学会使用网页交互和动画来提升用户体验理解交互和动画的基本原理掌握交互和动画的实现方法交互和动画的基本原理HTML和CSS实现交互和动画的方法JavaScript实现交互和动画的示例5.3 教学方法讲授法：讲解交互和动画的基本原理，介绍实现方法实践法：让学生跟随实践，添加交互和动画到网页中5.4 教学评估课堂问答：检查学生对交互和动画的理解实践作业：让学生完成一个具有交互和动画的网页设计第六章：网页代码基础6.1 教学目标理解HTML和CSS的基本语法掌握常用的HTML标签和CSS选择器学会使用网页代码编辑器进行网页开发6.2 教学内容HTML的基本结构和常用标签CSS的基本语法和选择器网页代码编辑器的使用和技巧6.3 教学方法讲授法：讲解HTML标签和CSS选择器的使用实践法：让学生跟随实践，编写简单的HTML和CSS代码课堂问答：检查学生对HTML标签和CSS选择器的理解实践作业：让学生完成一个简单的HTML和CSS网页设计第七章：网页高级技术7.1 教学目标掌握表格、表单和框架等高级HTML技术理解响应式设计的原理和实现方法学会使用预处理器如Sass和Less7.2 教学内容表格、表单和框架的使用方法响应式设计的原理和实现技巧Sass和Less的基本语法和使用方法7.3 教学方法讲授法：讲解表格、表单和框架的使用方法，介绍响应式设计的原则实践法：让学生跟随实践，完成一个响应式网页设计演示法：展示Sass和Less的使用方法和优势7.4 教学评估课堂问答：检查学生对表格、表单和框架的理解实践作业：让学生完成一个使用Sass或Less的响应式网页设计第八章：网页前端框架8.1 教学目标学会使用主流的前端框架如React、Vue和Angular理解前端框架的基本概念和原理掌握前端框架的基本使用方法8.2 教学内容主流前端框架的介绍和比较前端框架的基本概念和原理前端框架的基本使用方法和技巧8.3 教学方法讲授法：讲解前端框架的基本概念和原理实践法：让学生跟随实践，使用前端框架完成一个简单的网页设计8.4 教学评估课堂问答：检查学生对前端框架的理解实践作业：让学生完成一个使用前端框架的网页设计项目第九章：网页后端技术9.1 教学目标理解网页后端技术的基本概念和原理掌握常用的后端编程语言和框架学会使用数据库进行数据存储和管理9.2 教学内容网页后端技术的基本概念和原理后端编程语言如Python、Java和PHP的基本语法常用后端框架的介绍和使用方法数据库的基本概念和常用SQL语句9.3 教学方法讲授法：讲解后端编程语言和框架的使用方法实践法：让学生跟随实践，完成一个简单的后端网页设计9.4 教学评估课堂问答：检查学生对后端编程语言和框架的理解实践作业：让学生完成一个使用后端技术的网页设计项目第十章：网页项目实践10.1 教学目标培养学生独立完成网页设计项目的能力提升学生解决实际问题的能力加强学生对网页设计整个流程的理解10.2 教学内容网页设计项目的选题和规划网页设计项目的实施和调试网页设计项目的评价和反思10.3 教学方法讲授法：讲解项目选题和规划的方法实践法：学生独立完成网页设计项目反馈法：学生展示项目并进行自我评价和反思10.4 教学评估项目评审：评估学生网页设计项目的质量学生反馈：收集学生的自我评价和反思意见重点和难点解析一、教学目标设定：确保教学目标明确、具体，并与课程内容紧密相关。
框架网页制作教案分析
框架网页的制作教学目标：1．知识与技能：（1）理解框架的概念及基本用途。
（2）掌握框架网页的新建、制作、编辑与保存，了解框架的拆分方法。
（3）初步掌握将框架结构与表格布局结合使用来制作网页。
2．过程与方法：（1）通过对表格网页的分析，体验新知识（框架结构网页）的优点，从而促进更好的学习新知识。
（2）通过理解框架的概念与组成，学会分析框架网站的结构。
（3）通过动手操作来深入了解框架的使用方法及用途，提高在网页制作方面的知识水平，培养自主学习的能力。
3．情感态度与价值观：（1）通过以“人与动物”为主题的框架结构网页的制作活动，开拓知识面，激发学习兴趣与热情，体会框架网页在展现主题内容中的作用。
（2）能够将表格与框架结构网页结合使用，在创作中体验乐趣。
（3）形成积极主动的学习和使用多媒体技术的习惯，通过参与信息活动，参与社会实践，树立团队意识，形成积极合作的态度。
教学要点：1．重点：（1）框架的概念、用途。
（2）创建、编辑与保存框架网页的方法，框架的嵌套使用。
2．难点：（1）框架的拆分。
（2）制作框架网页。
教学对象分析：本节内容是针对高一学生，而初上高中的他们对一切新知识都很好奇，同时存在着一定的懵懂，因此在教授他们本节课知识之前，要事先充分激发他们对本节课内容的兴趣，因此课前老师先展示一组利用表格制作的框架网页，要求学生仔细观察，找出它们的一个共同特点，并提问如何快捷地制作这种网页？从而引出本节课内容，并且在讲授内容的过程中，要耐心的进行演示教学，不能一味的口述使学生感到一片茫然。
教材分析：从在本教材中所处的位置来看，《运用框架结构制作网页》是在创建新站点，制作简单网页、运用表格制作网页和动态网页之后。
通过前面的学习，学生可以建立有多张网页的个人站点，在对网页的设计中会运用表格给网页布局，为了使网页增添动感，还会通过增加滚动字幕、动态按钮以及动画插件等方法，令网页更加具有活力。
但是除了表格布局外，还有一种常见的布局形式，应用也相当广泛，学生在浏览一些著名网站时就能遇到，通过本节课《运用框架结构制作网页》学习，可以为学生解惑，帮助学生理解框架结构制作网页的应用。
网页设计与制作案例教程电子教案
网页设计与制作案例教程-电子教案第一章：网页设计与制作基础知识1.1 网页设计概述介绍网页设计的概念、目的和重要性讨论网页设计的基本原则和最佳实践1.2 网页制作基础介绍HTML、CSS和JavaScript的基本概念和作用讲解如何使用文本编辑器和网页设计软件进行网页制作第二章：网页布局与排版2.1 网页布局概述介绍常见的网页布局类型和特点讲解布局的基本原则和技巧2.2 排版与字体设计介绍排版的基本概念和原则讲解如何选择合适的字体、字号、行距等属性进行排版第三章：网页配色与图标设计3.1 网页配色基础介绍色彩的基本概念和配色原则讲解如何根据网页内容和主题选择合适的配色方案3.2 图标设计介绍图标设计的基本原则和技巧讲解如何制作和选择合适的图标来提升网页视觉效果第四章：网页动画与交互设计4.1 网页动画基础介绍动画的概念和作用讲解如何使用HTML5和CSS3制作简单的网页动画4.2 交互设计介绍交互设计的基本概念和原则讲解如何使用JavaScript和CSS3实现基本的交互效果和功能第五章：网页设计与制作实践案例5.1 案例一：企业官网首页设计分析企业官网首页的设计需求和目标讲解如何使用HTML、CSS和JavaScript制作企业官网首页5.2 案例二：电子商务网页设计分析电子商务网页的设计需求和目标讲解如何使用HTML、CSS和JavaScript制作电子商务网页5.3 案例三：个人博客网页设计分析个人博客网页的设计需求和目标讲解如何使用HTML、CSS和JavaScript制作个人博客网页第六章：响应式网页设计与制作6.1 响应式网页设计概述介绍响应式网页设计的概念和重要性讲解如何使用媒体查询和弹性布局实现响应式设计6.2 移动端网页设计与制作分析移动端网页的设计需求和目标讲解如何使用HTML、CSS和JavaScript制作移动端网页第七章：前端框架与库的应用7.1 前端框架概述介绍前端框架的概念和作用讲解如何使用Bootstrap、Foundation等前端框架加速网页开发7.2 前端库的应用介绍jQuery、React、Vue等前端库的概念和作用讲解如何使用这些前端库来增强网页的功能和交互性第八章：网页设计与制作高级技巧8.1 CSS预处理器介绍Sass、Less等CSS预处理器的概念和作用讲解如何使用CSS预处理器来优化和简化CSS代码8.2 网页性能优化介绍网页性能优化的概念和重要性讲解如何通过代码压缩、缓存策略等手段提高网页加载速度第九章：网页设计与制作项目管理与团队协作9.1 项目管理基础介绍项目管理的基本概念和工具讲解如何在网页设计与制作项目中进行有效的时间管理和资源分配9.2 团队协作与沟通介绍团队协作的基本原则和技巧讲解如何在团队中进行有效的沟通和协作，确保项目的顺利进行第十章：网页设计与制作案例分析与评价10.1 案例分析分析具体网页设计案例的成功因素和不足之处讲解如何评价和吸取网页设计案例的经验教训10.2 作品展示与评价介绍如何展示和评价网页设计作品讲解如何通过用户反馈和数据分析来评估网页设计的成效和改进空间重点和难点解析重点环节1：网页设计原则和最佳实践网页设计原则包括清晰性、简洁性、一致性、可读性、可用性等。
《网页制作》项目式教案
《网页制作》项目式教案第一章：网页制作基础知识1.1 教学目标让学生了解网页制作的基本概念和流程。
让学生掌握HTML和CSS的基本语法和用法。
1.2 教学内容网页制作的基本概念和流程。
HTML的基本语法和用法，如标签、属性、注释等。
CSS的基本语法和用法，如选择器、属性、注释等。
1.3 教学活动讲解和演示网页制作的基本概念和流程。
通过示例让学生动手编写HTML和CSS代码，加深理解。
1.4 教学评价检查学生对网页制作基本概念的理解程度。
评估学生对HTML和CSS代码的编写能力。
第二章：网页布局与设计2.1 教学目标让学生了解网页布局的基本方法和技巧。
让学生掌握常用的网页设计原则和技巧。
2.2 教学内容网页布局的基本方法和技巧，如固定布局、百分比布局、浮动布局等。
常用的网页设计原则和技巧，如对齐、间距、颜色搭配等。
2.3 教学活动讲解和演示网页布局的基本方法和技巧。
通过示例让学生动手实践，设计出美观的网页布局。
2.4 教学评价检查学生对网页布局方法和技巧的理解程度。
评估学生对网页设计原则和技巧的运用能力。
第三章：网页动画与交互3.1 教学目标让学生了解网页动画和交互的基本概念和实现方法。
让学生掌握JavaScript和CSS动画的基本语法和用法。
3.2 教学内容网页动画和交互的基本概念和实现方法，如动画原理、交互事件等。
JavaScript和CSS动画的基本语法和用法，如动画函数、过渡效果等。
3.3 教学活动讲解和演示网页动画和交互的基本概念和实现方法。
通过示例让学生动手编写JavaScript和CSS动画代码，实现网页动画和交互效果。
3.4 教学评价检查学生对网页动画和交互基本概念的理解程度。
评估学生对JavaScript和CSS动画代码的编写能力。
第四章：网页优化与推广4.1 教学目标让学生了解网页优化的基本方法和技巧。
让学生掌握网页推广的基本方法和技巧。
4.2 教学内容网页优化的基本方法和技巧，如代码优化、图片优化、加载速度优化等。
网页制作项目07使用框架布局论坛网页--电子教案.
1、教师演示教学案例。
2、通过PPT课件讲授基本知识。
3、让学生自己动手重新制作教学案例。
4、通过实训让学生进一步熟悉所学知识。
作业布置
作业：一～二
主要
参考资料
《网页设计与制作——Dreamweaver 8》，王君学、田明编著，人民邮电出版社
《中文Dreamweaver 8网页制作教程与上机实训》，魏聪等编著，机械，人民邮电出版社
备注
难点
创建框架和框架集的方法
编辑框架和框架集的方法
设置框架和框架集属性的方法
要求掌握
的知识点和分析方法
要求掌握框架的概念、创建预定义框架集、拆分框架、手动自定义框架集、删除框架、保存框架、在框架中打开网页、选择框架集、设置框架集属性、选择框架、设置框架属性、设置框架中链接的目标窗口、插入浮动框架、创建无框架内容等知识点。
项目的主要目的是让学生掌握框架的基本使用方法。项目制作的论坛网页由4个框架组成：顶部框架、左侧框架、右上侧框架和右下侧框架。在具体创建时，可以先创建一个“上方固定，左侧嵌套”的框架集，然后再将右侧框架拆分成上下两个框架，并进行相关属性设置即可。在框架中显示的网页可以提前做好，也可以在框架中直接制做。由于具体的网页内容制作不是本项目的重点，因此，在框架中显示的页面均已提前做好，只需在框架中打开即可。
中等职业学校教案
教研室：
课程名称：网页设计与制作—Dreamweaver 8
任课教师：
XXXX学校教务处制
中等职业学校教案
第7次课2学时
章节
项目七使用框架布局论坛网页
讲授主
要内容
1.框架和框架集的含义及其作用
《网页制作》项目式教案
《网页制作》项目式教案一、教学目标1. 知识与技能：了解网页制作的基本概念和流程。
掌握HTML、CSS和JavaScript的基本语法和应用。
能够独立设计并制作一个简单的网页。
2. 过程与方法：通过案例分析和实践操作，培养学生的创新思维和团队协作能力。
学会使用网页制作工具，如网页编辑器和浏览器开发者工具。
学会利用网络资源，进行网页素材的搜索和整理。
3. 情感态度与价值观：培养学生的信息技术素养，提高他们对网络文化的认识和理解。
培养学生热爱科学、勇于探索的精神风貌。
培养学生团队协作、共同进步的合作意识。
二、教学内容1. 网页制作基本概念和流程网页的定义和特点网页制作的流程和步骤网页编辑器和浏览器开发者工具的使用2. HTML基本语法和应用HTML标签的概念和作用常用的HTML标签及其属性表格、表单和图片标签的使用3. CSS基本语法和应用CSS的选择器和语法结构常用的CSS属性和值盒子模型和布局控制4. JavaScript基本语法和应用JavaScript的概念和作用基本数据类型和运算符条件语句和循环语句5. 网页素材的搜索和整理网络资源的获取方法素材的选择和处理技巧素材的版权和合法使用三、教学重点与难点1. 教学重点：HTML、CSS和JavaScript的基本语法和应用。
网页制作的基本流程和步骤。
网页素材的搜索和整理方法。
2. 教学难点：JavaScript编程逻辑和函数的运用。
响应式网页设计和浏览器兼容性问题。
网页美化和创意设计。
四、教学方法与手段1. 教学方法：项目式教学法：以实际项目为主线，引导学生全程参与，培养实际操作能力。
案例教学法：通过分析典型案例，使学生更好地理解和掌握知识。
任务驱动法：布置具体的任务，让学生在完成任务的过程中学习和进步。
2. 教学手段：利用多媒体教室，进行PPT讲解和屏幕演示。
使用网络资源和教学平台，进行案例分析和在线交流。
利用网页制作工具和开发者工具，进行实践操作。
使用框架布局网页板书
使用框架布局网页
一、框架构成
框架
框架集
二、创建框架方法
方法一：从”新建文档“对话框中创建
方法二：从”布局“插入栏中创建
三、保存框架
方法：选择“文件”菜单点击“保存全部”。
四、选择框架方法如下：
方法一：在框架面板中选择
方法二：在编辑窗口某个框架内按住Alt键并单击鼠标，即可选择该框架。
五、设置超级链接
操作步骤
1.选中要设置为链接的文字或图片
2.在属性栏中单击“浏览文件”按钮选择文件
3.在“目标”下拉列表框中选择目标框架名称
六、小结
网页布局有框架
框架名称要记清
保存框架看虚线
链接目标要确定
属性设置不能少
基本操作要记牢
框架布局也不难。
Dreamweaver网页设计电子教案(全)完整版课件整套教学课件
第1章
本章内容目录
1. 9 插入Flash：在线游戏 1.10 插入视频和声音 1.11 本章小结 1.12 本章习题
第1章
1.1 基本操作
1.1.1 网页的基本概念
网页：通常是HTML格式（文件扩展名为.html或.htm）。网页通常用
图像来提供图画，网页要透过网页浏览器来阅读。
HTML语言：HTML的全称是Hyper Text Markup Language，中文翻译
框架主要用于将浏览器划分为多个窗口，在各个窗口中显示多个不同 的HTML文档。通过设定这些文档之间的相互关系，从而实现文档导 航和文档操作的目的。
框架技术主要有两种类型的 元素：一是框架集，另外一 个是框架。
基于框架技术制 作的BBS
第1章
1.7.2 上机操作
制作一个基本框架框架
在框架的左侧插入12行1列的表 格，在右侧插入2行1列的表格
4．表格一般被划分为_______、 _______、 _______ 3部分。
5．框架是由两种元素_______和_______组成。
第1章
二、选择题
1．创建虚拟链接使用的符号是：____
A.@
B.#
C.$
D.*
2．GIF格式的图像的有点有______ A.支持动画格式 B.持透明图标 C.无损压缩方式 D.支持24位真彩色
都可以
第2章
第2章 CSS样式表与模板
本章学习知识点
● 认识CSS ● 使用CSS编辑器 ● 背景样式的定义 ● 滤镜的使用
上 一 张
返 回
下 一 张
第2章
本章内容目录
2.1 文字和图像的处理：生日贺卡 2.2 CSS样式：独具风格的主页 2.3 对文字运用CSS滤镜：蓝色生死恋 2.4 对图像运用CSS滤镜：图片滤镜 2.5 层模板：海底世界 2.6 库项目的应用：公司主页 2.7 总结提高 2.8 本章习题
第13课《制作框架网页》教案
在本次《制作框架网页》的教学中，我发现学生们对于框架网页的概念和实际操作表现出很大的兴趣。他们很乐意探索如何将一个网页分割成多个部分，并且为每个部分加载不同的内容。这一点让我感到很欣慰，因为兴趣是学习最好的老师。
课堂上，我尝试通过实际案例和互动讨论的方式，让学生们更好地理解框架网页的优缺点以及在实际生活中的应用。从学生的反馈来看，这种方法是比较有效的，他们能够更快地掌握<frameset>和<frame>标签的使用，并且能够提出一些关于框架网页设计的创意。
二、核心素养目标
本节课旨在培养学生以下核心素养：
1.信息意识：通过学习制作框架网页，使学生能够主动探索网络信息，增强信息检索、筛选和整合能力；
2.计算思维：培养学生运用HTML语言构建网页框架，解决问题，提高逻辑思维和程序设计能力；
3.创新思维：鼓励学生在制作框架网页过程中，发挥创意，设计独特页面布局，提升创新意识和能力；
第13课《制作框架网页》教案
一、教学内容
第13课《制作框架网页》教案，教学内容源自教材《信息技术》六年级下册第五章第三节。本节课主要内容包括：
1.理解框架网页的概念及作用；
2.学习使用HTML标签创建框架集和框架；
3.掌握在框架中加载不同网页内容的方法；
4.了解框架网页的优缺点及适用场景；
5.实践操作：制作一个简单的框架网页，包含左右两个框架，分别显示不同内容。
-框架网页优缺点：通过对比分析，让学生明确框架网页在提高页面加载速度和便于维护的优点，以及不便于搜索引擎抓取等缺点。
2.教学难点
-理解框架集与框架之间的关系，并能灵活运用；
-掌握如何在框架中实现页面跳转和内容更新；
-解决框架网页在不同浏览器上的兼容性问题；
《网页制作》项目式教案
《网页制作》项目式教案一、教案简介本教案以项目式教学法为主线，通过一系列实践项目，让学生掌握网页制作的基本知识和技能。
学生将学习HTML、CSS、JavaScript等前端技术，并能运用这些技术制作出功能丰富、界面美观的网页。
二、教学目标1. 了解网页制作的基本概念和流程。
2. 掌握HTML、CSS、JavaScript三种前端技术的基本用法。
3. 能够独立完成一个简单的网页制作项目。
三、教学内容1. 网页制作基本概念：网页、网页元素、网页结构等。
2. HTML基本语法：标签、属性、注释等。
3. CSS样式表：选择器、属性、优先级、盒模型等。
4. JavaScript基本语法：变量、数据类型、运算符、函数等。
5. 网页布局与设计：浮动、定位、响应式设计等。
四、教学方法1. 项目式教学：以实际项目为载体，让学生在实践中学习。
2. 案例分析：分析经典案例，让学生了解实际应用。
3. 课堂讲解与练习：讲解理论知识，配合课后练习巩固所学。
4. 小组讨论与合作：培养学生团队协作能力，共同解决问题。
五、教学环境1. 硬件环境：计算机、投影仪、白板等。
2. 软件环境：文本编辑器（如Notepad++）、浏览器（如Chrome、Firefox）、网页设计软件（如Dreamweaver、Sublime Text等）。
六、教学评估1. 课堂参与度：观察学生在课堂上的积极参与程度，提问和回答问题的积极性。
2. 课后作业：评估学生完成的课后作业的质量，包括对HTML、CSS和JavaScript 的掌握程度。
3. 项目完成情况：评估学生在项目制作过程中的表现，包括网页设计、布局和功能实现。
4. 小组合作：评估学生在小组合作中的表现，包括团队协作能力和解决问题能力。
七、教学计划1. 第1周：网页制作基本概念和HTML基本语法。
2. 第2周：CSS样式表和网页布局与设计。
3. 第3周：JavaScript基本语法和案例分析。
中职《网页制作项目实训教程》教案-项目7 使用Div+CSS制作网页
________________________________网页制作项目实训教程 ______________________________________________________________广东省×××职业技术学校学科教案本Teaching Plan20 年———20 年学年度 学期The (1st/2na)Semester of the Academic Year from 20 to 20学校（School ）学科（Subject ） 年级（Grade ）教师（Teacher ）注意：①按住Ctrl 键后单击每个任务即可跳转到对应的教案 ②单击按钮可返回目录 ③页面设置参数为： 纸张：B5 页边距左：1.5 页边距右：1.5《网页制作项目实训教程》目录项目7 使用Div+CSS 制作网页任务1活动1 使用Div+CSS 对网页进行布局 活动2 制作导航栏 任务2活动1 新闻列表部分布局操作 活动2 制作新闻列表 任务3活动1 制作夏季新品区 活动2 制作分类导航区教学课题任务1 活动1 使用Div+CSS对网页进行布局课题类型理论+实作课时安排2上课时间教学目标1.灵活运用Div+CSS知识对网页进行布局操作教学重点1教学难点1辅助资源课件、多媒体、网络复习引入1.背景CSS样式。
2.background属性。
教学手段教学过程师生互动活动设计课件讨论实作一、教师布置活动要求根据所提供的网站首页效果图，使用Div+CSS完成页面的布局操作，完成后以“index.html”为文件名保存到“task7”文件夹，完成布局的页面效果示意图如下图所示。
布置任务：让学生明确本次课的内容教学课题任务1 活动2 制作导航栏课题类型理论+实作课时安排2上课时间教学目标1.进一步巩固项目列表的使用2.灵活运用所学知识完成导航栏的制作教学重点1、2教学难点2辅助资源课件、多媒体、网络复习引入1.Div+CSS网页布局思想的运用。
网页设计电子教案项目备课
项目一网页概述【项目描述】在学习制作一个网页之前，首先应该了解一些网页和网站的基本知识，培养对网页设计与制作这门学科的兴趣，了解常用的网页制作工具，熟悉网站开发的工作流程。
【教学目标】1.师生互动，讲解网页设计与制作这门学科的发展前景，培养起学生的兴趣。
2.了解Web的起源、特征和基本结构。
3.掌握web的常用术语。
4.了解网页制作工具，掌握红蜻蜓抓图软件和Microsoft Office Visio 2007的基本功能。
5.熟悉网站开发的工作流程。
6.浏览器与HTML。
【项目分配】任务一讲解网页设计与制作这门学科的发展前景。
（1课时）任务二认识网页制作软件。
（1课时）任务三网站规划。
（2课时）任务四Web简介。
（1课时）任务五用html代码编写“我的第一个网页”的网页。
（1课时）任务二认识网页制作软件（1课时）一、【教学目标】知识目标：通过介绍网页制作软件三剑客FrontPage、Fireworks、Dreamweaver各自的功能以及优缺点后，带领学生认识并学会使用红蜻蜓抓图软件和Microsoft Office Visio 2007的基本功能。
技能目标：选择一个网页，教学生使用红蜻蜓抓图软件，分结构的把网页各部分抓到Microsoft Office Visio 2007页面中，完成网页的布局，为下一任务的学习打下坚实的基础，要求每位同学完成一个网页抓图、布局。
情感目标：通过本次学习后，能培养学生对网页制作软件的进一步了解，增强学生学习网页设计的兴趣和欲望，熟知网页制作软件给我们设计网页带来的便捷。
二、【教学重点】1．认识网页制作软件三剑客FrontPage、Fireworks、Dreamweaver各自的功能以及优缺点。
2．认识并学会使用红蜻蜓抓图软件和Microsoft Office Visio 2007的基本功能。
三、【教学难点】学会使用红蜻蜓抓图软件和Microsoft Office Visio 2007的基本功能。
项目七 框架-布局论坛网页-PPT
项目七 框架──布局论坛网页
任务一 创建论坛框架网页 任务二 设置论坛框架网页
实训 使用框架布局“校园论坛”网 页
框架也是网页布局的工具之一，它能够将网 页分割成几个独立的区域，每个区域显示独立的 内容。框架的边框还可以隐藏，从而使其看起来 与普通网页没有任何不同。本项目将以论坛网页 为例，介绍创建、编辑和保存框架以及设置框架 属性的基本方法。在项目中，首先创建一个“上 方固定，左侧嵌套”的框架集，然后再将右侧框 架拆分成上下两个框架，并进行相关属性设置。
实训 使用框架布局“校园论坛”网 页
本项目主要介绍了使用框架布局网页 的基本方法，本实训将让读者进一步巩固 所学的基本知识。 制作“送孟浩然之广陵”网页 要求：把“项目实训\素材”文件夹下 的内容复制到站点根文件夹下，然后使用 框架布局如图所示网页。
制作“送孟浩然之广陵”网页
小结
本项目以论坛网页为例，介绍了创建和保存框架网页以 及设置框架集和框架属性的基本方法。通过本项目的学习， 读者应该掌握创建框架页面的基本方法，还要了解在什么情 况下使用框架以及根据不同的情况设置框架集和框架的属性。 另外，还要掌握在框架中超级链接目标窗口的设置方法，针 对不支持框架技术的浏览器编辑无框架内容网页的方法以及 在网页中插入浮动框架的方法等。
2、创建预定义框架集
创建预定义框架集的方法如下： （1）在主菜单中选择【文件】/【新建】命令打开 【新建文件】对话框，在【常规】选项卡中选择【框架 集】命令。 （2）在【起始页】中选择【从范例创建】/【框架 集】命令。 （3）在当前网页中单击【插入】面板中的【框架】 工具按钮。 （4）在当前网页中选择主菜单中的【插入】/ 【HTML】/【框架】命令。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
难点
创建框架和框架集的方法
编辑框架和框架集的方法
设置框架和框架集属性的方法
要求掌握
的知识点和分析方法
要求掌握框架的概念、创建预定义框架集、拆分框架、手动自定义框架集、删除框架、保存框架、在框架中打开网页、选择框架集、设置框架集属性、选择框架、设置框架属性、设置框架中链接的目标窗口、插入浮动框架、创建无框架内容等知识点。
中等职业学校教案
教研室：
课程名称：网页设计与制作—Dreamweaver 8
任课教师：
XXXX学校教务处制
中等职业学校教案
第7次课2学时
章节
项目七使用框架布局论坛网页
讲授主
要内容
1.框架和框架集的含义及其作用
2.创建框架和框架集的基本方法
3.编辑框架和框架集的基本方法
4.设置框架和Biblioteka 架集属性的方法重点授课思路，采用的教学方法和辅助手段，板书设计，重点如何突出，难点如何解决，师生互动等
1、教师演示教学案例。
2、通过PPT课件讲授基本知识。
3、让学生自己动手重新制作教学案例。
4、通过实训让学生进一步熟悉所学知识。
作业布置
作业：一～二
主要
参考资料
《网页设计与制作——Dreamweaver 8》，王君学、田明编著，人民邮电出版社
《中文Dreamweaver 8网页制作教程与上机实训》，魏聪等编著，机械工业出版社
《非常容易Dreamweaver 8网页制作》，导向科技编著，人民邮电出版社
备注