胡亂談談網頁布局心得
現在很多**還依然保留著傳統布局方式，這種布局是以效果為中心，製作頁面首先考慮的是頁面的布局，例如，乙個兩列布局，首先想到的是用**的兩列單元格來完成列布局，並且大量使用**的行列進行排版定位，也沒有考慮到網頁的可用性和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標準，這標誌著在未來瀏覽器表現將終歸統一，頁面製作人員將不需要去考慮瀏覽器相容性問題，可以把更多的時間關注在使用者體驗和可用性上，也對頁面製作人員帶來了更高的挑戰。
如何分析網頁的布局
當我們在瀏覽乙個網頁時，我們會發現網頁的組成元素logo,導航條，列表等內容的位置會隨著網頁主題分類置於網頁的不同位置。那麼，怎樣分析乙個網頁的布局成了製作乙個網頁眉要任務，對於電子商務 個人主頁。我們要學會分析，這樣，製作出來的網頁就會給人們一目了然判斷出是什麼乙個什麼主題的 下面，我就和大家認識...
我個人總結的DIV CSS網頁布局需要掌握的基本技巧
下面是進行css設計時的八個必要的小技巧，良好的習慣可能會使你的設計週期加倍縮短 1.div css網頁布局若有疑問立即檢測 在出錯時若能對原始 做簡單檢測可以省去很多頭痛問題。w3c對於xhtml與css都有 檢測工具可用，請見請注意，在檔案開頭的錯誤，可能因為不當的結構等因素造成更多錯誤 我們建...
層布局的網頁位置錯位解決的方法
使用插入層 在乙個居中的頁面中，使用插入層的 因為使用 描繪層 生成的 不在居中 之中，所以，在居中頁面中，要使層相對其它元素沒有錯位現象，就必須使用插入層。在居中頁面中，常用兩種方法，實現層相對其它居中元素沒有錯位現象。使用插入層 1.在乙個居中頁面中，把插入點放在文件中，例項中把插入點放在 中。...