网站效果图设计 教学课件 作者 刘心美教材--第7章网页元素设计.ppt

《网站效果图设计 教学课件 作者 刘心美教材--第7章网页元素设计.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第7章网页元素设计知识目标：网页效果图主要组成元素及特点网页元素的设计要点掌握几种典型的导航条设计掌握以栏目方式组织页面内容分析与欣赏网页的能力能力目标：第7章网页元素设计LOGO设计7.1导航设计7.2栏目设计7.3授课安排7.4多媒体元素设计LOGO设计7.1对于一个网站来说，LOGO的作用是非常重要的，首先LOGO是与网站之间进行链接的标志和门户，再者LOGO也是一个网站的形象，一个成功的LOGO将容易被浏览者所记忆，并被传播。Part17.1.1LOGO的含义从网页角度来说，LOGO是互联网上各个网站用来与其它网站链接的图形标志，是网站的标志、徽标，具有表达意义、情感和指

2、令行动等作用。一般来说，一个好的LOGO应具备以下的几个的条件：符合国际W3C的标准。精美、独特、与众不同。与网站的整体风格相融。能够代表网站的主体形象，并体现该网站的类型、内容和风格。Part17.1.2基本构成元素1.名称一个出色完美的LOGO，要有独特的图案和名称组成，名称是网站传播的代言人，也是一个好的名称，会为图案设计人员提供更大的创新空间，设计者就可能发挥更大的创造性，引导浏览者的目光。反之就会带来一定的困难和局限性，导致网站艺术形象的建立不明确，产生歧义性。因此，确定LOGO的名称要深思熟虑、反复推敲，名称要具有“好听、好看、好记”的特征，具用独特、鲜明的艺术表现力

3、，富有寓意和想象力。Part17.1.2基本构成元素2.图案关于LOGO的图案设计，一般来讲围绕网站的性质来进行设计，要具有一定的抽象性，新颖、独特。但在LOGO图案设计中注意，首先图案要合乎网站的所属单位的特征，如非国家机关，其它网站不能国家的名称、国旗、国徽、军旗等图案作为LOGO的图案。再者当采用动物、植物等形象作为LOGO图案时，要尊重各国家和民族的忌讳和感情。3.色彩LOGO标志所采用的颜色为RGB（红，黄，蓝）三原色，LOGO标志在色彩设计往往采用亮丽、凸现的效果，以吸引目光、加强记忆的作用，同时LOGO色彩设计又要与整个页面相衬托，因此在设计中加入适当的部分互补色是

4、一种成功设计的小技巧。Part17.1.3设计技巧1.国际标准规范在互联网上LOGO目前主要有三种规格：88*31像素这是互联网上最普遍的LOGO规格。120*60像素这种规格用于一般较小的LOGO。120*90像素这种规格用于大型LOGO。2.设计基本要求要尽可能采用简洁的图形、线条及色彩来表达主题。力求巧妙、独特的构思，新颖的艺术表现手法，来达到形式的视觉效果。采用好看、简约的图形设计方案，达到让浏览者易记忆的目的。Part17.1.3设计技巧3.典型LOGO图7-1联邦快递标志图7-2伦敦博物馆图7-3美国全国广播公司（NBC）图7-4Chick-fil-a导航设计7.2P

5、art17.2.1导航含义所谓导航体现在页面上就是链接，链接的作用在于实现浏览和使用网站，它可以让用户方便在网页间进行跳转，也可以表达出页面间、页面与内容之间的关系。为了使浏览者不在网站中迷失方向，网站导航设计要清晰、明鲜，一般来讲根据导航在页面中作用的范围，可分成两大类：（1）全局导航。包括网站的一级导航、主要栏目所链接页面，这些链接会出现在网站的所有页面上。用户可以通过它们直接在相应页面间跳转。（2）局部导航。一般包括网站的二级导航、次要栏目所链接页面，一般用于跳转到二级、三级等相应的页面上，用户只能在相关的页面实现跳转，如二级页面是新标题，单击每个标题进行相应的三级页面，显

6、示具体的新闻内容。下面就这两类导航的设计进行具体说明。2.形状导航设计形状导航主要由文字和图片组成，其中主要特征是背景一般由矩形、圆角矩形等形状组成，各导航条的组成可图文混排，增加了导航的效果。如图7-9、7-10、7-11所示：1.简单导航设计简单导航主要由文字和背景组成，各导航条间以“！”或空白进行分隔，其中背景可以进行美化，如渐变色等。如图7-7、7-8所示：Part17.2.2导航栏设计图7-7简单导航一图7-9形状导航一图7-10形状导航二图7-8简单导航二图7-7简单导航一图7-11形状导航三Part17.2.2导航栏设计3.TAB选项卡设计TAB选项卡模式目前是网页

7、设计中一种最常见的浏览方式，它依靠鼠标的不同状况进行显示变化，它具有显示结构紧凑，包含较大信息量的特点。如图7-12、7-13、7-14所示：图7-12TAB选项卡导航一图7-13TAB选项卡导航二4.二级导航设计二级导航可分为横向和纵向二大类，一般用于二级页面或框架页面中，以实现类别的进一步划分。如图7-15、7-16所示：图7-15横向二级导航图7-16纵向二级导航图7-14TAB选项卡导航三栏目设计7.3内容分为栏目含义,形状设计,内容组织等方面，具体内容如下所示。Part