Dreamweaver+jQuery移动网页设计从新手到高手
上QQ阅读APP看书,第一时间看更新

1.2 网页的基本构成元素

网页是构成网站的基本元素,不同性质的网站,其页面元素是不同的。一般网页的基本元素包括Logo、Banner、导航栏目、文本、图像、Flash动画和多媒体等。

1. 网站Logo

网站Logo,也称“网站标志”,它是一个网站的象征,也是一个网站是否正规的标志之一。一个好的标志可以很好地树立网站形象。网站标志一般放在网页的左上角,浏览者一眼就能看到它。成功的网站标志有着独特的形象,在网站的推广和宣传中起到重要的作用。网站标志应体现该网站的特色、内容及其内在的文化和理念,如图1-8所示。

图1-8

Logo的设计创意来自网站的名称和内容,大致分以下3个方面。

· 网站有代表性的人物、动物、植物,可以用它们作为设计的蓝本,并加以卡通化和艺术化。

· 网站有专业性的,可以用本专业且代表性的物品作为标志,如中国银行的铜板标志、奔驰汽车的方向盘标志等。

· 最常用和最简单的方式是用自己网站的英文名称作为标志。采用不同的字体、字符的变形、字符的组合都可以很容易地制作好网站的标志。

2. 网站Banner

网站Banner就是横幅广告,也是互联网广告中最基本的广告形式。Banner可以位于网页顶部、中部或底部,一般为横向贯穿整个或者大半个页面的广告条。常见的尺寸是480像素×60像素或233像素×30像素,使用GIF格式的图像文件,可以使用静态图形,也可以使用动态图像。除普通GIF格式外,采用Flash形式能赋予Banner更强的表现力和交互性。

网站Banner首先要美观,这个小区域设计得非常漂亮,让人看上去会很舒服,即使不是网民所要看的内容,或者是一些可看不可看的内容,网民也会很有兴趣去看看,此时点击就是顺理成章的事情了。Banner还要与整个网页相协调,同时又要突出、醒目,用色要与页面的主色相搭配,如主色是浅黄,广告条的用色就可以是一些浅色,切忌用对比色,如图1-9所示。

图1-9

3. 网站导航栏

导航栏既是网页设计中的重要组成部分,又是整个网页设计中较独立的部分。一般来说,网站中的导航栏在各个页面中出现的位置是比较固定的,而且风格也较为统一。而且导航栏的位置对网站的结构与各个页面的整体布局起着举足轻重的作用。

导航栏的位置一般有4种:在页面的左侧、右侧、顶部和底部。有的在同一个页面中还会运用了多种导航方式,如在顶部设置了主菜单,而在页面的左侧又设置了折叠式菜单,同时在页面的底部设置了多种链接,这样就会增强网站的可访问性。当然,并不是在页面中导航栏出现的次数越多越好,而是要合理地运用页面,达到总体的协调一致,如图1-10所示。

图1-10

4. 网站文本

文本一直是人类最重要的信息载体与交流工具,网页中展示的信息也以文本为主。与图像相比,文字虽然不如图像那样易于吸引浏览者的注意了,但能准确地表达信息的内容和含义。

为了克服文字固有的缺点,人们赋予了网页中文本更多的属性,如字体、字号和颜色等,通过不同格式的区别,突出显示重要的内容,如图1-11所示。

图1-11

5. 网站图像

图像在网页中具有提供信息、展示形象、美化网页、表达个人情趣和风格的作用。可以在网页中使用GIF、JPEG和PNG等多种图像格式,其中使用最广泛的有GIF和JPEG两种格式,如图1-12所示。

6. Flash动画

随着网络技术的发展,网页上出现了越来越多的Flash动画。Flash动画已经成为当今网页中必不可缺少的部分,美观的动画能够为网页增色不少,从而吸引更多的浏览者。Flash动画不仅需要对动画制作软件非常熟悉,更重要的是设计者独特的创意,如图1-13所示。

图1-12

图1-13

7. 页脚

网页的底端称为“页脚”,页脚部分通常被用来介绍网站所有者的具体信息和联系方式,如名称、地址、联系方式、版权信息等。其中一些内容被做成标题式的超链接,引导浏览者进一步了解详细的内容,如图1-14所示。

图1-14

8. 广告区

广告区是网站实现盈利或自我展示的区域。一般位于网页的顶部或右侧。广告区的内容以文字、图像、Flash动画为主,通过吸引浏览者点击链接的方式达成广告效果。广告区要做到明显、合理、引人注目,这对整个网站的布局很重要,如图1-15所示。

图1-15