《网站建设 网页的排版布局》由会员分享,可在线阅读,更多相关《网站建设 网页的排版布局(39页珍藏版)》请在金锄头文库上搜索。
1、05模块 网页的排版布局,在进行网站设计时,需要对网站的版面与布局进行一个整体的规划,这就是网站的排版布局。本模块主要讲解页面的基本构成、常见的页面结构、页面布局设计的基本流程和常用网页布局方法等内容,其中常用网页布局方法是本章的重点。,能力目标 1能使用表格布局网页。 2能使用框架布局网页。 3能熟练使用CSS+DIV布局网页。 知识目标 1页面的基本构成。 2常见的页面结构类型。 3页面布局设计流程。 4常见页面布局方法。,知识1页面的基本构成,互联网上的网页多种多样,内容千差万别,组成各异。但是,一般的网页都包含标题、网站标志、页眉、导航栏、内容板块和页脚等部分。 1网页的标题 每个网页
2、都有一个标题,用于指示网页的主要内容。网页的标题显示在浏览器窗口的标题栏中。在设计网页时,应该给网页指定一个有一定意义的标题,使浏览者在看到网页标题就能了解网页包含的大体内容。,2站标 站标就是网站的标志,也叫网站Logo,是一个网站的特色和内涵的集中体现。它是一个站点的象征,一般放在网站首页的左上角或显眼位置,访问者能明显地看到它。一个好的站标,可以给浏览者留下深刻的印象,在网站的推广和宣传中起到事半功倍的效果。例如新浪用字母Sina和大眼睛作为标志。站标设计追求的是以简洁、符号化的视觉艺术形象把网站的形象和理念长留于人们心中。,3页眉 页眉指页面的上部,通常位于水平放置的导航栏上面。有些网
3、页的页眉比较明显,有些页面则没有明确的划分,有点甚至没有页眉。通常,页面左边放置站标,右边安排网站的宗旨或广告语,或者放置商业广告。页眉是浏览者打开页面时首先看到的地方,在商业网站中通常将页眉作为广告位出租。,4导航栏 导航栏是用户在规划好站点结构、开始设计主页时必须考虑的一项内容。导航栏的作用就是让浏览者在浏览站点时,不会因为迷路而中止对站点的访问。事实上,导航栏就是一组超链接,这组超链接的目标就是本站点的主页以及其他重要页面。在设计站点中的诸页面时,可以在站点的每个网页上显示一个导航栏,这样,浏览者就可以既快又容易地转向站点的其他主要网页。,5内容板块 内容板块是页面的主体,往往根据内容的
4、多少划分为几个栏目。每个栏目中放置内容标题作为连接或内容摘要,具体内容包括文字、图像和动画等。页面的内容才是浏览者关注的根本目标。只有拥有丰富的内容,才能吸引众多的浏览者。因此,对内容板块应该合理安排、精心设计。 6页脚 页脚是指页面的底部,通常放置版权信息、联系方法,有时也把导航栏、友情链接安排在这里。,知识2常见的网页结构类型,1“同”字型布局 “同”字型布局(又叫“国”字型布局)的结构特点是:页面顶部为水平放置的主导航栏,其下大体上分为左中右三栏,左边一般放置内容导航、二级栏目或热点内容等;右边一般放置站点图片链接、动画广告、搜索引擎、友情链接和注册登录信息等;中间为主要内容板块。,“中
5、国人民大学”首页,这种结构布局是互联网上最常见的布局,其优点是:页面结构清晰、直观、平衡均衡和主次分明。缺点是版次过于呆板、僵化,往往给人一种“单调乏味”的感觉。因此,采用这种布局结构时,必须在设计过程中更加注重色彩的搭配和细节的处理,调节页面的整体韵律,弥补它的不足。,2“匡”字型布局 “匡”字型布局(又叫“拐角型”布局)是把“同”字型布局右边的内容移到底部而成,它们的结构特点和优缺点也大体相同。如北京交通大学首页就属于这种布局,如图5-3所示。,3.“吕”字型布局 “吕”字型布局的特点是把页面分为上下两大块,其中每一块都具有同字型结构的特点。这种结构在设计技术上采用上下两个表格进行页面元素
6、的定位,两个表格之间往往插入条幅广告。这种布局能够容纳大量信息,目前各大型门户网站的二级模块通常都是采用“吕”字型的布局。如“新浪体育”、“网易新闻”和“搜狐财经”等网页。,4自由式布局 自由式布局打破上述结构的“规规矩矩”,尽情挥洒。页面布局就像一张宣传海报,极具创意。这种页面常常以一幅精美的图片作为设计中心,导航栏则作为次要的设计元素,自由摆布,起到点缀、修饰和均衡的作用。一些时尚网站常常采用这种布局,如艺术设计、时装服饰和化妆品等站点。这种布局的优点是漂亮、现代、轻松和明快,极具美感,给人以美的享受。,知识3页面布局设计,1构思构图 在真正开始页面布局设计之前,都要对页面的整体布局进行认
7、真的构思。在这个阶段,可以借鉴他人的布局经验,参考他人的布局结构,吸取别人的精华,融入到自己的整体构思中。要充分发挥艺术想象力,锐意创新、大胆突破,结合现有的网页素材考虑,进行整合创作。构思结果一定要有自己的独特创意,并要考虑技术实现的可行性。有时候,尽管构思巧妙,见解独到,但用现在的计算机技术和网络技术却不能实现,创意也就变成了空想。,2绘制草图 网页布局设计就像写文章一样,要事先打草稿绘制草图。新建页面就像一张白纸,没有任何表格和框架,没有约定俗成的条条框框的约束,可以尽可能地发挥你的想象力,将想到的“景象”画上。绘制草图就是把头脑中构思的页面布局轮廓具体化的过程,可以在纸上绘画,也可以用
8、软件在计算机上绘制。,某某网上商城草图,3草图细化和方案确定 草图细化和方案确定就是在绘制出来的轮廓草图上,具体摆布页面元素,包括网站的站标、导航栏、栏目标题、广告、图片和搜索引擎等。按照平面设计的规律做出平面的基本样式。这一步可以用一些图像处理软件(如Photoshop、PageMaker和Illustrator等)在计算机上完成。在具体布局页面元素时,可以借鉴平面构图的一些基本原则,如平衡、呼应、对比和疏密等。这个阶段的设计结果仍然是草图,但是已经是一个布局完善的设计方案了,除了文字内容之外,其他所有内容应该基本接近将来网页的实际效果。这个方案供客户和技术开发人员讨论确定最后方案时参考。,
9、4量化描述 量化描述就是确定各种页面元素的具体尺寸。主要包括下面几个方面。 (1)网页的外形尺寸。 (2)图形图像的尺寸。 (3)字体大小。 (4)色彩代码。 (5)网页的文件大小。,5方案实施 根据上述步骤确定的最终方案用网页编辑软件(如Dreamweaver或Frontpage)和图像处理软件(如Photoshop和Fireworks)进行布局设计。,知识4网页布局方法,1使用表格布局网页 表格布局具有简单高效,易学易用的特点。很多版面非常复杂的页面往往都是用表格来控制的。采用表格进行页面布局,可以简洁明了和高效快捷地将文本、图片和多媒体对象等页面元素有序地显示在页面上,从而设计出版式美观
10、的页面效果。,表格布局效果,2使用层布局网页 在设计网页时,除了使用表格对页面元素进行定位之外,还可以使用层进行页面元素的定位。使用层可以以像素为单位精确定位页面元素。可以把层放置在页面的任意位置。把页面元素放入层中,除了可以对页面元素进行定位外,还可以控制元素的显示和隐藏以及显示顺序。,宽度固定且居中的布局是网络中最常用的布局方式之一,在传统的表格布局方式中,使用表格的居中对齐属性可以实现布局居中。当然使用CSS方法也可以实现布局居中。首先在页面中插入div标签,将网页所有内容用一对标签包裹起来,指定该div的id为container,代码如下。 ,CSS代码,body text-align
11、:center; #container position:relative; background-color:#FF0000; margin-top:0px; margin-right:auto; margin-bottom:0px; margin-left:auto; height:796px; width:900px; text-align:left; ,CSS代码控制的层居中效果,3使用框架布局网页 框架在网页设计中的应用是比较广泛的。在浏览网页的时候,常常会遇到这样的一种导航结构,单击页面上侧链接,链接的目标出现在下侧;或者单击页面左侧的超级链接,链接的目标出现在右侧。这就是框架技术
12、中的最常用的导航窗口。 框架页面是把浏览器窗口划分为若干个子窗口,这些子窗口称为框架。一个框架显示一个网页文件,但整个框架集却存在于同一个浏览器窗口中。框架页面可以把不同类别的信息显示在不同的框架中,有利于分类管理和控制。,框架布局设计,知识5页面排版布局趋势(Web2.0),Web2.0是一个新兴的网站设计技术概念。Web2.0的网页一般使用CSS+DIV实现网页的布局。使用Ajax和XML与服务器进行数据交互。 Web2.0网页的布局更加强调网站的专业性与网站的交互性。网站可以体现出强大的功能,网页在简单的布局中可以体现出强大的功能。例如,“谷歌”和“百度”就是Web2.0网站优秀布局方式
13、的代表。在一个简单的网页输入框中可以查询到所需要的知识。同时,在查询结果的网页中,高效地布局出用户所需要的内容。,百度网站版面设计,任务1 使用CSS+DIV布局一个网页,1新建一个网页,切换到代码视图,在标签中加入如下代码。 ,2在标签中加入如下CSS代码用来控制各DIV的显示。 ,#header position:relative; background-color:#FF0000; height:113px; width:900px; text-align:left; #links position:relative; background-color:#FF9900; height:2
14、9px; width:900px; text-align:left; ,#left position:relative; background-color:#FFFF66; height:587px; width:216px; text-align:left; float:right; #main position:relative; background-color:#00FFFF; height:587px; width:684px; text-align:left; float:left; ,#footer position:relative; background-color:#FF0
15、0FF; height:47px; width:900px; text-align:left; float:left; ,代码说明: (1)代码中共包含6个DIV标签,分别代表6个层。其中最外层的id为container的DIV起到一个容器的作用,用于容纳其它5个层。 (2)选择器body和#container的样式用于将最外层id为container的DIV(容器层)水平居中显示。 (3)其它几个选择器样式如#header,#links,#left,#main和#footer分别用来控制容器内5个层的显示。 (4)选择器#left和#main中有一个重要CSS属性float。其中在选择器#left中设置为float:left;而选择器#main中设置为float:right。该属性设定了id为left的层居左显示,id为main的层则居右显示。在网页中预览如图5-24所示。 (5)如果想将id为left和main的层交换位置,只需要在选择器#left中设置float:right;同时在选择器#main中设置float:left即可。在网页中的预览效果如图5-25所示。从图5-25可以看出,使用CSS+DIV布局的网页,要调整各模块之间的相对位置是很简单的。,