网站制作前需知

1.1 网站开发流程

网站策划（策划人员）->交互设计（交互设计师）->网页设计（视觉设计师）->前端开发（前端工程师）->后端开发（后端工程
师）->测试网页（测试人员）->网站发布->后期运营和维护。

1.2 分析网页效果图

1.2.1 划分模块

网页都是由一个个的小模块组成的，对于一个页面，如果它的页面结构和表现有很多统一和相似的地方，便可以运用网页模块化
来制作页面，省去重复劳动。

1.2.2 CSS模块化

网页上表现相同或相近的区域能提取出可以重复使用的CSS样式，就是CSS模块化。

1.2.3 class是用技巧

用class组合：XHTML模块的表现样式用几个class样式组合在一起视线。

1.2.4 如何“切图”

切图技巧主要有以下几点：
1）颜色渐变或重复的图片只需切其中任意一块重复的区域。
2）反之，颜色不是渐变，没有重复图案或不是纯色的图片将其作为一个切片。
3）能用CSS的background-color属性显示的尽量不用图片。
4）切图的时候将网页效果图放大，切片边缘精确到一个px，否则达不到网页与效果图一致的目的。

1.3 与产品经理、设计师、后端工程师进行有效沟通

产品经理：需求分析
设计师：高保真效果图
前端工程师：开发
后端工程师：开发
测试人员：测试
发布跟踪…

1.4 XHTML CSS基础知识

1.4.1 XHTML文件的构成

1、head,body
2、GBK是针对中文网页设计的编码格式。
3、在没有特殊需求的情况下统一使用UTF-8编码，因为UTF-8是国际编码，通用性好，另外使用UTF-8编码有个好处是后端页
面，如PHP、ASP等都使用UTF-8编码，所以与其通信时可以防止出现乱码和不必要的麻烦。
4、CSS一半位于XHTML文件的头部，JavaScript一般位于XHTML文件的末尾，防止JavaScript文件在加载时出现加载时间过
长，而导致页面出现空白糟糕的用户体验。

1.4.2 CSS文件的构成

CSS文件分为三部分：第一部分为CSS重置；第二部分为公共样式；第三部分为模块样式（非公共）。所有的公共样式一般写在
第二部分，位于模块样式之上，方便查找。

1.4.3 标签语义化

1、语义化标签
2、<table>标签，该用的时候，就要大胆使用。

1.4.4 CSS命名规范

两种：驼峰式（topMenu）、画线式（top-menu、top_menu）

1.4.5 CSS样式重置

浏览器对XHTML标签都有自己默认的样式，如果不对这些默认样式进行重置，那么为了使网页在各浏览器中都呈现出与效果图一
致的样子，需要在CSS中对每个XHTML标签反复设置相同的规则。
css重置的样式一般都是固定的：

/*css reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
ol,ul{list-style:none}
fieldset,img{border:0;}
textarea{resize:none;}
input:focus,textarea:focus{outline:none}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
q:before,q:after{content:' ';}
abbr,acronym{border:0;font-variant:normal;
address,cite,dfn,optgroup,em,var{font-style:normal;}
legend{color:#000}
.clear{clear:both;height:0;voerflow:hidden;}
.cf:after{visibility:hidden;display:block;font-size:0;content:"";clear:both;height:0;}
*.cf{zoom:1;}

.cf样式用于对DIV内部的元素清除浮动，从而避免了增加一个空的DIV标签来清除浮动。
注意：实际项目的CSS文件中，要在CSS文件头部增加如下代码作为CSS样式重置代码：

.clear{clear:both;height:0;overflow:hidden;}
.cf:after{visibility:hidden;display:block;font-size:0;content:"";clear:both;height:0;}
*.cf{zoom:1;}(cf式自己写的类名)
.left{float:left;}
.right{float:right;}

XHTML写法一：

<div class="cf">
<div class="left">这边是左边导航</div>
<div class="right">这里是右边内容</div>
</div>

XHTML写法二：

<div>
<div class="left">这里是左边导航</div>
<div class="right">这里是右边内容</div>
<div class="clear"></div>
</div>

1.4.6 CSS Sprites技术

CSS Sprites是将一个页面涉及到的零星背景图片都整合到一张大图中，再利用CSS的background-image、background-repeat
和background-position的组合对背景图片定位，background-position可以用数字精确定位出背景图片的位置。
图片请求次数越多，造成延迟的可能性越大。
对于较高流量的页面，可以使用CSS Sprites技术合并图片，并且整合后的图片大小不高于200KB时推荐使用。

1.4.7 页面质量评估标准

YSlow或W3C验证http://validator.w3.org/都可以检测XHTML和CSS代码的质量。
通常判断代码质量优劣的标准如下：
1）浏览器兼容性测试。
2）XHTML代码结构是否清晰。
3）XHTML代码结构是否复杂。
4）XHTML代码是否和CSS混杂在一起。
5）XHTML代码中是否大量出现不被推荐使用的标签。
6）XHTML和CSS代码是否书写规范。

1.4.8 代码注释的重要性

1、有效的维护和修改。
2、读者了解网站结构和设计者的思路。
3、在人员接替时能保证稳定过渡。

1.4.9 CSS Hack

由于不同的浏览器对CSS的解析不一样，因此回导致生成的页面效果不一样。这时需要怎对不用的浏览器去写不同的CSS，让他