web入门

开发页面在很多人眼里很简单,一点技术含量都没有。确实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中一定要写上存在的图片链接,人人网通常使用的是一像素的图片代替。如果你忽略了这个地址,页面上会有一个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*/

 




技术文摘

技术文摘
 
  职业室内设计师班(零基础授课)
  平面设计师班(零基础授课)
  职业Web前端开发班(零基础授课)
  职业平面设计师班(零基础授课)
 
 相关文章:
网页设计排版技巧
网站的类型
色彩使用技巧
margin的应用

版权所有:北京艺知堂艺术设计工作室 网址:http://www.yizta.com      咨询热线:13552855085    010-56159565