网页设计中的页面布局.doc

浅析网页设计中的页面布局摘要:网页设计作为一种视觉语言，要讲究编排和布局，虽然主页的设计不等同于平面设计但它们有许多相近之处，应充分加以利用和借鉴。 版式设计通过文字图形的空间组合，表达出和谐与美。一个优秀的网页设计者也应该知道哪一段文字图形该落于何处，才能使整个网页生辉。 多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之间和页面内的秩序与内容的关系。为了达到最佳的视觉表现效果，应讲究整体布局的合理性，使浏览者有一个流畅的视觉体验。“评价一种Web开发技术优劣的标准只有一个，那就是看这种技术能否在最恰当的时间和最恰当的地点，以最恰当的方式，为最需要信息的人提供最恰当的信息服务。”（摘自2004年4月程序员的Web开发技术史话）王咏刚先生他说这段话的本意是就当时许多搞技术的人似乎已经忘记了Web架构的设计初衷，在自己开发的网站或Web应用中大肆堆砌各种所谓的先进技术，但最终用户能够在这些网站或应用中获得的有价值信息却寥寥无几。在讨论Web标准布局之前，再来反思王先生的这段话，感觉CSS的发展正应了先生的观点，纵览今日中国的Web技术发展，虽然还存在不同的声音，但普及和使用Web标准及CSS技术已是一个不争的事实。关键词:网页设计 布局 搭配、DIV、CSS Abstract: Web Design as a visual language, it is necessary to emphasize presentation and layout, although the Home Design does not mean graphic design but they have many similarities, should be fully utilized and use for reference. Graphic design layout of the space through the combination of text, to show harmony with the United States. An outstanding web designers should also know which section of the text with graphics where can we make the whole page Shenghui. Multi-page site page layout design requirements of the organic link between the pages reflected, in particular between pages and pages necessary to properly handle the order and content of the relationship. In order to achieve the best performance of the visual effects, should emphasize the overall layout of the reasonable, so that visitors have a smooth visual experience. An evaluation of themerits of Web development technology there is only one standard, it is to see whether this technology in the most appropriate time and the most appropriate locations to the most appropriate way for people most in need of information to provide the most appropriate information Service. (From April 2004, the programmer, the Web Development Technology Industry ) Mr. Wang Yonggang He said that this passage was intended to engage in technology at that time many people seem to have forgotten the Web framework is designed to, In its development of the site or Web application wantonly spelled all kinds of so-called advanced technology, but in the end users to those sites or application of the valuable information they receive very few. During the discussion before the layout of Web standards, and then reflect on these words of Mr. Wang, are feeling the development of CSS should be the Presidents point of view, todays China overview of Web technology development, although there are different voices, but the popularity and use of Web standards and CSS Technology is an indisputable fact.Key words: Web design layout with, DIV, CSS引言：网站是企业向用户和网民提供信息(包括产品和服务)的一种方式,是企业开展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不可能的。企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站是INTERNET上宣传和反映企业形象和文化的重要窗口。网站设计显得极为重要，下面是一些网站设计中应注意的原则。 随着Web标准在国内的逐渐普及很多业内人士的大力推行，很多网站已经开始重构。Web标准提出将网页的内容与表现分离，同时要求HTML文档具有良好的结构。因此需要抛弃传统的表格（table）布局方式，采用DIV布局，并且使用CSS层叠样式表来实现页面的外观。浅析网页设计中的页面布局网页可以说是网站构成的基本元素。当我们轻点鼠标，在网海中遨游，一副副精彩的网页会呈现在我们面前，那么，网页的精彩与否的因素是什么呢？色彩的搭配、文字的变化、图片的处理等，这些当然是不可忽略的因素，除了这些，还有一个非常重要的因素网页的布局。下面，本文就有关知识对网页布局的方式进行探讨。 首先，让我们对本文中所要用到的网页布局软件Dreamweaver进行相应的了解：1.认识DreamweaverDreamweaver(意译为“织梦者”)为美国著名的平面设计、网络设计和多媒体软件开发公司Adobe推出的一款“所见即所得“的可视网络和Web应用程序开发工具。它提供了可视布局工具，应用程序开发工具和代码编辑支持的强大组合，使各个技术级别的开发者和设计者都能够快速创建可视化，吸引人的基本标准的站点和应用程序。从基于CSS和Ajax核心技术设计的领先支持到手工编写的代码功能。Dreamweaver提供了集成的无缝的环境中所需的各种专业工具。开发者可以将Dreamweaver与Photoshop、Firework、Flash以及各种服务器技术的完美结合来构建强大的Web应用程序。Dreamweaver的最大优点就是可以帮助初学者迅速成长为网页制作高手，同时又能够给专业设计师和开发工程师提供强大的开发工具和无穷的创作灵感。因此Dreamweaver受业界人士的推崇，在较多的专业网站和企业应用中都把它列为首选工具。2.网页布局的基本概念 最开始，网页呈现在你面前的时侯，它就好像一张白纸，它需要你任意挥洒你的设计才思。在开始的时侯，你需要明白，虽然你能控制一切你所能控制的东西，但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯，那么你可以在此基础上加上自己的东西。你当然也可以创造出自己的设计方案，但如果你是初学者，那么最好明白网页布局的基本概念。 2.1、页面尺寸： 由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围变得越来越小。一般分辨率在800x600的情况下，页面的显示尺寸为：780x428个象素；分辨率在640x480的情况下，页面的显示尺寸为:620X311个象素；分辨率在1024X768的情况下，页面的显示尺寸为：1007x600。从以上数据可以看出，分辨率越高页面尺寸越大。 浏览器的工具栏也是影响页面尺寸的原因。一般目前的浏览器的工具栏都可以取消或者增加，那么当你显示全部的工具栏时，和关闭全部工具栏时，页面的尺寸是不一样的。 在网页设计过程中，向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。但我想提醒大家除非你能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，那么你最好能在上面做上页面内部连接，方便访问者浏览。 2.2、整体造型： 什么是造型，造型就是创造出来的物体形象。这里是指页面的整体形象，这种形象应该是一个整体，图形与文本的接合应该是层叠有序。虽然，显示器和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。 对于不同的形状，它们所代表的意义是不同的。比如矩形代表着正式，规则，你注意到很多ICP和政府网页都是以矩形为整体造型；圆形带表着柔和，团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型；三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型；菱形代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义，但目前的网页制作多数是接合多个图形加以设计，在这其中某种图形的构图比例可能占的多一些。 2.3、页头： 页头又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。 2.4、文本： 文本在页面中出现都数以行或者块(段落)出现，它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限，文本放置的位置的灵活性非常小，而随着DHTML的兴起，文本已经可以按照自己的要求放置到页面的任何位置。 2.5、页脚： 页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。你能看到，许多制作信息都是放置在页脚的。 2.6、图片 图片和文本是网页的两大构成元素，缺一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这里。 2.7、多媒体 除了文本和图片，还有声音，动画，视频等等其它媒体。虽然它们不是经常能被利用到，但随着动态网页的兴起，它们在网页布局上也将变得更重要。3.网页布局的方法 网页布局的方法有两种，第一种为纸上布局；第二种为软件布局。下面分别加以介绍： 3.1、纸上布局法 许多网页制作者不喜欢先画出页面布局的草图，而是直接在网页设计器里边设计布局边加内容。这种不打草稿的方法不能让你设计出优秀的网页来。所以在开始制作网页时，要先在纸上画出你页面的布局草图来。 3.1.1、尺寸选择： 目前一般800X600的分辨率为约定俗成的浏览模式。所以为了照顾大多数访问者，你页面的尺寸以800X600的分辨率为准。 3.1.2、造型的选择： 先在白纸上画出象征浏览器窗口的矩形，这个矩形就是你布局的范围了。选择一个形状作为整个页面的主题造型，我们选择圆形，因为它代表着柔和，和时尚流行比较相称，然后在矩形框架里随意画出来，你可以试着再增加一些其它形状。这样画下来，你会发现很乱。其实，如果你一开始就想设计出一个完美的布局来是比较困难的，而你要在这看似很乱的图形中找出隐藏在其中的特别的造型出来。还要注意一点，你不要担心你设计的布局是否能够实现。事实上，只要你能想到的布局都能靠现今的HTML技术实现。考虑到左边向左凹的弧线，为了取得平衡我们在页面右边增加了一个矩形(也可以是一条线段)。 3.1.3、增加页头： 选定了布局造型，那么我们该增加页头了。一般页头都是位于页面顶部，所以我们要增加一个页头，为了和左边的弧线和右边的矩形取得平衡，我们增加了一个矩形页头并让页头相交与左边的弧线。 3.1.4、增加文本： 页面的空白部分分别加入文本和图形。因为在页面右边有矩形作为陪衬，所以文本放置在空白部分不会因为左边的弧线而显得不协调。 3.1.5、增加图片： 图片是美化页面和说明内容必须的媒体。在这里把图片加入到适当的地方。 经过以上的几个步骤，一个时尚页面的大概布局就出现了。当然，它不是最后的结果，而是你以后制作时的重要参考依据。 3.2、软件布局法 如果你不喜欢用纸来画出你的布局意图，那么你还可以利用软件来完成这些工作。这个软件就是Photoshop。Photoshop所具有的对图像的编辑功能用到设计网页布局上更显得心应手。不像用纸来设计布局，利用Photoshop可以方便的使用颜色，使用图形，并且可以利用层的功能设计出用纸张无法实现的布局意念。4.确良网页布局的技术 4.1、表格布局 用表格布局显得比较粗糙。关于这个问题，可谓仁者见仁、智者见智，当然如果你用切图来实现表格布局就难说了，所付出的代码就是高度的代码冗余。比如用表格实现内边距、外边距就是非常麻烦的，有时为了增加表格左边距，可能需要再增加一列单元格，甚至需要嵌套表格。特别是已经完成布局之后，再想调整内边距时，会感觉非常费力，有时会破坏掉前面设计好的布局。比如实现犹如麻点边框效果和圆角效果等，页面需要多层表格嵌套。这样多层表格嵌套会带来两个问题：一个是浏览器解析的缓慢；另一个是多层嵌套为代码维护与内容修改带来麻烦，大道理不讲，读者可以想象一下在如此多层关系表格中要找到插入点会是多么困难，调整布局结构更是难上加难，因为牵一发而动全局。4.2、框架布局 中国的互联网行业已经发展了10年，浏览器也从最早流行的NS到现在的FF3.IE7等等前端开发工程师的职位也诞生了。近几年在web开发中，有个非常火的词“框架”。YUI、JQuery、Prototype这些javascript框架在开发网站时，确实成为前端开发工程师的手中利器。为什么呢？因为框架是包含工具、函数库、约定，以及尝试从常用任务中抽象出可以复用的通用模块，让设计师与程序员避免重复开发。通俗地讲便是把大多数重复工作的时间给节约了。但是，框架存在着很多的弊端。 学习成本提高。你需要了解整个框架，需要阅读框架的文档。框架对于一个小项目等页面来说很臃肿。框架中可能有大部分你用不到的代码。可能会无法帮助你的技术提高。太依赖框架，以至于很难排除漏洞或问题。包括框架中本身就带的漏洞或问题。选择自己需要的框架与开发框架都很痛苦。写到后面发现越来越不灵活，越来越臃肿。4.3、CSS网页布局本文着重讲述如何运用DIV对页面进行布局，再通过CSS样式表，实现页面结构和内容的分离。通过制作一个网站页面讲解如何运用DIV+CSS对页面进行布局。前面说到的CSS布局与table表格式布局是两种完全不同的布局方式，什么样的方式才能算得上是CSS布局呢？DIV是XHTML中指定的，专门用于布局设计的容器对象。本文主要讲解CSS布局，DIV则是这种布局方式的核心对象4.3.1 网站布局设计原则如果想要制作出既美观、使用起来又方便的网站，那么首先把网站布局设计好是十分必要的。为了出版印刷而编辑设计的布局是指把文本、图像、符号等各种构成要素在指定的空间内进行合理的安排配置的工作。在网页设计中布局的概念也是差不多的，网页设计的布局就是把进入网页页面的诸多构成要素（文字、图像、图表、表单等）在网页浏览器里有效的安排起来网站的文字或图像等网页的构成要素配置得是否协调，将决定页面给人的感觉及其实用性。网站的布局浊盲目地在网页里面罗列各种构成要素的。怎么样才能达到网页构成的目的，怎么样才能使网页看起来既美观又实用，这才是我们每一个设计网页布局的人应该先考虑到的问题，如果网页布局不合理，则会在向浏览者传达网页内容的时候发生困难，也不会让人对其产生兴趣，因此，为了能够设计出既美观、新颖，又使用方便的网页布局，我们有必要多参考别人的布局方法，我们应该在仔细研究那些优秀的布局方式的同时，对如何能在有限的空间里把页面中的内容更加有机地搭配起来，如何才能营造出一种良好的视觉效果这些问题进行认真的思考。4.3.2 CSS网页布局分类一列固定宽度一列固定宽度是所有布局的基础，也是最简单的布局形式。这里所说的一列式布局是一种固定宽度的布局样式。XHTML代码相当简单，我们只需要编写DIV即可。一列自适应自适应布局是网页设计中常见的一种布局形式。自适应的布局能够根据浏览器窗口的大小，自动改变其宽度或高度值，是一种非常灵活的布局形式。良好看自适应布局网站对不同分辨率的显示器都能提供最好的显示效果，实际上DIV在默认状态下的占据整行的空间，便是宽度为100%的自适应布局的表现形式，一列自适应布局需要我们做的工作也非常简单，只需要将宽度由固定值改为百分比值的形式便可完成。一列固定宽度居中页面整体居中是网页设计中常见到的形式，在传统表格式布局中，我们使用表格的align=”center”属性来实现。DIV本身也支持align=”center”属性，也可以让DIV呈现为居中状态，书写在XHTML的DIV属性中，有背于分离原则，因此应当使用CSS的方法实现内容的居中。CSS样式代码如下：#game Basckground-color:#CCCCCC; Border:2px soid #333333;Width:300px;Height:300px;Matgin: opx auto; 二列固定宽度二列宽度自适应两列右列宽度自适应二列固定宽度居中三列浮动中间列宽度自适应高度自适应4.4休闲游戏网站页面制作4.4.1 实例分析在本实例的制作过程中，我们首先要对页面进行布局设计。该实例页面布局简单，条理很清晰。页头分为3个DIV，页面正文部分以左右两列的形式进行布局，然后对布面进行细化的布局，在CSS布局中所需要的工作可以简单的归结为两个步骤，首先使用DIV将内容标记出来，然后为这个DIV编写我们所需要的CSS样式表。在