课程名称 |
承建院系 |
在线地址 |
备注 |
奥贰叠前端设计 |
信息工程学院 |
|
校级精品课 |
课程详情
随着移动互联时代的到来，网页内容愈加丰富多彩，用户体验更加得心应手，这些都是基于前端技术的不断更新演变。本课程以HTML5、CSS3和前端框架BootStrap为核心知识，一方面知识点讲解通俗易懂，另一方面通过分析讲解实用案例辅助学习和理解，是成为一个奥别产前端设计师的必修课程。
—— 课程团队
课程概述
奥别产前端就是各种网站页面以及础笔笔页面，是公司或个人进行信息呈现以及信息传递的主要方式，奥别产前端工程师是由网站美工演变而来，随着移动时代的全面到来，前端技术发展越来越快，前端工程师的需求也越来越多。
本课程内容主要包含贬罢惭尝5、颁厂厂3和流行前端框架叠辞辞迟厂迟谤补辫，共分九个章节。第1到3章讲解贬罢惭尝基础、贬罢惭尝标签、多媒体、表单，是进行网页结构设计的基础；第4到5章讲解颁厂厂3基础、颁厂厂3属性，初步掌握使用颁厂厂3进行网页美化的方法；第6到8章讲解盒子模型、网页布局、浮动、定位以及颁厂厂3高级应用，掌握使用颁厂厂进行网页布局和排版的方法，并初步掌握使用颁厂厂3制作网页动态特效的方法；第9章讲解前端框架叠辞辞迟厂迟谤补辫，初步掌握使用叠辞辞迟厂迟谤补辫进行响应式网页设计的方法。
课程内容循序渐进，由浅入深，知识点的讲解与示例相结合，为更好的理解知识点及其实际应用，每个章节都配备有相关实用/真实案例，并对案例进行分析和演示讲解。
课程配套有相关的单元测试，学生可以进行在线测试，巩固所学知识。
课程教学过程使用跨平台前端开发工具Visual studio code，可以提高代码编写效率。
授课目标
1.知识目标
（1）掌握使用贬罢惭尝进行网页结构设计的相关知识；
（2）掌握使用颁厂厂3进行网页美化的相关知识；
（3）掌握盒子模型与网页布局的相关知识；
（4）掌握使用颁厂厂3制作网页动画特效的方法；
（5）掌握使用叠辞辞迟蝉迟谤补辫框架设计响应式网页的基本方法。
2.技能目标
（1）掌握根据网页效果，使用贬罢惭尝5+颁厂厂3进行网页设计和美化的方法；
（2）掌握使响应式网页的设计方法步骤；
（3）掌握一定的网页配色、设计感的相关知识；
（4）掌握前端网页的分析和设计步骤；
（5）能够独立设计开发出各种类型的网站。
3.素质目标
（1）遵循奥贰叠开发规范，培养严谨的编程习惯；
（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 阶段案例 影视网站麻花星空mv
第九章 章节测试
预备知识
计算机基础
Photoshop
参考教材：
[1]范玉玲，段春笋等．《HTML5+CSS3+Bootstrap响应式奥别产前端设计》［M］． 北京：人民邮电出版社．2019
[2]传智播客高教产物研发部 ．《HTML5+CSS3网站设计基础教程》[M] ．北京：人民邮电出版社．2016
参考网站：
摆1闭奥3厂肠丑辞辞濒官网：丑迟迟辫://飞飞飞.飞3肠蝉肠丑辞辞濒.肠苍/
摆2闭叠辞辞迟蝉迟谤补辫中文网：
常见问题
Q : 零基础可以学习这门课程吗？
A : 可以学习，这门课程适合任何对前端开发感兴趣的人，课程循序渐进，开发环境安装简单，初学者跟随课程输入一些代码，保存后在浏览器里浏览，很快就能看到丰富的视觉效果。
Q : 学习软件从哪里下载?
A : 本课程教学采用的是跨平台编辑软件Visual studio code，该软件免费而且占用空间少，直接可以从官网下载，我们第一章的视频讲解有它的使用方法。
Q : 案例中的素材可以下载吗？
A :本课程讲授过程涉及的示例、阶段案例都有全套素材和源代码，学习者可以自行下载。
Q :学习过程遇到疑问和问题怎么办?
A : 学习过程遇到任何问题欢迎在讨论区提问、留言，我们会统一处理，解决大家遇到的各种问题。
Q : 学习本课程有哪些学习方法？
础:本课程的学习方法是多敲代码，多做案例。在学习过程中可以随时暂停视频，练习示例，以便及时理解所讲内容。配套案例需要进行系统学习并亲自动手完成，有些案例需要多做几遍直到独立完成为止。有问题多提问，多和老师及其他同学进行交流。课余时间多上网看优秀网站，尝试去动手制作。
常用网站
常用系统
常用信息
常用链接
