您所在位置：网站首页 > 资格认证/考试 > 自考 > web标准页面制作规范

web标准页面制作规范.ppt

34页

卖家[上传人]：枫**

文档编号：590824199

上传时间：2024-09-15

文档格式：PPT

文档大小：2.32MB

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

20金贝

下载

/ 34 举报版权申诉马上下载

文本预览

下载提示

常见问题

WebWeb标标准准页页面制作面制作规规范范目目录录文件目录命名规范HTML文件命名规范HTML代码规范图片制作规范CSS编写规范文件目文件目录录命名命名规规范范文件目录命名原则›以最少的层次提供最清晰简便的访问结构，并能够使所有项目参与者清晰理解和记忆每一个文件目录的意义，从而可以更方便的查找、修改、移植等管理操作，提高工作效率›文件目录名称统一用小写的英文单词，长度不超过20个字符如果需要加数字以区分页面文件，可以在单词后面添加数字，但是禁止用数字开头、禁止用中文字符、禁止用特殊字符作为文件目录的名称›文件目录名称的命名要与所定义的内容语义接近，字母要小写，需要两个以上单词表达时，第二个单词首字母大写，不要超过四个单词，如果单词过长，取其前三个字母›根目录一般只存放index.htm以及其他必须的系统文件；每个主要栏目开设一个相应的独立目录；以栏目名称英文单词或单词缩写命名；例如：根目录下的images目录用于存放各页面都要使用的所有图片；根目录下的javascript目录存放所有JS脚本文件；所有CSS文件存放在根目录下css目录；等等目目录结录结构命名构命名规规范范文件目录命名原则›清晰的站点目录结构方便文件的维护和管理，同时对增加搜索引擎的友好度和移植也有着重要的影响。

›例如：项目根目录下——Style文件夹——css样式文件夹，images文件夹， icon文件夹名，js文件夹Style文件夹内文件命名项目静态页面命名›项目根目录下——项目名称（不可以用中文）——页面.html文件（不可以用中文）目目录结录结构命名参考列表构命名参考列表编号编号项目内容项目内容备注备注1images 存放所有网站直接插入的图片2imagestemp 存放所有网站直接插入图片，但后期一定被程序替换的图片3 CSS存放所有样式表4 Js 存放所有js文件5icon存放所有按钮图标HTMLHTML文件命名文件命名规规范范HTML文件命名规范如下：›文件名要以最少的字母达到最容易理解的意义，尽量按单词的英语翻译为名称如help.html（帮助中心页面）›文件名称应当统一使用小写的英文字母、数字组合，长度不超过20个字符›禁止使用英文和中文拼音混搭；禁止用数字开头、禁止用中文字符、禁止用特殊字符作为文件的名称›登录页文件名：login.html，首页文件名：index.html，二级页文件：name.html›多个同类型文件使用英文字母加下划线扩展名例如： message.html ； message_add.html HTMLHTML命名参考列表命名参考列表中文名称中文名称英文名称英文名称中文名称中文名称英文名称英文名称首页首页index.html登录页面登录页面login.html注册页注册页register.html搜索页面搜索页面search.html购物车页面购物车页面cart.html收藏夹页面收藏夹页面favorite.html新闻新闻news.html产品页面产品页面products.html列表页面列表页面*list.html详细页面详细页面*info.html论坛论坛bbs.html博客博客blog.html关于我们关于我们aboutUs.html人才招聘人才招聘job.html广告服务广告服务adService.html客户服务客户服务service.html信息反馈信息反馈feedback.html合作伙伴合作伙伴partners.html联系我们联系我们contactUs.html更多页更多页*more.html支持支持support.html帮助帮助help.html网站地图网站地图siteMap.html企业介绍企业介绍intro.html你的帐户你的帐户account.html工作室工作室workroom.html备注：备注：*为可拓展名称。

为可拓展名称HTMLHTML代代码规码规范范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) HTMLHTML代代码规码规范范CSS样式表定义规范›CSS文件引用标准代码：›除特殊的css样式之外（如”display:none”），其他所有的样式表应当编写在外部css样式表中；禁止使用style来单独定义页面的样式；JavaScript脚本定义规范›脚本引用方式脚本引用标准代码：为了减小页面的加载负担，除特殊的页面效果需要之外，其他所有的JS脚本都应当编写在外部js文件中；HTMLHTML代代码规码规范范meta标签描述›语言编码声明:为了被浏览器正确解释和通过W3C代码校验，XHTML文档必须声明它所使用的编码语言；统一规定使用：›网页描述设置描述网页的内容概况，利于搜索引擎检索信息，建议不要超过30到35个字符。

如： ›搜索关键字设置描述网页的“关键词”，利于搜索引擎检索信息，建议不要重复和堆砌关键词如： HTMLHTML代代码规码规范范Title代码规范›对于web软件界面页面标题，应当采用软件项目名称作为标题标签，如：edus教务管理系统标签和标签属性属性名称必须小写›HTML要求所有的标签必须使用小写例如：必须写成，

必须写成

›在标签中编写属性，必须使用小写，正确的写法是：，不允许使用CLASS或Class这样的形式属性值必须使用双引号›在HTML代码中，必须使用双引号来填写属性值，以免引发不必要的页面问题，正确的写法是：

、不允许使用

、这样的形式HTMLHTML代代码规码规范范不允许使用属性简写›在HTML代码中不允许使用简写属性，必须使用完整的写法，正确的写法：

、、< ol>有序列表有序列表、、

列表项列表项

块元素块元素块元素块元素粗体粗体加粗加粗斜体斜体斜体斜体段落段落段落段落链接链接链接链接表单表单其他标签其他标签
换行换行、、图片、图片、、、、、文本框或按钮、文本框或按钮、

水平水平分界线分界线HTMLHTML代代码规码规范范Table标签定义规范›避免嵌套过多的表格，嵌套尽量不要超过3层。

›对于不可避免的表格嵌套，每级table以一个“TAB”键缩进，确保代码层次分明；›建议不要采用thead、tfoot 以及tbody 元素›表格的样式应当统一使用css定义；›表格的填充（cellpadding）、间距（cellspacing）属于内置属性，无法用css定义控制；›表格的宽度（width）避免使用数值控制，应当用百分比值来控制，以方便UI的制作修改和界面的升级拓展；›表格线的是通过设置表格的属性参数填充（cellpadding）、间距（cellspacing）来实现表格线的粗细宽度；然后分别定义表格的背景色和表格列的背景色来实现表格线颜色；HTMLHTML代代码规码规范范页面宽度的设定›采用百分比定义页面宽度代码格式：例：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.CSSCSS文件命名文件命名规规范范CSS文件命名规范›CSS文件名称统一用小字的英文单词，长度不超过20个字符如果需要加数字和下划线以区分页面文件，可以在单词后面添加数字，但是禁止用数字开头、禁止用中文字符、禁止用特殊字符作为文件的名称›CSS文件名称的命名要与所定义的内容语义接近，字母要小写，需要两个以上单词表达时，第二个单词首字母大写，不要超过四个单词，如果单词过长，取其前三个字母。

›系统公共样式表：base.css；（页面中基础的样式）›系统公共（功能性）模块样式表：global.css（如系统中对话框及按钮的样式）其他根据各个页面的名称来命名例如：主要的： master.css 主题：theme.css ，专栏：column.css ，文字：font.css 表格：table.css ，控件样式：userControls.cssCSSCSS文件命名文件命名规规范范CSS文件名称命名参考列表中文名称中文名称英文名称英文名称中文名称中文名称英文名称英文名称公用样式公用样式public.css 皮肤样式皮肤样式skin.css 专栏样式专栏样式columns.css打印样式打印样式print.css布局样式布局样式layout.css默认样式默认样式default.css控件样式控件样式userControls.css模块样式模块样式module.css后台样式后台样式webmanage.css文字样式文字样式font.css导航样式导航样式nav.css菜单样式菜单样式menu.cssCSSCSS代代码规码规范范CSS文件的编码格式›如果项目对编码有要求，则需遵守指定的编码要求；如果没有要求则默认为国际编码utf-8。

如： @charset "utf-8";CSS文件的引入›所有的CSS的定义尽量书写在外部样式表中除特殊需要外，页面中禁止使用style进行CSS定义零值的缩写›css中值都必须带明确的单位，0值除外，可以省去单位例如body{mragin:0;}避免使用id定义CSS›在页面中，除特殊需要外，尽量的少用或避免使用id来定义程序页面的CSS样式；以免给程序页面的开发和修改带来不必要的麻烦；解决方法就是统一使用class（类）来控制它们的样式；CSSCSS代代码规码规范范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效果将无法正常生效显示CSSCSS代代码规码规范范注释的写法›CSS文件相关信息放在文件中最上部分/* ************************************* 文件名称：common.css* 编写者：****编写日期：20012-08-08* 内容概要：页面基础公共样式*************************************/›模块内容样式注释信息/********** 模块内容样式开始**********/模块内容具体样式/********** 模块内容样式结束**********/›CSSHack注释使用了CSSHack，一定要添加注释，并且要写明为什么使用此CSSHack例如：.top{ width:200px; *width:210px;/*IE7*/ _width:208px;/*IE6*/ }CSSCSS代代码规码规范范注释的修改注意›修改项目公共样式时，修改注释信息/* ************************************* 文件名称：common.css* 编写者：***（修改人）*编写日期：20012-08-08（修改日期）* 内容概要：页面基础公共样式（修改内容简单描述）*************************************/CSSCSS代代码规码规范范代码书写格式/* 内容部分样式*/.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*/ }CSSCSS代代码规码规范范通用样式定义标准›整个站点的背景色（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)›注：在定义样式文件时，一定要注意默认值这个问题，因为不同浏览器对默认值的解释都不一样，所以在定义属性时，一定要慎重考虑并定义标签元素的默认值CSSCSS命名原命名原则则按web页面的结构布局位置命名网站整体通用的命名规则以网页顶部、中部、底部三个大区块位置及其内部位置进行划分与命名。

›网页顶部定义的样式命名为：class=”header”；›网页中部定义的样式命名为：class=”middle”；›网页底部定义的样式命名为：class=”footer”；按照web页面的区块命名在网页中部定义中，我们应当按其位置划分为左右两个区块或者左、中、右三个区块：›网页中部左侧运用的样式命名为：class=”left”；›网页中部中间运用的样式命名为：class=”middle”；›网页中部右侧运用的样式命名为：class=”right”；按功能模块命名对于web网站中模块样式定义，我们应当按照模块名称定义模块的布局样式例如：›登录模块，我们应当这样命名：class=”login”按照组件名称命名使用组件制作的网站，对于组件的样式，我们通常采用组件的名称命名样式的名称；如果一个组件有多个样式，我们可以在名称的后面加上数字以示区分，例如：›某组件的第一种样式命名为：class=” xxx1”；›它组件的第二种样式命名为：class=” xxx2”；CSSCSS命名原命名原则则在定义css中的class时，建议使用层次分时的方式来描述语句示例结构：

示例Css:.menu { …… }.menu .menulist { …… }.menu .menulist .selectit { …… }在上例中，从最终效果来看，.menu没有必要重复出现，但是实际上如果在前面加上.menu，将会让文档的层次更加明了，更利于查找和阅读classclass命名命名规规范范class命名规范›class命名要用英文单词作为其名称，如果需要加数字表述的，可以在单词后面添加数字，禁止用数字开头为其名称，禁止用中文为其名称，禁止用特殊字符为其名称。

›首字母小写第二个单词首字母大写，不要超过四个单词，如果单词太长，取其前三位字母例如：两个单词class名称：.productlist 三个单词class名称：.productlistleft›id和class命名采用所定义内容的英文单词或组合命名›不建议使用id来定义样式，因与后期开发人员建立的id名称有预期冲突，尽可能使用class来定义，而且class有更多的资源重复利用的可能›同一类型的class名称第一个单词要一致例如：字体，›红色字体：.fontRed›绿色字体：.fontGreen›加粗字体：.fontBoldid id和和classclass命名参考列表命名参考列表页面内容说明页面内容说明class名称名称页面内容说明页面内容说明class名称名称页面内容说明页面内容说明class名称名称页头部分页头部分header帮助帮助help页尾页尾footer内容区内容区content注销注销logout导航导航nav页面主体页面主体main关键词关键词keyword主导航主导航mainNav菜单菜单menu社区社区forum子导航子导航subNav导航导航nav论坛论坛bbs顶导航顶导航topNav左右中左右中left right center博客博客blog边导航边导航sideBar上中下上中下top middle bottom按钮按钮button左导航左导航leftSideBar标志标志logo输入框输入框input右右导航航rightSideBar广告广告ad图片图片img产品产品products登陆登陆login旗帜旗帜bananer产品描述产品描述productsDes注册注册register常见问题常见问题faq产品价格产品价格productsPri搜索搜索search提示信息提示信息msg产品评论产品评论productsRev 公告公告bulletin下载下载download缩略图缩略图screenshot图标图标icon新闻新闻news信誉信誉credits注释注释note列表列表list法律声明法律声明legal服务服务service当前的当前的current摘要摘要summaryid id和和classclass命名参考列表命名参考列表页面内容说明页面内容说明class名称名称页面内容说明页面内容说明class名称名称页面内容说明页面内容说明class名称名称菜单菜单menu功能区功能区shop①①标题标题title子菜单子菜单subMenu状态状态status加入加入joinUs按钮按钮button颜色颜色color*滚动scroll热点热点hot合作伙伴合作伙伴partner面包屑面包屑crumb ②②推荐推荐recommend 友情链接友情链接friendLink排行榜排行榜*top10标签页标签页tag指南指南guild评论评论review 字体字体font*圆角圆角 corner 特别的特别的special投票投票vote工具条工具条toolBar资源资源source箭头箭头arrow版权信息版权信息copyright小技巧小技巧tips商标商标trademark状态状态status注释：注释：①①(如购物车，收银台如购物车，收银台) ②②(即页面所处位置导航提示，或称当前位置）即页面所处位置导航提示，或称当前位置）CSSCSS缩缩写写规则规则颜色缩写：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两个值。

CSSCSS缩缩写写规则规则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 }页页面代面代码码的校的校验验页面浏览的兼容性校验›不同分辨率：静态页面应当兼容以下分辨率和浏览器：1024×768；1440×900›不同浏览器：兼容IE6、IE7、IE8、Firefox等浏览器（具体根据项目的实际情况而定）。

点击阅读更多内容