|
第1章 Web2.0時代的網站開發(fā)
1.5 標準化讓我們更輕松
在國內申請的信用卡，可以在世界上很多國家使用。
雖然不懂廣東話，但依然可以去香港旅游、購物，因為大家都會講普通話。
水龍頭壞了，在樓下的五金店買一個換上就行了。
歐洲杯將在北京時間凌晨兩點直播，將觀看到精彩的比賽。
生活中每天都發(fā)生類似的事情，這樣的事情似乎再正常不過，并沒有什么特別之處。但是，有沒有想過，為什么信用卡可以在國際上通用?為什么大家都會講普通話?為什么買來的新水龍頭的螺口正好與老的水管能接上?為什么只要在凌晨兩點打開電視機，就不會錯過比賽?在這些事情的背后，都有著一個隱藏的“因素”在起作用，這個因素就是標準。生活中各行各業(yè)都有著自己相應的標準與規(guī)范，標準可以方便交流、促進協(xié)作、提高效率。
對于IT行業(yè)，設備的多樣性與信息的多樣性更加需要標準來保證它們之間的溝通與協(xié)作。可能要在手機、打印機、數碼相機之間交互數據；可能要在網站、郵件和辦公軟件之間傳遞信息；可能要在未來新設備（例如機頂盒、信息家電）中應用現(xiàn)有資源。如果沒有統(tǒng)一的標準，那么現(xiàn)在所有的信息都是孤立的、不可分享、不可重用的，需要浪費大量的人力、物力重新為新設備建立數據，需要為每一次的多系統(tǒng)應用做專門的開發(fā)。對于這個問題，好在已經找到了解決的方案，這就是——XML。
XML簡單說就是一種“有規(guī)定格式的文檔”，只要設備或系統(tǒng)產生的數據都遵守這種格式，就可以實現(xiàn)互相的數據交換、分享與協(xié)作。自從1998年國際萬維網組織（W3C.org）推出XML 1.0規(guī)范以來，已經有大量的XML標準在生活中應用，例如用手機訂閱的天氣預報、股票行情，這些數據都是從相應的系統(tǒng)獲得，然后通過XML格式轉換發(fā)送的；通過QQ或者MSN上發(fā)送消息到不在線的朋友手機上，這其中的信息也是通過XML轉換實現(xiàn)的。還有更多的商業(yè)應用，例如公司內部的CRM、ERP、內容管理系統(tǒng)之間的數據交互、整合與共享都應用了XML。
那么，自然會想到網頁（Web）是否也應該遵循XML標準呢?答案是肯定的。
本節(jié)將介紹網站標準化。
1.5.1 CSS讓網頁更容易設計-5維護
萬維網出現(xiàn)以后，大大改變了人們的信息獲取方式，以前從報紙、電視、廣播上獲取信息，現(xiàn)在可以更方便地通過網絡、瀏覽器獲得。Web上的信息也曰益豐富，從一開始簡單的、靜態(tài)的文檔和圖片信息，到現(xiàn)在動態(tài)的、可交互的多媒體信息，Web上的信息已經多到可以用“恐怖”來形容。到2008年年底，Google搜索引擎已經能夠搜索到82億張網頁和21億張圖像。這么多的數據是財富，但是如果不能有效利用和搜索就是“信息垃圾”。而事實上，已經產生了數據冗余和信息無法有效共享、查詢的情況。
99％的網站都是采用HTML制作的，而HTML并不符合XML格式，因此這些網頁信息都很難適應未來新設備和數據共享的要求。國際萬維網組織（W3C.org）已經提出了解決這個問題的辦法，他們在HTML基礎上，按照XML格式制定了新的規(guī)范XHTML 10。只要通過簡單的改變，就能將HTML轉為XHTML，從而實現(xiàn)向XML的過渡。同時，為了使頁面信息更加容易被搜索和重用、XHTML的代碼需要結構更加清晰、標簽更加有語義，W3C推薦使用CSS來控制表現(xiàn)，以實現(xiàn)內容與表現(xiàn)的相分離。
World Wide Web最早是以文件的概念組成，希望透過網頁與超鏈接，讓文件與知識更容易連接援引。從HTML語法大量使用文件概念的標簽（例如代表標題的
、代表段落的），就不難看出WWW的這個特質。
然而WWW比起早期其他網絡媒介更迷人的地方，在于它能直接在頁面上嵌入并呈現(xiàn)圖片，這個改變讓WWW發(fā)展迅速，也讓頁面視覺裝飾大為盛行。但網頁先天的文件特性，讓圖像排版設計難以施展手腳，于是像利用嵌套表格與圖像拼組而成的頁面開始盛行，以求達到精準元素定位與更精美的視覺效果。這個潘多拉盒子一開，造成了許多失控的亂象，讓頁面的源代碼變得難以閱讀與維護。
為了讓網頁在視覺上可以有更多元的表現(xiàn)，W3C在1996年推出CSS第一版，提供解決之道。不過由于CSS有賴于瀏覽器的支持，因此長久以來，CSS的推展情況一直不佳，直到IE 6、Firefox等主流瀏覽器支持CSS，才漸漸改善。
CSS語法是要讓網頁內容與視覺呈現(xiàn)分離，一方面使得頁面維護工作更容易，不會因內容或視覺效果改變影響到另一方，這樣的頁面設計也對搜尋引擎更為友善，更容易搜尋到頁面內容。其次，CSS也可以增加頁面在不同媒介的呈現(xiàn)效果。同一份頁面可依據用途不同，例如在屏幕顯示或打印，而自動切換不同的CSS語法，讓呈現(xiàn)最佳化。也由于讀取頁面的媒介越來越多元（如手機、PDA），CSS可以彈性調整呈現(xiàn)方式。這些都更加彰顯了CSS在網頁上的優(yōu)勢。
1.5.2 扔掉Table使用XHTML+CSS的布局
在開發(fā)標準化的網站時，時不時能夠看到一些頁面整體布局的問題，要求用DIV做一些Table才能做到的，否則就以此為把柄說XHTML+CSS布局方法不好。其實，首先要做的是改變思維，以適應XHTML+CSS的布局。
1.面向頁面設計而非面向瀏覽器設計
XHTML+CSS能夠實現(xiàn)的是一種流布局，也就是隨著內容的長度自動增長區(qū)域，并且最終導致整個頁面增長，這時候瀏覽器就必須顯示滾動條。Table強迫癥的一個征兆就是極力避免流布局，希望以瀏覽器的可視區(qū)域為布局目標，要求在可視區(qū)域中劃分內容區(qū)域而不是在頁面上劃分內容區(qū)域。
實際上XHTML是無法針對瀏覽器設計的，因為它僅僅包含語義，或者說是內狡而瀏覽器如何去表現(xiàn)這些內容是無法確定的。CSS提供了控制表現(xiàn)方式的一種途徑，但這僅僅是針對主流瀏覽器的，而且瀏覽器支持的“指令集”還有稍微的差別（說到這里，真希望能夠為一個瀏覽器寫CSS，然后編譯為全平臺兼容代碼），最后這些指令暫時還僅僅支持針對頁面的流式布局控制。因此，如果決定要開始寫符合語義的XHTML，并且僅僅用CSS控制布局，首先就要把思路轉變?yōu)槊嫦蝽撁妫ɑ蛘哒f是文檔）的布局控制，而非面向瀏覽器可視區(qū)域的布局控制。
接下來肯定有人要說，“那就是承認了有些布局老方法很容易做到，但新方法很難做到啦”。這是當然的，然而這不成為繼續(xù)使用Table的理由。這時候要反過來探討原始目標，是為什么要控制布局?低層次的需求是為了美觀，誰都希望同樣的內容能夠以更好的視覺效果展示在用戶眼前。高層次的需求是為了控制受眾的瀏覽方式，讓他們能夠按預先設計好的方式來區(qū)分頁面內容的輕重點，按照期望優(yōu)先瀏覽某些內容，同時也幫助他們更快地找到想要的內容，而不會在網站內感到沮喪。
在當當網購買此書 | 在卓越網購買此書
經典論壇交流：
http://bbs.blueidea.com/thread-2937783-1-1.html
本文鏈接：http://m.95time.cn/news/book/2009/6854.asp 
出處：藍色理想
責任編輯：bluehearts
上一頁 DW CS4開發(fā)標準布局Web 2.0網站 [1] 下一頁
|
第 1 頁 
第 2 頁 DW CS4開發(fā)標準布局Web 2.0網站 [2]
