网页布局类型及布局技术的分析
网页布局类型及布局技术的分析
摘要随着计算机网络的发展,网页作为传播信息的载体,其布局直接影响着网页整体视觉效果和信息的有效传达。因此网页的布局设计也日益被网站建设者所注重,只有根据网站的内容、使用者、理念等合理的进行页面布局,才能达到理想的效果。
关键词网页布局;表格;框架;div+css
中图分类号TP393 文献标识码 A 文章编号1673-9671-(2012)051-0178-02
网页是网站构成的基本要素,而网页元素在网页中的组合决定了整个网站的最终效果,因此选择合适的网页布局类型及技术是关键。本文围绕网页布局的类型及布局技术进行了分析,并结合《三农服务网》实例进行了简单的说明。
1 网页布局类型分析
1.1 网页布局的类型
大致分为标题正文型、T字型、国字型、框架型、封面型、Flash型6大类。
1.2 布局类型的分析
1)标题正文型:页面分为上下结构,上面部分是标题、广告、导航等,下面部分是正文。
优点:结构清晰、简单,一目了然。
缺点:页面显得比较单调、枯燥。
2)T字型:页面顶部为网站标志、广告,下面部分的左列为主菜单,右列为主要内容。
优点:结构清晰,主次分明,容易上手。
缺点:页面显得呆板,变化较少,在页面停留时间久会感觉看之无味。
3)国字型:也可以称为“口”、“回”或“同”字型,页面分为上中下三部分,顶部是标题、广告,底部是网站的链接区、联系方式、版权声明等,中间部分分为左中右三列,左右分别列出一些小条,中间部分是主要内容。
优点:充分利用页面空间、增大信息量。
缺点:内容过多,显得页面拥挤。
4)框架型:一般分为左右框架型、上下框架型、综合框架型。左右框架型是一种左右分为两页的框架结构,一般左面是导航链接,右面是正文。上下框架型:与左右框架类似,区别仅仅在于它是把页面分为上下两页的框架。综合框架型:上面两种结构的组合,相对复杂的一种框架结构。框架型适合于聊天室、论坛、软件下载等网站的版面布局,
优点:框架型页面分割合理、布局结构清晰。
缺点:兼容性差、页面加载速度慢。
5)封面型:页面布局是一张精美的平面设计宣传海报,常用于网站首页。
优点:页面显得美观、大方、轻松,给人时尚优雅、自由的感觉。
缺点:文字信息量少,页面打开速度缓慢,浏览者不能直奔主题浏览信息。
6)Flash型:与封面型类似,只是其添加了动画效果与音频效果,表达的信息更丰富。
优点:灵活、表现力强,很直观的展现了网站的理念等,适用于网站的首页。
缺点:速度慢,浏览者需要漫长的过程才能浏览到所需的
网页布局类型
网页常见布局 网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型,下面分别论述。 1、“国”字型: 也可以称为“同”字型,是一些大型网站所喜欢的类型,即最上面是网站的标题以及横幅广告条,接下来就是网站的主要内容,左右分列一些两小条内容,中间是主要部分,与左右一起罗列到底,最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到最多的一种结构类型。 2、拐角型: 这种结构与上一种其实只是形式上的区别,其实是很相近的,上面是标题及广告横幅,接下来的左侧是一窄列链接等,右列是很宽的正文,下
面也是一些网站的辅助信息。在这种类型中,一种很常见的类型是最上面是标题及广告,左侧是导航链接。 3、标题正文型: 这种类型即最上面是标题或类似的一些东西,下面是正文,比如一些文章页面或注册页面等就是这种类。 4、左右框架型: 这是一种左右为分别两页的框架结构,一般左面是导航链接,有时最上面会有一个小的标题或标致,右面是正文。我们见到的大部分的大型论坛都是这种结构的,有一些企业网站也喜欢采用。这种类型结构非常清晰,一目了然。 5、上下框架型: 与上面类似,区别仅仅在于是一种上下分为两页的框架。 6、综合框架型:
上页两种结构的结合,相对复杂的一种框架结构,较为常见的是类似于“拐角型”结构的,只是采用了框架结构。 7、封面型: 这种类型基本上是出现在一些网站的首页,大部分为一些精美的平面设计结合一些小的动画,放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页,如果说处理的好,会给人带来赏心悦目的感觉。 8、Flash型: 其实这与封面型结构是类似的,只是这种类型采用了目前非常游戏行的Flash,与封面型不同的是,由于Flash强大的功能,页面所表达的信息更丰富,其视觉效果及听觉效果如果处理得当,绝不差于传统的多媒体。
网页布局设计
网页布局设计: 用户的视觉路径一般是:从上到下,从左到右。 好的视觉设计路径应该是顺应这样的用户习惯,糟糕的设计会让用户无所适从,焦点到处都是。 对用户引导的关键就在于怎么处理主次关系。就是对比,从视觉的角度上看:形状的大小,颜色,摆放的位置都会影响信息的重要与否。 从大的区块来看,不要平均分割页面,三栏的设计应该让其中一栏明显短一些。 从局部来看,也要把握信息呈现的节奏,比如yahoo中间新闻栏的设计,大图带大标题是第一要点,小图带字是第二要点,纯文本第三,节奏感、主次关系非常强。 下面是几种常见的网页布局结构: <1>骨骼型结构。即类似于人体的骨骼结构。分为上中下,内容部分分为两、三栏的设计。
这就是一个web 2.0风格的页面,骨骼型结构,上面主要是logo,导航banner,内容部分三成两栏,页脚版权,典型的骨骼型结构。 <2>对称型结构,对称型结构就是网站有一个对称轴,称左右或者上下对称。这种网页在阅读上很明明确给出用户重要和次要区域的划分,根据于都习惯往往在比较大的位置上安排主要内容。 这个网页就是一个对称结构,左边是网站的一些导航和产品信息以及版权信息以及练习方式等等。右边是网站的主要信息。最大的特点是板我们骨骼型的top和foot放到了左边,body放到了右边,形成一个对称结构。 <3>满版型的结构。其实这种网页结构随着现在显示器尺寸的增大和分辨率的提高逐渐再做一个过度,即以前的整个图片满版到后面的背景满版,到现在的局部满版。这种版式给人的感受是内容紧凑,气氛表达充分,适合温馨和暖性思维的表达。 这个早期的满版多见于韩版网页。 <4>焦点型,这类网页多见于围绕一个中心点,真个页面围绕中心,多见于销售类网站或者品牌产品网站。其特点是中心明确,表达信息集中,传达信息清楚。 占据网页面积最大的图片吸引了大部分焦点,展现了个性。
CSS页面布局及样式设计实验报告
实验项目名称: CSS页面布局及样式设计 (所属课程:web系统与技术) 学院:计算机学院专业班级:11级计科信息姓名:学号: 实验日期:实验地点:A06-404 合作者:指导教师:李 本实验项目成绩:教师签字:日期: 一、实验目的 (1)掌握CSS中的定位属性使用方法。 (2)掌握DIV+CSS的页面布局方式。 (3)掌握CSS中的常用属性的使用方法。 (4)理解CSS的样式构造。 二、实验条件 安装Web开发环境的微机。 三、实验内容 (1)重新对聊天室的注册页面、登陆页面和聊天页面进行页面布局。 (1)对聊天室的注册页面、登陆页面和聊天页面进行样式设计。 四、实验步骤 (1)注册页面使用CSS将注册表单居中显示,表单内嵌入表格将文本与输入域格式化显示,表单内使用label标签。 (2)登录页面中添加div层用于显示在线用户数。 (3)登录页面使用div将登录表单,在线用户数,logo图片,超链接等页面元素重新定位布局。 (4)聊天页面改用div标签并使用CSS的position定位属性进行布局,框架内的独立页面使用float属性进行布局。 (5)使用CSS设置三个页面的背景颜色或背景图片。 (6)注册页面使用CSS设计所有输入框和提交按钮的样式。 (7)登录页面使用CSS设置的超链接的字体和下划线、登录表单使用圆顶角、在线用户数使用图片数字,使用CSS设计登录按钮的显示样式。
(8)聊天页面中使用CSS设计信息发送表单和发送按钮的样式,设计用户信息列表和聊天信息段落的的显示样式。 五、实验结果 注册界面效果图及代码: