web标准页面制作规范.ppt

Web标准页面制作规范,目录,文件目录命名规范HTML文件命名规范HTML代码规范图片制作规范CSS编写规范,文件目录命名规范,文件目录命名原则以最少的层次提供最清晰简便的访问结构，并能够使所有项目参与者清晰理解和记忆每一个文件目录的意义，从而可以更方便的查找、修改、移植等管理操作，提高工作效率。文件目录名称统一用小写的英文单词，长度不超过20个字符。如果需要加数字以区分页面文件，可以在单词后面添加数字，但是禁止用数字开头、禁止用中文字符、禁止用特殊字符作为文件目录的名称。文件目录名称的命名要与所定义的内容语义接近，字母要小写，需要两个以上单词表达时，第二个单词首字母大写，不要超过四个单词，如果单词过长，取其前三个字母。根目录一般只存放index.htm以及其他必须的系统文件；每个主要栏目开设一个相应的独立目录；以栏目名称英文单词或单词缩写命名；例如：根目录下的images目录用于存放各页面都要使用的所有图片；根目录下的javascript目录存放所有JS脚本文件；所有CSS文件存放在根目录下css目录；等等。,目录结构命名规范,文件目录命名原则清晰的站点目录结构方便文件的维护和管理，同时对增加搜索引擎的友好度和移植也有着重要的影响。例如：项目根目录下Style文件夹css样式文件夹，images文件夹，icon文件夹名，js文件夹。,Style文件夹内文件命名项目静态页面命名项目根目录下项目名称（不可以用中文）页面.html文件（不可以用中文）,目录结构命名参考列表,HTML文件命名规范,HTML文件命名规范如下：文件名要以最少的字母达到最容易理解的意义，尽量按单词的英语翻译为名称。如help.html（帮助中心页面）文件名称应当统一使用小写的英文字母、数字组合，长度不超过20个字符。禁止使用英文和中文拼音混搭；禁止用数字开头、禁止用中文字符、禁止用特殊字符作为文件的名称。登录页文件名：login.html，首页文件名：index.html，二级页文件：name.html多个同类型文件使用英文字母加下划线扩展名。例如：message.html；message_add.html,HTML命名参考列表,HTML代码规范,DOCTYPE文档声明标准代码要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；一个正确的DOCTYPE，你的标识和CSS才会完美生效。DOCTYPE声明必须放在每一个XHTML文档最顶部，在所有代码和标识之上。XHTML 1.0 提供了三种DTD声明可供选择：严格型：称之为严格型，这是最理性的文档类型，在往后的日子里会逐步普及。目前暂不推荐使用。DTD(XHTML 1.0 Strict)过渡型：现在的站点基本用这种，对于大多数接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。框架型：专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。DTD(XHTML 1.0 Frameset)。,HTML代码规范,CSS样式表定义规范CSS文件引用标准代码：除特殊的css样式之外（如”display:none”），其他所有的样式表应当编写在外部css样式表中；禁止使用style来单独定义页面的样式；JavaScript脚本定义规范脚本引用方式脚本引用标准代码：为了减小页面的加载负担，除特殊的页面效果需要之外，其他所有的JS脚本都应当编写在外部js文件中；,HTML代码规范,meta标签描述语言编码声明:为了被浏览器正确解释和通过W3C代码校验，XHTML文档必须声明它所使用的编码语言；统一规定使用：网页描述设置描述网页的内容概况，利于搜索引擎检索信息，建议不要超过30到35个字符。如：搜索关键字设置描述网页的“关键词”，利于搜索引擎检索信息，建议不要重复和堆砌关键词。如：,HTML代码规范,Title代码规范对于web软件界面页面标题，应当采用软件项目名称作为标题标签，如：edus教务管理系统标签和标签属性属性名称必须小写HTML要求所有的标签必须使用小写。例如：必须写成，必须写成。在标签中编写属性，必须使用小写，正确的写法是：，不允许使用CLASS或Class这样的形式。属性值必须使用双引号在HTML代码中，必须使用双引号来填写属性值，以免引发不必要的页面问题，正确的写法是：、不允许使用、这样的形式,HTML代码规范,不允许使用属性简写在HTML代码中不允许使用简写属性，必须使用完整的写法，正确的写法：不允许使用这样简写的形式。必须使用结束标签页面中如果有开始标签，就必须有结束标签，例如：如果使用img或 br、hr、input这样的单体标签，那么必须使用空格加正斜线作为结束，例如：,HTML代码规范,必须设置图片的alt属性alt属性指定了当图片不能显示的时候就显示供替换文本，这样做对使用不同页面的浏览器的用户来说非常有帮助，而且对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。正确的写法：所有的特殊符号编码化，不是标签的一部分，必须被编码为,HTML代码规范,页面中主要的区快加上注释由于浏览器的兼容性对XHTML页面的解析不同，过多的注释会造成一些页面错乱的问题；因此在页面主要区块前加注释。如：标签必须合理嵌套因为XHTML要求有严谨的结构，因此所有的标记都必须按合理顺序嵌套。合理的嵌套格式：不合理嵌套格式：内联元素标签不可以嵌套块元素标签，如：必须使用统一的后缀为了统一管理，静态页面必须使用统一的页面后缀.html。例如：index.html。（index.html和index.htm文件两个不同的文件）,HTML代码规范,正确使用HTML标签定义页面内容,HTML代码规范,Table标签定义规范避免嵌套过多的表格，嵌套尽量不要超过3层。对于不可避免的表格嵌套，每级table以一个“TAB”键缩进，确保代码层次分明；建议不要采用thead、tfoot 以及 tbody 元素。表格的样式应当统一使用css定义；表格的填充（cellpadding）、间距（cellspacing）属于内置属性，无法用css定义控制；表格的宽度（width）避免使用数值控制，应当用百分比值来控制，以方便UI的制作修改和界面的升级拓展；表格线的是通过设置表格的属性参数填充（cellpadding）、间距（cellspacing）来实现表格线的粗细宽度；然后分别定义表格的背景色和表格列的背景色来实现表格线颜色；,HTML代码规范,页面宽度的设定采用百分比定义页面宽度代码格式：例：width：100%；解释说明：采用%百分比设定页面宽度时，可以随着浏览器宽度的改变而改变。在制作过程中一定要考虑好页面内容的表现，要做到内容在不同宽度浏览器中显示时布局要整齐、内容排版比例协调。采用固定像素定义页面宽度代码格式：例：width：1004px；解释说明：采用固定值设定页面宽度时，页面不会随着浏览器宽度的改变而改变。,图片制作规范,图片命名规范名称为英文单词，如果需要加数字表达的，可以在单词或拼音后面添加数字，但是禁止用数字开头、禁止用中文字符、禁止用特殊字符做为文件的名称。图片文件名称的命名要与所定义的内容语义接近，字母要小写，需要两个以上单词表达时，用下划线分开两个单词，不要超过三个单词，如果单词过长，取其前三个字母。图片名称分为头尾两部分，中间用下划线隔开。头部分表示此图片的大类性质。例如：放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner；标志性的图片我们取名为：logo；在页面上位置不固定并且带有链接的小图片我们取名为button；在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu；装饰用的照片我们取名：pic；不带链接表示标题的图片我们取名：title依照此原则类推。尾部分用来表示图片的具体含义，用英文字母表示。例如：banner_sina.gif menu_aboutus.gif menu_job.gif logo_police.gif logo_national.gif pic._people.jpg pic_hill.jpg.,CSS文件命名规范,CSS文件命名规范CSS文件名称统一用小字的英文单词，长度不超过20个字符。如果需要加数字和下划线以区分页面文件，可以在单词后面添加数字，但是禁止用数字开头、禁止用中文字符、禁止用特殊字符作为文件的名称CSS文件名称的命名要与所定义的内容语义接近，字母要小写，需要两个以上单词表达时，第二个单词首字母大写，不要超过四个单词，如果单词过长，取其前三个字母。系统公共样式表：base.css；（页面中基础的样式）系统公共（功能性）模块样式表：global.css（如系统中对话框及按钮的样式）其他根据各个页面的名称来命名。例如：主要的：master.css 主题：theme.css，专栏：column.css，文字：font.css 表格：table.css，控件样式：userControls.css,CSS文件命名规范,CSS文件名称命名参考列表,CSS代码规范,CSS文件的编码格式如果项目对编码有要求，则需遵守指定的编码要求；如果没有要求则默认为国际编码utf-8。如：charset utf-8;CSS文件的引入所有的CSS的定义尽量书写在外部样式表中。除特殊需要外，页面中禁止使用style进行CSS定义。零值的缩写css中值都必须带明确的单位，0值除外，可以省去单位。例如bodymragin:0;避免使用id定义CSS在页面中，除特殊需要外，尽量的少用或避免使用id来定义程序页面的CSS样式；以免给程序页面的开发和修改带来不必要的麻烦；解决方法就是统一使用class（类）来控制它们的样式；,CSS代码规范,CSS属性顺序化显示属性display、list-style、position、float、clear自身属性 width、height、margin、padding、border、background文本属性 color、font、text-decoration、text-align vertical-align、white-space、other text、content属性值书写顺序外边框margin和内边距padding的书写顺序应当按照“上右下左”的顺时针顺序书写属性数值。伪类书写顺序伪类必须按照顺序定义：当你用CSS来定义链接的多个状态伪类样式时，应当遵循正确书写顺序。正确的顺序是：:link:visited:hover:active。抽取第一个字母是“LVHA”。否则，书写顺序错误将导致CSS效果将无法正常生效显示。,CSS代码规范,注释的写法CSS文件相关信息放在文件中最上部分/*文件名称：common.css*编 写 者：*编写日期：20012-08-08*内容概要：页面基础公共样式*/模块内容样式注释信息/*模块内容样式 开始*/模块内容具体样式/*模块内容样式 结束*/CSSHack注释使用了CSSHack，一定要添加注释，并且要写明为什么使用此CSSHack。例如：.top width:200px;*width:210px;/*IE7*/_width:208px;/*IE6*/,CSS代码规范,注释的修改注意修改项目公共样式时，修改注释信息/*文件名称：common.css*编 写 者：*（修改人）*编写日期：20012-08-08（修改日期）*内容概要：页面基础公共样式（修改内容简单描述）*/,CSS代码规范,代码书写格式/*内容部分样式*/.content width：100%；（前面空白的地方使用TAB空一格）Hack使用规则由于不同的浏览器，比如IE 6,IE7,IE8,Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。如.top width:200px/*IE8*/;*width:210px;/*IE7*/_width:208px;/*IE6*/,CSS代码规范,通用样式定义标准整个站点的背景色（background）：缺省时定义为白色；中文大小(font-size)：12px；中文字体(font-family)：宋体；英文字体(font-family)：Arial；空白(margin)：0px；间隙(padding)：0px；字体链接颜色：a:link、a:visited、a:active、a:hover图片边框(border)：0px；输入框定义(input)按钮定义(button)注：在定义样式文件时，一定要注意默认值这个问题，因为不同浏览器对默认值的解释都不一样，所以在定义属性时，一定要慎重考虑并定义标签元素的默认值。,CSS命名原则,按web页面的结构布局位置命名。网站整体通用的命名规则以网页顶部、中部、底部三个大区块位置及其内部位置进行划分与命名。网页顶部定义的样式命名为：class=”header”；网页中部定义的样式命名为：class=”middle”；网页底部定义的样式命名为：class=”footer”；按照web页面的区块命名。在网页中部定义中，我们应当按其位置划分为左右两个区块或者左、中、右三个区块：网页中部左侧运用的样式命名为：class=”left”；网页中部中间运用的样式命名为：class=”middle”；网页中部右侧运用的样式命名为：class=”right”；按功能模块命名。对于web网站中模块样式定义，我们应当按照模块名称定义模块的布局样式。例如：登录模块，我们应当这样命名：class=”login”按照组件名称命名。使用组件制作的网站，对于组件的样式，我们通常采用组件的名称命名样式的名称；如果一个组件有多个样式，我们可以在名称的后面加上数字以示区分，例如：某组件的第一种样式命名为：class=”xxx1”；它组件的第二种样式命名为：class=”xxx2”；,CSS命名原则,在定义css中的class时，建议使用层次分时的方式来描述语句。示例结构：示例Css:.menu.menu.menulist.menu.menulist.selectit 在上例中，从最终效果来看，.menu没有必要重复出现，但是实际上如果在前面加上.menu，将会让文档的层次更加明了，更利于查找和阅读,class命名规范,class命名规范class命名要用英文单词作为其名称，如果需要加数字表述的，可以在单词后面添加数字，禁止用数字开头为其名称，禁止用中文为其名称，禁止用特殊字符为其名称。首字母小写第二个单词首字母大写，不要超过四个单词，如果单词太长，取其前三位字母。例如：两个单词class名称：.productlist 三个单词class名称：.productlistleftid和class命名采用所定义内容的英文单词或组合命名。不建议使用id来定义样式，因与后期开发人员建立的id名称有预期冲突，尽可能使用class来定义，而且class有更多的资源重复利用的可能。同一类型的class名称第一个单词要一致。例如：字体，红色字体：.fontRed绿色字体：.fontGreen加粗字体：.fontBold,id和class命名参考列表,id和class命名参考列表,CSS缩写规则,颜色缩写：16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#336699可以缩写为#369;字体(fonts)font：font-style|font-variant|font-weight|font-size|line-height|font-family如：p font:italic normal bold 12px/20px 宋体;font-style：设置对象中的字体样式font-variant：设置对象中的文本是否为小型的大型字母font-weight：设置对象中的文本字体的粗细font-size：设置对象中的字体大小line-height：设置对象的行高font-family：设置对象中文本的字体名称注意：如果你缩写字体定义，至少要定义font-size和font-family两个值。,CSS缩写规则,list列表缩写list-style：list-style-type|list-style-position|list-style-imagelist-style-type：列表样式类型list-style-position：列表样式位置list-style-image：列表样式图像 如：ul list-style：disc outside none；background背景缩写background-color：背景颜色background-image：背景图片background-repeat：背景图片重复方式background-attachment：背景图片随滚动轴的移动方式background-position：图片水平垂直方向定位 如：#nav background：#ededed url(images/bg.gif)no-repeat 30%20px,页面代码的校验,页面浏览的兼容性校验不同分辨率：静态页面应当兼容以下分辨率和浏览器：1024768；1440900不同浏览器：兼容IE6、IE7、IE8、Firefox等浏览器（具体根据项目的实际情况而定）,