网页可以说是网站构成的基本元素。当我们轻点鼠标,在网海中遨游,一副副精彩的网页会呈现在我们面前,那么,网页的精彩与否的因素是什么呢?色彩的搭配、文字的变化、图片的处理等,这些当然是不可忽略的因素,除了这些,还有一个非常重要的因素——网页的布局。下面,我们就有关网页布局谈论一下。
网页布局类型
网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型,下面分别论述。
1、“国”字型:
也可以称为“同”字型,是一些大型网站所喜欢的类型,即最上面是网站的标题以及横幅广告条,接下来就是网站的主要内容,左右分列一些两小条内容,中间是主要部分,与左右一起罗列到底,最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。
2、拐角型:
这种结构与上一种其实只是形式上的区别,其实是很相近的,上面是标题及广告横幅,接下来的左侧是一窄列链接等,右列是很宽的正文,下面也是一些网站的辅助信息。在这种类型中,一种很常见的类型是最上面是标题及广告,左侧是导航链接。
3、标题正文型:
这种类型即最上面是标题或类似的一些东西,下面是正文,比如一些文章页面或注册页面等就是这种类。
4、左右框架型:
这是一种左右为分别两页的框架结构,一般左面是导航链接,有时最上面会有一个小的标题或标致,右面是正文。我们见到的大部分的大型论坛都是这种结构的,有一些企业网站也喜欢采用。这种类型结构非常清晰,一目了然。
5、上下框架型:
与上面类似,区别仅仅在于是一种上下分为两页的框架。
6、综合框架型:
上页两种结构的结合,相对复杂的一种框架结构,较为常见的是类似于“拐角型”结构的,只是采用了框架结构。
7、封面型:
这种类型基本上是出现在一些网站的首页,大部分为一些精美的平面设计结合一些小的动画,放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页,如果说处理的好,会给人带来赏心悦目的感觉。
8、Flash型:
其实这与封面型结构是类似的,只是这种类型采用了目前非常游戏行的Flash,与封面型不同的是,由于Flash强大的功能,页面所表达的信息更丰富,其视觉效果及听觉效果如果处理得当,绝不差于传统的多媒体。
9、变化型:
即上面几种类型的结合与变化,比如本站在视觉上是很接近拐角型的,但所实现的功能的实质是那种上、左、右结构的综合框架型。
关于第一屏
所谓第一屏,是指我们到达一个网站在不拖动滚动条时能够看到的部分。那么第一屏有多“大”呢?其实这是未知的。一般来讲,在800*600的屏幕显示模式(这也是最常用的)下,在IE安装后默认的状态(即工具栏地址栏等没有改变)下,IE窗口内能看到的部分为778px*435px,一般来讲,我们以这个大小为标准就行了,毕竟,在无法适合所有人的情况下,我们只能为大多数考虑了。
说了那么多,无非是一个标准的问题,其实接下来不用我说大家也能想到,第一屏当然要放最主要的内容,关键要知道的是,我们要对第一屏能显示的面积要有个估计,而不要仅仅以自己的机器为准。其实网页制作的一个很麻烦的地方就是浏览者的机器是未知的。
有关导航栏的位置
导航栏能让我们在浏览时容易的到达不同的页面,是网页元素非常重要的部分,所以导航栏一定要清晰、醒目,一般来讲,导航栏要在“第一屏”能显示出来,但是有时第一屏可能会小于上面所说的435px,积于这点考虑,那种横向放置的导航栏要优于纵向的导航栏考虑,原因很简单:如果浏览者的第一屏很矮,横向的仍能全部看到,而纵向的就很难说了,因为窗口的宽度一般是不会受浏览器设置影响的,而纵向的则不确定性要大的多
分享到:
相关推荐
网页设计布局基础教程 本教程旨在帮助初学者快速掌握网页设计布局的基础知识。网页设计布局是网页设计的基础,它决定了网页的整体风格和用户体验。网页设计布局的好坏直接影响到网站的用户体验和访问量。 一、网页...
计算机网页设计布局分析 计算机网页设计布局分析是指网页设计中的整体造型和网页设计布局页面的尺寸。科学合理的网页设计布局不但能够带给人们美感,并且还能使人们在浏览的过程中内心放松。计算机网页设计中的布局...
计算机网页设计布局与排版研究 计算机网页设计是企业网站建设的重点,对于企业形象的展示和用户对企业的第一印象有着非常重要的影响。网页设计布局与排版应当遵循主次分明、图文搭配、整体风格统一以及疏密均匀等...
网页设计布局是构建网站视觉效果的关键环节,它决定了用户如何与网页交互以及信息如何呈现。在网页设计中,布局不仅仅是关于美观,更是关乎用户体验、可读性和导航的易用性。一个良好的网页设计布局能够有效地引导...
网页设计布局是构建一个引人入胜且功能齐全的网站的关键环节。网页设计不仅涉及到技术层面,也融入了艺术和创新的元素。设计师需要具备良好的艺术修养和审美观,以确保内容与形式的和谐统一,从而提升网站的吸引力。...
网页设计布局是构建网站视觉效果的关键环节,它决定了用户如何与网页交互以及信息如何呈现。在本篇“网页设计布局.ppt”中,主要探讨了三种常见的布局模式和一些核心的HTML元素,如和,以及它们在页面布局中的应用。...
展示了16种常见的网页设计布局格式,适用于初学者对网页设计布局的把握!
本资源“CSS网页设计布局成品.rar”显然包含了一些已完成的CSS布局示例,对于学习和理解CSS网页设计有极大的帮助。 首先,让我们详细探讨一下CSS的核心概念和关键技术: 1. **选择器与属性**:CSS的基石是选择器和...
网页设计布局主要包括以下几个关键知识点: 1. **流式布局(Fluid Layout)**:这种布局方式允许网页内容根据用户设备的屏幕尺寸自动调整,确保在不同设备上都能良好显示。在源代码中,可能会看到百分比宽度的使用...
DIV_CSS技术在网页设计布局中的应用研究_李彦.caj
《HTML+CSS网页设计与布局从入门到精通》紧密围绕网页设计师在制作网页过程中的实际需要和应该掌握的技术,全面介绍了使用HTML和CSS进行网页设计和制作的各方面内容和技巧。 《HTML+CSS网页设计与布局从入门到精通》...
网页设计布局是构建网站视觉呈现的关键环节,它涉及到如何有效地组织和展示内容,同时考虑到不同用户的浏览体验。在小规模的工作环境中,设计师往往需要兼顾布局和后台编程,而在大型公司中,这一过程通常由专门的...
### 网页设计布局基础 #### 一、网页布局的重要性与基本概念 在当今互联网时代,网页设计不仅仅是关于提供信息或内容那么简单。一个成功的网站不仅要拥有有价值的内容,还需要通过有效的网页布局来吸引并保持用户...
常用网页版面布局设计
响应式布局网页设计是近年来发展起来的一种新概念。传统的网页设计虽然能够满足人们的基本应用要求,但在应用灵活性和适用性等方面存在着比较大的缺陷。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的...
《基于Web标准的网页设计与制作》中的固定布局设计代码,加批注。
这本书"HTML5+CSS3从新手到高手网页设计与网站布局"提供了丰富的源码和实例,旨在帮助初学者快速掌握这两门语言,并精通网页设计与布局。 HTML5是超文本标记语言的最新版本,它引入了许多新特性,如语义化标签...
CSS属性如`color`、`font-size`和`background-color`定义元素的样式,而布局相关属性如`display`、`flexbox`和`grid`则帮助实现复杂的设计布局。 在网页设计与布局中,理解盒模型(Box Model)至关重要,它包括元素...