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、通过学习使学员了解创意方法、设计方式、项目流程等设计应具备的网页美术设计师的岗位技能，使学员具有独立完成Web站点设计的能力。学完后能从事网站的美术设计、页面开发制作、界面设计、流媒体设计等工作。

2、通过学习使学员能运用ASP技术开发相应的基于B/S的应用程序；了解开发网站的整体管理、维护、建设等方面的前后台程序的流程和规范；掌握网络的的基本维护和管理，并能熟练对SQL数据库进行管理、设计等。完成本专业课程能够胜任网站开发工程师等职位，并能独自开发网站，具备网站开发的技能和项目实战经验。

就业职位

网页美术设计师、软件界面设计师、Flash动画设计师、Flash广告设计师、Flash游戏设计师、网站开发工程师。

web前端实战理论篇

原生js控件开发 熟悉的基本语法；掌握常用的方法；无障碍编写简单的控件；

浏览器兼容性处理 熟练处理各个浏览器直接的兼容性问题。提高开发中的效率，并且使页面在各个浏览器中显示基本相同；

高级控件开发技巧 掌握高级的编程技术；掌握各种设计模式的优缺点；理解适配器模式，单例模式；掌握面向对象的编程技术；

BUI库的使用 熟练使用BUI控件库开发。使用BUI控件实现页面各个区域的功能

BootStrap的使用 熟练使用BootStrap开发框架，及其扩展插件。使用BootStrap实现流式布局的页面；基于Bootstrap的控件

开发 掌握bootstrap的使用和特点；能够扩张bootstrap的插件

Canvas的自绘与开发 熟练使用Canvas自绘和开发功能。使用Canvas实现页面动画特效，使页面具有更强的视觉效果；

图表库的使用与开发 熟悉HighCharts的基本配置项；能够定制Highcharts；

AngularJS库的使用 熟悉AngularJS的原理；可以熟练使用AngularJS编写应用程序；

Dojo的使用 熟练使用Dojo解决开发DHTML应用程序遇到的那些长期存在、历史问题（historical problems with DHTML）、跨浏览器问题；

php开发基础 自主搭建PHP开发环境；熟悉常用的函数；了解PHP的工作原理。

(1)颜色:观察网页效果图的主题色、辅助色、点睛色，了解页面的配色方案。

(2)尺寸:观察网页效果图的尺寸，确定页面的宽度和模块的分布。

(3)辅助图片:观察网页效果图，看哪些地方使用了素材图片。确定需要单独保留的图片。例如，重复的背景图、小图标、文本内容配图等。对页面效果图有了一个基本的分析之后，就能够“切图”了。

“切图”就是对效果图进行分割，将无法用代码实现的部分保存为图片。当切完图之后，就可以使用Html、css搭建静态页面。搭建静态页面就是将效果图转换为浏览器能够识别的标记语言的过程。