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