网页设计与制作（HTML5+CSS3+JavaScript）（第5版）微课版 教案全套 赵丰年

PAGEPAGE0教案课程名称网页设计与制作（HTML5+CSS3+JavaScript）

（第5版）（微课版）课程代码系(部)教研室(实验室)授课教师职称2025年1月PAGE2课程名称网页设计与制作（HTML5+CSS3+JavaScript）

（第5版）（微课版）总计：62（参考）学时课程类别专业课课程代码讲授：42学时实验：20学时其他：学时授课教师学分授课对象教材和主要参考资料参考资料：颜珍平,

陈承欢

,汤梦姣，编著，《HTML5+CSS3网页设计与制作实战》第5版，人民邮电出版社，2023.2课程简介《网页设计与制作（HTML5+CSS3+JavaScript）》课程系统全面地介绍网页制作和前端开发技术的基本理论和实际应用，共10章，从逻辑上可分为三大部分。前5章为第1部分，主要介绍网页制作的基本技术—HTML和CSS，同时介绍Photoshop在网页制作过程中的应用；第6章和第7章为第2部分，主要介绍CSS技术的高级应用技巧和JavaScript编程，并对各种常见的前端开发技术进行系统梳理；最后3章为第3部分，其中，第8章从心理学和设计理论视角介绍如何进行网页设计，第9章介绍如何使用Dreamweaver制作网页，第10章则从项目实践的角度介绍如何设计和开发网站，使学生能够在具体应用中巩固所学知识。本课程以实用为基本出发点，不仅包括各种网页制作和前端开发技术的基础理论，还强调了它们的具体应用，使学生既能打下坚实的理论基础，又能掌握实际的操作技能。本课程绝大部分内容经过了长期的教学检验，重点突出、详略得当。教学难点重点1．创建网页。2．设置文本格式和创建超链接。3．在网页中使用CSS。4．图像处理基本操作5．创建并设置表格和表单。6．CSS3布局和CSS3高级选择器、高级属性。7．JavaScript与前端开发技术。8．设计导航和页面版式。9．用Dreamweaver制作网页。10．“游戏天地”网站综合设计

授课题目：第1章HTML5基础授课方式（请打√）理论课□讨论课□实验课□习题课□其他□课时安排理论课：教学大纲要求：让学生可以使用基本的标记符和属性，构建出单个的网页。教学重点及难点：重点：HTML标记符和属性的语法规则和基于Web标准的网站开发作业、讨论题、思考题：课后总结分析：教学内容主要教学内容：第1章HTML5基础【知识目标】【技能目标】【素养目标】1.1什么是HTML1.1.1网页的基本概念1.1.2HTML的工作原理1.1.3创建和测试网页1.1.4网页编辑工具1.2创建网页1.2.1标记符基础1.2.2网页的基本结构1.2.3在网页中添加内容1.3综合实例：人物介绍网页【要点回顾】练习题

授课题目：第2章文本格式与超链接授课方式（请打√）理论课□讨论课□实验课□习题课□其他□课时安排理论课：教学大纲要求：掌握<p>、<h1>～<h6>、<hr>、<a>等标记符的用法。学会区分物理字符样式和逻辑字符样式，站内链接、站外链接和锚点链接。可以使用多种标记符和属性，构建出基于文本、具有多个页面的网站。教学重点及难点：重点：建立基本的网页文本结构，使用逻辑字符样式，为网页文本增加逻辑，设置有序列表、无序列表和嵌套列表，熟练使用<a>标记符和href属性，创建各种超链接。学会综合应用各种标记符，创建基于文本的网站。作业、讨论题、思考题：课后总结分析：教学内容主要教学内容：第2章文本格式与超链接【知识目标】【技能目标】【素养目标】2.1设置文本格式2.1.1段落格式2.1.2字体格式2.1.3列表格式2.2创建超链接2.2.1URL概述2.2.2页面链接2.2.3锚点链接2.3综合实例：唐诗宋词网站2.3.1网站规划2.3.2网页设计2.3.3网页制作【要点回顾】练习题

授课题目：第3章CSS3基础授课方式（请打√）理论课□讨论课□实验课□习题课□其他□课时安排理论课：4实验课：2教学大纲要求：让学生理解CSS的概念和优点、掌握标记符选择器、类选择器、ID选择器、伪类选择器和群组选择器的用法等，并可以使用CSS技术对网页进行基本的修饰和美化。教学重点及难点：重点：站点样式、网页样式、行内样式的用法，标记符选择器、类选择器、ID选择器、伪类选择器和群组选择器的用法，常用的CSS颜色与背景属性、字体属性和文本属性。作业、讨论题、思考题：课后总结分析：教学内容主要教学内容：第3章CSS3基础【知识目标】【技能目标】【素养目标】3.1CSS入门3.1.1什么是CSS3.1.2CSS样式定义3.1.3CSS的属性单位3.2在网页中使用CSS3.2.1使用站点样式3.2.2使用网页样式3.2.3使用行内样式3.3CSS3基本选择器3.3.1标记符选择器3.3.2类选择器3.3.3ID选择器3.3.4伪类选择器3.3.5群组选择器3.4CSS3基础属性3.4.1颜色与背景属性3.4.2字体属性3.4.3文本属性3.5综合实例：电影欣赏网站3.5.1网站规划与设计3.5.2网页制作【要点回顾】练习题 授课题目：第4章图像授课方式（请打√）理论课□讨论课□实验课□习题课□其他□课时安排理论课：4实验课：2教学大纲要求：让学生可以把图像等多媒体对象插入网页中，并且进行一定的修饰，从而增强网页的表现力。教学重点及难点：重点：区分位图与矢量图，区分GIF、JPEG和PNG格式，<img>标记符的用法。作业、讨论题、思考题：课后总结分析：教学内容主要教学内容：第4章图像【知识目标】【技能目标】【素养目标】4.1网页图像基础4.1.1位图与矢量图4.1.2网页图像格式4.1.3使用网页图像的要点4.2图像处理基本操作4.2.1Photoshop的界面4.2.2修改图像的大小4.2.3调整图像的颜色4.2.4修补图像与抠像4.2.5用适当的格式保存图像4.3图像标记符<img>4.3.1插入图像4.3.2设置图像属性4.4综合实例：中国符号网站4.4.1网站规划与设计4.4.2图像处理与网页制作【要点回顾】练习题授课题目：第5章表格与表单授课方式（请打√）理论课□讨论课□实验课□习题课□其他□课时安排理论课：4实验课：2教学大纲要求：让学生可以在网页中使用表格对数据进行合理组织，使用表单建立起基本的用户数据收集机制。教学重点及难点：重点：表格的构造方法，表单控件类型及用法。作业、讨论题、思考题：课后总结分析：教学内容主要教学内容：第5章表格与表单【知识目标】【技能目标】【素养目标】5.1创建表格5.1.1表格的基本构成5.1.2合并单元格5.1.3构造表格的步骤5.2表格的属性设置5.2.1边框与分隔线5.2.2控制单元格空白5.2.3表格的对齐5.3创建表单5.3.1什么是表单5.3.2表单控件的类型5.3.3<form>标记符5.4创建表单控件5.4.1文本框与密码框5.4.2复选框与单选框5.4.3按钮5.4.4多行文本框5.4.5选项菜单5.5综合实例：表格与表单5.5.1复杂表格页面5.5.2登录注册页面【要点回顾】练习题 授课题目：第6章CSS3进阶授课方式（请打√）理论课□讨论课□实验课□习题课□其他□课时安排理论课：4实验课：2教学大纲要求：让学生能对页面进行更为精确的控制和修饰，设计出风格统一、样式美观的网站。教学重点及难点：重点：后代选择器、子元素选择器、相邻兄弟选择器和属性选择器，CSS盒模型，静态定位、浮动定位、相对定位、绝对定位和固定定位，CSS分类属性、列表属性和特效属性。作业、讨论题、思考题：课后总结分析：教学内容主要教学内容：第6章CSS3进阶【知识目标】【技能目标】【素养目标】6.1CSS3高级选择器6.1.1后代选择器6.1.2子元素选择器6.1.3相邻兄弟选择器6.1.4属性选择器6.2CSS3布局6.2.1CSS盒模型6.2.2CSS定位概述6.2.3浮动定位6.2.4相对定位6.2.5绝对定位与固定定位6.3CSS3高级属性6.3.1分类属性6.3.2列表属性6.3.3特效属性6.4CSS3样式的优先级6.4.1一般性规则6.4.2样式优先级的计算6.5综合实例：中华美食网站6.5.1网站规划与设计6.5.2网页制作【要点回顾】练习题授课题目：第7章JavaScript与前端开发技术授课方式（请打√）理论课□讨论课□实验课□习题课□其他□课时安排理论课：4实验课：2教学大纲要求：让学生能在网页中加入一定的程序逻辑，并通过综合应用前端开发技术，设计出功能与风格兼备的网站。教学重点及难点：重点：客户端脚本、变量、运算符与表达式、条件语句、循环语句、函数、JavaScript对象、浏览器对象和文档对象、jQuery的基本语法规则、Bootstrap的使用方法。作业、讨论题、思考题：课后总结分析：教学内容主要教学内容：第7章JavaScript与前端开发技术【知识目标】【技能目标】【素养目标】7.1使用客户端脚本7.1.1使用<script>标记符7.1.2直接添加脚本7.1.3链接脚本文件7.2JavaScript编程7.2.1JavaScript语言基础7.2.2使用JavaScript对象7.2.3使用浏览器对象7.2.4使用文档对象7.3前端开发技术7.3.1使用jQuery7.3.2使用Bootstrap7.3.3使用Vue.js7.3.4使用AngularJS7.3.5使用React【要点回顾】练习题授课题目：第8章网页设计基础授课方式（请打√）理论课□讨论课□实验课□习题课□其他□课时安排理论课：8实验课：4教学大纲要求：让学生能应用认知和设计的原则，设计出适合扫描、导航清晰、版式合理的网页。教学重点及难点：重点：4个基本设计原则：紧凑、对齐、重复、对比，网站导航、页面比例、页面分栏、版面率、图版面积和跳跃率。作业、讨论题、思考题：课后总结分析：教学内容主要教学内容：第8章网页设计基础【知识目标】【技能目标】【素养目标】8.1设计与认知8.1.1格式塔理论概述8.1.2认知时的组织原则8.2设计原则8.2.1紧凑原则8.2.2对齐原则8.2.3重复原则8.2.4对比原则8.3设计适于扫描的网页8.3.1建立清楚的视觉层次8.3.2使用习惯用法8.3.3划分明确的页面区域8.3.4减轻视觉污染8.4设计导航8.4.1网页导航惯例8.4.2全局导航8.4.3站点ID8.4.4导航条8.4.5实用工具8.4.6返回主页8.4.7搜索功能8.4.8页面名称8.4.9当前位置与面包屑8.4.10网站导航测试8.5设计页面版式8.5.1页面比例8.5.2网页的分栏8.5.3版面率8.5.4图版面积8.5.5跳跃率【要点回顾】练习题授课题目：第9章用Dreamweaver制作网页授课方式（请打√）理论课□讨论课□实验课□习题课□其他□课时安排理论课：4实验课：2教学大纲要求：让学生能使用Dreamweaver快速创建站点、编辑网页、应用CSS和辅助代码编写，并实现响应式设计。教学重点及难点：重点：Dreamweaver的基本界面元素和站点，响应式设计。作业、讨论题、思考题：课后总结分析：教学内容主要教学内容：第9章用Dreamweaver制作网页【知识目标】【技能目标】【素养目标】9.1Dreamweaver的界面9.2使用本地站点9.2.1创建本地站点9.2.2站点文件操作9.3编辑网页9.3.1制作网页的一般过程9.3.2使用文本9.3.3使用超链接9.3.4使用图像9.3.5使用音频与视频9.3.6使用表格9.3.7使用表单9.4使用CSS样式9.4.1链接或创建样式表9.4.2定义样式规则9.4.3应用样式规则9.4.4使用CSS设计页面布局9.5高级功能9.5.1快速代码编写9.5.2响应式网页设计9.5.3使用Bootstrap9.5.4使用jQuery【要点回顾】练习题

授课题目：第10章综合项目实践授课方式（请打√）理论课□讨论课□实验课□习题课□其他□课时安排理论课：4实验课：1教学大纲要求：让学生能通过项目实践，掌握网站开发的标准流程并深化对各种技术和原理的理解。教学重点及难点：重点：网站开发流程