網頁設計經驗談:WEBJX收集常用的網頁設計工具

來源:互聯網
上載者:User

文章簡介:本人從事網頁重構這一塊,也有一些自己經常使用的工具,今天與大家分享一下網頁教學網所用的工具,給大家做個參考,讓有需要的人可以更有參考和選擇的理由。我相信,每個人的選擇都有他的理由的。以下的只是我的選擇和排序。

 常常會聽到群裡或論壇裡討論哪個軟體強大、哪個軟體方便等等。其實這個無論是WEB前端開發還是WEB程式的開發,都離不開開發的工具,當然,現在 有不同的系統平台,對應不同系統平台的軟體也有不少,每個人使用的平台、使用的習慣也不同,自然也就有不同的軟體使用。由此也多了一個什麼軟體好用的說 法,但個人覺得,無論什麼軟體,適合自己就好,不需要過分的追求。俗話說:“工穀善其事,先必利其器。”一個用得順手的工具,確實能為我們的開發帶來方 便,更重要的是會讓我們更加享受工具開發過程中所帶來的樂趣。

  本人從事網頁重構這一塊,也有一些自己經常使用的工具,今天與大家分享一下網頁教學網所用的工具,給大家做個參考,讓有需要的人可以更有參考和選擇的理由。我相信,每個人的選擇都有他的理由的。以下的只是我的選擇和排序。

NO1、記事本

  相信接觸電腦的人沒有人不認識記事本的吧,沒錯,這個就是系統的內建的記事,不過本人沒用過LINUX和APPLE的系統,不知裡面是否也是內建了記事本的。這個記事本雖然很簡陋,甚至可以用醜來形容,但是卻是非常合心的小工具。

  有時候手頭上沒有任何的其他工具軟體,這時候就可以用記事本來代勞了,直接在裡面手寫代碼。當然,這個只是暫時性的代替,寫代碼還是有更好的工具的。

  記事本除了來用可以緊急替代,平時裡還有其他作用的。有時候,我們想從網頁上儲存一些文字下來到WORD裡面,直接複製就把HTML和相應的樣式什麼的都一併複製進來了,影響了美觀,當然有經驗的人知道可以採用“選擇性粘貼”,但沒經驗的人是一下子複製進來後就不知怎樣處理了,這時候可以先將複製的東西粘貼在記事本裡,再從記事本裡將文字複製到WORD裡,這樣就完全的將HTML的標籤及樣式完全的去掉了,成了完完全全的純文字了。

NO2、EditPlus

  這個現在是我至愛的一個寫代碼的工具,不僅功能齊全,自訂程度高,程式檔案還非常小,可綠色攜帶,配置可以移植,文法、模板都可根據自已的書法習慣來進行自訂,還可以定製自訂的著色等等優點,讓我用上了就愛不離手了。無論是HTML/Javasctipr/CSS,還是/ASP/PHP/C/C++/Perl/JAVA等語言,基本都是通殺的,當然,我也只是基本用前三種語言而已。另外還有可以進行代碼收縮、縮排、查看行數、列數等功能也非常的實用,更重要的有一個基本上是無限次數的撤消或重做的功能,可以上你在任意的時候都可以回到所需要的狀態,一些檔案比較等小功能還有待更加深入的挖掘。

  當然,這個軟體也是有一些缺點的,例如,沒有可視化功能,當然這個並不是在要可視化裡面編輯,只是想可以實現在可視化裡點擊一下就能快速定位到代碼部分,這樣方便尋找(哈哈,這個只是個人的一個想法而已)。還有就是不能智能代碼收縮,只能根據代碼的縮排量來進行判斷,所以有時候收縮代碼不太準確,特別是頁面長、代碼量非常大的時候,有時候要定位某個部分的代碼找起來也比較費時。還有一個就是替換的功能試用了感覺不是那麼智能和準確,明明輸入準確的搜尋要替換的條件,且眼睛也都定位到了相應的代碼部分,但軟體就是死活不認(呵呵,可能他也會有睜眼瞎的時候),搜尋替換的時候,也非常的迅速,簡直是“迅雷不及掩耳之勢”,一下子全部都替換了還沒反應過來,還要撤消一下看看是否執行了操作。

  當然雖然還有這些缺點,但這個工具安裝程式才2M多一點,安裝解壓後也才不過3M左右,實在強大,缺點相對優點已經算是吹毛求疵了,哈哈,本人至愛。

  另外本人也根本自己的使用習慣,配了一個著色的方字案和相應的語言檔案(包括了HTML和CSS的講法),著色可看上面的圖,具體的文法和模板請自行下載親測。

NO3、FastStone Capture

  這個是一個輔助類的小工具,但是這個小工具雖然“麻省雖小,卻也是五髒俱全”,非常的優秀,也可以綠色攜帶。這個小軟體有非常多的功能,有各種各樣方式的截圖,錄製螢幕、螢幕放大鏡、螢幕尺、螢幕取色等等的功能,本人常用的就截圖、螢幕尺、取色等功能,包括本博中的所有截圖,基本上都是出自這個軟體的。螢幕尺和取色工具可以在寫頁面的時候用來進行效果圖的精確的查看和進行取色。非常得心和方便的小工具。

NO4、Topstyle

  這是一個寫CSS的工具,有自動提示功能,當不想每個字母都自己來敲的時候,這個工具就可以派上用場了。工具是支援其他語言的,只不過我一直只用來寫CSS。工具還有預覽、針對不同的瀏覽器的檢測等其他一大堆的功能,但本人基本不用的,只用一項就已足夠了。

  此工具也有一些缺點,就是不支援自動換行,有時候一個類會寫得很長,得拖動橫向的捲軸到右邊去看,很不方便,個人覺得這個很有必要進行最佳化。希望軟體有做該軟體漢化的人或其他的人看到可以向軟體作者反映進行最佳化一下。軟體是英文版的,因為本人使用的是漢化版的,所以對中文支援有些問題,部分文字會看不到(當然CSS不可能是中文的,是注釋啦,如果有一天,樣式也能用中文來寫,那個時候就強悍了,呵呵),估計英文版的也會是這樣情況,所以可以諒解、忽視。

NO5、Dreamveaver

  這個是一個功能非常強大的開發工具,在使用這麼多的寫代碼的工具中,這個是最完善和強大的了,主流的語言都支援,需要有的功能也基本上全有了,這裡就不再多說,相信開發的人都知道這個軟體的強大了。其中個人最喜歡的就是智能收縮的,不會像EditPlus那邊是根據縮排來進行收縮的,而是完全的做到了根據標籤來進行自動關閉收縮,這個是非常有用的;另外一個,就是可以在視圖編輯裡點擊相應的位置,切換到程式碼檢視裡就能快速定位到代碼所在的地方,這個也是非常的好用的;還有一個就是智能的提示功能,會提示你寫的標籤不正確的時候會給出提示,或者代碼變色,讓你很容易的定位到相應出錯的代碼部分gmf有一個就是強大的搜尋功能,可以對單檔案、多檔案、網站檔案、目錄檔案夾進行尋找來替換,這點是我使用過的工具中擁有最強悍的搜尋功能的(我在幻想,要是EditPlus也有這四個功能該多強大啊,哈哈)。其他還有數不清的功能大家可以自行繼續深入發掘,哈哈。總的來說,Dreamveaver算是一個比較強大和完善的工具了。無論是新手老手,相應都不會陌生的。

  當然,作為一個如此優秀的工具,該怎麼使用也是非常值得一提的。老手當然基本都是用代碼模式的,視圖模式一般只是用來進來點擊定位到代碼位置的,這個不用提了;新手更多時候使用的是視圖或設計模式,因為通過直接點擊和選擇就能實現一些頁面的效果,但這樣是非常不利於學習語言的,只知表面不知其中,個人建議一定要切換到代碼模式裡一個代碼一個代碼的敲(當然有代碼提示已經省掉了我們很多的敲打了),這樣學習起來才會有效果,絕對不要相信那個什麼所謂得的教程或書本來點擊這裡那裡的來“插入”來完成網頁,這完全是誤人子弟的,會讓你走很多彎路,到最後來發現,自己會的只是使用這個軟體而已,而語言還是永遠沒有學會。這是本人親身的體驗,希望各位新同學引以為戒。

NO6、FireWork

  其實這個和PhotoShop的功能上都是非常相似的,FireWork本來是出自Macromedia公司的,後來給ADOBE公司收購了,並且和PhotoShop一同出面在Master Collection(開發套裝)中,會讓人產生一些疑惑,為什麼都是同樣的圖片處理軟體,不整合到一個軟體中呢?其實這兩個軟體雖然相似,但功能和側重是有所不同的,ADOBE公司不整合在一起肯定是有他的道理的,具體可以自得去深入瞭解一下,本文重點不在此。

  此工具本人最常用的也就是切圖用來輸出圖片是最方便的,可以很方便的對圖片進行各種規格的輸出,是用得最順手的一個切圖工具。其他的功能基本很少用甚至沒用過,這裡就不再多說了。

NO8、PhotoShop

  PhotoShop這個大名鼎鼎的工具真的是讓人如雷貫耳,現在基本上涉及設計的各個行業都在使用,其中的強大自然是不言而喻。PhotoShop可以讓張飛變美女,可以讓各種各樣生活中的不完美在PhotoShop中變得完美,讓各種幻想都可以變成現實,其鬼斧神工之效確實是無人能敵。

  當然作為前端開發的我也不可能會錯過這個軟體,但由於本人不擅長設計,所以用得馬馬虎虎,基本上是只用於一些圖片處理和最佳化輸出等等。具體可以查閱一下我寫過的文章《前端工程師新手必讀》圖片最佳化部分,裡面的一些觀點也許有錯誤,現在也有在求真當中,各位有需要的自行深入研究。

  FireWork和PhotoShop現在雖然同出一家,但裡面的一些區別至今我仍無法搞清楚的。如我的另外一篇文章裡說到的一個觀點:PNG24是否支援透明度?FireWork輸出的PNG24和PhotoShop輸出的PNG24都不透明,而PhotoShop中輸出的PNG24+透明為什麼在FireWork和別的看圖軟體顯示的都是PNG32。這個問題困擾了我很久,問了一些業界的包括做設計的也搞不清楚這個問題,所以打算向ADOBE公司裡諮詢一下。具體本人也在整理這方面的資料,有結果後會再跟大家公布。

  另外,ADOBE公司的這些軟體都很強大很優秀,但是也有有一個很大的弱點,就是軟體非常的龐大,一個軟體安裝包至少也有好幾百M,大的上好幾個G,我的ADOBE Master Collection CS5(開發套裝)中,光鏡像檔案兩個就有13G了,所以安裝也要花上半天的時間,機器配置不好的話跑起來更卡,特別是切圖寫代碼的時候,開這兩三個軟體就已經開始跑得吃力了,無奈公司裡的電腦只有2G的記憶體,集顯,有時候跑得那個卡啊。

NO8、Firefox、Chroom、Mathon3

  Firefox、Chroom、Mathon3這三個基本成為主要的瀏覽器,當然還有萬惡的系統原生IE6在機器上用來測試,利用這些工具配合頁面的開發和調試非常有用,HTML、Javascript、DOM、網路情況什麼的都不在話下,如果你還沒有加入到WEB標準瀏覽器行列中來的話那就趕快來吧。當然測試的話僅僅是除了這些瀏覽器是不夠的,反正市面上的主流瀏覽器都裝上一個,測試時你會有不同的發現,什麼Safari、Opera、世界之窗、搜狗、360………我都忘了裝了多少個了。另外針對不同的版本IE系統,用虛擬機器來裝了不同的系統平台上的不同的版本的原生瀏覽器來備測,有時候也是需要的,有時候同一版本的瀏覽器在不同的系統平台上也會有不同的表現的,哈哈,在這裡簡直就是一個瀏覽器收集之家了。

NO9、MarkMan

  一款很有愛的工具,和作者宣傳的口號一樣很有愛,可以進行座標、尺寸、顏色、文字等標註,支援儲存檔案二次編輯等非常友好的功能,很方便很喜歡。不過作者辛辛苦苦開發了一年我作品一夜之間就被TX的某個部門山寨了,還鬧得挺大的,作為原創,支援!

  軟體已整理收藏了,有需要的朋友也可以下載收藏。

  以上是本人經常使用的一些關於WEB前端開發的工具,另外的還有一些其他的工具不太常用的就不介紹了,以上的這些工具其實都有很多的替代方案,不要一味追求新、強大,新且強大的軟體你的機器還不一定跑得起來,所以,我的一個選擇原則:適合、順手就好。



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。