非凡教育培训

web前端HTML5/CSS3布局与样式

一.HTML标签

HTMl5、H5标签、智能表单、结构化标签

随堂项目：

1.文章页面的结构化布局。包括文章标题、正文、图片、页面背景、作者、发表时间等信息 2.利用table标签课程表的实现 3.利用form、input表单标签实现简单登录注册页面

二.CSS基础语法常见样式

CSS3简介、.css3引入、常见样式、文字与文本、颜色

随堂项目：一般导航栏的制作

三.CSS选择器 css选择器、名字选择器、外号选择器、洋葱式选择器的用法、伪类选择器、结构化伪类选择器、属性选择器、兄弟选择器、子元素选择器

CSS盒子模型 盒子模型、如何用好盒模型

随堂项目：导航栏的制作，利用盒子模型拉开间距、hover效果添加后的内边距设定

四.浮动与定位 float、clear、塌陷的父容器、position：一动不动的(static)，跟着别人跑的(absolute)，以自己为中心的(relative)，固定的(fixed)

随堂项目：导航栏左右布局的定位、二级菜单的实现、回到顶部的按钮

五.响应式布局与页面优化处理 移动页面与PC端页面布局时候需要注意点、响应式布局的实现原理、各种浏览器对于CSS样式的支持情况、页面优化需要注意的地方、解决跨浏览器兼容性问题

随堂项目：移动端的用户注册页面、PC端的用户注册页面。

六.静态页面切图实战项目

企业站实训：1.首页导航 2.banner图 3.模块展示 4.新闻中心 5.产品中心 5.友情链接 6.版权申明

商城站实训：1.搜索框 2.头部导航 3.分类菜单 4.banner图 5.分类商品 6.帮助中心 7.版权备案

专题站实训：重点练习H5变形动画的添加，使页面有动态交互效果

个人页面：根据自己设计的个人页面效果图实现静态页面，独立完成切图和代码过程，指导添加动态效果，并整

上海Web培训相关介绍：

（1）通过Web1.0万维网，互联网上的资源，可以在一个网页里比较直观地表示出来，而且资源之间，在网页上可

（2）目前Web前端全栈开发工程师紧俏，企业高薪求才，薪资一涨再涨！！

（3）Web前端开发因为互联网的发展以及人才的紧缺，关于前端开发工程师的薪资也是很客观的。

（4）Web前端开发需要学好一门服务器端脚本语言，服务器端脚本编程（后台开发）也是web开发人员的基本功之

（5）二三线城市均需要Web前端+全栈工程师，尤以二三线城市及创业型企业对此类全能型人才急需，并开出较高薪

（6）Web前端开发需要学习使用一些javascript库，比如jquery是大部分wEB开发人员都喜欢用

（7）Web客户端的主要任务是展现信息内容，HTML语言是信息展现的有效载体之一。

（8）了解互联网的发展趋势，能很清晰的看到Web前端是个非常有“前途”的工作。

（9）Web后端开发需要：精通面向对象分析和设计技术，包括设计模式、UML建模等。

（10）Web前端开发需要学习css，它可以帮你把网页做得更美观。

web前端开发工程师 = XHTML+XML+CSS+JavaScript/ActionScript/AJAX

当然，上面的定义是针对大公司的，杯具的是中国互联网行业的大公司太少了，为了生存与生活，我们还要了解中小公司的需求：

web前端开发工程师 = XHTML+XML+CSS+JavaScript/ActionScript/AJAX+JSP|ASP|.NET|PHP+UI

也许你不一定要学这么多，但是如果全学会了，那你将可能成为真正的T型人才。 关于大公司和小公司哪个更好更适合的问题，这里就不讨论了。

“web前端开发工程师”也许不能令你大富，但至少算是一技傍身，可以保障你的生存和生活。 准备好了？那么你接下来要做的是就是：

1、准备好工具（Photoshop、Dreamweaver），推荐：Photoshop cs2、Dreamweaver cs4。

2、购买一本入门书籍，推荐：《HTML+CSS网页设计与布局从入门到精通》、《精通CSS+DIV网页样式布局》。

3、下载一个CSS2.0手册。

4、努力练习吧，你可能需要1-3个月的学习才能了解XHTML+CSS（有关HTML和XHTML的区别请百度查询）

在建设网页时，为了快速、高效地完成任务，通常会使用一些具有代码高亮显示、语法提示等便捷功能的前端开发工具。常用的web前端开发工具有Dreamweaver、Sublime、HBuilder等，具体介绍如下。

1、Dreamweaver

Dreamweaver简称DW(中文译为“梦想编织者”)，是美国MACROMEDIA公司开发的集网页制作和网站管理于一身的“所见即所得”网页编辑器，2005年被Adobe公司收购。Dw是第一套针对非专业网站建设人员的视觉化网页开发工具，利用它可以轻而易举地制作网页。

2、Sublime

全称为Sublime Text，是一个代码编辑器，最早由程序员Jon Skinner于2008年1月开发出来。Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图、功能插件等。Sublime Text还是一个跨平台的编辑器，支持Windows、Linux、Mac等操作系统。

3、HBuilder

HBuilder是CLoud推出的一款支持HTML5的Web开发软件。“快”是HBuilder的最大优势，通过完整的语法提示、代码输入法以及代码块等， HBuilder可以大幅提升HTML、JavaScript的开发效率。