《网页设计与前端开发 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。

da8258c12e804ca7fdaf36dcccfb4944d413710e

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

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

1.2.2 网站Banner

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

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

adfd24dc4e5f50f4f93c48ff889e50052c0acb44

1.2.3 导航栏

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

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

555221f8e2583e40378f9cda217b68008abfa8a6

1.2.4 文本

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

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

7482f5c3729b05be45cd2b06b286814d203c0b27

1.2.5 图像

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

ad8a8efee1a301a8b6fd898969655b2a1dd46fe5

1.2.6 Flash动画

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

0360ee79aded08545422da05873a8df2aec9e5e2
相关文章
|
1月前
|
前端开发 算法 Java
(CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
(CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
111 1
|
1月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
Flex 布局 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 一、Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
230 1
|
1月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
盒模型 盒模型: 所谓盒模型,就是浏览器为页面中的每个HTML元素生成的矩形盒子。 这些盒子们都要按照可见板式模型在页面上排布。 可见的板式模型主要由三个属性控制:position 属性、display 属性和 float属性。 position属性控制页面上元素间的位置关系。 display属性控制元素是堆叠、并排或者不在页面上显示。 float属性提供控制的方法,以便于把元素组成成多栏布局。 盒模型讲解: 在默认的情况下,每个盒子的边框是不可见的,背景也是透明的。 所以我们 不能直接的看到页面中的盒
148 1
|
1月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
伪类:伪类这个叫法源自于它们跟类相似,但实际上并没有类会附加到标记中的标签上。 伪类分为两种(以及新增的伪类选择器): UI伪类:会在HTML元素处于某种状态时(例如:鼠标指针位于连接上),为该元素应用CSS样式。 :hover 结构化伪类:会在标记中存在某种结构上的关系时 例如: 某元素是一组元素中的第一个或最后一个,为该元素应用CSS样式。 :not和:target(CSS3新增的两个特殊的伪类选择器)
145 1
|
2月前
|
XML 前端开发 C#
C#编程实践:解析HTML文档并执行元素匹配
通过上述步骤,可以在C#中有效地解析HTML文档并执行元素匹配。HtmlAgilityPack提供了一个强大而灵活的工具集,可以处理各种HTML解析任务。
184 19
|
1月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
继承 我们的CSS中很多的属性也是可以继承的,其中相当一部分是跟文字的相关的,比如说颜色、字体、字号。 当然还有一部分是不能继承的。 例如边框、内外边距。 层叠 层叠是CSS的核心机制。 层叠的工作机制: 当元素的同一个样式属性有多种样式值的时候,CSS就是靠层叠机制来决定最终应用哪种样式。 层叠规则: 层叠规则一:找到应用给每个元素和属性的声明。 说明:浏览器在加载每个页面时,都会据此查找到每条CSS规则, 并标识出所有受到影响的HTML元素。
80 1
|
5月前
|
移动开发 前端开发 JavaScript
HTML表单验证:确认input元素输入为具有特定整数和小数位数的数值。
将上述JavaScript代码与HTML一同使用,便可以确保用户输入的数值符合特定的格式要求。特别要注意,在实际的生产环境中,仅仅依靠前端验证是不够的。为了安全起见,后端也应该实施相应的验证措施,以防止不匹配格式的数据通过其他手段提交到服务器。
355 74
|
3月前
|
编解码 JavaScript 前端开发
如何在网页播放英文的m3u8文件(基于Javascript搭建的在线网页工具)
什么是m3u8?又该如何在网页中高效、便捷地播放英文的m3u8文件呢?今天这篇文章就带你一起了解,并推荐一种基于Javascript搭建的在线网页工具,让你轻松解决播放问题。
845 0
|
数据采集 移动开发 前端开发
HTML代码的革命:语义化标签的魅力,让你的网页结构焕然一新!
【8月更文挑战第26天】本文探讨了Web前端开发中的语义化标签概念及其重要性。语义化标签通过使用具有明确含义的HTML标签来构建页面结构,提升了网页的可访问性及搜索引擎优化效果,并增强了代码的可读性和维护性。文章还讨论了实际开发中遇到的问题及未来发展趋势。
278 0

热门文章

最新文章

下一篇
oss云网关配置