《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》——1.2 网页的基本构成元素-阿里云开发者社区

开发者社区> 异步社区> 正文

《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》——1.2 网页的基本构成元素

简介:
+关注继续查看

本节书摘来自异步社区《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》一书中的第1章,第1.2节,作者: 何新起 , 任慎存 , 田月梅更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.2 网页的基本构成元素

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

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


5719388829b9c1265bbc8c1ee41f73d5b2dccb87

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

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

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

网站Banner首先要美观,如果这个小的区域设计得非常漂亮和舒服,即使不是浏览者所要看的东西,或者是一些他们不感兴趣的东西,他们也会去点击。其次Banner还要与整个网页协调,同时又要突出、醒目,用色要同页面的主色相搭配,如主色是浅黄,广告条的用色就可以用一些浅的其他颜色,切忌用一些对比色。图1-12所示为网站Banner。


1ecf4965be8ab0a2f971fbd2b8af8e33dd600580

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

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


d057bfba8a3175bda7886115adf498d77df2c135

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

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


ebd4e9e0bb2d2e4aa499cd90851eefb9afc7fb1b

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


d70222bb58248845f71913f0ae92ea1ca2fa8ea2

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


bee034c6888dbf7d32b0a66725c88f1fe491d8b5

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十八】
  《Web 前端开发精华文章推荐》2013年第六期(总第十八期)和大家见面了。梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章能够帮助到您。
1793 0
前端开发教程:Javascript中如何定义类?
很多新手朋友第一次建网站时候,如何选择一款适合的网站源码是比较困惑的问题,选择一款好的网站源码可以节约大量时间和金钱,但是由于网站源码参差不齐,免费的,收费的,淘宝几元钱购买的,几万块钱的都有,那么怎么看一个网站源码是否值得使用呢,下面从专业的角度来分析。
587 0
《HTML CSS JavaScript 网页制作从入门到精通 第3版》—— 导读
十多年前,Internet在国内开始流行。其中,网页作为互联网的主要媒介受到了电脑爱好者的广泛关注。由于当时网速的限制,网页主要承载文本、图片等简单数据,使用Dreamweaver或Frontpage软件即可轻松制作网页。
1178 0
类似抖音的短视频app开发难度大吗?短视频源码让你事半功倍
“短视频”——在2018年视频直播行业的发展趋于稳定后,短视频app成为了主角。抖音短视频app的火爆,引来互联网大佬们的强势入局。看似简洁的抖音短视频app,实则在开发过程中会存在着各种各样的难点。
3165 0
H5移动前端开发常用高能css3汇总
1.禁止a标签点击高亮,这些都是非官方属性,但实用性超强  html,body{ -webkit-touch-callout: none; //禁止或显示系统默认菜单 -webkit-user-select: none; //禁止长按复制选择 -webki...
719 0
Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十三】
  《Web 前端开发精华文章推荐》2014年第2期(总第23期)和大家见面了。梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章能够帮助到您。
1795 0
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
11939
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载