- 1、本文档共32页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
Web页面设计规 X
|精.
|品.
|可.
|编.
|辑.
|学.
|习.
|资.
|料.
*
|
*
|
*
|
*
|
|欢.
|迎.
|下.
|载.
编 号: 版 本 号: 受控状态: 作 者: 分 发 号:
1 / 32
文档修改历史记录文档修改记录
文档修改历史记录
文档修改记录
日 期
版本号
更换人
更换内容
文档审核记录
日 期
版本号
审核人
审核看法
|品.
|可.
|编.
|辑.
|学.
|习.
|资.
|料.
*
|
*
|
*
*|
*
|
|欢.
|下.
|下.
|载.
目 录
1 引言 5
5
5
5
5
2WEB页面框架内容 5
|精.
5|品.
5
|可.
|编.
|辑.
6|学.
6
|习.
|资.
|料.
*| 6
*
*
*|
*
| 7
*
|
|欢.
|迎.
7
|下.
|载.
7
8
9
10
10
10
11
12
12
3 页面风格
13
13
13
4WEB页面交互 13
14
14
14
16
16
16
16
19
5WEB页面通用规
X19
19
19
|精.
|品.
|可.
19
|编.
|辑.
|学.
|习.
20
|资.
|料.
*
|
*
20
|
*
|
*
20
|
|欢.
|迎.
|下.
20
|载.
20
20
21
21
21
21
21
22
22
22
22
23
23
24
24
25
26
27
27
页面编程技术使用规 X27
27
30
30
页面资源规格说明 30
|精.
|品.
|可.
|编.
|辑.
|学.
|习.
|资.
|料.
*
|
*
|
*
|
*
|
|欢.
|迎.
|下.
|载.
30
31
31
附录 31
31
31
32
引言目的
本文用于规 X 我公司所开发的商业软件中对于 web页面的设计工作,明确在设计中所
要遵循的准如此和方法, web 页面中各个元素的规格要求,确保所实现的 web页面在风格、结构和功能上的统一,提升商业软件的外在品质;
X 围
本规 X 适用于公司全部的商业软件产品;缩略术语
DHML:X web 页面的 UI 控件
参考资料
WEB页面框架内容页面框架
WEB的页面框架是指构成完整页面的组织结构;通常是由以下三局部构成: Head, Main,Foot ,有些时候出于布局的需要,在“ Head〞下面仍会加上用于页面功能导航的“ Menu〞;如图:
|精.
|品.
|可.
|编.
|辑.
|学.
|习.
|资.
|料.
*
|
*
|
*
|
*
|
|欢.
|迎.
|下.
|载.
图 1
页面布局 布局原如此
对于 WEB应用来说,页面布局是和 web 应用的功能区相对应的,并且对于页面中各个局部之间的切分比例也需要遵守肯定的规如此;
页面布局的设计,第一需要考虑用户在浏览 web 页面时视觉流向上的要求:
图 2
从视觉流向上看,用户第一看到的是页面“ Head〞局部的左面,通常那里是标识这个WEB应用的 Logo;然后是陈设 WEB应用主要功能的“ Menu〞来用于页面导航;接下来用户将看的是处于页面左侧的“ sidebar 〞,通常这里也是用于页面功能导航的,和“Menu〞出的挑选相呼应,这里的内容可以通过类似树状结构的方式呈现更为具体的
功能;接下来是处于页面中心位置的内容局部,最终用户的视线落在 WEB页面的底部;
布局要求页面分割
|精.
|品.
|可.
|编.
|辑.
|学.
|习.
|资.
|料.
*
|
*
|
*
|
*
|
|欢.
|迎.
|下.
|载.
以上面图示的布局方式为例,依据通常 web 页面设计时所遵循的方法,并结合黄金分割比例的方法:
第一,将页面依据 3*3 的方式进展分割,如如下图:
在高度方向上,对上部 1/3 区域依据黄金分割的方法分出 head 和 menu的区域;
在宽度方向上,对中部左边 1/3 区域依据黄金分割的方法分出 sidebar 的区域,剩下的空间留给 content 区域;
在高度方向上,对下部 1/3 区域依据黄金分割的方法分出 foot 的区域;
页面结构
页面的布局中,各个区域大小的定义方式是不同的,请见如下图:
|精.
|品.
|可.
|编.
|辑.
|学.
|习.
|资.
|料.
*
|
*
|
*
|
*
|
|欢.
|迎.
|下.
|载.
图 3
在页面布局中,对各个功能区域的切分是依据“像素〞和“比例〞方式来进展的,以
1024*768 的辨论率做为基准,其中:
Head 区域,宽度是依据比例方式设置的,宽度依据 100%设置,高度采纳所占的固定像素值来确定的,一般占? px,假如有 menu区,如此调整为? px;
Menu区域,和“ head〞的配置要求是一样的,宽度依据 100%设置,高度结
您可能关注的文档
- 【物理】2021年天津市中考物理试卷.docx
- 【设计】皮带输送机的设计计算分解.docx
- 【总结报告】医学麻醉科实习工作总结.docx
- 【知识】高中化学知识点规律大全16《电解原理及其应用》(精).docx
- 【方案】华能莱芜100万机组汽机基础施工方案.docx
- 固定资产管理流程图.docx
- 一级圆柱齿轮减速器说明书.docx
- 【方案】西苑立交站(明挖顺作法)地下连续墙钢筋笼吊装方案.docx
- 第1章质点力学.docx
- 【设计】电气施工组织设计1.docx
- 2024年中国钽材市场调查研究报告.docx
- 2024年中国不锈钢清洗车市场调查研究报告.docx
- 2024年中国分类垃圾箱市场调查研究报告.docx
- 2024年中国水气电磁阀市场调查研究报告.docx
- 2024年中国绿藻片市场调查研究报告.docx
- 2010-2023历年初中毕业升学考试(青海西宁卷)数学(带解析).docx
- 2010-2023历年福建厦门高一下学期质量检测地理卷.docx
- 2010-2023历年初中数学单元提优测试卷公式法(带解析).docx
- 2010-2023历年初中毕业升学考试(山东德州卷)化学(带解析).docx
- 2010-2023历年初中毕业升学考试(四川省泸州卷)化学(带解析).docx
最近下载
- 内燃机车钳工(中级)职业鉴定理论考试题及答案.doc VIP
- 聚焦贯彻落实新时代党的组织路线存在不足.docx VIP
- 研究生学术英语读写教程(于华)课后习题答案.pdf
- 跨学科实践活动2 自制净水器(同步课件)-【上好课】2024-2025学年九年级化学上册同步精品课堂(沪教版2024).pptx VIP
- 抗凝剂皮下注射相关并发症及处理对策.docx
- 第十章 甲状腺功能减退症PPT课件.ppt
- 《红楼梦的饮食文化》.docx VIP
- PICMG_COMe R3.0原版标准完整.docx
- ERAS加速康复外科在产科应用进展.pptx VIP
- 河南省南阳市六校2021-2022学年高一上学期第一次联合测试地理试题.pdf VIP
文档评论(0)