第八章 8.5和8.6 多媒体和导航栏的位置-高二《网页美工-网页色彩与布局设计》同步教学课件 （电子工业出版社·第2版）

多媒体 7 PART 图像的选择 图像风格 文字应用案例分析 网页中文字布局形式 1 当目前越来越多的企业和个人开始建立自己的网站，对网站的要求也越来越高，因为网站不仅能够传达信息还担当了宣传企业或个人形象的重要意义。随着多媒体技术的日趋成熟，网页设计中也渐渐融入了多媒体技术。图片、动画、视频、声频等都是多媒体的常见应用。 如图8-75所示通过图片的不断变换，鼠标点击到哪里图片就会改变，以此增加浏览者进入网页的乐趣。 8.7多媒体 图8-75滑动式多媒体页面 多媒体 Page Size 2 如图8-76所示的游戏界面，看起来平凡无奇，实则打开之后游戏柄可与用户进行人机交互，使用户视野并不仅仅局限于一个单纯的页面中，这种多媒体应用的设定就较为高级了。 8.7多媒体 图8-76交互式多媒体页面 多媒体 Page Size 3 如图8-77所示主页采用了动画风格来表现主题，不仅使用了手绘风格的动画，而且其中的植物动了起来，表现出一种勃勃生机的生命状态。 8.7多媒体 图8-77动态式多媒体页面 多媒体 Page Size 4 当然多媒体中很重要的是视频，不仅是电视节目，很多视频网站、企业宣传、个人作品，都喜欢把自己的作品放到网站上，简单明了的把主旨呈现给浏览者，如图8-78所示。 8.7多媒体 图8-78视频式多媒体页面 多媒体 Page Size 5 要说起网页中的音频文件，大抵脑中蹦出的第一个单词就是淘宝卖家的页面了吧，几乎大多数淘宝卖家都会放上一些音频文件，让买家在浏览的时候能有个愉快舒适的心情，心情一好说不定就会多买几件，也是个不错的营销方式，如图8-79所示。 8.7多媒体 图8-79音乐多媒体页面 多媒体 Page Size 6 导航栏的位置 8 PART 导航栏布局形式 导航栏设计案例分析 7 导航栏应该是网页中极其重要的一部分，每个浏览者浏览网页一定是有所需的，因此导航栏能够很好地帮助浏览者找到所需的信息，好的导航栏像是一个好的导游，告诉用户网站是干什么的、内容分类有哪些、在哪里可以找到哪些信息。 8.8导航栏的位置 导航栏的位置 Page Overall Modeling 8 导航栏是网站风格的重要组成部分。一个好的导航栏可以在确定网页风格的同时，会使页面层次清晰。因此导航栏的设计也是设计师们需要重点考虑的问题。下面主要介绍目前互联网上最为流行的导航栏布局方式。 8.8.1导航栏布局形式 导航栏的位置 Page Overall Modeling 9 1. 水平导航栏 即以水平方式排列导航项。虽然大部分网站以水平导航为主，但其导航在色彩搭配、字体设置等选择上都有自己的特色，如图8-80所示Ahmaibao网站，导航栏字体颜色与LOGO颜色统一，导航菜单按钮的悬浮效果的底色与背景色一致，保证了整个页面的统一与协调。图8-81所示Aekyung网站，则是为导航栏菜单进行简短的补充说明，即在大的菜单标题里再加上几个能够凸现出该页面重要信息的关键词来吸引访客，让访客一目了然知道将要看到哪些内容。这种导航菜单也称作“对话式” 导航菜单。而如图8-83所示Pelada网站的导航菜单则放置于底部，同样达到吸引访客的效果。 8.8.1导航栏布局形式 导航栏的位置 Page Overall Modeling 10 导航栏的位置 Page Overall Modeling 11 8.8.1导航栏布局形式 图8-80 Ahmaibao网站 图8-81 Aekyung网站 2. 垂直导航栏 即以垂直（倾斜）方式排列导航项。虽然传统的桌面应用几乎都不使用垂直制表符，但其同样能够创造出漂亮的、吸引浏览者的效果，如图8-83所示Wipetheworldsass网站，利用打开的卷手纸，设计的垂直导航栏，虽然简单但同样会给访客留下深刻印象。图8-84所示KazuStyle网站其导航栏则采用折叠并展开的正方形纸张为导航菜单添加一个准确的图标，提高识别度。 8.8.1导航栏布局形式 导航栏的位置 Page Overall Modeling 12 8.8.1导航栏布局形式 导航栏的位置 Page Overall Modeling 图8-83 Wipetheworldsass网站 图8-84 KazuStyle网站 13 3.POP导航栏 即以体现网站的个性为主，不拘一格，重点在于表现网站的与众不同，从而达到吸引浏览者的目的，如图8-85所示B_CUBE网站，从主页到链接页的导航栏设计不拘一格，利用明亮的绿色作为背景色，使画面充满活力、生命力。 导航栏的位置 Page O