簡介這篇文章主要介紹了[Html/Css]網(wǎng)頁切片以及相關(guān)的經(jīng)驗技巧，文章約2269字，瀏覽量461，點贊數(shù)4，值得參考！

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

十天學(xué)會DIV+CSS?http://www.aa25.cn(在寫文章的時候上不了，我百度了一個chm下載地址http://vdisk.weibo.com/s/uiL0Ty-gTwfb)

當(dāng)時還找了一個關(guān)于切片的，這個還是可以稍微瞧瞧。

來源于網(wǎng)絡(luò)，我也找不到出處了，就直接貼了

其實標(biāo)準(zhǔn)的網(wǎng)制作完成的工作實際是：psd to html，一般情況下，我們會拿到美工的psd,這時候不同的人會有不同的做法：

1.打開fireworks將圖片切割導(dǎo)出為html。

2.直接在dreamweaver之類的工具去拖拉布局，導(dǎo)入相關(guān)的圖片,flash資源。

3.先在ps中完成切圖后，在文本編輯器中看著效果圖一步步的制作。

以上是大多被采用的方法，但都不好：

第一種方法最為不好，這樣的代碼根本不具維護(hù)性和可讀性。

第二種方法也不好，代碼難免會有冗余，做出來的東西基本需要排查一遍。

第三種方法也不好，因為你需要看效果圖一點點的拼，也就是說寫html標(biāo)簽的時候，你在不斷的假設(shè)這塊要怎么去顯示。

正確的做法是：

1.拿到psd后，先不要做別的，直接在文本編輯器中將網(wǎng)頁的框架寫出來，不要假設(shè)這塊將來css要去怎么渲染，完全自然化的標(biāo)簽，不加任何的css。

2.寫完之后在各個瀏覽器運行之后確保大體定位都沒有問題。

3.書寫總體css,這里的css只負(fù)責(zé)大塊的定位及樣式。

4.切出需要的圖片資源，在寫好的框架中一點點的去構(gòu)造，不斷的調(diào)試，最終為成品。

5.最后，為自己的代碼添加注釋，在css，html中都要合適的為自己的代碼添加注釋。

要想做出能靈活切換皮膚，讓css主導(dǎo)表現(xiàn)，還有很多要注意的地方，但大體的流程就是這樣的，當(dāng)然我們一開始不能直接就做到先寫html，但起碼要有這個意識，循序漸進(jìn)。。。

補充一點，其實上述作者說不好，也不一定是不用的(在只有30分鐘要出一張活動頁面的時候，大家都會毫不猶豫使用第一種···直接table切圖吧。

以下主要我還是圍繞著上述的chm的實例進(jìn)行描述，前面的基礎(chǔ)知識請自己衡量。

chm教程使用dw進(jìn)行開發(fā)，由于我面試說使用dw進(jìn)行開發(fā)，被鄙視之后，我再也無使用過了。別問我為什么，你需要和面試官討論人生。

教程那里是建立站點，其實就是建立文件夾目錄之類(一般我習(xí)慣這樣建立，而且在自己本地服務(wù)器環(huán)境進(jìn)行開發(fā)，以避免 本地靜態(tài)頁面和線上頁面出現(xiàn)錯位，還有部分線上js不執(zhí)行之類的問題。

----/html文件

----css/css文件

----js/js文件

---images/圖片文件

---images/temp/臨時圖片文件 (基本上線就不用了 很多產(chǎn)品，新聞圖之類)

好吧 開始正式開始，

一般先把頁面的主體框架搭好，也和chm一樣

這樣的好處 主要是為了 編寫里面的模塊的時候 不影響整體結(jié)構(gòu)，而不同瀏覽器的下 也不會影響這個主體框架，基本每個瀏覽器渲染里面模塊的時候，顯示可能有點不太一點，但是主體布局是不會改變。后期內(nèi)部修改起來也比較方便，因為不會影響外部。(當(dāng)然我覺得這樣比較合理而已，有更好有望提出

至于什么html代碼我就不貼了，還有ps切圖還是fw的切圖，這些基本軟件操作。

主體結(jié)構(gòu)編寫完畢之后，才對內(nèi)部的模塊進(jìn)行編寫(對于標(biāo)簽的語義化和結(jié)構(gòu)進(jìn)行選擇，這個也不細(xì)說了。

補充說明事項：

一般只有 header nav aside footer article 這些我標(biāo)簽才有可能會加id控制樣式，對于教程當(dāng)中的使用id 控制樣式 基本是禁止的，id的基本是預(yù)留給js進(jìn)行操作調(diào)用

有關(guān)css的寫法之類 請觀看 之前的隨筆 ?[轉(zhuǎn)載]CSS 創(chuàng)作指南(Beta)(css規(guī)范)http://www.cnblogs.com/moki/p/4362961.html

js相關(guān)請不要按照教程，編寫為內(nèi)聯(lián)的，請外部引進(jìn)，為啥要這樣做，與瀏覽器渲染有關(guān)，這個就不在這里細(xì)說。

chm教程后面還出現(xiàn)一些服務(wù)器之類的東西，其實本來就在服務(wù)器環(huán)境進(jìn)行開發(fā)， 關(guān)于這些請自行理解，我個人見解是，前端是必須要懂后端的，前后分離還有一些功能性能方法選擇，都使得自己不得不去接觸這些東西。

最后一些開發(fā)的調(diào)試工具，ietest(ie兼容) firebug(js調(diào)試)

至于ietest還是說一下，基本還是很少會去做兼容ie6了，ie7的話，ie自帶的debug就可以測試了，ie6的話虛擬機的結(jié)果準(zhǔn)確，所以ietest 自己考慮吧。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。