当前位置:首页 > 建站百科

网站前端/网页前端

各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。Web前端开发在产品开发环节中的作用变得越来越重要,而且需要专业的前端工程师才能做好,这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作,涵盖的知识面非常广,既有具体的技术,又有抽象的理念。简单地说,它的主要职能就是把网站的界面更好地呈现给用户。

由于前端工程师的特殊工作性质,使其能够同时从工程和用户两个角度观察产品,那么也会有自己独特的解决问题的方式和途径。这个生态环境是为了能以产品为中心指导工作而进行的基础建设,本质上也只是一个工具,如何利用好它,需要整个团队进行长期的探索和磨合。网站前端是网站优化必须有的基础。

1.网站前端工作内容

最基本的三个技能:HTML、CSS、JavaScript或者javascript类库。这个是前端开发中最基本也是最必须的三个技能。前端的开发中,在页面的布局时, HTML将元素进行定义,CSS对展示的元素进行定位,再通过JavaScript实现相应的效果和交互。虽然表面看起来这些很简单,但这里面需要掌握的东西绝对不会少。在进行开发前,需要对这些概念弄清楚、弄明白,这样在开发的过程中才会得心应手。

一般的规范有:
1、根据工作安排高效、高质地完成代码编写,确保符合规范的前端代码规范;
2、负责公司现有项目和新项目的前端修改调试和开发工作;
3、与设计团队紧密配合,能够实现实现设计师的设计想法;
4、与后端开发团队紧密配合,确保代码有效对接,优化网站前端性能;
5、页面通过标准校验,兼容各主流浏览器。

目前很多优秀企业、优秀的网络公司都希望员工会最新的网站前端技术(html5+css3),所以网站前端工作人员必须不断的更替知识,这

2.网页前端使用的技术——html5和css

HTML和CSS并不难理解。HTML为构成网页的主要语言。通过这种语言,我们可以向计算机说明网页格式、内容、显示效果等等。而CSS则是专门用来控制网页显示效果的语言。HTML5和CSS3是HTML和CSS的最新版本,它们目前均未确定标准,但是已经公布的新特征已经让我们心动不已。

HTML5不但允许你在网页中直接整合视频、音频,同时更提供了一套功能丰富的API用来控制媒体播放,而这些用来控制媒体播放的元素也都是可以被编辑的。因此,HTML5在视频以及音频层面上实际已经可以替代常用的flash插件了。

自1999年以后HTML 4.01 已经改变了很多,今天,在HTML 4.01中的几个已经被废弃,这些元素在HTML5中已经被删除或重新定义。为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式 处理,和几个api拖放元素,定位,包括网页 应用程序缓存,存储,网络工作者,等。


html5优点:

1、提高可用性和改进用户的友好体验;
2、有几个新的标签,这将有助于开发人员定义重要的内容;
3、可以给站点带来更多的多媒体元素(视频和音频);
4、可以很好的替代FLASH和Silverlight;
5、当涉及到网站的抓取和索引的时候,对于SEO很友好;
6、将被大量应用于移动应用程序和游戏;
7、可移植性好。
8、网络标准更规范
9、多设备跨平台,响应式布局等

html5缺点:

该标准并未能很好的被浏览器所支持。因新标签的引入,各浏览器之间将缺少一种统一的数据描述格式,造成用户体验不佳。

CSS3即层叠样式表(Cascading StyleSheet)。 在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

 

css3最重要的几个模块:

1.选择器
2.盒模型
3.背景和边框
4.文字特效
5.2D/3D转换
6.动画
7.多列布局
8.用户界面
css3能更好的改进用户体验,有助于网站前端开发人员对网站界面做更好的交互,或者复杂的效果。缺点是,主流浏览器兼容性不是很彻底!

hmtl5和css3是网站前端开发的必学之路,也是未来网页的发展趋势!

3.网站前端常用类库


1.jquery类库

JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需要定义id即可。

jquery特点:
      动态特效
      AJAX
      通过插件来扩展
      方便的工具 - 例如浏览器版本判断
      渐进增强
      链式调用
      多浏览器支持,支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+(在2.0.0中取消了对Internet Explorer6,7,8的支持)

 

2.animate

animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果。虽然借助 animate.css 能够很方便、快速的制作 CSS3 动画效果,但还是建议看看 animate.css 的代码,也许你能从中学到一些东西。

其它还有很多优秀的常用类库,如jquery.SuperSlide等,当然大部分都是jQuery类库

4.网站前端人才分布

目前大多数网站前端工作必须兼职网站设计工作,比如二三线城市都是这种模式,一个工作人员必须兼任网站设计网站前端两份工作,网站前端在二线城市是网站设计、网站前端制作的总称,只有一线城市,北京、上海、广州等地工作性质分的比较细,网站前端只负责网站的切图与效果制作!所以大部分人才分布于一线城市,这里的技术更新较快,人才相对较多!相对技术实力也是比较靠前的!

一线城市网站建设公司也比较多,这也是一部分原因

5.网站前端与网站优化

网站建设中网站前端是网站优化重点之一,良好的网站前端书写对网站优化极其重要,主要有以下几点:

1.图片整合,减少图片获取加载
2.代码精简,减少不必要的标签
3.样式抽取,尽量将样式独立到.css文件,而不是写在html中
4.样式能用代码尽量用代码,而不用图片
5.同一个系统中,布局、样式的统一
6.可操作性、交互方面的优化

优化技巧:

1)减少一个页面访问所产生的http连接次数
对于第一次访问你网站的用户,页面所产生的http连接次数是影响性能的一个关键瓶颈。

      对策:
      - 尽量简洁的页面设计,最大程度减少图片的使用,通过放弃一些不必要的页面特效来减少javascript的使用。
      - 使用一些优化技巧,比如利用图片的背景位移减少图片的个数;image map技术;使用Inline images将css图片捆绑到网页中。
      - 尽量合并js和css文件,减少独立文件个数。

2) 使用gzip压缩网页内容
使用gzip来压缩网页中的静态内容,能够显著减少用户访问网页时的等待时间(据说可达到60%)。主流的web服务器都支持或提供gzip压缩,如果使用apache服务器,只需要在配置文件中开启 mod_gzip(apache1.x)或mod_deflate(apache2.x)即可。凡是静态的页面,使用gzip压缩都能够显著提高服务器效率并减少带宽支出,注意图片内容本身已经是压缩格式了,务必不要再进行压缩。

3)将CSS放在页面顶端,JS文件放在页面底端
CSS的引用要放在html的头部header中,JS文件引用尽量放在页面底端标签的后面,主要的思路是让核心的页面内容尽早显示出来。不过要注意,一些大量使用js的页面,可能有一些js文件放在底端会引起一些难以预料的问题,根据实际情况适当运用即可。

4)使JS文件内容最小化
具体来说就是使用一些javascript压缩工具对js脚本进行压缩,去除其中的空白字符、注释,最小化变量名等。在使用gzip压缩的基础上,对js内容的压缩能够将性能再提高5%。

5)尽量减少外部脚本的使用,减少DNS查询时间
不要在网页中引用太多的外部脚本,首先,一次dns的解析过程会消耗20-120毫秒的时间;其次,如果在页面中引用太多的外部文件(如各种广告、联盟等代码),可能会因为外部文件的响应速度而将你的网站拖得很慢。如果不得不用,那么就尽量将这些脚本放在页脚吧。不过有一点需要提及,就是浏览器一般只能并行处理同一域名下的两个请求,而对于不同子的域名则不受此限制,因此适当将本站静态内容(css,js)放在其他的子域名下(如 static.xxx.com)会有利于提高浏览器并行下载网页内容的能力。

6.网站前端发展局限性及浏览器


网站前端最头痛的是网站在各个浏览器中的兼容性。

因为不同浏览器使用内核及所支持的HTML(标准通用标记语言下的一个应用)等网页语言标准不同;以及用户客户端的环境不同(如分辨率不同)造成的显示效果不能达到理想效果。最常见的问题就是网页元素位置混乱,错位。浏览器兼容性问题又被称为网页兼容性或网站兼容性问题,指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制作中,做好浏览器兼容,才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计,浏览器对标准的更好兼容能够给用户更好的使用体验。

解决方法:CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。

简单的说,CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然,我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

7.网站前端与设计师和程序


二三线城市,网页设计和网站前端是一个职位,一般由一个人来做,而一线城市大多数都是网站前端单独分开的。

网站前端必须按照网站设计师的意愿去做效果,这就意味着网站设计师必须了解网站前端在各大浏览器的局限性,这是两者必须有的默契和连贯!

网站前端一般和程序需要对接代码,对接ajax数据传递cookie等一下技术,网站前端制作的代码必须能让程序人员很好的制作

网站前端更多的职责是项目的润滑剂和沟通桥梁,必须让设计师和网站最终效果达成一致,还必须具有完美解决兼容性的本领,所以网站前端是值得敬佩的!