Div+css教程之製作html的工具

仲介交易 SEO診斷 淘寶客 雲主機 技術大廳

1.切圖工具

圖片的效果對一個網頁來說是很重要的,所以說在切圖這方面也沒什麼小巧的工具，一種是用ps(photoshop),另外一種是fw(fireworks)，除了這兩個種工具ahuing沒有找到一個合適的工具了， 如果哪個朋友有更好的切具可以推薦下，目前ahuing用的是第二種，從效率上出發也建議用第二種;

fw切圖是很簡單的，打開一張效果圖(必須是生成好的一個整張的圖片，不存在圖層)，你需要切哪一部分就按下快速鍵(M),再用滑鼠在圖片上選中你要切的部分，如果不能精確定位就按ctrl+滑鼠中鍵滾動，將圖片放大，定位好後， 再ctrl+c複製背景，接著ctrl+n新建一個圖片檔，ctrl+v粘貼，ctrl+shift+x匯出圖片確定就ok了,就這麼簡單。 這種匯出方式匯出的圖片大小是最小的，fw會刪除一些不用的顏色值，當然有些朋友也會用fw的切片工具，這個也是可以的圖片大小也是最小的，之所以ahuing直接複製粘貼主要是做圖片精靈的方法，圖片精靈在下面有一小節會介紹。 fw具體使用在這裡ahuing就不介紹了，有興趣的朋友在網上bd一下吧

2.編輯器

　　編輯器的選擇就很多了，最簡單的就一個記事本就可以，另外還有Notepad++、UltraEdit、dw(dreamweaver)、phpdesigner等，但是要提高編寫效率還是用dw或者phpdesigner, 兩者都有代碼提示功能(其它的編輯器也有，感覺不怎麼智慧，也不全)，功能比較強大的就是dw了，基本上每個做網頁的朋友無不知道它的，不過dw cs5太大了，對於一些配置低電腦是吃不消的，如果是單單做一個靜態頁面， ahuing建議你用phpdesigner，目前最新版本是7.2.5的，是一款精小的編輯器，記憶體佔用只有20+M，代碼提示功能也很強大，用這個時你需要設置幾個地方，第一是查看-語言-中文，第二是工具-配置-代碼完成， 將代碼提示所用的時間設置成最小，第三就是自訂了，你可以設置一些快速鍵，那些文字的顏色也可以配置成和dw一樣，這樣一但從dw轉到phpdesigner後，介面不會覺得不習慣，ahuing配置成了firebug的顏色^_^ ;我還喜歡phpdesigner另一個強大的功能就是自動完成，比如說在編輯器裡經常用的一個清單佈局

        <ul class="plist">
         <li>
        <a href="#" target="_blank"><img width="" height="" src="pic/s.png"/></a>
        <h4><a href="#" target="_blank">標題標題標題</a></h4>
        </li>
        <li>
        <a href="# " target="_blank"><img width="" height="" src="pic/s.png"/></a>
         <h4><a href="#" target="_blank">標題標題標題</a></h4>
         </li>
        </ul>

我會把這部分代碼存在編輯器裡，並且用"pl"代替;當要用到這個佈局時我只需要在編輯器裡輸入"pl"兩個字母，然後ctrl+j，整個代碼就出現了，這樣在平時寫代碼時會大大提高編寫效率，目前我的編輯器裡已經存了幾十種佈局， 用時只需將他們調出來，組合下就行了;(在dw裡也有這個功能，就是代碼片斷)

3.調試工具

在和有的朋友交流時，有的居然不知道有個叫firebug的東東，這也太無語，網頁調試工具當然選擇ff(火狐瀏覽器)的外掛程式firebug，沒有此外掛程式的可以在ff-功能表列-工具-附加元件-搜索firebug, 然後添加到firefox重啟ff就可以用了，按F12可以調出firebug介面，用時可以按快速鍵ctrl+shift+c滑鼠左鍵點要查看代碼的位置，firebug面板裡就會出現html代碼及對應的css， html和css都可以線上修改並且能即時看到效果，這樣可以把某個css調好後(注意調試只是當前的，原始檔案是不變的)，再在原始檔案裡修改就可以了，非常方便，除此之外有時我還用ie(只ie8+才有)的一個自帶的工具， 此工具類似于firebug，按F12可以調出來，用它只是看是ie下代碼

4.測試控管及技巧

下面再談下常用的網頁測試控管

首先說下瀏覽器，網路發展到現在，已經出現了各種各樣的瀏覽器，我們做網頁一般相容主流瀏覽器就行了，所謂的主流瀏覽器主要有ff(firefox),chrome,ieX,opera,

Safari,傲游,搜狗等;哇這麼多!我們都要做相容，太多了吧?是的都要相容。 有沒有好的辦法，答案是肯定的。 這麼多瀏覽器其實內核只有幾個，Trident(iex、Maxthon、The World 、TT、GreenBrowser、AvantBrowser、360)，Gecko(ff火狐)，Webkit(Safari蘋果、 chrome谷歌、以及360極速版、傲游3、QQ5)，Presto(opera)這樣一看就知道怎麼辦了吧我們只要相容ieX和ff基本上就ok了。

再說下測試控管ietester和web superpreview，兩個ahuing都用過，最後還是選擇了前者，原因很多，主要是後者運行太慢，不支援js，有時需要測試js

最後總結一下，網頁預覽和調試以ff+firebug為主，用ietester測試，最後用chrome帶一下就可以了

5.小工具

取色器：有的人會問ps,fw不是有吸管嗎，怎麼還要取色器，當你在瘋狂的寫代碼時，用ps，fw你不覺得太繁瑣嗎，言歸正轉，直接推薦Nuktool(納克小工)，它可以自訂快速鍵這是我非常喜歡的，還可以把色值複製到剪切板， 直接粘貼就行，除此之外還有天天取色器，好色鬼，迷你等。

圖片壓縮工具：如果你是用fw匯出的圖片那這個就不必要了，它已經足夠小了，這個工具就是Smush.it，是雅虎推薦的一款在線壓縮工具網址是HTTP://www.smushit.com/ysmush.it/， 並且它也做成了一個firebug的外掛程式，可以在附加元件搜索yslow找到

代碼壓縮：當代碼完成後，可以將其壓縮一下，一是減少大小，二是可以保護代碼;ahuing為你推薦css壓縮HTTP://www.xland.com.cn/css/geshihuacss.htm，js和html壓縮HTTP ://tool.chinaz.com/Tools/JsFormat.aspx