山东大学《网站设计与建设》课件第1章 Web设计综述

网 站 设 计 与 建 设Website design and developments第第1 1章章 WebWeb设计综述设计综述第一部分 Web基础知识3n网页、网站、主页、封页与超链接等基本概念nWeb比传统媒体所具有的独特特征 nWeb技术以及相关工具nWeb设计原则 概 述Web Web Web Web 设计最基本原则设计最基本原则设计最基本原则设计最基本原则Web Web Web Web 最小公分母设计原则最小公分母设计原则最小公分母设计原则最小公分母设计原则Web Web Web Web 页面布局设计原则页面布局设计原则页面布局设计原则页面布局设计原则Web Web Web Web 颜色设计原则颜色设计原则颜色设计原则颜色设计原则Web Web Web Web 字体设计原则字体设计原则字体设计原则字体设计原则 Web Web Web Web 设计设计设计设计深刻影响深刻影响深刻影响深刻影响1.1 Internet1.1 Internet与与IntranetIntranet nInternet又称为因特网，是一个全球性的计算机互联网络。它既是一个多媒体的通信媒介，又是一个无限的信息资源。它由成千上万个不同规模的网络通过自愿原则采用TCP/IP协议互相连接起来的一个巨型计算机网络。 nIntranet是指企业内部网，它采用 Internet 的协议标准，应用 Internet 的现有技术建设的企业内部网络。 1.2 网页，网站，封页与主页nWWW的含义是环球信息网(World Wide Web)，也简称为 Web网或“万维网”。 n网页 (Web Page)n网站 (Web Site) 也叫站点，是指在Internet上，由一组相互关联的文档和各种网页元素组成的集合。 n主页（Home Page） n超链接（Hyperlink） n超文本（Hypertext）6封页封页(Cover Page)(Cover Page)u在主页前面的网页，内容非常简洁，一般是在主页前面的网页，内容非常简洁，一般是简易抽象的绘图或简易抽象的绘图或flashflash动画，阐述网站当动画，阐述网站当下宣传的主题和意念，网站封页一般显示几下宣传的主题和意念，网站封页一般显示几秒的很短时间就自动跳转到主页或点击封页秒的很短时间就自动跳转到主页或点击封页也可以直接进入主页。也可以直接进入主页。u现在很多网站开始流行现在很多网站开始流行“封页封页”设计，但网设计，但网站不一定一直有封页，封页一个网站顶多有站不一定一直有封页，封页一个网站顶多有一个。一个。u封页相当于书的封皮，主页相当于书的目录，封页相当于书的封皮，主页相当于书的目录，其他网页相当于内容书页。其他网页相当于内容书页。7封页实例封页实例Web2.0Web2.0 是相对Web1.0 的新的一类互联网应用的统称。Web1.0 的主要特点在于用户通过浏览器获取信息。Web2.0 则更注重用户的交互作用，用户既是网站内容的浏览者，也是网站内容的制造者。web2.0网站与web1.0没有绝对的界限。nweb2.0技术可以成为web1.0网站的工具，一些在web2.0概念之前诞生的网站本身也具有web2.0特性web2.0的核心不是技术而在于指导思想。Web2.0与其说是一种新技术不如说是一种新的理念博客（Blog）、维基（Wiki）等Web 3.0Web 3.0一词包含多层含义，用来概括互联网发展过程中可能出现的各种不同的方向和特征n包括将互联网本身转化为一个泛型数据库；n跨浏览器、超浏览器的内容投递和请求机制；n人工智能技术的运用；n语义网；地理映射网；n运用3D技术搭建的网站甚至虚拟世界或网络公国等111.3 Web媒体新特征nWeb多媒体： Web是丰富多彩的多媒体 nWeb是非线性媒体：用户可以随时跳转到其他网页或网站,传统媒体是线性的。nWeb交互性：客户可与页面互动与被动地接受广播信息有本质的区别。n个性化 ：可提供一对一的客户需求信息。n一对一关系：大众媒体的概念和应用对于Internet无效,传统媒体为广播式传播。nWeb主动性： 主动获得信息。nWeb平等身份：聊天、博客(部落阁)、BBS、在线游戏和电子商务等。 1211.Web媒体新特征-续nWeb即时交流：E-email、聊天、在线游戏等。nWeb提供电子商务：B2C、C2C电子商务网站。 n信息搜索能力：有强大的信息搜索能力 如google nWeb即时性：一旦信息发布，瞬间就可借助Internet传遍世界各地，传统媒体做不到的。nWeb采用B/S架构： Web站点发布与传统软件C/S不同，省时省力、便于维护与发布。n无需培训：易于浏览信息、不需要任何客户培训，无须安装与卸载客户端软件。nWeb信息易修改、传播速度快和传播成本低。 nWeb充分使用原有信息：Web信息可以存于数据库中，传统媒体难于使用众多类信息和已有信息。131.4 Web技术和工具nWeb技术是人类所经历的发展最快的技术nB/技术：浏览器/服务器模式，所有页面信息和数据都放置在了服务器端，客户机上只需要有浏览器。 nWeb常用技术：HTML、DHTML、CSS、XML、AJAX 、JavaScript和Java Applets。 n网页设计工具：FrontPage、Dreamweaver、HotDog Professional、Netscape Communicator、IBM RSA、Eclipse、Web Page Maker和BEA WebLogic Workshop等。n由于HTML网页文件是一个纯ASCII文档，任何一个编辑器都可以编辑该类型文件 n最好的网站设计方法：手工编码加上所见即所得的工具。 141.5 Web设计最基本原则nWeb最基本设计原则：Web内容永远是第一位的，多媒体外观设计与设计技术始终是第二位的。Web内容是第一位的与Web客户是第一位的，是一致的。nWeb客户是指浏览网站的主要用户群。n站点在设计时既应该专注客户的共性，也应该兼顾个性。15Web客户特点n80%的Web客户只扫描网页的关键字和短语n普通客户读Web内容比纸张慢25%。nWeb客户和站点设计关系：WebWeb设计必须吸引人，以客户为本，引导设计必须吸引人，以客户为本，引导他快速找到他所需要的内容。他快速找到他所需要的内容。WebWeb客户不希望网页充斥无关内容和混乱客户不希望网页充斥无关内容和混乱图像。图像。内容很重要，布局和传递也很重要。内容很重要，布局和传递也很重要。用可以赢得客户的布局特性来创建网页。用可以赢得客户的布局特性来创建网页。n确定当前网页设计客户资源环境最好的方法就是访问一些著名网站，了解这些网站的设计。n网站设计还要特别考虑你的客户群，针对不同的客户群可能客户环境差别是很大的 171.6 Web最小公分母设计原则n网站设计人员：最新的硬件、软件和插件。n设计基础指导原则：l最小公分母设计：使用大众客户群最低的环境设计网站，让更多的客户能顺畅浏览网站。n15吋显示器。n分辨率：800*600n36.6Kb/s ModemnIE6或更早n兼容Google Chrome、FireFox和360安全浏览器n极少用户会花时间下载插件(flash插件除外)l参照著名网站的设计(最有效)n网站设计还要特别考虑你的客户群 http:/ 800*600http:/ 1024*768http:/ 1280*1024返回返回返回返回1.7 Web1.7 Web页面与传统软件用户界页面与传统软件用户界面面 n都依赖于图形用户界面（GUI），即含有同样的基本设计构件：窗口、图标、菜单和指针。nWeb页面更注重的是信息的展示，而传统软件界面更注重的是系统功能的实现 nWeb站点比传统软件更专注于内容 “Web内容永远都是第一位的” 241.8 Web页面布局nWeb 页面布局：是对页面的整体规划，即对页面划分成不同的区域，用于放置不同的页面元素。n网页布局直接影响到网站的外观和结构,页面布局按照导航元素放置的位置进行分类。 25 Web页面布局设计原则 1/2n页面布局应该遵循翻转金字塔样式：首先提供给用户一个摘要列表，然后是对细节的链接或者引用。 u页面布局是设计人员向用户展示信息的方式，页面布局是设计人员向用户展示信息的方式，必须具有逻辑性、易于理解，并遵守它。必须具有逻辑性、易于理解，并遵守它。u一定不要一定不要设计设计左右拖动页面，左右拖动页面，可以可以上下拖动上下拖动页面，而且页面，而且不易不易拖动过长，客户往往会忽视拖动过长，客户往往会忽视页面下面的内容。页面下面的内容。u借鉴成功相似网站的页面布局。借鉴成功相似网站的页面布局。 26Web页面布局设计原则 2/2n对于整个网站每个页面的布局应该相对保持协调一致，不应该有大的跳跃感觉。n页面布局对于一个网站不易过多，应该根据网站内容合理地设计页面布局。n同类型网页应该有相同和非常相似的页面结构。n切忌不要边设计边修改页面布局，否则会浪费很多时间和精力，一旦确定就不要轻易修改。公共布局格式：按导航元素放置的方式分类n左边空白布局n上边空白布局n分布式左边和上边空白布局n右边空白布局n上边和中部布局n上下布局n分布式布局n艺术风格布局左边空白布局左边空白布局上边空白布局上左边空白布局右边空白布局上下边空白布局分布式布局艺术风格布局网页布局元素n网页布局：在建立网站前应首先考虑网站的外观和结构。从视觉和技术角度审视整个页面元素以及它们之间的关系。然后在整个网站上贯彻所选择的元素：布局、字体、颜色、图像以及其布局、字体、颜色、图像以及其它多媒体。它多媒体。页面布局是设计人员向用户展示信息的方式，必须规划一个结构，要具有逻辑性、易于理解，并遵守它。网页布局元素包括页面规划布局、边界、字体、颜色、图像以及表格等：n框架：规划页面布局，允许同时显示多个页面。n表格：规划页面布局，在单元格上可以放置各种网页元素，容易排版。n导航：控制用户在网站内的移动。n段落：在页面上分组文本字符。n图像：提供视觉吸引、信息和导航。n列表：组织并强调某些信息条目。n颜色：提供网站整体色彩感觉，增加可读性、易于分类。n边距：控制显示内容距浏览器窗口边界的距离。n边界：为HTML表和框架提供可见的边界。n空白：减少页面元素混乱，分开页面上的元素 n空白在网页设计中非常重要，它能够使网页看起来简洁、明快，阅读舒畅，是网页设计中必不可缺少的元素。n切记不要将尽可能多得信息放在一个网页中，应该有合理的、简明的分类，不要强迫客户从一堆信息中艰难地挑出所需要的信息，要让客户自己选择是否进入更深的链接获得信息。n也不要只为了让页面变短而分割页面，除非是在逻辑断点处。每一个页面都应该是独立完整的。 页面布局技术(1)层叠样式表(CSS)能完全精确的定位文本和图片浏览器是否支持CSS技术(2)表格页面布局：边界为0(3)框架页面布局(4)透明GIF页面布局 占位图像 (5) Flash页面布局页面布局技术：页面尺寸n切记在网页设计过程中，一定不要左右拖动页面，只能上下拖动页面，n而且也不能拖动过长，客户往往会忽视页面下面的内容。1.9 1.9 颜色与颜色与WebWeb设计设计 n当访问一个网站时，给我们的第一感觉是什么？是颜色。 n色彩以一种“隐蔽”的方式传达的各种信息 n几乎每一个成功的企业都有企业文化颜色，微软公司的颜色是天蓝色、Oracle公司的颜色是红黑色、IBM公司的颜色是蓝色等n发光物体三基色：红、绿、蓝 (RGB)n不发光物体的印刷四色：青、洋红、黄、黑 (CMYK) 青(C)、洋红(M)、黄(Y)和黑(K) 色彩都具有三个要素：色调、饱和度、亮度（或明度） n色调（Hue，简称：H）：指颜色的种类，它反映了颜色的基本面貌和性质。如：红、绿、蓝等各种颜色。色调H的单位是度，表示在颜色环上所处位置的角度；n饱和度（Saturation，简称：S）：指颜色的深浅程度或浓淡程度。一般鲜艳的色彩其饱和度都比较高，较刺眼，故饱和