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规范非常重要。
本文将探讨一些常见的Web规范，帮助网页开发者更好地开发优质的网页。
1. 响应式设计：现如今，用户使用各种不同的设备访问网页，包括桌面电脑、平板电脑和智能手机等。
为了确保网页在不同设备上都能良好展示，响应式设计是必不可少的。
网页需要根据屏幕尺寸自动适配布局和样式，以提供更好的用户体验。
2. 浏览器兼容性：不同的浏览器对网页的解析和渲染方式可能不同，因此开发人员需要确保网页在主流浏览器中都能正常运行。
测试网页在不同浏览器中的兼容性，并及时修复发现的问题是非常重要的。
3. HTML和CSS代码规范：编写整洁、易于理解和维护的代码是一个好习惯。
开发人员应该遵循命名规范，使用合适的标签和语义化的HTML结构，同时使用层叠样式表(CSS)编写样式，并且遵循一致的选择器命名和样式规则。
4. 图片和多媒体内容优化：网页中的图片和多媒体内容可能会占用大量的带宽和加载时间。
为了提高网页的加载速度和用户体验，开发人员应该优化图片和多媒体内容的大小和格式，使用合适的压缩和编码技术。
5. 表单设计：表单是网页中常见的交互组件，用户可以通过表单提交信息。
为了提高用户体验和数据的准确性，表单需要设计得易于填写和提交。
同时，表单需要进行前端和后端的验证，以确保输入的数据的合法性和安全性。
6. 导航和链接结构：良好的导航和链接结构可以帮助用户更轻松地浏览网页内容。
开发人员应该设计易于理解和操作的导航和链接，保持页面的层次结构清晰和一致。
7. 页面加载速度：用户对网页的加载速度非常敏感，长时间的加载会导致用户流失和不良的用户体验。
开发人员应该采取措施来优化网页的加载速度，如压缩和合并CSS和JavaScript文件，使用缓存技术和异步加载等。
8. SEO优化：搜索引擎优化(SEO)是提高网页在搜索引擎结果中排名的一系列技术和策略。
网页设计与制作常见60问解答
⽹页设计与制作常见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命名规范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的优先级主要以特殊性和权重以及规则的数量来定义，值越高的优先级别越高，优先级越低的越容易被覆盖。
WebUI设计命名规范讲解
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 设计命名规范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 命名规范文件命名的原则：以最少的字母达到最容易理解的意义。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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.尽量考虑为元素命名其本身的作用或”用意”，达到语义化。
不要使用表面形式的命名.
如:red/left/big等。
2.组合命名规则:
[元素类型]-[元素作用/内容]
如:搜索按钮: btn-search
登录表单:form-login
新闻列表:list-news
3.涉及到交互行为的元素命名:
凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则:
鼠标悬停:：hover 点击：click 已浏览：visited
如:搜索按钮: btn-search、btn-search-hover、btn-search-visited
三.Photoshop图层结构规范:
Photoshop图层命名遵循树形结构，凡某元素组成的图层大于3层，即可形成组，所有图层尽量避免使用默认命名(图层+编号)。
第一级图层结构如下图:
第二级结构图例(医院网站):
第三级结构图例及效果图对比(医院新闻栏目)：
效果图
图层命名结构四．常用命名汇总:
页头:header
登录条:loginbar
标志:logo
侧栏:sidebar
广告条:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
下拉菜单:dropMenu 工具条: toolbar
表单:form
栏目:column
箭头:arrow
搜索:search
搜索按钮:btn-search 滚动条:scroll
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
链接:links
页脚:footer
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
版权:copyright
网站地图: sitemap。