文档目录结构
网站前端开发文档目录结构
图片文件夹
/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结构的文档中 [手机]
分享到:
相关推荐
网页设计基础知识第一部分 网页设计基础知识是网站建设的基础,它涵盖了网站的设计、建设和优化等方面的知识。本章主要介绍网页设计的基础知识,包括网页的基本概念、网站的基本构成要素、网站建设的基本流程、网页...
"《网页设计与制作》讲义-专题1-网页设计基础知识" 《网页设计与制作》讲义-专题1-网页设计基础知识是网页设计与制作的基础知识,涵盖了网页设计的基本概念、网站的概念、主页的概念、网页基本构成要素等内容。 1....
网页设计基础知识涵盖网络基础知识、网页制作工具和编程语言等内容,对于初学者来说是构建网站的入门必修。本章主要讲解了以下几个知识点: 1. **网络基础知识**: - **Internet概念**:Internet是由"交互"和"网络...
"HTML网页设计基础知识学习专题培训课件" 本资源摘要信息是关于HTML网页设计基础知识学习的专题培训课件,旨在为学习者提供基础知识和实践操作指导。该课件涵盖了HTML网页设计的基本概念、标记的构成、标记的表示...
网页设计基础知识是指在网页设计中所需要的基本概念和技术。它涉及到网页的定义、网页的组成元素、网页的表现形式、网页设计的基本要素等方面。 1. 网页的定义 网页是指存放在网络服务器上的一个完整信息集合体,它...
网页设计基础知识 网页设计基础知识是指在设计和制作网页时所需掌握的基本概念和技术。以下是网页设计基础知识的相关知识点: 1. 网页和网站的概念 网页是由HTML(超级文本标识语言)或者其他语言编写的,通过IE...
响应式网页设计基础知识 响应式网页设计是指根据用户的设备和屏幕尺寸来调整网页的布局和样式,以提供最佳的用户体验。响应式网页设计的目标是使网页能够适应各种设备和屏幕尺寸,包括手机、平板电脑、桌面设备、...
这份"网页设计基础知识 老师的课件"提供了一个全面的学习平台,帮助初学者掌握网页制作的基本概念和技术。 首先,我们要了解网页制作的核心——HTML(HyperText Markup Language)。HTML是网页内容的基础,它定义了...
"学校教师课件 网页设计基础知识.rar" 提供的资源旨在帮助学生和教师深入理解这一主题,涵盖了HTML(超文本标记语言)和Dreamweaver等关键工具的使用。 HTML(HyperText Markup Language)是网页开发的基础,是一种...
网页设计基础知识.pptx
网页设计基础知识.txt
网页设计及制作讲义-专题1网页设计基础知识.doc
HTML(HyperText Markup Language)是网页...掌握这些基础HTML知识后,网页设计师可以创建基本的静态网页。随着对CSS和JavaScript的深入学习,可以实现更复杂的布局、动态效果和交互性,从而提升网页的设计和用户体验。
《网页设计与制作》讲义-专题1-网页设计基础知识.doc
网页设计是构建互联网内容的基础,它涉及到多个方面的知识,包括网页构成元素、网页的本质、颜色搭配、...以上就是网页设计的基础知识,涵盖了从元素构成到技术实现的各个方面,对于理解和创建有效的网页设计至关重要。
网页设计基础知识点总结 在本篇文章中,我们将总结网页设计的基础知识点,从HTML基本标签到网页设计的基本概念。通过本篇文章,读者将了解网页设计的基本要素和设计技巧。 一、HTML基本标签 * 标题标签:~,表示6...
【动态网页设计基础教程课件】是一份全面介绍ASP动态网页设计基础知识的教育资源,适合教师在教学中使用,也适合初学者自学。这份教程涵盖了以下几个关键知识点: 1. **HTML语言基础**:HTML(HyperText Markup ...