UI设计网页要求规范

1、页面命名

每个页面都要有与之模块对应的名称。

2、页面兼容性

（1）页面大小兼容

o自适应1366*768px及以上的分辨率

o默认窗口设置下，不应出现水平滚动条，避免出现垂直滚动条（当容过多时允许滚动条）

（2）弹窗、弹页要保证768高度的分辨率显示正常，同时能移动查看弹出框容。弹出框高度为不超过450px，且显示在容页面相对水平、垂直相对居中位置。

（3）浏览器兼容

兼容Chrome、Firefox、Safari、IE8及以上主流浏览器。

o文字

文字用系统自带的常规字体，且分一级标题、二级标题、主容文字、次容文字、辅助文字（说明或引导性文字，提醒性文字），分别用不同的字号、颜色。具体字号大小和颜色参考UI设计效果图。

o容图片

容图片均带1px描边；容图片未加载出来时显示系统默认图片。

1、数据操作

显示数据（表格）

（1）表头：字体加粗、且比单无格容字体大一号，且体字体大小参照UI效果图。

（2）单无格：文字图片容左对齐，数字、金额容右对齐。

（3）操作容原则上均用文字表达，如“编辑-删除”

（4）鼠标划过表格单行时，颜色高亮。

（5）原则上每页显示15-20条数据，实际显示条数据可按设计排列效果而定。

（6）表格中不定长的字段，固定显示宽度，超出容用“…”显示光标停留后，在浮动层显示详细容。

选中数据

（1）勾选全选则选中当页所有记录

（2）去掉当页某个记录的勾选，则全选也去掉勾选。

（3）翻页后，自动去掉已勾选的记录及全选的勾选。

（4）翻页后是否进行选择记录的保留应试具体业务而定。

（5）刷新页面后，自动去掉已勾选的记录及全选的勾选。

新增数据

（1）新增的记录必须排在新增页的首行；

（2）所有列表页面默认按数据新增时间倒序排列。

（3）提交失败后留在当前提交页，且保存用户已经输入的容以便再次提交。

（4）提交成功后自动回到数据列表页。

（5）提交时需对主要标识字段进行重复值、空值（空格）判断。

修改数据

（1）修改完成后必须回到原记录所在位置，且刷新显示修改后的值。

（2）提交失败后留在当前提交页，且保存用户已经输入的容以便再次提交。

（3）在查询条件下修改返回后，保留原有查询条件，且修改后的数据如果不满足查询条件则不显示。

（4）提交时需对主标识字段进行重复值、空值（空格）判断。

查询数据

（1）把所有查询条件全部显示出来，并放在查询列表上方位置。

（2）每个查询条件必须有预置文案。

（3）每次查询后保留当前输入的查询条件。

（4）当未查询到任何记录时，需给予未查找到相关记录的提示信息。

（5）除了用户明确要求不需要外，需提供模糊查询功能。

（6）必须要有条件“重置”功能，重置后恢复到初始状态。

删除数据

（1）必须有确认删除的提示信息。

（2）删除成功后刷新不显示删除的记录。

（3）删除成功后返回到原记录所在页面，而当原记录所在页不存在时，则返回上一页。

（4）当被删除的记录与其他记录存在关联时，请示需求界面给予不允许删除、更明细提示等信息。

提交/上传数据

（1）当提交所费的时间较长时，需给出等待的提示，如：沙漏、菊花、进度条等。

（2）提交时需对主标识字段进行重复值、空值（空格）判断。

（3）提交成功后不可重复提交，有列表展示提交容的直接返回到展示页面。

（4）必须要有“取消或返回”功能。

分页

（1）当对查询结果进行分页时，分页的同时需要能够执行查询功能；

UI设计网页要求规范

1、页面命名 每个页面都要有与之模块对应的名称。 2、页面兼容性 （1）页面大小兼容 o自适应1366*768px及以上的分辨率 o默认窗口设置下，不应出现水平滚动条，避免出现垂直滚动条（当容过多时允许滚动条） （2）弹窗、弹页要保证768高度的分辨率显示正常，同时能移动查看弹出框容。弹出框高度为不超过450px，且显示在容页面相对水平、垂直相对居中位置。 （3）浏览器兼容 兼容Chrome、Firefox、Safari、IE8及以上主流浏览器。 o文字 文字用系统自带的常规字体，且分一级标题、二级标题、主容文字、次容文字、辅助文字（说明或引导性文字，提醒性文字），分别用不同的字号、颜色。具体字号大小和颜色参考UI设计效果图。 o容图片 容图片均带1px描边；容图片未加载出来时显示系统默认图片。

1、数据操作 显示数据（表格） （1）表头：字体加粗、且比单无格容字体大一号，且体字体大小参照UI效果图。 （2）单无格：文字图片容左对齐，数字、金额容右对齐。 （3）操作容原则上均用文字表达，如“编辑-删除” （4）鼠标划过表格单行时，颜色高亮。 （5）原则上每页显示15-20条数据，实际显示条数据可按设计排列效果而定。 （6）表格中不定长的字段，固定显示宽度，超出容用“…”显示光标停留后，在浮动层显示详细容。 选中数据 （1）勾选全选则选中当页所有记录 （2）去掉当页某个记录的勾选，则全选也去掉勾选。 （3）翻页后，自动去掉已勾选的记录及全选的勾选。 （4）翻页后是否进行选择记录的保留应试具体业务而定。 （5）刷新页面后，自动去掉已勾选的记录及全选的勾选。

新增数据 （1）新增的记录必须排在新增页的首行； （2）所有列表页面默认按数据新增时间倒序排列。 （3）提交失败后留在当前提交页，且保存用户已经输入的容以便再次提交。 （4）提交成功后自动回到数据列表页。 （5）提交时需对主要标识字段进行重复值、空值（空格）判断。 修改数据 （1）修改完成后必须回到原记录所在位置，且刷新显示修改后的值。 （2）提交失败后留在当前提交页，且保存用户已经输入的容以便再次提交。 （3）在查询条件下修改返回后，保留原有查询条件，且修改后的数据如果不满足查询条件则不显示。 （4）提交时需对主标识字段进行重复值、空值（空格）判断。 查询数据 （1）把所有查询条件全部显示出来，并放在查询列表上方位置。 （2）每个查询条件必须有预置文案。 （3）每次查询后保留当前输入的查询条件。

网页设计规范

网页设计规范 网页设计标准尺寸: 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

网页设计规范制

网页设计规范制

网页设计规范 一、展现布局 （一）展现。 1.政府网站应简洁明了，清新大气，保持统一风格，符合万维网联盟（W3C）的相关标准规范要求。 2.政府网站应确定1种主色调，合理搭配辅色调，总色调不宜超过3种。使用符合用户习惯的标准字体和字号，同一类别的栏目和信息使用同一模板，统一字体、字号、行间距和布局等。 3.按照适配常见分辨率的规格设计页面，首页不宜过长。在主流计算机配置和当地平均网速条件下，页面加载时长不宜超过3秒。 4.对主流类别及常见版本浏览器具有较好的兼容性，页面保持整齐不变形,不出现文字错行、表格错位、功能和控件不可用等情况。 5.网站内容要清晰显示发布时间，时间格式为YYYY—MM—DD HH∶MM。文章页需标明信息来源，具备转载分享功能。 6.页面中的图片和视频应匹配信息内容，确保加载速度，避免出现图片不显示、视频无法播放等情况。避免使用可能存在潜在版权纠纷或争议的图片和视频。 （二）布局。 1.政府网站页面布局要科学合理、层次分明、重点突出，一般分为头部标识区、中部内容区和底部功能区。

2.头部标识区要醒目展示网站名称，可根据实际情况展示中英文域名、徽标（Logo）以及多语言版、搜索等入口，有多个域名的显示主域名。 3.中部内容区要遵循“从左到右、从上到下”的阅读习惯，科学合理设置布局架构。 4.底部功能区至少要列明党政机关网站标识、“我为政府网站找错”监督举报平台入口、网站标识码、网站主办单位及联系方式、ICP备案编号、公安机关备案标识和站点地图等内容。 5.政府网站各页面的头部标识区和底部功能区原则上要与首页保持一致。 （三）栏目。 1.栏目是相对独立的内容单元，一般为一组信息或功能的组合，按照信息类别、特定主题等维度进行编排并集中展现。 2.栏目设置要科学合理，充分体现政府工作职能，避免开设与履职行为、公众需求相关度不高的栏目。政府门户网站和部门网站应设置机构职能、负责人信息、政策文件、解读回应、工作动态、互动交流类栏目。 3.栏目名称应准确直观、不宜过长，能够清晰体现栏目内容或功能。 4.栏目内容较多时，可设置子栏目。栏目页要优先展现最新更新的信息内容。

网页设计规范

标准字体字号： 中文网页一般文字正文都采用宋体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，我们计划让网页文字在大部分显示器上都比较接近这个大小，那么在不同分辨率下应该显示成多大的字号呢？ 第一步：统计用户主要的分辨率和对应的屏幕大小。 要在物理尺寸和分辨率之间换算，首先要统计分辨率和对应的屏幕尺寸。用户分辨率的分布情况可以从网站的统计日志里获得。由于每个分辨率设置可能对应好几个不同尺寸的屏幕，而屏幕尺寸又无法通过网页获得，只好对现在的显示器市场进行统计分析：针对某一分辨率，统计可能的屏幕尺寸范围，从最小到最大，相对主流的是多大（或使用该范围的中间值作为主流尺寸）。如下图所示——

网页设计规范-中华人民共和国工业和信息化部

附件 网页设计规范 一、展现布局 （一）展现。 1.政府网站应简洁明了，清新大气，保持统一风格，符合万维网联盟（W3C）的相关标准规范要求。 2.政府网站应确定1种主色调，合理搭配辅色调，总色调不宜超过3种。使用符合用户习惯的标准字体和字号，同一类别的栏目和信息使用同一模板，统一字体、字号、行间距和布局等。 3.按照适配常用分辨率的规格设计页面，首页不宜过长。在主流计算机配置和当地平均网速条件下，页面加载时长不宜超过3秒。 4.对主流类别及常用版本浏览器具有较好的兼容性，页面保持整齐不变形,不出现文字错行、表格错位、功能和控件不可用等情况。 5.网站内容要清晰显示发布时间，时间格式为YYYY—MM—DD HH∶MM。文章页需标明信息来源，具备转载分享功能。 6.页面中的图片和视频应匹配信息内容，确保加载速度，避免出现图片不显示、视频无法播放等情况。避免使用可能存在潜在版权纠纷或争议的图片和视频。 （二）布局。 1.政府网站页面布局要科学合理、层次分明、重点突出，一般分为头部标识区、中部内容区和底部功能区。 2.头部标识区要醒目展示网站名称，可根据实际情况展示中英文域名、徽标（Logo）以及多语言版、搜索等入口，有多个域名的显示主域名。

3.中部内容区要遵循“从左到右、从上到下”的阅读习惯，科学合理设置布局架构。 4.底部功能区至少要列明党政机关网站标识、“我为政府网站找错”监督举报平台入口、网站标识码、网站主办单位及联系方式、ICP备案编号、公安机关备案标识和站点地图等内容。 5.政府网站各页面的头部标识区和底部功能区原则上要与首页保持一致。 （三）栏目。 1.栏目是相对独立的内容单元，通常为一组信息或功能的组合，按照信息类别、特定主题等维度进行编排并集中展现。 2.栏目设置要科学合理，充分体现政府工作职能，避免开设与履职行为、公众需求相关度不高的栏目。政府门户网站和部门网站应设置机构职能、负责人信息、政策文件、解读回应、工作动态、互动交流类栏目。 3.栏目名称应准确直观、不宜过长，能够清晰体现栏目内容或功能。 4.栏目内容较多时，可设置子栏目。栏目页要优先展现最新更新的信息内容。 5.做好各栏目的内容更新、访问统计和日常核查，对无法保障、访问量低的栏目进行优化调整或关停并转。杜绝出现空白栏目，暂不能正常保障的栏目不得在页面显示，不得以“正在建设中”、“正在改版中”、“正在升级中”等理由保留空白栏目。 （四）频道。 频道是围绕特定主题的重要栏目或内容的组合，一般设置在中部内容区顶部，在各页面统一展示，为公众便捷使用提供导航。重要的单个栏目也可以作为频道。频道设置要清晰合理，突出重点。频道不宜过多，一般以5—8个为宜。 （五）专题。 1.专题是围绕专项工作开设的特定栏目，集中展现有关工作内容。一般具有主题性、阶段性和时效性等特点。

Web页面设计规范

Web页面设计规范 编号： 版本号： 受控状态： 作者： 分发号：

文档修改历史记录文档修改记录

目录 1引言6 1.1 目的 6 1.2 范围 6 1.3 缩略术语 6 1.4 参考资料 6 2WEB页面框架内容6 2.1 页面框架 6 2.2 页面布局 6 2.2.1 布局原则 6 2.2.2 布局要求7 2.2.2.1 页面分割7 2.2.2.2 页面结构8 2.2.2.3 页面展现9 2.2.2.4 页面美化10 2.3 页面字体11 2.4 边距11 2.5 表格12 2.6 段落排版13 2.7 Frame 13 2.8 其他页面元素14 3页面风格15 3.1 风格分类15 3.2 页面风格应用15

4WEB页面交互15 4.1 页面元素焦点切换16 4.1.1 信息填写16 4.1.2 鼠标交互响应16 4.2 页面信息交互18 4.2.1 操作结果确认18 4.2.2 其他规则18 4.3 页面信息提示19 4.4 键盘响应支持21 5WEB页面通用规范22 5.1 一般页面功能22 5.1.1 新增22 5.1.2 修改22 5.1.3 删除22 5.1.4 查询23 5.1.5 取消23 5.1.6 保存23 5.1.7 重置23 5.1.8 返回23 5.1.9 分页23 5.1.10 全选24 5.2 一般页面规则24 5.2.1 默认值 24 5.2.2 必填值 24

5.2.3 界面传递25 5.2.4 窗口嵌套25 5.2.5 输入框操作25 5.2.6 在线帮助功能25 5.2.7 菜单功能要求26 5.2.8 快捷键功能27 5.2.9 快捷键的限制27 5.2.10 页面的规范性28 5.2.11 系统易用性29 5.2.12 输入安全性要求30 5.2.13 独特性要求31 5.2.14 多窗口的应用与系统资源31 6页面编程技术使用规范32 6.1 页面元素命名32 6.2 DHTMLx控件35 6.3 Flex控件35 7页面资源规格说明35 7.1 图标35 7.2 图片36 7.3 多媒体 36 8附录37 8.1 基于DHX的CSS规格示例37 8.1.1 表格CSS示例 37 8.2 典型应用的页面示例37

网页设计中的页面尺寸标准

网页设计中的页面尺寸标准 莫莫2012-11-17 22:06:50 对于固定宽度的网站布局，设计师常用的分辨率有：760px、780px、920px、950px等，如今大尺寸、宽屏幕的显示器越来越多，越来越普及，有些设计师也开始采用1000px、1003px 这样的分辨率。 页面最大化、满屏化的网站看着的确是舒服，但过高的分辨率在设计师显示器上合适，并不代表在浏览者的显示器上也合适。现在用的最多的分辨率还是1024*768，在这种分辨率下，含滚动条的页面最大宽度应不超过994px，所以一般页面宽度定位在990px以内比较适宜。 这一讲主要来说说网页设计的标准尺寸 一、在800*600分辨率下，页面宽度应在778px以内，这样不会出现横向滚动条，高度可以依据版面和内容而定。 二、在1024*768分辨率下，页面宽度应在1003px以内，如果仅一屏显示的页面，高度在612px～615px之间，这样横向和纵向滚动条都不会出现。 三、在photoshop中做800*600分辨率下仅一屏的网页时，尺寸可以设为740*560左右。 页面标准按800*600分辨率制作，尺寸为778px*434px 页面长度一般不要超过三屏，宽度不宜出现横向滚动条为宜 每个标准页面为A4幅面大小，即8.5*11英寸 全尺寸banner为468px*60px，半尺寸banner为234px*60px，小banner为88px*31px 小图标的标准尺寸还有120px*90px、120px*60px等 每个非首页静态页面含图片字节不超过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。 广告形式像素大小最大尺寸备注 BUTTON 120*60(必须用gif) 7K

网站设计规范参考

网站设计规范参考 一、设计风格 1、依照网站的定位确定整体的设计风格。 2、主体框架页面、内容页尽量采用方型结构。禁用长距离的斜线及弧线结构，可允许小范围内的斜线及弧线。封面页、专题页可不受此限制。 3、设计时尽量在方块区边缘、按钮、标题装饰块上体现设计技巧，拐角可以有曲线变化。拐角块最大不得超过18像素。同一页面弧度尽量保持一致。 4、各主要栏目之间要求使用一致的布局，包括一致的页面元素；一致的导航形式，使用相同的铵钮，相同的顺序。可跟首页有变化。 5、首页及各级页面都必须带有网站的LOGO(建议小于180×60)，并链接到网站首页。 6、统一按兼容分辨率1024*768设计。为了使显示更友好，建议使用970 px 或者960 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、图片的分类及命名规则 ☆名称分为头尾两两部分，用下划线隔开。 ☆头部分表示此图片的大类性质，例如广告、标志、菜单、按钮等等。 ☆一般来说: 放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner 标志性的图片我们取名为：logo 在页面上位置不固定并且带有链接的小图片我们取名为button 在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu 装饰用的照片我一般取名：pic 不带链接表示标题的图片我们取名：title 依照此原则类推。 ☆尾部分用来表示图片的具体含义，如果有类似图片就用数字区别。 ☆下面是几个样例，大家应该能够一眼看明白图片的意义：

网页设计的尺寸规范

网页设计的尺寸规范 许多的网页设计在进行网页布局设计时，进行界面网页的宽度尺寸设计都比较迷茫，800*600尺寸及1024*768尺寸的分辨率下，网页应该设计为多少像素才合适呢?面是小编为大家整理的网页设计的尺寸规范，欢迎参考~ 网页设计的尺寸规范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幅面大小，即英寸

全尺寸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*100 430*5025K 15K静态图片或减少运动效果超级通栏760*100 to 760*200共40K静态图片或减少运动效果巨幅广告336*280 585*12035K 竖边广告130*30025K 全屏

网页设计规范

网页设计规范.txt30生命的美丽，永远展现在她的进取之中；就像大树的美丽，是展现在它负势向上高耸入云的蓬勃生机中；像雄鹰的美丽，是展现在它搏风击雨如苍天之魂的翱翔中；像江河的美丽，是展现在它波涛汹涌一泻千里的奔流中。网页设计规范 网页设计制作规范 总论 本规范既是一个开发规范，也是一个脚本语言参考，本规范并不是一个一成不变的必须严格遵守的条文，特殊情况下要灵活运用，做一定的变通。但是，请大家千万不要随意更改规范。如果有任何问题，请及时与项目负责人沟通。 主目录下应有一个help目录,存放说明文件。说明文件包括： 目录说明 文件列表说明：存放位置、文件名称、功能及处理逻辑描述、所涉及的库表、调用关系。 数据库说明：数据库位置、空间分配要求、表设计、关系设计、视图设计、存储过程设计等。 ▲静态页面制作注意事项 一、制作常规要求 l 主要页面要写'title'（主页要写上企业中英文名称） l 主要页面'meta'字段便于搜索引擎查找。 l 尽量使用广泛支持的技术。以最流行的浏览器的最普及版本为标准，同时照顾低版本浏览器。 l 不使用过小的字体不使用过大的图片、动画、声音.不使用过长的滚屏 l 及时删除无用文件，防止无谓的下载速度减慢 l 由于server的linux系统，严格区分文件大小写!所有文件全部以小写字母命名，包括图形文件.禁止用中文作文件名。 l 页面以800X600屏幕设置营为主（实际尺寸为778*434px），但也应注意在1024X800 屏幕设置的浏览效果；即在800X600分辩率下应在浏览器中不出现横向的流动条； l 通常情况下页面应以居中为主，如有特殊要求可以设置居顶、居左； 二、文件命名规则与目录结构规则 l 首页面必须以“index.htm 、index.asp命名的文件。 l HTML文件扩展文件名一律用 .htm l 在根目录中原则上应该按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个image 的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。 l 除非有特殊情况，目录、文件的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录名应以英文、拼音为主。尽量用一些大家都能看懂的词汇。使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义。

网页设计制作规范

网页设计制作规范

目录 网页设计制作规范 (1) 一、页面设计制作基本要求 (4) 1.文件及目录命名及文档要求 (4) 1.1设置项目文件目录 (4) 1.2项目目录中各文件的命名及要求 (4) 1.3必备文档 (5) 2.页面尺寸 (5) 2.1基本说明 (5) 2.21024×768分辨率 (6) 2.3800×600分辨率 (6) 二、页面设计要求 (6) 1.设计流程 (6) 1.1首页设计 (6) 1.2栏目页设计 (6) 1.3辅助元素设计 (6) 2.页面布局及分层命名 (7) 2.1分层命名要求 (7) 2.2常用页面布局 (7) 3.页面常规布局要求 (8) 3.1文字 (8) 3.2图片 (8) 4.输出 (9) 4.1预览效果 (9) 4.2制作效果 (9) 三、页面制作要求 (10) 1.页面制作基本要求 (10) 1.1页面编码 (10) 1.2页面注释 (10) 1.3页面禁忌 (10) 2.页面结构及命名 (10) 2.1命名规范 (10) 2.2常用页面结构命名 (10) 2.3表单的命名规范： (11) 3.符合SEO的代码规范 (12) 3.1搜索优化 (12) 3.2帧结构 (12) 3.3优化网页代码 (12) 3.4Title设置 (12) 4.样式表使用 (12) 4.1样式表的命名 (12) 4.2样式表制作基本设置 (13) 4.3使用精简样式表： (14)

5.页面调试和浏览器兼容性 (15) 5.1浏览器兼容性说明 (15) 5.2页面调试方法 (16)

一、页面设计制作基本要求 1.文件及目录命名及文档要求 1.1设置项目文件目录 a)相关目录及命名：原则上以英文小写命名，各别可用中文命名 b)另：根据具体项目需要，可以按情况设置，但应在根目录写详细的“项目说明.txt”文档。 c)注：web\images\下面不要放无意义的图片，页面完成后应该将无意义的图片删除。 1.2项目目录中各文件的命名及要求 a)文件命名常规规范： ●用小写英文全称或者中文实际含义的名称 ●Web目录中不得出现中文名称 ●对于页面初稿和修改，要保留源文件，在修改的时候文件名后加日期，确定文件将日 期删除做为最终文件，切勿删除和覆盖。如：index0709.psd index0710.psd index.psd b)网页： ●格式：html ●命名：首页(index)，栏目页(该栏目英文全称) ●为保证没有歧义和项目操作方便，命名不要使用中文、中文拼音简介、引文缩写，如 有特殊情况，要写详细的说明文本 c)CSS： ●格式：css ●命名：以项目名称命名，如Vipoo，命名为vipoo.css ●个栏目中的css命名：除延用总的css以外，各栏目如有特殊的样式，可以以栏目名称 命名，并链接到改栏目的页面，如：about.css ●首页因访问量大，一般不采用外部链接的方式调用css，可以写到页面内部，并尽量精

H5页面设计规范

H5网页设计规范 1、非可循环平铺图片的背景图，须按最大屏幕尺寸来设计，即：1920*720； 2、集团、新闻类网站中间内容宽度使用1003PX；展示、购物类网站中间内容部分宽度使用1200PX； 3、必须删除非显示图层和参考线； 4、命名和分组必须规范，建议使用一下命名规则（如有更合适或者更熟悉的命名规则请提前与技术沟通）中英文均可； 页头：header 内容：content/container 页面主体：main 页尾：footer 导航：nav 侧栏：sidebar 栏目：column 整体布局：wrapper 左右中：缩写为L R C 水平/垂直：H/V 菜单：submenu 摘要: summary 按钮：btn/button 滚动：scroll 鼠标悬停：hover 点击：click 已浏览：visited。广告横幅：AD/ banner

5、建议将每个独立控件设计有明显的边界，如果不能给出明显边界，请在设计稿中标出与邻近控件的距离； 6、段落文字必须给出行高，必须使用10号以上字体，建议使用1.5倍行高和14号字体。 7、需要后台添加的文字（标题、内容等）必须使用常用字体，即宋体和微软雅黑； H5手机页面设计规范 1、PSD按照宽度640PX，高度不限来设计； 2、可点击部件不可小于88PX，（如果不够提交设计稿的时候特别说明）。 3、所有部件的尺寸大小必须是双数。 4、每个按钮需要有四个状态：默认、按下、选中、不可选。至少需要考虑：默认和不可选两个状态。 5、除广告图片外，其他图形部件尽量用图形工具绘制。 6、可点击部件尽量和屏幕四边保持20-30PX的距离。

《网页设计与制作》相关规范—网站设计通用规范

网站设计规范（通用） 一、设计风格 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 ?在页面上位置不固定并且带有链接的小图片我们取名为button ?在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名： menu ?装饰用的照片我们取名：pic

页面设计规范

文档属性： 文档变更

页面开发规范

目录 1 概述...................................................................................... . (3) 1.1 背景..................................................................................... .. (3) 1.2 目的..................................................................................... .. (3) 2 规范细则...................................................................................... (3) 2.1 页面设计意图明确..................................................................................... . (3) 2.2 页面HTML代码结构清晰，易于阅读和研发嵌入程序代码 (4) 2.3 页面流程清晰，指向明确..................................................................................... .. (6) 2.4 页面制作规范及其细节，增强seo效果 (6) 2.5 页面id,class及其css命名规范参考，提高团队开发效率和方便管理 (6)

网页设计规范

网页设计规范参考 总论 一、目 录 结 构 规 范 1. 网站目录划分 2. 多级目录 3. 目录、文件的命名规范 二、文 件 命 名 原 则 1. 命名原则的指导思想 2. 路径/文件名设定 3. 各路径下的开始文件 4. html 文件的命名原则 5. 图片的命名原则 三、一 般 原 则 1. 表格问题 2. 首行缩进 3. 图片 4. 字号 5. 中英文混排时 6. 行距 7. 网站中的路径 四、代 码 编 写 规 范 1. 首页head区代码规范 2. 页面内容部分代码规范 3. CSS 文件的格式样例代码 4. CSS的命名规范及部分简写说明 5. CSS和JS尽量采取外部调用 总论

参考网上的一些文章和部分门户网站规范，结合用户浏览习惯以及实际策划、设计、使用中的经验，制订了《网站设计规范参考》，本规范既是一个开发规范，也是一个脚本语言参考，本规范并不是一个一成不变的必须严格遵守的条文，特殊情况下要灵活运用，做一定的变通。但是，请大家千万不要随意更改规范。如果有任何问题，请及时与我联系，我会及时更改本规范的相关代码样例和文档。 一、目 录 结 构 规 范 1. 网站目录划分 在网站根目录中开设images 、js 、css、temp子目录 ☆ images目录中放不同栏目的页面都要用到的公共图片，例如公司的标志、banner 条、菜单、按钮等等； ☆ css 子目录中放css文件，如果站点模板多尽量分成多个css文件调用； ☆ js 子目录中一般放javascript文件； ☆ temp 子目录放客户提供的各种文字图片等等原始资料。temp 目录中的文件往往会比较多，建议以时间为名称开设目录，将客户陆续提供的资料归类整理。 ☆ 广告、交换链接、banner等图片保存到images下adv目录 2. 多级目录 在根目录中原则上应该按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images 和media 的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。 3. 目录、文件的命名规范 除非有特殊情况，目录、文件的名称全部用小写英文字母、数字、下划

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.组合命名规则:

网页设计制作规范_2

网页设计制作规范 本规范既是一个开发规范，也是一个脚本语言参考，本规范并不是一个一成不变的必须严格遵守的条文，特殊情况下要灵活运用，做一定的变通。但是，请大家千万不要随意更改规范。如果有任何问题，请及时与我联系，我会及时更改本规范的相关代码样例和文档。 /基本要求 1. 在网站根目录中开设images common temp 三个子目录，根据需要再开设media 子目录，images目录中放不同栏目的页面都要用到的公共图片，例如公司的标志、banner 条、菜单、按钮等等；common 子目录中放css、js,、php、include 等公共文件；temp 子目录放客户提供的各种文字图片等等原始资料；media 子目录中放flash, avi, quick time 等多媒体文件。 2. 在根目录中原则上应该按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images 和media 的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。 3. temp 目录中的文件往往会比较多，建议以时间为名称开设目录，将客户陆续提供的资料归类整理。 4. 除非有特殊情况，目录、文件的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录的命名请尽量以英文为指导，不到万不得已不要以拼音作为目录名称，经验证明，用拼音命名的目录往往连一个月后的自己都看不懂， /脚本编写

我们应该有一个脚本整体风格一致的概念，意思是一个月后和一个月前的你写的脚本风格保持一致，以及同一个工作组中不同的开发人员编写的脚本风格保持一致，因为我们不可能永远孤立的开发，你随时都有可能和三个月前的自己合作（你的客户要求改版），也经常要和工作室中不同的同事共同开发一个项目，还有可能被要求修改已经离职人员开发的脚本，当然你自己也有可能会扔下一个项目给后来的同事。 1. Html 文件的通用模板： html !-- Generator: Sub Design Studio (https://www.wendangku.net/doc/1014536036.html, ) Creation Data: 2000-8-1 Original Author: eastline -- head title 文档标题 /title meta http-equiv= content-type content= text/html; charset=gb2312 meta name= author content= eastline