页面布局流程
1、 设计稿的分析
A、分清设计稿中的公共与私有的部分。
如：从最基本的开始，分清公共部分如菜单、导航、大框架和每个独立页面所用到的部分。
  B、在A的基础上对各部分的实现方式有一个初步的方案（包括如何切图、写结构、写样式。
如： 在分清公共和私有部分后，分析最简单的实现方法，哪些部分是可以平铺的，哪些是可以重复被使用的，还有那些是可以不用切除图片而直接用颜代替的等等。
  C、在B的基础上，准确的给出各部分的实现方案（包括如何切图、写结构、写样式）
  D、在c的基础上，能同时考虑方案的扩展性、复用性及页面性能（包括如何切图、写结构、写样式）
如： 给出的方案中考虑是否可扩展、如何重复使用
2、 切图
A、 切成所需要的图片。
B、 在A的基础上，对切出来的图片进行一些优化。如：压缩输出的图片，在不影响画面质量的前提下，尽可能的减少文件字节数。此时可更加：对于一般的图片，在保持其外观不变的情况下要尽可能的压缩其大小，但是像有渐变的效果，可保存为png原图以免失的原则。
C、 在B的基础上，规划切出来的图片。如：哪些图应该被合并，存放于哪个目录等等。
D、 精准的测量好效果图各部分的间距，边距，高，宽等并做好记录以便做网页效果时使用
3、 HTML和CSS的编写
A、 还原设计稿视觉效果，最好能通过标准验证（HTML），在此应注意一下几点：
·将网页文字化，即能不用图片的地方尽量不用图片
·有图片的地方给图片加上alt属性，并给链接加上title属性
·尽可能的将所有的样式表现写到单独的css文件中
·尽量不使用Frame框架，如果要使用，则应正确使用Noframe标签， 在<Noframe></Noframe>区域中包含指向frame页的链接或带有关键词的描述文本
·由于FLASH不含文字信息,所以应尽量用于功能展示和广告，少用于网站栏目和页面
·尽可能的不使用图像热点，因为除AltaVista、Google明确支持图像热点链接外，其他引擎暂不支持
B、 在A的基础上，实现多浏览器的兼容常用css布局
C、 在B的基础上，HTML标签语义化，即该使用h标签的时候使用h标签，而不是使用div代替。
D、 在C的基础上，考虑到扩展性、复用性和可维护性（HTML和CSS）
E、 Css样式写法的优化，如：精简样式代码，等等。
4、 一些建议和问题
A、 关于h标签的使用建议：
·一个页面最多只能有一个h1标签，其他标签可以有多个，而且它在搜索引擎中的内容的权重比仅仅比title要低，所以，要谨慎使用该标签，首页一般可以将网站的logo设为h1，内容页则最好将其文章或者产品标题设置为h1。
·在能够使用h标签的时候可以尽量的使用h标签。如某些标题这类的。以提高网页的语意化结构。
B、 ID与CLASS的使用建议：
  ID需要具有唯一性，并且尽量在外围使用。而CLASS具有可重复性，并且尽量在结构内部使用，这样做的好处是有利于网站代码的后期维护与修改，这样的做法就会让所有的CLASS都成为ID的子级或是孙级。
C、 一些语义化可行的命名规则建议：
  头部：header    主菜单：menu        次级菜单：submenu
主导航：nav      次级导航：subnav    主内容区：mainbody
侧栏:：sidebar    内容栏：container    尾部：footer
版权：copyright  Logo：logo        广告：banner
Flash广告：falshbanner  友情链接：friendlink  搜索：search
状态：status
新闻列表：newslist  新闻标题：newstitle  新闻内容：newscon
产品列表：prolist    产品图片：propic      产品介绍：prointro
产品名称：proname  多栏：columns
      有时根据一些类型添加后缀如：
按钮 btn  文本 txt  段落 p  图标 icon  input input
颜 color,c  背景 bg  边框 bor
  注：语义化的命名定义很重要，因为，它直接关系到当代码实现模块化后后期样式的修改和维护。
D、 Css代码书写的建议；
首先可以按照功能将css代码放到不同的css文件里；可用的归类如：
主要的:master.css  布局版面:layout.css。
然后在版面的具体布局css页面的书写上：我们可以根据不同的模块来分别将其写在一个注释下，这样可以方便以后得修改。
E、 问题：网站重构性的提高，可以使用模块化，但是如何使用模块化以提高网站重构

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。