网页设计规范
网页设计一般规范
网页设计一般规范一、文件组织规范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. 辅助工具- 为用户提供可访问的页面，考虑视觉障碍和其他辅助工具的使用。
- 提供搜索功能，方便用户快速检索信息。
- 确保页面文字和背景的对比度适宜，以满足辅助工具的要求。
以上为网页设计规范标准的一些基本要求。
在设计网页时，应综合考虑用户体验、视觉效果、页面可访问性等方面的因素，以提供优秀的网页设计作品。
网页设计制作规范要求
网页设计制作规范要求由于互连网的日异普及，客户对网站设计、制作的要求有了很大的提高，因此，我们要把握好每一个细节,使网页设计制作的水平更上一层楼。
以下是网页制作的一些注意事项，希望大家能引起重视.一、网页制作中〈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.栏目设置要科学合理，充分体现政府工作职能，避免开设与履职行为、公众需求相关度不高的栏目。
政府门户网站和部门网站应设置机构职能、负责人信息、政策文件、解读回应、工作动态、互动交流类栏目。
页面设计规范
页面设计规范页面设计规范是指在进行网页设计时所需遵循的一系列准则和规范，旨在提高网页的可读性、易用性和用户体验。
下面是一些常见的页面设计规范：1. 页面布局：网页布局应该简洁清晰，结构层次分明。
常见的布局方式有传统的单列布局、多列布局和响应式布局等。
页面各个元素的位置和大小应该合理，避免出现过多的空白或拥挤的情况。
2. 颜色搭配：网页的颜色搭配应该和谐统一，避免使用过于刺眼或冲突的颜色。
通常可以选择一种主色调和几种辅助色调来搭配使用，以达到整体的美观效果。
3. 字体选择：网页中的字体应该选择易读性好的字体，并保持一致性。
可以根据不同的内容和重要性来选择不同的字体大小和样式，但要注意不要过多使用不同的字体，以免造成视觉上的混乱。
4. 图片使用：网页设计中的图片应该具有清晰度和相关性，避免使用过于模糊或与内容无关的图片。
在使用图片时要注意大小和格式的优化，以提高网页的加载速度。
5. 导航设计：页面导航应该简单明了，用户可以轻松找到想要的内容。
导航栏的位置通常放置在页面的顶部或侧边，并且应该保持固定不动，方便用户在浏览网页时随时导航。
6. 页面反馈：当用户进行某些操作时，网页应该给予及时的反馈。
例如，当用户提交表单时，应该有相应的提示或等待动画，以提示用户操作的进展。
7. 响应式设计：随着移动设备的普及，网页设计应该具备响应式布局，即能够适应不同的终端设备并提供相应的界面展示。
这样可以确保用户在不同的设备上都能获得良好的体验。
8. 视觉一致性：网页中的各个元素应该保持视觉上的一致性，即在整个网站中所使用的样式、颜色和布局等都应该保持一致，这样可以使用户更容易理解和使用。
9. 网页加载速度：网页的加载速度是用户体验的重要因素之一。
在设计中要注意优化图片大小、压缩文件、减少HTTP请求等方法，以提高页面加载速度。
10. 简洁与重点：在设计中要保持页面的简洁性，不过度使用过多的文字和图片。
同时要突出重点，通过层次感和排版方式等手段来引导用户的注意力。
网页设计尺寸规范
网页设计尺寸规范网页设计尺寸规范是指在进行网页设计过程中，确定合适的页面尺寸以便在不同设备上展示良好的效果。
由于不同设备的屏幕尺寸和分辨率不同，因此设计师需要了解一些常见的网页尺寸规范，以确保网页在不同设备上都能良好地显示。
首先，需要了解的是，目前最常见的屏幕比例是16:9，这也是大多数显示器和笔记本电脑的屏幕比例。
根据这个比例，可以确定一些常见的网页尺寸规范，如下：1. 1920 x 1080像素：这是目前最常用的显示器分辨率之一，也是最大的高清分辨率。
设计师可以选择这个尺寸作为网页设计的起点，然后根据需要进行调整。
2. 1366 x 768像素：这是一种常见的笔记本电脑分辨率，也是目前很多移动设备的屏幕分辨率。
设计师可以根据这个尺寸进行网页设计，以确保在不同设备上都能有良好的显示效果。
除了上述常见的尺寸规范，还有一些其他的网页尺寸规范也需要了解：1. 响应式设计：响应式设计是一种适应不同设备和屏幕尺寸的网页设计方法。
设计师可以根据不同屏幕尺寸调整网页的布局和元素大小，以确保在不同设备上都能良好地显示。
2. 移动设备优先：由于越来越多的人使用移动设备浏览网页，设计师可以将移动设备的尺寸作为设计的首要考虑因素。
一般来说，移动设备上的网页尺寸应该小于桌面设备上的尺寸，以保证用户能够方便地浏览网页。
3. 流体设计：流体设计是一种根据浏览器窗口大小自动调整网页布局的设计方法。
设计师可以设置网页元素的宽度为百分比，使其根据浏览器窗口大小自动调整布局，以适应不同设备的屏幕。
最后，为了确保网页在不同设备上都能良好显示，设计师应该进行多个设备的测试，并根据测试结果进行调整。
同时，还应该注意网页加载速度，尽量减少页面尺寸过大对加载速度的影响。
总的来说，网页设计尺寸规范是根据不同设备和屏幕尺寸，确定合适的页面尺寸以便在不同设备上展示良好的效果。
设计师应该根据常见的屏幕比例和预测用户使用的设备，选择合适的尺寸规范，并运用响应式设计、移动设备优先和流体设计等方法，以确保网页在不同设备上都能有良好的显示效果。
网页设计规范
网页设计规范网页设计规范引导语：一个标准的网页设计需要按照一定的设计规范来进行，以下是店铺整理的网页设计规范，欢迎参考阅读!一、网页是什么定义：网页是构成网站的基本元素，是承载各种网站应用的平台。
通俗地说，网站就是由网页组成的，如果您只有域名和虚拟主机而没有制作任何网页的话，您的客户仍旧无法访问您的网站。
存放在网站服务器上的页面文件或脚本文件。
设计规范：文字与图片是构成一个网页的两个最基本的。
一般来说，好的网站应该给人有这样的感觉：★ 干净整洁★ 条理清楚★ 专业水准★ 引人入胜基本结构：★ TOP★ Header★ banner★ 栏目★ 底部信息二、banner设计四个原则★ 首先确定风格例如时尚风、复古风、清新风、炫酷风、简约风★ 排版原则对齐、聚拢、留白、降噪、重复、对比★ 文字排版重点突出，大小粗细错落有致，字体保持在2种左右★ 配色色彩是由色相、明度和纯度构成的三、网页设计配色原则需要配色的是你的画布，而不是你的图片。
一个在网页设计中最根本的原则是，无论你花了多少时间创造了一个辉煌的设计，其最终的作用是发挥出内容的核心位置。
你的`配色方案永远不应该比它呈现的内容的更加"响亮"。
你的设计应该是在后台，目的是帮助突出网站的内容。
★选择简单的灰色作为你网站的基调★只选择一种颜色突出显示四、优秀网页设计的七条基本准则★优秀的网页设计应该简约，并且完整。
“言简意赅”的设计才是好设计★信息层级要清晰，加载速度要快★网页设计必须具备一致性★将导航菜单作为交互的“核心”★留白和信息同样重要★用心的设计都有清晰的视觉层级★永远不要忽略字体【网页设计规范】。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网页设计规范
网页设计标准尺寸:
1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。
2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。
(在dw里面有设定好的标准值,1024*768页面的标准大小是955*600,照着它的尺寸做就行了)
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
标准网页广告尺寸规格
1、120*120，这种广告规格适用于产品或新闻照片展示。
2、120*60，这种广告规格主要用于做LOGO使用。
3、120*90，主要应用于产品演示或大型LOGO。
4、125*125，这种规格适于表现照片效果的图像广告。
5、234*60，这种规格适用于框架或左右形式主页的广告链接。
6、392*72，主要用于有较多图片展示的广告条，用于页眉或页脚。
7、468*60，应用最为广泛的广告条尺寸，用于页眉或页脚。
8、88*31，主要用于网页链接，或网站小型LOGO。
网页中的广告尺寸
1、首页右上，尺寸120*60
2、首页顶部通栏，尺寸468*60
3、首页顶部通栏，尺寸760*60
4、首页中部通栏，尺寸580*60
5、内页顶部通栏，尺寸468*60
6、内页顶部通栏，尺寸760*60
7、内页左上，尺寸150*60或300*300
8、下载地址页面，尺寸560*60或468*60
9、内页底部通栏，尺寸760*60
10、左漂浮，尺寸80*80或100*100
11、右漂浮，尺寸80*80或100*100
网页设计前端页面制作的规范要求和注意事项
1．尽量把页面的背景图及小图标整合到一张图片，用CSS定位方法。
这样以减少http请求，从而降底网站的下载速度。
2．尊从内容与页面样式的脱离，如需要，同样也要做到布局与COLOR的脱离。
什么样的图片属于内容：从数据库里取出来的图片。
凡是不属于内容的图片请都用背景。
1）页面代码，做到精简，逻辑性清楚；公用部位可以引入进来，比如头部，脚部。
2）CSS逻辑清析，精简。
可在不改变功能的前提内，做到能更换页面布局及换色。
CSS 样式每个页面引入不超过两个文件，一个是COMMON：它包含整个站点都需用到的公用部分，如整体布局，头部，脚部，框，按扭等。
另一个是当前页的CSS。
CSS文件引入在2个之内，减少http请求避免CSS的表达式。
3．将脚本放在底部。
这样页面就可以逐步呈现，而且页面中的可视组件可以尽早下裁。
配合程序开发人员我们需要注意的（xhtml）：
1．了解用户可编辑上传修改的“图片”，“文字”区域的需求。
根据需求来定位控制，
以保证页面的稳定显示。
如图片，需了解：
1）宽度是否是固定大小，
2）宽度最大限度，
3）大小不一样时的居中显示如文字，需了解：
1)文字的最大长度。
及加“…”省略号区域,
2)在测试中经常也会碰到英文无空格情况，得用overflow:hidden的方法隐藏溢出部分。
2．每个页面加上正确显示的TITLE。
3．在页面中尽量完成每步交互效果，包括既时响应的。
4．提交程序员的DEMO必须是连贯的，交互效里齐全，而且经过自已在
IE6.0，IE7.0，FIREFOX一次以上的整体测试。
设计师需要注意的几点：
1.尽量考虑为元素命名其本身的作用或尽量考虑为元素命名其本身的作用或尽量考虑为元素命名其本身的作用或尽量考虑为元素命名其本身的作用或”用意用意用意用意”，，，，达到语义化达到语义化达到语义化达到语义化。
不要使用表面形式的命名。
如:
red/left/big等。
2.组合命名规则组合命名规则组合命名规则组合命名规则:[元素类型]-[元素作用/内容]
如:搜索按钮:btn-search登录表单:form-login新闻列表:list-news
3.涉及到交互行为的元素命名涉及到交互行为的元素命名涉及到交互行为的元素命名涉及
到交互行为的元素命名:凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等
不同样式，命名可参考以下规则:
鼠标悬停:：hover点击：click已浏览：visited
如:搜索按钮:btn-search、btn-search-hover、btn-search-visited
4.用户体验方面需要注意的用户体验方面需要注意的用户体验方面需要注意的用户体验方面需要注意的：
1）每个连接，按钮要做上鼠标hover时的一个变化效果。
如果hover时是换一张背景图片，请把这两张图片整合在一张图片中，以防止在hover时，页面还在download 变化的那张图片，这样会出现那个按钮无图的间隔；
2）input有个label，可以让用户在点击字时，光标自动跳入相应input中；
3）图片应该有alt属性，以备图片阻止时，文字的替换。