Select Page

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

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

本篇目錄 :

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

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

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

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

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

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

Painting by David Schnell (Detail) / Galerie EIGEN+ART / The Arm

Photo Shop or Affinity Photo

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

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

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

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

修圖軟體可以辦到的事

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

適合學習繪圖軟體的人

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

 

ILLUSTRATOR or Affinity Designer or Cocoo

affinity deisginer 2015-10-19 00.34.59

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

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

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

 

HTML & CSS

seo-icon-in-macbookpro

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

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

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

 

Dreamweaver or Coda

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

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

 

Cafe Time

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

那就 … 下次見。

 

加入討論

留言

Pin It on Pinterest