Web前端基础案例 答计划

授课计划,,,,,,,,,,,,,,

学年学期,,2025--2026学年第一学期,,,,,上课班级(含合班情况)：,,,,2025级软件1班,,,

课程代码：,,N13001003,课程名称：,,Web前端基础,,,,上课班级总人数：,,,52,,

课程性质：,,必修课,开课部门：,,软件与大数据系,,,,任课教师：,,李志云,,,

总学时：,,64,理论学时：,,32,实践学时：,,32,上课周数：,,16,,,

"课程教学总目标：

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

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

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

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

",,,,,,,,,,,,,,

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

本授课计划的教学对象是2025级新生，学生第一次接触HTML5，专业基础薄弱，授课过程中充分调动学生学习兴趣，在充分学习教材内容的基础上，对部分学习态度浓厚、想深入学习的同学可以加大项目作业的力度，充分利用网络资源等进行学习深入，拓展知识的深度和广度，加大对学生动手操作能力的培养。对基础稍差的同学要求只要掌握教材内容即可。通过一学期的学习，争取使所有同学都能做出自己的网站作品。",,,,,,,,,,,,,,

"教学内容分析（含教学内容编排目的要求、重点与难点）：

《Web前端基础》这门课程是一门实践性较强的课程，以编写代码为主，循序渐进、深入浅出的学习网页设计语言，包括HTML5、CSS3和网页布局技术等，通过项目学习网页制作中常用的技术和技巧。在教学内容编排上，能够体现各部分知识的内在联系，通过大量的实例与项目，让学生学会制作网页的方法和技巧。超星网络学习平台提供了大量学习资源，通过该平台使学生巩固所学内容，提高知识应用能力。通过本学期的学习，让学生掌握以下主要内容：

一、掌握HTML5语言中的各种常用标记，会使用工具软件HBilderX或VSCode。

二、主要学会利用HTML5搭建页面结构，用CSS3美化修饰网页。

三、掌握HTML5+CSS3布局技术设计与制作静态网站。",,,,,,,,,,,,,,

"教学主要方法与措施：

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

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

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

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

课次,周次,日期,星期,节次,授课内容（教学目标、重点、难点）,,,,,,,,,备注

1,,,,,"任务1：WEB前端开发概述

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

难点：HTTP/HTML/URL的概念",,,,,,,,,

2,,,,,"任务2：简单学院网站

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

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

3,,,,,"任务2：简单学院网站

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

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

4,,,,,"任务2：简单学院网站

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

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

5,,,,,"任务2：简单学院网站

重点：自定义列表标记

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

6,,,,,"任务2：简单学院网站

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

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

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

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

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

重点：CSS的样式的使用

难点：外部样式表",,,,,,,,,

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

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

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

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

12,,,,,实训：美化个人网站,,,,,,,,,

13,,,,,"任务4：学院简介页面

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

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

14,,,,,"任务4：学院简介页面

重点：元素的背景属性

难点：background属性的综合设置",,,,,,,,,

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

16,,,,,"任务5：学院网站导航条

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

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

17,,,,,实训：竖直导航条的制作,,,,,,,,,

18,,,,,"任务6：学院新闻块

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

难点：新闻块的样式设置",,,,,,,,,

19,,,,,"任务6：学院新闻块

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

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

20,,,,,"任务6：学院新闻块

重点：复杂新闻块的制作

难点：盒子的定位",,,,,,,,,

21,,,,,"任务7：学生信息表

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

难点：表格样式的设置",,,,,,,,,

22,,,,,实训：课程表等的制作,,,,,,,,,

23,,,,,"任务8：学生登录表单

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

难点：表单样式的设置",,,,,,,,,

24,,,,,"任务8：学生注册表单

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

难点：表单样式的设置",,,,,,,,,

25,,,,,实训：交规考试表单制作,,,,,,,,,

26,,,,,"任务9：布局学院网站主页

重点：新增HTML5结构标记、单列布局

难点：单列布局样式的设置",,,,,,,,,

27,,,,,"任务9：布局学院网站主页

重点：新增HTML5结构标记、两列布局

难点：两列布局样式的设置",,,,,,,,,

28,,,,,"任务10：制作照片墙页面

重点：过渡属性、变形属性的使用

难点：属性的语法格式",,,,,,,,,

29,,,,,"任务11：制作学院网站

重点：首页设计（一）

难点：样式的设置",,,,,,,,,

30,,,,,"任务11：制作学院网站

重点：首页设计（二）

难点：样式的设置",,,,,,,,,

31,,,,,"任务11：制作学院网站

重点：首页设计（三）

难点：样式的设置",,,,,,,,,

32,,,,,"任务11：制作学院网站

重点：其它页设计

难点：样式的设置",,,,,,,,,

该班课程设计安排：,,,,,,,,,,,,,,

指导该班课程设计安排：,,,无,,,,,,,,,,,

本课程负责教师:,,,,,专业负责人:,,,,,系部院主任:,,,,

教务与科研处处长：,,,,,教学院长批准:,,,,,计划制定时间:,,,,

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