69220Web前端开发案例教程（HTML5+CSS3）（AI助学）（微课版）（第3版）-授课计划.xlsVIP

授课计划表

学年学期

上课班级(含合班情况)：

课程代码：

课程名称：

Web前端基础

上课班级总人数：

课程性质：

必修课

开课部门：

软件与大数据系

任课教师：

总学时：

理论学时：

实践学时：

上课周数：

课次

周次

日期

星期

节次

授课内容（教学目标、重点、难点）

备注

该班课程设计安排：

指导该班课程设计安排：

无

本课程负责教师:

专业负责人:

系部院主任:

教务与科研处处长：

教学院长批准:

计划制定时间:

注：1.请按班级分开填报授课计划。合堂上课的班级，如无个别周次单班上课的情况，可合并填报；否则也须分开填报。

2.“授课内容”一栏中，请简要说明教学目标、重点及难点，每次课一般使用1－2行说明完毕。

3.请统一按A4幅面打印，一式三份(签字或盖章)，并提报电子版。

4.课次总数为本班级实际的开课次数，每课次两学时，填写参考样例。公休假不统计，但统计调休补课安排。

李志云

1

3

任务2：简单学院网站实现

实训：使用HTML标记创建个人网站

任务3：简单学院网站样式实现

实训：美化个人网站

任务1：WEB前端开发概述

重点：WEB相关概念、创建第一个网页

难点：HTTP/HTML/URL的概念

任务2：简单学院网站

重点：超链接标记、图像标记

难点：超链接的href、target及title属性、锚点链接

任务3：简单学院网站美化

重点：CSS的样式的使用

难点：外部样式表

任务3：简单学院网站美化

重点：常用CSS选择器、常用CSS属性

难点：交集选择器、并集选择和后代选择器的区别

任务4：学院简介页面

重点：盒子模型及盒子模型的相关属性

难点：盒子大小的计算、border/margin/padding属性

任务4：学院简介页面

重点：元素的背景属性

难点：background属性的综合设置

任务4：学院简介页面的实现

任务5：学院网站导航条

重点：无序列表及超链接样式样式设置

难点：下拉效果导航条的制作

实训：竖直导航条的制作

任务6：学院新闻块

重点：简单学院新闻块的制作

难点：新闻块的样式设置

任务6：学院新闻块

重点：复杂新闻块的制作

难点：盒子的定位

任务6：学院新闻块

重点：学院网站中一行的制作

难点：盒子的浮动、盒子的外间距

任务7：学生信息表

重点：表格的标记table/tr/th/td及colspan/rowspan属性

难点：表格样式的设置

任务8：学生注册表单

重点：input标记的各种类型及属性

难点：表单样式的设置

6

任务2：简单学院网站

重点：HTML结构标记、文本标记、特殊字符标记

难点：h1~h6/p等标记的灵活使用

任务2：简单学院网站

重点：水平线标记、特殊字符标记

难点：hr/br/特殊字符等标记的灵活使用

任务2：简单学院网站

重点：无序列表、有序列表标记

难点：ul/ol等标记的灵活使用

任务2：简单学院网站

重点：自定义列表标记

难点：dl/dt/dd标记的灵活使用

4

5

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

24

25

26

教学主要方法与措施：

1.采用项目教学法，讲练结合，注重锻炼学生的动手实践能力。

2.采用线上线下混合式教学方法，拓宽学习时间和空间，培养自学能力。

3.注意学生能力的培养。通过各种手段培养学生的沟通表达能力、精益求精的工匠精神。

课程考核：过程性考核平时60%+期末40%

任务8：学生登录表单

重点：表单标记form/input/textarea/select等

难点：表单样式的设置

授课计划

2025--2026学年第一学期

2025级软件1班

课程教学总目标：

《Web前端基础》课程是一门以动手实践为主的专业核心基础课，主要学习HTML5、CSS3等技术，通过一学期的学习学会小型静态网站的设计与制作，本教材通过二到三个项目学习，使学生掌握Web前端开发中的常用技术和技巧。本课程的总目标如下。

素质目标：具备较好的沟通表达和团队协作能力，具备精益求精、踏实认真的工匠精神，养成标准意识和创新思维习惯。

知识目标：会使用HTML5语言标记搭建网页结构,会使用CSS3修饰网页，会使用HTML5+CSS3对网页布局。

能力目标：能对实际项目进行需求分析和规划，能设计小型静态网站，能用代码编辑网页，能开发小型静态网站；

学生情况分析(含知识能力情况、学习习惯等情况)：

本授课计划的教学对象是2025级新生，学生第一次接触HTML5，专业基础薄弱，授课过程中充分调动学生学习兴趣，在充分学习教材内容的基础上，对部分学习态度浓厚、想深入学习的同学可以加大项目作业的力度，充分利用网络资源等进行学习深入，拓展知识的深度和广度，加大对学生动手操作能力的培