web网页设计命名规范

网页设计一般规范一、文件组织规范1．首先创建站点文件夹(使用英文字母命名)。

2．按站点栏目在站点文件夹中创建若干相应子文件夹及图片文件夹image。

3．首页创建在站点根文件夹下，文件名必须是inde某.htm或default.htm。

站点根文件夹下，只能有inde某.htm和若干子文件夹。

4.其他网页文件、图片文件、媒体文件等，都放在对应的子文件夹内。

5.所有文件夹、文件(网页文件、图片文件)命名时，不得含有汉字和空格。

6.所有图片文件需放置在image文件夹内。

二、主页制作规范1．使用表格实现布局，在布局的单元格中添加页面内容。

2．分辨率控制为800某600兼容1024某768(页面居中，不能出现水平滚动条)。

3．有清楚完整的页面结构。

头部的CI标志、主题图片或文字、导航栏。

分块合理安排的主体页面内容。

尾部的版权。

4．有恰当的颜色设计和背景设计(颜色控制在三种、背景使用专用背景图片)。

5．导航栏和所有大小标题进行适当的修饰。

三、普通网页制作规范1．必须放置在相应子文件夹内。

不能放置在站点根文件夹下。

2．页面要有基本的布局(页面居中，分辨率控制8OO某600兼容1024某768)。

所有内容安排在布局好的表格中(一般将表格线隐藏)。

3．一般应安排返回主页或父页的链接。

4.文件大小控制在64K以内（含页内图片文件）。

5．注意各种对齐方式的使用(水平对齐、垂直对齐、内容与边框距离的控制等)。

6.不得遗漏“标题名”的设计制作，形成“无标题文档”。

7．网页页面的高度一般控制在三屏以内，超过三四屏应使用书签(锚点)技术。

四、其他一些规范1．站点和网页的主题明确突出，去除与主题无关的一切东西。

所有应用技术服从于内容的需要，禁用妨碍主题内容的技术。

2．站点中所有网页间的链接有清晰的结构，形成易于漫游的导航系统，不得出现任何一页没有相应的链接，让用户点击“后退"按钮3．所有网页不得出现任何一个无效链接和无效图片。

web规范网页开发是一项极富挑战性的工作，为了保证开发出符合用户期望、可用性高、易于维护的网页，制定一套完善的Web规范非常重要。

本文将探讨一些常见的Web规范，帮助网页开发者更好地开发优质的网页。

1. 响应式设计：现如今，用户使用各种不同的设备访问网页，包括桌面电脑、平板电脑和智能手机等。

为了确保网页在不同设备上都能良好展示，响应式设计是必不可少的。

网页需要根据屏幕尺寸自动适配布局和样式，以提供更好的用户体验。

2. 浏览器兼容性：不同的浏览器对网页的解析和渲染方式可能不同，因此开发人员需要确保网页在主流浏览器中都能正常运行。

测试网页在不同浏览器中的兼容性，并及时修复发现的问题是非常重要的。

3. HTML和CSS代码规范：编写整洁、易于理解和维护的代码是一个好习惯。

开发人员应该遵循命名规范，使用合适的标签和语义化的HTML结构，同时使用层叠样式表(CSS)编写样式，并且遵循一致的选择器命名和样式规则。

4. 图片和多媒体内容优化：网页中的图片和多媒体内容可能会占用大量的带宽和加载时间。

为了提高网页的加载速度和用户体验，开发人员应该优化图片和多媒体内容的大小和格式，使用合适的压缩和编码技术。

5. 表单设计：表单是网页中常见的交互组件，用户可以通过表单提交信息。

为了提高用户体验和数据的准确性，表单需要设计得易于填写和提交。

同时，表单需要进行前端和后端的验证，以确保输入的数据的合法性和安全性。

6. 导航和链接结构：良好的导航和链接结构可以帮助用户更轻松地浏览网页内容。

开发人员应该设计易于理解和操作的导航和链接，保持页面的层次结构清晰和一致。

7. 页面加载速度：用户对网页的加载速度非常敏感，长时间的加载会导致用户流失和不良的用户体验。

开发人员应该采取措施来优化网页的加载速度，如压缩和合并CSS和JavaScript文件，使用缓存技术和异步加载等。

8. SEO优化：搜索引擎优化(SEO)是提高网页在搜索引擎结果中排名的一系列技术和策略。

⽹页设计与制作常见60问解答1. 为什么⽹站的⾸页⽂件名⼀般命名为index.htm或index.asp？⽹站的⾸页⽂件名为index.htm或index.asp，这是⼀种⽹站⾸页命名规范。

在浏览器地址栏输⼊⽹址，即使不输⼊index.htm或index.asp，浏览器也能正确找到该⽂件并正确显⽰出来，因为Web服务器默认的⾸页⽂件名是index.htm或index.asp。

此外，通过设置，Web 服务器常⽤的默认⾸页⽂件名格式有index.htm、default.htm、index.asp、default.asp等。

2. 巧妙设置分辨率在制作⽹页时，有时会发现，制作好的⽹页在本地计算机上浏览时很正常，但在另外⼀台计算机上浏览时却发现⽹页的布局乱套了，这是因为各个计算机的分辨率不同所致。

在Dreamweaver⽂档窗⼝中的右下⾓，显⽰当前⽂档的分辨率⼤⼩。

单击当前分辨率数字，在弹出的菜单中可以为当前的页⾯指定显⽰分辨率，通过修改可以使⽹页更具灵活性。

3. 打开⽂件及插⼊⽹页图像的快速⽅法在Dreamweaver⾥，进⾏⽹页编辑时，不必通过菜单栏⾥的【打开】命令来打开⽂件，⼀个更快的⽅法是利⽤【⽂件】⾯板，打开相关⽂件，直接⽤⿏标拖动⽂件到⽂档编辑窗⼝即可；同样，要在⽹页上插⼊图像等元素，也可直接通过【⽂件】⾯板将图像⽂件拖动到⽹页上。

4. 怎样仅仅复制⽂字⽽不想要其格式？当从Dreamweaver中复制⽂字到另⼀个应⽤程序中时，HTML代码和⽂字⼀起被复制过去了。

此时⼀般都⽤快捷键【Ctrl＋C】来复制，如果在复制的时候多按⼀个【C】键则只复制选中的⽂字。

从外部⽂档中粘贴时，如果只要⽂字⽽不想要其格式，可以选择菜单中的【编辑】︱【粘贴⽂本】命令，不要直接⽤快捷键【Ctrl＋V】。

5. 如何巧妙隐藏标签？如果在⽹页中插⼊了不可见的元素时，Dreamweaver会⾃动在页⾯上添加⼀个与之相应的元素标签，以便于选择不可见元素。

Xingtai Polytechnic College《网页设计与制作》—相关规范网站设计规范（通用）一、设计风格1、依照网站的定位确定整体的设计风格。

2、主体框架页面、内容页尽量采用方型结构。

禁用长距离的斜线及弧线结构，可允许小范围内的斜线及弧线。

封面页、专题页可不受此限制。

3、设计时尽量在方块区边缘、按钮、标题装饰块上体现设计技巧，拐角可以有曲线变化。

拐角块最大不得超过18像素。

同一页面弧度尽量保持一致。

4、各主要栏目之间要求使用一致的布局，包括一致的页面元素；一致的导航形式，使用相同的铵钮，相同的顺序。

可跟首页有变化。

5、首页及各级页面都必须带有网站的LOGO(建议小于150×54)，并链接到网站首页。

6、统一按兼容分辨率800*600设计。

为了使显示更友好，建议使用778或者760 px设计。

7、网站页面长度建议1屏半到2屏。

原则上长度不超过3屏，宽度不超过1屏。

根据用户习惯和网站需要，国内中文网站综合类、门户类(包括垂直门户)网站可设计超过3屏。

二、图形设计规范1、图片标准尺寸全尺寸banner为468×60px，半尺寸banner为234×60px，小logo为88×31px 另外150×68、120×90，120×60也是标准尺寸，网站logo一般控制在150×54以内，客户要求或特殊广告图片可另定尺寸。

建议首页存储大小不得超过150K(包括图片)，其它页面经压缩后尺寸不得超过70K。

2、图片的分类及命名规则(1) 名称分为头尾两两部分，用下划线隔开。

(2) 头部分表示此图片的大类性质，例如广告、标志、菜单、按钮等等。

(3) 一般来说:⏹放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner⏹标志性的图片我们取名为：logo⏹在页面上位置不固定并且带有链接的小图片我们取名为buttonXingtai Polytechnic College《网页设计与制作》—相关规范⏹在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu⏹装饰用的照片我们取名：pic⏹不带链接表示标题的图片我们取名：title⏹依照此原则类推。

网页设计制作规范要求由于互连网的日异普及，客户对网站设计、制作的要求有了很大的提高，因此，我们要把握好每一个细节,使网页设计制作的水平更上一层楼。

以下是网页制作的一些注意事项，希望大家能引起重视.一、网页制作中〈head></head>中必写信息：1、〈title〉**＊＊＊＊</title>＊＊*＊＊*为关键字—-公司名称，不要超20个汉字或100个字母，这一项一般问题不大，但英文公司标题切不可每个字母都大写，这一点一定要注意，中文网站写中文,英文网站写英文,每个页面均要写。

2、语言规范英文版<meta http—equiv=”content—type”content="text/html; charset=iso—8859—1"> 中文版〈meta http—equiv="Content—Type”content=”text/html；charset=gb2312"〉繁体中文<meta http-equiv=”Content—Type”content="text/html；charset=big5"〉3、〈META NAME=”Keywords" CONTENT=”＊**＊**">＊**＊*＊为关键字项，其字数中文控制在25—30单词/字内, 英文控制在3、4百个字符。

（在中文搜索引擎中，一个标点，一个阿拉伯数字，一个英文字母均算一个；在英文搜索引擎中，一个标点,一个阿拉伯数字,一个英文单词均算一个，要求是将重点关键词放在最前面；不要带有排他性描述文字，如最大，最好,第一等；也不要全部由产品简单的罗列堆砌而成；不要与Title，Description有重复描述，否则不仅降低描述质量,而且还无端浪费有限的“介绍文字”资源；故这些最好由业务员在与客户签约时，请厂家来确定，以免不必要的修改，最重要的是以后修改效果可能不太好)”4、<META NAME=”Description" CONTENT=”******” >*＊*＊*＊为网站描述项，其字数中文控制在25-30单词/字内，英文控制在3、4百个字符。

css命名规范CSS（CascadingStyleSheets，层叠样式表）是一种用于定义网页外观的Web标准规范，广泛应用于万维网上的各种HTML文档。

在CSS的编写中应遵循良好的命名规范，这样可以保证CSS在不同的团队协作下编写、维护和管理起来更加顺畅，也有助于后期维护和修改。

CSS命名规范涉及到以下几个方面：一、标签命名标签命名（className idName）应采用简洁的、有意义的词汇，尽可能避免缩写，只使用小写字母和下划线，将空格替换为下划线。

标签名称也可以使用中划线，但无建议，仍建议使用下划线。

例如：class=wrapperid=page_main_body二、变量命名变量命名应采用有意义的、符合变量含义的单词，变量名称以字母或下划线开头，变量名可以是大写字母、小写字母，但尽量不要使用缩写，可以使用中划线。

例如：$page_main_body$page_sub_body三、CSS文件存放路径CSS文件一般存放在与功能相关的文件夹中，要求各文件夹名称明确清楚，其中新建CSS文件命名要尽量使用有意义的名称，可以采用中划线，也可以使用单词缩写。

例如：style/header.cssstyle/footer.cssstyle/common.css四、CSS属性和值命名CSS属性和值应采用小写字母，有些关键词会使用中划线。

常用的颜色可以使用英文（例如：red、blue、green），也可以使用十六进制的颜色代码（例如：#333333）。

例如：font-size: 12px;color: #333;border-width: 1px;五、CSS选择器命名CSS选择器应使用有意义的、符合元素类型含义的单词，有些属性可以直接使用英文单词，有些属性可以使用中划线表示，要尽量避免使用缩写。

例如：#id { }.class { }ul li { }六、CSS优先级CSS的优先级主要以特殊性和权重以及规则的数量来定义，值越高的优先级别越高，优先级越低的越容易被覆盖。

Web UI 设计命名规范这套规范并非单纯的CSS、html或JavaScript命名规范，它涉及了很多使用PhotoShop这类设计工具进行网页设计过程中的命名规范。

(好久没写文章了，有点罗嗦，吼吼~)。

首先我是出于公司几位美工的设计效果图源文件没有对图层命名而开始考虑总结一套的，还有一个原因就是网上大多命名规范都是关于编码的，也就是那些css、html、js和一些服务器端语言的，至于设计方面的命名规范实在是很少。

但是毕竟设计师也是技术团队的成员，而且前端开发工程师是要使用设计师的效果图源文件的，所以统一命名规范和设计规范对于团队的协作和工作效率肯定是有好处的。

这套WebUI设计命名规范总结自我的一些Web设计经验和国外设计师的命名方式推荐。

Web UI 设计命名规范一.网站设计及基本框架结构:1. Container“container“ 就是将页面中的所有元素包在一起的部分，这部分还可以命名为: “wrapper“, “wrap“, “page“.2. Header“header” 是网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。

这部分还可以命名为:“page-header” (或pageHeader).3. Navbar“navbar“等同于横向的导航栏，是最典型的网页元素。

这部分还可以命名为:“nav”, “navigation”, “nav-wrapper”.4. Menu“Menu”区域包含一般的链接和菜单，这部分还可以命名为: “subNav “, “links“，“sidebar-main”.5. Main“Main”是网站的主要区域，如果是博客的话它将包含的日志。

这部分还可以命名为: “content“, “main-content” (或“mainContent”)。

6. Sidebar“Sidebar” 部分可以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等…这部分还可以命名为: “subNav “, “side-panel“, “secondary-content“.7. Footer“Footer”包含网站的一些附加信息，这部分还可以命名为: “copyright“.二.需要注意的几点:1.尽量考虑为元素命名其本身的作用或”用意”，达到语义化。

Web UI 设计命名规范Web UI 设计命名规范 (1)一.网站设计及基本框架结构: (2)二.需要注意的几点: (2)一.网站设计及基本框架结构:1. Container“container“ 就是将页面中的所有元素包在一起的部分，这部分还可以命名为: “wrapper“, “wrap“, “page“.2. Header“header” 是网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。

这部分还可以命名为:“page-header” (或 pageHeader).3. Navbar“navbar“等同于横向的导航栏，是最典型的网页元素。

这部分还可以命名为:“nav”, “navigation”, “nav-wrapper”.4. Menu“Menu”区域包含一般的链接和菜单，这部分还可以命名为: “subNav “, “links“，“sidebar-main”.5. Main“Main”是网站的主要区域，如果是博客的话它将包含的日志。

这部分还可以命名为: “content“, “main-content” (或“mainContent”)。

6. Sidebar“Sidebar” 部分可以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等…这部分还可以命名为: “subNav “, “side-panel“, “secondary-content“.7. Footer“Footer”包含网站的一些附加信息，这部分还可以命名为: “copyright“.二.需要注意的几点:1.尽量考虑为元素命名其本身的作用或”用意”，达到语义化。

不要使用表面形式的命名.如:red/left/big等。

2.组合命名规则:[元素类型]-[元素作用/内容]如:搜索按钮: btn-search登录表单:form-login新闻列表:list-news3.涉及到交互行为的元素命名:凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则:鼠标悬停:：hover 点击：click 已浏览：visited如:搜索按钮: btn-search、btn-search-hover、btn-search-visited推荐网页制作规范01 命名规范文件命名的原则：以最少的字母达到最容易理解的意义。

qxt标准(一)QXT标准什么是QXT标准QXT标准是一种网页设计与开发的规范，旨在使不同的页面和应用程序有一个共同的基础，可以共享和重用代码。

它被广泛应用于现代Web设计和开发中。

QXT标准的起源QXT标准最初由W3C（World Wide Web Consortium）提出，W3C旨在推动HTML，CSS和其他WEB技术的发展。

QXT标准被设计为一种形式良好，可处理的标记语言，使Web开发者能够以一致的方式创建网页。

QXT标准的优势QXT标准有以下一些优势：•可读性: QXT标准减少了HTML文件中的嵌套和标签，使得它易于阅读和理解。

•良好的可访问性: QXT标准使得开发可访问的网页更加容易，也使得页面在不同终端上具有良好的可访问性。

•遵守国际标准: QXT标准是W3C的一个标准，是在全球范围内推行的，因此得到了全球Web开发者的广泛支持。

QXT标准特点QXT标准具有以下独特的特征：•可重复性: QXT标准具有可重复性，因此可以进行测试和测量来确保一致性。

•可扩展性: QXT标准是可扩展的，可以通过添加新模块来扩展页面和应用程序功能。

•容错性: QXT标准具有容错性，因为即使有一些标记存在错误或已被标记为无效，大多数浏览器仍然能够正确解释网页。

QXT标准使用方式使用QXT标准可以遵循以下步骤：1.遵循QXT标准语法。

2.使用CSS来格式化页面，遵循QXT规范中的CSS规范。

3.遵循QXT标准的命名约定。

4.使用良好的编码实践，如使用有意义的变量名和注释。

5.遵循web性能优化技术。

结论QXT标准是一种规范化的网页设计和开发方式，可以使Web开发者更好地创建可访问性更强、兼容性更好的网站。

通过遵循QXT标准的方法，可以使Web页面更加一致和可重用。

QXT标准的适用范围QXT标准适用于各种Web页面和Web应用程序，包括静态页面、动态页面、内容管理系统（CMS）、电子商务网站等。

QXT标准的未来随着移动Web的普及，QXT标准在移动Web开发中的应用也越来越广泛。

WEB前端开发规范WEB前端开发规范WEB前端开发规范目录1、规范目的2、基本准则3、文件规范4、文件规范5、html书写规范6、css书写规范7、JavaScript书写规范8、图片规范9、注释规范10、开发及测试工具约定11、其他规范12、CSSHack1规范目的为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,同是为网站有一个更好的前端架构，网站的发展及未来打好一个基础。

本文档如有不对或者不合适的地方请提出来,基本准则符合web标准,语义化html,结构表现行为分离,兼容性优良.页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度.文件规范3.1、html,css,js,images文件均归档至约定的目录中;23 3.2、html文件命名:命名以中文命名，依实际模块命名，如果同一模块以_&title&_来组合命名,以方便添加功能时查找对应页面，团结里的相互理解。

例如：我的好股网里的TAB命名大模块名称_小模块的titile.html我的好股网_关注的微博.html3.3、css文件命名:英文命名,后缀.css.初始化样式reset.css，其他样式依实际模块页面需求命名，共用样式一般以模块考虑来划分命名,如有改版修改的css文件可以采用&_时间日期例如：微博改版版块名称_时间日期.cssnew_blog_1212.css4.4、Js文件命名:英文命名,后缀.js.共用common.js,其他依实际模块需求命名.5.5、图片命名:4html书写规范4.1、文档类型声明及编码:统一用;编码统一为。

目的:统一性和网站提高开发合作效率。

4.2、非特殊情况下样式文件必须外链至之间;非特殊情况下JavaScript文件必须外链至页面底部之前;目的:网站的优化。

4.3、所有编码均遵循xhtml标准,标签&属性&属性命名必须由小写字母及下划线数字组成,且所有标签必须闭合,包括br(),hr()等;属性值必须用双引号包括;目的:更加符合web标准(w3c),也有利于seo。