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

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

那就 … 下次見。

 

WordPress 網誌更新、離線編輯軟體工具推薦

WordPress 網誌更新、離線編輯軟體工具推薦

今天這篇想要跟大家分享一下個人在撰寫部落格的一些流程、以及常用的軟體以及使用方法!雖然過去也曾使用 Sublime Text、Alternote、MultiMarkdown .. 等軟體來協助撰寫網誌 “文章” 與 ”語法”,但經過一段一段時間的磨合後、新歡舊愛之中總是有來有去…

近期使用的主力軟體

iThoughtsX

iThoughtsX 是一套 MindMap 的製圖軟體,也是目前使用過的 MindMap 軟體中介面設計最簡潔好用的。
iThoughtsX 是一套 MindMap 的製圖軟體,也是目前使用過的 MindMap 軟體中介面設計最簡潔好用的。

最近在寫網誌文章前都會先使用 iThoughtsX 來整理該主題要寫的內容,透過繪製心智圖的方式來思考要從什麼切入點來寫這次的主題、或是利用 iThoughtsX 整理收集一些相關資訊或是素材;讓寫作前的思緒能夠更集中,到了真的開始撰寫內文時也會更加流暢些。

iThoughtsX 也是目前使用過的所有的 “心智圖” 軟體中最簡潔、、美觀、快速的軟體。除了可以完全使用鍵盤快捷鍵來繪圖外還可以自訂自己的 MindMap 主題套版,省去不少排版以及修改主題的時間。

除了 iThoughtsX 以外,SimlpeMind 算是用的最久的 MindMap 軟體了!其最大特色是 Map 彼此之間可以建立超連結、但如果該 Map 檔案被移除或遺失的話... 連接也會跟著出現錯誤,(當初也是因為檔案忘記備份遺失後才發現 iThoughtsX 的)
除了 iThoughtsX 以外,SimlpeMind 算是用的最久的 MindMap 軟體了!其最大特色是 Map 彼此之間可以建立超連結、但如果該 Map 檔案被移除或遺失的話… 連接也會跟著出現錯誤,(當初也是因為檔案忘記備份遺失後才發現 iThoughtsX 的)

而且,使用 iThoughtsX 還有一個好處,那就是你可以直接使用 iCloud 同步到你的所有行動裝置上,例如 iPhone 或是 iPad ;當然你也可以把在通勤時繪製的 “心智圖” 同步到你的 “iMac” 桌機或是 ”MacBook Pro” 筆記型電腦上。

另外,如果有需要…你也可以將 iThoughtsX 繪製的 “心智圖” 透過 E-Mail 的方式傳送給你的同事或是朋友,iThoughtsX 會直接將該檔案轉換成 PDF 以及 文字,即使對方沒有安裝 iThoughtsX 也可以閱讀你繪製的心智圖。

Ulysses

在 Ulysses 裡你可以直接利用 # 字符號來區分標題級數、也可以直接坎入貼圖,甚至啟用 iCloud 同步資料。
在 Ulysses 裡你可以直接利用 # 字符號來區分標題級數、也可以直接坎入貼圖,甚至啟用 iCloud 同步資料。

如果時間允許的話,我通常會在撰寫網誌的前一個禮拜開始整理資料,等待繪製完成後再利用 Ulysses 來撰寫內容。

Ulysses 真的是一套非常方便好用的文字撰寫軟體,在 mrwuli.com 之前的文章中也曾經推薦過這套軟體。它的方便之處就是 “你可以直接使用快速標記語言( Multimarkdown)來進行文字排版;在不使用 HTML 的情況下,避免一些語法編輯上的錯誤。

不只是這樣,現在 Ulysses 也支援 WordPress 同步撰寫模式。只要在 Ulysses 軟體中登入你的 WordPress ,就可以將在 Ulysses 上撰寫完的文章,直接上傳到 WordPress 中;包含所有圖文格式以及資料,都會和你在 Ulysses 中所編排的相同。

另外、如果你會一些簡單的 Css 編碼的話,還可以將網站中的 CSS 編碼,直接寫入到 Ulysses 中的 Style 模式中;如此一來就可以在離線時 ”預覽文章在網站中的排版以及樣貌“!非常方便。

Affinity Designer

Affinity Designer 是一套非常好用的向量繪圖軟體、幾乎可以取代 illustrator 在所有網頁製作、與數位編排的工作需求中(雖然早期只有 Mac 版本、但現在也出了 Windows 版本)。
Affinity Designer 是一套非常好用的向量繪圖軟體、幾乎可以取代 illustrator 在所有網頁製作、與數位編排的工作需求中(雖然早期只有 Mac 版本、但現在也出了 Windows 版本)。

過去 Affinity Designer 經常都是被我拿來做一般的上字啊..製作網誌插圖或是坎入 Logo 等工作;但近期我開始用它來統一網誌內的圖文大小比例、讓網誌文章內的編排看起來在清爽一點(雖然有時候還是會偷懶用舊圖)。

目前的做法是將檔案版面設定在 1080 x 534 ,再將每一張圖以圖層的方式個別編輯、並依造文章插圖順序給予編號;這樣一來輸出圖片的時候就會自動依造編號排列,在重新命名時檔案也不會亂掉(例如:mac-info-o1.png、mac-info-o2.png .. 依序命名)。

最後再將從新命名好的圖檔直接拖移到 Ulysses 中進行編排、Key 上圖片描述與連結。

Coda

Coda 是一套介面設計精美的 “編碼軟體” ,你可使用它來製作網頁、上傳 FTP 或是下載額外的 Plugin 加強軟體功能。(圖片為日文版說明書)
Coda 是一套介面設計精美的 “編碼軟體” ,你可使用它來製作網頁、上傳 FTP 或是下載額外的 Plugin 加強軟體功能。(圖片為日文版說明書)

Coda 是一套程式撰寫軟體,而我現在則用它來取代 Adobe 的 Dreamweaver ,進行一些基本的網頁 CSS 編碼、以及圖床的 FTP 上傳工作。

個人覺得 Coda 不論在介面的設計或是使用上都還算是非常優秀的軟體,價格也不貴:只要 $99 美金 :大約新台幣 NT 3,000 左右。

基於考量 ”自己真正會用到的 Dreamweaver 功能並不多“;所以相較於整套 Adobe 的長期租用費用,買斷整套 Coda 軟體似乎划算許多。

但其實真正好用划算的編碼軟體也有很多,也不一定要使用 Coda ;像 Sublime Text 、ATOM、Brackets 都是非常不錯的免費程式撰寫軟體!

對了!你還可以將 Ulysses 中編輯好的文字直接用 Coda 開啟編輯唷;如果你和我一樣,有另外使用一個圖床的話...利用 Coda 來統一修改連結、編碼,還是比在 WordPress 或是 Ulysses 中來得方便許多。
對了!你還可以將 Ulysses 中編輯好的文字直接用 Coda 開啟編輯唷;如果你和我一樣,有另外使用一個圖床的話…利用 Coda 來統一修改連結、編碼,還是比在 WordPress 或是 Ulysses 中來得方便許多。

感謝你的閱讀與分享

以上就是近幾個禮拜的網誌作業流程與主力軟體介紹,如果你也想試試看上述的這些軟體的話,都可以先下載試用版本的安裝檔來研究一下~

覺得軟體好用的話也請購買正版軟體,以實際行動來支持好的開發廠商,好讓我們的未來能有更好的軟體功能,進行更有效率的工作!

再次感謝你的閱讀與分享~
本篇所提及的軟體,在下方都有整理好連結,如有需要請自行點擊服用!

相關連結

Affinity 系列軟體官方網站介紹

免費下載 Affinity Designer Windows beta 版本

ATOM 官方網站介紹 & 軟體安裝檔下載

Brackets 官方網站介紹 & 軟體安裝檔按下載

iThoughtsX 官方網站介紹/p>

Ulysses 官方網站介紹

Coda 官方網站介紹

分享:如何讓 iBook 內的 PDF 檔案自動同步到 iPhone 與 iPad 中?

分享:如何讓 iBook 內的 PDF 檔案自動同步到 iPhone 與 iPad 中?

最近更新了 EI OS 系統才發現 iBook已經開始支援 iCloud 同步了! 現在你不需要連接iTunes ,你也可以直接利用雲端同步你在 iBook 裡面的的PDF檔唷~

更新到 Mac OS X EI Capitan 後,iBook 就可以與 iCloud 同步了!
更新到 Mac OS X EI Capitan 後,iBook 就可以與 iCloud 同步了!

但雖然 iBook 說可以同步,但是如果沒有開啟一些設定的話,還是無法在 iPhone 或是 iPad 中看到 iBook 內的 PDF 檔案。

以下就簡單分享一下,關於 iCloud 與 iBook 自動同步的幾個步驟:

Mac 端設定

首先請更改 Mac 電腦 [系統偏好設定]中的 iCloud Drive [選項..]內容。

開啟 Mac 中的[系統偏好設定],然後點擊 iCloud 進入管理頁面。快速傳送門:請在 FInder 中按下快捷鍵:command + shift + G 然後再輸入欄中貼上 “/應用程式”後,點擊[前往]就可以看到 [系統偏好設定]了。
開啟 Mac 中的[系統偏好設定],然後點擊 iCloud 進入管理頁面。快速傳送門:請在 FInder 中按下快捷鍵:command + shift + G 然後再輸入欄中貼上 “/應用程式”後,點擊[前往]就可以看到 [系統偏好設定]了。
進入 iCloud Drive 管理頁面後,請點擊勾選 iBook 同步;勾選後再點擊 [完成]即可。
進入 iCloud Drive 管理頁面後,請點擊勾選 iBook 同步;勾選後再點擊 [完成]即可。

iPhone 與 iPad 端設定

想要讓 iBook 自動同步,除了 Mac 的[系統偏好設定]要更動外, iPhone 與 iPad 的設定也要跟著更改才行!

打開手機中的[設定],然後點擊進入 [iBooks ]
打開手機中的[設定],然後點擊進入 [iBooks ]
檢查一下看看你的[同步書籤和筆記]&[同步藏書]兩個選項是否有開啟。
檢查一下看看你的[同步書籤和筆記]&[同步藏書]兩個選項是否有開啟。
接著請進入 [設定]>[iCloud]
接著請進入 [設定]>[iCloud]
然後勾選 [iCloud Drive]中的 iBooks 選項。
然後勾選 [iCloud Drive]中的 iBooks 選項。

完成上述步驟後,就可以在你的手機或是平板中看到電腦裡的 PDF 檔案了!

完成上述步棸後應該就可以在 iPhone 或是 iPad 中看到電腦裡的 PDF 檔案了。
完成上述步棸後應該就可以在 iPhone 或是 iPad 中看到電腦裡的 PDF 檔案了。

另一種同步到 iPhone 、iPad 的方法

同步後有個小缺點..那就是 iCloud 可以用的空間自然就會越來越少了!(一切都是 Apple 都陰謀拉~~)

如果你電腦內的 PDF 檔案非常的大量的話,還有另一個方法…那就是 “把 PDF 設定成上傳到 Amazon 的雲端服務”。

方法很簡單,只要將 “~/Library/Containers/com.apple.BKAgentService/Data/Documents/iBooks” 整個同步上傳到 Amazon 的雲端硬碟就可以了!

總結

不管是哪一種方法,都有利弊… 用 iCloud 的話,只要在有網路的地方就會自動同步,但缺點是隨著同步的檔案越來越多時,iCloud 的也必須面臨升級的最後手段了; 而 Amazon 雲端硬碟的話,目前還沒有自動同步的功能,如果真得要每次都手動上傳的話..還真的有點麻煩。

以上,如果你有更棒的方法的話,請跟我分享!

相關連結

iBook 初解析:用 Mac 整理 PDF 你可以有更聰明的辦法!
5 大雲端硬碟服務、價格總整理

懶人包:5 大雲端硬碟服務、價格總整理

懶人包:5 大雲端硬碟服務、價格總整理

打從把 2011 年版的 MacBook Pro 換成 2015 年版的 Mac 筆電後,本機硬碟的空間就受到更多的限制;在無法擴充的情況下,除了加購 “創建” 的 “擴充記憶卡” 外,大概就只好倚靠外接硬碟了吧? (現在想想…雖然換的新的 MacBook 輕了一些,但如果再多加一顆外接硬碟的話…其實還是一樣重啊啊啊啊啊~~)

雖然外接硬碟可以解決空間不足上的問題,一旦忘記帶出門…那可就麻煩了!如果又剛好把工作需要用的專案檔案放在外接硬碟中的話…除了當場 GG 外、應該就是攔 UBER 衝回家拿硬碟了吧?

為了解決得這樣的困擾,我最近一直在找尋可以替代的方案。而這個解決方案必須具備以下幾個要素:

  • 安全性高
  • 可以自動備份
  • 可以節省本機硬碟的空間
  • 不用擔心檔案遺失或是忘記帶出門

 

使用雲端硬碟

我想…如果要滿足節省本機硬碟空間的這個要素…除了使用外接硬碟外,大概就使剩下 “雲端硬碟” 這個選項了吧? 於是本人開始比較各家雲端硬碟的服務,比較他們的介面、費用、以及功能與安全性。

以下是個人覺得比較可以信任的雲端硬碟廠商

  • DropBox
  • Google Drive
  • OneDrive
  • iCloud
  • Amazon

DropBox

DropBox 是我一直有在使用的雲端運碟,不論是自用、還是在共享檔案時都很方便;安裝 Mac 桌機軟體後,只要在有網路的地方,就可以直接同步到電腦內!完全不需要額外的操作;就連網頁版的使用介面也是我喜歡的風格~

下載 Mac 桌機(筆電)版 App 後可以透過設定把 DropBox 資料夾設定在外接硬碟中;如此一來只要接上外接硬碟、連上網路後,後就可以直接把外接硬碟的資料備份到雲端上。(將同步資料夾設在外接硬碟的目的:是為了節省本機硬碟的空間。)

缺點:雲端資料夾不能設定成整顆外接硬碟、也不能單獨指定需要同步的資料夾,必須再另外在外接硬碟中另設一個 DropBox 資料夾;而且開機時如果沒有連接外接硬碟會發生同步錯誤。(但連接硬碟後只要重新登入即可回覆設定)

空間與服務計費(DropBox)

在使用空間上….一般帳戶可以擁有 2GB 的免費空間,而付費帳戶則是以 1 TB / 一個月 $9.99 美元計費。

Google Drive

雖然平時也有在使用 Google 的雲端硬碟服務,但個人不太喜歡它的網頁版管理介面…不論在設計、還是操作邏輯上都不太討我歡心…。

下載 Mac 桌機(筆電)版 App 後,和 DropBox 一樣可以將同步的資料設定在外接硬碟中,缺點是實際內容會佔用到其他 Google 雲端服務的空間(例如信箱..)。

空間與服務計費(Google)

一般用戶: 15GB (但與 Gmail 信箱空間一同計算)

付費用戶:100 GB ( $1.99 美元 / 月 ) or 1 TB ( $9.99 美元 / 月 ) 計費

 

OneDrive

Windows 自從新增了 Outlook 的信箱服務後,在介面上的設計就比以前看起來舒服許多,增加了不少讓我想使用它的意願;不過在使用的頻度上依舊沒有 Google 的比例來得高。但由於 OneDrive 的 Mac App 無法另行設定在外接硬碟中同步,所以安裝不久後很快的就…放棄!無法使用它來當作外接硬碟的雲端備份。

空間與服務計費(OneDrive)

一般用戶 :5 GB 免費

付費用戶 :1024 GB / 1T (年繳 NT $ 2,190 / 月繳 NT $219)

 

iCloud Drive

iCloud 是所有 Apple 用戶都一定會使用到的雲端服務。在介面的設計上也是滿清爽的,檔案會直接同步到電腦,同時也可以直接在 Finder 中找到它的資料夾位置。(完全不需要額外安裝 App)

缺點:iCloud Drive 的似乎無法移到外接硬碟,也就是說 iCloud 的資料越多,就等於佔用了越多的主機硬碟的空間;所以還是…放棄~

空間與服務計費(Apple iCloud)

免費用戶:5 GB

50 GB:NT$30

200 GB:NT$90

1 TB:NT$300

 

Amazon

Amazon 所有的服務與商品中…我最常用的就是 Kindle 和 “電子書” 了!不過關於它有雲端硬碟服務這件事…倒是最近才知道。使用方法很簡單,只要註冊 Amazon 的帳號就可以使用了。網頁版的管理介面看起來還滿清爽的,是會吸引我去試試看的設計!

在單機版的 App 中 Amazon 和 DropBox 與 Google 最大的不同處在於 “不需要設定一個固定的資料夾,你可以自行指定需要上傳的資料,只要有連線網路就可以直自動同步“

空間與服務計費

一般用戶 5 GB 免費

Amazon JP :1000 GB  / ¥40,000 /年

Amazon USA :Unlimited Everything / 無限空間( 年繳 59.99 美元 / 可免費試用三個月 )

私心結語

根據這一番收集與整理下來後…應該還是會先試用三個月的 Amazon (美國)雲端服務來同步外接硬碟資料;然後繼續使用 DropBox 來當作與夥伴、學生們之間的共享雲端資源空間。

各位呢?有什麼想法嗎~還是有什麼更方便的方法與服務,都歡迎留言與我分享唷!

註:上述資訊都是寫作當下所搜集的資料,實際相關服務內容與費用換迎點擊下方連結查閱詳細內容。

相關連結

更多 Google 收費方案介紹

更多 OneDrive 收費方案介紹

更多 DropBox 收費方案介紹

更多 iCloud 收費方案介紹

Amazon 日本雲端收費介紹

Amazon 美國雲端收費介紹

 

為什麼一接上外接鍵盤,我的觸控板失效了?

為什麼一接上外接鍵盤,我的觸控板失效了?

最近因為重新安裝 Mac 才發現『誒? 我的觸控板壞掉了嗎?為什麼怎麼滑都沒有作用!』甚至還把電腦關機,把 MacBookPro 反過來拍拍,想說是不是內部有零件卡住了@@a ..{才剛買沒多久噎!不會就這樣壞了吧?)

 

 

mac-setup

觸控板失效應變辦法

經過一番折騰才發現!原來是只要接上外接滑鼠或是繪圖筆,觸控板就會自動失效(無視する)。解除此設定的方法必須先進入在 【 系統偏好設定 】  中的 【 輔助使用 】 設定。

 

mac-setup2

接著進入 【滑鼠與觸控板設定中】 後把 “使用滑鼠或無線觸控式軌跡版時忽略內建控制式軌跡板” 勾選取消即可;但如果你不希望外接 “繪圖筆” 或是 “滑鼠” 打字時誤觸軌跡板,也可以勾選此選項關閉它。