《Dreamweaver CS6完美网页制作——基础、实例与技巧从入门到精通》——1.2 网页的基本构成元素

简介:

本节书摘来自异步社区《Dreamweaver CS6完美网页制作——基础、实例与技巧从入门到精通》一书中的第1章,第1.2节,作者:何新起 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.2 网页的基本构成元素

不同性质的网站,构成网页的基本元素是不同的。网页中除了使用文本和图像外,还可以使用丰富多彩的多媒体和Flash动画等。

1.2.1 网站LOGO
网站LOGO也称为网站标志,网站标志是一个站点的象征,也是一个站点是否专业的标志之一。网站的标志应体现该网站的特色、内容以及其内在的文化内涵和理念。成功的网站标志有着独特的形象标识,在网站的推广和宣传中将起到事半功倍的效果。网站标志一般放在网站的左上角,访问者一眼就能看到它。网站标志通常有3种尺寸:88×31、120×60和120×9像素。图1.4所示为某个网站LOGO。


3603b22e0dcd6d100af7335e1cf22b88e8626c21

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

  • 网站有代表性的人物、动物、花草,可以用它们作为设计的蓝本,加以卡通化和艺术化。
  • 网站有专业性的,可以用本专业有代表的物品作为标志,如中国银行的铜板标志、奔驰汽车的方向盘标志。
  • 最常用和最简单的方式是用自己网站的英文名称作为标志。采用不同的字体、字符的变形、字符的组合可以很容易制作好自己的标志。

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

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


a814baacdbd425c3fc89847bfbc260426282b2b8

**
1.2.3 导航栏**
导航栏是网页的重要组成元素,它的任务是帮助浏览者在站点内快速查找信息。好的导航系统应该能引导浏览者浏览网页而不迷失方向。导航栏的形式多样,可以是简单的文字链接,也可以是设计精美的图片或是丰富多彩的按钮,还可以是下拉菜单导航。

一般来说,网站中的导航位置在各个页面中出现的位置是比较固定的,而且风格也较为一致。导航的位置一般有4种:在页面的左侧、右侧、顶部和底部。有时候在同一个页面中运用了多种导航。当然,并不是导航在页面中出现的次数越多越好,而是要合理地运用,达到页面总体的协调一致。图1.6所示为网站的左侧导航栏。


f3779d79535d25baf30b836e188a692717b462c9

1.2.4 文本
网页内容是网站的灵魂,网页中的信息也以文本为主。无论制作网页的目的是什么,文本都是网页中最基本的、必不可少的元素。与图像相比,文字虽然不如图像那样易于吸引浏览者的注意,但却能准确地表达信息的内容和含义。

一个内容充实的网站必然会使用大量的文本。良好的文本格式可以创建出别具特色的网页,激发读者的兴趣。为了克服文字固有的缺点,人们赋予了文本更多的属性,如字体、字号和颜色等,通过不同格式的区别,突出显示重要的内容。此外,还可以在网页中设置各种各样的文字列表,来明确表达一系列的项目。这些功能给网页中的文本增加了新的生命力,图1.7所示为网页右侧的公司简介部分,其中运用了大量文本。


35c86b7db76f236b03536dd7037c12f5a4e0a425

**
1.2.5 图像**
图像在网页中具有提供信息、展示形象、装饰网页、表达个人情趣和风格的作用。图像是文本的说明和解释,在网页适当位置放置一些图像,不仅可以使文本清晰易读,而且使得网页更加有吸引力。现在几乎所有的网站都使用图像来增加网页的吸引力,有了图像,网站才能吸引更多的浏览者。可以在网页中使用GIF、JPEG和PNG等多种图像格式,其中使用最广泛的是GIF和JPEG两种格式。如图1.8所示,在网页中插入图片生动形象地展示了景点信息。


9d3a75a786d27de7e233b767e7bc182b3e63f936

1.2.6 Flash动画
Flash动画具有简单易学、灵活多变的特点,所以受到很多网页制作人员的喜爱,它可以生成亮丽夺目的图形界面,而文件的体积一般只有5~50KB。随着ActionScript动态脚本编程语言的逐渐发展,Flash已经不再仅局限于制作简单的交互动画程序,通过复杂的动态脚本编程可以制作出各种各样有趣、精彩的Flash动画。由于Flash动画具有很强的视觉冲击力和听觉冲击力,因此一些公司的网站往往会采用Flash制作相关的页面,借助Flash的精彩效果吸引客户的注意力,从而达到比以往静态页面更好的宣传效果,图1.9所示为Flash动画制作的页面。


1f205b96f0a30f21cf0fba0797414a35d713c0e4
相关文章
|
移动开发 前端开发 JavaScript
Dreamweaver制作网页的步骤
Dreamweaver软件制作网页的步骤
202 0
|
JavaScript
dreamweaver能制作移动网页吗?
dreamweaver能制作移动网页吗?
104 0
Dreamweaver网页色彩的搭配
Dreamweaver网页色彩的搭配
126 0
|
Web App开发
Dreamweaver CS6破解教程[序列号+破解补丁
Adobe Dreamweaver CS6中文简体版下载地址:Dreamweaver CS6中文简体版下载[带破解] 该教程将不断更新,最新版请猛击:http://www.itxueyuan.org/view/6317.html 破解之前的准备 1) 序列号这里为大家生成了两个,可以通过软件验证:1325-0949-2080-9819-3777-32301325-0160-5283-9851-2671-89512) 破解补丁安装时会用到,请大家提前下载好(安装时需要断网)。
2197 0
|
SQL 移动开发 数据可视化
前端必知词汇:Dreamweaver CS6
Dreamweaver CS6是世界顶级软件厂商Adobe推出的一套拥有可视化编辑界面,用于制作并编辑网站和移动应用程序的网页设计软件。由于它支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页(通常是标准通用标记语言下的一个应用HTML),对于初级开发者,可以无需编写任何代码就能快速创建Web页面。
578 0