网页规范
网页的排版规范
网页的排版规范网页的排版规范1、总体部局：布局平衡页面简约、无多余空白行，页面尺寸：1024×800分辨率下：页面宽度≤768，推荐高度：≤621：800×600分辨率下：页面宽度≤768，推荐高度：≤454。
2、排版规范：页面左右局中，中文段落必须有2个汉字的缩进，字间距采用默认大小，行间距为16px~20px即150%左右，段落之间空一行，中文使用12号宋体。
3、字体问题：最常用的字体有：宋体、微软雅黑、黑体这三种形式。
比较常用的是宋体。
因此网页中的正文文字信息，通常都是运用宋体。
对于网页中的标题文字，最好是使用那三种字体，这样也方便切图和程序，减少他们的工作量，也加快网页显示速度。
4、布局规范：布局是非常重要的，考虑客户浏览习惯以及他们想展现的内容，并且优化。
一个网页，如果布局不合理的话不但影响浏览，而且非常难看。
必须保持色彩平衡。
注意上下、左右的呼应。
注意页面整体协调。
提倡画面和文字的融合，而不是画面和文字的明显分离。
5、间距：各栏目框间距为5－8像素，网页设计最好采用积木式框架，方便切片。
在网页中，无论是文字、图片、表格、框架该对齐的就要对齐，保持在同一水平线上或一纵线上，可利用坐标数值和参考线定位。
6、风格统一：统一是指设计作品的整体性，一致性。
设计作品的整体效果是至关重要的，在设计中切要将各组成部分孤立分散，那样会使画面呈现出一种枝槾纷杂的凌乱效果。
网页上所有的图片、文字、包括象背景颜、区分线、字体、标题、注脚什么的，要统一风格，贯穿全站。
7、制作习惯：必须非常熟悉各种网站的功能，要做得非常全面，比如说一个商城的网站应该有哪些内容必须非常清楚，不要等客户提出之后才补充上去，会显得自己非常不专业。
8、不可忽视细节：客户对网站的感觉不好，不过又说不出，多半是细节处理问题，细心的处理网页的每一个象素，力求完美。
网页设计规范
网页设计规范参考总论 (2)一、目录结构规范 (2)1. 网站目录划分 (2)2. 多级目录 (2)3. 目录、文件的命名规范 (3)二、文件命名原则 (3)1. 命名原则的指导思想 (3)2. 路径/文件名设定 (3)3. 各路径下的开始文件 (3)4. html 文件的命名原则 (4)5. 图片的命名原则 (4)三、一般原则 (5)1. 表格问题 (5)2. 首行缩进 (5)3. 图片 (5)4. 字号 (6)5. 中英文混排时 (6)6. 行距 (6)7. 网站中的路径........................................................................................................ 错误！未定义书签。
四、代码编写规范 (6)1. 首页head区代码规范 (6)2. 页面内容部分代码规范 (7)3. CSS 文件的格式样例代码 (8)4. CSS的命名规范及部分简写说明 (9)5. CSS和JS尽量采取外部调用 (10)总论参考网上的一些文章和部分门户网站规范，结合用户浏览习惯以及实际策划、设计、使用中的经验，制订了《网站设计规范参考》，本规范既是一个开发规范，也是一个脚本语言参考，本规范并不是一个一成不变的必须严格遵守的条文，特殊情况下要灵活运用，做一定的变通。
但是，请大家千万不要随意更改规范。
如果有任何问题，请及时与我联系，我会及时更改本规范的相关代码样例和文档。
一、目录结构规范1. 网站目录划分在网站根目录中开设images 、js 、css、temp子目录☆images目录中放不同栏目的页面都要用到的公共图片，例如公司的标志、banner 条、菜单、按钮等等；☆css 子目录中放css文件，如果站点模板多尽量分成多个css文件调用；☆js 子目录中一般放javascript文件；☆temp 子目录放客户提供的各种文字图片等等原始资料。
网页管理制度规范
网页管理制度规范第一章总则第一条为了加强网页的管理，规范网页的内容和操作，有效提高网页的运行效率和安全性，本制度订立。
第二条本制度适用于企业全部网页的管理及使用，包含公开网页和内部网页。
第二章网页的建设第三条网页的建设应遵从以下原则：（一）确保网页的安全性和稳定性；（二）供应清楚、准确及时的内容；（三）界面友好，易于操作；（四）符合企业形象和品牌要求。
第四条网页的建设流程：（一）确定需求：依据部门或项目需要，明确网页的功能和内容；（二）设计方案：依据需求确定网页的结构和布局，编写网页的设计方案；（三）开发实施：依据设计方案进行网页开发和实施；（四）测试验收：对网页进行测试和验收，确保功能正常；（五）上线发布：经过测试和验收合格后，将网页正式发布上线；（六）维护更新：定期检查和维护网页，及时更新内容和功能。
第三章网页的管理第五条网页的管理应遵从以下原则：（一）负责人制度：明确网页的负责人，负责网页的日常管理和维护；（二）权限管理：依据不同职责和工作需求，限制不同人员对网页的操作和管理权限；（三）备份与恢复：定期备份网页数据，确保数据安全，能够及时恢复。
第六条网页的管理职责：（一）网页负责人应负责网页的日常管理和维护，包含内容更新、功能维护等；（二）技术人员应负责网页的开发、测试、部署等技术工作；（三）安全管理员应负责网页的安全管理，定期检查和修复漏洞。
第七条网页管理的具体措施：（一）定期检查与维护：定期检查网页的运行情形，确保网页的稳定性和安全性；（二）内容更新：及时更新网页内容，保持内容的准确性和时效性；（三）功能维护：依据需求和用户反馈，及时修复和调整网页的功能；（四）安全防护：加强网页的安全防护措施，防止黑客攻击和数据泄露；（五）异常处理：及时处理网页的异常情况，如页面错误、链接失效等；（六）用户支持：供应及时的用户支持和解答，满足用户需求；（七）域名管理：合理管理企业网页的域名，定期评估域名的使用情况。
网页设计规范知识点
网页设计规范知识点网页设计规范是指在设计和开发网页时需要遵循的一系列标准和准则，以确保网页的可用性、易读性和可访问性。
本文将介绍一些常见的网页设计规范知识点，以帮助设计师和开发人员创建出优秀的用户体验。
一、网页布局规范1. 响应式设计：采用响应式网页设计，使得网页能够适应不同设备和屏幕尺寸，并保持良好的布局和可读性。
2. 栅格布局：使用栅格系统来设计页面，保持页面元素的对齐和平衡，并提供良好的可视层次结构。
3. 内容层次结构：使用标题、段落、列表等来组织内容，让用户能够快速扫视页面并准确理解信息。
二、导航设计规范1. 一致的导航栏：在每个页面上保持导航栏的一致性，使用户能够轻松导航网站的不同部分。
2. 显眼的导航链接：将主要导航链接放在页面的顶部或侧边，并使用明显的颜色和样式，以便用户能够快速找到和使用导航。
3. 面包屑导航：使用面包屑导航显示用户当前所在的页面路径，让用户随时了解他们在网站的位置。
三、色彩和视觉规范1. 色彩搭配：选择适合主题和品牌的色彩搭配，确保页面的色彩和谐统一，并提供良好的对比度以增强可读性。
2. 图片和图标使用：使用高质量的图片和图标，确保它们清晰可见，并且与网页的其他元素相匹配。
3. 字体和排版：选择易于阅读的字体，并保持一致的字号和行间距，以提供良好的阅读体验。
四、交互设计规范1. 界面反馈：对用户的交互行为给予明确的界面反馈，比如按钮的变化、链接的高亮等，让用户能够准确了解他们的操作结果。
2. 用户体验导向：将用户的体验放在首位，设计人性化的界面和交互方式，提高用户的满意度和留存率。
3. 表单设计：简化表单输入，减少用户的输入工作量；对输入进行验证并提供错误提示，以此提升用户填写表单的效率和准确性。
五、可访问性规范1. 使用语义化标签：使用正确的HTML标签和属性，使页面内容结构清晰，并对搜索引擎和屏幕阅读器友好。
2. 图像和多媒体替代文本：对于图像和多媒体元素，提供替代文本以确保残障人士也能够理解和访问页面内容。
网页设计规范标准
网页设计规范标准1. 页面布局- 使用响应式设计，确保网站在不同设备上的适配。
- 采用网格布局，并保持一致的栅格系统。
- 合理利用空白区域，使页面整洁有序。
- 页面元素排列有序，遵循阅读顺序和重要性原则。
2. 色彩搭配- 选择合适的配色方案，使页面达到良好的视觉效果。
- 在不同的页面部分使用一致的色彩搭配，保持整体风格的统一。
- 注意色彩的对比度，以确保文字和其他元素易于阅读和辨识。
3. 字体选择- 使用合适的字体组合，使页面文本易于阅读且与整体风格相匹配。
- 字号的大小要适合不同设备上的阅读体验。
- 控制使用的字体种类数量，避免出现混乱和不协调的情况。
4. 图片与图标- 使用高质量的图片和图标，以提升用户体验。
- 优化图片大小和格式，以减小页面加载时间。
- 图片和图标要与页面主题相关，并具有清晰的表达意义。
- 设计简单明了的导航菜单，使用户能够轻松找到所需的信息。
6. 响应交互- 界面元素的交互要及时响应，并反馈给用户。
- 保持一致的界面反馈和动画效果，提升用户体验。
- 控制页面加载时间，提高网站的整体性能。
7. 页面内容- 内容排版清晰明了，段落分明，信息分类清晰。
- 使用简明扼要的语言表达，避免冗长和复杂的句子。
- 注意语法和拼写错误，确保内容的准确性和可读性。
8. 辅助工具- 为用户提供可访问的页面，考虑视觉障碍和其他辅助工具的使用。
- 提供搜索功能，方便用户快速检索信息。
- 确保页面文字和背景的对比度适宜，以满足辅助工具的要求。
以上为网页设计规范标准的一些基本要求。
在设计网页时，应综合考虑用户体验、视觉效果、页面可访问性等方面的因素，以提供优秀的网页设计作品。
web网页设计规范
web网页设计规范网页设计规范是指在设计和制作网页时应遵循的一系列规则和标准，旨在提高网页的可用性和用户体验。
以下是一些常见的网页设计规范，以帮助您制作出优秀的网页：1. 布局规范：- 使用网格系统：网格系统能帮助您保持页面的一致性和平衡感，同时也能让内容更易于阅读和理解。
- 使用响应式设计：确保您的网页能够适应不同的屏幕尺寸和设备，以提供更好的用户体验。
- 保持简洁明了：避免使用过多的装饰和不必要的元素，使页面看起来干净和易于理解。
2. 导航规范：- 显眼的导航栏：将主要的导航链接放置在页面的顶部或左侧，让用户能够轻松地找到所需信息。
- 使用面包屑导航：面包屑导航能够告诉用户当前所处的页面位置，方便用户进行导航和返回。
3. 字体规范：- 使用易于阅读的字体：选择适合在线阅读的字体，确保字体大小和间距合适，不影响用户的浏览体验。
- 限制字体种类和大小：过多的字体样式和大小会给用户带来混乱和困惑，尽量限制使用。
4. 图像和多媒体规范：- 优化图像和视频：确保您的图像和视频都经过压缩和优化，以提高页面加载速度和用户体验。
- 提供替代文本：对于图片和视频，提供替代的文本描述，以便于辅助技术用户和搜索引擎理解内容。
5. 颜色规范：- 使用品牌颜色：网页的颜色应与品牌色调相一致，以增加品牌识别度。
- 考虑色盲用户：避免依赖过多颜色来传达信息，确保页面的可读性和可理解性，特别是对于色盲的用户。
6. 可访问性规范：- 使用语义化标签：使用正确的标签来描述页面内容，以提升可访问性和搜索引擎的理解。
- 提供键盘导航：确保用户可以使用键盘进行导航和操作，尤其是对于残障用户。
7. 页面加载速度规范：- 压缩和优化文件：确保所有的代码和媒体文件（如图片和视频）都经过压缩和优化，以提高页面的加载速度。
- 使用缓存机制：利用浏览器缓存来提高页面的加载速度，减少用户等待时间。
总结：以上是一些常见的网页设计规范，通过遵循这些规范，您可以制作出易于使用和高效的网页，提供良好的用户体验。
网页设计尺寸规范
网页设计尺寸标准网页设计尺寸标准网页设计标准尺寸:1、800*600下，网页宽度保持在778以内，就不会出现程度滚动条，高度那么视版面和内容决定。
2、1024*768下，网页宽度保持在1002以内，假如满框显示的话,高度是612-615之间.就不会出现程度滚动条和垂直滚动条。
(在dw里面有设定好的标准值, 1024*768页面的'标准大小是955*600,照着它的尺寸做就行了)3、在ps里面做网页可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*560左右4、在PS里做的图到了网上就不一样了，颜色等等方面，因为WEB上面只用到256WEB平安色，而PS中的RGB或者CMYK以及LAB或者HSB的色域很宽颜色范围很广，所以自然会有失色的现象.页面标准按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。
广告形式像素大小最大尺寸备注BUTTON120*60(必须用gif) 215*50(必须用gif)7K7K通栏760*100430*5025K15K静态图片或减少运动效果超级通栏760*100 to 760*200共40K静态图片或减少运动效果巨幅广告336*280585*12035K竖边广告130*30025K全屏广告800*60040K必须为静态图片，FLASH格式图文混排各频道不同15K弹出窗口400*300(尽量用gif)40KBANNER468*60(尽量用gif)18K悬停按钮80*80(必须用gif)7K流媒体300*200〔可做不规那么形状但尺寸不能超过300*200〕30K播放时间小于5秒60帧(1秒/12帧)网页中的广告尺寸1、首页右上，尺寸120*602、首页顶部通栏，尺寸468*603、首页顶部通栏，尺寸760*604、首页中部通栏，尺寸580*605、内页顶部通栏，尺寸468*606、内页顶部通栏，尺寸760*607、内页左上，尺寸150*60或300*3008、下载地址页面，尺寸560*60或468*609、内页底部通栏，尺寸760*6010、左漂浮，尺寸80*80或100*10011、右漂浮，尺寸80*80或100*100IAB和EIAA发布新的网络广告尺寸标准在这6种格式中，除了去年iab发布的4种“通用广告包”中的格式：160x600, 300x250, 180x150及728x90，还包括新公布的468x60 和120x600(擎天柱)2种。
网页设计规范
网页设计规范网页设计规范是为了在设计网页时保持一致性、可读性和易用性而制定的一系列准则。
这些规范涉及到网页的布局、颜色、字体、图像和交互等方面，可以使网页更加美观、易于导航和高效使用。
下面是一些常见的网页设计规范：一、布局规范：1.网页的布局应该考虑到不同屏幕大小和分辨率的设备，采用响应式布局以适应不同终端。
2.合理利用网页空间，避免过度拥挤和过渡空白。
3.确保网页的结构清晰易读，使用一致的字号、字体和行高。
4.将网页内容分为各个模块，使用标题和副标题来突出重点。
二、颜色规范：1.选择合适的配色方案，避免使用过多的颜色，以免影响用户的阅读和导航。
2.使用鲜明的颜色来突出按钮、链接和重要信息。
3.确保使用的颜色对比度足够高，以方便用户阅读和操作。
三、字体规范：1.使用易读的字体，如Arial、Helvetica等。
2.避免使用过多不同字体，以免影响网页的可读性和一致性。
3.合理设置标题和正文的字号和行高，以提高用户的阅读体验。
四、图像规范：1.优化图像文件，使其大小更小，以提高网页加载速度。
2.确保图像与网页内容相关，并使用有意义的图像替代文本。
3.使用高分辨率的图像，以确保在各种设备上显示清晰。
五、交互规范：1.使用一致的导航栏和菜单结构，以方便用户导航网页。
2.保持页面的一致性和可预测性，使用户能够轻松理解和使用网页。
3.给用户提供明确的反馈，如按钮按下效果或加载动画。
4.合理设置表单和输入框，以方便用户填写信息。
六、网页性能规范：1.减少网页的HTTP请求，合并CSS和JS文件，以提高网页加载速度。
2.压缩和优化CSS和JS文件，以减小文件大小和提高执行效率。
3.使用浏览器缓存功能，减少资源请求次数。
总结：设计一个符合规范的网页可以提高用户的体验和对网站的好感度，促进用户留存和回访。
以上提到的规范只是一些常见的设计准则，实际设计中还需要根据不同的需求和目标进行具体的规范制定。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
基于公共css样式文件
专栏css样式文件 通用css样式文件 内容css样式文件 文字css样式文件 表单css样式文件 公共css样式文件
mend.css
menu.css module.css nav.css pages.css print.css Product.css
补丁css样式文件
菜单css样式文件 模块css样式文件 导航css样式文件 页面css样式文件 打印css样式文件 商品列表css样式文件
标准尺寸（像素） 形状 适用场合
300x250 250x250
130x300 360x300 468x60 234x60 88x31 120x60 120x240 125x125 120x600
中等矩形 正方形
垂直矩形 大矩形 通栏广告 半栏广告 链接用的logo标志 按钮样式 垂直按钮 正方形按钮 垂直通栏
help.css
index.css layout.css login.css master.css
2015年4月27日星期一
帮助css样式文件
主页css样式文件 布局、版面css样式文件 登陆css样式文件 主要css样式文件
Product-detail.css
search.css service.css themes.css User.css
主讲：李晶
1
主讲：李晶
名称 layout left link list login loginbar logo main menu
说明 布局 左 链接 列表 登陆 登陆条 标志 主题 菜单
1
2015年4月27日星期一
网站开发常用命名规范 css样式表文件中类和id标识常用名称
名称 column container content copyright cor corner count crumb current 说明 分栏 容器 内容块 版权块 转角 圆角 统计 导航 当前 名称 help homepage hot hotsale hotsearch icon inside joinus lable 说明 帮助 首页 热点 热买区 热门搜索 图标 内部 加入 标签
主讲：李晶
名称 message middle module more msg nav news note partner
说明 留言板 中部 模块 更多 提示信息 导航 新闻 公告 合作伙伴
1
2015年4月文件中类和id标识常用名称
名称 register right scroll search service shoppingCart sidebar 说明 注册 右 滚动 搜素 服务 购物车 侧栏 名称 sitemap source spec status submit summary tab 说明 网站地图 资源 特别 状态 提交 摘要 标签页 名称 textbox tips title toolbar top topmenu vote 说明 文本框 小技巧 标题 工具条 顶部 顶部菜单 投票
《WEB开发基础》
网页规范
2015年4月27日星期一
主讲：李晶
1
网站开发常用命名规范
文件夹的常用名称
名称 说明 名称 说明
images
img css flash themes
存放图片文件
存放图片文件 存放css文件 存放flash文件 存放主题文件
image
存放图片文件
style video pages
主讲：李晶
商品详情css样式文件
搜素css样式文件 服务css样式文件 主题css样式文件 用户css样式文件
1
网站开发常用命名规范 css样式表文件中类和id标识常用名称
名称 aboutus ad arrow banner bottom brand btn buide center 说明 关于我们 广告区 箭头 广告条 底部 品牌区 按钮 指南 中 名称 download drop droplist favorites focus footer form friendlink header 说明 下载 下拉 下拉列表 收藏 焦点 页脚 表单 友情链接 页眉
说明
广告图片 菜单图片 登陆按钮图片 导航图片 标题图片 logo photo
名称
Logo图片 照片
说明
btnUesrReg. btnsearch Btn_buy
注册按钮图片 搜索按钮图片 购买按钮图片
brand
品牌图片
validateCode
验证码图片
2015年4月27日星期一
主讲：李晶
1
网站开发常用命名规范 网页广告的尺寸标准
页面内部 页面内部
门户网站内容页面，适合与正文混排 弹出窗口广告 传统长幅广告 传统半幅广告 网站之间交换友情链接的广告 网站中大量客户的小幅广告 网站中大量客户的小幅广告 网站中大量客户的小幅广告 门户网站内容页面，适合与正文混排
主讲：李晶
2015年4月27日星期一
1
谢谢！
2015年4月27日星期一
顶部导航
底部导航 中部导航 边导航 边导航图标
Menu
Mainmenu Submenu
菜单
主菜单 子菜单
dropmenu
menucontainer
下拉菜单
菜单容器
2015年4月27日星期一
主讲：李晶
1
网站开发常用命名规范
网页图片的常用名称
名称
banner Menu btn_login nav title
site
站点
text
文本区
wrap
外层
2015年4月27日星期一
主讲：李晶
1
网站开发常用命名规范 网页导航栏的常用名称
名称 说明 名称 说明
nav
mainnav Subnav leftsidebar rughtsidebar
导航
主导航 子导航 左导航 右导航
Topnav
Bottomnav Middlenav Sidenav sidebaricon
存放css文件 存放视频文件 存放网页文件
Link
js resource
存放友情链接
存放javascript脚本文件 存放资料文件
2015年4月27日星期一
主讲：李晶
1
网站开发常用命名规范
css样式文件的常用名称
名称 说明 名称 说明
base.css
columns.css common.css content.css font.css Form.css global.css