關於製作網頁所需的基礎技能與軟體軟體工具

最近生活步調稍微有些改變，想說空出來的時間就順手修改一下網頁；但真的太久沒有製作網頁了，乾脆在正式開始做之前複習一下製作網站流程。

又那麼剛好..最近 udemy 在特價，隨手就買了一些教學影片來看看別人都怎麼教的？然後順便整理一下寫寫筆記

本篇目錄 :

關於製作網頁的技能與軟體面
Photo Shop or Affinity Photo
illustrator or Affinity Desitner
HTML ＆ CSS
Deramweaver or Coda

關於製作網頁的技能與軟體面：

說到做網頁大家會想到什麼呢？「那麼難的東西我才學不會呢！」、「感覺需要英文很強？」.. 其實一開始我也是這樣覺得的，對於英文很爛的自己來說，要學會寫語法這件事，一直是我遲遲不敢去學寫程式的一個障礙。

但是好加在剛開始學製作做網頁的時候 Adobe 有個叫 Dreamweaver 的軟體，在界面上有中文的選單，在製作時也可以省去很多網頁語法的編輯，即使是不會英文的人，也可以輕鬆的製作一個簡單的網站。

但一但深入接觸網頁製作後，才發現… 原來做網頁不是只要學會一套軟體就夠了！在一個網站裡其實有很多元素，包含照片、文字、還有排版的美感要注意、以及按鈕功能性還有規劃便利的選單導覽 .. 等等。真的是一門很深的學問啊！（但幸運的事.. 做網頁與設計，比製作音樂省多了！）

今天這篇文章想跟大家簡單的分享一下，自己在學習網頁製作的這段時間以來，關於製作網頁技能的想法以及工具軟體的介紹。

Photo Shop or Affinity Photo

對於多數的人來說，一個網頁中如果只有文字是一件很無聊的事！因此不管是商品相片還是背景圖示的點綴可以說是在所難免的。（但如果文字間距與排版顧好的話，還是很有質感的～；關於這一點日本人真的很厲害！）

在製作網頁的時候你可能會需要一些相片以及圖像的素材，幸運的話，你可以在網路上找到一些免費授權又符合你需求的圖片。但多數免費的圖片可能都不符合你的需求；而且真的要購買的話.. 又要花很多時間去挑選照片><

所以這個時候…還是自己照最快對吧！

雖然說自己照的照片是比較符合原本的概念，但如果照片一不小心沒有拍好的話，難免還是會需要用到像 Photo Shop 或是 Affinity Photo 這樣的軟體來進行編修。不論時構圖的重新剪裁也好、或是色調的調整，上述的兩套軟體都是很好的工具。

修圖軟體可以辦到的事

把不需要的元素去除（例如不小心拍到的路人）
調整相片的亮度與對比（把陰天修成大晴天）
將平凡的照片加上個性特效（如 Instagram 的相片特效）
在相片上添加文字或製作文字特效（例如海報的製作）

適合學習繪圖軟體的人

攝影師 or 對攝影有興趣的人
網頁設計師 or 部落客
一般使用者（喜歡學習新技能的人）

ILLUSTRATOR or Affinity Designer or Cocoo

Illustrator 跟 Affinity Designer 等軟體比較偏向「向量檔案」的編輯，經常應用在插畫、網站架構草考製作、平面雜誌、文宣等設計上。如果你想製作一些教學文章、或是影片，也可以用 Illustrator 以及 Affinity Designer 來做一些設計上的輔助。

但如果你覺得這類軟體太難上手，也可以試著用 Word 或是 Excel 來製作網站的草稿。雖然在功能的精細度、活用度上比不上 Illustrator 跟 Affinity Desinger ，但卻適合新手在電腦上製作簡單的網頁草稿。

另外還有一套線上的網站草稿製作網站 ”Cocoo”，頁面設計得非常簡單，有興趣的人可以嘗試看看。（它是有收費的唷！）

HTML ＆ CSS

等你製作好網站草稿後，差不多就可以開始著手進行網站內部的程式語法撰寫了（也是就是 Coding 的部分）。

HTML 與 CSS 是作為一個網頁製作新手，必須要了解的其中兩種基礎語法.. 雖然說第一次接觸時，可能會覺得有點頭暈、想放棄；但只要有心，人人都可以是網頁設計師！（想想周星馳說過話.. 燃燒你的小宇宙吧）

註：英文好不好，跟會不會編寫程式碼，其實並沒有你想像的影響那麼大，現在很多軟體都可以協助你去記那些編碼、甚至是幫你輸入，你只要還沒有瞎、看得懂英文字母就沒有可以了！

Dreamweaver or Coda

如果你跟我一樣英文不好的話，可以考慮使用 Dreamweaver 或是 Coda 這兩套網頁製作軟體。Dreamweaver 是 Adobe 旗下的產品，使用的人多、網路上的教學與資源也多；價格的部分採月租制度，長期下來製作成本會稍微高一點。Cada 的話可以買斷，適合打算深度研究、又想節省軟體費用的人。

另外，有些人研究了一陣子後，可能就會比較偏向使用「程式編碼」來製作網站，不需要 Dreamweaver 或是 Coda 這樣的輔助軟體。

Cafe Time

以上就是關於網頁製作入門的一些基礎知識，希望幫助大家對於網頁製作的基本常識、以及所需的工具，能有一個初步的了解。未來我也會繼續持續整理、撰寫一些有關於網站製作的資訊。歡迎一起學習的人與我交流～

那就 … 下次見。