网页设计方案之页面规范
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
例如：
放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner ； 标志性的图片我们取名为：logo ； 在页面上位置不固定并且带有链接的小图片我们取名为button ； 在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu ； 装饰用的照片我们取名：pic ； 不带链接表示标题的图片我们取名：title
二、设计的主要对象
分布布局
图文组织
整体结构 色彩搭配
风格体现
三、页面的设计考虑
用户系统配置
图像的和谐性
操作的适应性
强调 个性风格
代码的简便性
视觉的均衡性
字体的同一性
三、页面的各种规则
1、页面命名的规则 2、页面尺寸的规则 3、页面字体的规则 4、页面色彩的规则 5、页面用图的规则
命名规则
◎ 网站主页主要为缺省的 index.htm defualt.htm
◎ 文件名称统一用小写的英文字母、数字和下划线的 组合尽量按单词的英语翻译为名称。
例如：feedback(信息反馈)，aboutus(关于我们)
◎ 多个同类型文件使用英文字母加数字命名，字母和 数字之间用_分隔。
例如：news_01.htm。
命名规则
图片的命名规范 ： 名称分为头尾两两部分，用下划线隔开。 头部分表示此图片的大类性质。
有onmouse效果的图片，两张分别在原有文件名后加"_on"和"_off"命名。
尺寸规则
尺寸规范 尺寸规范请根据您的实际情况调整： 页面标准按 800*600分辨率，推荐尺寸为775*430px ，
1024*768分辨率，推荐尺寸为1005*？px 页面长度原则上不超 3 屏，宽度不超 1 屏
全尺寸banner为468*60px， 半尺寸banner为234*60px， 120*90，120*60小图标标准尺寸 每个非首页静态页面含图片字节不超过300K， 全尺寸banner不超过30K
支持交织显示 注意：过度多、照片的多用JPG格式。
关于“Logo”的规则
设计网站的标志(logo)，logo是站点特色和内涵的集中体现
注意：这里的logo不是指88X31的小图标banner,而是网站的标志。
标志可以是中文，英文字母，可以是符号，图案，可以是动物 或者人物等等，标志的设计创意来自你网站的名称和内容。
(1).网站有代表性的人物动物花草，可以以其为设计的蓝本。 (2).网站有专业性的，可以以本专业有代表的物品作为标志。 (3).最常用和最简单的方式是用自己网站的英文名称作标志。
关于媒体的应用建议
cookie用于识别、跟踪和支持访问者，要考虑到用户关闭cookie 的情况处理。 Java在Web中的应用主要是JavaApplet，但JavaApplet的下载速度 较慢，慎用。 Flash已经是较普遍的技术，推荐使用。 新网页制作建议采用XHTML规范，便于未来和XML接轨。XML系列技 术可以在服务器端使用，客户端暂时不推荐使用 非特殊要求，不推荐在网页上提供需要下载额外插件的媒体技术
色彩规则
一般来说，一个网站的标准色彩不超过 3 种（黑、白 不计），太多则让人眼花缭乱。主要分为主色，配色、辅 色三种基调。
标准色彩要用于网站的标志，标题，主菜单和主色块， 给人以整体统一的感觉。至于其它色彩也可以使用，只是 作为点缀和衬托，绝不能喧宾夺主。
必须注意：与主题相符合，与其他相协调
用图规则
1、整体结构 2、分页任务 3、生成图版 4、切割修饰 5、编写代码 6、添加程序 7、全站合成
纸张Baidu Nhomakorabea画
PHOTOSHOP DREAMWEAVER
IIS SERVER
一、设计的主要分类
1、用途：
电子商用 新闻咨询 交流信息
职能机构 资源下载 艺术个性
2、制作技术：普通平面 模拟三维 象素技术 矢量技术
L0GO 88*31
字体规则
在可行条件下，尽量减少页面字体，避免用户字库无次字 体，造成显示效果丧失
普通文本： 12px 宋体 10px verdana
——页面可显示的最小最清晰最完整的字体
标题文本：
黑体（清晰一般16px以上）
特别标注：
楷书、隶书（清晰一般14px以上）
特殊需要字体： 大幅可用GIF、PNG等透明背景的制作图片 渐变色较多的可直接使用JPG
使用 JPG / GIF / PNG 格式图片，避免使用BMP格式， 减少下载量提高下载速度，避免画质损失。
Jpg ： 全色高压缩比图像，清晰75%以上压缩比，无损85%以上 Gif ： 256色支持透明色，不损失画质时尽量减少色位数量
支持交织显示 Png ： 8位/24位支持透明色，尺寸小的前提下尽量选用24位
放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner ； 标志性的图片我们取名为：logo ； 在页面上位置不固定并且带有链接的小图片我们取名为button ； 在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu ； 装饰用的照片我们取名：pic ； 不带链接表示标题的图片我们取名：title
二、设计的主要对象
分布布局
图文组织
整体结构 色彩搭配
风格体现
三、页面的设计考虑
用户系统配置
图像的和谐性
操作的适应性
强调 个性风格
代码的简便性
视觉的均衡性
字体的同一性
三、页面的各种规则
1、页面命名的规则 2、页面尺寸的规则 3、页面字体的规则 4、页面色彩的规则 5、页面用图的规则
命名规则
◎ 网站主页主要为缺省的 index.htm defualt.htm
◎ 文件名称统一用小写的英文字母、数字和下划线的 组合尽量按单词的英语翻译为名称。
例如：feedback(信息反馈)，aboutus(关于我们)
◎ 多个同类型文件使用英文字母加数字命名，字母和 数字之间用_分隔。
例如：news_01.htm。
命名规则
图片的命名规范 ： 名称分为头尾两两部分，用下划线隔开。 头部分表示此图片的大类性质。
有onmouse效果的图片，两张分别在原有文件名后加"_on"和"_off"命名。
尺寸规则
尺寸规范 尺寸规范请根据您的实际情况调整： 页面标准按 800*600分辨率，推荐尺寸为775*430px ，
1024*768分辨率，推荐尺寸为1005*？px 页面长度原则上不超 3 屏，宽度不超 1 屏
全尺寸banner为468*60px， 半尺寸banner为234*60px， 120*90，120*60小图标标准尺寸 每个非首页静态页面含图片字节不超过300K， 全尺寸banner不超过30K
支持交织显示 注意：过度多、照片的多用JPG格式。
关于“Logo”的规则
设计网站的标志(logo)，logo是站点特色和内涵的集中体现
注意：这里的logo不是指88X31的小图标banner,而是网站的标志。
标志可以是中文，英文字母，可以是符号，图案，可以是动物 或者人物等等，标志的设计创意来自你网站的名称和内容。
(1).网站有代表性的人物动物花草，可以以其为设计的蓝本。 (2).网站有专业性的，可以以本专业有代表的物品作为标志。 (3).最常用和最简单的方式是用自己网站的英文名称作标志。
关于媒体的应用建议
cookie用于识别、跟踪和支持访问者，要考虑到用户关闭cookie 的情况处理。 Java在Web中的应用主要是JavaApplet，但JavaApplet的下载速度 较慢，慎用。 Flash已经是较普遍的技术，推荐使用。 新网页制作建议采用XHTML规范，便于未来和XML接轨。XML系列技 术可以在服务器端使用，客户端暂时不推荐使用 非特殊要求，不推荐在网页上提供需要下载额外插件的媒体技术
色彩规则
一般来说，一个网站的标准色彩不超过 3 种（黑、白 不计），太多则让人眼花缭乱。主要分为主色，配色、辅 色三种基调。
标准色彩要用于网站的标志，标题，主菜单和主色块， 给人以整体统一的感觉。至于其它色彩也可以使用，只是 作为点缀和衬托，绝不能喧宾夺主。
必须注意：与主题相符合，与其他相协调
用图规则
1、整体结构 2、分页任务 3、生成图版 4、切割修饰 5、编写代码 6、添加程序 7、全站合成
纸张Baidu Nhomakorabea画
PHOTOSHOP DREAMWEAVER
IIS SERVER
一、设计的主要分类
1、用途：
电子商用 新闻咨询 交流信息
职能机构 资源下载 艺术个性
2、制作技术：普通平面 模拟三维 象素技术 矢量技术
L0GO 88*31
字体规则
在可行条件下，尽量减少页面字体，避免用户字库无次字 体，造成显示效果丧失
普通文本： 12px 宋体 10px verdana
——页面可显示的最小最清晰最完整的字体
标题文本：
黑体（清晰一般16px以上）
特别标注：
楷书、隶书（清晰一般14px以上）
特殊需要字体： 大幅可用GIF、PNG等透明背景的制作图片 渐变色较多的可直接使用JPG
使用 JPG / GIF / PNG 格式图片，避免使用BMP格式， 减少下载量提高下载速度，避免画质损失。
Jpg ： 全色高压缩比图像，清晰75%以上压缩比，无损85%以上 Gif ： 256色支持透明色，不损失画质时尽量减少色位数量
支持交织显示 Png ： 8位/24位支持透明色，尺寸小的前提下尽量选用24位