現在很多網站還依然保留著傳統布局方式,這種布局是以效果為中心,制作頁面首先考慮的是頁面的布局,例如,一個兩列布局,首先想到的是用表格的兩列單元格來完成列布局,并且大量使用表格的行列進行排版定位,也沒有考慮到網頁的可用性和W3C標準規范,頁面含有大量的用于表現的標簽例如設置字體樣式的font標簽。這些和網頁制作工具的發展也有關系,隨著所見即所得工具的發展,制作網頁變得非常簡單,只要通過鼠標就可以制作一個簡單的網頁,在編輯器里使用表格可以快速建立一個復雜的布局頁面,由于頁面制作的高效,很多網站都是使用基于表格的布局。 1.1 表格布局 表格布局是利用表格單元格的拆分,及表格的嵌套來完成復雜的布局,這種所謂的復雜布局使用所見即所得工具完成并不復雜,使用鼠標可以非常方便的拖拉表格,通過工具提供的參數設置可以快速的建立復雜的布局,甚至可以不用懂HTML,因為這些都由編輯器自動生成 表格布局的優點就是布局效率高,這對于追求效率的公司來說無疑是件好事,對于很小的項目使用這種布局并無大礙,并可以保持高效,但對于大項目使用表格布局,會給后期維護帶來風險,前期制作會很高效,但后期維護會感覺到繁瑣,復雜,大量重復勞動。 為了彌補這些缺點,標準布局技術逐漸發展起來 1.2標準布局 標準布局首先考慮的不是如何實現效果,而是如何用有意義的標簽把文檔結構寫出來,當結構確定后,再使用CSS來布局,實現樣式表現,把網頁分為3部分,內容,表現層,結構 1.2.1 內容 內容就是指網頁原始內容,如果是一段文字它就是純文字,圖片就是一張圖片,如果光把內容顯示出來,不能區分它們,例如標題和段落都是文字,如果光顯示它們會無法區分,所以內容和結構是密不可分的,這里只是在概念上把它們分開,實際制作,結構是需要根據內容來編寫的 1.2.2 結構 結構是把內容通過使用復合語義的HTML標簽組成的,例如,一段文字使用p標簽,一個標題可以根據標題的級別使用H1~H6,除了這些標簽,還有定義好的ID名,類名這些是給css完成樣式表現的接口 1.2.3 表現 表現就是根據內容結構文檔提供的接口也就是標簽,ID名,類名來給結構定義樣式,樣式由css選擇符,屬性和屬性值組成。 光有了這些思想還不夠,由于另外一個原因導致制作完美頁面的困難度大大增加。 1.2.4 標準布局的難點 由于瀏覽器之間對W3C標準的支持都有差別,導致頁面在各個瀏覽器之間表現不同,這使得網頁制作人員得花很多時間針對各個瀏覽器來寫特殊樣式,處理瀏覽器之間的差異,而又得差異需要大量的實踐經驗才能快速解決,這給標準布局帶來了難度,同時也降低了制作的效率,雖然標準布局也有缺點,但它的優點遠大于缺點。而且未來它的某些缺點將被糾正。 1.2.5標準布局的優點 首先使得網頁更具它本身的語義,web程序開發人員只需在結構清晰簡單的頁面文件里加上他們的代碼,不需要去雜亂的頁面代碼中去找放代碼的位置,使得網頁體積更小,大大提高了網頁的加載速度,搜索引擎對符合標準的頁面青睞有加,使得頁面更容易被訪問,后期維護的風險大大降低,網頁樣式的修改只需要css文件,修改帶有程序代碼的頁面文件的幾率被大大降低,網頁可以在不同的客戶終端顯示,無須另外做特殊開發…這是目前我所了解的,還有很多。 這里介紹了標準布局的分層思想,了解了它的優缺點,有了正確的思想再按照思想實踐,還需要加上一些規范. 2 網頁制作規范 網頁制作規范目前并沒有一個統一的規范,都是從軟件工程中借鑒過來的一些規范 2.1命名規范 選擇符命名是在寫結構時就需要做的事情,一般以小寫英文單詞組合,單詞間可以用”_”,”-”,來間隔單詞,還可以和軟件中變量命名規范相同,首單詞首字母小寫,后面單詞首字母大寫 2.2 css組織劃分及注釋 Css雖然簡單但是良好的組織劃分以及注釋,可以讓css更具可讀性,當維護修改起來時,可以很方便的找到修改的位置,css劃分要看項目大小及項目的頁面特點來分,所有頁面公用樣式以及一些常用的工具樣式的放到一個文件,其它頁面按照頁面結構劃分,把具有相同頁面結構的頁面的公用樣式提取出來給它們公用,然后就是頁面的私有樣式,看私有樣式的多少,設定一個標準,多余多少就單獨提出來,否則合并到局部公用文件。 有了思想,有了規范,還有一個必須的理清楚的,那就是流程。 3 網頁制作的流程 網頁制作人員應該在網頁策劃階段就參與項目,這樣可以有充足的時間分析頁面結構,根據文檔內容寫好結構,先寫公用結構的樣式,再寫局部私有結構的樣式,此流程是站在整個項目所有頁面的全局角度考慮. 3.1 結構先行 一般項目中的頁面會有個頁面說明文檔,有功能說明,區塊欄目劃分和線框圖,這份文檔會交給設計師,讓設計師根據線框圖設計出頁面的終樣式,在設計師的設計過程中,頁面制作人員可以同時做好頁面結構分析,可以根據這個文檔中的內容及線框圖把部分結構代碼寫出來,當拿到設計稿后再根據設計稿修改和添加結構,當設計中有些地方不利于標準,或會增加頁面制作成本,可以和設計師以及產品經理溝通修改設計,直到結構終寫完確定。 3.2 先公后私 當文檔結構分析編寫完后,開始寫樣式,首先要寫的是公用結構的樣式,可以看作是制作頁面的樣式框架,當公用樣式做好后,頁面的大致雛形會出來,再寫頁面私有的特殊樣式,即單獨存在此頁面結構的樣式 3.3 頁面表現測試 當結構和樣式都完成后,并不代表工作就此完成,因為客戶不光使用一種瀏覽器,需要測試不同瀏覽器下的表現,然后根據表現修改樣式直到在各個主流瀏覽器下的表現都統一。這個過程所需時間,和網頁制作人員的經驗相關,經驗豐富的處理這些非常熟練,而對于新手這將是一個痛苦的過程。簡單介紹完了頁面制作的流程,這是網頁制作關鍵的過程,有了清晰合理的過程,有如一個良好的計劃,而前面的頁面標準思想相當于豐富的資源,頁面制作規范相當于計劃的實施質量保證,良好的計劃+豐富的資源+實施質量保證= 完美的執行,即,思想+規范+流程=完美的頁面。 4 網頁制作的未來 隨著互聯網的發展,頁面類型也在不斷的變化,簡單的布局技術已經不能滿足需求,頁面將朝著標準化方向發展,也更注重用戶體驗和可用性,而用戶體驗需要很多交互,完成頁面交互則需要大量高質量的腳本程序,隨著IE 8 宣布完全支持W3C標準,這標志著在未來瀏覽器表現將終歸統一,頁面制作人員將不需要去考慮瀏覽器兼容性問題,可以把更多的時間關注在用戶體驗和可用性上,也對頁面制作人員帶來了更高的挑戰。 |