台湾宾果

您现在的位置: 台湾宾果 > 教育教学 > 精品课程
精品课程

Web前端设计

课程名称承建院系在线地址备注

台湾宾果   WEB前端设计

信息工程学院

  校级精品课



课程详情

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

—— 课程团队

课程概述

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

本课程内容主要包含HTML5CSS3和流行前端框架BootStrap,共分九个章节。第13章讲解HTML基础、HTML标签、多媒体、表单,是进行网页结构设计的基础;第45章讲解CSS3基础、CSS3属性,初步掌握使用CSS3进行网页美化的方法;第68章讲解盒子模型、网页布局、浮动、定位以及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中文网:


常见问题

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

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

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

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

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

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

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

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

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

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


台湾宾果