- 相關(guān)推薦
Div+css教程之制作html的工具
Div+css教程之制作html的工具你了解多少呢?就跟隨百分網(wǎng)小編一起去了解下吧，想了解更多相關(guān)信息請(qǐng)持續(xù)關(guān)注我們應(yīng)屆畢業(yè)生考試網(wǎng)!
1.切圖工具
圖片的效果對(duì)一個(gè)網(wǎng)頁(yè)來(lái)說(shuō)是很重要的,所以說(shuō)在切圖這方面也沒(méi)什么小巧的工具，一種是用ps(photoshop),另外一種是fw(fireworks)，除了這兩個(gè)種工具ahuing沒(méi)有找到一個(gè)合適的工具了，如果哪個(gè)朋友有更好的切具可以推薦下，目前ahuing用的是第二種，從效率上出發(fā)也建議用第二種;
fw切圖是很簡(jiǎn)單的，打開(kāi)一張效果圖(必須是生成好的一個(gè)整張的圖片，不存在圖層)，你需要切哪一部分就按下快捷鍵(M),再用鼠標(biāo)在圖片上選中你要切的部分，如果不能精確定位就按ctrl+鼠標(biāo)中鍵滾動(dòng)，將圖片放大，定位好后，再ctrl+c復(fù)制背景，接著ctrl+n新建一個(gè)圖片文件，ctrl+v粘貼，ctrl+shift+x導(dǎo)出圖片確定就ok了,就這么簡(jiǎn)單。這種導(dǎo)出方式導(dǎo)出的圖片大小是最小的，fw會(huì)刪除一些不用的顏色值，當(dāng)然有些朋友也會(huì)用fw的切片工具，這個(gè)也是可以的圖片大小也是最小的，之所以ahuing直接復(fù)制粘貼主要是做圖片精靈的方法，圖片精靈在下面有一小節(jié)會(huì)介紹。fw具體使用在這里ahuing就不介紹了，有興趣的朋友在網(wǎng)上bd一下吧
2.編輯器
編輯器的選擇就很多了，最簡(jiǎn)單的就一個(gè)記事本就可以，另外還有Notepad++、UltraEdit、dw(dreamweaver)、phpdesigner等，但是要提高編寫(xiě)效率還是用dw或者phpdesigner,兩者都有代碼提示功能(其它的編輯器也有，感覺(jué)不怎么智能，也不全)，功能比較強(qiáng)大的就是dw了，基本上每個(gè)做網(wǎng)頁(yè)的朋友無(wú)不知道它的，不過(guò)dw cs5太大了，對(duì)于一些配置低電腦是吃不消的，如果是單單做一個(gè)靜態(tài)頁(yè)面，ahuing建議你用phpdesigner，目前最新版本是7.2.5的，是一款精小的編輯器，內(nèi)存占用只有20+M，代碼提示功能也很強(qiáng)大，用這個(gè)時(shí)你需要設(shè)置幾個(gè)地方，第一是查看-語(yǔ)言-中文，第二是工具-配置-代碼完成，將代碼提示所用的時(shí)間設(shè)置成最小，第三就是自定義了，你可以設(shè)置一些快捷鍵，那些文字的顏色也可以配置成和dw一樣，這樣一但從dw轉(zhuǎn)到phpdesigner后，界面不會(huì)覺(jué)得不習(xí)慣，ahuing配置成了firebug的顏色^_^;我還喜歡phpdesigner另一個(gè)強(qiáng)大的功能就是自動(dòng)完成，比如說(shuō)在編輯器里經(jīng)常用的一個(gè)列表布局
我會(huì)把這部分代碼存在編輯器里，并且用"pl"代替;當(dāng)要用到這個(gè)布局時(shí)我只需要在編輯器里輸入"pl"兩個(gè)字母，然后ctrl+j，整個(gè)代碼就出現(xiàn)了，這樣在平時(shí)寫(xiě)代碼時(shí)會(huì)大大提高編寫(xiě)效率，目前我的編輯器里已經(jīng)存了幾十種布局，用時(shí)只需將他們調(diào)出來(lái)，組合下就行了;(在dw里也有這個(gè)功能，就是代碼片斷)
3.調(diào)試工具
在和有的朋友交流時(shí)，有的居然不知道有個(gè)叫firebug的東東，這也太無(wú)語(yǔ)，網(wǎng)頁(yè)調(diào)試工具當(dāng)然選擇ff(火狐瀏覽器)的插件firebug，沒(méi)有此插件的可以在ff-菜單欄-工具-附加組件-搜索firebug,然后添加到firefox重啟ff就可以用了，按F12可以調(diào)出firebug界面，用時(shí)可以按快捷鍵ctrl+shift+c鼠標(biāo)左鍵點(diǎn)要查看代碼的位置，firebug面板里就會(huì)出現(xiàn)html代碼及對(duì)應(yīng)的css，html和css都可以在線修改并且能實(shí)時(shí)看到效果，這樣可以把某個(gè)css調(diào)好后(注意調(diào)試只是當(dāng)前的，源文件是不變的)，再在源文件里修改就可以了，非常方便，除此之外有時(shí)我還用ie(只ie8+才有)的一個(gè)自帶的工具，此工具類(lèi)似于firebug，按F12可以調(diào)出來(lái)，用它只是看是ie下代碼
4.測(cè)試工具及技巧
下面再談下常用的網(wǎng)頁(yè)測(cè)試工具
首先說(shuō)下瀏覽器，網(wǎng)絡(luò)發(fā)展到現(xiàn)在，已經(jīng)出現(xiàn)了各種各樣的瀏覽器，我們做網(wǎng)頁(yè)一般兼容主流瀏覽器就行了，所謂的主流瀏覽器主要有ff(firefox),chrome,ieX,opera,
Safari,傲游,搜狗等;哇這么多!我們都要做兼容，太多了吧?是的都要兼容。有沒(méi)有好的辦法，答案是肯定的。這么多瀏覽器其實(shí)內(nèi)核只有幾個(gè)，Trident(iex、Maxthon、The World 、TT、GreenBrowser、AvantBrowser、360)，Gecko(ff火狐)，Webkit(Safari蘋(píng)果、chrome谷歌、以及360極速版、傲游3、QQ5)，Presto(opera)這樣一看就知道怎么辦了吧我們只要兼容ieX和ff基本上就ok了。
再說(shuō)下測(cè)試工具ietester和web superpreview，兩個(gè)ahuing都用過(guò)，最后還是選擇了前者，原因很多，主要是后者運(yùn)行太慢，不支持js，有時(shí)需要測(cè)試js
最后總結(jié)一下，網(wǎng)頁(yè)預(yù)覽和調(diào)試以ff+firebug為主，用ietester測(cè)試，最后用chrome帶一下就可以了
5.小工具
取色器：有的人會(huì)問(wèn)ps,fw不是有吸管嗎，怎么還要取色器，當(dāng)你在瘋狂的寫(xiě)代碼時(shí)，用ps，fw你不覺(jué)得太繁瑣嗎，言歸正轉(zhuǎn)，直接推薦Nuktool(納克小工)，它可以自定義快捷鍵這是我非常喜歡的，還可以把色值復(fù)制到剪切板，直接粘貼就行，除此之外還有天天取色器，好色鬼，迷你等。
html的工具
文本編輯器
文本編輯器是最基本的HTML開(kāi)發(fā)工具，它可以直接用來(lái)編寫(xiě)HTML、CSS、JavaScript等代碼。常用的文本編輯器包括Windows系統(tǒng)中自帶的記事本、Notepad++、Sublime Text等。這些編輯器都有代碼高亮、自動(dòng)補(bǔ)全、代碼片段等有利于代碼編寫(xiě)和閱讀的特性。
IDE（集成開(kāi)發(fā)環(huán)境）
IDE是針對(duì)開(kāi)發(fā)人員的集成開(kāi)發(fā)環(huán)境。它包括文本編輯器、編譯器和調(diào)試工具等。IDE和文本編輯器類(lèi)似，但具有更強(qiáng)大的特性，如自動(dòng)代碼生成、代碼重構(gòu)、單元測(cè)試、集成開(kāi)發(fā)環(huán)境等。常用的IDE包括Visual Studio Code、Eclipse等。
可視化網(wǎng)站編輯器
可視化網(wǎng)站編輯器是一種使用拖放方式設(shè)計(jì)網(wǎng)站的工具，它可以直接操作網(wǎng)頁(yè)的界面，不需要編寫(xiě)代碼。可視化網(wǎng)站編輯器適合初學(xué)者，非常方便快捷。常見(jiàn)的可視化網(wǎng)站編輯器包括Wix、WordPress、Squarespace等。
CSS預(yù)處理器
CSS預(yù)處理器類(lèi)似于編程語(yǔ)言中的編譯器，它可以處理CSS語(yǔ)言，提供更為強(qiáng)大的邏輯和結(jié)構(gòu)。CSS預(yù)處理器可以大大減少CSS代碼的重復(fù)，使開(kāi)發(fā)者能夠更快速地編寫(xiě)和修改樣式表。常用的CSS預(yù)處理器有Sass、Less等。
JavaScript框架
JavaScript框架是一種輔助JavaScript開(kāi)發(fā)的強(qiáng)大工具。它們提供了開(kāi)箱即用的功能組件，使得開(kāi)發(fā)者在不必從頭開(kāi)始編寫(xiě)JavaScript的情況下就能夠?qū)崿F(xiàn)豐富的功能。常用的JavaScript框架包括jQuery、React、Vue等。
【Div+css教程之制作html的工具】相關(guān)文章：
html5的開(kāi)發(fā)工具06-16
網(wǎng)頁(yè)HTML代碼滾動(dòng)文字制作02-05
網(wǎng)頁(yè)制作軟件工具07-05
php制作unicode解碼工具08-02
DIV+CSS命名規(guī)范記錄04-03
網(wǎng)頁(yè)設(shè)計(jì)工具/網(wǎng)頁(yè)制作與網(wǎng)站建設(shè)08-02