HTML5 + CSS3

先锋科教H5精修课程纲要

初学者必须了解的

什么是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服务器,就是一种标准的后台开发环境,也是当今企业网站应用最多的,我们需要学习掌握。

先锋科H5精修课程大纲

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