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