网站设计规范参考
- 格式:doc
- 大小:47.00 KB
- 文档页数:7
网站设计规范模板一、概述在如今数字化时代,网站已经成为企业与用户进行信息传递和沟通的主要渠道之一。
一个好的网站设计不仅能够吸引用户的注意,还能提升用户体验并带来更多的商业机会。
本文将介绍一份网站设计规范模板,以帮助设计师和开发人员在设计网站时遵循一系列标准。
二、界面设计1. 布局:- 采用响应式网页设计,以适应不同设备和屏幕尺寸的用户访问。
- 页面布局清晰简洁,保持一致性,确保用户易于导航和浏览。
2. 色彩搭配:- 使用品牌色彩和主题色彩,以保持统一性。
- 避免过多的颜色使用,以免干扰用户视线。
3. 图像和图标:- 使用高质量的图像和图标,以提升页面的视觉吸引力。
- 优化图片大小,以保证页面加载速度。
三、导航设计1. 导航栏:- 在页面的顶部或侧边设计导航栏,提供清晰的导航标签。
- 使用可见的导航状态,以帮助用户追踪自己的位置。
2. 面包屑导航:- 提供面包屑导航,以帮助用户了解自己的位置,并方便返回上一层。
3. 搜索功能:- 在页面显眼位置提供搜索框,以便用户快速找到所需信息。
四、内容呈现1. 页面结构:- 使用清晰明了的标题、段落和小节,以帮助用户快速浏览和理解内容。
- 使用有序列表、无序列表和表格等元素,以清晰呈现数据。
2. 字体和排版:- 使用易于阅读的字体,确保足够的字号和行间距。
- 加粗、斜体、下划线等样式应谨慎使用,以增强重点信息的可读性。
3. 多媒体元素:- 合理使用图片、视频和音频等多媒体元素,但避免过多影响页面加载速度。
五、交互设计1. 用户注册和登录:- 提供便捷的用户注册和登录功能,减少用户的操作步骤。
- 安全性考虑,使用加密措施保护用户信息。
2. 表单设计:- 表单输入框和按钮设计要清晰明了,减少用户填写和提交的障碍。
- 对用户输入进行合理的验证和反馈,提高用户体验。
3. 页面反馈:- 用户与页面元素进行交互时,提供明确的反馈,以增强用户的操作响应感。
六、响应速度和兼容性1. 页面加载速度:- 优化图片和脚本的加载,以减少页面加载时间。
网站界面设计的规范在当今互联网时代,网站界面设计的规范成为了网站开发者和设计师们不可忽视的重要一环。
一个符合规范的网站界面设计能够为用户提供良好的使用体验,提高用户满意度和留存率。
下面将详细介绍网站界面设计的规范,包括布局规范、色彩规范、字体规范、导航规范以及响应式设计规范等。
1.布局规范:网页布局是网站设计中的重要步骤之一,良好的布局能够提高用户的使用效率。
以下是一些布局规范的要点:-主要内容应该位于页面的中心位置,不要靠左或靠右。
-在页面上使用网格系统,使元素对齐和排布更加整齐有序。
-确保页面的加载速度快,避免过多的图片和动画效果。
-使用合适的间距和边距,确保页面的可读性和可点击性。
2.色彩规范:色彩是网站设计中重要的视觉元素之一,正确使用色彩能够对用户产生积极的心理影响。
以下是一些色彩规范的要点:-使用有限的色彩,避免使用过多的鲜艳颜色,以免造成视觉混乱。
-使用相近的色彩进行配色,确保页面的整体风格统一-选择合适的对比色,在文字与背景之间有明确的对比度,提高可读性。
-避免使用过于亮或暗的颜色,以免影响用户的视觉体验。
3.字体规范:字体是网站界面设计中的重要组成部分,正确使用字体能够增加页面的可读性和美观度。
以下是一些字体规范的要点:-使用简洁易读的字体,确保用户能够轻松阅读文本。
-在不同的文本元素之间保持一致的字体风格。
-避免使用过小或过大的字体,以免影响用户的阅读体验。
-使用合适的行距和字间距,确保文本易读且美观。
4.导航规范:导航是网站界面设计中的关键组成部分,良好的导航能够为用户提供直观的页面结构和导航路径。
以下是一些导航规范的要点:-在页面的顶部或侧边添加导航栏,使用户能够快速找到所需的内容。
-避免使用过多的导航选项,以免让用户产生困惑。
-在页面底部添加备用导航,以方便用户在浏览完页面后继续导航。
5.响应式设计规范:随着移动设备的普及,响应式设计成为了网站界面设计不可或缺的一部分。
网页设计规范尺寸网页设计规范尺寸是指在进行网页设计时应遵循的一些标准尺寸。
这些规范尺寸可以帮助设计师在设计过程中更好地控制页面布局和元素的排列,提高用户体验和可视效果。
以下是一些常见的网页设计规范尺寸:1. 页面宽度:大多数网页设计采用固定页面宽度,一般为960像素或1000像素。
这个宽度可以适应大多数用户的屏幕分辨率,确保网页内容在任何设备上都能良好地呈现。
2. 头部和导航栏高度:头部和导航栏是网页重要的组成部分,它们通常设置为固定高度,一般为80像素。
这个高度可以容纳Logo、导航链接和搜索框等元素,让用户方便地浏览和导航网页。
3. 内容区域宽度:内容区域是展示网页主要内容的地方,通常占据页面的大部分宽度。
内容区域的宽度一般为实际页面宽度减去头部和侧边栏的宽度。
在1000像素宽度的设计中,内容区域宽度可以设置为900像素左右。
4. 侧边栏宽度:侧边栏通常用于放置一些与主要内容相关的附加信息或小工具,比如相关链接、标签云、社交媒体图标等。
侧边栏的宽度一般为页面宽度减去内容区域宽度后的剩余宽度,通常在100像素左右。
5. 图片尺寸:在网页设计中,图片是非常重要的元素之一。
为了保持网页的加载速度和可视效果,设计师需要对图片进行适当的压缩和尺寸调整。
常见的图片尺寸包括:头部背景图(通常为全屏宽度)、产品图片(一般为正方形或3:2比例)、轮播图(一般为全屏宽度)等。
6. 字体大小:在网页设计中,文字的可读性非常重要。
适当选择合适的字体大小可以保证用户能够方便地阅读网页内容。
通常,正文字体大小可以设置为14像素,标题字体大小可以设置为16-20像素。
7. 按钮尺寸:按钮是常用的交互元素,在网页设计中具有重要的功能。
按钮的尺寸应该根据其重要性和所需的点击区域来确定。
一般而言,按钮的高度可以设置为30像素,宽度可以根据文本长度和设计布局来调整。
总结起来,网页设计规范尺寸涵盖了页面宽度、头部和导航栏高度、内容区域宽度、侧边栏宽度、图片尺寸、字体大小和按钮尺寸等。
网站及APP界面设计规范(精选)一、概述在当今数字化时代,互联网已经成为人们获取信息、进行交流和娱乐的重要平台。
而网站和APP作为互联网的主要入口,其界面设计对于用户体验起着至关重要的作用。
良好的界面设计不仅能提升用户的使用体验,还能增加网站和APP的吸引力,促使用户产生持续的使用欲望。
本文旨在探讨网站及APP界面设计的规范,为设计师和开发者提供一些实用的指导原则和技巧。
二、布局设计1. 明确的导航条导航条是用户在网站和APP中进行导航和浏览的重要工具,因此应该保持明确、简洁和易于使用。
导航条的位置应该放置在用户视线范围内,通常位于页面的顶部或左侧。
导航条上的链接命名应该准确描述对应的页面或功能,避免使用过于晦涩的词语。
2. 统一的页面风格为了让用户在使用网站和APP时感受到一致的风格和氛围,设计师应该保持页面的统一性。
统一的页面风格包括颜色、字体、图标等方面的设计。
使用一种主题颜色来塑造品牌形象,并确保页面内容与之协调一致。
选择一种易读的字体,并在整个平台上保持一致。
图标的风格应简洁明了,便于用户理解。
3. 响应式设计随着移动设备的普及,响应式设计已经成为网站和APP设计的标准要求。
响应式设计能够使网站和APP能够自动适应不同设备的屏幕大小和分辨率,保证用户在不同终端上都能够获得良好的使用体验。
三、交互设计1. 简洁明了的操作流程用户访问网站和APP主要是为了获取信息或完成特定的任务,因此操作流程的简洁明了对于用户体验非常重要。
保持页面内容的简洁性,避免复杂的设计元素和干扰用户的功能。
同时,通过明确的提示和指引,引导用户进行下一步操作,减少用户的操作迷茫感。
2. 易于理解的反馈机制用户在使用网站和APP时,需要清楚了解自己操作的结果。
设计师应该给予明确的反馈,告知用户他们的操作是否成功,并及时提醒用户状态的变化。
比如,通过颜色变化、提示信息或动画效果等方式,让用户直观地感知到他们的操作。
3. 合理的交互元素排列交互元素的排列应该符合用户的使用习惯和心理预期,减少用户操作的负担。
网页设计制作规范要求由于互连网的日异普及,客户对网站设计、制作的要求有了很大的提高,因此,我们要把握好每一个细节,使网页设计制作的水平更上一层楼。
以下是网页制作的一些注意事项,希望大家能引起重视.一、网页制作中〈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.1 头部设计- 网站的LOGO应该明显且易于辨认,放置于页面的左上方。
- 导航栏应该简洁明了,显示网站的主要页面,方便用户进行导航。
- 在头部还可以设置搜索框、联系方式等相关信息,以方便用户浏览和联系。
1.2 内容布局- 确定内容的主次顺序,将主要信息置于页面的中心位置,吸引用户的注意力。
- 内容要分类清晰,通过分块和分栏的方式呈现,方便用户阅读和理解。
1.3 底部设计- 底部应该包含版权信息、联系方式、法律声明等重要信息。
- 可以在底部设置备案信息、友情链接等相关内容。
2.1 主色调- 网站的主色调应该与企业的品牌形象一致,能够体现企业的特点和价值观。
- 主色调的选择要考虑到用户的视觉体验和情感反应,避免使用过于刺眼或不搭配的颜色。
2.2 辅助色调- 设置适当的辅助色调来突出重要或特殊的信息,提高页面的可读性和吸引力。
- 辅助色调的选择可以基于主色调,避免颜色过于混乱或冲突。
三、字体规范3.1 主标题字体- 主标题的字体应该粗体或大号字,突出信息的重要性和吸引力。
- 字体的选择要考虑到与整体网站设计的一致性,避免过于花哨或难以辨认的字体。
3.2 正文字体- 正文字体应该保持一致性,易于阅读和理解。
- 字体的大小要适中,避免过小或过大,影响用户的阅读体验。
4.1 图片质量- 网站中使用的图片应该具有较高的像素和清晰度,以保证图片在各种屏幕上显示效果良好。
- 避免使用模糊、失真或拉伸的图片,影响用户的视觉体验。
4.2 图片大小- 图片的大小要控制在合适的范围内,避免加载过慢或占用过多的网站空间。
- 可以使用图片压缩技术来减小图片的大小,提高网站的加载速度。
五、交互规范5.1 导航规范- 导航栏的设计应该简单、明了,方便用户进行导航和浏览。
网站设计规范随着互联网的不断发展和普及,网站越来越成为我们日常生活中必不可少的一个工具,因此,网站的设计规范也显得尤为重要。
网站设计规范不仅能够提高用户体验,更能够吸引更多的流量,因此,网站设计规范越来越成为各大企业、机构和个人所关注的重点。
本文将从多个方面来探讨网站设计规范的相关问题。
一、简洁明了的设计风格网站作为一个信息传递平台,在设计上应遵循简约明了的原则。
简约的设计方式可以让受众更准确地理解网站所要传达的信息。
而繁杂的设计会让用户感到混乱,产生不良的用户体验。
对于网站的颜色、版式等设计要素,应保持简洁明了,使页面呈现的内容易于阅读和理解。
在网站设计中,色彩搭配、界面布局、字体使用等都需要考虑到合理性和美观性。
二、高品质的视觉体验除了简洁明了的设计风格,高品质的视觉体验也是网站设计中不可忽视的一方面。
严谨的设计细节、高质量的图片和动画、流畅的页面切换等元素都是惊艳受众的重要组成部分。
当然,对于这一点的做法不能盲目追求高大上,更要综合考虑美观性、易操作性和用户体验等多个方面因素,让用户得到更加优质的视觉体验和良好的使用感受。
三、符合网页更新要求的设计网站设计的时效性也是其重要的设计要素之一。
设计师需要充分考虑用户体验,在保证可维护的情况下进行设计。
对于内容较多或者多种类型信息的网站,需要与信息更新的频率进行考虑,随时做出针对性的调整,保证每条信息的展示都更具有时间性和实效性。
四、具有良好兼容性的设计随着科技不断发展,用户的浏览设备也日新月异。
为了让更多的用户可以正常访问和操作网站,良好的兼容性显得非常重要。
因此,设计师需要设计出适应不同终端(如手机、平板电脑、电脑等)及操作系统的网站,确保不同客户端的流量都可以得到非常好的服务。
五、符合SEO优化标准的设计SEO优化可以提高网站在搜索引擎中的排名,增加网站流量、提升品牌价值和用户的满意度。
因此,网站设计也需要符合SEO 优化标准,包括页面结构优化、网站速度优化、代码规范化、图片压缩优化等多个方面,以满足搜索引擎的优化要求,增强网站的搜索灵敏度和访问难度。
网页设计尺寸标准网页设计尺寸标准网页设计标准尺寸: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种。
网站及APP界面设计规范1. 引言在当今数字时代,网站和移动应用程序(APP)的界面设计对于用户体验至关重要。
一个优秀的界面设计可以提升用户的满意度,使其更轻松地使用产品或服务。
为了确保界面设计的一致性和效果,制定一套规范是必要的。
本文将介绍网站和APP界面设计的几个方面,包括布局、色彩、字体、图标和交互等。
2. 布局(1)容器宽度:在网页设计中,为了提供更好的可读性和视觉效果,常用的容器宽度是960像素或1200像素。
对于APP设计,可以根据屏幕尺寸自适应调整容器宽度。
(2)栅格系统:网页和APP的布局通常采用栅格系统,以保持一致性和美观性。
建议使用12栅格系统,便于布局元素的平衡和调整。
(3)内容呈现:在网页和APP中,内容应该按照逻辑顺序呈现,以确保用户能够轻松地获取所需信息。
重要的内容应置于页面或屏幕上部,次要内容可以放置在下部。
3. 色彩选择(1)品牌色彩:根据品牌形象和定位,选择一到三种主要颜色作为品牌色彩,并在整个网站和APP中保持一致使用。
(2)辅助色彩:辅助色彩用于突出重要信息,例如按钮、标签等。
建议选择与品牌色彩相搭配的颜色,并在整体设计中使用相对较少,以免过于花哨。
(3)背景色彩:背景色彩应该选择以增加整体网站和APP的可读性。
一般情况下,使用浅色背景和深色文字是较为安全的选择。
4. 字体选择(1)品牌字体:根据品牌形象和定位,选择一种或两种字体作为品牌字体,并在整个网站和APP中保持一致使用。
品牌字体应具备良好的可读性。
(2)内容字体:内容字体应具备良好的可读性,建议选择无衬线字体,例如Arial、Helvetica或Roboto等。
字号大小应根据不同设备的屏幕尺寸进行适当调整。
5. 图标设计(1)图标风格:图标设计应简洁清晰,符合整体界面风格。
常见的图标风格包括扁平化风格、线条风格和立体风格等。
根据品牌形象和界面需要,选择适合的图标风格。
(2)图标一致性:相似功能的图标应保持一致,以避免用户的混淆和困惑。
网页设计的尺寸规范许多的网页设计在进行网页布局设计时,进行界面网页的宽度尺寸设计都比较迷茫,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不超过14K1、120*120,这种广告规格适用于产品或新闻照片展示。
2、120*60,这种广告规格主要用于做LOGO使用。
3、120*90,主要应用于产品演示或大型LOGO。
4、125*125,这种规格适于表现照片效果的图像广告。
5、234*60,这种规格适用于框架或左右形式主页的广告链接。
6、392*72,主要用于有较多图片展示的广告条,用于页眉或页脚。
7、468*60,应用最为广泛的广告条尺寸,用于页眉或页脚。
网站设计规范参考一、设计风格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依照此原则类推。
☆尾部分用来表示图片的具体含义,如果有类似图片就用数字区别。
☆下面是几个样例,大家应该能够一眼看明白图片的意义:banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.giflogo_police.gif,title_top01.gif, title_top02.gif☆小标一定做成透明的。
(多指列表前的小图标GIF格式透明)3、Banner制作要求1)大Banner(468×60Pixel)容量尽量限制在15K内,格式尽量选用GIF及动态格式。
2)帧切换时尽量半静半动。
少用满底256色以上的图像。
闪切变化主要体现在文字上。
3)广告条的border设为0,并要求加上alt说明。
4)Flash Banner (见附件详细说明)4、图标和图片1)在图标的制作上应采用简捷,色彩明快的图标;在选用单色图标时应根据本栏目的色彩进行搭配。
2)图标存储为GIF格式(除个别情况外),尽量采用16色、填充色或单色。
3)图片依情况存成GIF或JPEG格式,原则上色调单一的图片存成GIF格式,色彩复杂、层次丰富的存在JPEG格式。
4)设计时不得用15K以上的图片,如图片过大可以考虑采用图片分割的办法。
5)内容图片、导航图片的border设为0,并要求加上alt说明。
6)普通图片不必加alt说明,但如果有链接要把border设为0。
7)公用图片或有可能更换的图片不要指定图片的尺寸大小(width, height)。
三、名称约定1、路径/文件名设定路径/文件命名时一律采用小写英文字母、数字、下划线的组合,其中不得包含汉字、空格和特殊字符;目录的命名请尽量以英文翻译为优先,尽量避免使用拼音作为目录名称2、路径/文件名称需与栏目菜单名称具有相关性3、各路径下的开始文件,命名为index.* 静态文件为index.html,动态文件为index.Asp,index.aspx,index.php,index.jsp4、文件名中用"_"下划线作为连接符。
5、如页面文件过长需要拆分,建议多个文件按顺序依次命名为filename01.*、filename02.*……内容不同但属于同类的,且需定期更新的页面文件或文本采用:名称缩写+(年份)+月份+日期+序号,如= news081508.*6、大流量网站的首页和各栏目首页尽量使用以html为文件后缀名的静态页面。
其他经常访问的动态页面也建议模拟为静态页面。
四、目录结构规范目录建立的原则:以最少的层次提供最清晰简便的访问结构。
1、目录命名的规范(参照名称约定)2、根目录一般只存放index.html以及其他必须的系统文件3、每个主要栏目建立一个相应的独立目录4、根目录下的images用于存放各页面都要使用的公共图片,子目录下的images目录存放本栏目页面使用的私有图片5、所有JS脚本存放在根目录下的scripts目录或includes目录6、所有CSS文件存放在根目录下style目录7、每个语言版本存放于独立的目录。
例如:简体中文gb,英文en8、所有flash, avi, ram, quicktime 等多媒体文件建议存放在根目录下的media目录,如果属于各栏目下面的媒体文件,分别在该栏目目录下建立media目录9、广告、交换链接、banner等图片保存到adv目录10、页面下载、解释时间在56k链接速度下不能超过40秒(栏目首页、表单页)或20秒(一般页面)。
五、链接规范1、新闻、信息类通常用新开窗口方式打开。
2、顶部导航、底部导航通常采取在本页打开,特殊栏目和功能可新开窗口。
3、链接带下划线为链接通常的默认风格,顶部导航或特殊位置为了观赏性可用样式表取消下划线。
4、链接的颜色可配合主题颜色风格改变,通常为蓝色、暗蓝色、黑色,但激活后的链接颜色、鼠标移动其上时的链接颜色要同本身颜色进行区分。
六、页面制作规范1、色彩规范1)根据网站性质,避免在一个页面上有太多的色彩,活泼但不失稳重,颜色柔和但不乱2)文字的色彩要与页面协调。
3)即使页面有背景图片,也应该设置背景色,通常默认设置背景色为白色2、表格1)定义表格宽度时使用绝对值(指定像素)。
2)页面中从上至下尽量拆分成多个层叠的表格,尽量用TBODY这个标签可以控制表格分行下载,当表格内容很大时比较实用,在需要分行下载处加上<tbody>和</tbody>3)表格必须指定(border,cellspacing,cellpadding),图文混排时推荐使用vspace=5hspace=5。
4)为加快网页下载速度,最好使用CSS定义类表格样式。
3、字体1)为了保证不同浏览器上字号保持一致,字号建议用点数pt和像素px来定义,pt一般使用中文宋体的9pt和11pt,px一般使用中文宋体12px 和14.17px 这是经过优化的字号,黑体字或者宋体字加粗时,一般选用11pt和14.17px 的字号比较合适。
2)大小为9pt时,行距为120%;信息类最终页面采用弹出方式,标题及正文字体规定为11pt,行距为140%。
所有页面字体大小建议不要超过11pt。
3)考虑字体大小的兼容性,避免使用size=2的方式定义,尽量使用pt或px并用css定义4)文字颜色与页面配色协调,不使用与背景色相近的颜色。
5)非图像设计的字体一律采用windows标准宋体。
(如果做特殊效果需做成图)要加粗文字用Bold,不要用Strong(strong 为强调)。
6)页面文本不使用下划线方式,也尽量少采用粗体显示。
4、CSS书写规范1)所有的CSS的尽量采用外部调用<LINK href="style/style.css" rel="stylesheet" type="text/css">2)代码较长的首页和重要栏目首页可直接内嵌CSS,避免调用时间太长,使页面未及时调用CSS风格而显得凌乱。
3)书写时重定义的最先,伪类其次,自定义最后(其中a:link a:visited a:hover a:actived 要按照顺序写)便于自己和他人阅读。
4)css命名规则(仅供参考)头:header内容:content/container尾:footer导航:nav侧栏:sidebar栏目:column页面外围控制整体布局宽度:wrapper左右中:left right center登录条:loginbar标志:logo广告:banner页面主体:main热点:hot新闻:news下载:download子导航:subnav菜单:menu子菜单:submenu搜索:search友情链接:friendlink页脚:footer版权:copyright滚动:scroll内容:content标签页:tab文章列表:list提示信息:msg小技巧:tips栏目标题:title加入:joinus指南:guild服务:service注册:regsiter状态:status投票:vote合作伙伴:partner(二)注释的写法:/* Footer */内容区/* End Footer */(三)id的命名:(1)页面结构容器: container页头:header内容:content/container页面主体:main页尾:footer导航:nav侧栏:sidebar栏目:column页面外围控制整体布局宽度:wrapper 左右中:left right center(2)导航导航:nav主导航:mainbav子导航:subnav顶导航:topnav边导航:sidebar左导航:leftsidebar右导航:rightsidebar菜单:menu子菜单:submenu标题: title摘要: summary(3)功能标志:logo广告:banner登陆:login登录条:loginbar注册:regsiter搜索:search功能区:shop标题:title加入:joinus 状态:status按钮:btn滚动:scroll标签页:tab文章列表:list提示信息:msg当前的: current小技巧:tips图标: icon注释:note指南:guild服务:service热点:hot新闻:news下载:download投票:vote合作伙伴:partner友情链接:link版权:copyright(四)class的命名:(1)颜色:使用颜色的名称或者16进制代码,如.red { color: red; }.f60 { color: #f60; }.ff8600 { color: #ff8600; }(2)字体大小,直接使用’font+字体大小’作为名称,如.font12px { font-size: 12px; }.font9pt {font-size: 9pt; }(3)对齐样式,使用对齐目标的英文名称,如.left { float:left; }.bottom { float:bottom; }(4)标题栏样式,使用’类别+功能’的方式命名,如.barnews { }.barproduct { }注意事项::1.一律小写;2.尽量用英文;3.不加中杠和下划线;4.尽量不缩写,除非一看就明白的单词.主要的master.css模块module.css基本共用base.css布局,版面layout.css主题themes.css专栏columns.css 颜色color.css文字font.css表单forms.css补丁mend.css打印print.css5、JS调用规范所有的javascript脚本尽量采取外部调用<SCRIPT LANGUAGE="JavaScript" SRC="script/xxxxx.js"></SCRIPT>javascript 利用id挂钩实现脱离!6、首页head区代码规范head区是指首页HTML代码的<head>和</head>之间的内容。