簡介這篇文章主要介紹了[Html/Css]網頁切片以及相關的經驗技巧，文章約2269字，瀏覽量461，點贊數4，值得參考！

網頁切片 前端必須掌握的技能，切片，雖然說難也不難，簡單也確實是挺簡單的，當時我看過的教程，雖然里面的東西還不規范，不過作為一個整體的了解還是不錯的。對于一些規范之類還是按照團隊的要求做吧，也不是絕對的。

十天學會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 自己考慮吧。

總結

以上是生活随笔為你收集整理的html播放切片,[Html/Css]网页切片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。