网页设计规范.doc
1、网站制作 Apple QQ:345374621 网页设计规范参考 总论 2 一、目 录 结 构 规 范 2 1. 网站目录划分 2 2. 多级目录 2 3. 目录、文件的命名规范 2 二、文 件 命 名 原 则 2 1. 命名原则的指导思想 2 2. 路径/文件名设定 3 3. 各路径下的开始文件 3 4. html 文件的命名原则 3 5. 图片的命名原则 3 三、一 般 原 则 4 1. 表格问题 4 2. 首行缩进 4 3.
2、 图片 4 4. 字号 4 5. 中英文混排时 4 6. 行距 4 7. 网站中的路径 5 四、代 码 编 写 规 范 5 1. 首页head区代码规范 5 2. 页面内容部分代码规范 5 3. CSS 文件的格式样例代码 6 4. CSS的命名规范及部分简写说明 6 5. CSS和JS尽量采取外部调用 7 总论 参考网上的一些文章和部分门户网站规范，结合用户浏览习惯以及实际策划、设计、使用中的经验，制订了《网站设计规范参考》，本规范既是一个开发规范，也是一个脚本语言参考，本规范并不是一个一成不变的必须严格遵守的条文，特殊情况下要灵活运用，做一定
3、的变通。但是，请大家千万不要随意更改规范。如果有任何问题，请及时与我联系，我会及时更改本规范的相关代码样例和文档。 一、目 录 结 构 规 范 1. 网站目录划分 在网站根目录中开设images 、js 、css、temp子目录 ☆ images目录中放不同栏目的页面都要用到的公共图片，例如公司的标志、banner 条、菜单、按钮等等； ☆ css 子目录中放css文件，如果站点模板多尽量分成多个css文件调用； ☆ js 子目录中一般放javascript文件； ☆ temp 子目录放客户提供的各种文字图片等等原始资料。temp 目录中的文件往往会比较多，建议以时间为名称开
4、设目录，将客户陆续提供的资料归类整理。 ☆ 广告、交换链接、banner等图片保存到images下adv目录 2. 多级目录 在根目录中原则上应该按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images 和media 的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。 3. 目录、文件的命名规范 除非有特殊情况，目录、文件的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录的命名请尽量以英文为指导，尽量避免用拼音命名。 二、文 件 命 名 原 则
5、 1. 命名原则的指导思想 命名原则的指导思想是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。 2. 路径/文件名设定 路径/文件名称需与栏目菜单名称具有相关性。一律采用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录的命名请尽量以英文翻译为优先，尽量避免使用拼音作为目录名称 3. 各路径下的开始文件 各路径下的开始文件，命名为index.* 静态文件为index.html，动态文件为 index.asp,ind
6、ex.aspx,index.php,index.jsp 4. html 文件的命名原则 下面以“新闻”（包含“国内新闻”和“国际新闻”）这个栏目来说明html 文件的命名原则 ： ☆ 在根目录下开设news目 录 ☆ 第一条缺省新闻取名index.htm ☆ 所有属于“国内新闻”的新闻依次取名为：china_1.htm, china_2.htm, … ☆ 所有属于“国际新闻”的新闻依次取名为：internation_1.htm, internation _2.htm, … ☆ 如果文件的数量是两位数，请将前九个文件命名为：china_01.htm, china_02.htm 以保
7、证所有的文件能够在文件夹中正确排序。 ☆需定期更新的页面文件或文本采用：名称缩写＋(年份)＋月份＋日期＋序号，如： news081508.* 5. 图片的命名原则 ☆ 名称分为头尾两两部分，用下划线隔开。 ☆ 头部分表示此图片的大类性质，例如广告、标志、菜单、按钮等等。 ☆ 一般来说: 放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner 标志性的图片我们取名为：logo 在页面上位置不固定并且带有链接的小图片我们取名为button 在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu 装饰用的照片我们取名：pic 不带链接表示标题的图片我们
8、取名：title
依照此原则类推。
☆ 尾部分用来表示图片的具体含义。
☆ 样例如下：banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg pic_hill.jpg
三、一 般 原 则
1. 表格问题
在排布表格之前，请大家一定要好好思考一个最佳的方案，表格的嵌套尽量控制在三层以内，并且应该尽量避免
9、所有的内容都嵌套在这个大表格之内，因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请使用
标记，以便能够使这个大表格分块显示。 2. 首行缩进 排版中我们经常会遇到需要进行首行缩进的处理，不要使用空格或者全角空格来达到效果，规范的做法是在样式表中定义 p { text-indent: 2em; } 然后给每一段加上标记，注意，请不要省略
结束标记 。 3. 图片 采用gif,jpg格式，每幅图片10、要有本图片的说明文字(alt=””)，这样如果图片不能正常显示，也可知道图片处代表什么意思。原则上，禁止用 来人为干预图片显示的尺寸，而且建议
标签中不要带上width 和height 两个属性，这是因为制作过程中，图片往往需要反复的修改，这样可以避免人为干预图片显示的尺寸，尽可能的发挥浏览器自身的功能；但是这样的一个副作用是当网页还未加载图片时，不会留出图片的站位大小，可能会造成网页在加载过程中抖动（如果图片是插在一个固定大小的表格里的，不会有这个现象），尤其是当图片的尺寸较大时，这种现象会很明显，所以当预料到这种会明显导致网页抖动的
11、情况会发生时，请大家务必在最后给 附上 width 和 height 属性。
4. 字号
所有的字号都应该用样式表来实现，尽量不要在页面中出现 标记。
5. 中英文混排时
中英文混排时，我们尽可能的将英文和数字定义为verdana 和arial 两种字体。
6. 行距
建议用百分比来定义，常用的两个行距的值是line-height:140%到180%之间。
四、代 码 编 写 规 范
我们应该有一个代码整体风格一致的概念，不同时期编写的代码风格应保持一致，以及同一个工作组中不同的开发人员编写的脚本风格保持一致以便随时查找、修改。
1. 首
| 缩进两个半角空格， | 中如果还有嵌套的表格，
|
