Web客户端编程(Web前端开发技术)
Web客户端编程(Web前端开发技术)
5000+ 人选课
更新日期:2025/12/13
开课时间2025/08/30 - 2026/02/19
课程周期25 周
开课状态开课中
每周学时-
课程简介

这门课会讲什么?

(1)教材获得的荣誉

  • 江苏“十四五”普通高等教育本科省级规划教材,

  • 首批江苏省优秀本科培育教材

  • 清华大学出版社2024最受欢迎计算机类图书奖。

  • 清华大学出版社2019-2023年度科技类图书最受欢迎作者奖

  • 清华大学出版社2023年科技类畅销新书奖

  • 清华大学出版社科技类最受高校欢迎教材奖

  • 国家级实验教学示范中心联席会计算机学科组“十四五”规划教材。

(2)本课程教学主要围绕前端开发的三大基础脚本语言HTML5、CSS3、JavaScript进行展开。

 

                                   Web前端开发技术简介

  第一阶段讲解HTML。HTML主要是为网页创建和其它可在网页浏览器中所见到的信息设计的一种标记语言为搭建网页结构做出第一步本阶段主要介绍了HTML的语法基础、表格、表单、等标签,并有案例结合,达到学以致用。通过这一阶段的学习,您可以制作出简单的具有丰富元素的网页,以下两个案例插入了列表、文字、超链接、多媒体文件等各种元素。

        


项目3-1 简易灯箱画廊                      项目3-2 多媒体及滚动字幕网页设计效果


第二阶段讲解CSS。CSS是一种定义样式结构如字体、颜色、位置等样式的脚本语言,被用来为页面装饰效果(美化外在表现,即“化妆”)。本阶段主要介绍了CSS的基础语法、选择器、文本、背景、列表、盒子模型、浮动、定位以及网页的布局方式。另外学生掌握结合使用DIV+CSS技术进行网页布局的基本方法,下面的案例分别采用了DIV+CSS及表单两种布局方法。

                  项目5-2 设计《2015年CERNET华东北地区年会》网站                 项目7-2 大学生暑期社会调查表页面

 第三阶段讲解JavaScript。JavaScript是一种解释性脚本语言,主要用来向HTML页面添加交互行为。本阶段主要带领大家学习JavaScript的基本语法、流程控制语句、函数、对象、DOM、BOM、事件以及轮播图的案例,实现网页的交互效果。另外学生理解对象的概念及使用JavaScript来进行开发、维护、管理和设置Web应用程序,如案例11-1所示。

      

                           实训11-1 校园办公系统认证页面

 通过课程学习,使学生拥有初步的前端开发能力,能够制作简单的具有交互功能的网页,为下一阶段的学习打下良好的基础。


你将收获什么?

 本门课程的设置以“培养具有Web前端开发基础的技术人才”为目标,在课程内容的设计上遵循“知识体系全面、学习曲线平滑、练习测试丰富”的原则,对于零基础想入门前端开发的学习者是非常友好的。通过课程学习,您将收获:

 1、扎实的前端开发能力

本课程遵循内容循序渐进、由易到难的规律,通过“理论+实训”的模式,在实践中检验学生的学习成果,巩固所学知识,提高开发基本技能。通过学习,您将具有基础的前端开发能力,可以制作出具有一定交互能力的精美的小型企业网站。

 2、证书

按进度完成本课程的学习后,参加考试且成绩合格者,将获取精美的教师签名证书。


适合什么人学习?

1、有学习《Web前端开发技术》需求的在校大学生。

2、未来想成为Web前端开发工程师Web全栈工程师Node.js工程师H5工程师等职位的初学者。

3、零基础想学习前端开发的工作者。

4、项目中需要了解一些Web前端基础知识的开发者。

5、有Web前端教学需求的教育工作者。

本门课程包含了丰富的教学资源,从理论知识到案例代码再到海量的习题库和在线考试等等。多样化案例驱动式的教学,让学习的每个环节都充满动力与成就感。

企业对Web前端开发者的要求越来越高,不管您从事何种开发,掌握Web前端技术是面试中的重加分项!本门课程是真正为基础学员而设,让您“学的都有用,学了都能懂,懂了都能做从而不断地提高学习和开发效率、不走弯路!您还再等什么,赶紧加入我们的课程吧!让我们一起学起来、一起嗨起来、一起潮起来吧!



课程大纲

课程章节

  • 课程教学大纲
  • 第一单元 Web前端开发技术概述与HTML基础
  • 第二单元 格式化文本1
  • 第三单元 格式化文本2
  • 第四单元 CSS+DIV基础
  • 第五单元 CSS+DIV高级应用
  • 第六单元 表格
  • 第七单元 表单
  • 第八单元 JavaScript基础1
  • 第九单元 JavaScript基础2
  • 第十单元 JavaScript事件分析
  • 第十一单元 DOM与BOM
  • 第十二单元 HTML5基础与CSS3应用1
  • 第十三单元 HTML5基础与CSS3应用2
  • 第十四单元 HTML5基础与CSS3应用3
  • 第十五单元 复习
  • 课外阅读

课程教学大纲

1.1 第4版-56学时教学大纲

1.2 第3版-56学时教学大纲

1.3 第3版-64学时教学大纲

第一单元 Web前端开发技术概述与HTML基础

2.1 第1章 Web前端开发技术综述

2.2 第2章 HTML基础

2.3 实训1-Web前端开发环境配置与HTML基础

2.4 练习与实验答案1-2

2.5 测验1-第1章单元测验

2.6 测验2-第2章单元测验

2.7 第1讲-教学PPT

第二单元 格式化文本1

3.1 第 3章 格式化文本与段落

3.2 第4章 列表

3.3 实训2-格式化文本、段落与列表

3.4 练习与实验答案3-4

3.5 测验3-第3章单元测验

3.6 测验4-第4章单元测验

3.7 第2讲-教学PPT

第三单元 格式化文本2

4.1 第5章 超链接与浮动框架

4.2 第6章 图像与多媒体文件

4.3 实训3-超链接与多媒体文件应用

4.4 练习与实验答案5-6

4.5 测验5-第5章单元测验

4.6 测验6-第6章单元测验

4.7 第3讲-教学PPT

第四单元 CSS+DIV基础

5.1 第7章 CSS基础

5.2 第8章 DIV与SPAN

5.3 实训4- DIV+CSS综合运用

5.4 练习与实验答案7-8

5.5 测验7-第7-8章单元测验

5.6 第4讲-教学PPT

第五单元 CSS+DIV高级应用

6.1 第9章 CSS样式属性

6.2 第10章 DIV+CSS页面布局

6.3 实训5- DIV+CSS布局规划

6.4 测验8-第9-10章单元测验

6.5 练习与实验9-10

6.6 第5讲 教学PPT

第六单元 表格

7.1 第11章 表格

7.2 实训6-表格与表格布局

7.3 测验9-第11章单元测验

7.4 练习与实验答案11

7.5 第6讲 教学PPT

第七单元 表单

8.1 第12章 表单

8.2 实训7-表单页面设计资源

8.3 测验10-第12章单元测验

8.4 练习与实验答案12

8.5 第7讲 教学PPT

8.6 期中考试-第8周

第八单元 JavaScript基础1

9.1 第14章 JavaScript基础(1)

9.2 实训9-JavaScript基础资源

9.3 案例视频-例14-1-1使用JavaScript 向HTML 页面输出信息

9.4 案例视频-例14-1-2在head 标记内定义两个JavaScript 函数

9.5 案例视频-例14-1-3调用外部js文件中的JavaScript函数

9.6 第8讲教学PPT

第九单元 JavaScript基础2

10.1 第14章 JavaScript基础(2)

10.2 第3版 实训10资源

10.3 练习与答案答案14

10.4 测验11-第14章单元测验

10.5 第9讲 教学PPT

第十单元 JavaScript事件分析

11.1 第15章 JavaScript事件

11.2 第3版 实训11资源

11.3 测验12-第15章单元测验

11.4 练习与答案答案15

11.5 案例视频-例15-6-1综合实例

11.6 第10讲 教学PPT

第十一单元 DOM与BOM

12.1 第16章 DOM与BOM

12.2 第3版 实训12资源

12.3 测验13-第16章单元测验

12.4 练习与答案答案16

12.5 第11讲 教学PPT

第十二单元 HTML5基础与CSS3应用1

13.1 第13章 HTML5基础

13.2 第12讲 教学PPT

13.3 第3版 实训8资源

第十三单元 HTML5基础与CSS3应用2

14.1 第13章 HTML5基础-表单和音视频标记

14.2 第13讲 教学PPT

第十四单元 HTML5基础与CSS3应用3

15.1 第13章 CSS3应用

15.2 第14讲 教学PPT

15.3 练习与答案答案13

15.4 测验14-第13章单元

第十五单元 复习

16.1 第一课时 复习1

16.2 第二课时 复习2

16.3 第3版教材-模拟试卷1

16.4 第3版教材-模拟试卷2

16.5 第3版教材-模拟考试1答案

16.6 第3版教材-模拟考试2答案

课外阅读