現(xiàn)在很多網(wǎng)站還依然保留著傳統(tǒng)布局方式，這種布局是以效果為中心，制作頁面首先考慮的是頁面的布局，例如，一個兩列布局，首先想到的是用表格的兩列單元格來完成列布局，并且大量使用表格的行列進(jìn)行排版定位，也沒有考慮到網(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)點就是布局效率高，這對于追求效率的公司來說無疑是件好事，對于很小的項目使用這種布局并無大礙，并可以保持高效，但對于大項目使用表格布局，會給后期維護(hù)帶來風(fēng)險，前期制作會很高效，但后期維護(hù)會感覺到繁瑣，復(fù)雜，大量重復(fù)勞動。     為了彌補(bǔ)這些缺點，標(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)點遠(yuǎn)大于缺點。而且未來它的某些缺點將被糾正。 1.2.5標(biāo)準(zhǔn)布局的優(yōu)點     首先使得網(wǎng)頁更具它本身的語義，web程序開發(fā)人員只需在結(jié)構(gòu)清晰簡單的頁面文件里加上他們的代碼，不需要去雜亂的頁面代碼中去找放代碼的位置，使得網(wǎng)頁體積更小，大大提高了網(wǎng)頁的加載速度，搜索引擎對符合標(biāo)準(zhǔn)的頁面青睞有加，使得頁面更容易被訪問，后期維護(hù)的風(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)維護(hù)修改起來時，可以很方便的找到修改的位置，css劃分要看項目大小及項目的頁面特點來分，所有頁面公用樣式以及一些常用的工具樣式的放到一個文件，其它頁面按照頁面結(jié)構(gòu)劃分，把具有相同頁面結(jié)構(gòu)的頁面的公用樣式提取出來給它們公用，然后就是頁面的私有樣式，看私有樣式的多少，設(shè)定一個標(biāo)準(zhǔn)，多余多少就單獨(dú)提出來，否則合并到局部公用文件。     有了思想，有了規(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)公用樣式做好后，頁面的大致雛形會出來，再寫頁面私有的特殊樣式，即單獨(dú)存在此頁面結(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)。

上篇文章：網(wǎng)站域名到期后保留多久不被別人注冊
下篇文章：棗莊做網(wǎng)站通用三欄布局