页面制作标准指南V1.0
页面制作标准指南V1.0 (1)
前言 (5)
第1部分命名规范 (5)
1.1文件夹命名规范 (5)
1.1.1英文命名与连写方式 (5)
1.1.2目录与路径 (5)
1.1.3文件夹的设置 (5)
1.1.4命名意义 (7)
1.1.5继承关系与命名 (9)
1.2页面命名规范 (9)
1.2.1默认文件 (9)
1.2.2路径替换文件地址 (9)
1.2.3命名原则及规范 (9)
1.2.4连续文件命名 (9)
第2部分基本架构 (10)
2.1页面基本构架 (10)
2.2DTD (10)
2.2.1HTML 4.01 无限定 (10)
2.2.2HTML 4.01 Transitional l(过渡型) (10)
2.2.3XHTML 1.0 Strict(严格) (10)
2.2.4XHTML 1.0 Transitional(过渡型) (10)
2.2.5XHTML 1.0 Frameset(框架) (10)
2.3文档注释 (11)
2.3.1定义与位置 (11)
2.3.2文档注释范例 (11)
2.3.3文档注释条目 (11)
2.4书写规范 (12)
2.4.1永远使用小写字母,属性使用双引号 (12)
2.4.2关闭所有的元素 (12)
2.4.3给所有属性赋一个值 (12)
2.4.4不要使用被排斥的元素 (12)
2.4.5把所有<和&特殊符号用编码表示 (14)
2.4.6标记都必须合理嵌套 (14)
2.4.7严禁在注释内容中使“--” (14)
2.5框架 (14)
第3部分title (15)
3.1“首页”home标题 (15)
3.1.1简单式 (15)
3.1.2关键字式 (15)
3.1.3普通式 (15)
3.2“栏目”column标题 (15)
3.3“内页”inner标题 (15)
3.3.1简单式 (15)
3.3.1完全式 (16)
第4部分meta (16)
4.1 页面编码 (16)
4.1.1自然语言 (16)
4.1.2编码格式 (16)
4.2author (17)
4.3copyright (17)
4.4 description (17)
4.5keywords (17)
第5部分link (17)
5.1网站ico (17)
5.2外联样式表 (18)
5.2.1普通外联 (18)
5.2.2外联hack (18)
第6部分布局 (18)
6.1表格布局 (18)
6.2混合布局 (18)
6.3流式布局 (18)
6.3标记结构化布局 (18)
第7部分正文 (18)
7.1标题段落 (18)
7.1.1标题 (18)
7.1.2段落 (18)
7.2列表 (19)
7.2.1有序列表 (19)
7.2.2无序列表 (19)
7.2.3定义列表 (19)
7.3数据表格 (19)
7.4图片 (20)
7.5多媒体 (20)
7.5.1在线媒体播放--Google Video and YouTube (20)
7.5.2Windows Media Player 文件 (21)
7.5.3QuickTime movies (21)
7.5.4合理使用FLASH动画 (22)
7.5.5版权标志 (22)
第8部分超级连接 (23)
8.1无“死连接” (23)
8.2连接样式 (23)
8.3弹出窗口 (23)
8.3.1JavaScript弹出 (23)
8.3.2非_blank弹出 (24)
8.4页面锚点 (24)
8.5亲和连接 (24)
8.5.1设置accesskey (24)
8.5.2连接的title (24)
8.5.3跳过导航 (25)
8.5.4tab顺序 (25)
第9部分样式表 (25)
9.1正确使用字体 (25)
9.2书写规范 (25)
9.1.1选择器命名 (25)
9.2.2编写顺序 (26)
9.2.3 LoVe/Hate原则 (26)
9.2.4正确使用缩写 (26)
9.3样式表分类 (28)
9.3.1分类方法一 (28)
9.3.2分类方法二 (28)
9.4打印样式表 (28)
第10部分内容表现分离 (28)
10.1图文替换 (28)
10.1.1方法FIR (28)
10.1.2方法Phark (29)
10.1.3方法Gilder/Levin (29)
10.2填充图片检查 (30)
10.3裸体页面检查 (30)
第11部分可访问性 (30)
11.1兼容IE5+ 800~1024 (30)
11.2兼容IE5+ FF 800~1400 (30)
11.3全兼容浏览器与分辨率 (31)
11.4窗口处理 (31)
11.5正文大小可控制 (31)
11.6亲和表单 (31)
11.6.1标记 (31)
11.6.2分组与图例说明 (32)
11.6.3选项分组 (32)
11.6.4导航域 (33)
11.7屏蔽检查 (33)
第12部分W3C标准 (33)
12.1(X)HTML校验 (33)
12.2CSS校验 (33)
12.3W AI校验 (33)
前言
以下规范对不同级别的架构师要求不同,请参考《架构师评分表》进行区分。
第1部分命名规范
1.1文件夹命名规范
1.1.1英文命名与连写方式
站点与栏目文件夹统一使用英文命名;
英文采用单词连写方式A:单词首字母大写,其他字母小写;
英文采用单词连写方式B:单词全部小写,单词之间以下划线连接;
连写方式A与连写方式B禁止混用;
杜绝使用汉语拼音或汉语拼音缩写进行文件夹命名;
正确用法
“产品列表”命名“ProductsList””products_list”
“产品列表”命名“chanpinliebiao”“CPLB””productslist””Productslist”
1.1.2目录与路径
1.1.
2.1根目录
站点、子站点、栏目所在的文件夹均称作“根目录”。
注意:根目录下只准放置ico文件和网站Logo等必须放置在根目录下才能生效的文件,其他文件禁止放置在根目录下;
1.1.
2.2路径
定义:从某一文件夹到“根目录”的倒推排列。
例如图1.1.3.2中“Style01”的路径为“/根目录/ Styles/ Style01”
1.1.
2.3父路径
定义:上一级文件夹的“路径”。
例如图1.1.3.2中“Style01”的父路径为“/根目录/ Styles”
1.1.3文件夹的设置
1.1.3.1文件夹名称及含义
Styles
风格,用来存放其“父路径”应用的多种风格,适用于DIV流式布局。
“Style01”
某一风格实例名称,例如“Grandeur”即一种叫做“华丽”的风格,也可以是“清新”“春天”。用来存放于该风格对应的CSS文件与图片。
Media
多媒体,用来存放其“父路径”应用的多媒体文件。
Image
图片,用来存放其“父路径”应用的图片文件。其父路径一旦应用图片,必须使用Image文件夹。Includes
包含,用来存放其“父路径”应用框架时的包含文件,适用于框架布局。
“Include01”
某包含实例名称,例如“PageTop”是一个被包含的头部文件。用来存放于该包含对应的所有文件。Layout
传统布局,用来存放其“父路径”应用的传统布局相关文件,适用于表格布局和混合布局。
File
文件,用来存放其“父路径”应用的非WEB文件。
Upload
上传,用来存放其“父路径”应用的已上传文件。
Ad
广告,用来存放其“父路径”应用的广告图片、动画文件。
Js
脚本,用来存放其“父路径”应用的JavaScript文件。
Gif ,Jpg, Png
图片格式,用来存放其“父路径”(必须为Image)应用的格式分类,当Image路径下的文件超过15个,且包含两种以上格式时使用。
Sound ,Movie
多媒体类型,用来存放其“父路径”(必须为Media)应用的类型分类,当Media路径下的文件超过15个,且包含两种以上格式时使用。
Mp3,Wav,Midi,Rm
音频类型,用来存放其“父路径”(必须为Sound)应用的音频分类,当Sound路径下的文件超过15个,且包含两种以上格式时使用。
Text
文本,用来存放其“父路径”(必须为File)应用的文件分类,当File路径下出现文本文件格式时使用。Download
下载,用来存放其“父路径”(必须为File)应用的文件分类,当File路径下出现下载文件格式时使用。Doc,Ppt,Pdf
文本类型,用来存放其“父路径”(必须为Text)应用的文本分类,当Text路径下的文件超过15个,且包含两种以上格式时使用。
1.1.3.2树状文件夹图
网站的后台文件夹采用类似图1.1.3.2的树状排列;
1.1.4命名意义
网站导航site map
公司简介Profile /Company 公司设备Equipment
公司荣誉Glories 企业文化Culture
产品展示Product
资质认证certification 企业规模Scale
营销网络Sales Network
组织机构Organization
合作加盟Join in Cooperation
技术力量Technology
经理致辞Manager’s oration
发展历程Development history 工程案例Engineering Projects 业务范围Business Scope
分支机构Branches
供求信息Supply & Demand
经营理念Operation Principle
产品销售Sales
联系我们Contact Us
信息发布Information
返回首页Homepage
产品定购Order
分类浏览Browse by category
电子商务E-Business
公司实力Strength
版权所有Copy right
友情连结Hot link
应用领域Application Fields
人力资源Human Resource HR 领导致辞Leader’s oration
企业资质Enterprise qualification 行业新闻Trade news
行业动态Trends
客户留言Customer Message
客户服务Customer Service
新闻动态News & Trends
公司名称Company Name
销售热线Sales Hot-line
联系人Contact Person
您的要求Your requirements
建设中In construction
证书Certificate
地址Add
邮编Zip code
电话Tel 传真Fax
产品名称Product Name
产品说明Description
价格Price
品牌Brand
规格Specification
尺寸Size
生产厂家MANUFACUTURER Manufacturer 型号Model
产品标号Item No.
技术指标Technique Data
产品描述Description
产地Production Place
销售信息Sales Information
用途Application
论坛Forum
在线订购On-line order
招商Enterprise-establishing
招标Bid inviting
综述General
业绩Achievements
招聘Join Us
求贤纳士Join Us
大事Great Event
动态Trends
服务Service
投资Investment
行业Industry
规划Programming
环境Environment
发送Delivery
提交Submit
重写Reset
登录Enter
注册Login
中国企业网技术支持Powered by https://www.wendangku.net/doc/5516757134.html, 社区Community
业务介绍Business introduction
在线调查 Online inquiry Inquiry 下载中心 Download 会员登陆 Member Entrance 意见反馈 Feedback 常见问题 FAQ
中心概况 General Profile 教育培训 Education & Training 游乐园 amusement park 在线交流 Online communication 专题报道 Special report
1.1.5继承关系与命名
子站点根目录/栏目根目录的命名参考1.1.1.4
1.2页面命名规范
1.2.1默认文件
Index+扩展名 Default+扩展名
以上两种文件通常充当默认文件,扩展名可以是.htm .html .shtml .asp .aspx .php .jsp 注意:Index 与Default 不可混用
1.2.2路径替换文件地址
当使用默认文件时,可以省略文件名称,以路径替换文件地址.
例如某栏目htm 文件URL 为https://www.wendangku.net/doc/5516757134.html,/clomn/ index.htm 则此栏目地址可以为https://www.wendangku.net/doc/5516757134.html,/clomn
1.2.3命名原则及规范
参见1.1.中关于文件夹命名的相关论述
1.2.4连续文件命名
当出现系列文件时,文件采用“主文件名+序号+扩展名”的方式进行排序; 序号采用0补位记数,01.02.03.04.05.06.07.08.09.10 序号前可用下划线连接,也可省略下划线。 正确:homeset_01.jpg
正确
:homeset01.jpg
第2部分基本架构
2.1页面基本构架
注意:
基本构架中的标记在同一页只能出现一次;
以上标记缺一不可;
2.2DTD
2.2.1HTML 4.01 无限定
2.2.2HTML 4.01 Transitional l(过渡型)
2.2.3XHTML 1.0 Strict(严格)
2.2.4XHTML 1.0 Transitional(过渡型)
2.2.5XHTML 1.0 Frameset(框架)
2.3文档注释
2.3.1定义与位置
文档注释作为网站页面的生产标识具是重要的识别信息,包含页面的制作信息和最后修改日期;文档注释的编写位置为紧接标记之前,具体用法参见2.3.2
2.3.2文档注释范例
2.3.3文档注释条目
URL
当前页面的实际URL地址,即网站上线完成后的输入浏览器地址;
DTD
当前页面的DTD类型;
Design
架构师姓名,采用汉语拼音或英文;
Skill
架构师技能级别,A为“初级”AP为“中级”AX为“高级”;
Level
当前页面的级别,good为“优秀”,perfect为“完美”,excellence为“卓越”;
Last
页面最后的修改日期与时间;
Title Type
页面的TITLE类型,home为“首页”,column为“栏目”,inner为“内页”;
Frames
页面是否使用了框架结构
Power By
技术支持信息,统一为https://www.wendangku.net/doc/5516757134.html,;
2.4书写规范
2.4.1永远使用小写字母,属性使用双引号
所有元素和属性的名字都必须使用小写,所有属性值必须使用双引号。
2.4.2关闭所有的元素
在HTML中一些元素没有必要被关闭。当下一个元素开始的时候,上一个元素就自动被关闭。XHTML中是不允许这样的。所有元素都必须被关闭,即使其中没有内容(如)。
正确:
正确:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
正确:
正确:
2.4.3给所有属性赋一个值
XHTML规定所有属性都必须有一个值,没有值的就重复本身:
正确:
2.4.4不要使用被排斥的元素
一些元素和属性在HTML 4.01 Transitional和XHTML 1.0 Transitional是被允许的,而在XHTML 1.0 Strict 下则不被支持(还有in HTML 4.01 Strict)。比如、
以下是被排斥的“私有标记”,任何时候禁止使用:
可以用来产生粗体元素。使用strong(意味着强烈强调)代替更有意义,或者用CSS来完成这项工作,增
加font-weight: bold的规则,用来表明粗体元素。
可以用来产生斜体元素。使用em(表示强调),这也更有意义。或者可以用CSS来表现斜体:font-style: italic
可以产生更大字体。使用标题(如h1,h2等,当文本本来就是一个标题时)代替,增加了意义,或简单地在CSS中使用font-size属性,获取更多的控制权。
可以产生小字体。CSS(font-size)再一次取得更多的控制权。
可用用来展现一条水平线。在CSS中用hr设计很少见,CSS的border-top,border-bottom属性或者朴素的图像做这个效果会更好。
可以为元素产生下划线。它提醒着下划线文本还很多连接关联。这就是这个标签死了很久的原因——你不必给非连接文本下划线。
可以用来居中在元素内部的元素。CSS属性text-align允许不仅仅是center,还有left、right和justify。