【文章內(nèi)容簡(jiǎn)介】 gn:left。margin:0em。padding:0em。height:100%。width:25%。}
{float:right。textalign:right。margin:0em。padding:0em。height:100%。width:25%。}
{textalign:center。margin:0em auto。padding:0em。height:100%。width:50%。} 在最后階段，需要通過(guò)隱藏邊界來(lái)保持最底層的基元不被看到。關(guān)于這種方法，此后你可能會(huì)發(fā)現(xiàn)，用這種方法可以生成所有的表，畢竟，一個(gè)表（網(wǎng)格）就是在特定的區(qū)域里迭代基礎(chǔ)元素產(chǎn)生的結(jié)果，恰如其分。最困難的部分就是設(shè)計(jì)好處理擬定的基元的CSS規(guī)則，剩下的就是很簡(jiǎn)單的工作（復(fù)制/粘貼），HTML標(biāo)記和一些額外的CSS調(diào)整問(wèn)題。在仔細(xì)看看圖3表明，布局在Rows1和2之間的部分是著名的三欄流體布局正是網(wǎng)絡(luò)上的許多商業(yè)網(wǎng)站使用的模式。只是增加了一個(gè)額外的基元在第2行和第3行之間。 現(xiàn)在迭代的是基元的第二個(gè)實(shí)例。為此，將的HTML代碼粘貼在第二個(gè)實(shí)例中間布局內(nèi)的基元中。這一次，不需要添加任何額外的CSS指令，因?yàn)檫@些將被重用。盡管可以，卻并沒(méi)有把迭代的過(guò)程與其他的變換結(jié)合起來(lái)，如編譯和反射?？傮w而言，所使用的CSS代碼是相當(dāng)簡(jiǎn)陋。沒(méi)有嘗試去優(yōu)化CSS的樣式，將所有元素都設(shè)置為相同的高度，或設(shè)置單個(gè)元素內(nèi)的CSS樣式。實(shí)際開發(fā)中是一定要美化CSS樣式文件的，而去追求更優(yōu)的用戶體驗(yàn)。在本節(jié)中將主要介紹幾種分形設(shè)計(jì)中，以基元為單元，嵌套迭代后獲得的布局模式。 圖25 一些主題和變換后的結(jié)果。舉例來(lái)說(shuō)，%，而B中對(duì)應(yīng)的設(shè)置為25%和75%。調(diào)整了瀏覽器窗口的大小來(lái)驗(yàn)證列的長(zhǎng)度已調(diào)整的剛剛好，元素中的細(xì)小差別是因?yàn)檎诳蚣苤性黾舆吙蜻€有其中的單個(gè)元素中包括的下級(jí)元素的數(shù)量并不相同的原因，在圖4中的差別并不那么明顯。為了填補(bǔ)這些差別，可以使用空的元素來(lái)填充或者overflow:hidden這個(gè)屬性，但這樣可能會(huì)引起其他的設(shè)計(jì)問(wèn)題需要解決，最好選擇隱藏或完全消除邊界的設(shè)計(jì)布局。樣式A和B引起的并聯(lián)多元素設(shè)計(jì)布局在網(wǎng)絡(luò)上很常見，但并不是很有必要把它當(dāng)成一種時(shí)尚或者同繁瑣的表格搭配在一起。樣式C代表著一種更復(fù)雜的布局。像添加其他轉(zhuǎn)換比如旋轉(zhuǎn)會(huì)導(dǎo)致更復(fù)雜的圖案。 圖26。附加樣式和它們的結(jié)果，旋轉(zhuǎn)操作處理“丟失”的元素中的一些樣式意味著沒(méi)有文字內(nèi)容被加入到這些里面，或著舉例來(lái)說(shuō)，這些都是保留的圖形。這僅僅是一個(gè)慣例而已。 最后，但并非最不重要，高度“液體化”的多重分形拼接布局方式也被收錄到14個(gè)CSS樣式中的一小部分集合當(dāng)初了。 DIV+CSS設(shè)計(jì)優(yōu)勢(shì)在第二章中,介紹了當(dāng)今web網(wǎng)頁(yè)開發(fā)中主要用到的DIV+CSS技術(shù)，可以看出這種技術(shù)和傳統(tǒng)的界面設(shè)計(jì)(基于table的設(shè)計(jì)理念)有以下幾個(gè)優(yōu)勢(shì):，便于維護(hù)，代碼清晰簡(jiǎn)化了網(wǎng)頁(yè)的格式代碼，外部的樣式表還會(huì)被瀏覽器保存在緩存里，加快了下載顯示的速度，也減少了需要上傳的代碼數(shù)量(因?yàn)橹貜?fù)設(shè)置的格式將被只保存一次)。這對(duì)SEO （Search Engine Optimization）（搜索引擎優(yōu)化）是很有幫助的，實(shí)現(xiàn)加快網(wǎng)頁(yè)解析的速度。只要修改保存著網(wǎng)站格式的CSS樣式表文件就可以改變整個(gè)站點(diǎn)的風(fēng)格特色，在修改頁(yè)面數(shù)量龐大的站點(diǎn)時(shí)，顯得格外有用。避免了一個(gè)一個(gè)網(wǎng)頁(yè)的修改，大大減少了重復(fù)勞動(dòng)的工作量。，易于引用，批量修改，更改一個(gè)網(wǎng)站的風(fēng)格時(shí)，只需要去更改相對(duì)的CSS文件即可，而當(dāng)整個(gè)系統(tǒng)風(fēng)格要保持一致的時(shí)候，也只需要去引用相同的CSS文件即可。 用DIV塊來(lái)標(biāo)識(shí)每個(gè)元素，然后用CSS語(yǔ)句來(lái)控制每個(gè)對(duì)應(yīng)的元素的屬性，規(guī)定它的大小，字體，背景等。這樣讓整個(gè)網(wǎng)頁(yè)整齊，規(guī)范。讓每個(gè)元素在自己的位置表現(xiàn)出最優(yōu)的效果?？梢院芎?、很方便地去控制這個(gè)圖片的大小，布局等細(xì)節(jié)屬性。 瀏覽者想要看的是網(wǎng)頁(yè)上的內(nèi)容結(jié)構(gòu)，而為了讓瀏覽者更好地看到這些信息就要通過(guò)格式控制來(lái)幫忙，把兩者分開方便了網(wǎng)頁(yè)的設(shè)計(jì)者，能夠?qū)?yè)面的布局施加更多的控制，也就是把CSS 代碼獨(dú)立出來(lái)從另一個(gè)角度控制頁(yè)面外觀符合W3C標(biāo)準(zhǔn)。支持瀏覽器的向后兼容，兼容性更好，符合web標(biāo)準(zhǔn)規(guī)范的發(fā)展趨勢(shì)，可以在幾乎所有的瀏覽器上都可以使用，不會(huì)出現(xiàn)在不同的瀏覽器中效果差距很大的情況。強(qiáng)大的字體控制和排版能力，CSS控制字體的能力比糟糕的FONT標(biāo)簽好多了，CSS不再需要用FONT標(biāo)簽或者透明的1px圖片來(lái)控制標(biāo)題、改變字體顏色、字體樣式等等。更高的易用性，使用CSS可以結(jié)構(gòu)化HTML，例如：p標(biāo)簽只用來(lái)控制段落，h1h6標(biāo)簽只用來(lái)控制標(biāo)題，table標(biāo)簽只用來(lái)表現(xiàn)格式化的數(shù)據(jù)等等。你可以增加更多的用戶而不需要建立獨(dú)立的版本。 更好的擴(kuò)展性。你的設(shè)計(jì)不僅僅用于web瀏覽器，也可以發(fā)布在其他設(shè)備上，比如PowerPoint等。 更靈活控制頁(yè)面布局，通常頁(yè)面的下載是按照代碼的排列順序，而表格布局代碼的排列代表從上向下，從左到右，無(wú)法改變。而通過(guò)CSS控制，您可以任意改變代碼的排列順序，比如將重要的右邊內(nèi)容先加載出來(lái)。Table表格布局靈活性不大，你只能遵循 table tr td 的格式。而div你可以 div ul li 也可以 ol li還可以 ul li.... 更好的重構(gòu)性。Table表格布局中，垃圾代碼會(huì)很多，一些修飾的樣式及布局的代碼混合一起，很不利于直觀。而Div更能體現(xiàn)樣式和結(jié)構(gòu)相分離，結(jié)構(gòu)的重構(gòu)性強(qiáng)。第三章 基于DIV+CSS技術(shù)的網(wǎng)站界面設(shè)計(jì)回顧網(wǎng)頁(yè)設(shè)計(jì)發(fā)展歷史，不論對(duì)比幾年前進(jìn)步多少，現(xiàn)今仍處在網(wǎng)站設(shè)計(jì)業(yè)的初期。行業(yè)的標(biāo)準(zhǔn)、客戶的觀點(diǎn)以及審美的準(zhǔn)則都不盡成熟。僅僅看到了這座高山的一部分輪廓，實(shí)際上要向上攀巖、摸索前行的路還很遠(yuǎn)。依舊還是設(shè)計(jì)師，但是能夠在滿足客戶的目的的同時(shí)，確保作品的藝術(shù)性和完整性。市場(chǎng)就是客戶的客戶，終端客戶接收了網(wǎng)站傳遞給他們的信息概念：看到暖色，他們會(huì)感覺(jué)這個(gè)企業(yè)是很有親和力的，容易溝通的；看到大量的矢量風(fēng)格的網(wǎng)站插圖時(shí)，他們會(huì)感覺(jué)這個(gè)企業(yè)是潮流派的、有個(gè)性的、有活力的。作為網(wǎng)站真正的使用者，他們比任何人都知道自己需要什么。 項(xiàng)目設(shè)計(jì)實(shí)例分析 項(xiàng)目簡(jiǎn)介物流配送公司需要一個(gè)物流管理系統(tǒng)來(lái)管理其基本業(yè)務(wù)和信息。該物流配送公司的主要業(yè)務(wù)是為用戶配送貨物，組織結(jié)構(gòu)分為省公司和配送點(diǎn)。省公司主要負(fù)責(zé)車輛的維護(hù)、配送點(diǎn)、配送線路、配送價(jià)格的維護(hù)；配送點(diǎn)主要是接收客戶訂單，并聯(lián)系省公司車隊(duì)將貨物運(yùn)送到目的地，同時(shí)還負(fù)責(zé)貨物的配送工作。對(duì)于一個(gè)貨物的費(fèi)用應(yīng)包含如下兩部分費(fèi)用：運(yùn)輸費(fèi)用和配送費(fèi)用，運(yùn)輸費(fèi)用是指由配送地到目的地配送點(diǎn)的費(fèi)用，而配送費(fèi)用是指由目的地配送點(diǎn)到客戶指定地址的配送費(fèi)用。本系統(tǒng)根據(jù)客戶提出的需求，從配送管理信息化，和路線安排合理化入手，開發(fā)的一款快遞物流系統(tǒng)，客戶在物流運(yùn)輸方面能夠方便迅捷的完成任務(wù)。 需求分析 前期的需求分析是網(wǎng)站設(shè)計(jì)和開發(fā)的第一步，直接影響后期設(shè)計(jì)和開發(fā)的進(jìn)度和成功率。尤其是對(duì)于一個(gè)成功的網(wǎng)站頁(yè)面的設(shè)計(jì)直接關(guān)系到能否人性化的把所有功能展現(xiàn)給每一個(gè)用戶。首先，應(yīng)該了解幾個(gè)問(wèn)題：1）都有哪些類的用戶會(huì)用到的網(wǎng)站？2）用戶想要從的網(wǎng)站的到什么？3）能夠給用戶提供什么？根據(jù)物流網(wǎng)站為例，結(jié)合上面的問(wèn)題，必須明確三個(gè)方面的內(nèi)容：用戶類型、用戶需求和網(wǎng)站目標(biāo)。用戶類別說(shuō)明教育/技術(shù)客戶此種用戶通過(guò)網(wǎng)頁(yè)瀏覽信息、管理自己的訂單了解基本的電腦知識(shí)配送點(diǎn)管理員此種用戶通過(guò)網(wǎng)頁(yè)管理自己負(fù)責(zé)的訂單、管理配送、管理收發(fā)貨報(bào)表和用戶管理中的查詢用戶和修改用戶（自己的信息）1. 熟悉業(yè)務(wù)流程2. 熟悉在權(quán)限允許以內(nèi)的管理操作省公司管理員此種用戶通過(guò)后臺(tái)管理價(jià)格、管理配送點(diǎn)、管理路線、管理收入報(bào)表、管理車輛、管理用戶六項(xiàng)業(yè)務(wù)1. 熟悉業(yè)務(wù)流程2. 熟悉在權(quán)限允許以內(nèi)的管理操作3. 了解全公司各配送點(diǎn)運(yùn)營(yíng)情況、公司業(yè)務(wù)范圍內(nèi)的線路狀況4. 有較強(qiáng)的管理、協(xié)調(diào)能力5. 具備一般水平的軟件知識(shí)維護(hù)人員處理突發(fā)狀況，修復(fù)軟件殘留的缺陷，維護(hù)系統(tǒng)長(zhǎng)時(shí)間的正常運(yùn)行1. 熟悉業(yè)務(wù)流程2. 具備高的軟件知識(shí)3. 熟悉系統(tǒng)的組織結(jié)構(gòu)從上面的表格中可以看出，網(wǎng)站面向的主要對(duì)象為3類：客戶，配送管理員，省管理員。從用戶的角度來(lái)審視網(wǎng)站，用戶需求分為明確需求和潛在需求兩種：1) 用戶的明確需求。如訂單查詢，配送區(qū)域查詢，配送預(yù)定等服務(wù)信息，還有產(chǎn)品、公司、服務(wù)介紹和與之相關(guān)新聞等，這些是企業(yè)網(wǎng)站提供給用戶的基本需求。2) 用戶的潛在需求。除了用戶的明確需求，還有一些用戶的潛在需求，例如對(duì)于一些非會(huì)員提供注冊(cè)功能，提供會(huì)員用戶忘記密碼的幫助功能等。結(jié)合物流網(wǎng)站，有以下幾點(diǎn)用戶需求：1) 滿足用戶的基本功能需求：快件追蹤、個(gè)人訂單管理、查詢信息、服務(wù)介紹、反饋信息等2) 頁(yè)面簡(jiǎn)潔，具有國(guó)際化。3) 布局、導(dǎo)航和信息設(shè)計(jì)清晰明了由于用戶群體存在差異，主要通過(guò)用戶的行為、目標(biāo)和觀點(diǎn)來(lái)確定用戶的需求。用戶目標(biāo)(1) 獲得自身業(yè)務(wù)和服務(wù)信息：關(guān)注公司提供的服務(wù)信息（如快件信息，個(gè)人訂單查詢等）、獲取公司相關(guān)的新聞動(dòng)態(tài)（如：服務(wù)范圍及費(fèi)用變化、服務(wù)項(xiàng)目變更）、關(guān)注公司服務(wù)對(duì)象（如：公司的客戶和員工等）。(2) 管理公司服務(wù)項(xiàng)目：主要針對(duì)于各配送點(diǎn)管理員的操作，如車輛管理，訂單簽退，配送服務(wù)等。(3) 建立會(huì)員，關(guān)注公司信息：注冊(cè)為會(huì)員，可以提供針對(duì)性服務(wù)，更加方便管理自己的信息。2) 用戶行為當(dāng)用戶訪問(wèn)網(wǎng)站時(shí)，他們的操作過(guò)程是:(1) 無(wú)特殊任務(wù)的用戶通?？焖贋g覽網(wǎng)站首頁(yè)，快件查詢，管理自己的訂單信息。如果還沒(méi)有訂單的用戶，則會(huì)關(guān)心公司提供的服務(wù)范圍，價(jià)格等服務(wù)信息或者會(huì)瀏覽導(dǎo)航欄，點(diǎn)擊公司介紹、服務(wù)介紹等信息。(2) 有特殊任務(wù)的用戶則是直接點(diǎn)擊頁(yè)面上的快捷模相關(guān)鏈接進(jìn)入所需頁(yè)面。3) 用戶觀點(diǎn)在設(shè)計(jì)網(wǎng)站時(shí)，不能忽視用戶的觀點(diǎn)，用戶的觀點(diǎn)使提供良好用戶體驗(yàn)的關(guān)鍵。一些常見的用戶的觀點(diǎn)有：用戶不能很快的而明白網(wǎng)站的目標(biāo)，使新手困惑。交互性不強(qiáng)，要合理布局。色彩設(shè)計(jì)，要有“設(shè)計(jì)感”，同時(shí)要表達(dá)信息明確。要響應(yīng)及時(shí)，用戶不能忍受反應(yīng)速度太慢。商業(yè)網(wǎng)站，包括物流網(wǎng)站在內(nèi)，最高的目的肯定是在給用戶良好的使用體驗(yàn)的同時(shí)，增加它的營(yíng)業(yè)額。而為了這一個(gè)目的，它也需要滿足這幾個(gè)需求：1）宣傳和推廣服務(wù)。2) 為目標(biāo)用戶或部分非目標(biāo)用戶宣傳公司品牌，公司的品牌宣傳對(duì)商業(yè)性網(wǎng)站的也是很重要的。3) 建立客戶之間的合作關(guān)系。 系統(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)的交互性。 功能介紹和內(nèi)容分析從抽象的戰(zhàn)略層轉(zhuǎn)而到了范圍層，面臨的問(wèn)題是：要建設(shè)什么？網(wǎng)頁(yè)具有雙重特性：作為軟件界面的網(wǎng)頁(yè)和作為超文本的網(wǎng)頁(yè)，因此范圍層可分為兩個(gè)部分。作為軟件界面，要明確網(wǎng)站能提供給用戶哪些功能；在超文本方面，需要設(shè)計(jì)哪些關(guān)于公司網(wǎng)站信息的內(nèi)容呈現(xiàn)在用戶眼前。一般來(lái)說(shuō)，功能需求與內(nèi)容需求是相伴存在的。首先，收集需求。需求可以分為三類，這些需求有設(shè)計(jì)者的需求也有從目標(biāo)用戶得到的：1）用戶直接表述的必須包含的東西。2）用戶不知道但是又是必須的需求。3）現(xiàn)階段無(wú)法實(shí)現(xiàn)的需求，但將來(lái)可以實(shí)現(xiàn)的。根據(jù)這三類需求來(lái)進(jìn)行拓展設(shè)計(jì)。網(wǎng)站內(nèi)容包含文本、圖像、音頻和視頻等設(shè)計(jì)元素。針對(duì)某一需求可以組合不同的設(shè)計(jì)元素來(lái)進(jìn)行設(shè)計(jì)。內(nèi)容需求應(yīng)該提供每一個(gè)特性規(guī)模的大致預(yù)估：文本的字?jǐn)?shù)、圖片的尺寸大小、視頻的流量等。 信息構(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)站信息界面。組織系統(tǒng)決定網(wǎng)站信息的分類方式，是網(wǎng)站結(jié)構(gòu)體系的主要形式，可以說(shuō)是網(wǎng)站信息構(gòu)建的基礎(chǔ)。導(dǎo)航系統(tǒng)使用戶明確自己的位置、提供訪問(wèn)途徑、引導(dǎo)其到達(dá)目的網(wǎng)頁(yè)，是網(wǎng)站信息構(gòu)建的保障。標(biāo)識(shí)系統(tǒng)則是組織系統(tǒng)和導(dǎo)航系統(tǒng)的展示手段，使后者更加易懂、易用。檢索系統(tǒng)支持用戶的多樣需求（確定的、模糊的），幫助用戶在最短的時(shí)間內(nèi)找到期望的信息。明確信息架構(gòu)的含義與組成后，根據(jù)前面的用戶需求與用戶流程體驗(yàn)分析，通過(guò)對(duì)收集的信息內(nèi)容進(jìn)行分析歸類，然后歸納成標(biāo)簽的形式(也可以看作子頁(yè)面和導(dǎo)航菜單)，并畫出頁(yè)面之間的各個(gè)層次結(jié)構(gòu)圖（部分而非全部），如圖31所示：圖33 頁(yè)面的層次結(jié)構(gòu)圖如圖中所示，把網(wǎng)站的欄目分為新聞公告、用戶登陸、管理員登陸、快捷板塊等標(biāo)簽項(xiàng)目，然后再對(duì)其中的標(biāo)簽進(jìn)行細(xì)化的分類，得更加詳細(xì)信息架構(gòu)如下:網(wǎng)站標(biāo)志體現(xiàn)此物流系統(tǒng)的英文名稱。導(dǎo)航信息展示網(wǎng)站的主要的欄目。新聞欄，展示最新的公司相關(guān)信息，提供可查看更多的交互方式。注冊(cè)登錄模塊，提供注冊(cè)功能或是已注冊(cè)用戶登錄入口。宣傳模塊，對(duì)公司進(jìn)行品牌宣傳?？旖莅鍓K，主要是為客戶提供4種快速應(yīng)用的鏈接。 交互設(shè)計(jì)用戶瀏覽網(wǎng)站的每一個(gè)階段都是交互式的，即需要用戶的行為引發(fā)網(wǎng)