课程概述

Web系统就是基于网站形式的具有一定功能的系统,例如新浪、淘宝、携程等。这些系统中以网页形式呈现给用户的部分,就是前端。随着Web系统的普遍应用,包括移动端APP的快速发展,“Web前端开发已经成为近些年最为重要的技术之一,人才需求量巨大。本门课程将介绍Web系统前端开发的核心技术。

课程内容涵盖Web系统前端开发技术的HTML5CSS3JS、JQuery、Bootstrap等组成部分,其中HTML决定网页的结构,CSS决定网页的样式,JS决定网页的交互。课程采用其最新技术标准与应用。

课程以校企联合主讲的形式,两位主讲教师分别来自于北京林业大学与达内时代科技集团,更好地融合了学院派的理论与企业级的应用,让课程深入浅出的由基础过渡到实际应用。

课程由百度前端技术学院负责人提供技术支持,在课程最后将针对未来的学习路线与前端工程师需要具备技能与素质等问题进行讲解。

课程顾问团队包括三位教师,以及助理研究生一名,将对课程内容、教学、练习、答疑、考试、评价等环节进行全方位支持与服务。

        课程包括知识点、知识型案例、综合案例与企业实际案例,可支持两种主线进行学习,一种是以知识点为主,循序渐进的方式;一种案例式教学,课程中所有知识点均内嵌于案例中,可以由案例快速入门,带动知识点系统学习。在第二种方式下,也可以将部分知识点作为SPOC中,课下学习的部分。所有案例的源代码均可以在线下载。

        课程知识点按照难易程度,分为两个等级,支持两种不同基础的学习。例如零基础的同学,建议从“Web前端开发概论部分开始学习,有一定基础的同学,可以直接进入HTML部分学习,从而可以有足够学时延伸到JQueryHTML5部分。

课程支持进入在线编程页面,学生在线编辑源代码后,直接浏览到结果。



证书要求

成绩按百分制计分

1. 准时签到、在线学习时间、单元测验、单元作业、 讨论等暂定40%; 4. 期末考试暂定60%。


预备知识

计算机基础

授课大纲

8. 课程综合案例

8-6 返回顶部、吸顶灯功能

8-1 网页布局与初始化(整个案例源代码在这里下载)

8-3 网页产品内容、搜索功能

8-4 页面服务、售后服务

8-5 网页底部、页面插件引用

8-2 网页顶部、导航栏

2. HTML基础

2-2 HTML文件结构

2-4 HTML标签(II) a

扩展Sublime Text的操作(HTML)

2-1 HTML概述

2-5 HTML标签(III) img

2-6 HTML标签(IV) div、ul、ol 、table

2-3 HTML标签(I) h1~h6、p、br、pre、span、hr

2-7 HTML标签(V) form、input、selec、textarea

扩展 Sublime Text的操作(基本环境)

作业:完成一个诗词网站

第2章 HTML单元测验

1. 概论

扩展:浏览器如何渲染网页?服务器的作用?(好玩的动画片哦)

1-1 web前端开发概述

1-2 网站与网页

1-3 web前端开发技术

概论 单元测试

3. CSS样式

3-4 CSS样式(I) 文字样式

3-1 CSS概述

3-2 CSS添加方法

3-6 CSS样式(III) 列表 表格样式

3-3 CSS选择器

3-5 CSS样式(II) 背景、超链接样式

第3章 CSS样式 单元作业

第3章 CSS样式 单元测验

4. CSS布局与定位

4-7 层定位

4-2 盒子模型(I)

4-5 文档流定位

4-4 CSS定位机制概述

4-6 浮动定位

4-1 布局与定位概述

4-3 盒子模型(II)

单元作业

单元测验

5. CSS3

5-5 3D变换

5-3 2D变换

5-2 文字与文本

综合案例

5-4 过渡与动画

5-1 圆角边框与阴影

单元作业

6. JavaScript基础

6-10 DOM查找

6-4 运算符与表达式

6-7 循环结构

6-6 分支结构

6-8 数组

6-1 概述与基础语法

6-2 变量

6-13 BOM

6-9 数组API函数

6-12 DOM添加

6-3 数据类型

6-5 函数

6-11 DOM修改

综合案例:魔方

单元作业

单元测试

7. JQuery & HTML5

7-3 JQuery事件

7-2 JQuery增删改查

7-4 HTML5

7-1 JQuery概述&工厂函数

单元测验

9. 企业前端最新技术需求与建议学习路线(前沿扩展)

企业前端最新技术需求与建议学习路线

参考资料
  1. w3c官方学习网站 https://www.w3school.com.cn/ 

  2. Web设计与前端开发秘籍:HTML CSS JavaScript jQuery 构建网站.Jon Duckett 著,刘涛,陈学敏译.清华大学出版社.

常见问题
  1. 什么是Web前端开发?

    【答】“Web前端开发”起源于“网站设计”,早期Web技术下,静态网站较多,网站前端、后端界限模糊,网站设计主要指设计与制作网站中网页的过程。随着技术发展,很多系统由网站形式呈现,前端就是用户接触到的界面,后端就是对数据进行存取和处理的部分。这时就逐步细分出web前端开发了。

  2. 没有学过编程,可以学习这门课程吗?

    【答】可以的。Web前端开发技术3个核心的构成是:HTML、CSS、JavaScript。前两个部分的程序设计不涉及结构化、面向对象程序设计思想,JavaScript部分则涉及到这些,所以HTML和CSS相对而言容易掌握。而JavaScript部分,没有程序设计基础的同学,需要更多练习与实践才能够掌握。

  3. 这门课使用到的软件与环境?

    【答】课程中的代码都可以使用记事本编辑。本门课程主要用到的程序编辑器是Sublime Text,这个软件最新版本是Sublime Text3,使用之前的版本Sublime Text2也可以。软件是收费软件,但是有试用版,可以在网上自行搜索下载。
            此外,课程还提供了在线编辑平台,基本涵盖了Sublime的功能,域名是https://webcourse.club/。