HTML + CSS

先锋科教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. 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前端设计相应的工作,毕业后可以从事任何网页设计相关的工作

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

节点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 技术