HTML5 + CSS3

WEB前端工程师就业班课程纲要

初学者必须了解的

什么是html与css? html是一种超文本标记语言,所谓超文本,即页面中不仅包含文字,还有图片、视频等诸多元素,一个网页结构类似人体,有头(Head),身体(Body),脚(Footer),才构成完整的页面。
css是一种样式表,用来表现修饰页面的各种元素,类似人的外貌和衣着。

什么是html5与css3? html5是html语言的第五次重大修改,加入了很多新的标签和特性。同样,css3是css的最新升级版本,在很多样式方面有了新的特性,现在html5+css3再配合js脚本语言,可以制作出不属于Flash的漂亮页面动画效果,并且在版式的布局设计上也更加便利。

什么是js脚本与jquery? JS全程javascript脚本语言,是一种广泛应用于网页中的开发语言,其可以读取网页的元素,对浏览器事件作出响应,还可以提交各种数据给服务器,比如我们页面中经常用到的用户注册等内容大都是通过js脚本来控制传输数据的。
jquery是一种基于jsd的运行库,其特点就是快速,简洁,可以更加灵活的开发很多响应事件,并且与Css3结合更加紧密,是当今运用最为广泛的js开发运行库。

什么是php与Mysql? PHP是一种开源的动态开发语言,开源预示着免费,并且跨平台,通用性强,相比于其他后台开发语言,php更加易学,快捷,扩展性强。所以目前很多网站的后台开发都是基于PHP,比如百度。Mysql是一种数据库管理系统,使用sql语言进行编译管理,一个网站的网站,既要有好看的前端页面,同时也需要具备一定的后台数据功能,比如具备会员功能的网站,那么这些庞大的数据就需要数据库进行管理和调用,mysql配合php,再搭配专用的apache服务器,就是一种标准的后台开发环境,也是当今企业网站应用最多的,我们需要学习掌握。

先锋科WEB前端工程师就业班课程大纲

模块A. 网页基础课程
节点学习内容 节点项目范例 最终学习目标描述

节点1
认识网站:学习网站相关知识
掌握DW界面和其功能

HTML是网页制作必备技能,主要介绍HTML概念、语法及常用基础标签

节点2
代码入门:HTML代码基础及CSS层叠样式表概述

css的盒子模型,更好的排版,进行页面布局。 介绍CSS语法、选择器、继承、层叠及优先级基础内容。

节点3
知识进阶:表单制作、JavaScript、html5+css3

表单标签的编写规范、嵌套规范以及相关属性的用法讲解
了解JavaScript语言,掌握它的语法、数据类型、基本算数和逻辑运算操作,方便我们开发中直接调用,进而实现更多功能 常见的html5标签
讲解css3的圆角、阴影、旋转、缩放、以及速率等属性值

节点4
实战应用:入门网站制作
进阶网站制作
多平台网站设计战略

搭建一个网页HTML结构,并掌握网布局相应知识与技巧。
针对CSS中的基础布局以及经典的布局展开详细的讲解。
对前面知识的综合应用,通过项目实战,更加熟练掌握基础知识,在实践中复习、巩固知识,提高综合能力。

本模块完成后学员具备完成简单静态页面能力,可以从事网页前台制作的工作,但是因为更深入的技术缺乏,无法胜任更高级的设计与开发工作,属于网页设计最底层的工作能力要求程度

模块B. 网页UI课程
节点学习内容 节点项目范例 最终学习目标描述

节点1
熟悉代码:网站页面基础制作

认识HTML的最新版本HTML5,主要包括HTML5的标签变化、属性变化、音视频、以及表单验证。

节点2
设计的可用性原则:用户心理引导与运用

色彩与体验
色彩与注意力集中
AIDA(注意力、兴趣、期望、行动)
网站UI设计流程:需求分析、整理需求、产品思维解析、原型设计、产品立项。

节点3
网站响应式布局:HTML5+CSS3

详细讲解CSS3的变化,新的概念和理念,及其CSS3新增加的选择器
深入讲解元素如何扭曲、移位或旋转,让我们可以更自由得装饰和变形HTML组件
在 CSS3 中,新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等

节点4
用户体验优化(UEO+SEO):项目设计流程
进阶网站制作
多平台网站设计战略

在IMG标签中表明正确的图片尺寸
服务器和内容分发网络
合并CSS和JavaScript
验证页面
如何探测长时间跳转链
页面内容、功能布局优化
页面元素配色优化
需求分析、用户场景模拟、竞品分析
根据产品的用户定位进行设计, UI设计师交出产品设计图时,更多的配合开发人员、测试人员进行截图配合。
UI设计师需对产品的效果进行验证,是否可用,用户是否接受,以及与需求是否一致。

本模块是更深入的页面设计学习,会初步接触最新的html5标准与css3,学员完成后可以完成响应式的页面布局与网站优化等进阶工作,但是受模块内容时长限制,在前端设计工作的深入学习上仍旧不足,还需要更深入的学习

模块C. H5前端设计课程
节点学习内容 节点项目范例 最终学习目标描述

节点1
H5前端开发环境介绍:传统网站知识布局总结


前端开发环境介绍:DreamWeaver、 Notepad++、HBuilder
HTML基础,CSS基础,CSS核心属性
CSS样式层叠继承,盒模型

节点2
HTML5基础及案例练习

HTML5提供了新的元素来创建更好的页面结构,告别传统代码不能更好语义化说明及页面新功能增加。
新增标签介绍:
<article>、<aside>、<figure>、<header>、<mark>、<nav>、<section> ... ...
移除标签介绍: <acronym>、<basefont>、<frame>、<strike> ... ...

节点3
CSS3基础及案例练习

CSS3基础属性介绍,做到用代码大量替换PS作图的工作,符合市场需求。
边框属性:box-shadow、border-image;
圆角:
border-radius;
背景:background-size、background-origin、background-clip;
渐变:
线性渐变、径向渐变;
文本效果:text-shadow、box-shadow、text-overflow、word-wrap、word-break;
字体:@font-face;
... ...

节点4
定位布局及CSS3特效应用:动画特效交互事件
响应式设计

CSS3的特效使用,制作交互动画,让网站活起来。
2D/3D转换:
translate()、rotate();
过渡/动画属性:
transition、animation;
... ...
三种定位布局方式,
定位在交互上的应用。
响应式设计: 就是我们日常说的手机网站或三屏合一网站。
通过使用的设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相对应的布局。最终达到网站的不同尺寸布局。

节点5
实战应用:入门网站制作
进阶网站制作

对前面知识的综合应用,通过项目实战,更加熟练掌握基础知识,在实践中复习、巩固知识,提高综合能力。

本模块会深入系统的学习H5+CSS3,学员完成后可以独立制作响应式网页设计,已经具备应对H5前端设计相应的工作,毕业后可以从事任何网页设计相关的工作

模块D. 网页高级特效与框架开发
节点学习内容 节点项目范例 最终学习目标描述

节点1
HTML5新标签:
1.⽂档头和编码声明
2.基础标签
3.文本类标签
4.列表标签
5.语义化标签的应⽤
6.字符实体
7.表格标签
8.HTML5标签的兼容处理
9.HTML5标签SEO的作⽤
10.HTML5表单新特性
多媒体标签


掌握HTML代码的规范编写,掌握HTML5新标签的特性,掌握多媒体在⻚⾯中的应⽤

节点2
CSS3新特性:
1.CSS的定义
2.CSS引⼊
3.CSS选择器
4.CSS3与CSS2的区别
5.长度单位
6.颜⾊单位
7.常用属性
8.CSS3属性
a) 尺⼨
b) 边框
c) 背景
d) 内补⽩
e) 外补⽩
f) 布局
g) 定位
h) 字体
i) 文本
j) 列表
k) 表格
l) 用户界⾯
m) 多栏
n) 2D变换
o) 过渡动画

CSS3:圆⻆边框、边框九宫格特效、多图背景、动画、渐变和倒影、多列属性布局、服务器端字体,可以实现基础网页布局,⻚⾯样式定义及CSS,样式特效

节点3
1.W3C盒子模型
2.div+css⽹页布局
3.弹性盒⼦
4.HTML5兼容性处理
5.使⽤ HTML5布局元素的布局
6.Media Query响应式布局
百分比⽹⻚布局

掌握使⽤媒体查询技术及百分比布局,实现响应式页⾯,自动适应多种分辨率设备

节点4
1.PS切图
2.精灵图
3.CSS重制样式表reset
CSS、Normalize.css
4.CSS命名规范,CSS常用名

掌握和设计人员对接,把一张PSD图⽚切成自⼰需要的图片样式,按照效果图实现网站

节点5
JS的DOM操作
a)DOM 节点
b)DOM 方法
c)DOM 属性
d)DOM 访问
e)DOM 修改
f)DOM 内容
g)DOM 元素
h)DOM 事件
JS的BOM操作
a)Window
b)Screen
c)Location
d)History
e)Navigator
f)PopupAlert
g)Timing
h)Cookies
AJAX

掌握JS操作⻚面及浏览器元素,培养动⼿制作特效、表单验证的能⼒,掌握AJAX⽹⻚异步交互

节点6
JQuery简介
JQuery 安装
jQuery CSS 操作
jQuery 选择器
jQuery 筛选
jQuery HTML文档处理
jQuery 事件
jQuery效果
jQuery Ajax
jQuery 其他操作
jQuery 插件

掌握jQuery实现⻚面特效,表单验证,及AJAX异步交互

节点7
项目实训:
PS切图
CSS重置样式表
⽹页规范兼容性
SASS
Compass 精灵图代码压缩
常⻅网站效果
rem相对⼤小布局

能够独⽴完成网⻚布局,页面效果,表单验证的一整套网⻚制作

本模块会深入学习html5+css布局和特效制作,掌握jquery使用和常用特效制作,掌握流行js框架开发项目流程,并能使⽤原⽣JS开发网站常见各类特效,熟练掌握Ajax 技术

模块E. WEB全栈开发
节点学习内容 节点项目范例 最终学习目标描述

节点1
Node.js+MongoDB+Express:
1.VUE.JS介绍
2.安装
3.模板/数据绑定
4.Class/Style绑定
5.事件
6.组件
7.混合
8.插件
9.服务/路路由


掌握Vue.JS使⽤方法,理解前端架构分层思想,掌握单⻚面应⽤实现原理及具体实现方法

节点2
1.NodeJS简介
2.NodeJS安装
3.npm⼯具使⽤
4.模块、package
5.回调函数
6.buffer,事件
7.⽂件处理模块
8.http,URL,querystring,path等模块
9.POST/GET请求
10.安装模板引擎

NodeJS作为服务端语言,接收处理响应请求,掌握NodeJS搭建服务器

节点3
1.NoSQL基础概念
2.MongoDB 简介
3.数据库、集合、⽂文档概念
4.数据库操作
5.集合操作
6.⽂文档CURD操作
7.条件操作符
8.Limit与Skip⽅方法
9.排序
10.NodeJS的mongoose模块操作MongoDB

理解数据库在程序开发中所起的作用,掌握 MongoDB数据库操作,能够独⽴获取分析数据

节点4
1.Express 简介
2.安装 Express
3.路由
4.中间件
5.视图
6.模板引擎
7.AJAX
8.跨域/JSONP
9.搜索分⻚
10.⽂件上传
11.登陆注册

Express基于 Node.js 平台,快速、开放、极简的 web 开发框架。它提供一系列强大的特性,帮助你创建各种 Web 和移动设备应用。熟悉Express可以更好的掌握互联网交互原理。

节点5
1.Web Socket
2.SSE
3.⽹络爬虫(实现多人聊天时,服务器主动推送消息)
4..常⽤工具使用webpack
5.压缩混淆
6.AMD/CMD规范
7.结合Vue.JS实现单页⾯应用
8.Web APP 打包

掌握常用工具,掌握聊天通讯,掌握前后端共同交互实现单页⾯应用,掌握APP打包制作

节点6
h5新特性:1.⾳音/视频 API
2.本地存储localStorage/sessionStorage
3.Geolocation(地理理定位)
4.百度地图API
5.浏览器多线程Web Workers
6.应⽤程序缓存(Application Cache)
7.Canvas 画图、SVG
8.拖拽事件、API
9.FileReader API
10.PAJAX
11.Bootstrap
插件:swiper、图表、iconfont

集中讲解掌握H5核⼼心 API,同时配合网上提供的接口服务完成需求,对于前端水平全面提升

节点7
1.接⼊微信公众平台
2.账号申请
3.微信JSSDK使⽤
4.分享接⼝
5.图像接⼝
6.⾳频接⼝
7.智能接口
8.设备信息
9.地理位置
10.界⾯操作
11.WEUI框架
12.微信⼩程序开发
13.创建项⽬
14.⼯具
15.框架
16.WXML 、 WXSS
17.组件API

微信⼩程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。作为一个跟上趋势的前端程序员,当今最热门的小程序开发值得我们掌握

节点7
整站开发:
Git协作
前端项目规范化
H5新特性即时通讯
互联网服务接口调用

培养具备整站开发能力,培养项目划分管理协作技巧,前端后端项目规范设计,通过这个项目让每一个学⽣生参与项目的规范化协作工作,模拟真实的开发环境。

本模块从零开始逐步深入学习web前端开发的高级阶段,以目前最火的微信小程序开发为模板,教授学员Web全栈开发的技巧,课程完成学员可以独立完成相关项目,并轻松应付相关工作需求