页面布局流程.docVIP

页面布局流程 设计稿的分析分清设计稿中的公共与私有的部分从最基本的开始，分清公共部分如菜单、导航、大框架和每个独立页面所用到的部分在的基础上对各部分的实现方式有一个初步的方案（包括如何切图、写结构、写样式在分清公共和私有部分后，分析最简单的实现方法，哪些部分是可以平铺的，哪些是可以重复被使用的等等。在的基础上，准确的给出各部分的实现方案（包括如何切图、写结构、写样式）在的基础上，能同时考虑方案的扩展性、复用性及页面性能（包括如何切图、写结构、写样式）给出的方案中考虑是否可扩展、如何重复使用切成所需要的图片在的基础上，对切出来的图片进行一些优化压缩输出的图片，在不影响画面质量的前提下，尽可能的减少文件字节数。在的基础上，规划切出来的图片哪些图应该被合并，存放于哪个目录等等HTML和CSS的编写还原设计稿视觉效果，通过标准验证（HTMLalt属性，并给链接加上title属性 ·尽可能的将所有的样式表现写到单独的css文件中 ·尽量不使用Frame框架应正确使用Noframe标签， 在Noframe/Noframe区域中包含指向frame页的链接或带有关键词的描述文FLASH不含文字信息应尽量用于功能展示和广告，少用于网站栏目和页图像热点除AltaVista、Google明确支持图像热点链接外，其他引擎暂不支持在的基础上，实现多浏览器的兼容在的基础上，HTML标签语义化在的基础上，考虑到扩展性、复用性和可维护性（HTML和CSS）Css样式写法的优化ID与CLASS的使用ID需要具有唯一性，并且尽量在外围使用。而CLASS具有可重复性，并且尽量在结构内部使用这样做的好处是有利于网站代码的后期维护与修改，这样的做法就会让所有的CLASS都成为ID的子级或是孙级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 注：语义化的命名定义很重要，因为，它直接关系到当代码实现模块化后后期样式的修改和维护。 Css代码书写的建议； 首先可以按照功能将css代码放到不同的css文件里；可用的归类如： 主要的:master.css布局版面:layout.css