上海非凡教育Web前端培训
Web前端设计师提升之路
快速咨询
上海web前端公司培训，web前端JavaScript交互 核心语法 javascript语法、介绍html5认识JavaScript、javascript中的对象、数组、变量、.流程控制（if…else switch…case while for） 随堂项目：九九乘法表、闰年计算、谁是高富帅（if…else.. Switch…case） BOM与DOM操作
web前端JavaScript交互
核心语法
javascript语法、介绍html5认识JavaScript、javascript中的对象、数组、变量、.流程控制（if…else switch…case while for）
随堂项目：九九乘法表、闰年计算、谁是高富帅（if…else.. Switch…case）
BOM与DOM操作
DOM操作：让一成不变的网页动起来；BOM操作：浏览器也有话要说
随堂项目：网页时钟的制作、回到顶部
事件编程
JS的事件机制：让网页回应你的问候；常见的JS事件：单击、双击、移动、悬停、焦点的获取与失去、浏览器的关闭与加载
随堂项目：1.选不中的按钮的实现 2.做一个计算器怎样？
正则表达式
正则表达式的语法基础、利用正则表达式做字符匹配、面向对象编程：脱离过程走向对象
随堂项目：邮箱格式的验证、编写一个获取常见输入数据的格式验证类。
教学科目：曾任职武汉烽火电子商务有限公司任高级网页设计师；2013年任上海天佑电商有限公司设计主管；现任非凡学院高级签约网页设计讲师
教学科目：毕业于西南科技大学计算机专业，多年网页设计经历，资深网页设计师，优秀职业培训讲师；曾任多家网络公司任专职设计师，熟练运用网页制作软件，拥有成熟的网站开发技巧。现任非凡学院专职讲师。
教学科目：近10年网页设计经历，Adobe认证讲师，曾为海尔集团、龙炎集团、中国二十冶等集团公司培训；曾任上市公司安博集团项目经理；出版刊物有《Photoshop CS5图像处理入门、进阶与提高》等数本
Web前端开发精品班
一、Web前段设计软件
1.Dreamweaver：网页布局、制作；前端脚本语言(html、css、Js、DIV)均在本软件中编辑
2.Fireworks：讲解FW在网页切片、图层、帧、gif动画、画布设置中的应用以及配合其他软件进行使用
3.Illustrator：广告招牌制作、灯箱广告、服装广告、企业徽标设计、名片设计
4.Photoshop ：PS操作基础、图象优化处理、经典实例分析与制作
二、前端基础语言（HTML、css）
1. HTML5语法结构、文本、图像、链接、表格、列表、表单、框架；熟练掌握各种 HTML 标签，能够手动快速完成各种页面的编写；
2.HTML5高级功能：canvas标签的使用；多媒体在网页中的使用；HTML5中的智能表单
3.CSS3 基础语法、各种选择器框模型与背景、文本 格式化、表格、显示与定位、CSS 复杂选择器。
4.CSS3动画详解：CSS3的动画功能；CSS3新增选择器；弹性盒模型；服务器字体
web前端页面设计流程：确定网站主题
网站主题是网站的核心部分。一个网站只有在确定主题之后，才能有针对性地选取内容。确定主题的方法十分简单，可以通过前期的调查和分析来确定该网站的主题
(1)调查:调查的目的是了解各类网站的发展状况，总结出当前主流网站的特点优势、竞争力，为网站的定位确定一个方向。在调查时主要考虑以下问题。
●网站建设的目标。
●网站面向人群。
●企业的产品。
●企业的服务。
(2)分析:分析是指根据调查的结果，对企业自身进行特点、优势、竞争力的分析初步确定网站的主题。在确定主题时要遵循以下原则。
●主题要小而精，定位不宜过大过高。
●主题要能体现企业自身的特点。
粒子时钟
渲染文字时钟
function time() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.font = "150px 黑体"; ctx.textBaseline = "top"; ctx.fillStyle = "rgba(245,245,245,0.2)"; ctx.fillText( new Date().format("hh:mm:ss"), (canvas.width - textWidth) / 2, (canvas.height - textHeight) / 2, textWidth, textHeight );}效果
获取粒子
文字转换粒子概念同上，获取选定区域的像素，根据筛选条件进行选择并存入数组。经过遍历后重新绘制。
function getPixels() { let imgData = ctx.getImageData( (canvas.width - textWidth) / 2, (canvas.height - textHeight) / 2, textWidth, textHeight ); let data = imgData.data; pixelsArr = []; for (let i = 1; i <= textHeight; i++) { for (let j = 1; j <= textWidth; j++) { pos = [(i - 1) * textWidth + (j - 1)] * 4; //取得像素位置 if (data[pos] >= 0) { var pixel = { x: j + Math.random() * 20, //重新设置每个像素的位置信息 y: i + Math.random() * 20, //重新设置每个像素的位置信息 fillStyle: "rgba(" + data[pos] + " ," + data[pos + 1] + "," + data[pos + 2] + "," + data[pos + 3] + ")" }; pixelsArr.push(pixel); } } }}imgData保存了所选区域内的像素信息，每个像素点占据 4 位，保存了 RGBA 四位信息。筛选每个像素的第四位，这段代码中将所有透明度不为 0 的像素都保存到了数组pixelsArr中。
x、y记载了该粒子的位置信息，为了产生效果图中的运动效果，给每个粒子添加了 0-20 个像素的偏移位置，每次重绘时，偏移位置随机生成，产生运动效果。
粒子重绘
获取粒子之后，需要清除画布中原有的文字，将获取到的粒子重新绘制到画布上去。