网页设计与制作微课教程教学设计教学教案_第1页
网页设计与制作微课教程教学设计教学教案_第2页
网页设计与制作微课教程教学设计教学教案_第3页
网页设计与制作微课教程教学设计教学教案_第4页
网页设计与制作微课教程教学设计教学教案_第5页
已阅读5页，还剩79页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

课程介绍课程名称网页设计与制作开课时间第二学期、第三学期周课时4总学课时64上课周数16课程性质专业必修课理论课时32实践课时32学分4考核方式过程性考核+终结性考核使用教材（名称、版本、出版社、主编等）青椒小助手教学条件教学做一体化教室主要参考资料《精通CSS与HTML设计模式》［美］鲍尔斯著刘申等译DIV+CSS网站布局案例精粹（第2版），清华大学出版社，闫睿编授课对象专业：电子商务、网络营销、计算机网络技术、多媒体技术、动漫设计与制作、计算机应用技术、软件技术等年级：大学二年级课程内容摘要（不够可附页）“网页设计与制作”课程是电子商务类专业、计算机类专业、多媒体技术等专业的一门必修课程，也是其他专业学生深受喜爱的一门职业技能拓展课程。本课程通常在第三学期开设，主要内容包括HTML5基础、网页设计与制作基础知识、CSS样式表定义和应用、网页基本元素、网页布局技术、多媒体网页设计制作、网页模板设计制作、DIV+CSS静态网站设计制作、JaveScript基础、静态网站维护与推广等。其前导课程是图形图像处理技术、动画设计制作等，其后续课程电子商务网站建设、网站建设与维护等。备注：1.课程性质：公共必修课、公共选修课、专业必修课、专业选修课。2.考核方式：考试、考查3.课程内容摘要：主要介绍该课程的内容、教学目的及达到的教学效果。单元教学首页

授课题目单元1网页设计与制作基础总课时4教学方法任务驱动、案例分析、小组合作、讲练结合等授课地点教学做一体化教室教学目标知识目标.了解网页、网站的概念及相关的基本知识；.掌握网站建设的一般流程；.了解HTML概念，掌握HTML基本语法与结构；.熟悉常用的HTML标签，理解各种标签的使用方法。能力目标.掌握网页框架编写技能；.能够使用记事本完成简单网页的编写与保存。职业素质目标.培养学生小组合作、积极进取的精神；.引导和发展学生求同和求异思维；.具有流程化、规划化、标准化做事的意识。教学重点网页的类型，网页基本构成元素；网站建设的一般流程；HTML基本语法与结构；HTML常用标签的使用方法。教学难点HTML基本语法与结构；HTML常用标签的使用方法。授课进度第1讲（共2讲）授课情景名称情景1:认识网页与网站情景2：网站建设的一般流程教学内容设计（体现教学步骤，包括时间分配和教学内容教学进程）教学环节教学内容教学方法教手学生活动时间分配引入、告知（教学内容、目的）.首次课，做课程介绍；（约10分钟）.提出课前安排的预习任务；.提问概念性的问题，了解学生课前预习情况；.引出本次课的教学任务。讲授法、问答法、参与式教学法教学做一体化头脑风暴、学生回答15分钟授课（突出教学内容要点，掌握基本知识和技能）任务目标：.认识什么是网页，熟悉网页类型和网页基本构成元素；.了解设计制作网页常用的软件和技术；.认识什么是网站，理解网站的网址与域名。教学要点：.什么是网页？.网页类型：静态网页、动态网页。.网页基本元素：文本、图像、音频、视频、动画和超链接等。.网页的构成：由一些基本版块组成的，主要包括Logo图标、导航条、Banner、内容版块、版尾版块等。.网页设计常用基本语言：HTML、CSS、JavaScript是网页设计制作最核心也是最基本应用技术。.什么是网站？任务驱动、讲练在A土口口教学做一体化、信息化教学小组讨论、随堂测试45分钟.网址与域名。.网站建设的一般流程：网站策划-收集网站的素材和内容-设计制作网站-网站测试与发布-网站推广与维护。课堂演练实训任务：上网浏览不同类似、不同风格的网站和网页，对各类网站页面特色做出归纳性总结。任务驱动、参与式教学法教学做一体化小组合作、任务完成情况汇报25分钟总结（本堂课的要点归纳，应写出结论性的文字）由学生对本次课学习的内容进行归纳总结，教师根据学生总结的内容做补充说明，强调本节课所学的重点知识和难点知识。5分钟布置作业（理论或实践）.基本作业完成在线课程网站发布的课后复习题。.知识拓展性作业利用课外时间，在线查阅并分析营销宣传类网站的页面风格特点及内容宣传方式。教学后记备注：1.教案编写要求，请参考《教案编写规范》（文件编号zy/jwc-13）。.教学手段：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等。.教学方法：（讨论、启发、演示、辩论、讲练结合等）。.授课：内容不照本宣科，不满堂灌，注重引导学生思考问题、研究问题、解决问题。.教学后记：课后由教师手动填写，对该堂课教后的感受及学生的收获、改进方法等。授课进度第2讲(共2讲)授课情景名称使用HTML制作简单的网页教学内容设计(体现教学步骤，包括时间分配和教学内容教学进程)教学环节教学内容教方教学手段学生活动时间分配引入、告知(教学内容、目的).检查课前预习情况一一HTML5简介.通过翻转课堂方式导入本次课的教学任务明确本节课的学习任务：(1)掌握HTML5的基本语法和文档结构；(2)HTML5常用的标签及标签主要属性；(3)能够通过HTML制作简单的网页。任务驱动、案例分析翻转课堂、教学做一、小组合作头脑风暴、学生回答5分钟授课(突出教学内容要点，掌握基本知识和技能)教学内容1：HTML5的基本语法与结构：(1)HTML5的基本语法HTML5的语法主要由标签(tag)和属性(attribute)组成。所有标签都由一对尖括号和“>”括起来。①双标签。双标签是指由开始和结束两个标签符号组成的标签，其语法格式：<x>受控内容</x>②单标签。单标签也称空标签，指用一个标签符号即可完整的描述某个功能的标签。其语法格式：<x>(2)网页的HTML结构HTML文件的主体结构由<html>、<head>和<body>3对标签组成。<html><head>任务驱动、案例分析、参与式教学法教学做一体化、信息化教学小组讨论、随堂测试40分钟头部信息：如<title>、vmeta>等</head><body>文档主体</body></html>教学内容2：常用的HTML5标签文本与段落标签、列表标签、超链接标签、图像标签、表格标签、表单标签等。课堂演练任务1：使用记事本编辑简单网页操作步骤：打开记事本，在记事本中输入下面的HTML代码，将其以chOl-1为文件名、以.html为文件扩展名进行保存。任务2：制作滚动图片链接通过本任务的训练，用户能够进一步掌握HTML文档结构，了解制作滚动图片链接的基本方法，理解在网页中添加图像元素时，正确使用相对路径和绝对路径的重要性。以小组为单位，汇报实训任务完成情况，展示实训结果，教师逐一检查并进行评价。任务驱动、实践演练、小组合作做中练、信息化教学头脑风暴、小组合作完成演练任务40分钟总结（本堂课的要点归纳，应写出结论性的文字）本次课学习了HTML5的基本语法和文档结构，介绍了HTML5常用的标签及标签主要属性，通过课堂演练，学生能通过HTML制作简单的网页，并以小组为单位进行了汇报。较好地完成了本次课的教学任务，达到了预期的教学目标。5分钟布置作业（理论或实践）设计制作个人母校概况的简单页面教学后记授课题目单元2网页版式设计与色彩搭配总课时4教学方法任务驱动、案例分析、小组合作、讲练结合等授课地点教学做一体化教室教学目标知识目标.了解网页版式设计的风格、原则和步骤；.理解色彩的基本理论和视觉效果；.掌握网页配色原理及网页配色技巧。能力目标.具备独立完成网站合理配色的能力；.具备分析问题、解决问题的能力。职业素质目标.具有一定的审美观、鉴赏能力；.具有小组合作、积极进取的精神。教学重点•色彩的基本理论和视觉效果；•网页配色原理及配色技巧。教学难点•网页版式设计；•网页配色技巧。

授课进度第1讲（共2讲）授课情景名称网页版式设计教学内容设计（体现教学步骤，包括时间分配和教学内容教学进程）教学环节教学内容教学方法教手学生活动时间分配引入、告知（教学内容、目的）.复习上次课讲授的重点内容.打开准备好的几个网站案例，分别进行展示，要求学生注意观察下面的两个问题：（1）注意观察不同网站的配色特色；（2）注意观察不同风格网站的版式特点。让学生带着好奇和问题，接受本次课的学习。讲授法、问答法、参与式教学法教学做一体化头脑风暴、学生回答10分钟授课（突出教学内容要点，掌握基本知识和技能）案例分析：不同风格网页作品欣赏与解析给出几个有代表性的网页，通过对它们的赏析，认识不同风格网页的特点。学习任务一：网页版式设计（1）掌握版式设计的概念；（2）认识版式设计在网页设计中的重要性；（3）了解常见的网页版式设计风格。.版式设计概述.网页版式的尺寸和构成要素.网页的版式设计风格.网页版式设计原则.网页版式设计的视觉流程.网页版式设计的步骤1）构思。2）粗略布局。3）完善布局。4）深入优化。任务驱动、讲练在人土口口教学做一体化、信息化教学小组讨论、随堂测试35分钟学习任务二：色彩的基本理论及其视觉效果了解色彩的基本概念以及色彩的视觉效果；（2）掌握光的三原色理论；（3）掌握色彩的三个基本属性。.色彩的基本理论.色彩的视觉效果1）色彩的心理感觉2）色彩的冷暖3）色彩的软硬4）色彩的进退5）色彩的大小学习任务三：网页中的色彩及配色（1）了解网页色彩的概念；（2）掌握在网页中色彩的数字表达方式；（3）掌握网页的配色原理及技巧。.网页色彩.网页中色彩的作用1）划分视觉区域2）引导主次3）烘托主旨.网页配色原理1）色彩的适合性2）色彩的鲜明性3）色彩的独特性3.网页配色技巧遵循一定的原则和技巧：（1）使用一种色彩。（2）使用邻近色。（3）使用对比色。

4.非彩色搭配课堂演练任务1：总结不同主题网站的配色风格。访问/moban/,在右侧的模板分类中选择相应主题的网站，总结不同主题网站的配色风格。任务2：网页配色练习尝试按照春夏秋冬不同季节的风格对其进行配色。任务驱动、讲练A用口等教学做一体化小组合作、实战演练40分钟总结（本堂课的要点归纳，应写出结论性的文字）根据学生讨论的结果进行分析说明，然后进行补充、强调本节需要掌握的重点和难点知识。网站按主题，主要分为教育类网站、政府类网站、科技类网站、商务类网站等。同类型的网站在页面设计上有很大的相似性。5分钟布置作业（理论或实践）.基本作业完成在线课程网站发布的课后复习题。.知识拓展性作业要求学生利用课余时间上网浏览各类，分析网站的配色方案和布局特点，进一步提升鉴别不同网站风格的能力。教学后记备注：1.教案编写要求，请参考《教案编写规范》（文件编号zy/jwc-13）。.教学手段：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等。.教学方法：（讨论、启发、演示、辩论、讲练结合等）。.授课：内容不照本宣科，不满堂灌，注重引导学生思考问题、研究问题、解决问题。.教学后记：课后由教师手动填写，对该堂课教后的感受及学生的收获、改进方法等。授课进度第2讲（共2讲）授课情景名称校友网首页效果图设计教学内容设计（体现教学步骤，包括时间分配和教学内容教学进程）教学环节教学内容教方教学手段学生活动时间分配引入、告知（教学内容、目的）检查上次所讲内容，本次课的预习情况通过翻转课堂方式导入本次课的教学任务引入本次课学习任务：校友网首页效果图设计任务驱动、案例分析翻转课堂、教学做一、小组合作头脑风暴、学生回答5分钟授课（突出教学内容要点，掌握基本知识和技能）学习任务：校友网首页效果图设计（1）掌握骨骼式网页版式设计的方法；（2）熟悉网站色彩搭配技巧；（3）掌握使用Photoshop设计首页效果图的操作技巧。带领学生分析校友网首页效果图的结构和配色特点。任务驱动、案例分析、参与式教学法教学做一体化、信息化教学小组讨论、随堂测试25分钟课堂演练实训演练：校友网首页效果图设计（1）确定校友网首页设计风格；（2）确定校友网首页内容呈现方式；（3）确定校友网首页色彩搭配：（4）通过Photoshop进行网页配色；（5）分组完成实训任务。任务拓展：网页版式、网页配色原则归纳总结（1）分组归纳总结网页版式设计原则；（2）分组归纳总结不同主题类型网站页面讲练在人幻口举例讲解完成实训内容45分钟配色基本原则。（3）以小组为单位进行汇报。总结（本堂课的要点归纳，应写出结论性的文字）以小组为单位，归纳总结所学知识，展示实训结果，教师逐一检查并进行评价。15分钟布置作业（理论或实践）教学后记备注：1.教案编写要求，请参考《教案编写规范》（文件编号zy/jwc-13）。.教学手段：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等。.教学方法：（讨论、启发、演示、辩论、讲练结合等）。.授课：内容不照本宣科，不满堂灌，注重引导学生思考问题、研究问题、解决问题。.教学后记：课后由教师手动填写，对该堂课教后的感受及学生的收获、改进方法等。授课题目单元3DreamweaverCC工具的使用总课时4教学方法任务驱动、案例分析、小组合作、讲练结合等授课地点教学做一体化教室教学目标知识目标熟悉DreamweaverCC的界面布局；掌握DreamweaverCC面板或者面板组的基本操作方法；掌握DreamweaverCC常用初始化设置；掌握DreamweaverCC中创建、保存及预览网页的方法；理解本地站点和远程站点的含义；掌握站点的规划原则；掌握创建与管理站点的方法；掌握页面属性设置的方法。能力目标.能够安装DreamweaverCC并进行初始化设置；.能够在DreamweaverCC中创建简单网页并保存和预览；.能够在DreamweaverCC中创建本地站点并能管理站点；.能够对网页进行页面属性的设置。职业素质目标.熟悉网站设计行业职业道德规范；.具备良好的职业道德和沟通交流能力；.具备独立思考和认真钻研的良好品质；.通过小组合作能够完成安排的学习任务。教学重点DreamweaverCC界面布局；DreamweaverCC中创建、保存及预览网页的方法；DreamweaverCC中创建站点的方法；页面属性设置的方法。教学难点•DreamweaverCC中创建站点的方法；•页面属性设置的方法。

授课进度第1讲（共2讲）授课情景名称认识中文版DreamweaverCC教学内容设计（体现教学步骤，包括时间分配和教学内容教学进程）教学环节教学内容学法教方教学手段学生活动时间分配引入、告知（教学内容、目的）引入新课：.案例分析通过在DreamweaverCC中展示"欢迎光临”网站，让学生们初步认识DreamweaverCC界面布局。.提出问题DreamweaverCC的操作区域主要有几种视图方式？如何对DreamweaverCC进行个性化设置？.介绍本次课的教学目标、教学重点和难点。案例分析、任务驱动、讲练结合等教学做一体化、多媒体教学等课前预习、小组合作等10分钟授课（突出教学内容要点，掌握基本知识和技能）任务3.1认识中文版DreamweaverCCDreamweaverCC的界面布局，了解菜单栏、文档窗口、文档工具栏、工具栏、状态栏、“属性”面板和其他面板组的功能，了解面板组的调整操作。DreamweaverCC初始化设置。通过“首选项”菜单命令，对Dreamweaver做常规、CSS样式、代码提示、代码格式、应用程序内更新、新建文档、界面等初始化操作。边学边练：在DreamweaverCC中创建、保存简单文本网页文件。说明：详情的教学内容见本次课的PPT文档翻转课堂、任务驱动、案例分析、讲练在八用口等教学做一体化、混合式教学模式等小组合作、抢答、随机提问等40分钟课堂演练.任务拓展：制作“自我介绍”简单文本网页，并在浏览器中进行预览。.单元技能实战演练：以小组为单位，认识DreamweaverCC操作界面，对软件做个性化设置，并完成简单文本页面的制作。任务驱动、讲练结合等教学做一体化小组合作、实战演练35分钟总结（本堂课的要点归纳，应写出结论性的文字）以小组为单位，通过提问学生，总结本次课的学习内容。教师重点对本次课学习的在Dreamweaver界面与个性化设置、创建并保存预览网页等内容进行归纳总结，强调本次课的重点和难点知识和技能要求，并针对本次课的学习内容，做好课外作业的统筹安排。5分钟布置作业（理论或实践）.基本作业：利用课外时间，学生们完成本次课对应的课后习题。.举一反三：以小组为单位，利用课外时间完成“我的家乡”简单网页中文本内容的制作。教学后记按照授课计划完成本次课的教学任务。在教学过程中，注重职业规范等课程思政育人元素的融入，突出小组合作、学生遵守职业规范与流程的培养。通过学生们上机实训和完成的作业情况来看，学生们基本掌握了本单元任务的教学内容。备注：1.教案编写要求，请参考《教案编写规范》（文件编号zy/jwc-13）。.教学手段：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等。.教学方法：（讨论、启发、演示、辩论、讲练结合等）。.授课：内容不照本宣科，不满堂灌，注重引导学生思考问题、研究问题、解决问题。.教学后记：课后由教师手动填写，对该堂课教后的感受及学生的收获、改进方法等。授课进度第2讲（共2讲）授课情景名称任务3.2规划与创建站点教学内容设计（体现教学步骤，包括时间分配和教学内容教学进程）教学环节教学内容学法教方教学手段学生活动时间分配引入、告知（教学内容、目的）引入新课：.案例分析通过在DreamweaverCC中展示"欢迎光临”网站，让学生们初步认识DreamweaverCC站点的意义。.提出问题为什么要在DreamweaverCC中创建站点？如何在DreamweaverCC中创建站点？.介绍本次课的教学目标、教学重点和难点。案例分析、任务驱动、讲练结合等教学做一体化、多媒体教学等课前预习、小组合作等10分钟授课（突出教学内容要点，掌握基本知识和技能）任务3.2规划与创建站点.认识本地站点与远程站点在Dreamweaver中，网页设计都是以一个完整的Web站点为基本对象，所有资源的改变和网页的编辑都在此站点中进行。.规划站点的原则（1）构建层次清晰的文档结构。（2）优化网站的链接结构。（3）规划规范、统一的网页布局。.边学边练：创建本地站点.边学边练：管理站点（1）编辑站点（2）复制站点（3）删除站点（4）导出与导入站点.设置页面属性翻转课堂、任务驱动、案例分析、讲练在人）口口等教学做一体化、混合式教学模式等小组合作、抢答、随机提问等40分钟通过“页面属性”对话框设置当前被编辑网页文档的整体属性，包括网页的标题、背景图像、正文中各种元素的颜色等内容。说明：详情的教学内容见本次课的PPT文档课堂演练.任务拓展：参考着教材说明，制作“欢迎光临”网页，并设置网页属性。.单元技能实战演练：以小组为单位，通过DreamweaverCC软件完成“我的网上家园”页面的制作。任务驱动、讲练狂A5口口等教学做一体化小组合作、实战演练35分钟总结（本堂课的要点归纳，应写出结论性的文字）以小组为单位，通过提问学生，总结本次课的学习内容。教师重点对本次课学习的在Dreamweaver中创建站点、设置页面属性等内容进行归纳总结，强调本次课的重点和难点知识和技能要求，并针对本次课的学习内容，做好课外作业的统筹安排。5分钟布置作业（理论或实践）.基本作业：利用课外时间，学生们完成本次课对应的课后习题。.举一反三：以小组为单位，利用课外时间完成“我的家乡”简单网页的制作，重点要求在Dreamweaver中建立站点并通过页面属性进行页面美化。教学后记按照授课计划完成本次课的教学任务。在教学过程中，注重职业规范等课程思政育人元素的融入，突出小组合作、学生遵守职业规范与流程的培养。通过学生们上机实训和完成的作业情况来看，学生们基本掌握了单元3的教学内容。备注：1.教案编写要求，请参考《教案编写规范》（文件编号zy/jwc-13）。.教学手段：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等。.教学方法：（讨论、启发、演示、辩论、讲练结合等）。.授课：内容不照本宣科，不满堂灌，注重引导学生思考问题、研究问题、解决问题。.教学后记：课后由教师手动填写，对该堂课教后的感受及学生的收获、改进方法等。授课题目单元4CSS3样式总课时4教学方法任务驱动、案例分析、小组合作、讲练结合等授课地点教学做一体化教室教学目标知识目标了解CSS的基本语法和样式表类型；掌握CSS样式的创建与属性设置；掌握CSS样式表的编辑及引用；掌握应用CSS美化网页的方法。能力目标.能定义四种CSS样式表；.能通过CSS样式编辑网页。职业素质目标具有网站设计行业职业道德规范；具备良好的职业道德和沟通交流能力；具备独立思考和认真钻研的良好品质；具有小组合作、勇于创新的品质。教学重点•CSS样式表的创建、编辑和应用；•使用CSS美化网页。教学难点•使用CSS样式编辑、美化网站页面。

授课进度第1讲（共2讲）授课情景名称定义和应用CSS3样式教学内容设计（体现教学步骤，包括时间分配和教学内容教学进程）教学环节教学内容教学方法教手学生活动时间分配引入、告知（教学内容、目的）提问学生的问题：网站站点创建需要注意的问题是什么？教师根据上机实训出现的问题及学生回答的问题，进行解说，并把上次课重点建设的内容进行概述。任务目标：（1）认识CSS3样式，了解使用CSS样式的发展历史；（2）掌握CSS3样式的分类；（3）掌握CSS3的基本语法；（4）能够使用CSS样式面板管理CSS3样式。案例分析、任务驱动、讲练在A用口等翻转课堂、教学做一体化课前预习、小组合作等10分钟授课（突出教学内容要点，掌握基本知识和技能）.CSS3样式设置规则。在DreamweaverCC中，对CSS3样式的管理主要通过“CSS设计器”面板完成。选择“窗口一CSS设计器”菜单命令或按<Sh流+F11>组合键，展开“CSS设计器”面板中进行详细设置。.定义CSS3选择器一个CSS样式表一般由若干样式规则组成，每个样式规则都可以看成是一条CSS的基本语句，每个规则都包含一个选择器（例如body,p等）和写在花括号里的声明，这些声明通常是由几组用分号分隔的属性和值组成。翻转课堂、任务驱动、案例分析、讲练A用口等教学做一体化、混合式教学模式等小组合作、抢答、随机提问等40分钟CSS3标签选择器；CSS3类别选择器；CSS3ID选择器；CSS3复合选择器。.CSS3样式的调用CSS3样式可以使用多种方法调用。(1)行内样式表；(2)内部样式表；(3)外部样式表；(4)导入样式表。.布局和定义CSS3基础样式可以通过“CSS设计器”面板添加CSS样式，然后在属性面板中配置CSS样式的属性。讲解创建CSS样式的步骤。.链接或导入外部CSS3样式使用“CSS设计器”面板，可以将外部的CSS3样式文件应用到当前页面中。讲解链接外部样式表的具体方法。.查看CSS3样式通过“CSS设计器”面板，可以查看当前文档所使用的CSS样式。.编辑与删除CSS3属性通过“CSS设计器”面板，可以对CSS样式进行编辑和删除等操作。.常用CSS3属性及值设置说明：详情的教学内容见本次课的PPT文档

课堂演练训练任务：使用CSS3控制图片及文本样式通过任务学习，掌握创建CSS3样式，并使用CSS3样式美化网页中的文字和图片的操作步骤。以小组为单位完成训练任务，并汇报任务完成情况。任务驱动、讲练结合等教学做一体化小组合作、实战演练35分钟总结（本堂课的要点归纳，应写出结论性的文字）由学生对本次课学习的内容进行归纳总结，教师根据学生总结的内容做补充说明，强调本节课所学的重点知识和难点知识。5分钟布置作业（理论或实践）.基本作业通过在线课程测试CSS3样式基本知识的掌握情况。.知识拓展性作业（1）使用CSS3样式完成网页图文混排；（2）预习CSS3高级特性。教学后记备注：1.教案编写要求，请参考《教案编写规范》（文件编号zy/jwc-13）。.教学手段：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等。.教学方法：（讨论、启发、演示、辩论、讲练结合等）。.授课：内容不照本宣科，不满堂灌，注重引导学生思考问题、研究问题、解决问题。.教学后记：课后由教师手动填写，对该堂课教后的感受及学生的收获、改进方法等。授课进度第2讲（共2讲）授课情景名称.情景1：CSS3高级特性.情景2：使用CSS3样式设计新浪头条新闻教学内容设计（体现教学步骤，包括时间分配和教学内容教学进程）教学环节教学内容学法教方教学手段学生活动时间分配引入、告知（教学内容、目的）.通过提问，复习上节课对CSS3样式表基本知识的学习；.通过提问，了解学生课前预习情况。.提出新的学习任务：CSS3高级特性任务目标：①了解CSS3新增选择器；②掌握CSS3的基础性和层叠性；③掌握CSS3的优先级设置规则。（2）使用CSS3样式设计新浪头条新闻案例分析、任务驱动、讲练结合等教学做一体化问题抢答、小组合作等10分钟授课（突出教学内容要点，掌握基本知识和技能）CSS3的新增选择器选择器是CSS3的重要概念，使用选择器可以提升设计人员的编程效率。在任务1中已经介绍了CSS3的基本选择器，通过这些选择器，能够满足基本的设计需求。通过CSS3的新增选择器，可以在网页设计过程中实现更复杂的效果。讲解CSS3新增选择器及其特点CSS3特性（1）继承性（2）层叠性（3）优先级对于CSS3优先级使用的规则如下：对于基本选择器，优先级权重从高到低翻转课堂、任务驱动、案例分析、讲练结合等教学做一体化、混合式教学模式等小组合作、抢答、随机提问等35分钟依次为id选择器、类别选择器、标记选择器；行内样式优先级最高，即应用style属性的元素，其行内样式的优先级高于选择器的优先级；权重相同时，CSS遵循就近原则，即越靠近元素的样式优先级最高。说明：详情的教学内容见本次课的PPT文档课堂演练任务1：使用CSS3设置文字特效添加文字，并使用CSS选择器为文字添加不同的效果。任务2：使用CSS3样式设计新浪头条新闻模仿新浪新闻网页，实现图文混排及新闻排行效果。新闻图片位于网页左侧，标题和新闻列表位于右侧。案例使用float属性设置图片的左浮动，使用margin属性设置图片和文字间距，使用hl标记设置标题样式，使用line-height属性设置段落行高。作品展示：以小组为单位汇报任务完成情况。任务驱动、讲练结合等教学做一体化小组合作、实战演练40分钟总结（本堂课的要点归纳，应写出结论性的文字）以小组为单位，通过提问学生，总结本次课的学习内容。教师对本节课所涉及的CSS3选择器等知识点进行总结，分析学生在知识学习过程中存在的问题，探讨解决方法。5分钟布置作业（理论或实践）.基本作业完成在线课程网站发布的课后复习题。.预习任务完成单元5任务单中的预习任务。教学后记授课题目单元5网页文本和图像总课时4教学方法任务驱动、案例分析、小组合作、讲练结合等授课地点教学做一体化教室教学目标知识目标掌握在Dreamweaver中为网页文档添加文本元素的方法；掌握在Dreamweaver中创建列表及设置列表符号或编号的方法；掌握使用CSS设置文本样式的方法；了解网页中常用的图像格式及特点；掌握在网页中添加图像及图像对象的方法；掌握设置图像属性，以及用CSS设置图像样式的方法。能力目标能够在网页中正确添加段落、标题等文本元素；能够在网页中正确创建列表并设置列表属性；能够使用CSS样式美化网页文本元素；能够在网页中正确添加图像元素；能够用CSS美化网页图像；能够对图像和文本进行简单编排。职业素质目标熟悉网站设计行业职业道德规范；具备良好的职业道德和沟通交流能力；具备独立思考和认真钻研的良好品质；通过小组合作能够完成安排的学习任务。教学重点用CSS设置文本样式的方法；用css设置图像样式的方法；对图像和文本进行简单编排。教学难点用css设置文本样式的方法；用CSS设置图像样式的方法；对图像和文本进行简单编排。

授课进度第1讲（共2讲）授课情景名称制作文本类网页教学内容设计（体现教学步骤，包括时间分配和教学内容教学进程）教学环节教学内容学法教方教学手段学生活动时间分配引入、告知（教学内容、目的）引入新课：.案例分析通过展示“唐诗赏析”网页，向学生介绍网页中文本元素的类型和特点。.提出问题网页中文本元素的类型有哪些？不同类型文本元素如何添加？如何对文本元素进行美化？.介绍本次课的教学目标、教学重点和难点。案例分析、任务驱动、讲练结合等教学做一体化、多媒体教学等课前预习、小组合作等10分钟授课（突出教学内容要点，掌握基本知识和技能）任务5.1制作文本类网页.在网页中添加文本元素（1）输入文本（2）复制文本.在网页中创建与设置列表（1）创建列表（2）创建嵌套列表（3）修改列表项目符号或编号.边学边练：制作唐诗赏析网页.设置网页文本属性.边学边练：使用CSS美化唐诗赏析网页文本说明：详情的教学内容见本次课的PPT文档翻转课堂、任务驱动、案例分析、讲练在人）口口等教学做一体化、混合式教学模式等小组合作、抢答、随机提问等40分钟课堂演练.任务拓展：为“唐诗赏析”插入特殊字符、水平线和日期。.单元技能实战演练：以小组为单位，在DreamweaverCC中完成"唐诗赏析”页面的制作，请自选一首唐诗进行分享。任务驱动、讲练结合等教学做一体化小组合作、实战演练35分钟总结（本堂课的要点归纳，应写出结论性的文字）以小组为单位，通过提问学生，总结本次课的学习内容。教师重点对本次课学习的网页中文本元素的类型、添加方法及CSS美化方法等内容进行归纳总结，强调本次课的重点和难点知识和技能要求，并针对本次课的学习内容，做好课外作业的统筹安排。5分钟布置作业（理论或实践）.基本作业：利用课外时间，学生们完成本次课对应的单元课后习题。.举一反三：以小组为单位，利用课外时间，继续对“我的家乡”网页进行文本格式设置与样式美化。教学后记按照授课计划完成本次课的教学任务。在教学过程中，注重合理引用素材文本等课程思政育人元素的融入，突出小组合作、学生遵守职业规范与流程的培养。通过学生们上机实训和完成的作业情况来看，学生们基本掌握了本单元网页文本元素部分的教学内容，但是对网页文本元素的美化效果，还需进一步通过练习加以提升。备注：1.教案编写要求，请参考《教案编写规范》（文件编号zy/jwc-13）。.教学手段：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等。.教学方法：（讨论、启发、演示、辩论、讲练结合等）。.授课：内容不照本宣科，不满堂灌，注重引导学生思考问题、研究问题、解决问题。.教学后记：课后由教师手动填写，对该堂课教后的感受及学生的收获、改进方法等。授课进度第2讲（共2讲）授课情景名称在网页中插入图像教学内容设计（体现教学步骤，包括时间分配和教学内容教学进程）教学环节教学内容学法教方教学手段学生活动时间分配引入、告知（教学内容、目的）引入新课：.案例分析通过展示新浪网部分网页，向学生展示网页中图文排列的风格与方式，介绍网页中图像的类型和特点，以及图文混排的重要性。.提出问题网页中都可以用哪些类型的图像？如何在网页中添加图像？网页中图像和文本如何排版？.介绍本次课的教学目标、教学重点和难点。案例分析、任务驱动、讲练结合等教学做一体化、多媒体教学等课前预习、小组合作等10分钟授课（突出教学内容要点，掌握基本知识和技能）任务5.2在网页中插入图像.网页中常用的图像格式网页中使用的通常只有三种，即GIF、JPEG和PNGo.在网页中添加图像元素.设置网页图像属性.用CSS设置网页图像样式.用CSS设置网页的背景图像.边学边练：图文混排一一设计制作电影介绍网站页面说明：详情的教学内容见本次课的PPT文档翻转课堂、任务驱动、案例分析、讲练用口等教学做一体化、混合式教学模式等小组合作、抢答、随机提问等40分钟课堂演练.任务拓展：插入鼠标经过图像。.单元技能实战演练：以小组为单位，在DreamweaverCC中创建站点并完成“好书推荐”页面的制作。任务驱动、讲练结合等教学做一体化小组合作、实战演练35分钟总结（本堂课的要点归纳，应写出结论性的文字）以小组为单位，通过提问学生，总结本次课的学习内容。教师重点对本次课学习的网页中图像元素的使用，图文混排设置等内容进行归纳总结，强调本次课的重点和难点知识和技能要求，并针对本次课的学习内容，做好课外作业的统筹安排。5分钟布置作业（理论或实践）.基本作业：利用课外时间，学生们完成本次课对应的单元课后习题。.举一反三：以小组为单位，利用课外时间，继续对“我的家乡”网页添加图像，并进行图文混排编辑美化。教学后记按照授课计划完成本次课的教学任务。在教学过程中，注重合理引用素材图像等课程思政育人元素的融入，突出小组合作、学生遵守职业规范与流程的培养。通过学生们上机实训和完成的作业情况来看，学生们基本掌握了本单元任务2的教学内容，但是对于页面整体美化效果仍需进一步练习提升。备注：1.教案编写要求，请参考《教案编写规范》（文件编号zy/jwcT3）。.教学手段：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等。.教学方法：（讨论、启发、演示、辩论、讲练结合等）。.授课：内容不照本宣科，不满堂灌，注重引导学生思考问题、研究问题、解决问题。.教学后记：课后由教师手动填写，对该堂课教后的感受及学生的收获、改进方法等。授课题目单元6网页超链接与导航总课时4教学方法任务驱动、案例分析、小组合作、讲练结合等授课地点教学做一体化教室教学目标知识目标认识超链接的概念、种类及超链接路径；掌握各类超链接的作用与创建方法；掌握设置超链接CSS样式的方法；掌握图像地图的创建方法；认识网页导航的主要作用；掌握网页导航的分类与方向；掌握用CSS创建网页垂直导航的方法；掌握用CSS创建网页水平导航的方法。能力目标能够在网页中正确创建文本链接、锚点链接、电子邮件链接、空链接等各类超链接；能够用CSS美化超链接样式；能够创建图像地图能够在网页中用CSS正确创建垂直方向导航；能够在网页中用CSS正确创建水平方向导航。职业素质目标熟悉网站设计行业职业道德规范；具备良好的职业道德和沟通交流能力；具备独立思考和认真钻研的良好品质；通过小组合作能够完成安排的学习任务。教学重点超链接相对路径与绝对路径的使用；用css设置超链接样式的方法；用UL+CSS创建网页垂直导航、水平导航的方法。教学难点•超链接相对路径与绝对路径的使用；•用UL+CSS创建网页垂直导航、水平导航的方法。

授课进度第1讲（共2讲）授课情景名称为网页增加超链接元素教学内容设计（体现教学步骤，包括时间分配和教学内容教学进程）教学环节教学内容学法教方教学手段学生活动时间分配引入、告知（教学内容、目的）引入新课：.案例分析通过展示“腊八节”网页，向学生介绍网页中超链接的类型和特点。.提出问题网页中的超链接有什么作用？超链接有哪些类型？.介绍本次课的教学目标、教学重点和难点。案例分析、任务驱动、讲练结合等教学做一体化、多媒体教学等课前预习、小组合作等10分钟授课（突出教学内容要点，掌握基本知识和技能）任务6.1为网页增加超链接元素.认识超链接的概念，了解超链接的分类。.超链接路径的作用，使用绝对路径与相对路径的优缺点。.创建各类超链接的方法。（1）文档链接（2）锚点链接（3）电子邮件链接（4）脚本链接（5）空链接.边学边练：为腊八节网页添加超链接.边学边练：用CSS设置超链接说明：详情的教学内容见本次课的PPT文档翻转课堂、任务驱动、案例分析、讲练在人）口口等教学做一体化、混合式教学模式等小组合作、抢答、随机提问等40分钟课堂演练.任务拓展：创建图像地图。.单元技能实战演练：（1）以小组为单位，在DreamweaverCC中完成“腊八节”页面中各类超链接设置，并任务驱动、讲练A5口口等教学做一体化小组合作、实战演练35分钟用CSS进行美化样式。（2）以小组为单位，在DreamweaverCC中完成“点点星空”页面中各类超链接设置，并用CSS进行美化样式。总结（本堂课的要点归纳，应写出结论性的文字）以小组为单位，通过提问学生，总结本次课的学习内容。教师重点对本次课学习的超链接类型、超链接路径等内容进行归纳总结，强调本次课的重点和难点知识和技能要求，并针对本次课的学习内容，做好课外作业的统筹安排。5分钟布置作业（理论或实践）.基本作业：利用课外时间，学生们完成本次课对应的单元课后习题。.举一反三：以小组为单位，利用课外时间，继续对“我的家乡”网页添加介绍内容，在其中设置文档链接、锚点链接、电子邮件链接、空链接等，并对超链接设置CSS样式进行美化。教学后记按照授课计划完成本次课的教学任务。在教学过程中，注重课程思政育人元素的融入，突出小组合作、学生遵守职业规范与流程的培养。通过学生们上机实训和完成的作业情况来看，学生们基本掌握了本单元设置各类超链接的教学内容。备注：1.教案编写要求，请参考《教案编写规范》（文件编号zy/jwc-13）。.教学手段：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等。.教学方法：（讨论、启发、演示、辩论、讲练结合等）。.授课：内容不照本宣科，不满堂灌，注重引导学生思考问题、研究问题、解决问题。.教学后记：课后由教师手动填写，对该堂课教后的感受及学生的收获、改进方法等。授课进度第2讲（共2讲）授课情景名称设计网页导航教学内容设计（体现教学步骤，包括时间分配和教学内容教学进程）教学环节教学内容学法教方教学手段学生活动时间分配引入、告知（教学内容、目的）引入新课：.案例分析通过展示京东网站案例网页，向学生介绍网页中导航样式与类型，以及网页导航的作用与重要性。.提出问题网页中的导航有什么作用？网页中的导航有哪些类型？.介绍本次课的教学目标、教学重点和难点。案例分析、任务驱动、讲练结合等教学做一体化、多媒体教学等课前预习、小组合作等10分钟授课（突出教学内容要点，掌握基本知识和技能）任务6.2设计网页导航.网页导航的作用（1）定位显示位置（2）展现网站架构（3）显示品牌形象（4）影响公司业绩。.网页导航分类（1）水平栏导航（2）垂直栏导航（3）选项卡导航（4）菜单导航（5）面包屑导航（6）标签导航（7）页脚导航（8）个性化导航3.网页导航方向（1）横向导航（2）纵向导航（3）不规则导航4.边学边练：为“中国地理”网页增加垂直方向导航翻转课堂、任务驱动、案例分析、讲练用口等教学做一体化、混合式教学模式等小组合作、抢答、随机提问等40分钟5.边学边练：为“中国地理”网页增加水平方向导航说明：详情的教学内容见本次课的PPT文档课堂演练.任务拓展：参考着教材说明，为“点点星空”网站页面添加水平与垂直超链接.单元技能实战演练：以小组为单位，在DreamweaverCC中完成"中国地理"网页垂直与水平导航的制作。任务驱动、讲练A用口等教学做一体化小组合作、实战演练35分钟总结（本堂课的要点归纳，应写出结论性的文字）以小组为单位，通过提问学生，总结本次课的学习内容。教师重点对本次课学习的网页中导航的作用与类型，用UL+CSS制作垂直导航与水平导航的操作方法等内容进行归纳总结，强调本次课的重点和难点知识和技能要求，并针对本次课的学习内容，做好课外作业的统筹安排。5分钟布置作业（理论或实践）.基本作业：利用课外时间，学生们完成本次课对应的单元课后习题。.举一反三：以小组为单位，利用课外时间，继续对“我的家乡”网页添加水平导航内容，使得网页内容丰满、美观。教学后记按照授课计划完成本次课的教学任务。在教学过程中，注重课程思政育人元素的融入，突出小组合作、学生遵守职业规范与流程的培养。通过学生们上机实训和完成的作业情况来看，学生们基本掌握了本单元任务的教学内容，但是对于应用CSS制作网页导航的方法掌握还不够熟练，还需要进一步练习以孰能生巧。备注：1.教案编写要求，请参考《教案编写规范》（文件编号zy/jwc-13）。.教学手段：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等。.教学方法：（讨论、启发、演示、辩论、讲练结合等）。.授课：内容不照本宣科，不满堂灌，注重引导学生思考问题、研究问题、解决问题。.教学后记：课后由教师手动填写，对该堂课教后的感受及学生的收获、改进方法等。授课题目单元7表格化网页布局总课时4教学方法任务驱动、案例分析、小组合作、讲练结合信息化教学等授课地点教学做一体化教室教学目标知识目标认识表格，了解表格布局网页的特色；理解表格标签的使用方法；掌握创建表格、编辑表格、设置表格属性方法；掌握表格化网页布局的方法。能力目标能够根据布局需求编辑插入的表格；能设计制作图书资源网页面；能使用表格布局不同主题的网页。职业素质目标具有小组协作、积极进取的精神；具备精益求精、勇于创新的精神；具有流程化、规划化、标准化做事的意识。教学重点•表格的编辑方法；•使用表格布局不同主题的网页。教学难点•根据需求，使用表格布局不同主题的网页。

授课进度第1讲（共2讲）授课情景名称情景1：表格与表格标签情景2：插入、编辑表格教学内容设计（体现教学步骤，包括时间分配和教学内容教学进程）教学环节教学内容教学方法教手学生活动时间分配引入、告知（教学内容、目的）.对上次所讲内容进行复习提问；.提问课前安排的预习任务，了解学生预习情况：（1）表格及基本组成；表格的作用（2）表格标签及特点.提出本次课的教学任务。问答法、参与式教学法翻转课堂、信息化教学头脑风暴、学生回答5分钟授课（突出教学内容要点，掌握基本知识和技能）任务目标：.掌握插入表格、设置表格属性的方法；.掌握表格的编辑方法。教学要点：.表格标签及表格属性面板；.编辑表格:选择表格单元格、插入行或列、删除行或列、拆分或合并单元格。3.美化表格。任务驱动、大脑风暴、理实一体化教学做一体化、信息化教学、混合式教学小组讨论、边学边练、随堂测试40分钟课堂演练第一环节：演练任务：.插入、编辑表格；.参照教材提供的图书资源图案例效果和提供的网页素材，在表格中插入网页元素。.导入表格式数据.进一步美化图书信息网页面第二环节：汇报设计作品讨论式教法、任务驱动教学法、参与式教学法信息化教学小组合作、实战演练、作品展示40分钟以小组为单位，汇报任务完成情况，展示设计作品，进行小组自评、小组间互评、教师逐一点评。总结（本堂课的要点归纳，应写出结论性的文字）本次课学习了使用插入表格、编辑表格、美化表格的基本方法。并根据学生课堂演练的情况进行总结，强调本节课所讲的重点、难点知识。5分钟布置作业（理论或实践）.基本作业完成在线课程网站发布的课后复习题。.拓展性作业以小组为单位，书写图书资源网设计策划书。教学后记备注：1.教案编写要求，请参考《教案编写规范》（文件编号zy/jwc-13）。.教学手段：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等。.教学方法：（讨论、启发、演示、辩论、讲练结合等）。.授课：内容不照本宣科，不满堂灌，注重引导学生思考问题、研究问题、解决问题。.教学后记：课后由教师手动填写，对该堂课教后的感受及学生的收获、改进方法等。授课进度第2讲（共2讲）授课情景名称使用表格设计制作旅游信息网教学内容设计（体现教学步骤，包括时间分配和教学内容教学进程）教学环节教学内容教方教学手段学生活动时间分配引入、告知（教学内容、目的）.提问、复习使用表格布局网页的要点.提出本节课教学任务：使用表格设计制作旅游信息网（1）掌握表格化布局网页的基本方法；（2）掌握使用表格布局旅游信息网的基本方法。问答法、参与式教学法翻转课堂、信息化教学头脑风暴、学生回答5分钟授课（突出教学内容要点，掌握基本知识和技能）教学内容：（1）分析旅游信息网的主要特点；（2）分析旅游信息网内容的呈现方法。任务驱动、讲授法信息化教学、混合式教学头脑风暴、回答问题10分钟课堂演练第一环节：完成操作任务.插入表格、编辑表格.在表格中插入网页元素.编辑美化页面内容第二环节：汇报设计作品以小组为单位，汇报任务完成情况，展示设计作品，进行小组自评、小组间互评、教师逐一点评。任务驱动、实操演练、角色扮演做中学、信息化教学、混合式教学小组合作、作品展示70分钟总结（本堂课的要点归纳，应写出结论性的文字）通过提问学生总结本次课学习的内容，明确旅游信息类网站应体现出集吃、宿、行、乐于一体的特点，具有旅游推广、提供充足导游信息等功能。教师根据学生总结的情况进行补充、强调说明。本次课较好地完成了教学任务，达到了预算的教学目标。5分钟布置作业（理论或实践）课外拓展训练任务：设计时尚礼品网通过实践训练，掌握礼品类网页的设计要点和内容呈现方式。教学后记授课题目单元8使用Div+CSS布局网页总课时6教学方法任务驱动、案例分析、小组合作、讲练结合等授课地点教学做一体化教室教学目标38.了解盒子模型及其特点；39.掌握float、position>z・index等常用定位属性设置；40.能够使用CSS设置网页元素属性。知识目标41.了解Div标签在网页布局中的重要作用；42.掌握网页布局的盒子模型；43.掌握网页元素的定位方式；44.掌握CSS网页布局技巧及常用布局类型。25.能够通过CSS设置DIV盒子模型的各种属性；能力目标26.能够用float、position>z-index定位网页元素；27.能够使用DIV+CSS布局各类主题的网页。25.培养学生小组合作、积极进取的精神；职业素质目26.引导和发展学生求同和求异思维；标27.具有流程化、规划化、标准化做事的意识；28.具有独立思考、敢于创新的精神。■盒子模型的原理；教学重点■DIV布局定位；■使用CSS+Div布局各类主题的网页。•使用CSS+Div布局网页的综合应用教学难点

授课进度第1讲（共3讲）授课情景名称设计诗词赏析页面教学内容设计（体现教学步骤，包括时间分配和教学内容教学进程）教学环节教学内容教学方法教手学生活动时间分配引入、告知（教学内容、目的）.通过提问的方式，检查学生课前预习情况。.给出案例效果，通过展示，提出本次课的学习任务：（1）了解盒子模型及其特点；（2）掌握float、position,z-index等常用定位属性设置；（3）能够使用CSS设置网页元素属性。案例分析、任务驱动、翻转课堂、讲练结合等教学做一体化、多媒体教学等课前预习、小组合作等5分钟授课（突出教学内容要点，掌握基本知识和技能）.盒子模型CSS+Div网页布局的精髓在于盒子模型。盒子模型（BoxModel）用于描述一个为HTML元素形成的矩形盒子。盒子模型还涉及为各个元素调整外边距（margin）、边框（border）、内边距（padding）和内容（content）的具体操作。.元素的定位网页元素必须有合理的位置，从而构成有序的页面。网页元素的定位是通过float、postion和z-index等属性完成的翻转课堂、任务驱动、案例分析、讲练结合等教学做一体化、混合式教学模式等小组合作、抢答、随机提问等40分钟课堂演练.任务实施：使用盒子模型设计古诗欣赏网页。.任务拓展：模拟实现WindowslO桌面效果微软WindowslO界面使用扁平化风格菜单、蓝色的主色调。使用盒子模型模仿WindowslO桌面效果。通过任务学习，进一步熟练盒子模型的margin>padding,float等属性的功能及使用技巧。.以小组为单位汇报任务完成情况，并展示设计作品。任务驱动、讲练结合等教学做一体化小组合作、实战演练40分钟总结（本堂课的要点归纳，应写出结论性的文字）总结本次课所讲内容，强调网页布局中最流行的是CSS+Div技术，与前面章节中介绍的表格布局相比，采用CSS+Div布局的网页更加规范，浏览器加载更快，受到业内人士的欢迎。5分钟布置作业（理论或实践）.基本作业完成在线课程网站发布的课后复习题。.拓展作业微软WindowslO界面使用扁平化风格菜单、蓝色的主色调。使用盒子模型模仿WindowslO桌面效果。通过任务学习，进一步熟练盒子模型的margin>padding>float等属性的功能及使用技巧。教学后记备注：1.教案编写要求，请参考《教案编写规范》（文件编号zy/jwc-13）。.教学手段：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等。.教学方法：（讨论、启发、演示、辩论、讲练结合等）。.授课：内容不照本宣科，不满堂灌，注重引导学生思考问题、研究问题、解决问题。.教学后记：课后由教师手动填写，对该堂课教后的感受及学生的收获、改进方法等。授课进度第2讲（共3讲）授课情景名称设计个人博客页面教学内容设计（体现教学步骤，包括时间分配和教学内容教学进程）教学环节教学内容教方教学手段学生活动时间分配引入、告知（教学内容、目的）.提问，复习DIV+CSS布局网页的要点内容。.案例分析给出任务最终案例效果，引导学生分析为实现案例效果采用的相关技术。.提出本次课的学习任务：设计个人博客页面APDiv与Div以及span与Div的区别与联系；Div标签在网页布局中的重要作用；（3）网页布局的盒子模型；（4）网页元素的定位方式；（5）CSS网页布局技巧及常用布局类型。案例分析、任务驱动、讲练结合等教学做一体化、多媒体教学等课前预习、小组合作等10分钟授课（突出教学内容要点，掌握基本知识和技能）1.常用CSS+Div布局版式目前常见CSS+Div布局版式有网页内容居中布局、两列式布局、三列式布局等。两列式布局又可分为两列固定宽度居中布局、两列百分比布局、两列右列宽度自适应布局。（1）两列百分比式自适应式布局版式；（2）网页内容居中布局版式；（3）两侧固定，中间宽度自适应式三列式布局。说明：详情的教学内容见本次课的PPT文档翻转课堂、任务驱动、案例分析、讲练结合等教学做一体化、混合式教学模式等小组合作、抢答、随机提问等35分钟课堂演练第一环节：任务实施使用CSS+Div布局个人Blogo通过小组合作完成个人Blog的设计制作。第二环节：以小组为单位，汇报任务完成情况，展示设计作品，进行小组自评、小组间互评、教师逐一点评。任务驱动、讲练结合等教学做一体化小组合作、实战演练40分钟总结（本堂课的要点归纳，应写出结论性的文字）通过提问学生，总结本次课学习内容，明确CSS+DIV布局的常见版式及其特点。学生学习情况进行鼓励性评价，激发学生继续学好本课程后面的内容，最终完成本课程教学任务，达到预期的教学目标。5分钟布置作业（理论或实践）.基本作业：完成在线课程中的课后练习题。.拓展任务：举一反三，完成100%宽度自适应的布局版式。教学后记备注：1.教案编写要求，请参考《教案编写规范》（文件编号zy/jwc-13）。.教学手段：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等。.教学方法：（讨论、启发、演示、辩论、讲练结合等）。.授课：内容不照本宣科，不满堂灌，注重引导学生思考问题、研究问题、解决问题。.教学后记：课后由教师手动填写，对该堂课教后的感受及学生的收获、改进方法等。授课进度第3讲（共3讲）授课情景名称情景1:定位在网页布局中的应用情景2：DIV+CSS网页布局案例教学内容设计（体现教学步骤，包括时间分配和教学内容教学进程）教学环节教学内容教方教学手段学生活动时间分配引入、告知（教学内容、目的）.对上次课内容进行复习；.检查课前任务的预习情况：.提出本次课的学习任务给出任务最终案例效果，引导学生分析为实现案例效果采用的相关技术。.介绍本次课的教学目标、教学重点和难点。案例分析、任务驱动、讲练结合等教学做一体化、多媒体教学等课前预习、小组合作等5分钟授课（突出教学内容要点，掌握基本知识和技能）.定位在网页布局中的应用综合应用Div标签的盒子模型、position属性、float属性、z-index属性，设计网页图文标题。.DIV+CSS网页布局案例盒子模型在网页布局中的应用，使用position,float属性定位网页元素说明：详情的教学内容见本次课的PPT文档翻转课堂、任务驱动、案例分析、讲练5口口等教学做一体化、混合式教学模式等小组合作、抢答、随机提问等40分钟课堂演练第一环节：实战演练任务完成成果申报网站首页的布局第二环节：汇报设计作品以小组为单位，汇报任务完成情况，展示设计作品，进行小组自评、小组间互评，教师根据小组练习完成情况点评实训过程中存在的问题，给出解决问题的方案。任务驱动、讲练A）口口等教学做一体化小组合作、实战演练40分钟总结（本堂课的要点归纳，应写出结论性的文字）总结使用DIV布局页面使用的相关CSS样式和注意事项。对学生学习情况进行鼓励性评价，激发学生继续学好本课程后面的内容，最终完成本课程教学任务。5分钟布置作业（理论或实践）拓展训练任务：通过DIV+CSS完成成果申报网站子页的设计，并做好首页和子页的跳转链接。完成在线课程中的课后练习题测试。教学后记备注：1.教案编写要求，请参考《教案编写规范》（文件编号zy/jwc-13）。.教学手段：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等。.教学方法：（讨论、启发、演示、辩论、讲练结合等）。.授课：内容不照本宣科，不满堂灌，注重引导学生思考问题、研究问题、解决问题。.教学后记：课后由教师手动填写，对该堂课教后的感受及学生的收获、改进方法等。

单元教学首页授课题目单元9制作多媒体网页和网页特效总课时4教学方法任务驱动、案例分析、小组合作、讲练结合等授课地点教学做一体化教室教学目标知识目标了解行为的基本概念理解Dreamweaver中的内置行为掌握使用行为创建网页特效的方法能力目标掌握使用行为创建网页特效的技能培养学生创新能力和独立思考问题的能力职业素质目标培养学生团队合作精神；具备良好的职业道德和沟通交流能力；具备独立思考和认真钻研的良好品质；通过小组合作能够完成安排的学习任务。教学重点•Dreamweaver中内置行为的使用•使用行为创建网页特效教学难点•使用行为创建网页特效的流程。授课进度第1讲（共2讲）授课情景名称认识网页与网站教学内容设计（体现教学步骤，包括时间分配和教学内容教学进程）教学环节教学内容教学方法教手学生活动时间分配引入、告知（教学内容、目的）一、课程引入首先，演示两个添加了网页特效的案例，引起学生的兴趣；然后，介绍行为的特点：Dreamweaver行为是一段Javascript代码，当某个事件触发它时，将执行一个动作，如打开浏览器窗口或显示页面元素。使用Dreamweaver内置的行为，不需要编写代码，就可以实现复杂的网页特效。二、教学内容（1）了解行为的概念以及属性、事件、方法的含义；（2）掌握“行为”面板的基本操作；（3）能够添加行为并设置相关属性。案例分析、任务驱动、翻转课堂、讲练结合等教学做一体化、多媒体教学等课前预习、小组合作等10分钟授课（突出教学内容要点，掌握基本知识和技能）一、创建网页特效本节通过若干实例，重点介绍使用行为创建网页特效的方法，使学习者掌握弹出公告页、图像特效、设置状态栏文本、设置跳转菜单效果等行为的创建方法。1.行为概述行为是对象为响应某一事件而采取的动作，它由对象、事件和动作组成。翻转课堂、任务驱动、案例分析、讲练结合等教学做一体化、混合式教学模式等小组合作、抢答、随机提问笺守30分钟讲解行为、对象、事件的有关概念。.行为面板在Dreamweaver中，对行为的管理主要通过“标签检查器”面板完成，选择“窗口一行为"菜单命令或按＜Shift+F4＞组合键，可以打开“标签检查器”面板。讲解行为面板的构成。.动作与事件用户与网页交互时产生的操作，称为事件。事件可以由用户引发，也可能是页面发生改变，甚至还有看不见的事件（如Ajax的交互进度改变）。绝大部分事件都由用户的动作所引发，如：用户单击鼠标触发onClick事件，若鼠标移动到目标时，触发onMouseOver事件等。.添加行为Dreamweaver内置了常用标准行为，以便用户使用。在“标签检查器”面板中，单击【添加行为】按钮，可以展开行为菜单。讲解添加行为的步骤。说明：详情的教学内容见本次课的PPT文档课堂演练教师引导学生完成如下任务：.制作网页加载时弹出公告页.使用行为设置图像特效.使用行为设置状态栏文本任务驱动、讲练A方口口等教学做一体化小组合作、实战演练40分钟总结（本堂课的要点归纳，应写出结论性的文字）抽取1-2个小组汇报实训成果，教师点评学生实训完成情况及存在的问题，小组互评。本课程内容较为简单，学生通过学习能够完成实训任务，掌握行为设10分钟

置的步骤和方法。布置作业（理论或实践）.基本作业任务拓展：使用行为设置跳转菜单效果.知识拓展性作业实训二：设置变换图像的导航栏。教学后记备注：1.教案编写要求，请参考《教案编写规范》（文件编号zy/jwc-13）。.教学手段：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等。.教学方法：（讨论、启发、演示、辩论、讲练结合等）。.授课：内容不照本宣科，不满堂灌，注重引导学生思考问题、研究问题、解决问题。.教学后记：课后由教师手动填写，对该堂课教后的感受及学生的收获、改进方法等。

单元教学首页授课题目单元10使用表单对象总课时4教学方法任务驱动、案例分析、小组合作、讲练结合、信息化教学等授课地点教学做一体化教室教学目标知识目标表单和表单属性设置；表单对象及其属性设置；表单对象的应用。能力目标能在网页中插入表单对象；能设计会员注册网页；能设计网上报名页面。职业素质目标具有小组合作、积极进取的精神；具备精益求精、勇于创新的精神；具有良好的社会服务意识；热爱祖国，具有国产商品品牌形象树立的意识。教学重点•表单及表单对象的应用；•设计制作表单网页。教学难点•根据需求，能够灵活设计制作网页中的表单。授课进度第1讲（共2讲）授课情景名称情景1：插入表单及表单对象情景2：设计会员注册网页教学内容设计（体现教学步骤，包括时间分配和教学内容教学进程）教学环节教学内容教学方法教手学生活动时间分配引入、告知（教学内容、目的）.对上次课所讲内容进行复习提问；.提问课前安排的预习任务，了解学生预习情况：（1）表单及表单对象（2）表单页面的主要功能.提出本次课的教学任务。问答法、参与式教学法多媒体教学、信息化教学头脑风暴、学生回答5分钟授课（突出教学内容要点，掌握基本知识和技能）任务目标：.掌握创建表单、向表单中插入表单对象的方法；.掌握表单及表单对象的属性设置；.能够在网页中灵活应用表单。教学要点：表单用于收集用户填写的信息，比如某网站的会员注册、留言簿、问卷调查、网上报名等都会用到表单。表单可以说是一个容器，里面的表单对象类型不同，所表示的功能也不同。表单对象包括文本框、单选框、复选框、列表/菜单等。.创建表单；.设置表单属性；.在表单中插入表单对象；.表单标签、表单对象标签。任务驱动、大脑风暴、理实一体化教学做一体化、信息化教学、混合式教学小组讨论、边学边练、随堂测试40分钟课堂演练第一环节：演练任务：设计会员注册网页.插入表单；.参照教材提供的会员注册网页案例效果和提供的网页素材，在表格中插入表单对家。.编辑美化会员注册网页第二环节：汇报设计作品以小组为单位，汇报任务完成情况，展示设计作品，进行小组自评、小组间互评、教师逐一点评。讨论式教法、任务驱动教学法、参与式教学法信息化教学小组合作、实战演练、作品展示40分钟总结（本堂课的要点归纳，应写出结论性的文字）通过学生作品展示效果，对本次课学习的内容进行归纳总结，并做了概括性的评价，强调本节课所讲的重点知识和难点知识，同时，注重激发学生的学习兴趣。5分钟布置作业（理论或实践）.基本作业完成在线课程网站发布的课后复习题。.拓展性作业以小组为单位，针对网上报名网页、客户调查网页特点进行调研。教学后记备注：1.教案编写要求，请参考《教案编写规范》（文件编号zy/jwcT3）。.教学手段：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等。.教学方法：（讨论、启发、演示、辩论、讲练结合等）。.授课：内容不照本宣科，不满堂灌，注重引导学生思考问题、研究问题、解决问题。.教学后记：课后由教师手动填写，对该堂课教后的感受及学生的收获、改进方法等。授课进度第2讲（共2讲）授课情景名称设计网上报名页面教学内容设计（体现教学步骤，包括时间分配和教学内容教学进程）教学环节教学内容教方教学手段学生活动时间分配引入、告知（教学内容、目的）.提问、复习表单及表单对象的特点和功能.提出本节课教学任务：设计网上报名页面（1）掌握表单的创建及属性设置；（2）熟练掌握文本域、单选按钮、复选框和文件对象的创建及设置；（3）掌握网上报名页面的设计制作技能。问答法、参与式教学法翻转课堂、信息化教学头脑风暴、学生回答5分钟授课（突出教学内容要点，掌握基本知识和技能）教学内容：（1）分析网上报名页面的主要特点；（2）分析网上报名页面内容的呈现方法。任务驱动、讲授法信息化教学、混合式教学头脑风暴、回答问题10分钟课堂演练第一环节：完成操作任务首先对网上报名页面进行布局，本实训使用表格布局页面，然后结合前面所学的知识，创建表单和表单对象。表单对象主要包括文本域、单选按钮、复选框和文件。最后定义CSS样式对页面进行美化。第二环节：汇报设计作品以小组为单位，汇报任务完成情况，展示设计作品，进行小组自评、小组间互评、教师逐一点评。任务驱动、实操演练、角色扮演做中学、信息化教学、混合式教学小组合作、作品展示70分钟总结（本堂课的要点归纳，应写出结论性的文字）通过提问学生，总结本次课学习的内容，明确网上报名页面应体现内容，及应该突出的特点。强调本次课所学的重点和难点。对学生学习情况进行鼓励性评价，激发学生继续学好本课程后面的内容，最终完成本课程教学任务，达到预期的教学目标。5分钟布置作业（理论或实践）课外拓展训练任务：设计客户调查页面通过实践训练，熟练掌握客户调查表单中表单对象的创建与属性设置，掌握将创建的表单融合在网页中的技能。教学后记

单元教学首页授课题目单元11运用JavaScript实现网页的交互总课时6教学方法任务驱动、案例分析、小组合作、讲练结合、信息化教学等授课地点教学做一体化教室教学目标知识目标理解JavaScript基本语法；掌握JavaScript语言基础知识；理解流程控制语句；了解函数的定义与调用；能用JavaScript实现简单的网页交互。能力目标能看懂JavaScript简单的脚本代码；能用JavaScript实现简单的下拉菜单；能用JavaScript制作简单的网页特效。职业素质目标具有勇于探索，积极进取的精神；具备吃苦耐劳、不断学习的精神；具有小组合作、协同完成有难度任务的良好品质。教学重点JavaScript的使用方法；JavaScript的语言基础；JavaScript中函数的调用；运用JavaScript实现下拉菜单的方法；通过JavaScript制作简单的网页特效。教学难点•运用JavaScript实现下拉菜单的方法；•通过JavaScript制作简单的网页特效。授课进度第1讲（共3讲）授课情景名称情景1：JavaScript语言基础情景2：JavaScript的使用方法教学内容设计（体现教学步骤，包括时间分配和教学内容教学进程）教学环节教学内容教学方法教手学生活动时间分配引入、告知（教学内容、目的）1.提问课前安排的预习任务，了解学生预习情况：JavaScript简介及主要特点JavaScript的使用方法2.提出本次课的教学任务问答法、参与式教学法多媒体教学、信息化教学头脑风暴、学生回答5分钟授课（突出教学内容要点，掌握基本知识和技能）任务目标：.掌握JavaScript的使用方法；.掌握JavaScript的语言基础；.掌握JavaScript中函数的调用。教学要点：JavaScript是Web页面中的一种脚本语言，也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的脚本语言。JavaScript脚本通常是通过嵌入在HTML中实现动态的Web页面效果，为用户提供更流畅美观的浏览效果，JavaScript广泛应用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。8.JavaScript的使用方法在HTML文档中引入JavaScript有两种基本方式,一种是在HTML文档中嵌入JavaScript脚本，称为内嵌式；另一种是链接外部的JavaScript脚本文档，称为外链式。任务驱动、大脑风暴、理实—体化教学做一体化、信息化教学、混合式教学小组讨论、边学边练、随堂测试55分钟9.JavaScript语言基础JavaScript脚本语言同其他语言一样，有它自身的数据类型、变量、数组、运算符与表达式及基本程序框架。.流程控制语句.函数的定义与调用课堂演练演练任务：JavaScript应用小案例练习.JavaScript变量的应用；.使用fu

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论