- 相關推薦
Div+css教程之制作html的工具
Div+css教程之制作html的工具你了解多少呢?就跟隨百分網小編一起去了解下吧，想了解更多相關信息請持續關注我們應屆畢業生考試網!
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另一個強大的功能就是自動完成，比如說在編輯器里經常用的一個列表布局
我會把這部分代碼存在編輯器里，并且用"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(納克小工)，它可以自定義快捷鍵這是我非常喜歡的，還可以把色值復制到剪切板，直接粘貼就行，除此之外還有天天取色器，好色鬼，迷你等。
html的工具
文本編輯器
文本編輯器是最基本的HTML開發工具，它可以直接用來編寫HTML、CSS、JavaScript等代碼。常用的文本編輯器包括Windows系統中自帶的記事本、Notepad++、Sublime Text等。這些編輯器都有代碼高亮、自動補全、代碼片段等有利于代碼編寫和閱讀的特性。
IDE（集成開發環境）
IDE是針對開發人員的集成開發環境。它包括文本編輯器、編譯器和調試工具等。IDE和文本編輯器類似，但具有更強大的特性，如自動代碼生成、代碼重構、單元測試、集成開發環境等。常用的IDE包括Visual Studio Code、Eclipse等。
可視化網站編輯器
可視化網站編輯器是一種使用拖放方式設計網站的工具，它可以直接操作網頁的界面，不需要編寫代碼。可視化網站編輯器適合初學者，非常方便快捷。常見的可視化網站編輯器包括Wix、WordPress、Squarespace等。
CSS預處理器
CSS預處理器類似于編程語言中的編譯器，它可以處理CSS語言，提供更為強大的邏輯和結構。CSS預處理器可以大大減少CSS代碼的重復，使開發者能夠更快速地編寫和修改樣式表。常用的CSS預處理器有Sass、Less等。
JavaScript框架
JavaScript框架是一種輔助JavaScript開發的強大工具。它們提供了開箱即用的功能組件，使得開發者在不必從頭開始編寫JavaScript的情況下就能夠實現豐富的功能。常用的JavaScript框架包括jQuery、React、Vue等。
【Div+css教程之制作html的工具】相關文章：
如何設置html字體04-14
html與xhtml的區別規范是什么12-09
html的語言特點是什么04-19
HTML中Id和Name的區別是什么02-08
Photoshop魔棒工具04-26
photoshop文本工具的介紹04-06
《有用的工具》教學設計12-24
《打開蓋子的工具》教案08-26
《交通工具》教案09-06
查英語單詞的工具03-16