网页设计制作规范

网页设计制作规范

目录

网页设计制作规范 (1)

一、页面设计制作基本要求 (4)

1.文件及目录命名及文档要求 (4)

1.1设置项目文件目录 (4)

1.2项目目录中各文件的命名及要求 (4)

1.3必备文档 (5)

2.页面尺寸 (5)

2.1基本说明 (5)

2.21024×768分辨率 (6)

2.3800×600分辨率 (6)

二、页面设计要求 (6)

1.设计流程 (6)

1.1首页设计 (6)

1.2栏目页设计 (6)

1.3辅助元素设计 (6)

2.页面布局及分层命名 (7)

2.1分层命名要求 (7)

2.2常用页面布局 (7)

3.页面常规布局要求 (8)

3.1文字 (8)

3.2图片 (8)

4.输出 (9)

4.1预览效果 (9)

4.2制作效果 (9)

三、页面制作要求 (10)

1.页面制作基本要求 (10)

1.1页面编码 (10)

1.2页面注释 (10)

1.3页面禁忌 (10)

2.页面结构及命名 (10)

2.1命名规范 (10)

2.2常用页面结构命名 (10)

2.3表单的命名规范： (11)

3.符合SEO的代码规范 (12)

3.1搜索优化 (12)

3.2帧结构 (12)

3.3优化网页代码 (12)

3.4Title设置 (12)

4.样式表使用 (12)

4.1样式表的命名 (12)

4.2样式表制作基本设置 (13)

4.3使用精简样式表： (14)

5.页面调试和浏览器兼容性 (15)

5.1浏览器兼容性说明 (15)

5.2页面调试方法 (16)

一、页面设计制作基本要求

1.文件及目录命名及文档要求

1.1设置项目文件目录

a)相关目录及命名：原则上以英文小写命名，各别可用中文命名

b)另：根据具体项目需要，可以按情况设置，但应在根目录写详细的“项目说明.txt”文档。

c)注：web\images\下面不要放无意义的图片，页面完成后应该将无意义的图片删除。

1.2项目目录中各文件的命名及要求

a)文件命名常规规范：

●用小写英文全称或者中文实际含义的名称

●Web目录中不得出现中文名称

●对于页面初稿和修改，要保留源文件，在修改的时候文件名后加日期，确定文件将日

期删除做为最终文件，切勿删除和覆盖。如：index0709.psd index0710.psd index.psd

b)网页：

●格式：html

●命名：首页(index)，栏目页(该栏目英文全称)

●为保证没有歧义和项目操作方便，命名不要使用中文、中文拼音简介、引文缩写，如

有特殊情况，要写详细的说明文本

c)CSS：

●格式：css

●命名：以项目名称命名，如Vipoo，命名为vipoo.css

●个栏目中的css命名：除延用总的css以外，各栏目如有特殊的样式，可以以栏目名称

命名，并链接到改栏目的页面，如：about.css

●首页因访问量大，一般不采用外部链接的方式调用css，可以写到页面内部，并尽量精

简

d)图片、flash等

●格式：gif，一般用于颜色少的网页定位、布局图片

●格式：jpg，一般用于颜色比较多的照片、广告等大幅图片

●格式：png，一般用于logo和需要用与半透明地方的图片，但在IE6下不支持半透明

●命名：采用小写英文方式，用有实际含义的英文命名，如logo.png, banner.jpg

●命名：采用模块位置类型_模块名称的方式命名，如title_bg.gif, title_list.gif等

●命名：不能采用无意义的名称命名，如123.gif abc.gif等

●命名：为保证图片不被浏览器屏蔽，文件名中不得出现“ad”“gg”等广告词汇

e)文档

●格式：doc，常规文档格式

●格式：txt，用于网站正式文字资料，和一些简短的说明文档。，因为txt文本不带有样

式，不会带入的页面形成垃圾代码，且应用起来不要容易。

●格式：xls，做栏目架构时要应用的表格

●格式：pub，MS Office Publish文件，用于页面模块的规划和布局

●格式：mmap，MindManger文件，多用于思维导图，可以用于网站页面之间逻辑关系

的分析

●格式：mpp，MS Office Project文件，用于制定项目计划

1.3必备文档

a)项目说明：说明项目的具体要求，通过这个文档让项目组成员了解项目的定位、目的。

b)网站框架结构图：用思维导图的形式列出网站各页面及功能之间的关系

c)网站页面模块：用publish画出各栏目页面的具体模块和显示内容

d)网站功能列表：列出网站功能，及每个功能的详细要求，为程序开发提供参考

2.页面尺寸

2.1基本说明

a)页面精度为72dpi

b)页面单位px

c)页面颜色RGB

d)页面尺寸根据分辨率进行调整，目前70%以上的人使用1024×768分片率，页面设计应时

宽度该以此为主

e)页面可视宽度以页面下方不出现横向滚动条为主

f)页面内可视宽度=屏幕分辨率宽度-滚动条宽度(20px)-边框宽度(2px)

g)注：当网页不满一屏的时候，Firefox下面不显示滚动条

2.21024×768分辨率

a)宽度：1002px，满屏，两侧不留空白

b)宽度：960px/950px，两侧留有20px空白。如：https://www.360docs.net/doc/7015840949.html,

c)宽度：760px/778px，两侧可放宽为60px-100px的浮动广告。如：https://www.360docs.net/doc/7015840949.html,，在不放广告

的时候，适用于800×600分辨率

2.3800×600分辨率

a)宽度：778px，满屏，两侧不留空白，

b)宽度：760px，两侧留有19px空白

c)此分辨率两侧一般不放浮动广告

二、页面设计要求

1.设计流程

1.1首页设计

a)模块分析：分析首页功能模块，了解页面结构中的主次

b)参考选择：根据网页要求的颜色，尺寸，风格，选择相似的页面，做参考

c)素材准备：准备网页中的文字、图片素材

d)初步设计：根据模块布局和风格要求，进行设计

e)初步定稿：会诊，提出相应的改进意见

f)最终确认

1.2栏目页设计

a)页面设计：根据首页的风格和个栏目页面的模块设计

b)确认：将重要的页面和进行设计确认

c)不需要设计所有的页面

d)技巧：可以将和首页相同的部分合并图层，以减少文件大小，提高工作效率

1.3辅助元素设计

a)根据页面模块的要求，设计页面中需要使用的背景、图片、标题等配图

b)设计网站运营中需要的广告、banner等

c)技巧：辅助元素单独设计看不出效果，建议以页面内容为背景，在其上制作，会保证设计

效果

2.页面布局及分层命名

2.1分层命名要求

a)为页面中每个单独的模块建立独立的分层目录，并将其中相关的元素链接起来

b)所有分层应该以该元素的真实作用命名，并可以可以用top，bottom，left，right，bg，border

等辅助

c)常用命名：

2.2常用页面布局

a)布局一

b)布局二

c)布局三

3.页面常规布局要求

3.1文字

a)页面中常规文字：

●12px；宋体；none(无效果)

●字间距：默认

●行间距：18px(150%)

●颜色：采用216色的安全色，及RGB值均取00,33,66,99,CC,FF，如FFFFFF，FF0000，

336699等，如有特殊需要可以使用其他颜色

b)标题文字：

●在常规文字上可放大，加粗

●常用字体大小别为12px, 14 px,18 px,24 px,30 px,36 px

c)大篇幅文章：

●字体大小一般为14px；

●行间距140%(16px-18px)

d)常用英文文字

●字体：Arial, Times New Roman, 大小：11px，none

●字体：04_08，大小：6px，none

e)小中文字

●细明体、Mingliu、PMingliu，11px，none

f)其他广告文字

●根据设计效果，可以任意采用其他字体格式

●要将字体锐化，避免出现锯齿

3.2图片

a)边框

●制作图片边框使用“Layer Style”\ stroke \ inside \ 模式

●尽量不使用圆角边框，如果要使用圆角，要注意边框内外边距和内容的距离

b)背景

●背景图片，要单独放置，不能与其它图层合并

4.输出

4.1预览效果

a)采用jpg格式，为保证质量，输出质量设置为10。

4.2制作效果

a)页面辅助图片，如背景、边角等，输出gif格式，且不能带有任何文字

b)页面广告图片，输入jpg格式

c)需要透明和半透明的图片：png格式(半透明在IE6下不支持)

d)全透明背景图片：

●gif格式

●建议使用ctrl+左键，选中要保存区域，再slect \ modify \ extend 1px-4px，并用crtl+shift+c

复制，将边缘的背景复制进去，保证图片不会出现锯齿

e)需要辅助Flash的文件，输出png格式

三、页面制作要求

1.页面制作基本要求

1.1页面编码

a)采用UTF-8格式

1.2页面注释

a)页面各模块之间要用下面的格式进行说明，便于日后维护和程序开发

1.3页面禁忌

a)不得出现标签

b)加粗的文字不使用而使用

c)斜体问题不使用，而使用

d)为每个标签设置增加结束符号“/”

2.页面结构及命名

2.1命名规范

a)命名全部使用小写字母，如果需要多个单词，单词间使用“-”分隔，比如user-list

b)为每一个模块设置id，且以英文全称命名，可以在样式表中设置布局，且不能重复

c)为需要的样式增加class，并且可以重复使用

2.2常用页面结构命名

a)常用代码结构

●div：主要用于布局，分割页面的结构

●ul/ol：用于无序/有序列表

●dl,dt,dd：当页面中出现第一行为类似标题/简述，然后下面为详细描述的内容时应该使

用该标签

●对于dl、dt、dd的设置建议不要用高度（height）和行高（line-height），在FF会产生

错位，由于IE和FF是否自适应造成，建议使用dt、dd的padding属性来定位！

●h1-h6：标题

●h1位最重要的标题

●h1-h6 根据重要性依次递减

●span：没有特殊的意义，可以用作排版的辅助，例如

b)常用模块命名：

●头：header

●内容：content/container

●尾：footer

●导航：nav

●侧栏：sidebar

●栏目：column

●页面外围控制整体布局宽度：wrapper

●左右中：left right center

c)常用页面命名

●首页index

●关于我们aboutus

●投票poll

●帮助help

●站点地图sitemap

2.3表单的命名规范：

a)label：为了使你的表单更有亲和力而且还能辅助表单排版的好东西

3.符合SEO的代码规范

3.1搜索优化

a)页面中的所有图片(背景图除外)要增加“alt”属性，对图片进行说明。

b)页面中的所有链接要增加“title”属性，对链接进行说明

c)栏目导航最好采用文本形式制作，如必须使用图片的，要为图片增加“alt”属性，并为链

接增加“title”属性作为说明，如果导航采用flash制作，需要另外增加导航，保证搜索引擎的检索

3.2帧结构

a)因为有些浏览器不支持iframe，所以尽量避免使用该结构

3.3优化网页代码

a)简化CSS

b)简化html

3.4Title设置

a)网页的title在SEO优化中占有重要位置，title示例代码如下：

●

●

●

●

b)本例是一个较为规范的title写法，title通常的命名方式应该是“当前网页主题_栏目名称_

网站名称”

4.样式表使用

4.1样式表的命名

a)为了便于网站的更新和维护，样式表命名不能用无意义的方式命名

b)样式表的第一个字符不能是数字，只能是字母

c)一般命名采用模块英文名称(拼音)+位置+特定属性的方式，中间可以用“-”连接，不能用

“_”和空格。

d)页面中使用id标记的，采用“#name”形式，页面中使用class标记的，采用“.name形式”

e)CSS名称区分大小写，但不建议使用大写字母，最好全部使用小写字符

f)CSS中各属性不区分大小写

g)样式表的最后一个参数后面必须加“;”

在大多数浏览器中“;”都可以省略，但为了日后的修改和兼容所有浏览器，要按此操作

4.2样式表制作基本设置

a)CSS编写顺序，首先是body然后是全局，最后按照页面结构从上到下，从左到右的顺序，

并且对每一部分要按照下面的模式进行说明：

b)设置body属性：

c)为常用标记整体设置属性，保证后面制作过程中，不用重复定义

d) 字体属性设置

● 按照字体的重要性为h1-h6进行设置，一般要设置字体的大小和字体，而不定义字体颜色。

●

字体颜色单独定义，在设置字体的颜色时，增加字体粗细等参数

4.3 使用精简样式表：

a)

CSS 中，margin, padding, border 等属性，建议整合在一起写，当值为0px 的时候，单位可以不要。 ●

如果提供全部四个参数值，将按上(top)－右(right)－下(bottom)－左(left)的顺序作用于四边。如：

● 如果只提供一个，将用于全部的四边。

●

如果提供两个，第一个用于上－下，第二个用于左－右。

●如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。

b)CSS中，font, border, background等属性，不同的属性代表不同的含义，但可以和在一起写。

●如：border属性

c)CSS中，颜色(color)属性，在RGB颜色为#AABBCC的时候，可以简写为#ABC。

●如：

5.页面调试和浏览器兼容性

5.1浏览器兼容性说明

a)同一个网页，因为浏览器的标准不同，因此在IE6, IE7,firefox,opera中显示的效果略有不同

b)但因大多数用户使用的是IE6，所以页面的表现样式最终应该以IE6为准

5.2页面调试方法

a)使用DW制作页面，写相关代码，保存在Firefox中调试页面结构

●Firefox的规范相对比较标准，在这个浏览器下做好的页面，在其他浏览器中基本显示

没有问题

●为Firefox安装Firebug插件，调试CSS

b)制作好的页面，在IE6，和IE7中分别查看，保证页面结构没有破坏，如果略有不同，请以

IE6为最终标准

●使用Firefox浏览器的用户比例大约在1.2％左右，98.5％的用户使用IE浏览器（其中

IE6占96％，有少量用户为IE5和IE7)，Opera、Netscape等其他浏览器用累计仅占0.2％。