第一篇：基于web前端开发工程师的典型工作任务分析报告-1
中职课程设计与开发
课程名称：中职课程设计与开发 所在院系：教育科学与技术学院 任课教师：周元春 日期：2017年03月19日
小组成员：林秋圆、陈妙、钟彩玲、刘育星、李鸿志 / 8 基于web前端开发工程师的 典型工作任务分析报告
目录
一、典型工作任务.................................................................................3
二、典型工作任务描述.........................................................................5
三、工作岗位.........................................................................................5
四、工作过程........................................................................................5
五、工作任务的对象.............................................................................7
六、工具、方法于工作组织方式..........................................................7
七、对工作和技术的要求......................................................................8
八、区分点.............................................................................................8 / 8
一、典型工作任务
1、基于HTML5.0标准进行页面 职业能力：
（1）熟练使用Adobe Dreamweaver、Adobe Edge等html5开发工具（2）了解一般html5网页的架构（3）能完成高质量前端代码编写
学习领域：Web UI界面设计；HTML的概念作用及用法；可视化网页编辑软件的 使用。
2、根据产品需求，分析并给出最优的页面前端结构解决方案 职业能力：
（1）擅长分析解决结构划分案例（2）了解一些语言化规范
学习领域：移动网页布局
3、编写可复用的用户界面组件 职业能力：
（1）了解现有架构的原理
（2）能设计出满足不同用户界面配置方案
学习领域：CSS3基础语法；HTML基础。
4、基于Android,iOS的移动Web应用开发 职业能力：
（1）熟悉Android,iOS基本模型，并进行界面设计（2）熟练UI设计中认知方法的运用
（3）熟练使用HTML5来完成繁重的基础工作，使用CSS3来制作外观和JavaScript 来为Web应用添加程序逻辑
学习领域：移动设备界面布局基础；CSS3布局样式；图形、图像软件的使用。/ 8
5、协助后台程序员完成功能镶嵌和调试 职业能力：
（1）能优化前端体验和页面响应速度（2）有强大的架构能力和团结协作能力
学习领域：响应式布局/WebAPP 项目。
6、优化和提高客户端代码的性能 职业能力：
（1）熟练进行加载、脚本执行、渲染优化（2）能熟练进行代码修改调试
学习领域：代码优化技巧。
7、负责编写和维护相关技术文档 职业能力：
（1）熟悉产品原型设计，熟练使用Axure、PS、Visio等工具（2）能准确把握移动HTML5产品的用户体验
学习领域：HTML5文档结构与基础语法。
8、和后端进行数据交互 职业能力：
（1）熟悉jQuery、ExtJS和GWT框架中的任何一个，能快速高效实现各种交互效果（2）掌握一些数据库的使用
学习领域：jQuery、ExtJS基础；JavaScript交互编程实战。
9、开发兼容移动端的微站和微信活动 职业能力：
（1）对跨浏览器和平台的兼容有深入理解（2）能通过JSSDK去调用微信的内置接口
学习领域：JSSDK开发实战。
10、参加其他产品的内部测试，协助找出产品的问题 职业能力：
（1）熟悉移动设备特（2）有强大的性能调优能力 / 8 学习领域：HTML5页面测试。
二、典型工作任务基本描述
HTML5作为移动互联网主流前端开发语言, 从根本上改变了开发商开发Web应用的方式.不仅在电脑端，而且在移动端也得到了更广泛的应用，HTML5都已经成为了前端开发必不可少的语言，目前还没有一个前端的开发语言能取代HTML5的位置。可以说，HTML5是web的未来。由于HTML5的兴起，企业对于HTML5工程师的需求也来越大，同时要求越来越高。
HTML5页面制作主要使用新的文档类型，最基本语义结构，新结构标签，通过布局，排版来进行一系列基于移动端的页面制作。
中职学生在学校主要学习HTML5，CSS以及一些开发工具如Adobe Dreamweaver的使用。他们以后从事的工作单位有中小企业，互联网公司等等。
三、工作岗位
网站设计公司，产品研发部。网站设计公司从事产品研发部的人员，包括产品经理、UI设计师、UE设计师、Web前端开发工程师、Web设计师共有8名。工位主要是办公桌，通风良好，温度适宜，光线充足。在各办公桌上面配置各种关于网站开发的软件的电脑，用来进行网站的界面开发。
四、工作过程
1、观察图纸
拿到一张设计图，先观察一下图纸，对页面的布局，着色有一个整体的认识，而在对设计图达成一个初步的了解之后，就会对如何在Html页面里面布局有了规划，而根据这个规划再来对设计图进行分割输出，以免匆匆切分之后又发现再HTMl里面无法实现效果或者效果不好而返工。/ 8
2、拆分图纸
当对于如何拆分图纸和组成HTML页面有了规划之后，就可以将图纸拆分成需要的“原料”，以便在组装页面时使用，一般需要从图纸中拆分提取的有以下内容： 1）分离颜色
其中一般包括3部分配色，页面主辅颜色搭配的基本配色，普通超级链接的配色和导航超级链接的配色。2）提取尺寸
按照设计图的尺寸来搭建网页才会符合图纸上的设计，不过也不是说必须严格按照设计图纸来做，一点也不能差，有些时候可以灵活掌握。3）分离背景图
背景图可能是大面积重复的图案，也可能既是一张图片，一般和内容没有关系的装饰性图片都可以靠可制成背景图 4）分离图标及特殊边框
小图标及花边可以给网页添加细节和亮点。边框在理论上讲，其使用方法和背景图片类似，不过根据情况往往需要单独输出 5）分离图片
内容相关的图片，比如新闻报道的图片，讲解操作步骤地图片。
3、组装
组装就是把分离出来的元素按照一定的方法组合成与设计图效果类似的页面。1）先在本地设一个文件夹，作为网站存储的地方。名字最好取“My Sites”。2）在网站文件夹里面建立一些文件夹，包括“images”等（存储图片、文件等），并且按照网页内容，再建立几个文件夹。
3）打开你的网页编辑程序（例如FP、Dreamwear、VisualStudio等），新建网页，保存为“index”（主页），重复以上步骤，在网站文件夹里面建立“search”（查找）、“map”（站点地图）、“index02”（网站简介等）。
4）按照上面步骤，再在网站分类文件夹里面建立许多网页（接着还要把内容用html5输入到网页）。
5）在硬盘上面再建立一个文件夹“File”，把准备好的文档、图片、程式、文6 / 8 件和网页特效等放进去。
6）慢慢把这些文件一个不漏的放进网页里面，并且用CSS对页面进行排版（使之成为与UI设计图效果类似的页面）。
五、工作任务的对象
在静态页面制作完成以后，HTML前端工程师需要从视觉和易用性角度，与UI和UE设计师共同研究，为网站设计提供改进建议，为网站的页面提供持续优化方案。并且配合程序进行代码的调试、bug修复、浏览器兼容性调优。除此之外，还参与部分页面的策划创新工作，配合网站编辑和其他部门完成专题页面制作。HTML前端工程师是协调Web前端设计师和后端程序员实现网站页面或程序界面的美化、交互体验的一个职位。
六、工具、方法于工作组织方式
精通DIV+CSS和W3C标准，能熟练运用XHTML，CSS进行合理的网页制作，深刻理解手机平台上各主流浏览器之间的兼容性。
熟悉HTML5特性，了解HTML5最新规范。
熟悉常见的浏览器的特点和限制，熟悉W3C相关标准和Web常用协议、图片文件格式等；能解决常见浏览器兼容性问题，熟悉IE、Firefox、Chrome等主流浏览器的常见兼容性问题，并有可行的解决办法。
了解主流框架，如：javascript、jQuery、js、spring、hibernate等 负责项目中技术难点和关键模块的设计和编码，HTML5/JS开发工作，包括针对开发需求的技术方案设计、开发指导和团队技能提升等。
参与系统架构设计，负责项目中功能模块的设计，并能独立完成功能模块的编码工作。负责项目中前端展示页面的实现（包含html5jscss）； JEECG和JEEWX的产品及项目中涉及的系统之间接口定制与实现；产品和项目中需要开发的其他事项。/ 8
七、对工作和技术的要求
具备良好的服务意识、责任心、较强的学习能力、优秀的团队沟通与协作能力、能承受一定的工作压力；与后台工程师以及美工人员共同研讨技术实现方案，推进系统的持续改进；持续优化系统在各平台下的兼容性和系统执行效率；理解后端架构，与后端工程师配合，为项目提供最优化的技术解决方案； 具备良好的学习能力、沟通能力、分析及解决问题能力，优秀的团队协作精神。/ 8
第二篇：WEB前端开发工程师笔试试题（范文模版）
WEB前端开发工程师笔试试题
1.HTML的含义是什么?其主体部分由什么标记构成?
2.说明在网页设计中div标签的作用
3.CSS指的是什么?在网页制作中为什么要使用CSS技术
4.css 中id和class如何定义,哪个定义的优先级别高?如class定义一个html元素没有边框,而id定义这个元素有边框,结果呢?
5.IE6下为什么无法定义1px左右高度的容器
6.怎么样才能让层显示在FLASH之上？
7.怎样使一个层垂直居中于浏览器中（代码实现）？
8.firefox嵌套div标签的居中问题，假定有如下情况：
如果要实现b在a中居中放置，该如何实现？
9.web标准网站有哪些优点？
10.怎样解决超链接访问过后hover样式就不出现的问题？
第三篇：WEB前端开发经验总结
ASP.NET前端开发经验总结
通过此次大作业的设计到完成，我负责的是web前端的开发，经过此次作业和结合W3C上的自学，我渐渐有了一些对前端开发的小小经验（仅为个人意见）。WEB标准是什么？
说是WEB标准，不过我这里主要是对HTML5 和 CSS3.0的一些经验总结。因为WEB含盖的内容实在是太多了，“WEB标准”是一系列标准的总称，包括HTML5.0、HTML4.0、XHTML1.1、CSS3.0、CSS2.1、XML1.0、RSS2.0、ECMAScript1.1、DOM1.0等等。所以这里要跟大家指出来一下，WEB标准不是我们所说的DIV+CSS。刚刚上面提到了――DIV+CSS，这里要说明下，这样说其实是不正确的。DIV+CSS准确的说法（个人的理解）应该是：采用W3C推荐的WEB标准中的HTML5结合CSS3.0样式表制作页面的方法，DIV应该指的是HTML标签，而CSS显示是指的CSS样式表了。
采用WEB标准开发的好处
那么W3C为什么会推荐这样的页面制作方法呢？下面我们就简单的看看采用WEB标准开发（个人理解的）相对以前TABLE布局的优势有哪些？
1、节约运营成本
看看我们的WEB标准制作方法是如何做到的？
采用WEB标准制作，我们可以做到表现很形式的分离，我们用XHTML来表现（数据），用CSS来控制（页面元素呈现的）形式。写的好的页面，XHTML代码中基本上都是用户要看的数据，还其他修饰性的东西，全部由我们的CSS来控制。这样一来我们的（XHTML）页面的体积就大大减小了，这样你在带宽上的费用就会大家降低了，这个怎么降低的，你可以想象一下，YAHOO的首页小1K，100W个人一起访问，那么带宽节约了多少？而且可以更充分的利用带宽。
而我们的CSS控制了，所有的页面元素的样式，现在想改网站的整体风格，你只需要花几分钟修改一下一个CSS文件，就可以轻松搞定了。维护的成本也下来了，省了不少钱了吧？还有，你开这个页面的速度会快很多啊，一个让你等半分钟的页面，除非里面的信息对你很有用，不然我们大家基本都没有太多的时间去用来等待的。
2、对用户友好更友好，且有机会获得更多的用户 现在来说说用户友好。首先我想把我们的用户来分下类。第一类：普通用户（每个访问我们网站的人）； 第二类：搜索引擎；
采用WEB标准开发的页面，结构清晰，页面体积小，浏览器兼容性好。普通用户访问的时候，页面打开速度快，而且不管用户使用那种浏览器，都能够正常访问（显示）页面，且页面的结构清晰，要找的数据可以很方便的浏览到。
而对搜索引擎来说，一个好的采用WEB标准开发的页面，都是做过SEO优化的，它访问起来很友好，很容易理解你的页面中哪里是标题（H1~H6标签），哪里是段落（p标签），哪里是段落里要强调的内容（strong标签）等，它可以很容易的分析出来。而一个SEO好的站点，大家都知道，被搜索引擎收录的机会更多，这个也意味着您的网站会被更多的普通用户访问到，给你的站点带来更多的用户。
一个能帮我们省下大笔费用，提高工作效率。同时又能够提高页面浏览速度，对用户友好，甚至能够不花钱宣传，就能给你带来更多用户的技术。你说你会不会去使用它？这个也正式我们的W3C推荐使用WEB标准开放网站的原因啊。而这个技术也得到了我们广大用户的认可，所以现在需要学习WEB标准啊。合理的布局
前面我提到了一些知识点――“结构清晰、SEO优化、页面体积小、HTML代码中基本上都是用户要看的数据”。这些东西，都是我做了合理布局的结果。而且我个人觉得，我们采用WEB标准制作的一切都是从这个知识点开始的，所以我这里就先来说这个话题。
也许有人会问，怎样的一个页面，才算是合理的布局的呢？这个问题问题问得好，也是我们大家刚开始学用WEB标准的问得最多的问题之一，我也曾经常被这个问题所困扰，这里就说说我对合理布局的一些理解。
在开始讲合理布局的页面要达到的要素前，我们还是用个实例来讲解会更直观些。先来看看这个图片：
不错，这个是一个文章详细页，没有左右两栏布局，不过这里我重点要讲的是合理的布局。
这是此次实验中customer（前端的一项）部分的完整代码：
<%@ Page Language=“C#” AutoEventWireup=“true” CodeFile=“Customer.aspx.cs” Inherits=“Customer” %> <%@ Register Src=“Controllers/Bottom.ascx” TagName=“Bottom” TagPrefix=“uc4” %> <%@ Register Src=“Controllers/Top.ascx” TagName=“Top” TagPrefix=“uc1” %> <%@ Register Src=“Controllers/Left.ascx” TagName=“Left” TagPrefix=“uc2” %>
” name=“description”/> ” name=“keywords” />