浅谈网页设计中的布局工具

开篇：润墨网以专业的文秘视角，为您筛选了一篇浅谈网页设计中的布局工具范文，如需获取更多写作素材，在线客服老师一对一协助。欢迎您的阅读与分享！

摘要:网页设计是网站建设的重点,用户不仅需要一个拥有丰富信息的网络环境,更需要一个让人赏心悦目的网络环境。如何将纷繁复杂的网络信息合理、恰当的放入网页中是网页设计者需要精通的一门技巧,也是众多网页设计爱好者们必须要思考的一个问题。该文从网页设计中有哪些布局工具,它们具有什么样的功能,在什么情况情况下使用等几个方面为读者进行了阐述。

关键词:布局;表格;层;页面元素;Dreamweaver

中图分类号:TP393文献标识码:A 文章编号:1009-3044(2009)24-6699-02

Brief Discussion on Layout Yools in Web Page Design

ZHANG Jing-bo

(Sichuan Chemical Technical College, Luzhou 646005, China)

Abstract: Web page design plays an important role in website construction .Both abundant information and beautiful appearance are essential for a network environment. Web page designer should be skillful for arranging numerous information on the page reasonably and properly. It is also a question that is worth thinking about by all web page amateurs. In this paper, the author tries to introduce the webpage layout tools and their functions. It also illustrates under which conditions the tools will be used.

Key words: layout; table; layer page; elements; dreamweaver

随着网络的发展,网站已经成为了日常生活中常常关注的媒体平台,在网站里,浏览者可以浏览新闻,观看电影,下载音乐,欣赏图片。而且所有通过网站浏览的信息资源,都是通过将其放置于网页中得以呈现的。如何才能让如此纷繁复杂的信息分门别类的出现在网页中呢?这就需要设计者灵活的运用网页布局工具了。清晰网页的布局可以让浏览者认清网站的结构,不至于在繁杂的信息中迷失方向,精美的网页布局可以给浏览者带来美的享受,在浏览信息的同时得到身心的愉悦。那么,在制作网页的过程中,有哪些布局的工具可以使用?它们又分别适合于什么情况下使用呢?

1 网页布局和传统文档布局的区别

在这里笔者用著名的网页制作软件Dreamweaver来举例。Dreamweaver是一个非常成熟的网页制作软件。它可以灵活的在设计视图和代码视图之间切换,并且提供了相当多的组件方便设计者使用。在网页中出现最多的网页元素就是图片和文字,将文字和图片放置到合理的位置是布局的第一要点。

经常使用Word等办公自动化软件的用户都习惯性的利用回车、空格或者是单纯的对齐方式来控制文档内容的布局。这个方法运用到网页设计中就并不那么有效了。

首先需要了解这样一个原理:大家浏览的网页中的信息几乎都是以HTML标签存在,它们首先被下载到本地硬盘,然后再通过编译显示到用户的浏览器上。这就意味着,如果在设计过程中,频繁的使用空格来布局的话,网页中将会出现很多代表空格的HTML标签( ),网页的大小就会无形中增大,网页越大,下载的时间就必然会越久。而回车在Dreamweaver中并非表示换行,它代表的是分段,它会导致2行页面元素相隔的间距被限制,同时将一个整体划分为两个部分,既不美观,也不方便操作。这显然并不符合设计的要求。那么在设计过程中,通常使用的布局工具有哪些呢?

2 网页设计中的布局工具

2.1 插入表格

最常用的就是直接插入表格。网页中的表格运用是非常重要的,只有将网页元素放置到表格中,才能更好的进行页面的布局。它的使用主要表现在以下几个方面:

2.1.1 网页大小的控制

平时大家浏览网页,都习惯的使用垂直滚动条来拖动页面浏览更多的内容。如果说一个网页既有水平滚动条,又有垂直滚动条,那肯定是非常不方面的。所以在设计的时候通常是首先在空白的网页中,插入一个限定了宽度的表格,然后所有的网页元素都放置于该表格中。这样后期制作的内容将不会出现水平延伸,只会在垂直方向上增加。这样就可以避免水平滚动条的出现了。

2.1.2 页面元素间距的控制

如果运用回车,两行页面元素之间的间距会变得不易调整,对于这个问题,制作过程中可以将页面元素放置于表格,利用单元格进行控制两行页面元素的位置。首先将原本处于两行的页面元素分别放置于两行表格中,在表格的属性里可以找到“间距”和“填充”这2个属性,可以设置它们的大小来控制单元格与单元格之间的间距,还可以设置单元格内元素和单元格边框之间的距离。这样就可以方便的实现回车键不能实现的功能了。同时也可以利用单元格的对齐方式以及拖动单元格的边框来实现以上的功能。

2.1.3 单元格内的背景图片

如果有这样一个设计,在页面中,利用一个扇动翅膀的蝴蝶Flas和一张花朵图案,实现蝴蝶在花丛中飞舞的效果。那么首先需要做的就是将图片与Flash重叠在一起。但是由于页面是一个平面,两个处于同一片面的页面元素是不能重叠的。这里可以将图片设置为单元格的背景图片,然后在单元格中插入Flas,由此产生了生动活泼的动画效果。

表格有这样丰富的功能,是不是利用插入表格就可以方便、灵活的进行布局呢?答案是否定的,单纯的插入表格进行布局存在很大的局限性,表格应该插入多少?单元格应该设置多宽多高?这些都是需要应对的问题。插入表格的设计方法比较适合当设计者在简单网页中的设计,比如放置一个音乐播放器到网页中,或者插入一个导航条这样的情况。

2.2 布局工具

另一个工具是利用Dreamweaver所提供的“布局工具”进行表格的设计。它的好处在于,设计者直接绘制的就可以产生利于调整的表格和单元格。

利用布局导航条切换到布局模式后,在该模式中可以利用“绘制表格”和“描绘单元格”两个功能来实现表格的插入,利用这2个功能,可以直观的在空白页面上绘制表格,然后在表格的基础上轻松绘制单元格。它的好处在于,利用绘制方法放置的单元格,位置上更加理想,不用插入或者拆分表格就可以实现位置的移动,并且在布局模式下,表格属性工具栏上还提供了利用坐标来精确控制单元格位移的方法。这使得页面元素的移动可以更加精确化。

布局模式可以利用表格实现同一平面页面元素的精确定位,比较适合的情况是在已知页面元素的高宽,并且已知需要放置哪些页面元素到页面中的情况。但是,如果页面上出现需要凸出于页平面的页面元素,单纯利用布局模式下的表格就不能完成了。

2.3 层的应用

如果说某个页面元素需要凸出于页平面,通常使用的表格就不能完成功能了,因为在同一平面页面元素是不能叠加的。而把某一页面元素设置为背景也比较局限。因为制作过程中只能把图片作为背景,不能把Flash或者文本作为背景。

遇到这样的情况,可以利用“插入层”来解决。“层”可以把它理解成漂浮于页平面的一个空间,这个空间可以像网页一样放入图片、Flash、文字等内容,并且它还有一个非常重要的属性,就是它具有Z轴。如果把页面的长宽分别看成以左上角为起点的X轴和Y轴的话,那Z轴就是垂直于页面的凸起轴,Z轴的值越大,层就越上层,那么放置于改层内的页面元素就会遮挡住其它的页面元素,从而显示在页面更上方。同时利用层凸出于页平面的这一特性,可以将需要运用的页面元素放置于其中,然后拖动层的位置,轻松实现页面元素的定位。

层比较适合于Flash结合使用,通常是把Flash透明动画放置于层中,然后作为图片的装饰,使页面产生动画效果。层也经常被使用到下拉菜单的制作中。

但是层也有自己的局限,由于层漂浮于页平面。所以它需要一个相对的坐标才能固定自己在页面中的位置,默认情况下层是相对于页面左上角对齐。如果页平面发生改变,比如缩小页面,往往就会改变层出现的位置,造成页面错位的问题。所以在使用前,必须要先找到层的相对对象,避免错位问题的发生。

3 结论

当然,网页设计中除了利用以上几种方法,还可以利用框架,利用Photoshop的切片等工具来实现布局,本文由于篇幅有限就不在此作一一介绍了。对于不同的布局方法,大家需要根据实际情况,结合自身设计的作品做出相应的选择,同时在实践中不断总结经验和教训,这样就能够作出更加精美的网页了。

参考文献:

[1] 胡松.Dreamweaver 8完全征服手册[M].北京:中国青年出版社,2006.

[2] 黄再贤.设计师谈精彩网页设计[M].北京:电子工业出版社,2004.