网页设计基础知识

文档目录结构
网站前端开发文档目录结构
图片文件夹
/images/
样式表文件夹(.css)
/styles/
脚本文件夹(.js)
/scripts/
多媒体文件夹(flash, avi, ram, quicktime)
/mediaes/
目录细则
根目录只存放index.htm以及其他必须的系统文件
每个主要栏目开设一个相应的独立子目录，以英文命名
每个语言版本存放于独立的目录，例如：简体中文gb

页面设计分辨率
不同分辨率下显示器的最小活空间
Windows平台 Internet Explorer 6 浏览器
分辨率 640*480： 619*303 px
分辨率 800*600： 779*423 px
分辨率 1024*768： 1003*574 px
分辨率 1280*1024： 1259*847 px
Windows平台 Netscape 6 浏览器
分辨率 640*480： 618*301 px
分辨率 800*600： 778*421 px
分辨率 1024*768： 1002*589 px
分辨率 1280*1024： 1258*845 px
Macintosh平台 Internet Explorer 6 浏览器
分辨率 640*480： 591*309 px
分辨率 800*600： 751*429 px
分辨率 1024*768： 975*597 px
分辨率 1280*1024： 1231*853 px
Macintosh平台 Netscape 6 浏览器
分辨率 640*480： 607*322 px
分辨率 800*600： 767*442 px
分辨率 1024*768： 991*610 px
分辨率 1280*1024： 1247*866 px

页面设计色彩管理
色彩管理细则
网站应该有自己的标准色（主体色）
标准色原则上不超过两种，如果有两种，其中一种为标准色，另一种为标准辅助色
标准色应尽量采用216种web安全色之内的色彩
必须提供标准色确切的RGB和CYMK数值

广告条设计
网页广告条大小标准
通栏广告
全尺寸：468*60 px 392*60px；半尺寸：234*60px
擎天柱
120*240px
按钮广告
120*90px 125*125px 120*60px
连接按钮
88*31px


网页开发新20条规则
高性能网页开发新20条规则
尽早清除缓冲区 [服务器端]
在HTML页面的head标签位置后是清除缓冲的好位置，因为HTML的head标签可以
包括CSS和Javascript文件，对于浏览器而言获取页面显示与后端服务器处理并行的效果较好。
尽早清除缓冲语句或增加一个页面的HTTP请求次数，应予以注意。
使用GET方法的AJAX请求 [服务器端]
AJAX经常要用XMLHTTPRequest，但是他的POST方法在浏览器中完成需要执行两步：首先
发送信息头，然后才是发送数据；而GET方法只用一个TCP数据包传递（cookie信息例外）即可，
减少了一个步骤，速度会快些。
后加载组件 [页面内容]
如果某个页面内容丰富多彩的话，在浏览器加载显示它时速度就不会很快。使用后加载组件的方法
可以通过延迟加载一些隐藏内容来保证浏览器优先显示初始页面。(onload)
预加载组件 [页面内容]
通过预先加载组建可以充分利用浏览器的空闲时间，并且可以请求未来页面需要的组件：
无条件加载：onload事件一触发，就要马上取回一些特定的组件；
条件预加载：根据用户操作预测用户下一步操作的方向，并据此作预加载；
提前预加载：在将重新设计的站点页面发布前用此法较好。
减少DOM元素数量 [页面内容]
一个重要思路是不要滥用表格table和div。
分割组件到多个域中
只要浏览器缓存为空，下载每个组件需要占用额外的HTTP请求，只有缓存满时才可能不占用。
HTTP/1.1规范中建议浏览器对每一个主机名允许并发现在两个组件。默认状态下，IE和Firefox
都符合这个规范。IE8.0默认允许6个并发请求。
尽量减少HTML标签iframe的使用数 [页面内容]iframe好处：有助于减慢显示第三方标记
和广告内容；是个安全的Sandbox；能并发下载脚本。
iframe坏处：即使iframe内的HTML文档内容为空，消耗也比较高；会阻止页面的onload事件；非语义的。
避免404页面 [页面内容]
缩小cookie [cookie]
cookies信息在Web服务器和浏览器间的HTTP请求头中交换。cookies体积越大，则HTTP请求头交换
的信息体积就大，尽可能降低cookies大小可以把cookies对用户响应时间的影响降到最低程度。
将组件存放在无cookie的域 [cookie]
原因同上
尽力减少对DOM的访问 [Javascript]
缓存曾访问过元素的引用；
先“脱机”更新一个节点，然后再把这个节点添加到DOM树上。避免直接在DOM树上更新节点。
避免用Javascript来修改版面布局。这涉及到大规模的DOM树移动，速度会很慢。
开发智能的时间处理程序 [Javascript]
绑定外围标签，通过冒泡获取事件
用DOMContentLoaded取代onload事件
使用<link>标签导入样式文件，不要使用@import [CSS]
在IE中@import的作用于在页面底部使用<link>效果相同，这样的位置不利于浏览器快速解析生成页面。
避免使用CSS滤镜 [CSS]
优化图片 [图片]
优化CSSsprites [图片]
不要在HTML中缩放图片 [图片]
减小并缓存favicon.ico文件 [图片]
该图标文件会干扰下载顺序
保持组件大小在25K以下 [手机]
iPhone不能缓存超过25K以上的组件。
将组件打包合并到一个Multipart结构的文档中 [手机]