《图像处理及网页制作》课件第11章.ppt

1、1 1第11章 网页设计基础11.1 网页设计的基本概念网页设计的基本概念11.2 网页的基本元素及功能网页的基本元素及功能11.3 网页设计的基本原则和表现手法网页设计的基本原则和表现手法1.4 网页版式设计的视觉流程网页版式设计的视觉流程本章小结本章小结2 2网页作为一种大众媒体，不仅要传达设计者的思想和情感，还要具有一定的艺术感染力，因此，网页设计既要求具备页面构图、色彩搭配、平面布局、版式设计、空间表现等方面的知识，又离不开对网页设计中的一些基本概念和基本元素及功能的了解。对于网页设计者而言，不仅要了解网页设计的基础知识，也要能很好的把握和应用其基本原则和表现手法。3 311.1.1

2、认识万维网万维网(World Wide Web，又称WWW、3W或Web)是Internet(因特网)最为重要的应用之一。万维网有一套标准及易为人们所掌握的超文本标记语言HTML、统一资源定位符URL和超文本传输协议HTTP。万维网由客户端和服务器端组成。万维网上的所有数据存储在Web服务器上，然后用户利用自己的计算机充当客户端，连接上网去浏览服务器上的信息。11.1 网页设计的基本概念网页设计的基本概念4 4为了获取万维网上的信息，用户必须在自己的计算机上安装浏览器软件，然后运行浏览器。浏览器负责把用户的浏览命令传送到Web服务器上，服务器根据用户的要求把不同的网页信息传输给用户计算机，经浏

3、览器处理后，在用户计算机屏幕上显示出丰富多彩的网页内容。5 511.1.2 超文本标记语言HTML网页的核心是HTML(超文本标记语言)，HTML并不是一种程序设计语言，而是一种页面描述语言。HTML是网页制作的基础，也是最基本的工具。使用任何工具制作的网页，最终都要以HTML方式存储在计算机里。用HTML制作网页无需编程，只要学会使用各种标记即可，但是需要熟记一定数量的HTML标记及相应用法。HTML具有特别的格式，Web浏览器可以把HTML解释成可以直接阅读的格式化Web文档。6 6我们可以使用自己熟悉的文本编辑器(如Windows记事本)并直接利用HTML进行标注，这是网页制作的最基本的

4、方法。HTML文件(即网页的源文件)的扩展名通常为html或htm，在结构上分为head(文件头)和body(文件体)两个部分，和标记表示文件头的开始和结束，和标记表示文件体的开始和结束，整个文件以标记开始。如：7 7 HTML文件开始 文件头开始 文件头内容 如标题(打开网页后“标题”在标题栏中显示)文件头结束 文件体开始 文件体内容 文件体结束 HTML文件结束8 811.1.3 网站、网页与主页一个网站通常由许多网页组成。网页的内容可以包含多种字体和样式的文本、各种图片、电影片断和声音等。主页是进入网站的第一个网页，也称为首页(Home Page)，为该网站的“门户网页”。这个页面是整个

5、网站的核心，站点内所有内容都由门户页面进行索引。主页通常被命名为index.html或default.html，它是站点访问者在网页浏览器的地址栏中键入该站点的网址时，默认地显示在浏览器中的网页。通过主页上的介绍或说明，用户可以在短时间内了解网站所提供的信息和服务项目。9 911.1.4 超级链接与网站的链接结构1.超级链接万维网之所以成为Internet中最引人瞩目、最受欢迎的应用，不仅是因为它提供了多媒体的浏览方式，更在于它使人们只需通过简单的鼠标操作就能够获得更多的信息。在这种交互过程中，超级链接起着十分重要的作用，它是用户在万维网中畅游的航标。在网页中，超级链接表现为一些标有颜色或下划

6、线的文字或图标，将鼠标指针移到超级链接上时，鼠标指针就会变成小手形(还有一些特定的鼠标指针形状)，单击该文字或图标，就可以轻而易举地跳转到当前网站的其他网页或者相关的网站。10 102.网站的链接结构网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。网站的链接结构有两种基本方式：树型结构和星型结构，如图11-1所示。11 11图11-1 网站的链接结构12 12(1)树型链接结构(一对一)。树型链接结构类似DOS的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。浏览这样的链接结构时，须一级级进入，一级级退出。这种结构的优点是条理清晰，访问者明确知

7、道自己在什么位置，不会迷路，其缺点是浏览效率低，在进行栏目跳转时必须绕经首页。(2)星型链接结构(一对多)。星型链接结构中每个页面之间都建立有链接。这种结构的优点是浏览方便，随时可以通过链接到达自己喜欢的页面，其缺点是链接太多，容易使浏览者迷路。13 13通常，在首页和一级页面之间用星型结构链接，在一级页面和二级页面之间用树型结构链接。14 1411.1.5 URL与网站目录结构组织原则1.URLURL(Uniform Resource Locator，统一资源定位器符)的格式为协议：/IP地址或域名/路径/文件名例如，http:/ 15http代表了超文本传输协议，即要访问的是万维网站点；f

8、tp代表了文件传输协议，即要访问的是FTP服务器，用户可以从FTP服务器中下载许多实用的软件或文件。URL的第2部分(如或)是存放资源的主机的IP地址或域名。URL的第3部分(如/literature/classes/novels/index.html)是可选项，用来指明所要访问的资源在计算机中的路径和文件名。通常情况下，站点的服务器都会指定一个默认的文件名(如index.html或default.html等)。因此，如果省略了文件名，则自动访问该路径下的默认文件。16 162.网站目录结构原则网站的目录是指建立网站时创建的目录。规划一个网站的目录结构时，应当遵循几个原则：(1)不要将所有文件

9、都存放在根目录下。(2)按栏目内容分别建立子目录。(3)在每个主目录下都建立独立的images目录。(4)目录的层次不要太深。(5)其他需要注意的还有：切忌使用中文目录，不要使用过长的目录，尽量使用意义明确的目录。17 17网页设计人员需要美化网页，增加网页的艺术感。网页的内容与其性质有关，不同性质的网页，内容不同，所需要的美化效果也不同。一般来说，网页包括几项基本内容：标题、网站标识(Logo)、主体内容、页眉页脚、导航栏、广告栏、友情链接等，如图11-2所示。11.2 网页的基本元素及功能网页的基本元素及功能18 18图11-2 网页的基本元素页脚标题网站标识导航栏页眉友情链接主体内容19

10、 1911.2.1 标题设计一个页面，首先要有明确的标题。标题能够体现出网页设计的目的，在很大程度上决定了页面其他元素的定位。一个好的页面要求其标题具有概括性、简短、有特色、易记，还要符合网站总体风格，页面中的内容要围绕其标题来组织。页面中的标题用来提示页面的主要内容，标题信息将出现在浏览器的标题栏中。同时，它还有一个重要作用就是引导访问者清楚地浏览网站的各项内容，不至于迷失方向。2020加入标题的HTML语句特别简单，只要在 标记之间添加标题内容。例如：浙江理工大学其显示效果如图11-3所示。21 21图11-3 网站标题显示效果222211.2.2 网站标识网站作为一种信息交流的媒体，在传

11、递信息的同时，也需要对自身进行宣传，就是说它需要有自己的特定标识。网站标识如同一个产品的商标，集中体现了网站的特色、内容、文化内涵及个性。一般网站的标识都设计得十分醒目、独特，并设置在网页的显要位置，力求给浏览者留下深刻的印象，如图11-4所示。对于当前常见的网站，网站标识的位置一般在主页的显要位置以及二级页面的页眉位置(页面的左上方)。2323图11-4 网站的标识示例242411.2.3 页眉和页脚1.页眉页眉是指网页上端的部分，如图11-5所示。2525图11-5 网页页眉示意图2626页眉和整个页面的设计风格相同，良好的页眉在页面中会起到较好的标识作用。页眉所在的位置是浏览者注意力较集

12、中的地方，大多数网站设计者会在这里放置网站宗旨、广告语、宣传口号等。27272.页脚页脚是指页面的底端部分，如图11-6所示。页脚部分通常用来标注网站所属的企事业单位的名称、地址，网站的版权及电子信箱等信息，浏览者可以从这里了解到一些站点所有者的情况。2828图11-6 网页页脚示意图292911.2.4 导航栏成功的网页是不能缺少导航栏这个重要部分的。导航栏是网站设计中一个独立的部分，它的位置对网页的结构和整体布局起着至关重要的作用。一般来讲，一个网站的导航栏在每一个页面中出现的位置是固定的。导航栏的位置一般有四种：页面左侧、右侧、顶部和底部。有的网站设置了多种导航栏，就是为了增强网页的可访

13、问性，如图11-7所示。3030图11-7 网页导航栏示意图31 3111.2.5 主体内容主体内容是页面设计的主体元素。它一般是二级链接内容的标题，或者是内容提要，或者是内容的部分摘录。其表现手法一般是图像和文字结合。它的布局通常按内容的分类进行分栏安排。浏览者浏览页面时，一般按从左到右、从上到下的顺序，所以重要的内容一般安排在页面的左上位置，次要的内容安排在右下方，如图11-8所示。3232图11-8 网页中主体内容示意图333311.2.6 搜索引擎和友情链接1.搜索引擎搜索是除了电子邮件以外被用得最多的网络工具。通过搜索引擎查找是网络冲浪者寻找网上信息和资源的主要手段。常用的英文搜索引

14、擎主要有Google、Inktomi、Altavista等；常用的中文搜索引擎主要有百度、搜狐等。不同的搜索引擎对页面的提取、索引、排序的规则都不一样。搜索引擎会自动收集相关内容，显示搜索结果时，除了主页外还会显示大量的页面内容，如图11-9所示。3434一个好的网站，通常设有站内搜索引擎和站外搜索引擎。站内搜索引擎主要起着搜索站内内容的作用，站外搜索引擎通常利用超链接的方式将一些主流搜索引擎挂接在本站中来扩大搜索的范围。3535图11-9 常用的搜索引擎36362.友情链接网站友情链接，也称为交换链接、互惠链接、互换链接等，是具有一定资源互补优势的网站之间的简单合作形式，即合作网站之间分别在

15、自己的网站上放置对方网站的LOGO或网站名称，并设置对方网站的超级链接，使得用户可以从合作网站中发现自己的网站，达到互相推广的目的。友情链接常作为一种网站推广手段，也可以看做是对网站功能的一种补充，访问者可以从一个网站跳转到其友情链接的网址上以获取更多的内容。3737实际上，友情链接的主要作用有以下两点:(1)通过和其他站点交换链接，可以吸引更多的用户点击访问。(2)搜索引擎会根据交换链接的数量以及交换链接网站质量等对一个网站做出综合评价，这也将是影响网站在搜索引擎排名的因素之一。3838设计的比较好的网站，往往会有跳跃的色彩，精美的图片，使浏览者流连忘返，即使对其中的文字内容并没有什么兴趣，

16、那些精致的图片广告也能吸引人们的注意，这就是网页页面设计的魅力。11.3 网页设计的基本原则和表网页设计的基本原则和表现手法现手法3939通过网页页面设计能把一种概念、一种思想通过精美的构图、版式和色彩，传达给浏览网页的人。进行网页页面设计，必须要掌握一些网页设计基本原则和表现手法并学会灵活运用。404011.3.1 网页设计的基本原则网页设计最重要的一个原则是：创意。这个原则也可以看成是网页设计的根本，没有创意的网站不能算是成功的网站。除此之处，还要遵循以下基本原则。1.内容设计原则(1)内容优先：要想提高网站的访问率，首先要在内容上多下工夫。(2)版权问题：网页中引用的资料，一定不能侵犯他

17、人的版权。41 412.版式设计原则(1)统一：注意页面设计的整体性和一致性。(2)平衡：注意页面中图像、文字的视觉分布。(3)连贯和呼应：注意页面的相互关联关系。(4)布局分割：将页面分成若干块，每一块之间有视觉上的不同，使浏览者一目了然。(5)对比：通过“矛盾”与“冲突”，使设计更有生气。(6)和谐：整个页面符合美学法则，浑然一体。42423.色彩设计原则(1)总体协调、局部对比：页面的整体色彩效果应该是和谐的，只在局部、小范围使用一些强烈的色彩对比。(2)色彩搭配要鲜明、独特、舒适并富于联想。4.图像与文本运用原则(1)图像运用原则：慎用图像并选择适当的图像格式。(2)文本运用原则：尽量

18、使用默认字体，合理选用字号。4343图11-10 黑色背景示意图444411.3.2 网页设计中的表现手法1.背景许多网页的背景都是纯色的，实际上在网页中选用适当的背景可增强页面的感染力。背景的色彩应该与页面的色彩相协调。要使自己的网页美观，合理地使用颜色是非常重要的。如果设计的网页属于较庄重的，可以使用蓝色作背景，因为这样看来比较肃穆安静一些；如果网页的情感色彩较浓，可多使用一些浪漫的颜色，如粉红色、淡紫色和玫瑰红等。4545背景中不常用黑色，因为黑色太深沉，给人以压抑感，与其他颜色也不好搭配。在设计中，黑色通常是用来勾画或点缀最深沉部分的，如图11-10所示。46462.文字内容当标题确定

19、后，就要采集内容。所采集的内容必须与标题相符，同时要保证内容的正确性，还要注意的是内容的数量。一般说来，站点的质量是与它的内容成正比的，只有丰富的内容才能满足更广泛的浏览者需求。但内容不要过于繁杂，同时应保证内容的趣味性。在采集内容的过程中，定要注意内容的特色。所谓特色，就是指要突出个性，如果是个人主页，就要突出自己的性格、兴趣、爱好等；4747如果是企业网页，那就要突出本企业的特点。对文字内容应进行分类，设置栏目，让人清楚明了。网页栏目的设置不要太多，要注意分层，较重要的栏目最好能从首页进入，并且保证用各种浏览器都能看到页面的最佳效果。48483.图片一个页面上如果没有图片只有文字叙述，肯定

20、会让人感到索然无味，因此必须在网页上加些图片，以增加其可视性。通常根据页面中使用图片数量的多少，可以把常见的网页划分为以下五类：(1)完全没有图片的网页(一般放在最后一页)。(2)有少量图片的网页(常作为综合类网站的第二页)。(3)有大量图片的网页(个人网站或专门网站，如摄影网站，服装、服饰类网站等多见)。4949(4)恰当使用图片的网页(综合类网站的第一页，即首页)。(5)使用图片不当的网页(个人网站多见)。有大量图片的网页也许看起来很够劲，但必须注意到美观只是网页的要求之一，看上去很漂亮的网页有可能是完全失败的。在理想的状态下，网页应该是既美观又实用的，这样的网页才会引人注目。这就要求设计

21、者高效地运用图片，用来吸引浏览者的视线并引发他们想象。50504.其他内容如果想使自己的网站更具有特色，可适当地使用一些网页制作技巧，如添加背景音乐、制作动态网页等，这些措施可以让网页更具可观性，但是这些技巧不要加得太多，否则会影响网页下载的速度。51 5111.3.3 网页设计需考虑的问题1.网页空间与页面尺寸在浏览网页时，人们所能直接看到的页面只是显示器屏幕的一部分。因浏览器的工具条还要占据部分屏幕空间，所以所显示的网页屏幕尺寸还会再小一些。目前，大多数显示器的分辨率设置为800600，所以我们在进行网页设计时要以分辨率800600为标准。不少设计者为了使页面在浏览器上显示最佳状态，让访问

22、者舒适地浏览页面，会特意在在页面的页眉或页脚处标注“建议屏幕分辨率为800600”等字样。52522.页面的安全宽度当显示器分辨率设置为800600时，即浏览器的屏幕最大宽度为800像素，因垂直方向的滚动条占去20像素，网页的安全宽度应为780像素。所以，页面设计宽度只有限制在780像素以内，在用800600分辨率的显示器浏览时，水平方向才能够全部在视屏范围内，如图11-11所示。如果页面宽度超过780像素，则会产生水平方向的滚动条，如图11-12所示。5353图11-11 页面宽度为780像素5454通常，如果需要访问者拖拽水平滚动条才能浏览到网页的全部内容，那么这个网页设计就不能认为十分成

23、功，不管页面本身是多么漂亮。5555图11-12 页面宽度大于780像素56563.页面的最佳长度页面的宽度作了严格的限制以后，页面长度的定义相对宽松多了，通常可以是13屏不等。考虑到整个网页的下载速度、访问者浏览的方便性以及信息含量、网站的类型等因素，页面的长度也不尽相同。根据经验，中小型网站主页面的最佳长度应在12屏之间。很多大型的网站为了在主页面内增加信息含量，使内容更能直观地面对访问者，则把主页面的尺寸设置为3屏左右或更长。575711.4.1 一致性与和谐性在网页版式设计中特别要强调图文的一致性与和谐性，即版式的视觉流程。11.4 网页版式设计的视觉流程网页版式设计的视觉流程5858

24、版式设计的视觉流程是一种“空间的运动”，是视线随各元素在空间沿一定轨迹运动的过程，这种视觉在空间的流动线为一种“虚”线。正因为它虚，所以设计时容易被忽略。有经验的设计师非常重视并善于运用这条贯穿版面的主线。可以说，视觉流程运用的好坏，是设计师技巧是否成熟的表现。视觉流程可以从理性与感性及方向关系流程与散点流程来分析。浏览网站的时候经常可以看到这样的网页，网页中挤排满了内容，没有考虑它的空间框架、编排秩序，所有内容在页面占着均衡的地位，5959让人无法知晓哪些内容才是最主要的。这种页面没有流畅的视觉流程，是没有注意到编排的清晰度、可读性的典型。在网页编排的过程中，首先要将零乱页面加以组织，混杂的

25、内容则根据整体布局的需要进行分组归纳，通过内在联系的组织排列，并要反复推敲文字、图形与空间的关系，找到最适合它们的位置。各类内容，或主或从，各自在页面上找到自己的“舞台”，在混乱无序的状态中创造新秩序使其成为丰富多样而又简洁明确的统一整体，在对比中达到和谐统一。6060方向关系的流程强调逻辑，注重版面的清晰脉络，似乎有一条线、一股气贯穿其内，使整个版面的运动趋势有“主体旋律”，细节与主体犹如树干和树枝一样和谐。方向关系流程较散点关系流程更具理性色彩。方向关系表现为以下几种形式。1.单向视觉流程单向视觉流程使页面的流动简明，便于直接表达主题内容，并有简洁而强烈的视觉效果。其表现为三种方向关系：(

26、1)竖向视觉流程坚定、直观的感觉，如图11-13所示。61 61(2)横向视觉流程稳定、恬静之感，如图11-14所示。6262 图11-13 竖向视觉流程示意图6363 图11-14 横向视觉流程示意图6464(3)斜向视觉流程以不稳定的动态引起注意，如图11-15所示。65652.曲线视觉流程各视觉要素随弧线或回旋线而变化的流程被称为曲线视觉流程。曲线视觉流程不如单向视觉流程直接简明，但更具韵味、节奏和曲线美。曲线流程的形式微妙而复杂，可概括为弧线形“C”和回旋形“S”。弧线形具有饱满、扩张的特点，有一定的方向感；回旋形两个相反的弧线产生矛盾回旋，在平面中增加深度和动感，如图11-16所示。

27、6666 图11-15 斜向视觉流程示意图6767 图11-16 曲线视觉流程示意图68683.重心视觉流程这里的重心是指视觉心理的重心，可理解为：其一，以强烈的形象或文字独据页面某个部位或完全充斥整版，其重心的位置因其具体画面而定。在视觉流程上，首先是从页面重心开始，然后顺沿形象的方向与力度的倾向来发展视线的进程。其二，向心、离心的视觉运动，也是重心视觉流程的表现。重心的诱导流程使主题更为鲜明突出而强烈，如图11-17所示。6969图11-17 重心视觉流程示意图70704.反复视觉流程反复视觉流程指相同或相似的视觉要素做规律、秩序、节奏的逐次运动。其运动流程不如单向、曲线和重心流程运动强烈

28、，但更富于韵律和秩序美，如图11-18所示。71 715.导向视觉流程通过诱导元素，主动引导读者视线沿一定方向顺序运动，由主及次，把画面各构成要素依序连接起来，形成一个有机整体，使重点突出，条理清晰，发挥最大的信息传达功能。编排中的导线有虚有实，表现多样，如文字导向、手势导向、形象导向以及视线导向等，如图11-19所示。7272 图11-18 反复视觉流程示意图7373 图11-19 导向视觉流程示意图74746.散点视觉流程散点视觉流程指页面图与图、图与文字间呈自由分散状态的编排。散状排列强调感性、自由随机性、偶合性，强调空间和动感，追求新奇、刺激的心态，常表现为一种较随意的编排形式，如图1

29、1-20所示。7575图11-20 散点视觉流程示意图7676这种编排方式在国外网页设计中十分流行，而国内还偏重于相对规则、理性的编排方式。我们欣赏页面的过程就是视觉流程，在所阅读的页面中，有严谨规律的、流程明朗的，也有流程疏散甚至完全自由散点的。即使面对自由散点的页面，我们仍然有阅读的过程，即视线随页面图像、文字或上或下或左或右地自由移动阅读的过程。这种阅读过程不如直线、弧线等流程快捷，但更生动有趣。也许这也正是页面刻意追求的轻松随意与慢节奏。777711.4.2 最佳视域在进行网页的版式设计时，我们应考虑到将重要信息或视觉流程的停留点安排在注目率高的位置，这就是优选最佳视域，如图11-21

30、所示。页面中不同的视域，注目程度不同，心理上的感受也不同。7878图11-21 最佳视域示意图7979上一节介绍前五项流程，均为具有方向和理性的流程。在编排方向性视觉流程关系时，要注意各信息要素间间隙大小的节奏感。若间隙大，节奏感慢，显得视觉流程舒展；但过分增大，则失去联系，彼此不能呼应，视觉流程显弱。若间隙小，节奏强而有力，信息可视度高，布局显得紧凑；但间隙过小，会显得紧张而拥挤，造成视觉疲劳，无法清晰快捷地传达主题。散点视觉流程似乎与前五项相互矛盾，其实不然。8080散点视觉流程是在前五项基础上的一种突破与创新，它更多地体现了设计师的个人风格与编排技巧，这种创新更具现代设计的气息。81 81本章主要介绍网页设计基础知识。通过对网页设计的基本概念、网页的基本元素及功能、网页设计的基本原则和表现手法以及网页设计版面的视觉流程的讲解，使学习者了解制作网页所要建立的概念及基本知识。本本 章章 小小 结结