Web页面入门

标签: Web设计 前端开发 HTML 性能优化 语义化 | 发表时间:2011-12-16 17:05 | 作者:直觉
出处:http://www.kekaku.com

开发页面在很多人眼里很简单,大部分的人都会说不就是把效果图变成网页嘛,哪里需要那么多的时间,一点技术含量都没有。确实html页面没有js那么多复杂的交互,也不需要和后台数据打交道,但并不能代表就没有技术含量,也不是人人都能做好的。页面结构好坏直接会影响到css代码的质量,也会影响js和后台的开发,还会影响到以后功能的扩展和代码的优化。

前端页面的工作很琐碎,需要的不仅是基础知识的扎实,知识面的广泛,很重要的一点还要细心。下面我们就讲讲页面开发,开发中需要事项和常遇到的问题吧。

首先分析效果图,细节上是否和站内风格统一;设计的元素是否便于实现;元素是否能复用。有问题及时和产品人员进行沟通,避免开发过程中的频繁修改,影响工期和代码的质量。这些都是为更好的布局和精简css代码做的必要工作。

合理布局很重要,如同大厦的地基,大厦的高度再于地基是否牢固,合理的布局能有更好的扩展性。结构要尽量简洁,尽量减少结构中的嵌套,不要为了实现某种样式添加多余的空标签。

标签尽量语义化,能够让代码更加清晰。现在html5添加了更多的语义化标签,像header,section等,大胆的使用吧。虽然html5对于标签的相互嵌套体现了很好的包容性,即使标签没有闭合,或是inline元素中包含一堆block元素也不会有问题,但是为了养成良好的习惯还是尽量做到严格遵循xhtml的规范。

尽量少在页面写inline css,会使页面代码臃肿,不便于维护,有悖于样式和结构相分离的初衷。

页面中推荐的两种注释:

<%!–jsp注释,不会输出,推荐使用–%>

另一个总和前端页面开发打交道的就是图片。图片分为两种,一种是cssimage引用,另一种纯Image的页面引用。

背景图是通过样式在页面上输出,会在页面中产生请求,延长页面的渲染时间,为了解决这个问题,可以把类似的图片进行合并,减少请求数。在进行合图的时候,尽量把颜色相近的图标放到一起,可以减少图片的大小。

页面中直接引用的图片尽可能少的缩放,非常影响页面的渲染速度;尽可能少的使用前端技术控制图像显示大小,对用户不可见的部分就是浪费带宽,浪费钱,页面的渲染速度也肯定会受到影响,影响用户体验;在知道图片宽高的情况下尽量在img中加上宽高,减少页面reflow造成的速度损耗。

静态图片一定要小,建议存成png8格式,在不影响图片的显示质量下,可以选择128色或是更低的颜色输出图片。当然有的色彩比较丰富的图片,存成jpg格式的更小,难道你会非选png的吗?存储完后图片还能用一些压缩工具进行无损压缩(如:PNGGauntlet)。

对于图片来说小就是原则,为什么呢,给你算个帐,节约10K看不出什么,100个用户是1000K,10000个是100000K,那一亿个用户呢?全是白花花的银子啊!

图片有几点需要注意:

1、我们在使用背景图做图标的时候通常会在页面加一个钩子——img标签,img标签中的src中一定要写上存在的图片链接,人人网通常使用的是一像素的图片代替(http://a.xnimg.cn/a.gif)。如果你忽略了这个地址,页面上会有一个404的请求,在ie6下直接显示一个叉。
2、如果你的工程已经上线,我们站内对静态文件会有一个缓存机制。在开发过程中,经常会遇到修改图片的情况,如果你修改后的图片不更改文件名或是在样式中更改引用该图片的版本号,对于用户而言,他们仍然看不到修改后的图片。所以,一定要记得修改文件名。
3、避免过小的背景图平铺。
4、尽量将图片上的文字提取出来用代码实现,便于图片的复用和日后文案的修改;

css主要说一下注意事项。
1、class命名建议以功能而不是外观命名,不建议使用大小,避免起容易冲突的名字,防止样式被覆盖。
2、CSS后代选择器性能:.a{} > .b .a{},查找匹配耗费cpu,代码复杂,优先级高,修改不方便;
3、编码时尽可能使用缩写,如padding:top right bottom left;border-width:1px 0;border-color:#CEE1EE;color:#F05;

4、使用CSS display:none隐藏的元素不会被搜索网站检索,会影响到网站的SEO,可以使用text-indent:-9999em;来达到同样效果。
5、减少overflow清除浮动的使用,避免使用无意义的空标签清除浮动,通常站内使用clearfix来清除浮动。
6、border:none;替换border:0;的写法;
7、使用css3的属性来代替阴影或是圆角的图片;

浏览器的兼容问题是页面开发的永衡话题。结构的合理和简洁在很大程度上可以减少兼容性的bug,但是ie的特立独行又不可避免有一些兼容性问题。
IE6、IE7、Firefox之间的兼容写法:
写法一:
IE都能识别*;标准浏览器(如FF)不能识别*;
同一类class下的CSS hack可写为:

.classname{
background-color:#333;/*三者皆可*/
*background-color:#666; /*IE*/
_background-color:#999; /*仅IE6及IE6以下*/
}
一般三者的书写顺序为:FF、IE7、IE6.
写法二:
*+html 与 *html 是IE特有的标签, Firefox 暂不支持。
.classname{background-color:#333;}

*html .classname{background-color:#666;}/*仅IE6*/
*+html .classname{background-color:#555;}/*仅IE7*/
常见的css bug这里就不说了,稍后会在wiki里总结一个列表供大家查阅和参考。

对于样式和图片的引用a.xnimg.cn,s.xnimg.cn,xnimg.cn。这三种的区别是a.是在其他地方的域,s.是在北京本地的域,xnimg.cn是曾经的域,通常现在使用a.xnimg.cn,除非非常重要的静态文件才使用s.xnimg.cn。

在开发过程中,我们应该对bug出现有预见性,特别是常见的bug(QA经常提的bug比如连续字符串没有换行,鼠标在没有变成手型…)要提前做出处理。要考虑各种极端数据和不同大小图片在页面中的显示情况。对于代码进行合理的规划,减少冗余,可以简单写下注释,便于以后修改。

再来说一下快速查bug和解决bug的一些个人见解吧。
首先要分辨bug的类型,有的bug不一定是页面的问题。是否是页面套错了某个标签没有闭合,是否需要js修改或是后台技术处理。
查bug,工具是必不可少的,firebug,ie的IEDevToolBar,chrome自带调试工具都能进行调试和修改;使用工具能很快定位bug的位置和类型,作出修改。
经验的积累也是很重要的。有时候你使用了所有的方法解决但问题仍然存在,需要看看DOCTYPE是否在HTML顶部,是否完整,推荐;是否有多余的空格或是编码格式是否正确,

比如ie解析的空格间距不太一样,有时候会导致意想不到的bug。
还有一种方式是逐步删代码方式,看究竟是那个部分是有问题的。

解决bug常用的几个方法:
有人说zoom:1;是解决ie6的兼容问题的万精油。可以用,但是不易多用,这个属性可能会存在一些潜在的问题,至于是什么问题,大家可以google一下。
position:relative;往往和overflow:hidden;搭配使用能解决ie下滚动图片侧漏问题哦。

最后要说的是优化,一定要时时刻刻想着优化自己的代码,给用户带来最好的体验。永远记住这句话【HTML结构的简化>css代码结构的简化】

您可能也喜欢:

打造高排名WordPress博客站点SEO优化技巧 | 织梦(Dedecms)管理员之家 (@dedeadmin)

Free Icons Web (@mydesy)

web页面入门

Web前端优化最佳实践之 内容篇

Web 前端优化最佳实践之 Server 篇
无觅

相关 [web 页面] 推荐:

Web页面入门

- - 可咔酷 | 网络杂货铺
开发页面在很多人眼里很简单,大部分的人都会说不就是把效果图变成网页嘛,哪里需要那么多的时间,一点技术含量都没有. 确实html页面没有js那么多复杂的交互,也不需要和后台数据打交道,但并不能代表就没有技术含量,也不是人人都能做好的. 页面结构好坏直接会影响到css代码的质量,也会影响js和后台的开发,还会影响到以后功能的扩展和代码的优化.

Web 页面测试点

- - Web前端 - ITeye博客
(1) 页面清单是否完整(是否已经将所需要的页面全部都列出来了). (2) 页面是否显示(在不同分辨率下页面是否存在,在不同浏览器版本中页面是是否显示). (3) 页面在窗口中的显示是否正确、美观(在调整浏览器窗口大小时,屏幕刷新是否正确). (4) 页面特殊效果(如特殊字体效果、动画效果)是否显示.

Web页面中的“门”—Web端登录页的设计

- - 百度MUX
登录页是用户进入网站的入口,就像是我们进家、进公司的“门”一样. 试想我们处在一个四周都是门的环境,我们会选择推开哪一扇门. 这一扇门哪些地方有吸引我们推开的魅力. 其实这些问题同样适用于登录页面,对于登录页面,是否有足够的魅力让用户在登录过程中不感到烦躁,是否能准确的区分所要填写的信息(如:是填用户名或是电话,快速切换的按钮在哪等),是否能准确找到登录或注册按钮,这些元素的视觉层级与交互关系,直接影响着整个页面的体验.

web页面相关的一些常见可用字符介绍

- 红茶 - 张鑫旭-鑫空间-鑫生活
本文地址:http://www.zhangxinxu.com/wordpress/?p=1623. 正文开始之前先分享两个与字符相关的东西. 首先是一张图片,是一张一些字符以及想对应的HTML实体表示的对照图片. 然后是一个页面,是我收集的些杂七杂八字符页面,地址如下:http://www.zhangxinxu.com/sp/character.html.

拒绝平庸——浅谈WEB登录页面设计

- - 腾讯CDC
  用户活跃度是检验产品成功与否的重要指标之一,传统行业的商家极为重视门面的装潢,因为一个好的门面可以聚集人气,招揽更多的顾客. 古时候的大户人家院子门口的石狮子或其他的摆件的摆放极为讲究,有一定的风水学说道理,更能彰显主人家的身份地位.由此可见,“门面’就如人的脸面之于人的形象一样重要,而WEB的登录页面就相当传统的“门面”.

解析web网页并保存页面中的图片

- - Marshal's Blog
这个功能,是很多类似爬虫的应用需要实现的. 如果使用node.js,你会惊讶的发现,这个任务实现起来很容易,就象写嵌入在页面中的javascript一样. 建议没接触过node.js的,可以先看看 node.js能干什么. ,里面已经包含了最简单的解析web网页的功能. 这次做的是更具体的事情,我想把维基百科的坦克词条文章抽取出标题和一个图片:.

浅谈WEB页面提速(前端向) - vajoy

- - 博客园_首页
记得面试现在这份工作的时候,一位领导语重心长地谈道——当今的世界是互联网的世界,IT企业之间的竞争是很激烈的,如果一个网页的加载和显示速度,相比别人的站点页面有那么0.1秒的提升,那也是很大的一个成就. 然后我不知道怎么写下去了,就在群里问了那群狗头军师,结果是这样的. 好的,是时候“语锋一转”切回主题了 —— 如何提升我们站点页面的访问速度、减少等待时间,从而最大化地提升用户访问体验呢.

Android 中通过 URI 实现 Web 页面调用本地 App

- - RincLiu.com
HTML 5 和本地 App 各有所长,现在公司的项目中也大量采用 HTML 5 做活动页面,这样本地代码和 HTML 5 的交互就是必须的. 说到 Android 端 Java 代码和 Web 端 HTML / JS 代码的交互,你可能最先想到的就是 WebView 的这两个方法:. 前者可以实现 native 代码直接执行 JS 代码,而后者可以将 native 代码实现的接口暴露给 Web 页面,这样 Web 页面可以像调用普通 JS function 一样调用这个 native 接口.

怎样让浏览器随意修改访问中的 web 页面

- - ITeye博客
  丈 母娘在的那些日子, 天天玩 4399 上的 花花连连看 游戏, 明天要走了, 说要把游戏下载下来回去玩,因为她家里没有网络. 我看了下这个页面, 发现是个 flash 的游戏, 心想应该能下载到本地玩. 看了看页面上有个下载的连接, 点进去却发现还需要安装 4399 游戏盒. 安装软件对于丈母娘来说太难了, 我心想,直接把 flash 下载下来不就完了吗.

代码托管网站Github收购基于Web的页面设计工具Easel

- - 36氪 | 关注互联网创业
代码托管网站 Github已收购基于Web的页面设计工具 Easel. 作为一个已从YC顺利毕业的创业公司, Easel可以帮助不会代码和用户界面设计的创业者,快速把自己的创意制作成产品原型页面. 除此之外,Easel还支持多人同时在线编辑. 虽然与与强大的桌面设计软件相比功能并不完善,但 Easel 提供的工具却也能够帮用户设计出适合桌面、移动或平板浏览的基本站点.