网站与网页设计第1章web综述

第1章Web设计综述2网页、网站、主页、封页与超链接等基本概念Web比传统媒体所具有的独特特征

Web技术以及相关工具Web设计原则概述Web设计最基本原则Web最小公分母设计原则Web页面布局设计原则Web颜色设计原则Web字体设计原则Web设计深刻影响3Web设计重要性崭新信息通信平台和沟通方式Internet发布信息和获取信息Internet最重要信息发布技术Web设计技术相当简单与快捷网站是Internet信息高速公路

高速信息运输车的信息站点42.InternetInternet是由遍布世界的网络组成的一个松散全球网，它既是一个多媒体的通信媒介，又是一个无限的信息资源，采用TCP/IP协议，可以看作是信息的高速公路。Internet是20世纪最伟大的科学技术成就之一，其发展速度已经远远超过了任何其它学科，而且还是其他学科的助推器。信息通信角度：Internet是一个理想的信息交流媒介获取信息角度：Internet是一个庞大的信息资源库商业运营角度：Internet是一个网络电子交易平台娱乐休闲角度：Internet是一个花样众多的娱乐平台53.IntranetIntranet(内联网)是指企业内部网，采用Internet的协议标准，应用Internet一样技术而建立的企业内部网络。与Internet使用相同的信息技术从根本上改变了企业信息管理的方式提高了企业内部信息共享与交流的程度企业内部数据与企业外部数据交流更流畅降低了企业信息处理的成本，提高了工作效率64.WWW(WorldWideWeb)欧洲核子物理研究中心(CERN)研制。环球信息网(WorldWideWeb)，也简称为Web网或“万维网”。基于超级文本(Hypertext)方式的浏览器信息查询工具。浏览客户既是信息的享用者，也是信息的提供者提供服务：Telnet、FTP、Gopher、News、E-Mail等。在Web上可以看电影、电视、玩游戏、聊天、购物、学习和求职等

。74-1.补充云计算的定义（NationalInstituteofStandardsandTechnology,NIST）“云计算是一种计算模式，计算资源（例如网络、服务器、存储、应用和服务）是可配置的，构成一个共享的资源池，可以通过网络来方便、随需地访问这些资源，而其部署和释放能够快速进行，只需极小的管理代价或者与服务提供者的交互”——美国国家标准技术研究所物理世界人体传感器/驱动器互联系统++大脑神经系统神经元/肌肉物联网模型和分析感测控制智慧智慧的物联网是将人、物体和IT系统相互联接的整体系统，它以低成本、可灵活扩展的技术为支持，通过全面的数据收集、智能联网、预测性分析和深入最佳化，更好的管理物理世界4-2.补充物联网：智慧的物联网是继互联网之后的又一次信息产业革命一、服务全球化成为经济全球化的主导和主要内容服务全球化不是一个新现象，早在19世纪与货物贸易开始出现，不过分额很小，到20世纪70年代初，仅占全球出口贸易1/10，服务业跨国投资仅占全球跨国投资总额1/4。此后迎来快速发展的时期，1993年占全球贸易总额达到20.9%，此后有所缓慢下降，到21世纪初，占到33%，2006年服务业跨国投资已超64%。二、与制造业全球化互相推动1、制造业全球化高的产业，与其相关的服务全球化程度也高—例如汽车2、服务全球化引导制造业全球化—没有服务业分工和全球网络就没有制造全球化3、两者相互推动三、服务经济、工业、农业，发达经济体主要经济结构：321服务业占GDP60—75%四、20年服务贸易与货物贸易发展情况比较WTO统计，1980-2007年，世界服务贸易出口额从3600亿美元增加到32600亿美元，27年间增长了9.1倍；而同期世界货物贸易出口额从19880亿美元增加到135700亿美元，增长了6.8倍，服务贸易增长速度已经超过货物贸易，服务贸易在世界贸易中的地位越来越重要。越来越高。4-3.补充服务学：世界经济服务大发展的时代105.网页(WebPage)也叫Web页或Web文档浏览器所看到的每一个画面页面包含了众多的信息：文字、图像、声音、动画和视频等多媒体信息。网页对应磁盘上的一个ASCII文件，其后缀一般为.html、.htm。网页图像、声音、动画和视频等对应磁盘上的另外文件，网页文件只不过是在网页文档中引用这些多媒体文件而已。116.网站(WebSite)网站也叫站点，是指在Internet上，由一组相互关联的网页文档和各种网页元素组成的集合。一个网站对应磁盘上的一个普通文件夹，这个文件夹成为网站的根文件夹，网站的所有信息文件都会放在根文件夹或其子文件夹下。127.封页(CoverPage)在主页前面的网页，内容非常简洁，一般是简易抽象的绘图或flash动画，阐述网站当下宣传的主题和意念，网站封页一般显示几秒的很短时间就自动跳转到主页或点击封页也可以直接进入主页。现在很多网站开始流行“封页”设计，但网站不一定一直有封页，封页一个网站顶多有一个。封页相当于书的封皮，主页相当于书的目录，其他网页相当于内容书页。138.封页实例149.主页(HomePage)主页是用户进入一个站点缺省所看到的第一个页面，是站点的目录总索引，主页实际上是一个网站的唯一主入口点。一个网站的入口点可能有多个，但主入口点仅有一个，即一个网站仅有一个主页。1510.超链接、超文本超链接：HTML文档(或网页)之所以称为超文本，是因为它区别于一般的文本，网页还包含与其他网页相连的连接点，这些连接点可能是图形，也可能是文字，它们叫做“超链接”，通过点击，可以转到另一个网页或网站或打开一个应用程序。超文本：除包含文字，还包含声音、图形、图像、动画和视频等，还实现非线性地存储、组织、管理和浏览信息的超链接。“超文本”也称为超媒体（Hypermedia），是WWW的核心技术。1611.Web媒体新特征Web多媒体：

Web是丰富多彩的多媒体Web是非线性媒体：用户可以随时跳转到其他网页或网站,传统媒体是线性的。Web交互性：客户可与页面互动与被动地接受广播信息有本质的区别。个性化：可提供一对一的客户需求信息。一对一关系：大众媒体的概念和应用对于Internet无效,传统媒体为广播式传播。Web主动性：主动获得信息。Web平等身份：聊天、博客(部落阁)、BBS、在线游戏和电子商务等。1711.Web媒体新特征-续Web即时交流：E-email、聊天、在线游戏等。Web提供电子商务：B2C、C2C电子商务网站。

信息搜索能力：有强大的信息搜索能力如googleWeb即时性：一旦信息发布，瞬间就可借助Internet传遍世界各地，传统媒体做不到的。Web采用B/S架构：Web站点发布与传统软件C/S不同，省时省力、便于维护与发布。无需培训：易于浏览信息、不需要任何客户培训，无须安装与卸载客户端软件。Web信息易修改、传播速度快和传播成本低。Web充分使用原有信息：Web信息可以存于数据库中，传统媒体难于使用众多类信息和已有信息。1812.Web技术和工具Web技术是人类所经历的发展最快的技术B/Ｓ技术：浏览器/服务器模式，所有页面信息和数据都放置在了服务器端，客户机上只需要有浏览器。Web常用技术：HTML、DHTML、CSS、XML、AJAX、JavaScript和JavaApplets。网页设计工具：FrontPage、Dreamweaver、HotDogProfessional、NetscapeCommunicator、IBMRSA、Eclipse、WebPageMaker和BEAWebLogicWorkshop等。由于HTML网页文件是一个纯ASCII文档，任何一个编辑器都可以编辑该类型文件最好的网站设计方法：手工编码加上所见即所得的工具。1913.Web设计最基本原则Web最基本设计原则：Web内容永远是第一位的，多媒体外观设计与设计技术始终是第二位的。Web内容是第一位的与Web客户是第一位的，是一致的。Web客户是指浏览网站的主要用户群。站点在设计时既应该专注客户的共性，也应该兼顾个性。2013.Web客户特点80%的Web客户只扫描网页的关键字和短语。普通客户读Web内容比纸张慢25%。Web客户和站点设计关系：Web设计必须吸引人，以客户为本，引导他快速找到他所需要的内容。Web客户不希望网页充斥无关内容和混乱图像。内容很重要，布局和传递也很重要。用可以赢得客户的布局特性来创建网页。2114.Web最小公分母设计原则网站设计人员：最新的硬件、软件和插件。设计基础指导原则：最小公分母设计：使用大众客户群最低的环境设计网站，让更多的客户能顺畅浏览网站。≤15吋显示器。分辨率：800*60036.6Kb/sModemIE6或更早兼容GoogleChrome、FireFox和360安全浏览器极少用户会花时间下载插件(flash插件除外)参照著名网站的设计(最有效)网站设计还要特别考虑你的客户群2215.Web页面与传统软件用户界面都依赖于图形用户界面（GUI），即含有同样的基本设计构件：窗口、图标、菜单和指针。Web页面更注重的是信息的展示，而传统软件界面更注重的是系统功能的实现。Web站点比传统软件更专注于内容。Web内容丰富多彩，可以是文本，二维图像、三维动画、音频、视频或多种内容形式的混合体。2315.Web页面与传统软件用户界面-B/S(续1)Web页面(Yahoo中国主页)2415.Web页面与传统软件用户界面-C/S

(续2)传统软件界面(MicrosoftSqlserver2000企业管理器)

2516.Web页面布局Web页面布局：是对页面的整体规划，即对页面划分成不同的区域，用于放置不同的页面元素。网页布局直接影响到网站的外观和结构,页面布局按照导航元素放置的位置进行分类。

2617.Web页面布局设计原则–1/2对于整个网站每个页面的布局应该相对保持协调一致，不应该有大的跳跃感觉。页面布局对于一个网站不易过多，应该根据网站内容合理地设计页面布局。同类型网页应该有相同和非常相似的页面结构。切忌不要边设计边修改页面布局，否则会浪费很多时间和精力，一旦确定就不要轻易修改。2717.Web页面布局设计原则–2/2页面布局应该遵循翻转金字塔样式：首先提供给用户一个摘要列表，然后是对细节的链接或者引用。

链接到细节摘要提示信息列表页面布局是设计人员向用户展示信息的方式，必须具有逻辑性、易于理解，并遵守它。一定不要设计左右拖动页面，可以上下拖动页面，而且不易拖动过长，客户往往会忽视页面下面的内容。借鉴成功相似网站的页面布局。

2818.网页布局元素网页布局在建立网站前应首先考虑网站的外观和结构,页面布局按照导航元素放置的位置进行分类。网页布局元素：框架、表格、导航、段落、图像、列表、颜色、边距、边界和空白等。从视觉和技术角度审视整个页面元素以及它们之间的关系。然后在整个网站上贯彻所选择的网页布局元素。网页布局格式：Frameset、Margin、Border、Font、Color、Navigation、Rule、Whitespace、Table、List、Paragraph、Headinglevel、Image…2919.常见布局格式：按导航元素放置的方式分类左边空白布局上边空白布局左上页面布局右边空白布局上下页面布局分布式的布局艺术风格布局3020.空白布局元素“空白”实际上与其他页面布局元素有紧密关联，甚至是其他元素的一部分，比如行间距等。

“空白”在网页设计中非常重要，它使网页简洁、明快，阅读舒畅，是网页设计中必不可缺少的元素。“空白”是分隔其他元素的最主要因素。切记不要将尽可能多得信息放在一个网页中，应该有合理的、简明的分类，不要强迫客户从一堆信息中艰难地挑出所需要的信息，要让客户自己选择是否进入更深的链接获得信息。开发设计人员可以使用表和透明GIF图像来给页面添加空白。可以使用无边界HTML表定位内容，提供无内容的区域来布局页面。

3121.页面布局方法纸面布局法：在设计页面布局时，需要在纸面上画出页面布局的草图，将你的设想落实到纸面上，查看设计效果。软件布局法：使用图形软件工具设计页面布局草图，软件可以使用你比较熟悉的图形软件例如Photoshop、Fireworks等。切忌不要边设计边修改页面布局，否则会浪费很多时间和精力，一旦确定就不要轻易修改。3222.页面布局技术CSS页面布局：能完全精确的定位文本和图片，CSS是现在一个比较流行的页面布局方法。表格页面布局：几乎成为一个标准，可对不同对象加以处理。每一个单元格可以放置不同对象，易于内容对齐。表格边界应设置为0。框架页面布局：框架页面以左上角对齐，每个框架部分都可以独立控制，而表格就不可以。透明GIF页面布局：站位图像Flash页面布局：强大功能、信息更丰富，视觉及听觉效果要比其他布局更加具有冲击力。3323.Web颜色网站颜色给客户最直接的视觉冲击，它在网站的感知和展示上扮演重要角色。企业的文化、风格和态度可以通过网站的颜色体现出来，好的色彩搭配可以使网页独具魅力，相反则使浏览者感到厌烦。网页色彩的选择包括：色调、背景、文字、图表、边框和链接等应采用何种色彩，以及如何搭配等内容。3424.Web颜色原理发光物体三基色：红、绿、蓝(RGB)

不发光物体的印刷四色：青、洋红、黄、黑(CMYK)颜色显示：像素颜色三要素(HSB)：色调、饱和度、亮度颜色格式浏览器安全颜色：40个颜色用于OS，剩下的216种颜色用于页面。抖动是浏览器将颜色近似为它所支持的最相近的浏览器安全颜色的过程。

配色方案

：色调、配色方案、配色工具3525.Web颜色设计原则(1/2)：最直接的视觉冲击网站应该使用企业原有CI颜色，需要简洁、新颖、舒服、大方，充分体现企业的文化形象。网页色系要整个网站需要保持一致。网站的色系可以分为暖色系、中性系和冷色系几种。色系包含了网页底色、文字颜色、图片颜色、动画颜色和边框颜色等。Web三色原则：除了黑色和白色以外，主要颜色原则上不要超过三种，太多的颜色会导致网页色彩杂乱，令人厌烦。

3625.颜色确定原则(2/2)选择一种适合的配色方案网页元素应该选择与网站主体相一致的色调图像的颜色应该尽可能的少，从而减少图片尺寸应使用浏览器支持的216个Web安全颜色3726.Web字体设计原则：文本字体、图像字体标准、大方、清晰、引人入胜、协调英文字题：TimesNewRoman、Arial中文正文字体：宋体，9磅或12磅（相当于WORD的五号宋体字），12磅汉字大小为缺省设置。Truetype字体：无级缩放对于非标准字体，浏览器使用近似字体特殊效果字体应放在图形中段落行文字不易过长，不要横跨整个浏览器窗口改变页边距、行边距和颜色增加字体效果字体在整个网站上使用一致性原则，使用同一种字体表示同类型的数据或信息3827.字体和Web设计-NetscapeTrueDOC字体3928.字体和Web设计-Microsoft

OpenType字体4029.字体工具-查阅图片西文字体4130.字体工具-单字中文搜索引擎

4231.字体工具-中文在线字体浏览工具

4332.Web知名网站主页案例剖析IT国际著名公司IT国内著名公司国际著名大学国内著名大学44第1章小结Web基本概念：网站、网页、主页等Web媒体比传统媒体的新特征Web常用技术和设计工具Web客户及资源与Web关系页面布局常用格式颜色选择原则字体选用原则45第1章思考问题end1-2.网站、主页、封页与网页的关系如何？1-3.Web媒体与传统媒体有何区别？1-4.为什么说“Web设计中客户是第一位的”？1-11.什么是浏览器的安全颜色？1-12.颜色抖动的含义是什么？1-18.为自己的个人网站设计一个主页方案。46返回47800*600481024*768491280*1024返回5051返回52返回5354返回55返回56返回57返回58http://www.59http://www.返回60返回61返回62发光物体三基色：红、绿、蓝

(RGB)红（R）、绿（G）、蓝（B）等量的三基色混合成白光，适合发光的物体，如显示器。色环：将色彩按“红黄绿青蓝紫红”依次过渡渐变，就可以得到一个色环。63色环可将颜色分为：暖色系、中性系和冷色系暖色系：红、橙、橙黄、黄等色彩表现温馨、和煦、热情。中性系：黄绿、绿等色彩表现舒适、和谐。冷色系：青绿、蓝绿、蓝等色彩表现宁静、清凉、高雅。加色：由于RGB各分量为100%混合时形成白色，但各分量减少时，形成的颜色逐渐变深，因此RGB混合颜色称为加色。

返回64不发光印刷四色：青、洋红、黄、黑(CMYK)不发光物体：颜料、印刷媒体减色：由于CMYK各分量为100%混合时形成黑色，但各分量减少时，形成的颜色逐渐变浅，因此CMYK混合颜色称为减色。

由于所有打印油墨都包含一些杂质，因此CMY这三种油墨实际生成土灰色，必须与黑色(K)油墨合成才能生成真正的黑色。返回65颜色显示：像素一个像素表示图像的元素，是在屏幕上显示的最小元素。屏幕使用像素显示文本和图形，每一个像素一次只能显示一种颜色。同一幅图片在不同的计算机上显示的颜色略有不同，其主要原因是色彩不仅与颜色的设置值有关，还与显示器的类型、设计、显卡、计算机的配置以及周围的室内光线有关，但颜色设置值(RGB)是主要因素。返回66颜色三要素HSB：色调、饱和度、亮度(或明度)色调(Hue，简称：H)：指颜色的种类，颜色的基本面貌和性质。如：红、绿、蓝等各种颜色。色调H的单位是度，表示在颜色环上所处位置的角度；饱和度(Saturation，简称：S)：指颜色的深浅程度或浓淡程度。饱和度S的单位是百分比。亮度(Brightness，简称：B)：指颜色的明暗程度。如白色亮度高，黑色亮度低；黄色亮度最高，紫色亮度最低。亮度B的单位是百分比。非彩色（指黑、白色和各种深浅不一的灰色）只有亮度特征，没有色相和饱和度的区别。返回67颜色格式颜色：风格、文化和态度RGB：“0，255，0”绿十六进制数：“#00FF00”绿RGB颜色格式是一个24位颜色模式，每一个RGB值是一个字节(8位)，即每一种颜色有三个字节表示：8位(红)+8位(绿)+8位(蓝)=24位R、G、B均为255时就合成了白光，R、G、B均为0时就形成了黑色。颜色RGB十六进制红25500FF0000绿0255000FF00蓝002550000FF白255255255FFFFFF黑000000000返回68/hexh.html

69返回Photoshop拾色器：Web安全颜色70配色方案-色调红色：激奋色彩，代表热情、奔放、喜悦、庆典，有刺激效果，能使人产生冲动，有愤怒、热情和活力的感觉。例如党团或节庆网站。绿色：介于冷暖色之间，代表植物、生命、生机、蓬勃向上、和睦、宁静、健康、安全的感觉。植物园、动物园、游乐园、旅游网站、医院网站和环保网站常采用绿色为基调的网站。

。橙色：具有轻快、欢欣、热烈、温馨、时尚的效果。例如女性博客或网站常使用这种颜色为主色调。

黄色：代表高贵、富有，具有快乐、希望、智慧和轻快的个性，它的亮度最高。该颜色一般与红、蓝、橙等颜色做搭配颜色。71配色方案-暖色调72配色方案-色调(续1)蓝色：凉爽、清新、专业的色彩。代表天空、清爽、深远的感觉，能体现柔顺、淡雅、浪漫的气氛。例如Microsoft公司，IBM公司网站。紫色：代表浪漫、爱情，并给人以神秘、压迫的感觉。

棕色：代表土地。例如对于沉稳、古色的网站。

白色：代表纯洁、单纯、简单，具有洁白、明快、纯真、清洁的感受。黑色：代表严肃、庄严、夜晚、沉着，具有深沉、神秘、寂静、悲哀、压抑的感觉。例如记悼网站。灰色：代表阴暗、消极，具有中庸、平凡、温和、谦让、中立和高雅的感觉。主要用于配色，特别是按钮、方框和图片边缘修饰。

73配色方案：单色方案、相似色方案、补色方案和三合一色方案单色方案：在网站设计中始终使用一种基本颜色，为避免单调，我们可以通过调整这种基本颜色的灰度和亮度来得到更多的颜色。单色方案是一种比较稳重的方案，给客户简洁、清雅和经典的感觉，比较适于风格严谨的网站，比如政府网站，学校网站、学术网站，企业网站等。74配色方案：单色方案、相似色方案、补色方案和三合一色方案(续1)相似色方案：色彩圆环上选择彼此相邻的几种颜色构成的配色方案。例如橙色、橙红色以及橙黄色就可以组成一个相似色方案。典型做法是用一种颜色作为页面背景，而另外一种在颜色环中与其相邻的颜色作为前景色。除了绿色和黄色之外，蓝色和绿色以及红色和褐色也是比较常用的相似色配色方案。75配色方案：单色方案、相似色方案、补色方案和三合一色方案(续2)互补色方案：在色彩圆环上沿直径相对应的两种颜色构成一对互补色，下图中小箭头所指的红色和深绿色就互为互补色。双重互补色：分别在色彩圆环两个互补色的临近两边选择两个相似色就可以得到一个由这四种颜色组成的。76配色方案：单色方案、相似色方案、补色方案和三合一色方案(续3)三色方案：是指在色彩圆环中选择一个等边三角形三个顶点上的颜色构成的配色方案。例如红、黄、蓝是一个三色方案。Photoshop构造三色方案方法：首先选中一种颜色，记下它的H(Hue)值，然后为这个值加120得到另一种颜色(H的单位是“度”，也就是沿色彩圆环旋转的角度），以此类推得到第三种颜色，构成一个三色方案。77配色方案：配色工具78配色方案：配色工具(续1)79配色方案：配色工具(续2)返回80

81

–

2009

云82/zh/cn/default.aspx

–

2009

云83/zh/cn/default.aspx

–

2010

云84/zh/cn/default.aspx

–

2010

云85/zh/cn/default.aspx

–

2010

云86/en-us/default.aspx–

2011

云87/zh-cn/default.aspx–

2011

云微软中英文网站同步

！88/en-us/default.aspx(1)–

2012

云2012年飘走了！英文主页两张主题图片、中文版三张主题图片89/en-us/default.aspx(2)–

2012

云2012年飘走了！英文主页两张主题图片、中文版三张主题图片90云2012年飘走了！/zh-cn/default.aspx(1)–

201291云飘走了WindowsPhone来了！/zh-cn/default.aspx(2)–

201292云在哪里？-异国城市风情来了！/zh-cn/default.aspx(3)–

201293/en-us/default.aspx–

2012

云2012年飘走了！94/zh-cn/default.aspx–

2012

云微软中英文网站同步

！95–

2013

云飘走了，微软蓝也飘走了,但微软.cn域名终于有了！页面随窗口大小自动调整内容大小！！微软中英文网站仍同步

！96

97

–2009

云98

–2009

云99

–2010

云100

–2010

云101

–2011

云102

–2011

云103/index.htm?zh_CN_01–2011

云104

–2012

云的痕迹！中英版略有不同105/index.htm?zh_CN_01–2012

云飘走了Intel又着地了！106/index.htm?zh_CN_01–2012

云飘走了Intel新的导航菜单出现了！107–2013

云飘走了导航简化了，域名出现了，中国官方微博突出了！背景开始流行白色！108

109

–

2009

云110

–

2010-oracle

111/us/sun/index.htm–2011-oracle

112/us/sun/index.htm–2012-oracle

云也飘走了！113

自动转/us/sun/index.htm–

2013与显示主页不一样114

115

-

2009

116

-

2010

117

-

2011

云118

-

2011

云119

-

2012

云飘走了走了蓝色巨人变黑了120

-

2013

121

122

–

2009

123

–

2010–导航新创意

124

–

2011–导航新创意

云125

–

2011–导航新创意

云126

–

2011–导航新创意

云127

–

2012–导航新创意

云也飘走了128

–2013-导航新创意

大面积白色衬底底！导航不再是自动切换，改为手动切换导航页面！129

130

-

2009

131

-

2010

132

-

2011

云133.cn

-

2011

云134

-

2012

云也不见了135

–

2013-中英网站完全一样

大面积白色衬底136

137

–

2009

138

–

2010

139

–2011

云140

–

2011云141

–2012

云也不见了142/cn/index.html–2013-oracle

143

144

–

2009

145

–

2010

146

–

2011

147

–

2012

返回148

–

2013

返回149-2003150

–

2009

151

–

2010

152

–

2011

153

–

2012

154

–

2013

155

156

–

2009

157

–

2010

158

–

2011

云159

–

2012

中国云也飘走了160

–

2013

突出印务功能！161

162–2009

163–2010

云164–2011

云165–2012

浪潮云“火”.cn

域名消失–2012/英文域名

166–2013

浪潮色彩变“淡”了！167

168

–

2009

169

–

2010

170

–

2011

171