上海非凡教育Web前端培训
编程始于全栈工程师，让你的项目“活”起来
快速咨询上海web前端实战
来源：教育联展网 编辑：坚强 发布时间：2019-08-23
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前端开发培训
适合人群：
零基础学员，想要转行web前端学员，刚毕业学生，想要提升个人技能
简介：
IT术语太专业听不懂?来这里，优就业用最通俗的语言告诉你什么是Web前端，用数据告诉你Web前端的就业前景，用实战案例带你入门Web前端。做IT教育，我们是认真的!
学习目标：
了解web前端行业趋势，知道web前端需要学习的知识及版块
课程详情：
一章 Web前端入门科普知识
1节 科普动画第二章 各模块试听
1节 什么是Web前端?
2节 Web前端案例解析及制作
常见的html标签（上）
常见的html标签（下）
网页中插入图片和链
Web前端制作粽子宝宝实例讲解
CSS3打造手风琴图片滑动特效
CSS3制造逼真的下雪场景动画特效【Web基础课程】
jQuery实现图片轮播效果【Web进阶课程】
Canvas模拟实现【Web进阶课程】
Java Script制作有趣的打地鼠小游戏【Web进阶课程】
-
康老师
教学科目：毕业于西南科技大学计算机专业，多年网页设计经历，资深网页设计师，优秀职业培训讲师；曾任多家网络公司任专职设计师，熟练运用网页制作软件，拥有成熟的网站开发技巧。现任非凡学院专职讲师。
-
李老师
教学科目：曾任职武汉烽火电子商务有限公司任高级网页设计师；2013年任上海天佑电商有限公司设计主管；现任非凡学院高级签约网页设计讲师
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的工作原理。
web前端课程开发工具
在建设网页时，为了快速、高效地完成任务，通常会使用一些具有代码高亮显示、语法提示等便捷功能的前端开发工具。常用的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的开发效率。
预约学校参观
相关问答
-
北京学WEB工程师费用是多少
目前WEB前端培训的学费大概在15000到20000元之间，具体要看你报的什么类型的班，以及培训机构的资质怎么样，当然，不同地域不同的机构，价格多多少少会有差别.....
[详情] -
北京学习web前端怎么选择培训机构？
第一、看品牌：品牌越大越注重自身的品牌价值 ，尚学堂专业的IT培训机构，创办7年来在行业内口碑佳，得到了学员的一致好评，也it培训**品牌。 .....
[详情] -
北京学WEB去哪儿好
谢谢邀请 不知道你是男生还是女生，web前端是一个很好的趋势，有前景，女孩子的话也非常适合学习 北京地区培训机构很多，良莠不齐，下.....
[详情] -
北京网页WEB前端有哪些学校
北京的计算机培训机构几乎都有web前段的课程。不同的机构课时、学费、课程安排等等都是不一样的。选择学校的时候可以重点从师资、课程设置、学生就业服务三方面考虑。你.....
[详情]
考试资讯
web前端培训教程：IE 事件处理函数
IE 事件处理函数
IE 实现了与 DOM 中类似的两个方法： attachEvent()和 detachEvent()。这两个方法接受相同的参数：事件名称和函数。
在使用这两组函数的时候，先把区别说一下： 1.IE 不支持捕获，只支持冒泡； 2.IE 添加事件不能屏蔽重复的函数； 3.IE 中的 this 指向的是 window 而不是 DOM 对象。 4.在传统事件上， IE 是无法接受到 event 对象的，但使用了 attchEvent()却可以，但有些区别。
window.attachEvent('', function () {
var box = document.getElementById('box');
box.attachEvent('onclick', toBlue);
});
function toRed() {
var that = window.event.srcElement;
that.className = 'red';
that.detachEvent('onclick', toRed);
that.attachEvent('onclick', toBlue);
}
function toBlue() {
var that = window.event.srcElement;
that.className = 'blue';
that.detachEvent('onclick', toBlue);
that.attachEvent('onclick', toRed);
}
PS： IE 不支持捕获，无解。 IE 不能屏蔽，需要单独扩展或者自定义事件处理。 IE 不能传递 this，可以 call 过去。
window.attachEvent('', function () {
var box = document.getElementById('box');
box.attachEvent('onclick', function () {
alert(this === window); //this 指向的 window
});
});
window.attachEvent('', function () {
var box = document.getElementById('box');
box.attachEvent('onclick', function () {
toBlue.call(box); //把 this 直接 call 过去
});
});
function toThis() {
alert(this.tagName);