網頁設計

網頁設計軟體 繪圖、編輯器五種實用軟體分享

1074
次閱讀

網頁設計是一項多元需要多面向的工具還有分工才可以完成的一件事,僅靠一己之力雖然可以做到

若有工具在身必定會事半功倍,今天精選幾款關於網頁設計實用的工具

1.Sublime Text
一款簡單好用的編輯器,由Jon Skinnern所開發,在於2008年推出。是一套跨平台的文字編輯器,內部功能強大,介面很簡潔,也能做為python的插件。

其中語言支持非常多,有ActionScript、AppleScript、ASP、batch files、C、C++、C#、Clojure、CSS、D、Diff、Erlang、Go、Graphviz (DOT)、Groovy、Haskell、HTML、Java、JSP、JavaScript、JSON、LaTeX、Lisp、Lua、Makefiles、Markdown、MATLAB、Objective-C、OCaml、Perl、PHP、Python、R、Rails、Regular Expressions、reStructuredText、Ruby、Scala、shell scripts (Bash)、SQL、Tcl、Textile、XML、XSL、YAML,這些幾乎囊括了大部分常用的程式語言,網頁設計經過此編輯器,實在是很方便。

使用者介面也可以自行選擇佈景主題,使用時較為美觀,功能方面也非常多,舉凡自動美化換行,偵測標籤頭尾去做縮排、程式碼提醒,會再打出某段程式時就聰明的提醒相關程式碼,可快速地使用,相當高效率。若是運用HTML網頁設計中,儲存過後還可以直接open in broser打開頁面直接預覽。

官方網站:https://www.sublimetext.com/

2.VS code 

由微軟開發,2015年推出,近幾年的更新後,許多人由Sublime跳槽用VS code,可見功能的強大。支援的程式語言有JavaScript、TypeScript、CSS 和 HTML、Python、C/C++、Java 、Go,這些程式語言在網頁設計中都會使用到,不管是前端的設計,互動式功能的製作,後端的程式語言,VS code憑著他可以跨平台編輯、代碼重構等多種新穎功能,深受網頁設計師喜愛。

若覺得不敷使用,VS code 同時也提供擴充商店可以依照需求取用功能,開發、偵錯、部屬都可以在內進行,透過Azure Cosmos DB、MongoDB的支援服務,可以管理本機或遠端的資料庫資料,在網頁中,必定會有很多需要儲存的資料,若能方便管理,將會提升不少效率。

 

官方網站:https://code.visualstudio.com/

3. Dreamweaver

由Adobe開發,推出於1997年,用來架設網站及網頁設計的火紅軟體,使用所見及所得的介面讓入門新手也能輕鬆編輯網頁,有點程度的人也能選擇用HTML語法進行編輯,內部友善的介面可以視覺化的插入表格、表單、標題等標籤,主打使用HTML、CSS、Javascript功能來做網頁設計的軟體,在撰寫程式碼時,會智慧提示相關程式碼,能夠快速地製作出網頁並發布。

工作列有應用程式列、文件工具、文件視窗、工作區切換器、面板等常用功能,就像桌面一般隨時能取用,也能及時檢視瀏覽器中看到的畫面是如何,讓使用者免去切換的動作,可以馬上做修改。

Dreamweaver教學這邊看: Dreamweaver介紹+教學

官方網站:https://www.adobe.com/tw/products/dreamweaver.html

4.Photoshop

由Adobe開發,推出於1990年,很多人都知曉的圖片製作軟體,在網頁設計中圖片的呈現也至關重要,photoshop可以自由的變更圖片成網頁適用的樣子,支援psd.psb.pdd.raw.bmp.gif.eps.pdf.png.tiff.jpeg.dicom檔案類型,主要是處理由像素構成的圖片,圖片編輯功能多樣強大,可以繪圖、編修,根據圖層做不同變化,應用程式框架中將所有的工作區元素集合,可以在一個地方就能操作應用程式、編輯路經中,透過路徑的線段、元件和點,決定尺寸與形狀,也能選取多種路徑去做相應的圖片編修過程。功能之眾多,在官方網站也有學習手冊、影片供所有人參考,上手容易、進階也有相應資源,在網頁設計中編修圖片與視覺化的設計都可以透過photoshop做到。

官方網站:https://www.adobe.com/tw/products/photoshop.html

5. Illustrator

由Adobe所開發,推行於1987年,與photo不同的是,他是採用向量繪圖,可以隨心所欲的繪製出想要的線條,不斷的更新推出新功能,讓使用者可以在各種創作上自由的運用,常見的有繪製圖片、標誌、編輯文字、書籍插圖、產品包裝、廣告等應用。因為是向量繪圖,不管放大多大,都會清楚地呈現在電腦中,對於網頁設計中,面對不同的平台解析度大小,圖片應會隨著大小而更動的狀況,使用illustrator向量繪圖,不用擔心圖片模糊,完美呈現在網頁中。

官方網站:https://www.adobe.com/tw/products/illustrator.html