早年很多人以為網站就是由Dreamweaver這套軟體所做出來的產物,事實上Dreamweaver只是Adobe旗下的專門用來做網站的軟體,最基本的網站是由HTML+CSS所組成,而HTML和CSS則是一種程式則是一種程式碼,任何可以寫程式碼的工具,都能用來寫出一個網站,以下介紹包括Dreamweaver在內較常使用的做網站軟體。
內容索引
HTML+CSS程式編輯軟體
新手做網站,大家都推Adobe Dreamweaver?
因為「新手」、「做網站」,兩個關鍵字組合起來,要新手寫程式是困難的事,而Adobe Dreamweaver把網站製作整合成圖形化的編排介面,使用點選、編排的方式製作你的網站元素,再透過勾選、輸入的方式來編排CSS,對於新手入門會比直接編寫HTML及CSS程式來得簡單上許多,但畢竟是「網站」製作,並不是簡單的Word文件編排,想做出想要的網站,還是得經過學習後網站的特性、及CSS的功用後⋯⋯才能得心應手的編排網站,但對於新手來說入門門檻較低、介面友善。
FontPage
跟Dreamweaver同樣是圖形化的網站設計軟體,早年Dreamweaver風行之前,幾乎是網站設計的代名詞,後來這個地位被Dreamweaver取代,使用上更簡單、但因功能無法滿足更高的需求、幾乎沒有專業者採用。
Sublime Text3
這是黃裕二自己最愛的網站製作工具,是一款純文字編輯器,由於沒有圖形化介面、因此必須透過程式編輯也就是俗稱Coding的方式來編寫網站的HTML+CSS,如果不只是臨時需求,而是將來有意願成為專職網站工作者的人,建議可以從程式編輯的方式學起,這樣才能真正掌控網站前端中的一切需求,透過程式編輯也更能了解每一行HTML與CSS的特性。
VSCODE ( Visual Studio Code )
下載頁面
微軟所開發並提供的免費編輯器,功能強大、介面簡潔現代,推出時候很吸引裕二跳過去使用了一陣子,但因為習慣問題、加上那時剛推出,功能還不齊全,因此還是先回頭使用Sublime Text3,之後不排除還會再回去使用看看。
NetBeans IDE
下載頁面
裕二剛開始學習純程式開發的時候的第一款編輯器,是昇陽電腦所開發的軟體開發工具,一樣功能強大,甚至只比較網頁前端程式的開發部分,我覺得可能還比現在在用的Sublime Text3還好用,印象很深刻他內建的所寫即所得功能,大幅的加快了開發的速度與效率。
目前黃裕二我已經完全改用VSCODE了,VSCODE在一開始就有著簡潔的畫面、優異的功能,背後更有微軟這樣實力強大的公司維護開發,經過幾年的不斷修正強化後,我認為已經超越Sublime Text3,因此目前專業的開發者幾乎都已經跳槽使用VSCODE,透過安裝一些外掛後也跟NetBeans IDE一樣,能即時編輯程式碼並且做到所寫所得的效果,體驗非常的優異。
除了自己開發之外,也有線上設計網站的服務
如果你完全不想看到程式碼,想最快速自己生產出一個網站,這就是解答
第一部分介紹的工具都是要自己來做網站的開發,並且開發成為檔案後,還得綁定網址並上線到伺服器才能成為一個可以瀏覽的網站,另外有一種是線上的服務,直接可以在服務的平台中使用「簡單易用」的「圖形化介面」設計自己的網站,並且直接設計好發布就在線上了,如果是要速成,又不想浪費時間從頭學習網站開發的人,可以參考。
這邊列舉幾家常見的:
Wix
Weebly
網頁設計、圖片處理軟體
除了處理網站程式,架設網站之外,跟網站息息相關脫不了關係的,就是圖片,不管是初期的網頁設計、或是後續經營需要用到的文案、圖片、廣告行銷圖片,或多或少都會需要用到影像處理軟體,最常見的有這幾個
Adobe Photoshop
Windows和Mac跨平台最多人使用的影像處理軟體、不管是專業度、功能方面都強大沒話說,也是業界最多人採用的平面影響處理軟體,非常適合用來處理網頁圖片。
Adobe Illustrator
也是Windows和Mac都有的跨平台軟體,專業的向量處理軟體,但以跟網頁的契合度,Photoshop像素式的影像處理方式會跟網頁設計比較契合。
Sketch (Mac OSX Only)
有些使用Mac的的設計師會採用Sketch一款輕量級的UI設計工具,但建議如果是負責公司內部的設計案,且公司內部統一使用Sketch的話才使用Sketch,否則使用誇平台且最多人使用的Photoshop來設計還是比較安全的,不會遇到專案合作者無法開啟或不會使用Sketch的狀況。
FTP軟體
最後網站完成之後,你會需要一款可以上傳網站到主機伺服器的軟體,雖然FTP軟體百百款,但Perry唯一推薦FileZilla,不管是Windows或是Mac都有,且操作介面一致,簡單能上手。
FileZilla相關教學可以參考:Mac FTP使用教學 FileZilla (適用Windows)
特別推薦:WordPress架站
上述介紹,從最專業(困難)到最簡單的方式依序為:
- VSCODE、SublimeText3 直接編寫程式做網站
- Dreamweaver 有圖形化介面 + 編寫程式
- Wix、Weebly 等線上簡易編輯即上線,完全不須碰程式
而介於最困難與最簡單之間,其實還有 WordPress 網站可以選擇,WordPress 的好處與優勢可以看此篇:為什麼選用WordPress建置網站?原來有這麼多好處!,他「簡單」可以很簡單,「複雜」也可以很複雜,簡單到「沒學過網站的人」也可以使用來架站,複雜則到「專業開發者」也用它來做為核心開發網站。
延伸閱讀,下面方法擇一即可架設 WordPress 網站:
- 速度勝Bluehost?A2 Hosting架設WordPress教學(便宜。效能不差,加購網址一站搞定!)
- 造九 WordPress VPS 主機方案,輕鬆當站長(較貴。主機效能高、速度快,中文客服服務)。
這代表著 WordPress 的彈性相當之大,「可玩性」非常高,但「入門與操作是需要門檻的,他必須自己架設主機,再搭建WordPress上去」,網站外觀上雖然有很多主題可以直接套用!但真的要調整到適合的需求又很考驗對WordPress的熟悉程度,適合能有時間研究,且對網站架設有相當興趣的人,只要願意投入時間,WordPress 是能讓非「專業」網站開發者開發出最接近「專業」網站的架站方式。
自己做網站結論:如何知道哪一個適合自己?
如果你沒基礎,又想自架網站。有以下幾種可能:
- 立志成為網站工程師
- 那一定得好好從基礎學習程式語法,再使用 VSCode 等編輯器自己編寫程式。
- 想架設網站接案
- 如果是這個選項,會介於網站工程師到 WordPress 架站之間,很多人沒學過正規的程式,直接學 WordPress 就開始接網站案件了,當然其中水平落差很大,WordPress 很強大!可以做到的功能沒有極限。但要用來接案最好得多多鑽研 WordPress 的應用手法。
- 只是想架自己的網站、部落格之類的
- 那建議可以選簡單完成的方式即可,像是 Wix 等線上平台,但我私心推薦使用 WordPress,因為簡單入門,深則可以玩到很深,大部分部落客都使用 WordPress 架站,因此教學分享很多!可以隨著你網站經營狀況,慢慢添加功能!
且 Wix 等平台使用後你就被綁住了,必須不斷續約使用,也不能搬家。WordPress 因為是開源程式,不屬於那一家公司所擁有,可以讓你隨意攜帶、修改,搬家!真的推薦使用 WordPress 來架設網站!
網站設計細節多,省下寶貴時間委託專業
網站設計的時間成本也是你必須考慮的,如果你正在衝刺你的事業的話,與其做出一個不一定能符合需求的網站⋯⋯也許委託專業是你更好更舒適的選擇。
且學習的成本之外,網站設計融合很多專業知識。這也是為何幾乎一眼就能看出一般人打造的網站跟專家所建造的網站有明顯的區別。市面上也不少只學過簡單套版就出來接案的偽專家(就算是套版網站也很多細節要注意和調整喔!而沒受過專業訓練的話根本不知道如何調整),因此挑選一間信譽良好,有多年經驗又可以開發票的正規網站設計公司是很重要的。
網站設計牽涉的技術與專業知識非常廣泛,製作公司必須擁有面面俱到的專業知識,才能幫你打造出質感出眾的網站、以及在一般人看不見的程式碼、SEO 體質等⋯⋯都能幫你全面兼顧。一個又快又專業、還能兼顧 SEO 表現的好網站絕不是隨便就能打造出來!
造九也有提供網站製作的服務,由數碼星網站設計公司提供服務!歡迎企業諮詢專業的網站設計服務。如果是個人想打造部落格,也歡迎參考造九所提供的網站設計服務,造九會用多年經營部落格的經驗幫你打造一款可以讓你放心全心投入經營的好網站喔!
延伸閱讀:
速度勝Bluehost?A2 Hosting架設WordPress教學
教學:
WordPress 最有設計感又強大的主題 Divi 中文教學
在這裡,所有的學習內容都是免費的。
如果這讓你感到滿意,一杯咖啡能讓我們走得更遠。
嗨!歡迎來到造九 😊 打聲招呼吧!