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

教案2025年1月课程网页设计与制作HTML5+CSS3+JavaScr ipt总计62（参考）学名称（第5版）（微课版）时授课题目第8章网页设计基础授课方式课时理论课8理论课口讨论课口实验课口习题课口其他口（请打V）女排实验课4教学大纲要求让学生能应用认知和设计的原则，设计出适合扫描、导航清晰、版式合理的网页教学重点及难点重点4个基本设计原则紧凑、对齐、重复、对比，网站导航、页面比例、页面分栏、版面率、图版面积和跳跃率作业、讨论题、思考题课后总结分析教学内容主要教学内容第8章网页设计基础【知识目标】【技能目标】【素养目标】

8.1设计与认知

1.

1.1格式塔理论概述

8.

1.2认知时的组织原则

8.2设计原则

8.

2.1紧凑原则

8.

2.2对齐原则

8.

2.3重复原则对比原则

8.3设计适于扫描的网页

8.

3.1建立清楚的视觉层次

8.

3.2使用习惯用法

8.

3.3划分明确的页面区域减轻视觉污染

8.4设计导航

8.

4.1网页导航惯例

8.

4.2全局导航

8.

4.3站点ID导航条

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跳跃率【要点回顾】练习题授课方式课时理论课4理论课口讨论课口实验课口习题课口其他口（请打J）安排实验课2教学大纲要求让学生能使用Dreamweaver快速创建站点、编辑网页、应用CSS和辅助代码编写，并实现响应式设计教学重点及难点重点Dreamweaver的基本界面元素和站点，响应式设计作业、讨论题、思考题课后总结分析:教学内容主要教学内容:第9章用Dreamweaver制作网页【知识目标】【技能目标】【素养目标】

9.1Dreamweaver的界面

9.2使用本地站点

9.

2.1创建本地站点站点文件操作

1.3编辑网页

1.

3.1制作网页的一般过程

1.

3.2使用文本

1.

3.3使用超链接

1.

3.4使用图像

1.

3.5使用音频与视频

1.

3.

63.6使用表格

1.

3.

73.7使用表单

1.4使用CSS样式

9.

4.1链接或创建样式表

10.

4.2定义样式规则

11.

4.3应用样式规则

9.

4.4使用CSS设计页面布局

9.5高级功能

9.

5.1快速代码编写

10.

5.2响应式网页设计

11.

5.3使用Bootstrap

12.

5.4使用jQuery【要点回顾】练习题授课方式课时理论课4理论课口讨论课口实验课口习题课口其他口（请打J）安排实验课1教学大纲要求让学生能通过项目实践，掌握网站开发的标准流程并深化对各种技术和原理的理解教学重点及难点:重点网站开发流程、网站策划书、网站测试作业、讨论题、思考题课后总结分析:教学内容主要教学内容:第10章综合项目实践【知识目标】【技能目标】【素养目标】

12.1网站开发的项目管理

13.

1.1网站开发流程

14.

1.2网站开发团队

10.

1.3网站策划书

10.2“游戏天地”网站规划

10.

2.1网站目标

10.

2.2站点风格与技术因素

10.

2.3信息架构

10.3“游戏天地”网站设计

10.

3.1导航设计

10.

3.2页面设计

10.4“游戏天地”网站实现

10.

4.1实现流程

10.

4.2网页基本结构的实现

10.

4.3典型页面的实现【要点回顾】练习题课程讲授学时专业课课程代码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.“游戏天地”网站综合设计授课方式理论课口讨论课口实验课口习题课口其他口课时安排理论课:（请打J）教学大纲要求让学生可以使用基本的标记符和属性，构建出单个的网页教学重点及难点重点HTML标记符和属性的语法规则和基于Web标准的网站开发作业、讨论题、思考题课后总结分析:教学内容主要教学内容:第1章HTML5基础【知识目标】【技能目标】【素养目标】

1.1什么是HTML

1.

1.1网页的基本概念

1.

1.2HTML的工作原理

1.

1.3创建和测试网页

1.

1.4网页编辑工具

1.2创建网页

1.

2.1标记符基础

1.

2.2网页的基本结构

1.

2.3在网页中添加内容

1.3综合实例人物介绍网页【要点回顾】练习题授课方式理论课口讨论课口实验课口习题课口其他口课时安排理论课:（请打J）授课题目第2章文本格式与超链接教学大纲要求掌握＜p＞、＜hl＞＜h6＞、〈hr〉、〈a＞等标记符的用法学会区分物理〜字符样式和逻辑字符样式，站内链接、站外链接和锚点链接可以使用多种标记符和属性，构建出基于文本、具有多个页面的网站教学重点及难点重点建立基本的网页文本结构，使用逻辑字符样式，为网页文本增加逻辑，设置有序列表、无序列表和嵌套列表，熟练使用＜a〉标记符和href属性，创建各种超链接学会综合应用各种标记符，创建基于文本的网站作业、讨论题、思考题课后总结分析:教学内容主要教学内容:第2章文本格式与超链接【知识目标】【技能目标】【素养目标】

2.1设置文本格式

2.

1.1段落格式

2.

1.

21.2字体格式

2.

1.3列表格式

2.2创建超链接

2.

32.1URL概述

2.

4.2页面链接

2.

5.3锚点链接

2.3综合实例唐诗宋词网站

1.

1.

13.1网站规划

1.

1.2网页设计

1.

1.3网页制作【要点回顾】练习题授课方式课时理论课4理论课口讨论课口实验课口习题课口其他口、（请打J）安排实验课2教学大纲要求让学生理解CSS的概念和优点、掌握标记符选择器、类选择器、ID选择器、.*-riA伪类选择器和群组选择器的用法等，并可以使用CSS技术对网页进行基本的修饰和美化教学重点及难点重点站点样式、网页样式、行内样式的用法，标记符选择器、类选择器、ID选择器、伪类选择器和群组选择器的用法，常用的CSS颜色与背景属性、字体属性和文本属性作业、讨论题、思考题课后总结分析:教学内容6主要教学内容:;第3章CSS3基础I【知识目标】【技能目标】i【素养目标】

3.1CSS入门!

3.

1.1什么是CSS!

3.

1.2CSS样式定义，

3.

1.3CSS的属性单位!

3.2在网页中使用CSSI使用站点样式1使用网页样式V使用行内样式

3.3CSS3基本选择器，

3.

3.1标记符选择器i

3.

3.2类选择器!

3.

3.3ID选择器伪类选择器群组选择器!

3.4CSS3基础属性

3.

4.1颜色与背景属性i

3.

4.2字体属性!

3.

4.3文本属性

63.5综合实例电影欣赏网站1网站规划与设计，

3.

5.2网页制作I【要点回顾】I练习题授课方式理论课口讨论课口实验课口习题课口其他口（请打J）教学大纲要求让学生可以把图像等多媒体对象插入网页中，并且进行一定的修饰，从而增强网页的表现力教学重点及难点重点区分位图与矢量图，区分GIF、JPEG和PNG格式，＜img＞标记符的用法作业、讨论题、思考题:课后总结分析:教学内容主要教学内容:第4章图像【知识目标】【技能目标】【素养目标】

4.1网页图像基础位图与矢量图

4.

1.2网页图像格式

5.

1.3使用网页图像的要点

6.2图像处理基本操作

7.

2.1Photoshop的界面

8.

2.2修改图像的大小

9.

2.3调整图像的颜色

102.4修补图像与抠像

112.5用适当的格式保存图像

4.3图像标记符＜img〉

1.

3.1插入图像设置图像属性

1.4综合实例中国符号网站

4.

4.1网站规划与设计

4.42图像处理与网页制作【要点回顾】练习题授课方式理论课口讨论课口实验课口习题课口其他口（请打J）教学大纲要求让学生可以在网页中使用表格对数据进行合理组织，使用表单建立起基本的用户数据收集机制教学重点及难点重点表格的构造方法，表单控件类型及用法作业、讨论题、思考题:课后总结分析:教学内容主要教学内容:第5章表格与表单【知识目标】【技能目标】【素养目标】

5.1创建表格

5.

1.1表格的基本构成合并单元格

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文本框与密码框

6.

4.2复选框与单选框

7.

4.3按钮

8.

4.4多行文本框

9.

4.5选项菜单

5.5综合实例表格与表单

5.

5.1复杂表格页面

6.

5.2登录注册页面【要点回顾】练习题授课方式理论课口讨论课口实验课口习题课口其他口（请打J）教学大纲要求让学生能对页面进行更为精确的控制和修饰，设计出风格统

一、样式美观的网站教学重点及难点重点后代选择器、子元素选择器、相邻兄弟选择器和属性选择器，CSS盒模型，静态定位、浮动定位、相对定位、绝对定位和固定定位，CSS分类属性、列表属性和特效属性作业、讨论题、思考题课后总结分析:教学内容主要教学内容:第6章CSS3进阶【知识目标】【技能目标】【素养目标】

7.1CSS3高级选择器

7.

1.1后代选择器

7.

1.2子元素选择器

7.

1.3相邻兄弟选择器

7.

1.4属性选择器

6.2CSS3布局

7.

2.1CSS盒模型

8.

2.2CSS定位概述

9.

2.3浮动定位

10.

2.4相对定位

11..5绝对定位与固定定位

6.3CSS3高级属性

7.

3.1分类属性

8.

3.2列表属性

9.

3.3特效属性

6.4CSS3样式的优先级

6.

4.1一般性规则

6.

4.2样式优先级的计算

6.5综合实例中华美食网站

6.

5.1网站规划与设计

6.

5.2网页制作【要点回顾】练习题授课方式理论课口讨论课口实验课口习题课口其他口（请打J）教学大纲要求让学生能在网页中加入一定的程序逻辑，并通过综合应用前端开发技术，设计出功能与风格兼备的网站教学重点及难点:重点客户端脚本、变量、运算符与表达式、条件语句、循环语句、函数、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对象

8.

2.3使用浏览器对象

9.

2.4使用文档对象

2.3前端开发技术

7.

3.1使用jQuery

8.

3.2使用Bootstrap

9.

3.3使用Vue.js

7.

3.4使用AngularJS

7.

3.5使用React【要点回顾】练习题。