• 认识网页的基本元素


    布局基础理念

      网站是否受欢迎固然要看网站的内部结构、前期定位和网站内容,但是网站中的各个网页看起来是否赏心悦目而便于操作,也是非常重要的,这就涉及到了网页的布局设计这个问题。随着Web标准的推广,将网页布局设计的更为合理,已经不再像在HTML时代那样难以做到,所以浏览者对网页布局的评价也越来越挑剔。

      在这个Web标准“横行”的年代,只注重内容,不注重网页布局的网站必定会死掉,因为有很多内容与之相同的网站用优秀的网页布局将浏览者吸引了过去。本章将从网页基本元素、布局的准备工作、网页布局类型等方面进行详细阐述,让网页炫起来!

    【认识网页基本元素】

     

      网站的基本元素是网页,一个个的网页构成了一个完整的网站(如图10.1所示)。

      网页也是可分的,构成网页的基本元素包括标题、网站LOGO、页眉、页脚、主体内容、功能区、导航区、广告栏等。这些元素在网页的位置安排,就是网页的整体布局。


     

      1.标题


     

      每个网页的最顶端都有一条信息,这条信息往往出现在浏览器的标题栏,而非网页中,但是这条信息也是网页布局中的一部分。这条信息是对这个网页中主要内容的提示,即标题。


     

      2. 网站LOGO


     

      LOGO是网站所有者对外宣传自身形象的工具。LOGO集中体现了这个网站的文化内涵和内容定位。可以说, LOGO是一个网站的最为吸引人、最容易被人记住的标志。如果网站所有者已经导入了CIS系统,那么LOGO的设计就要符合CIS的设定。如果所有者没有导入CIS,就要根据网站的文化内涵和内容定位设计LOGO。无论怎样,网站LOGO的设计都要在网站制作初期进行,这样才能从网站的长远发展角度出发,设计出一个能够长时间使用的、最能代表该网站的LOGO。LOGO在网站中的位置都比较醒目,目的是要使其突出,容易被人识别与记忆。在二级网页中,页眉位置一般都留给LOGO。另外,LOGO往往被设计成为一种可以回到首页的超链接。

     



    图10.1 YAHOO.COM网站界面

     

      说明CIS简称CI,全称 Corporate Identity System,译称企业识别系统,意译为“企业形象统一战略”。

     

     

      3. 页眉

     

     

      网页的上端即是这个页面的页眉。页眉并不是在所有的网页中都有,一些特殊的网页就没有明确划分出页眉。页眉往往在一个页面中相当重要的位置,容易引起浏览者的注意,所以很多网站都会在页眉中设置宣传本网站的内容,如网站宗旨、网站LOGO等,也有一些网站将这个 “黄金地段”作为广告位出租。

     

     

      4. 主体内容

     

     

      主体内容是网页中的最重要的元素。主体内容并不完整,往往由下一级内容的标题、内容提要、内容摘编的超链接构成。主体内容借助超链接,可以利用一个页面,高度概括几个页面所表达的内容,而首页的主体内容甚至能在一个页面中高度概括整个网站的内容。

      主体内容一般均有图片和文档构成,现在的一些网站的主体内容中还加入了视频、音频等多媒体文件。由于人们的阅读习惯是由上至下、由左至右,所以主体内容的内容分布也是按照这个规律,依照重要到不重要的顺序安排内容,所以在主体内容中,左上方的内容是最重要的。

     

     

      5. 页脚

     

     

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

      Yahoo!网站的页脚除上述内容外,增加了导航内容,这种方式在首页内容过多的情况很适用。好处是浏览者不必滑动滚动条,可直接选择栏目,易用性强。

     

     

      6. 功能区

     

     

      功能区是网站主要功能的集中表现。一般位于网页的右上方或右侧边栏。功能区包括:电子邮件、信息发布、用户名注册、登陆网站等内容。有些网站使用了IP定位功能,定位浏览者所在地,然后可在功能区显示当地的天气、新闻等个性化信息。

     

     

      7. 导航区

     

     

      如果说主体内容部分重要的话,导航区的重要性与其不相上下,甚至导航区的设计可以成为一种独立的设计,与网页布局设计分庭抗礼。之所以说导航区重要,是因为其所在位置左右着整个网页布局的设计。导航区一般分为4种位置,分别是左侧、右侧、顶部和底部。一般网站使用的导航区都是单一的,但是也有一些网站为了使网页更便于浏览者操作,增加可访问性,往往采用了多导航技术,如Yahoo!网站采用了左侧导航与底部导航相结合的方式。但是无论采用几个导航区,网站中的每个页面的导航区位置均是固定的。

     

     

      8. 广告区

     

     

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

  • 相关阅读:
    剩余的div自动填满height calc
    防抖
    autocomplete失效
    子组件上下结构布局自适应父组件宽度高度
    glup打包代码不更新
    手写弹出框,设置遮罩,布局设计。
    css设置背景透明度
    vue项目中z-index不起作用(将vue实例挂在到window上面)
    odoo官方文档第十二章 Javascript Reference
    odoo官方文档第十一章 Javascript Cheatsheet
  • 原文地址:https://www.cnblogs.com/luluping/p/1342585.html
Copyright © 2020-2023  润新知