Web前端设计

课程详情

随着移动互联时代的到来，网页内容愈加丰富多彩，用户体验更加得心应手，这些都是基于前端技术的不断更新演变。本课程以HTML5、CSS3和前端框架BootStrap为核心知识，一方面知识点讲解通俗易懂，另一方面通过分析讲解实用案例辅助学习和理解，是成为一个Web前端设计师的必修课程。

—— 课程团队

课程概述

Web前端就是各种网站页面以及APP页面，是企业或个人进行信息呈现以及信息传递的主要方式，Web前端工程师是由网站美工演变而来，随着移动时代的全面到来，前端技术发展越来越快，前端工程师的需求也越来越多。

本课程内容主要包含HTML5、CSS3和流行前端框架BootStrap，共分九个章节。第1到3章讲解HTML基础、HTML标签、多媒体、表单，是进行网页结构设计的基础；第4到5章讲解CSS3基础、CSS3属性，初步掌握使用CSS3进行网页美化的方法；第6到8章讲解盒子模型、网页布局、浮动、定位以及CSS3高级应用，掌握使用CSS进行网页布局和排版的方法，并初步掌握使用CSS3制作网页动态特效的方法；第9章讲解前端框架BootStrap，初步掌握使用BootStrap进行响应式网页设计的方法。

课程内容循序渐进，由浅入深，知识点的讲解与示例相结合，为更好的理解知识点及其实际应用，每个章节都配备有相关实用/真实案例，并对案例进行分析和演示讲解。

课程配套有相关的单元测试，学生可以进行在线测试，巩固所学知识。

课程教学过程使用跨平台前端开发工具Visual studio code，可以提高代码编写效率。

授课目标

1.知识目标

（1）掌握使用HTML进行网页结构设计的相关知识；

（2）掌握使用CSS3进行网页美化的相关知识；

（3）掌握盒子模型与网页布局的相关知识；

（4）掌握使用CSS3制作网页动画特效的方法；

（5）掌握使用Bootstrap框架设计响应式网页的基本方法。

2.技能目标

（1）掌握根据网页效果，使用HTML5+CSS3进行网页设计和美化的方法；

（2）掌握使响应式网页的设计方法步骤；

（3）掌握一定的网页配色、设计感的相关知识；

（4）掌握前端网页的分析和设计步骤；

（5）能够独立设计开发出各种类型的网站。

3.素质目标

（1）遵循WEB开发规范，培养严谨的编程习惯；

（2）培养分析和解决前端问题的能力；

（3）培养团队协作，沟通交流能力；

（4）培养刻苦钻研，勇于创新，敢于表达的综合个人能力

（5）提升学生网页制作的设计感；

课程大纲

第一章 网站开发基础知识

1-1 网站开发基础知识-Ⅰ

1-2 网站开发基础知识- Ⅱ

1-3 阶段案例 Visual Studio Code 基础操作

第一章 单元测试

第二章 HTML5基础

2-1 HTML基础知识

2-2 HTML基础标签-Ⅰ

2-3 阶段案例 学院专业介绍

2-4 HTML基础标签-Ⅱ

2-5 HTML结构元素

2-6 阶段案例 二级学院介绍

第二章章节测试

第三章 HTML5多媒体与表单

3-1 多媒体应用

3-2 阶段案例 垃圾分类的好处

3-3 表单的应用

3-4 阶段案例 学生信息登记表

第三章章节测试

第四章 CSS3基础

4-1 CSS3概述

4-2 引入方式

4-3 阶段案例 沁园春﹒长沙

4-4 CSS选择器-Ⅰ

4-4 CSS选择器-Ⅱ

4-5 阶段案例 新闻页面

4-6 阶段案例 设置文章段落样式

第四章章节测试

第五章 CSS3属性

5-1 CSS样式属性

5-2 超链接伪类及列表样式

5-3 阶段案例 新闻网站列表

5-4 线性渐变

5-5 阶段案例 流行音乐排行榜

第五章章节测试

第六章 盒子模型与网页布局

6-1 盒子模型-Ⅰ

6-1 盒子模型-Ⅱ

6-2 阶段案例 读书网侧边导航

6-3 网页布局

6-4 阶段案例 电影列表项

第六章 章节测试

第七章 浮动与定位

7-1 浮动

7-2 阶段案例 读书网头部导航栏

7-3 阶段案例 读书网在线读书页面布局

7-4 定位

7-5 阶段案例 带按钮的轮播图片

7-6 阶段综合案例 读书网在线读书页面（上）

7-6 阶段综合案例 读书网在线读书页面（下）

第七章 章节测试

第八章 CSS高级应用

8-1 CSS3变形动画

8-2 CSS3过渡动画

8-3 阶段案例 遮罩动画

8-4 CSS3动画

8-5 阶段案例 轮播动画

第八章 章节测试

第九章 前端框架BootStrap

9.1 响应式网页设计概述

9.2 媒体查询

9.3 Bootstrap简介

9.4 Bootstrap网格系统

9.5 Bootstrap样式

9.6 阶段案例 影视网站首页

第九章 章节测试

预备知识

计算机基础

Photoshop

参考教材：

[1]范玉玲，段春笋等．《HTML5+CSS3+Bootstrap响应式Web前端设计》［M］． 北京：人民邮电出版社．2019

[2]传智播客高教产品研发部 ．《HTML5+CSS3网站设计基础教程》[M] ．北京：人民邮电出版社．2016

参考网站：

[1]W3School官网：http://www.w3cschool.cn/

[2]Bootstrap中文网：http://www.bootcss.com/

常见问题

Q : 零基础可以学习这门课程吗？

A : 可以学习，这门课程适合任何对前端开发感兴趣的人，课程循序渐进，开发环境安装简单，初学者跟随课程输入一些代码，保存后在浏览器里浏览，很快就能看到丰富的视觉效果。

Q : 学习软件从哪里下载?

A : 本课程教学采用的是跨平台编辑软件Visual studio code，该软件免费而且占用空间少，直接可以从官网下载，我们第一章的视频讲解有它的使用方法。

Q : 案例中的素材可以下载吗？

A :本课程讲授过程涉及的示例、阶段案例都有全套素材和源代码，学习者可以自行下载。

Q :学习过程遇到疑问和问题怎么办?

A : 学习过程遇到任何问题欢迎在讨论区提问、留言，我们会统一处理，解决大家遇到的各种问题。

Q : 学习本课程有哪些学习方法？

A:本课程的学习方法是多敲代码，多做案例。在学习过程中可以随时暂停视频，练习示例，以便及时理解所讲内容。配套案例需要进行系统学习并亲自动手完成，有些案例需要多做几遍直到独立完成为止。有问题多提问，多和老师及其他同学进行交流。课余时间多上网看优秀网站，尝试去动手制作。