【正文】 構(gòu)成的水平長(zhǎng)矩形被置于頂部，使整個(gè)頁(yè)面顯得簡(jiǎn)潔、有章法。border 客戶端界面1）界面原型marginmargincontent 圖34 設(shè)計(jì)原型從這個(gè)簡(jiǎn)圖中可以看出是典型的用盒模型來(lái)設(shè)計(jì)的頁(yè)面布局2) 客戶端界面 圖34 首頁(yè)界面從圖34看出，這是一個(gè)經(jīng)典的3行加2列的結(jié)構(gòu)。在進(jìn)行界面設(shè)計(jì)的時(shí)候，首先要了解這些最基本的使用習(xí)慣以及最通用的設(shè)計(jì)規(guī)律。對(duì)于頁(yè)面中鏈接的組織（鏈接的數(shù)量和呈現(xiàn)方式）需要有組織、有重點(diǎn)、有節(jié)奏、有層次、要有針對(duì)性，另外還有注意慎用頁(yè)面內(nèi)的鏈接（錨點(diǎn)），盡管錨點(diǎn)可以幫助用戶迅速找到信息，但同時(shí)也容易給用戶造成困惑，更好的解決辦法是降低頁(yè)面的長(zhǎng)度或進(jìn)行有效的分類和分頁(yè)。因?yàn)?，用戶在案例網(wǎng)站中的行為主要是通過(guò)點(diǎn)擊網(wǎng)站上的鏈接來(lái)實(shí)現(xiàn)的，頁(yè)面上對(duì)導(dǎo)航及流量的引導(dǎo)也是通過(guò)鏈接來(lái)實(shí)現(xiàn)的，這里主要討論網(wǎng)站的鏈接設(shè)計(jì)。注冊(cè)登錄模塊，提供注冊(cè)功能或是已注冊(cè)用戶登錄入口。檢索系統(tǒng)支持用戶的多樣需求（確定的、模糊的），幫助用戶在最短的時(shí)間內(nèi)找到期望的信息。 信息構(gòu)建和交互設(shè)計(jì) 信息構(gòu)建以用戶為內(nèi)容設(shè)計(jì)和組織的出發(fā)點(diǎn)和落腳點(diǎn)，分析用戶需求，重視用戶在使用網(wǎng)站時(shí)的真實(shí)體驗(yàn)，運(yùn)用可視化的手段，從組織系統(tǒng)、導(dǎo)航系統(tǒng)、標(biāo)記系統(tǒng)和檢索系統(tǒng)四個(gè)方面切入，構(gòu)造出一個(gè)便于定位、理解、導(dǎo)航和使用的網(wǎng)站信息界面。根據(jù)這三類需求來(lái)進(jìn)行拓展設(shè)計(jì)。首先，收集需求。 系統(tǒng)功能架構(gòu) 圖31 功能層次圖 圖32 架構(gòu)設(shè)計(jì)圖主要用DIV+CSS技術(shù)解決的是VIEW（視圖層）的問(wèn)題，結(jié)合JSP和JS處理后臺(tái)的請(qǐng)求，提供給用戶更優(yōu)的交互性。商業(yè)網(wǎng)站，包括物流網(wǎng)站在內(nèi)，最高的目的肯定是在給用戶良好的使用體驗(yàn)的同時(shí)，增加它的營(yíng)業(yè)額。一些常見(jiàn)的用戶的觀點(diǎn)有：用戶不能很快的而明白網(wǎng)站的目標(biāo)，使新手困惑。2) 用戶行為當(dāng)用戶訪問(wèn)網(wǎng)站時(shí)，他們的操作過(guò)程是:(1) 無(wú)特殊任務(wù)的用戶通常快速瀏覽網(wǎng)站首頁(yè)，快件查詢，管理自己的訂單信息。3) 布局、導(dǎo)航和信息設(shè)計(jì)清晰明了由于用戶群體存在差異，主要通過(guò)用戶的行為、目標(biāo)和觀點(diǎn)來(lái)確定用戶的需求。如訂單查詢，配送區(qū)域查詢，配送預(yù)定等服務(wù)信息，還有產(chǎn)品、公司、服務(wù)介紹和與之相關(guān)新聞等，這些是企業(yè)網(wǎng)站提供給用戶的基本需求。尤其是對(duì)于一個(gè)成功的網(wǎng)站頁(yè)面的設(shè)計(jì)直接關(guān)系到能否人性化的把所有功能展現(xiàn)給每一個(gè)用戶。省公司主要負(fù)責(zé)車輛的維護(hù)、配送點(diǎn)、配送線路、配送價(jià)格的維護(hù)；配送點(diǎn)主要是接收客戶訂單，并聯(lián)系省公司車隊(duì)將貨物運(yùn)送到目的地，同時(shí)還負(fù)責(zé)貨物的配送工作。市場(chǎng)就是客戶的客戶，終端客戶接收了網(wǎng)站傳遞給他們的信息概念：看到暖色，他們會(huì)感覺(jué)這個(gè)企業(yè)是很有親和力的，容易溝通的；看到大量的矢量風(fēng)格的網(wǎng)站插圖時(shí)，他們會(huì)感覺(jué)這個(gè)企業(yè)是潮流派的、有個(gè)性的、有活力的。第三章 基于DIV+CSS技術(shù)的網(wǎng)站界面設(shè)計(jì)回顧網(wǎng)頁(yè)設(shè)計(jì)發(fā)展歷史，不論對(duì)比幾年前進(jìn)步多少，現(xiàn)今仍處在網(wǎng)站設(shè)計(jì)業(yè)的初期。Table表格布局靈活性不大，你只能遵循 table tr td 的格式。 更好的擴(kuò)展性。支持瀏覽器的向后兼容，兼容性更好，符合web標(biāo)準(zhǔn)規(guī)范的發(fā)展趨勢(shì)，可以在幾乎所有的瀏覽器上都可以使用，不會(huì)出現(xiàn)在不同的瀏覽器中效果差距很大的情況。這樣讓整個(gè)網(wǎng)頁(yè)整齊，規(guī)范。只要修改保存著網(wǎng)站格式的CSS樣式表文件就可以改變整個(gè)站點(diǎn)的風(fēng)格特色，在修改頁(yè)面數(shù)量龐大的站點(diǎn)時(shí)，顯得格外有用。這僅僅是一個(gè)慣例而已。樣式C代表著一種更復(fù)雜的布局。舉例來(lái)說(shuō)，%，而B(niǎo)中對(duì)應(yīng)的設(shè)置為25%和75%。實(shí)際開(kāi)發(fā)中是一定要美化CSS樣式文件的，而去追求更優(yōu)的用戶體驗(yàn)。這一次，不需要添加任何額外的CSS指令，因?yàn)檫@些將被重用。在仔細(xì)看看圖3表明，布局在Rows1和2之間的部分是著名的三欄流體布局正是網(wǎng)絡(luò)上的許多商業(yè)網(wǎng)站使用的模式。width:50%。}
{textalign:center。margin:0em。height:100%。}
{float:left。}
{ background:url(.gif) top left repeaty。}
,{ margin:0em。}
{ padding:0em。} { margin:0em。padding:0em。background:fff。textalign:center。padding:0em。fontsize:100%。color:000。的布局完成后，可以回去和刪除這條邊框，以隱藏查看底層的主題。它們可以作為一種基本的布局單位，使用一些CSS規(guī)則迭代實(shí)現(xiàn)產(chǎn)品可視化。分形的基本單元叫做序(基元)，如果確定一個(gè)序的規(guī)則已知的話，那么產(chǎn)生分形的過(guò)程將可以歸結(jié)為遞歸地將這些規(guī)則應(yīng)用于這個(gè)序(基元)。分形就是將其部分作為一個(gè)整體在不同長(zhǎng)度或者不同的時(shí)間尺度觀察，這就是所說(shuō)的自相似性，一個(gè)多重分形的東西會(huì)表現(xiàn)出幾種分形模式，這就是所說(shuō)的自仿射性。內(nèi)外填充屬性站在容器的角度，設(shè)定了頁(yè)面的排版。就是盒子邊框到內(nèi)容之間的距離，和表格的填充屬性（cellpadding）比較相似。而CSS對(duì)元素的背景設(shè)置，則提供了更多的途徑，如背景圖片既可以平鋪也可以不平鋪，還可以在X軸平鋪或在Y軸平鋪，當(dāng)背景圖片不平鋪時(shí)，并不會(huì)完全擋住背景顏色，因此可以綜合設(shè)置背景顏色和背景圖片達(dá)到希望的效果。 邊框border屬性 邊框?qū)傩杂脕?lái)設(shè)置對(duì)象的邊框?qū)傩?，類型以及粗?xì)。 圖27 CSS盒模式 每個(gè)HTML元素都可以看作是一個(gè)裝了東西的盒子盒子里面的內(nèi)容到盒子的邊框之間的距離即填充(padding),盒子本身有邊框(border),而盒子邊框外和其它盒子之間，還有邊界(magin),如圖所示默認(rèn)情況下盒子的邊框是無(wú)，背景色是透明，所以在默認(rèn)情況下看不到盒子在網(wǎng)頁(yè)設(shè)計(jì)上，內(nèi)容常指文字、圖片等元素，但是也可以是小盒子（DIV嵌套），與現(xiàn)實(shí)生活中盒子不同的是，現(xiàn)實(shí)生活中的東西一般不能大于盒子，否則盒子會(huì)被撐壞的，而CSS盒子具有彈性，里面的東西大過(guò)盒子本身最多把它撐大，但它不會(huì)損壞的?！】梢詥为?dú)對(duì)某種元素包含關(guān)系定義的樣式表，元素1里包含元素2，這種方式只對(duì)在元素1里的元素2定義，對(duì)單獨(dú)的元素1或元素2無(wú)定義，例如： table a　{　　 fontsize: 12px　 }　在表格內(nèi)的鏈接改變了樣式，文字大小為12象素，而表格外的鏈接的文字仍為默認(rèn)大小。　 　backgroundcolor:transparent　 }　?。ㄗ煮w尺寸為默認(rèn)尺寸的110%；粗體；藍(lán)色；背景顏色透明） 下面這個(gè)例子，ID屬性只匹配id=intro的段落元素：pintro　{　　 fontsize:110%。和類選擇符相同，定義ID選擇符的屬性也有兩種方法。下面使h1元素（標(biāo)題1）和p元素（段落）都?xì)w為“center”類，這使兩個(gè)元素的樣式都跟隨“.center”這個(gè)類選擇符：　　h1 class=center　　這個(gè)標(biāo)題是居中排列的　　/h1　　p class=center　　這個(gè)段落也是居中排列的　　/p 注意：這種省略HTML標(biāo)記的類選擇符是經(jīng)后最常用的CSS方法，使用這種方法，可以很方便的在任意元素上套用預(yù)先定義好的類樣式。　　color: black。h1 {color:red。 DIV+CSS 基本元素CSS的定義是由三個(gè)部分構(gòu)成：選擇符（selector），屬性（properties）和屬性的取值（value）。第二章 關(guān)鍵技術(shù)分析 DIV+CSS簡(jiǎn)介 DIV元素DIV元素是用來(lái)為Html文檔內(nèi)大塊(blocklevel)的內(nèi)容提供結(jié)構(gòu)和背景的元素。然后通過(guò)對(duì)比傳統(tǒng)的Web網(wǎng)頁(yè)設(shè)計(jì)布局，從用戶交互、代碼可用，設(shè)計(jì)思想等方面闡述DIV+CSS技術(shù)的優(yōu)缺點(diǎn)，如何在實(shí)際設(shè)計(jì)中靈活地應(yīng)用CSS設(shè)計(jì)模式。依舊還是設(shè)計(jì)師，但是能夠在滿足客戶的目的的同時(shí)，確保作品的藝術(shù)性和完整性。　　NWP V2圖11 . NWP V2首頁(yè) 設(shè)計(jì)單調(diào)，缺乏美感 NWP V3圖12. NWP V3首頁(yè) 輕快動(dòng)感，風(fēng)格獨(dú)特　在如此激烈的競(jìng)爭(zhēng)之中，一個(gè)可用性強(qiáng)的、獨(dú)特創(chuàng)新的網(wǎng)站設(shè)計(jì)成為網(wǎng)站長(zhǎng)期發(fā)展的必要條件之一。NWP ( )是全球最權(quán)威的網(wǎng)絡(luò)在線創(chuàng)意與潮流雜志，它的第二版的設(shè)計(jì)形式并不新穎，以至于，第一次進(jìn)入NWP V2首頁(yè)時(shí)（圖1），認(rèn)為它是一個(gè)無(wú)關(guān)緊要的網(wǎng)站，便沒(méi)有進(jìn)入內(nèi)頁(yè)瀏覽，而且直接關(guān)閉了瀏覽器。如果把可口可樂(lè)公司的網(wǎng)站，設(shè)計(jì)如同勞力士手表網(wǎng)站一樣時(shí)，誰(shuí)能想象這會(huì)造成多么大的經(jīng)濟(jì)損失？視覺(jué)審美關(guān)系到網(wǎng)站生存與發(fā)展網(wǎng)站作為新媒體的媒介主體，具有更多與傳統(tǒng)媒體不同的特征和特性。企業(yè)需要建立形象網(wǎng)站，把VIS系統(tǒng)導(dǎo)入到網(wǎng)站設(shè)計(jì)中，這無(wú)形是延伸了形象傳播的寬度和深度。也就是說(shuō)，網(wǎng)站的信息內(nèi)容有著特殊的傳播內(nèi)涵與外沿。信息的傳播內(nèi)涵與外沿網(wǎng)民們是為了不同的目的登陸相關(guān)的站點(diǎn)上查詢信息的。由于信息結(jié)構(gòu)變得越來(lái)越復(fù)雜，一個(gè)信息空間內(nèi)部結(jié)構(gòu)如何設(shè)計(jì)、信息類別多如何管理、異類信息如何分主次、同類信息如何分類分層，以及單一頁(yè)面上的信息結(jié)構(gòu)安排等等諸多問(wèn)題。主題相同或雷同的網(wǎng)站多到無(wú)數(shù)，想要從千百個(gè)相同主題的網(wǎng)站中脫穎而出，確實(shí)不易。那么，設(shè)計(jì)師們到底是為了什么而工作呢？不了解網(wǎng)頁(yè)美術(shù)的意義所在，設(shè)計(jì)人員如何能夠正確的面對(duì)創(chuàng)作。拋去媒體這層外衣，網(wǎng)站是信息的儲(chǔ)存空間?？傊?，基于DIV+CSS技術(shù)的網(wǎng)頁(yè)制作技術(shù)，會(huì)對(duì)web時(shí)代的設(shè)計(jì)思想產(chǎn)生不可估量的影響力。 研究目的和意義過(guò)去的網(wǎng)頁(yè)通常缺少動(dòng)感,而且在網(wǎng)頁(yè)內(nèi)容的排版布局上也有很多困難, 如果不是專業(yè)人員或特別有耐心的人,很難讓網(wǎng)頁(yè)按自己的構(gòu)思和創(chuàng)意來(lái)顯示信息。隨著互聯(lián)網(wǎng)和移動(dòng)通信技術(shù)的快速發(fā)展，網(wǎng)頁(yè)作為信息的主要載體，承擔(dān)著將各類信息展現(xiàn)和傳達(dá)的任務(wù) 網(wǎng)頁(yè)設(shè)計(jì)的使命是直接有效地傳達(dá)信息給用戶 現(xiàn)在網(wǎng)頁(yè)用戶群體復(fù)雜，層次多樣，對(duì)網(wǎng)頁(yè)的好用性要求越來(lái)越高，要求一個(gè)網(wǎng)頁(yè)在很好的需求戰(zhàn)略，功能規(guī)格，信息架構(gòu)的基礎(chǔ)上更多的關(guān)注交互細(xì)節(jié)設(shè)計(jì)1996年底, CSS應(yīng)運(yùn)而生,它很好地解決了這個(gè)問(wèn)題。傳統(tǒng)的網(wǎng)頁(yè)制作工具都已經(jīng)顯得力不從心了。現(xiàn)已成為網(wǎng)頁(yè)設(shè)計(jì)中必不可少的工具之一。探究DIV+CSS網(wǎng)頁(yè)設(shè)計(jì)思想，可以在當(dāng)今這個(gè)互聯(lián)網(wǎng)技術(shù)飛速發(fā)展、用戶需求的局，合理的安排呈現(xiàn)的數(shù)據(jù)信息，在大數(shù)據(jù)量的前提下，讓用戶更加有效、快捷地信息量成倍增加并越來(lái)越看重用戶體驗(yàn)的時(shí)代中，設(shè)計(jì)人員更好的去設(shè)計(jì)網(wǎng)頁(yè)布獲取信息，瀏覽網(wǎng)頁(yè)保持愉快的體驗(yàn)感覺(jué)；在開(kāi)發(fā)龐大的代碼量的同時(shí)，又可以很方便地后期維護(hù)，不會(huì)出現(xiàn)‘牽一發(fā)而動(dòng)全身’的情況；也可以嚴(yán)格的劃分不同功能的代碼模塊。而從實(shí)際情況上看，至今的網(wǎng)絡(luò)上依舊到處充斥著那種僅僅是通過(guò)信息堆砌而成的網(wǎng)站。不可否認(rèn)，互聯(lián)網(wǎng)的共享環(huán)境給信息儲(chǔ)備和更新帶來(lái)了很大的沖擊，現(xiàn)今已不是十年前數(shù)得出來(lái)的幾百個(gè)網(wǎng)站，而是無(wú)法估量的上千萬(wàn)個(gè)網(wǎng)站。它可能是一個(gè)大型的信息資料庫(kù)，也可能是琳瑯滿目的信息轉(zhuǎn)盤(pán)，信息的重要性決定了信息的擺放順序及瀏覽者的使用頻率。在不影響信息下載的同時(shí)，提供給瀏覽者一種美好的視覺(jué)環(huán)境，幫助他們科學(xué)且快速的查閱信息。當(dāng)瀏覽者進(jìn)入娛樂(lè)網(wǎng)站中，卻感覺(jué)如同進(jìn)入體育競(jìng)技場(chǎng)，那么這個(gè)網(wǎng)站所傳遞出的信息概念則完全錯(cuò)誤，瀏覽者對(duì)網(wǎng)站的設(shè)計(jì)及網(wǎng)站本身都不會(huì)給予認(rèn)可。任何以個(gè)人、團(tuán)體、公司等不同名義都可以建設(shè)屬于自己的網(wǎng)站，這些網(wǎng)站有別于綜合性門戶或資訊類站點(diǎn)，它們并不依靠大量信息吸引訪問(wèn)者，而網(wǎng)站是他們創(chuàng)造商業(yè)價(jià)值的間接手段。不同的企業(yè)，有著不同的企業(yè)文化，跟隨所要傳播的信息概念，網(wǎng)站設(shè)計(jì)的形式和氣氛絕對(duì)不能相同。它可以給瀏覽者一個(gè)概念，一種印象，這種印象有時(shí)候是致命的。但多數(shù)人認(rèn)識(shí)NWP是卻是從V3版本開(kāi)始的，而NWP也是從V3開(kāi)始奠基了它作為國(guó)際知名品網(wǎng)站點(diǎn)的地位，同時(shí)才擁有了V4版向綜合性設(shè)計(jì)門戶邁進(jìn)的起點(diǎn)和基點(diǎn)。設(shè)計(jì)人員僅僅看到了這座高山的一部分輪廓，實(shí)際上設(shè)計(jì)人員要向上攀巖、摸索前行的路還很遠(yuǎn)。 本文的主要研究?jī)?nèi)容首先回顧DIV+CSS技術(shù)的發(fā)展過(guò)程，分析關(guān)鍵技術(shù)體系，介紹CSS語(yǔ)法，選擇器、容器的使用方法和布局常見(jiàn)的方式等內(nèi)容。最后針對(duì)于當(dāng)前web設(shè)計(jì)中的網(wǎng)頁(yè)設(shè)計(jì)缺陷，以web設(shè)計(jì)最優(yōu)的用戶體驗(yàn)為基準(zhǔn)，通過(guò)實(shí)例，結(jié)合CSS設(shè)計(jì)思想分析問(wèn)題，探究解決方案，優(yōu)化網(wǎng)頁(yè)設(shè)計(jì)，總結(jié)一些屬于自己的頁(yè)面設(shè)計(jì)的體會(huì)。是用于控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言，使用CSS可以將格式和結(jié)構(gòu)分離,能更好地控制頁(yè)面布局，從而制作體積更小、下載更快的網(wǎng)頁(yè)。在這個(gè)例子中，h1 是選擇器，color 和 fontsize 是屬性，red 和 14px 是值。 color: red}（段落居中排列；并且段落中的文字為紅色）　　 為了使你定義的樣式表方便閱讀，你可以采用分行的書(shū)寫(xiě)格式：p　{　　textalign: center。 類選擇符還有一種用法，在選擇符中省略HTML標(biāo)記名，這樣可以把幾個(gè)不同的元素定義成相同的樣式：　　.center { textalign: center}　?。ǎ?這樣