网页设计规范
网页设计一般规范
网页设计一般规范一、文件组织规范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．所有网页不得出现任何一个无效链接和无效图片。
《网页设计与制作》相关规范—网站设计通用规范
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⏹依照此原则类推。
网页设计规范标准
网页设计规范标准1. 页面布局- 使用响应式设计，确保网站在不同设备上的适配。
- 采用网格布局，并保持一致的栅格系统。
- 合理利用空白区域，使页面整洁有序。
- 页面元素排列有序，遵循阅读顺序和重要性原则。
2. 色彩搭配- 选择合适的配色方案，使页面达到良好的视觉效果。
- 在不同的页面部分使用一致的色彩搭配，保持整体风格的统一。
- 注意色彩的对比度，以确保文字和其他元素易于阅读和辨识。
3. 字体选择- 使用合适的字体组合，使页面文本易于阅读且与整体风格相匹配。
- 字号的大小要适合不同设备上的阅读体验。
- 控制使用的字体种类数量，避免出现混乱和不协调的情况。
4. 图片与图标- 使用高质量的图片和图标，以提升用户体验。
- 优化图片大小和格式，以减小页面加载时间。
- 图片和图标要与页面主题相关，并具有清晰的表达意义。
- 设计简单明了的导航菜单，使用户能够轻松找到所需的信息。
6. 响应交互- 界面元素的交互要及时响应，并反馈给用户。
- 保持一致的界面反馈和动画效果，提升用户体验。
- 控制页面加载时间，提高网站的整体性能。
7. 页面内容- 内容排版清晰明了，段落分明，信息分类清晰。
- 使用简明扼要的语言表达，避免冗长和复杂的句子。
- 注意语法和拼写错误，确保内容的准确性和可读性。
8. 辅助工具- 为用户提供可访问的页面，考虑视觉障碍和其他辅助工具的使用。
- 提供搜索功能，方便用户快速检索信息。
- 确保页面文字和背景的对比度适宜，以满足辅助工具的要求。
以上为网页设计规范标准的一些基本要求。
在设计网页时，应综合考虑用户体验、视觉效果、页面可访问性等方面的因素，以提供优秀的网页设计作品。
web网页设计规范
web网页设计规范网页设计规范是指在设计和制作网页时应遵循的一系列规则和标准，旨在提高网页的可用性和用户体验。
以下是一些常见的网页设计规范，以帮助您制作出优秀的网页：1. 布局规范：- 使用网格系统：网格系统能帮助您保持页面的一致性和平衡感，同时也能让内容更易于阅读和理解。
- 使用响应式设计：确保您的网页能够适应不同的屏幕尺寸和设备，以提供更好的用户体验。
- 保持简洁明了：避免使用过多的装饰和不必要的元素，使页面看起来干净和易于理解。
2. 导航规范：- 显眼的导航栏：将主要的导航链接放置在页面的顶部或左侧，让用户能够轻松地找到所需信息。
- 使用面包屑导航：面包屑导航能够告诉用户当前所处的页面位置，方便用户进行导航和返回。
3. 字体规范：- 使用易于阅读的字体：选择适合在线阅读的字体，确保字体大小和间距合适，不影响用户的浏览体验。
- 限制字体种类和大小：过多的字体样式和大小会给用户带来混乱和困惑，尽量限制使用。
4. 图像和多媒体规范：- 优化图像和视频：确保您的图像和视频都经过压缩和优化，以提高页面加载速度和用户体验。
- 提供替代文本：对于图片和视频，提供替代的文本描述，以便于辅助技术用户和搜索引擎理解内容。
5. 颜色规范：- 使用品牌颜色：网页的颜色应与品牌色调相一致，以增加品牌识别度。
- 考虑色盲用户：避免依赖过多颜色来传达信息，确保页面的可读性和可理解性，特别是对于色盲的用户。
6. 可访问性规范：- 使用语义化标签：使用正确的标签来描述页面内容，以提升可访问性和搜索引擎的理解。
- 提供键盘导航：确保用户可以使用键盘进行导航和操作，尤其是对于残障用户。
7. 页面加载速度规范：- 压缩和优化文件：确保所有的代码和媒体文件（如图片和视频）都经过压缩和优化，以提高页面的加载速度。
- 使用缓存机制：利用浏览器缓存来提高页面的加载速度，减少用户等待时间。
总结：以上是一些常见的网页设计规范，通过遵循这些规范，您可以制作出易于使用和高效的网页，提供良好的用户体验。
网页设计制作规范要求
网页设计制作规范要求由于互连网的日异普及，客户对网站设计、制作的要求有了很大的提高，因此，我们要把握好每一个细节,使网页设计制作的水平更上一层楼。
以下是网页制作的一些注意事项，希望大家能引起重视.一、网页制作中〈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百个字符。
网页设计规范-中华人民共和国工业和信息化部
附件网页设计规范一、展现布局（一）展现。
1.政府网站应简洁明了，清新大气，保持统一风格，符合万维网联盟（W3C）的相关标准规范要求。
2.政府网站应确定1种主色调，合理搭配辅色调，总色调不宜超过3种。
使用符合用户习惯的标准字体和字号，同一类别的栏目和信息使用同一模板，统一字体、字号、行间距和布局等。
3.按照适配常用分辨率的规格设计页面，首页不宜过长。
在主流计算机配置和当地平均网速条件下，页面加载时长不宜超过3秒。
4.对主流类别及常用版本浏览器具有较好的兼容性，页面保持整齐不变形,不出现文字错行、表格错位、功能和控件不可用等情况。
5.网站内容要清晰显示发布时间，时间格式为YYYY—MM—DD HH∶MM。
文章页需标明信息来源，具备转载分享功能。
6.页面中的图片和视频应匹配信息内容，确保加载速度，避免出现图片不显示、视频无法播放等情况。
避免使用可能存在潜在版权纠纷或争议的图片和视频。
（二）布局。
1.政府网站页面布局要科学合理、层次分明、重点突出，一般分为头部标识区、中部内容区和底部功能区。
2.头部标识区要醒目展示网站名称，可根据实际情况展示中英文域名、徽标（Logo）以及多语言版、搜索等入口，有多个域名的显示主域名。
3.中部内容区要遵循“从左到右、从上到下”的阅读习惯，科学合理设置布局架构。
4.底部功能区至少要列明党政机关网站标识、“我为政府网站找错”监督举报平台入口、网站标识码、网站主办单位及联系方式、ICP备案编号、公安机关备案标识和站点地图等内容。
5.政府网站各页面的头部标识区和底部功能区原则上要与首页保持一致。
（三）栏目。
1.栏目是相对独立的内容单元，通常为一组信息或功能的组合，按照信息类别、特定主题等维度进行编排并集中展现。
2.栏目设置要科学合理，充分体现政府工作职能，避免开设与履职行为、公众需求相关度不高的栏目。
政府门户网站和部门网站应设置机构职能、负责人信息、政策文件、解读回应、工作动态、互动交流类栏目。
WEB页面设计规范
Web页面设计规范1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。
2、1024*768下，网页宽度保持在1002以内，如果满框显示的话，高度是612-615之间。
就不会出现水平滚动条和垂直滚动条。
3、在ps里面做网页可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*560左右4、在PS里做的图到了网上就不一样了，颜色等等方面，因为ＷＥＢ上面只用到２５６ＷＥＢ安全色，而ＰＳ中的ＲＧＢ或者ＣＭＹＫ以及ＬＡＢ或者ＨＳＢ的色域很宽颜色范围很广，所以自然会有失色的现象。
页面标准按800*600分辨率制作，实际尺寸为778*434px页面长度原则上不超过3屏，宽度不超过1屏每个标准页面为A4幅面大小，即8.5X11英寸全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px另外120*90，120*60也是小图标的标准尺寸每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K标准网页广告尺寸规格一、120*120，这种广告规格适用于产品或新闻照片展示。
二、120*60，这种广告规格主要用于做LOGO使用。
三、120*90，主要应用于产品演示或大型LOGO。
四、125*125，这种规格适于表现照片效果的图像广告。
五、234*60，这种规格适用于框架或左右形式主页的广告链接。
六、392*72，主要用于有较多图片展示的广告条，用于页眉或页脚。
七、468*60，应用最为广泛的广告条尺寸，用于页眉或页脚。
八、88*31，主要用于网页链接，或网站小型LOGO。
==========================================================================广告形式像素大小最大尺寸备注BUTTON 120*60（必须用gif） 7K215*50（必须用gif） 7K通栏 760*100 25K 静态图片或减少运动效果430*50 15K超级通栏 760*100 to 760*200 共40K 静态图片或减少运动效果巨幅广告 336*280 35K585*120竖边广告 130*300 25K全屏广告 800*600 40K 必须为静态图片，FLASH格式图文混排各频道不同 15K弹出窗口 400*300（尽量用gif） 40KBANNER 468*60（尽量用gif） 18K。
页面设计规范
页面设计规范页面设计规范是指在进行网页设计时所需遵循的一系列准则和规范，旨在提高网页的可读性、易用性和用户体验。
下面是一些常见的页面设计规范：1. 页面布局：网页布局应该简洁清晰，结构层次分明。
常见的布局方式有传统的单列布局、多列布局和响应式布局等。
页面各个元素的位置和大小应该合理，避免出现过多的空白或拥挤的情况。
2. 颜色搭配：网页的颜色搭配应该和谐统一，避免使用过于刺眼或冲突的颜色。
通常可以选择一种主色调和几种辅助色调来搭配使用，以达到整体的美观效果。
3. 字体选择：网页中的字体应该选择易读性好的字体，并保持一致性。
可以根据不同的内容和重要性来选择不同的字体大小和样式，但要注意不要过多使用不同的字体，以免造成视觉上的混乱。
4. 图片使用：网页设计中的图片应该具有清晰度和相关性，避免使用过于模糊或与内容无关的图片。
在使用图片时要注意大小和格式的优化，以提高网页的加载速度。
5. 导航设计：页面导航应该简单明了，用户可以轻松找到想要的内容。
导航栏的位置通常放置在页面的顶部或侧边，并且应该保持固定不动，方便用户在浏览网页时随时导航。
6. 页面反馈：当用户进行某些操作时，网页应该给予及时的反馈。
例如，当用户提交表单时，应该有相应的提示或等待动画，以提示用户操作的进展。
7. 响应式设计：随着移动设备的普及，网页设计应该具备响应式布局，即能够适应不同的终端设备并提供相应的界面展示。
这样可以确保用户在不同的设备上都能获得良好的体验。
8. 视觉一致性：网页中的各个元素应该保持视觉上的一致性，即在整个网站中所使用的样式、颜色和布局等都应该保持一致，这样可以使用户更容易理解和使用。
9. 网页加载速度：网页的加载速度是用户体验的重要因素之一。
在设计中要注意优化图片大小、压缩文件、减少HTTP请求等方法，以提高页面加载速度。
10. 简洁与重点：在设计中要保持页面的简洁性，不过度使用过多的文字和图片。
同时要突出重点，通过层次感和排版方式等手段来引导用户的注意力。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
标准字体字号：
中文网页一般文字正文都采用宋体12号（12px）字体，因为这个字体是系统对于浏览器特别优化过的字体。
虽然12px-20px的宋体字都还能看，但是宋体12px是最漂亮的，也是最普遍应用的。
黑体一般是14号，因为一般很少用黑体做正文，主要都是标题或者是关键字。
黑体14px是优化过的字体。
英文网页一般用11px字号，个人最喜欢的字体是tahoma与verdana这两种！特别是verdana，是最经典，最好用的字体！
网页标准宽度：
1、在IE6.0下，宽度为显示器分辨率减21，比如1024的宽度-21就变成1003；800宽-21=779。
但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。
2、在Firefox下，宽度的分率辨减19。
比如1024的宽度-19就变成1005
3、在Opear下，宽度的分率辨减23。
比如1024的宽度-23就变成1001
（注：Firefox或Opear在内容少于浏览器高度时不显示右侧滚动条。
）
所以如果是1024的分辨率，你的网页不如设成1000安全一点。
如果是800的分辨率一般都设成770。
这些需要明白并且牢记,不然很可能做出来不符合浏览器要求,不过一般我们都回设定的再稍微小一点,应为有些浏览器加了插件或者其他的东西宽度会有变化所以800的分辨率一般设定760左右,1024的设定990左右。
在这个显示器百花齐放的时代，网页设计师往往需要考虑不同客户端的浏览体验。
文字大小，是用户体验中的一个重要部分。
不同的分辨率，不同的显示器尺寸，不同的DPI，乃至不同的浏览器设置，都会对最终展现的文字大小带来影响。
虽然现在很多浏览器已经可以方便地缩放页面，但用户每次光临都要重新缩放，总归麻烦，何况还有许多用户不知道如何缩放页面。
最好还是根据用户的分辨率给用户一个比较体贴的默认字号，那这个字号多大合适呢？
12px？14px？15px？16px？还是压根就不应该使用px这个单位呢？
问题的根源，在于屏幕上的一切字号单位（px，pt，em）都是相对单位，单凭它们并不能确定文字的实际大小。
何况人对文字大小的根本感知在于眼睛的视角，这不仅取决于文字的物理尺寸，还取决于它到人眼的距离。
物理尺寸
首先假定一个我们希望达到的文字物理尺寸，例如设定为17寸1280 * 1024显示器上的16px，计算可得它的高度约是4.32mm，我们计划让网页文字在大部分显示器上都比较接近这个大小，那么在不同分辨率下应该显示成多大的字号呢？
第一步：统计用户主要的分辨率和对应的屏幕大小。
要在物理尺寸和分辨率之间换算，首先要统计分辨率和对应的屏幕尺寸。
用户分辨率的分布情况可以从网站的统计日志里获得。
由于每个分辨率设置可能对应好几个不同尺寸的屏幕，而屏幕尺寸又无法通过网页获得，只好对现在的显示器市场进行统计分析：针对某一分辨率，统计可能的屏幕尺寸范围，从最小到最大，相对主流的是多大（或使用该范围的中间值作为主流尺寸）。
如下图所示——
电脑显示器市场（产品种类繁多，难免挂一漏万，数据仅供参考）
第二步：计算每个分辨率主流屏幕尺寸的物理宽度
现在的显示器长宽比不仅有4：3的标准屏，16：10的宽屏，还有更多不规则比例，为了在不同长宽比的显示器之间进行比较，统一使用横向分辨率来统计。
用主流尺寸和长宽比（假设像素的长和宽相同）计算出屏幕宽度（英寸），再换算成公制（毫米），将其一一对应就可看出屏幕大小的趋势。
再结合各分辨率的用户分布，结果如下图所示（图片中每个点对应一个分辨率，横轴为屏幕横向的像素数，纵轴为该屏幕的物理宽度，气泡大小表示使用该分辨率的用户人数。
其中蓝色气泡表示标准屏，紫色表示宽屏）：最大的三个气泡分别是1024*768，1280*1024，1280*800。
第三步：计算不同显示器上的字号大小
用屏幕的物理宽度除以像素宽度，就可以得到每个像素的宽度。
然后用指定的文字物理大小除以这个数，就可以得到在不同分辨率下所需的字号。
例如要显示4.32mm见方的文字，各分辨率下分别需要如下的字号（对笔记本和台式机分别统计）：
不同分辨率下需要的字号
可以看出笔记本和台式机的尺寸相差很大，为方便使用，使用各分辨率的主流尺寸或平均尺寸计算出指定字号在每个分辨率下所需的字号。
（下图去掉了基本只用在笔记本上的那些分辨率），以4.32mm、3.77mm、3.25mm为例（17寸1280*1024分辨率下的16、14和12号字）：
为保持固定物理尺寸，各主流显示器下所需字号与分辨率的关系
由于在未开启cleartype的情况下，一些中文字体在非偶数字号下的显示效果欠佳，所以一般建议使用12、14、16、18、22px等偶数字号。
也就是对某个分辨率选择离它最近的偶数字号。
例如：屏幕横向分辨率在1100以下的采用14px，1100到1500采用16px，1500以上采用18px，依此类推。
到人眼的距离
虽然笔记本的字号远小于台式机，可是实际并没有给我们带来那么大的不便，这是因为：一般使用笔记本时人眼到屏幕的距离比使用台式机时要近一些。
当上网本越来越小时（极
端的例子就是手机），人们使用的时候可能会拿的更近，这样视角更大。
反之，当显示器越来越大时（24寸甚至更大），出于整体视角等方面考虑，人们也可能离屏幕远些，从而减小了视角。
定量来说：由于文字大小h（4~5mm）相对人眼到文字的距离d（30~60cm）非常小，可近似认为视角θ正比于h，并与d成反比（θ≈tgθ=h/d）。
也就是说，同样大小的文字，距离二尺时看到的只有距离一尺时的一半大小。
也就是说，显示器只能传达一个大概的尺寸，每个用户在具体操作时仍会通过不自觉地调节到屏幕的距离来调整所看到的实际效果。
面对越来越多的笔记本用户（请参照上一篇：笔记本电脑的市场份额），前端设计师们只能给出一个针对笔记本和台式机平均尺寸的页面效果，具体就靠用户去自我调整了。
用JS实现不同分辨率下自动调整字号
例如网页正文所在div的id为content——
注：为保证各浏览器下文字均可缩放，字号单位使用em而不是px，一般来说，浏览器默认1em=16px，0.875em\1em\1.125em即为14\16\18px。
使用字号缩放时请注意：对该div内的标题等字号单位最好使用百分比，而不是固定字号，以便随正文同步缩放。