《WUI网页界面设计（HTML5.0+CSS3+Javascript）》第二章 Web设计标准.pptx
;;W3C是制定网络标准的一个非营利性组织。W3C创建于1994年，研究Web规范和指导方针，致力于推动Web发展，保证各种Web技术能很好地协同工作。;Web标准制定的目的如下：
①提供最大的利益给尽量多的网站用户；
②确保任何网站的文档都能够长期有效；
③简化代码、降低建设成本；
④让网站更容易使用，能适应更多用户和网络设备；
⑤确保所有应用能够继续正确地执行。
;;随着智能手机的快速发展，人们更多依赖于手机阅读的方式。这就要求我们在进行网页设计时不仅要使网页适应各种手机尺寸的需求，更要考虑用户在使用手机阅读时的真实体验。除手机外，其他媒介也都具有各自的用户群体。;（一）网页内容的宽度与高度
网页设计内容的高度和宽度，一种为固定值宽、高，为绝对值，单位为?px，如大型网站，其数据量大。;亚马逊网站，采用固定的宽、高。另一种为百分比，属于相对值，如小型网站、个人网站、宣传网站等可做成响应式网站。;响应式布局（中国一汽网站）;;（二）网页最佳视域制定;分辨率为1?024?px×768?px的屏幕;分辨率小于1?024?px的屏幕;在进行网页尺寸的设定时，要考虑当前主流的显示器分辨率和浏览器类型，为网页设置一个最佳浏览尺寸，并在网页中提示浏览者以什么样的分辨率可以得到最佳的网页浏览效果。;不同分辨率及浏览器的首屏高度;不同分辨率用户的占比情况;建议将最主要的信息显示在580?px高度的范围以内。
;二、网站结构规范
（一）什么是网站结构
网站结构是指网站页面作为信息单元载体相互之间的组织关系，即网页之间的链接结构关系。
;（二）网站结构规范的优势;（三）网站结构分类
1.树状结构链接
树状结构链接类似于树枝的结构，树干是主页面内容，往下则是树枝——二级页面，以此类推。;树状结构链接是运用最广泛的网站结构，几乎所有网站的信息内容之间都使用这种树形关系进行链接。;2.并列结构链接
并列结构链接是指网站的页面链接相互之间是并列关系，类似于网络服务器的链接结构，因此也称为星状结构链接。;并列结构链接②;;腾讯网——两种结构链接结合的网站结构设计方式;网易链接结构;三、功能模块规范
模块分为导航模块、新闻模块、广告模块、搜索模块、注册留言模块、版权模块等。;;（二）模块的分类
1.导航模块
导航（navigation）就是链接其他单元、页面等的指示按钮。用户在浏览页面时必然会不断地跳转到下一单元或页面。导航不仅要表达出页面与页面之间、页面与内容之间的逻辑关系，最重要的是能够提供给用户便捷的网页浏览和跳转方式。它是展示网站规模、设计风格、查阅方式的基础系统。
;在视觉表现上，导航可以以文字、动画、图标和按钮等形式出现，并根据网页的设计风格和版式类型进行设计与编排。
;按钮形式导航;（1）全站导航。全站导航即主页面链接一级页面的导航或是并列内容单元的导航窗口，是整个网页中最主要的导航内容。;;（4）上下文导航。上下文导航主要指在产品展示或是内容介绍时以一句说明性的文字作为引导链接。它可以使用户进入更加详细的页面内容。
;（5）友情导航。友情导航主要提供网站的友情链接、联系方式、在线帮助等相关信息。;2.新闻模块
新闻（news）模块是展示新闻信息或新闻索引的模块。
;新闻索引模块;（1）新闻模块的字体规范：内容部分、新闻标题、栏目标题等多使用14号左右字体；不要大面积使用字体加粗。
;字体规范①;（3）网页设计中的对齐与传统的印刷排版中的对齐概念是一样的，并且同等重要。;;首行缩进方式②;;3.广告模块
网页的广告模块是整个网页设计中最显眼的地方，是画面视觉设计的集中体现，更是商家用于宣传的重要阵地。;横幅广告②;横幅广告③;横幅广告④;横幅广告⑤;横幅广告⑥;除了横幅广告外，还有很多形式的网页广告：插播式广告、电子邮件广告、关键词广告、文字链接广告、浮动广告、赞助式广告等。;安卓游戏广告;新浪网首页弹出式广告;某购物网站分类广告;某网站留学专题广告;（1）广告模块。禁止模仿任何Windows标准控件。Windows标准控件包括但不限于鼠标指针、按钮以及窗口控制按钮等。
;不使用按钮做长句广告;4.搜索模块
搜索（search）模块是指用于网站中搜索信息的模块。
;（1）文本框的规范如下：①搜索文本框的长度应适中，应至少提供能显示10个中文字符的宽度。②搜索组件中使用的文本框必须为单行文本框。③文本框的长度不得短于130?px，高度不得低于18?px。
（2）帮助信息一般包括三个方面内容：限定标签提示、热门关键词提示、标示性文字等。;（3）搜索按钮的规范如下：①搜索按钮一般包含图标形式和文字形式两种。使用图标形式时，只能使用放大镜的图标，而不能采用其他元素。使用文字形式时，搜索按钮的规