[Html/Css]網頁切片

網頁切片 前端必須掌握的技能，切片，雖然說難也不難，簡單也確實是挺簡單的，當時我看過的教程，雖然里面的東西還不規范，不過作為一個整體的了解還是不錯的。對於一些規范之類還是按照團隊的要求做吧，也不是絕對的。
十天學會DIV+CSS http://www.aa25.cn（在寫文章的時候上不了，我百度了一個chm下載地址http://vdisk.weibo.com/s/uiL0Ty-gTwfb）
當時還找了一個關於切片的，這個還是可以稍微瞧瞧。
來源於網絡，我也找不到出處了，就直接貼了
其實標准的網制作完成的工作實際是：psd to html，一般情況下，我們會拿到美工的psd,這時候不同的人會有不同的做法：
1.打開fireworks將圖片切割導出為html。
2.直接在dreamweaver之類的工具去拖拉布局，導入相關的圖片,flash資源。
3.先在ps中完成切圖后，在文本編輯器中看着效果圖一步步的制作。
以上是大多被采用的方法，但都不好：
第一種方法最為不好，這樣的代碼根本不具維護性和可讀性。
第二種方法也不好，代碼難免會有冗余，做出來的東西基本需要排查一遍。
第三種方法也不好，因為你需要看效果圖一點點的拼，也就是說寫html標簽的時候，你在不斷的假設這塊要怎么去顯示。
正確的做法是：
1.拿到psd后，先不要做別的，直接在文本編輯器中將網頁的框架寫出來，不要假設這塊將來css要去怎么渲染，完全自然化的標簽，不加任何的css。
2.寫完之后在各個瀏覽器運行之后確保大體定位都沒有問題。
3.書寫總體css,這里的css只負責大塊的定位及樣式。
4.切出需要的圖片資源，在寫好的框架中一點點的去構造，不斷的調試，最終為成品。
5.最后，為自己的代碼添加注釋，在css，html中都要合適的為自己的代碼添加注釋。
要想做出能靈活切換皮膚，讓css主導表現，還有很多要注意的地方，但大體的流程就是這樣的，當然我們一開始不能直接就做到先寫html，但起碼要有這個意識，循序漸進。。。
補充一點，其實上述作者說不好，也不一定是不用的（在只有30分鍾要出一張活動頁面的時候，大家都會毫不猶豫使用第一種···直接table切圖吧。
以下主要我還是圍繞着上述的chm的實例進行描述，前面的基礎知識請自己衡量。
chm教程使用dw進行開發，由於我面試說使用dw進行開發，被鄙視之后，我再也無使用過了。別問我為什么，你需要和面試官討論人生。
教程那里是建立站點，其實就是建立文件夾目錄之類（一般我習慣這樣建立，而且在自己本地服務器環境進行開發，以避免 本地靜態頁面和線上頁面出現錯位，還有部分線上js不執行之類的問題。
----/html文件
----css/css文件
----js/js文件
---images/圖片文件
---images/temp/臨時圖片文件 （基本上線就不用了 很多產品，新聞圖之類）
好吧 開始正式開始，
一般先把頁面的主體框架搭好，也和chm一樣


這樣的好處 主要是為了 編寫里面的模塊的時候 不影響整體結構，而不同瀏覽器的下 也不會影響這個主體框架，基本每個瀏覽器渲染里面模塊的時候，顯示可能有點不太一點，但是主體布局是不會改變。后期內部修改起來也比較方便，因為不會影響外部。（當然我覺得這樣比較合理而已，有更好有望提出
至於什么html代碼我就不貼了，還有ps切圖還是fw的切圖，這些基本軟件操作。
主體結構編寫完畢之后，才對內部的模塊進行編寫（對於標簽的語義化和結構進行選擇，這個也不細說了。
補充說明事項：
一般只有 header nav aside footer article 這些我標簽才有可能會加id控制樣式，對於教程當中的使用id 控制樣式 基本是禁止的，id的基本是預留給js進行操作調用
有關css的寫法之類 請觀看 之前的隨筆  [轉載]CSS 創作指南（Beta）（css規范）http://www.cnblogs.com/moki/p/4362961.html
js相關請不要按照教程，編寫為內聯的，請外部引進，為啥要這樣做，與瀏覽器渲染有關，這個就不在這里細說。
chm教程后面還出現一些服務器之類的東西，其實本來就在服務器環境進行開發， 關於這些請自行理解，我個人見解是，前端是必須要懂后端的，前后分離還有一些功能性能方法選擇，都使得自己不得不去接觸這些東西。
最后一些開發的調試工具，ietest（ie兼容） firebug（js調試）
至於ietest還是說一下，基本還是很少會去做兼容ie6了，ie7的話，ie自帶的debug就可以測試了，ie6的話虛擬機的結果准確，所以ietest 自己考慮吧。