网页设计与制作微课教程教学设计教学教案.pdf

《网页设计与制作微课教程教学设计教学教案.pdf》由会员分享，可在线阅读，更多相关《网页设计与制作微课教程教学设计教学教案.pdf（84页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、课 程 介 绍备注：1.课程性质：公共必修课、公共选修课、专业必修课、专业选修课。课程名称网页设计与制作开课时间第二学期、第三学期周课时4总学课时64上课周数16课程性质专业必修课理论课时32实践课时32学分4考核方式过程性考核+终结性考核使 用 教 材（名称、版本、出版社、主编等）青椒小助手教学条件教学做一体化教室主要参考资料 精通C S S 与H T M L 设计模式 美鲍尔斯著刘申等译D I V+C S S 网站布局案例精粹（第2 版），清华大学出版社，闫睿编授课对象专业：电子商务、网络营销、计算机网络技术、多媒体技术、动漫设计与制作、计算机应用技术、软件技术等年级：大学二年级课程内容摘

2、要（不 够 可 附页）“网页设计与制作”课程是电子商务类专业、计算机类专业、多媒体技术等专业的一门必修课程，也是其他专业学生深受喜爱的一门职业技能拓展课程。本课程通常在第三学期开设，主要内容包括H T M L 5 基础、网页设计与制作基础知识、C S S 样式表定义和应用、网页基本元素、网页布局技术、多媒体网页设计制作、网页模板设计制作、D I V+C S S 静态网站设计制作、J a v e S c r i p t 基础、静态网站维护与推广等。其前导课程是图形图像处理技术、动画设计制作等，其后续课程电子商务网站建设、网站建设与维护等。2.考核方式：考试、考查3.课程内容摘要：主要介绍该课程的

3、内容、教学目的及达到的教学效果。单 元 教 学 首 页 H T M L 基本语法与结构；H T M L 常用标签的使用方法。授课题目单元1 网页设计与制作基础总课时4教学方法任务驱动、案例分析、小组合作、讲练结合等授课地点教学做一体化教室教学目标知识目标1.了解网页、网站的概念及相关的基本知识；2.掌握网站建设的一般流程；3 .了解H T M L 概念，掌握H T M L 基本语法与结构；4 .熟悉常用的H T M L 标签，理解各种标签的使用方法。能力目标1.掌握网页框架编写技能；2 .能够使用记事本完成简单网页的编写与保存。职业素质目标1 .培养学生小组合作、积极进取的精神；2 .引导和发

4、展学生求同和求异思维；3.具有流程化、规划化、标准化做事的意识。教学重点 网页的类型，网页基本构成元素；网站建设的一般流程；H T M L 基本语法与结构；H T M L 常用标签的使用方法。教学难点单 元 授 课 进 度 分 解授课进度第1讲（共 2 讲）授课情景名称情景1：认识网页与网站情景2：网站建设的一般流程教学内容设计（体现教学步骤，包括时间分配和教学内容教学进程）教学环节教学内容学法教方教学手段学生活动时间分配引入、告知（教学内容、目的）1.首次课，做课程介绍；（约 10分钟）2.提出课前安排的预习任务；3.提问概念性的问题，了解学生课前预习情况；4.引出本次课的教学任务。讲 授法

5、、问答法、参 与式 教学法教 学做 一体化头 脑风暴、学 生回答15分钟授课（突出教学内容要点，掌握基本知识和技能）任务目标：1.认识什么是网页，熟悉网页类型和网页基本构成元素；2.了解设计制作网页常用的软件和技术；3.认识什么是网站，理解网站的网址与域名。教学要点：1.什么是网页？2.网页类型：静态网页、动态网页。3.网页基本元素：文本、图像、音频、视频、动画和超链接等。4.网页的构成：由一些基本版块组成的，主要包括Logo图标、导航条、Banner、内容版块、版尾版块等。5.网页设计常用基本语言：HTML、CSS、JavaScript是网页设计制作最核心也是最基本应用技术。6.什么是网站？

6、任 务驱动、讲 练结合教 学做 一体化、信 息化 教学小 组讨论、随 堂测试45分钟7.网址与域名。8.网站建设的一般流程：网站策划-收集网站的素材和内容-设计制作网站-网站测试与发布-网站推广与维护。课堂演练实训任务：上网浏览不同类似、不同风格的网站和网页，对各类网站页面特色做出归纳性总结。任 务驱动、参 与式 教学法教 学做 一体化小 组合作、任 务完 成情 况汇报25分钟总 结（本堂课的要点归纳，应写出结论性的文字）由学生对本次课学习的内容进行归纳总结，教师根据学生总结的内容做补充说明，强调本节课所学的重点知识和难点知识。5分钟布置作业（理论或实践）1.基本作业完成在线课程网站发布的课后

7、复习题。2.知识拓展性作业利用课外时间，在线查阅并分析营销宣传类网站的页面风格特点及内容宣传方-p.口4 0教学后记备注：1.教案编写要求，请 参 考 教案编写规范（文件编号z y/j w c-1 3）。2 .教学手段：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等。3 .教学方法：（讨论、启发、演示、辩论、讲练结合等）。4 .授课：内容不照本宣科，不满堂灌，注重引导学生思考问题、研窕问题、解决问题。5 .教学后记：课后由教师手动填写，对该堂课教后的感受及学生的收获、改进方法等。单 元 授 课 进 度 分 解授课进度第2讲（共 2 讲）授课情景名称使用HTML制作简单的网页教学

8、内容设计（体现教学步骤，包括时间分配和教学内容教学进程）教学环节教学内容教方教学手段学生活动时间分配引入、告知（教学内容、目的）1.检查课前预习情况HTML5简介2.通过翻转课堂方式导入本次课的教学任务明确本节课的学习任务：（1）掌握HTML5的基本语法和文档结构；（2）HTML5常用的标签及标签主要属性；（3）能够通过HTML制作简单的网页。任 务驱动、案 例分析翻 转课堂、教 学做一、小 组合作头 脑风暴、学 生回答5 分钟授课（突出教学内容要点，掌握基本知识和技能）教学内容1:HTML5的基本语法与结构：（1）HTML5的基本语法HTML5的语法主要由标签（tag）和属性（attribu

9、te）组成。所有标签都由一对尖括号，和“”括起来。双标签。双标签是指由开始和结束两个标签符号组成的标签，其语法格式：受控内容单标签。单标签也称空标签，指用一个标签符号即可完整的描述某个功能的标签。其语法格式：（2）网页的HTML结构HTML文件的主体结构由、和 body3对标签组成。任 务驱动、案 例分析、参 与式 教学法教 学做 一体化、信 息化 教学小 组讨论、随 堂测试40分钟头部信息：如、vmeta等文档主体教学内容2：常用的HTML5标签文本与段落标签、列表标签、超链接标签、图像标签、表格标签、表单标签等。课堂演练任务1：使用记事本编辑简单网页操作步骤：打开记事本，在记事本中输入下面

10、的HTML代码，将其以chOl-1为文件名、以.html为文件扩展名进行保存。任务2：制作滚动图片链接通过本任务的训练，用户能够进一步掌握HTML文档结构，了解制作滚动图片链接的基本方法，理解在网页中添加图像元素时，正确使用相对路径和绝对路径的重要性。以小组为单位，汇报实训任务完成情况，展示实训结果，教师逐一检查并进行评价。任 务驱动、实 践演练、小 组合作做 中练、信息 化教学头 脑风暴、小 组合 作完 成演 练任务40分钟总 结（本堂课的要点归纳，应写出结论性的文字）本次课学习了 HTML5的基本语法和文档结构，介绍了 HTML5常用的标签及标签主要属性，通过课堂演练，学生能通过HTML制

11、作简单的网页，并以小组为单位进行了汇报。较好地完成了本次课的教学任务，达到了预期的教学目标。5 分钟布置作业（理论或实践）设计制作个人母校概况的简单页面教学后记单 元 教 学 首 页授课题目单元2 网页版式设计与色彩搭配总课时4教学方法任务驱动、案例分析、小组合作、讲练结合等授课地点教学做一体化教室教学目标知识目标5.了解网页版式设计的风格、原则和步骤；6.理解色彩的基本理论和视觉效果；7.掌握网页配色原理及网页配色技巧。能力目标3.具备独立完成网站合理配色的能力；4.具备分析问题、解决问题的能力。职业素质目标4.具有一定的审美观、鉴赏能力；5.具有小组合作、积极进取的精神。教学重点色彩的基本

12、理论和视觉效果；网页配色原理及配色技巧。教学难点网页版式设计；网页配色技巧。单 元 授 课 进 度 分 解授课进度第1讲（共2讲）授课情景名称网页版式设计教学内容设计（体现教学步骤，包括时间分配和教学内容教学进程）教学环节教学内容学法教方教学手段学生活动时间分配引入、告知（教学内容、目的）1.复习上次课讲授的重点内容2.打开准备好的几个网站案例，分别进行展示，要求学生注意观察下面的两个问题：（1）注意观察不同网站的配色特色；（2）注意观察不同风格网站的版式特点。让学生带着好奇和问题，接受本次课的学习。讲 授法、问答法、参 与式 教学法教 学做一体化头 脑风暴、学 生回答1 0分钟授课（突出教学

13、内容要点，掌握基本知识和技能）案例分析：不同风格网页作品欣赏与解析给出几个有代表性的网页，通过对它们的赏析，认识不同风格网页的特点。学习任务一：网页版式设计（1）掌握版式设计的概念；（2）认识版式设计在网页设计中的重要性；（3）了解常见的网页版式设计风格。1.版式设计概述2 .网页版式的尺寸和构成要素3 .网页的版式设计风格4 .网页版式设计原则5 .网页版式设计的视觉流程6 .网页版式设计的步骤1）构思。2）粗略布局。3）完善布局。4）深入优化。任 务驱动、讲 练结合教 学做一体化、信 息化教学小 组讨论、随 堂测试3 5分钟学习任务二：色彩的基本理论及其视觉效果（1）了解色彩的基本概念以及

14、色彩的视觉效果；（2）掌握光的三原色理论；（3）掌握色彩的三个基本属性。1.色彩的基本理论2 .色彩的视觉效果1）色彩的心理感觉2）色彩的冷暖3）色彩的软硬4）色彩的进退5）色彩的大小学习任务三：网页中的色彩及配色（1）了解网页色彩的概念；（2）掌握在网页中色彩的数字表达方式；（3）掌握网页的配色原理及技巧。1.网页色彩2 .网页中色彩的作用1）划分视觉区域2）引导主次3）烘托主旨3.网页配色原理1）色彩的适合性2）色彩的鲜明性3）色彩的独特性3.网页配色技巧遵循一定的原则和技巧：（1）使用一种色彩。（2）使用邻近色。（3）使用对比色。4.非彩色搭配课堂演练任务1:总结不同主题网站的配色风格。

15、访问 http:/ 务驱动、讲 练结 合等教 学做 一体化小 组合作、实 战演练40分钟总 结（本堂课的要点归纳，应写出结论性的文字）根据学生讨论的结果进行分析说明，然后进行补充、强调本节需要掌握的重点和难点知识。网站按主题，主要分为教育类网站、政府类网站、科技类网站、商务类网站等。同类型的网站在页面设计上有很大的相似性。5 分钟布置作业（理论或实践）1.基本作业完成在线课程网站发布的课后复习题。2.知识拓展性作业要求学生利用课余时间上网浏览各类，分析网站的配色方案和布局特点，进一步提升鉴别不同网站风格的能力。教学后记备注：1.教案编写要求，请 参 考 教案编写规范（文件编号z y/j w c

16、-1 3）。2 .教学手段：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等。3 .教学方法：（讨论、启发、演示、辩论、讲练结合等）。4.授课：内容不照本宣科，不满堂灌，注重引导学生思考问题、研窕问题、解决问题。5 .教学后记：课后由教师手动填写，对该堂课教后的感受及学生的收获、改进方法等。单 元 授 课 进 度 分 解授课进度第2 讲（共 2讲）授课情景名称校友网首页效果图设计教学内容设计（体现教学步骤，包括时间分配和教学内容教学进程）教学环节教学内容教方教学手段学生活动时间分配引入、告知（教学内容、目的）检查上次所讲内容，本次课的预习情况通过翻转课堂方式导入本次课的教学任务引

17、入本次课学习任务：校友网首页效果图设计任 务驱动、案 例分析翻 转课堂、教 学做一、小 组合作头 脑风暴、学 生回答5 分钟授课（突出教学内容要点，掌握基本知识和技能）学习任务：校友网首页效果图设计（1）掌握骨骼式网页版式设计的方法；（2）熟悉网站色彩搭配技巧；（3）掌握使用P h o t o s h o p 设计首页效果图的操作技巧。带领学生分析校友网首页效果图的结构和配色特点。任 务驱动、案 例分析、参 与式 教学法教 学做 一体化、信 息化 教学小 组讨论、随 堂测试2 5 分钟课堂演练实训演练：校友网首页效果图设计（1）确定校友网首页设计风格；（2）确定校友网首页内容呈现方式；（3）确

18、定校友网首页色彩搭配；（4）通过P h o t o s h o p 进行网页配色；（5）分组完成实训任务。任务拓展：网页版式、网页配色原则归纳总结（1）分组归纳总结网页版式设计原则；（2）分组归纳总结不同主题类型网站页面讲 练结合举 例讲解完 成实 训内容45 分钟配色基本原则。（3）以小组为单位进行汇报。总 结（本堂课的要点归纳，应写出结论性的文字）以小组为单位，归纳总结所学知识，展示实训结果，教师逐一检查并进行评价。15分钟布置作业（理论或实践）教学后记备注：1.教案编写要求，请 参 考 教案编写规范（文件编号z y/j w c T 3）。2 .教学手段：举例讲解、多媒体讲解、模型讲解、实

19、物讲解、挂图讲解、音像讲解等。3 .教学方法：（讨论、启发、演示、辩论、讲练结合等）。4 .授课：内容不照本宣科，不满堂灌，注重引导学生思考问题、研究问题、解决问题。5 .教学后记：课后由教师手动填写，对该堂课教后的感受及学生的收获、改进方法等。单 元 教 学 首 页授课题目单元3 Dreamweaver CC工具的使用总课时4教学方法任务驱动、案例分析、小组合作、讲练结合等授课地点教学做一体化教室教学目标知识目标8.熟悉Dreamweaver CC的界面布局；9.掌握Dreamweaver CC面板或者面板组的基本操作方法；10.掌握Dreamweaver CC常用初始化设置；11.掌握Dr

20、eamweaver CC中创建、保存及预览网页的方法；12.理解本地站点和远程站点的含义；13.掌握站点的规划原则；14.掌握创建与管理站点的方法；15.掌握页面属性设置的方法。能力目标5.能够安装Dreamweaver CC并进行初始化设置；6.能够在Dreamweaver CC中创建简单网页并保存和预览；7.能够在Dreamweaver CC中创建本地站点并能管理站点；8.能够对网页进行页面属性的设置。职业素质目标6.熟悉网站设计行业职业道德规范；7.具备良好的职业道德和沟通交流能力；8.具备独立思考和认真钻研的良好品质；9.通过小组合作能够完成安排的学习任务。教学重点 Dreamweav

21、er CC 界面布局；Dreamweaver CC中创建、保存及预览网页的方法；Dreamweaver CC中创建站点的方法；页面属性设置的方法。教学难点 Dreamweaver CC中创建站点的方法；页面属性设置的方法。单 元 授 课 进 度 分 解授课进度第1讲（共2讲）授课情景名称认识中文版Dreamweaver CC教学内容设计（体现教学步骤，包括时间分配和教学内容教学进程）教学环节教学内容教方教学手段学生活动时间分配引入、告知（教学内容、目的）引入新课：1.案例分析通过在Dreamweaver CC中展示“欢迎光临”网站，让学生们初步认识Dreamweaver CC界面布局。2.提出

22、问题Dreamweaver C C的操作区域主要有几种视图方式？如何对Dreamweaver CC进行个性化设置？3.介绍本次课的教学目标、教学重点和难点。案 例分析、任 务驱动、讲 练结 合等教 学做 一体化、多 媒体 教学等课前预习、小 组合 作等10分钟授课（突出教学内容要点，掌握基本知识和技能）任 务3.1认识中文版Dreamweaver CC1.Dreamweaver CC的界面布局，了解菜单栏、文档窗口、文档工具栏、工具栏、状态栏、“属性”面板和其他面板组的功能，了解面板组的调整操作。2.Dreamweaver CC初始化设置。通 过 首选项”菜单命令，对Dreamweaver做常

23、规、CSS样式、代码提示、代码格式、应用程序内更新、新建文档、界面等初始化操作。3.边学边练：在Dreamweaver CC中创建、保存简单文本网页文件。说明：详情的教学内容见本次课的PPT文档翻 转课堂、任 务驱动、案 例分析、讲 练结 合等教 学做 一体化、混 合式 教学 模式等小 组合作、抢答、随 机提 问等40分钟课堂演练1.任务拓展：制作“自我介绍”简单文本网页，并在浏览器中进行预览。2.单元技能实战演练：以小组为单位，认识Dreamweaver CC操作界面，对软件做个性化设置，并完成简单文本页面的制作。任 务驱动、讲 练结 合等教 学做 一体化小 组合作、实 战演练35分钟总 结

24、（本堂课的要点归纳，应写出结论性的文字）以小组为单位，通过提问学生，总结本次课的学习内容。教师重点对本次课学习的在Dreamweaver界面与个性化设置、创建并保存预览网页等内容进行归纳总结，强调本次课的重点和难点知识和技能要求，并针对本次课的学习内容，做好课外作业的统筹安排。5 分钟布置作业（理论或实践）1.基本作业：利用课外时间，学生们完成本次课对应的课后习题。2.举一反三：以小组为单位，利用课外时间完成“我的家乡”简单网页中文本内容的制作。教学后记按照授课计划完成本次课的教学任务。在教学过程中，注重职业规范等课程思政育人元素的融入，突出小组合作、学生遵守职业规范与流程的培养。通过学生们上

25、机实训和完成的作业情况来看，学生们基本掌握了本单元任务的教学内容。备注：1.教案编写要求，请 参 考 教案编写规范（文件编号z y/j w c-1 3）。2 .教学手段：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等。3 .教学方法：（讨论、启发、演示、辩论、讲练结合等）。4 .授课：内容不照本宣科，不满堂灌，注重引导学生思考问题、研究问题、解决问题。5 .教学后记：课后由教师手动填写，对该堂课教后的感受及学生的收获、改进方法等。单 元 授 课 进 度 分 解授课进度第2讲（共2讲）授课情景名称任务3.2规划与创建站点教学内容设计（体现教学步骤，包括时间分配和教学内容教学进程）

26、教学环节教学内容教方教学手段学生活动时间分配引入、告知（教学内容、目的）引入新课：1 .案例分析通过在D r e a m w e a v e r CC中展示 欢迎光临网站，让学生们初步认识D r e a m w e a v e r C C站点的意义。2 .提出问题为什么要在D r e a m w e a v e r CC中创建站点？如何在D r e a m w e a v e r CC中创建站点？3 .介绍本次课的教学目标、教学重点和难点。案 例分析、任 务驱动、讲 练结 合等教 学做 一体化、多 媒体 教学等课 前预习、小 组合 作等1 0分钟授课（突出教学内容要点，掌握基本知识和技能）任务

27、3.2规划与创建站点1 .认识本地站点与远程站点在D r e a m w e a v e r中，网页设计都是以一个完整的W e b站点为基本对象，所有资源的改变和网页的编辑都在此站点中进行。2 .规划站点的原则（1）构建层次清晰的文档结构。（2）优化网站的链接结构。（3）规划规范、统一的网页布局。3 .边学边练：创建本地站点4.边学边练：管理站点（1）编辑站点（2）复制站点（3）删除站点（4）导出与导入站点5.设置页面属性翻 转课堂、任 务驱动、案 例分析、讲 练结 合等教 学做 一体化、混 合式 教学 模式等小 组合作、抢答、随 机提 问等4 0分钟通过“页面属性”对话框设置当前被编辑网页文

28、档的整体属性，包括网页的标题、背景图像、正文中各种元素的颜色等内容。说明：详情的教学内容见本次课的PPT文档课堂演练1.任务拓展：参考着教材说明，制作“欢迎光临”网页，并设置网页属性。2.单元技能实战演练：以小组为单位，通过Dreamweaver CC软件完成“我的网上家园”页面的制作。任 务驱动、讲 练Z七d口r 占口等教 学做 一体化小 组合作、实 战演练35分钟总 结（本堂课的要点归纳，应写出结论性的文字）以小组为单位，通过提问学生，总结本次课的学习内容。教师重点对本次课学习的在Dreamweaver中创建站点、设置页面属性等内容进行归纳总结，强调本次课的重点和难点知识和技能要求，并针对

29、本次课的学习内容，做好课外作业的统筹安排。5 分钟布置作业（理论或实践）1.基本作业：利用课外时间，学生们完成本次课对应的课后习题。2.举一反三：以小组为单位，利用课外时间完成“我的家乡”简单网页的制作，重点要求在Dreamweaver中建立站点并通过页面属性进行页面美化。教学后记按照授课计划完成本次课的教学任务。在教学过程中，注重职业规范等课程思政育人元素的融入，突出小组合作、学生遵守职业规范与流程的培养。通过学生们上机实训和完成的作业情况来看，学生们基本掌握了单元3 的教学内容。备注：1.教案编写要求，请 参 考 教案编写规范（文件编号z y/j wc-1 3）。2 .教学手段：举例讲解、

30、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等。3 .教学方法：（讨论、启发、演示、辩论、讲练结合等）。4.授课：内容不照本宣科，不满堂灌，注重引导学生思考问题、研究问题、解决问题。5 .教学后记：课后由教师手动填写，对该堂课教后的感受及学生的收获、改进方法等。单 元 教 学 首 页授课题目单元4 CSS3样式总课时4教学方法任务驱动、案例分析、小组合作、讲练结合等授课地点教学做一体化教室教学目标知识目标16.了解CSS的基本语法和样式表类型；17.掌握CSS样式的创建与属性设置；18.掌握CSS样式表的编辑及引用；19.掌握应用CSS美化网页的方法。能力目标9.能定义四种CSS样式表；

31、10.能通过CSS样式编辑网页。职业素质目标10.具有网站设计行业职业道德规范；11.具备良好的职业道德和沟通交流能力；12.具备独立思考和认真钻研的良好品质；13.具有小组合作、勇于创新的品质。教学重点 CSS样式表的创建、编辑和应用；使用CSS美化网页。教学难点使用CSS样式编辑、美化网站页面。单 元 授 课 进 度 分 解授课进度第1讲（共2讲）授课情景名称定义和应用CSS3样式教学内容设计（体现教学步骤，包括时间分配和教学内容教学进程）教学环节教学内容学法教方教学手段学生活动时间分配引入、告知（教学内容、目的）提问学生的问题：网站站点创建需要注意的问题是什么？教师根据上机实训出现的问题

32、及学生回答的问题，进行解说，并把上次课重点建设的内容进行概述。任务目标：（1）认识CSS3样式，了解使用CSS样式的发展历史；（2）掌握CSS3样式的分类；（3）掌握CSS3的基本语法；（4）能够使用CSS样式面板管理CSS3样式。案 例分析、任 务驱动、讲 练夕%士 口等翻 转课堂、教 学做 一体化课 前预习、小 组合 作等10分钟授课（突出教学内容要点，掌握基本知识和技能）1.CSS3样式设置规则。在Dreamweaver C C中，对CSS3样式的管理主要通过“CSS设计器”面板完成。选择“窗口一CSS设计器”菜单命令或按组合键，展开“CSS设计器”面板中进行详细设置。2.定义CSS3选

33、择器一个CSS样式表一般由若干样式规则组成，每个样式规则都可以看成是一条CSS的基本语句，每个规则都包含一个选择器（例如body,p等）和写在花括号里的声明，这些声明通常是由几组用分号分隔的属性和值组成。翻 转课堂、任 务驱动、案 例分析、讲 练%任 A口等教 学做 一体化、混 合式 教学 模式等小 组合作、抢答、随 机提 问等4 0分钟(1)CSS3标签选择器；(2)CSS3类别选择器；(3)CSS3ID 选择器；(4)CSS3复合选择器。3.CSS3样式的调用CSS3样式可以使用多种方法调用。(1)行内样式表；(2)内部样式表；(3)外部样式表；(4)导入样式表。4.布局和定义CSS3基础

34、样式可以通过“CSS设计器”面板添加CSS样式，然后在属性面板中配置CSS样式的属性。讲解创建CSS样式的步骤。5.链接或导入外部CSS3样式使用“CSS设计器”面板，可以将外部的CSS3样式文件应用到当前页面中。讲解链接外部样式表的具体方法。6.查看CSS3样式通过“CSS设计器”面板，可以查看当前文档所使用的CSS样式。7.编辑与删除CSS3属性通过“CSS设计器”面板，可以对CSS样式进行编辑和删除等操作。8.常用CSS3属性及值设置说明：详情的教学内容见本次课的PPT文档课堂演练训练任务：使用CSS3控制图片及文本样式通过任务学习，掌握创建CSS3样式，并使用C SS3样式美化网页中的

35、文字和图片的操作步骤。以小组为单位完成训练任务，并汇报任务完成情况。任 务驱动、讲 练结 合等教 学做 一体化小 组合作、实 战演练35分钟总 结（本堂课的要点归纳，应写出结论性的文字）由学生对本次课学习的内容进行归纳总结，教师根据学生总结的内容做补充说明，强调本节课所学的重点知识和难点知识。5分钟布置作业（理论或实践）1.基本作业通过在线课程测试CSS3样式基本知识的掌握情况。2.知识拓展性作业（1）使用CSS3样式完成网页图文混排；（2）预习CSS3高级特性。教学后记备注：1.教案编写要求，请 参 考 教案编写规范（文件编号zy/jwc-13）。2.教学手段：举例讲解、多媒体讲解、模型讲解

36、、实物讲解、挂图讲解、音像讲解等。3.教学方法：（讨论、启发、演示、辩论、讲练结合等）。4.授课：内容不照本宣科，不满堂灌，注重引导学生思考问题、研究问题、解决问题。5.教学后记：课后由教师手动填写，对该堂课教后的感受及学生的收获、改进方法等。单 元 授 课 进 度 分 解授课进度第2讲（共2讲）授课情景名称1.情 景1：CSS3高级特性2.情 景2：使 用CSS3样式设计新浪头条新闻教 学 内 容 设 计（体 现 教 学 步 骤，包 括 时 间 分 配 和 教 学 内 容 教 学 进 程）教学环节教学内容教方教学手段学生活动时间分配引 入、告知（教学内容、目的）1.通 过 提 问，复 习 上

37、 节 课 对CSS3样式表基本 知 识 的 学 习；2.通 过 提 问，了解学生课 前 预 习 情 况。3.提 出 新 的 学 习 任 务：（1）CSS3高级特性任 务 目 标：了 解CSS3新 增 选 择 器；掌 握CSS3的 基 础 性 和 层 叠 性；掌 握CSS3的 优 先 级 设 置 规 则。（2）使 用CSS3样式设计新浪头条新闻案 例分 析、任 务驱 动、讲 练结 合等教 学做一体化问题抢 答、小组合 作等10分钟授课（突出教学内容要点，掌握基本知识 和 技 能）1.CSS3的新增选择器选 择 器 是C SS3的 重 要 概 念，使用选择器可以提升设计人 员 的 编 程 效 率。

38、在 任 务1中已经介绍了 C SS3的 基 本 选 择 器，通过这些选择 器，能 够 满 足 基 本 的 设 计 需 求。通 过CSS3的 新 增 选 择 器，可以在网页设计过程中实现更 复 杂 的 效 果。2.讲 解CSS3新增选择器及其特点3.CSS3特性（1）继承性（2）层叠性（3）优先级对 于CSS3优 先 级 使 用 的 规 则 如 下：对 于 基 本 选 择 器，优 先 级 权 重 从 高 到 低翻 转课 堂、任 务驱 动、案 例分 析、讲 练Zdr 人巳 口 口等教 学做一体 化、混 合式 教学模式等小 组合 作、抢 答、随 机提 问等35分钟依次为id选择器、类别选择器、标记选

39、择器；行内样式优先级最高，即应用style属性的元素，其行内样式的优先级高于选择器的优先级；权重相同时，CSS遵循就近原则，即越靠近元素的样式优先级最高。说明：详情的教学内容见本次课的PPT文档课堂演练任 务1：使 用CSS3设置文字特效添加文字，并使用CSS选择器为文字添加不同的效果。任务2：使 用CSS3样式设计新浪头条新闻模仿新浪新闻网页，实现图文混排及新闻排行效果。新闻图片位于网页左侧，标题和新闻列表位于右侧。案例使用float属性设置图片的左浮动，使 用margin属性设置图片和文字间距，使 用h l标记设置标题样式，使用line-height属性设置段落行高。作品展示：以小组为单位

40、汇报任务完成情况。任 务驱动、讲 练结 合等教 学做一体化小 组合作、实 战演练40分钟总 结（本堂课的要点归纳，应写出结论性的文字）以小组为单位，通过提问学生，总结本次课的学习内容。教师对本节课所涉及的CSS3选择器等知识点进行总结，分析学生在知识学习过程中存在的问题，探讨解决方法。5分钟布置作业（理论或实践）1.基本作业完成在线课程网站发布的课后复习题。2.预习任务完成单元5任务单中的预习任务。教学后记单 元 教 学 首 页授课题目单元5 网页文本和图像总课时4教学方法任务驱动、案例分析、小组合作、讲练结合等授课地点教学做一体化教室教学目标知识目标20.掌握在Dreamweaver中为网页

41、文档添加文本元素的方法；21.掌握在Dreamweaver中创建列表及设置列表符号或编号的方法；22.掌握使用CSS设置文本样式的方法；23.了解网页中常用的图像格式及特点；24.掌握在网页中添加图像及图像对象的方法；25.掌握设置图像属性，以及用CSS设置图像样式的方法。能力目标11.能够在网页中正确添加段落、标题等文本元素；12.能够在网页中正确创建列表并设置列表属性；13.能够使用CSS样式美化网页文本元素；14.能够在网页中正确添加图像元素；15.能够用CSS美化网页图像；16.能够对图像和文本进行简单编排。职业素质目标14.熟悉网站设计行业职业道德规范；15.具备良好的职业道德和沟通

42、交流能力；16.具备独立思考和认真钻研的良好品质；17.通过小组合作能够完成安排的学习任务。教学重点 用 CSS设置文本样式的方法；用 CSS设置图像样式的方法；对图像和文本进行简单编排。教学难点 用 CSS设置文本样式的方法；用 CSS设置图像样式的方法；对图像和文本进行简单编排。单 元 授 课 进 度 分 解授课进度第1 讲（共 2讲）授课情景名称制作文本类网页教学内容设计（体现教学步骤，包括时间分配和教学内容教学进程）教学环节教学内容教方教学手段学生活动时间分配引入、告知（教学内容、目的）引入新课：1.案例分析通过展示“唐诗赏析”网页，向学生介绍网页中文本元素的类型和特点。2 .提出问题

43、网页中文本元素的类型有哪些？不同类型文本元素如何添加？如何对文本元素进行美化？3 .介绍本次课的教学目标、教学重点和难点。案 例分析、任 务驱动、讲 练结 合等教 学做 一体化、多 媒体 教学等课 前预习、小 组合 作等1 0 分钟授课（突出教学内容要点，掌握基本知识和技能）任务5.1 制作文本类网页1 .在网页中添加文本元素（1）输入文本（2）复制文本2 .在网页中创建与设置列表（1）创建列表（2）创建嵌套列表（3）修改列表项目符号或编号3.边学边练：制作唐诗赏析网页4 .设置网页文本属性5 .边学边练：使用C S S 美化唐诗赏析网页文本说明：详情的教学内容见本次课的P P T 文档翻 转

44、课堂、任 务驱动、案 例分析、讲 练结 合等教 学做 一体化、混 合式 教学 模式等小 组合作、抢答、随 机提 问等4 0 分钟课堂演练1.任务拓展：为“唐诗赏析”插入特殊字符、水平线和日期。2.单元技能实战演练：以小组为单位，在Dreamweaver CC中完成 唐诗赏析”页面的制作，请自选一首唐诗进行分享。任 务驱动、讲 练结 合等教 学做 一体化小 组合作、实 战演练35分钟总 结（本堂课的要点归纳，应写出结论性的文字）以小组为单位，通过提问学生，总结本次课的学习内容。教师重点对本次课学习的网页中文本元素的类型、添加方法及CSS美化方法等内容进行归纳总结，强调本次课的重点和难点知识和技能

45、要求，并针对本次课的学习内容，做好课外作业的统筹安排。5 分钟布置作业（理论或实践）1.基本作业：利用课外时间，学生们完成本次课对应的单元课后习题。2.举一反三：以小组为单位，利用课外时间，继续对“我的家乡”网页进行文本格式设置与样式美化。教学后记按照授课计划完成本次课的教学任务。在教学过程中，注重合理引用素材文本等课程思政育人元素的融入，突出小组合作、学生遵守职业规范与流程的培养。通过学生们上机实训和完成的作业情况来看，学生们基本掌握了本单元网页文本元素部分的教学内容，但是对网页文本元素的美化效果，还需进一步通过练习加以提升。备注：1.教案编写要求，请 参 考 教案编写规范（文件编号zy/j

46、wc-13）。2.教学手段：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等。3.教学方法：（讨论、启发、演示、辩论、讲练结合等）。4.授课：内容不照本宣科，不满堂灌，注重引导学生思考问题、研究问题、解决问题。5.教学后记：课后由教师手动填写，对该堂课教后的感受及学生的收获、改进方法等。单 元 授 课 进 度 分 解授课进度第2讲（共 2 讲）授课情景名称在网页中插入图像教学内容设计（体现教学步骤，包括时间分配和教学内容教学进程）教学环节教学内容教方教学手段学生活动时间分配引入、告知（教学内容、目的）引入新课：1.案例分析通过展示新浪网部分网页，向学生展示网页中图文排列的风格与方

47、式，介绍网页中图像的类型和特点，以及图文混排的重要性。2.提出问题网页中都可以用哪些类型的图像？如何在网页中添加图像？网页中图像和文本如何排版？3.介绍本次课的教学目标、教学重点和难点。案 例分析、任 务驱动、讲 练结 合等教 学做 一体化、多 媒体 教学等课 前预习、小 组合 作等10分钟授课（突出教学内容要点，掌握基本知识和技能）任务5.2 在网页中插入图像1.网页中常用的图像格式网页中使用的通常只有三种，即GIF、JPEG和 PNGo2.在网页中添加图像元素3.设置网页图像属性4.用 CSS设置网页图像样式5.用 CSS设置网页的背景图像6.边学边练：图文混排一一设计制作电影介绍网站页面

48、说明：详情的教学内容见本次课的PPT文档翻 转课堂、任 务驱动、案 例分析、讲 练结 合等教 学做 一体化、混 合式 教学 模式等小 组合作、抢答、随 机提 问等40分钟课堂演练1.任务拓展：插入鼠标经过图像。2.单元技能实战演练：以小组为单位，在Dreamweaver CC中创建站点并完成“好书推荐”页面的制作。任 务驱动、讲 练结 合等教 学做 一体化小 组合作、实 战演练35分钟总 结（本堂课的要点归纳，应写出结论性的文字）以小组为单位，通过提问学生，总结本次课的学习内容。教师重点对本次课学习的网页中图像元素的使用，图文混排设置等内容进行归纳总结，强调本次课的重点和难点知识和技能要求，并

49、针对本次课的学习内容，做好课外作业的统筹安排。5 分钟布置作业（理论或实践）1.基本作业：利用课外时间，学生们完成本次课对应的单元课后习题。2.举一反三：以小组为单位，利用课外时间，继续对“我的家乡”网页添加图像，并进行图文混排编辑美化。教学后记按照授课计划完成本次课的教学任务。在教学过程中，注重合理引用素材图像等课程思政育人元素的融入，突出小组合作、学生遵守职业规范与流程的培养。通过学生们上机实训和完成的作业情况来看，学生们基本掌握了本单元任务2 的教学内容，但是对于页面整体美化效果仍需进一步练习提升。备注：1.教案编写要求，请 参 考 教案编写规范（文件编号z y/j w c-1 3）。2

50、 .教学手段：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等。3 .教学方法：（讨论、启发、演示、辩论、讲练结合等）。4 .授课：内容不照本宣科，不满堂灌，注重引导学生思考问题、研究问题、解决问题。5 .教学后记：课后由教师手动填写，对该堂课教后的感受及学生的收获、改进方法等。单 元 教 学 首 页授课题目单元6 网页超链接与导航总课时4教学方法任务驱动、案例分析、小组合作、讲练结合等授课地点教学做一体化教室教学目标知识目标26.认识超链接的概念、种类及超链接路径；27.掌握各类超链接的作用与创建方法；28.掌握设置超链接CSS样式的方法；29.掌握图像地图的创建方法；30.认