网页布局基本类型

1、网页布局的基本类型网页的布局不可能像平面设计那么简单，除了上文提到过的可操作性外，技术问题也是制约网页布局的一个重要因素。虽然网页制作已经摆脱了HTML时代，但是还没有完全做到挥洒自如，这就决定了网页的布局是有一定规则的，这种规则使得网页布局只能在左右对称结构布局、“同”字型结构布局、“回”字型结构布局、“匡”字型结构布局、“厂”字型结构布局、自由式结构布局、“另类”结构布局等几种布局的基本结构中选择。10.3.1左右对称结构布局左右对称结构是网页布局中最为简单的一种。“左右对称所指的只是在视觉上的相对对称，而非几何意义上的对称，这种结构将网页分割为左右两部分。一般使用这种结构的网站均把导航区

2、设置在左半部，而右半部用作主体内容的区域。左右对称性结构便于浏览者直观地读取主体内容，但是却不利于发布大量的信息，所以这种结构对于内容较多的大型网站来说并不合适，如图10.10所示。niI生眄11ii.Sftrs-O-r|丑惡雹童冬時迺朝鼻I建占HrniI生眄11ii.Sftrs-O-r|丑惡雹童冬時迺朝鼻I建占HrMitvuucj；贏匕电以ntgtiartxt!tjlkite1-JI-WILLI2建時字=工.才*JI!Wk7l6DD世口融屢畑IED幅密Mg荻挡器淞器呷盘澹;理焉甕监=事建*hL：Ji.鸣mTa一!Mn：:量，勺负iMH也C*JLSMJJEfttlSAJISWlDTP缈*RM.

3、暑！IQMH也C*JLSMJJEfttlSAJISWlDTP缈*RM.暑！IQMiTMg!剜t嚼J时I訓艮U理匕”讯4円JlM：g芒i#izVrFHfRtf|CtP*T-nJ.闻也nn尊1”孑luina-鼻et*.it吒严乂航|氏血丹护山3,工署乩J时I訓艮U理匕”讯4円JlM：g芒i#izVrFHfRtf|CtP*T-nJ.闻也nn尊1”孑luina-鼻et*.it图10.10左右对称结构布局的网站10.3.2“同”字型结构布局同”字结构名副其实，采用这种结构的网页，往往将导航区置于页面顶端，一些如广告条、友情链接、搜索引擎、注册按钮、登陆面板、栏目条等内容置于页面两侧，中间为主体内容，这种

4、结构比左右对称结构要复杂一点，不但有条理，而且直观，有视觉上的平衡感,但是这种结构也比较僵化。在使用这种结构时，高超的用色技巧会规避“同”字结构的缺陷,如图10.11所示。知Alid闽MrIndiwduBicItaMlMilFHIWiMk14UiAi.HUJ-ran丈*1虹（iMiMdHrr论ini二L4tu*gi|iwiriMi*mii込“!：知Alid闽MrIndiwduBicItaMlMilFHIWiMk14UiAi.HUJ-ran丈*1虹（iMiMdHrr论ini二L4tu*gi|iwiriMi*mii込“!：IW-MaQlDW叫HU.iUHmlSl!buEuiknikiluiwh-t

5、mln*nBhFnTlLrtCrr*TTwTh严戶声ftnm.RmmnLkwErifaaT1iPjjfcri1nMFtnriliarw*BabsonCjCapSiBl图10.11“同”字型结构布局的网站10.3.3“回”字型结构布局“回”字型结构实际上是对“同”字型结构的一种变形，即在“同”字型结构的下面增加了一个横向通栏，这种变形将“同”字型结构不是很重视的页脚利用起来，这样增大了主体内容，合理地使用了页面有限的面积，但是这样往往使页面充斥着各种内容，拥挤不堪,如图10.12所示。cn.CMtfl氏肚MfllIFfflIHg|IBPItt|銀号|出H|戛乌|宝轴女人|吋皑IsS|打焜匸社匡t

6、tft|*#Hfl|Eft|M|母cn.CMtfl氏肚MfllIFfflIHg|IBPItt|銀号|出H|戛乌|宝轴女人|吋皑IsS|打焜匸社匡ttft|*#Hfl|Eft|M|母|苓和|覽慢$石庭|如MAM|曲橋B比翻啊苓挣事奉学怦同妞甜事刖啊审我FM.81学事星Ra%1T4揮雷廉畫密匕亍03!.空田氐1鑒中QMS花.Itl.-.!：M磴1年時申雇制站崩自出诞：r-主kW匪啓內点杏舟P理*址埜占理吨章1QJELKLASLUBnEMn*斗左晶LJ轉走:哥餐PE丹击赛菇裟截1ii1llrjnO旻黑笑土庞懊Mi肿执抚生旳惶时芳占型罔耐mimi品吉简虹.1砂产扌輛显昶呦些IZLrinfiUUEtHl

7、i人臭嗥庆*幷=呼“卩疔!代的牛潯?ItTMT*eloMU9-unPHiwa起i眄.细雷-KJdBiUFTiMi-tfciAwr?MiFffAiisnWSHff色:區见二fliWSfiHinWSIW、苗玄SBlftiJtS!不冉bl47-VaS-ZK?R4MOwsflxaA4工砂Mdfl札tE)日打13(古PS3T冉碟耳祸空把SM4fl=*fR*5!：3!.HItH無人甘丘证处HId4賊餌riHJESn*乍墓呂甘.E职剜JQ-屯寻呦佃优at;门st网，年匱隹T人世宴时-V9mWELKlJ卞要聲*SM15J图10.12“回”字型结构布局的网站10.3.4“匡”字型结构布局和“回”字型结构一样，“

8、匡”字型结构其实也是“同”字型结构的一种变形，也可以认为是将“回”字型结构的右侧栏目条去掉得出的新结构，这种结构是“同”字型结构和“回”字型结构的一种折中，这种结构承载的信息量与“同”字型相同，而且改善了“回”字型的封闭型结构，如图10.13所示。*M喜aaXMMCdrJT孚T晦*=血它2J:C.HE0IB4*Ewi&ia4阻空*M喜aaXMMCdrJT孚T晦*=血它2J:C.HE0IB4*Ewi&ia4阻空3aasifljatt*平就肿*#*昭KaatiSEiti曲的兰L曲3盘帀色中*ia卉*阿常酣呻用再幵厘申；CJ：工嗽髓工豪二Tft8l!NPi空中応CiaLWtfEUKP匹FMB：宜3P

9、FGWF4-直nUM_苦押垃HF冷虽里录别帛igrHniqggJE汩严“工弱trx區尸吉出川士谥111酬请畋比rH_f3KCfrIKtKiaMiSMi*胡矗皆h逊超Win朮訓匸曲h肿l=tM凹宇电松T3，IK!E1jqjfrESM.目gflLl&Wiz4jgitr*RHmLtrjg士盘划逊*lti#g：!fetjiUOIEtB竺他.亚a.3UMi泗丸阳询*w二曲生丘醍二业鱼q砂:sssh*空BJE!年！PU律詞”mfflBSSQffiBJbPkE士中吃l：訶1.!城豪瞩朗Ml#円*第邯香弓护坍诃怙近-mjssiiaUiJSXti就1力Thi不風国如立圭代生峪砂星中割啊=押a呻话B尹戶家洛尊盘宁

10、聖F询:沁昭S述班丫ICTEIBa睜-鬲m幄芯注权*上母丸mjyrgig墜壬-w；專臥卒剧訊蛊牡事閏話朋=：i“L弋=理戶aafi朗审伽甲时甩MlffiHMiir悄蔺册:卜甲HT耳日胡琵曲JW秦时耳SEIJ1安8网-北事持導甲“马码乓肓日!EfffAR-Ra:机昭取番几蠶英问珂-帆时.鼻栢.北阿工强斗工空【涉M祁-nsro论畔我=戟河方翊出凶|主涣）|-宜I宅1|松泄序18卄B出M.界弋宅竺严p丹凝as卿sot曲竝II皆制凹唧t；咖说畑54理出O=n*BMSBlaUHIU音*确钺奎星网輯丘血3低诵當图10.13“匡”字型结构布局的网站10.3.5自由式结构布局以上3种结构是传统意义上的结构布局

11、。自由式结构布局相对而言就没有那么“安分守己”了，这种结构的随意性特别大，颠覆了从前以图文为主的表现形式，将图像、Flash动画或者视频作为主体内容，其他的文字说明及栏目条均被分布到不显眼的位子,起装饰作用,这种结构在时尚类网站中使用的非常多，尤其是在时装、化妆用品的网站中。这种结构富于美感，可以吸引大量的浏览者欣赏，但是却因为文字过少，而难以让浏览者长时间驻足，另外起指引作用的导航条不明显，而不便于操作，如图10.14所示。图10.14自由式结构布局的网站10.3.6“另类”结构布局如果说自由式结构是现代主义的结构布局，那么“另类”结构布局就可以被称为后现代的代表了。在“另类”结构布局中，传

12、统意义上的所有网页元素全部被颠覆，被打散后融入到一个模拟的场景中。在这个场景中，网页元素化身为某一种实物，采用这种结构布局的网站多用于设计类网站，以显示站长的前卫的设计理念，这种结构要求设计者要有非常丰富的想象力和非常强的图像处理技巧，因为这种结构稍有不慎就会因为页面内容太多而拖慢速度，如图10.15所示。图10.15“另类”结构布局的网站瞻讯软件中心PC.QQ.COM件呷心,胃渦轎品软件展示台我力会不断崔升产品的性龍和待噓芮您琨伕星奸用闻软件!酋贡产话大豎国讯软杵墨蕭函姦-QQi剧口口駁本觀九J!芳盏直掘丈禹蚯恫-QQK槿】駁本茨和tfeffi少EF到建日-电BBT話帝血偲涪动牙氏先年刊绪力-QB借MjStft祐全格换5!力谜一斑升QQ茁=4-版审知ff沾出tt也it斩.AJM?皑唄泄羽绘點版齐Si啊;6网址拦ft；对能QQ砸王式庆養旺.全面拦升逵谊住鸟002U11瞅机更詞BM：:0-1-1?：冲Q斃容眩如灯和恤洽QQ用户帶来酷烷的叩性化体脸QQbBgSB更MBHJ1：ZOU-D3-22锁解决系姣问駆强大田电10管理工具0。旗饨E1两袖日朋：2011D3G1按逋酒賀端色下就工具、ssisffi?-ra打尽ZSE1戏価站甩。濾矗韵DOLke!5TK弄DGXJLftfs血.3E1TT7TR站号3禹乐Z冬逊盘sTfi於H1&1啻肓网站巒MOO