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