網站 - Mr.Wuli

網址、伺服器是什麼？架設網站之前..你需要準備的前置作業有哪些?

by Mr.Wuli | 8 月 15, 2022 | 網站經營 | 0 comments

Hello 我是 Wuli 今天這集想要跟大家分享的是怎麼樣開始製作一個網站。之前我們有在前幾集有講到說 “當你需要製作一個網站時，要怎麼樣去準備製作網站之前的調查工作“。如果有興趣的人可以去聽我們之前的 Podcast 集數！

接下來我們這集內容要講的是 “當你準備好那些資料以後，你要怎麼開始？或是你會需要什麼樣的工具？” 首先我要跟你分享的是我這些年一直在使用的一個網頁製作工具 “wordpress” 它是一個開放的協作平台，可以幫面你處理網頁後端的一些資料處理。這是一個非常方便的工具，因為在過去網站的前端跟後端是必須分開起設計師處理的一項工作，而 WordPress 幫助我們可以把設計網站以及後端資料整理的工作變得更加輕鬆簡單了。

除了要取得 WordPress 這個後台協作工具以外呢，您還會需要註冊一個網址。這個網址呢需要透過網域代購商進行幫您購買以及管理。你可以使用國內的網域代購商例如像是智邦或是遠振，也可以使用國外的網域代購商.. 例如 Google 。

購買的流程每家服務廠商都不太一樣。但在購買前你需要先想好你想要的網址，這就像是個門牌，一個好記的網址可以方便你的用戶更快的找到你！至於網址購買的部分如果大家有興趣的話我之後會再拍一個特輯來講網址購買的方法以及流程。

如果說網址是你店家門牌的話，那麼接下來的伺服器就像是你的店內倉庫！協助你囤放商品以及公司內的大小資料。而是伺服器的取得呢.. 你也可以透過租用的方式來取得！費用也十分便宜，每年只要花個幾千塊就可以擁有一個不錯的是伺服器空間。

如果你想要節省一些麻煩，通常你可以請你的網頁設計師幫您處理以上的種種流程。但這裡我想要跟大家分享的是當你想要自己的架設一個網站的話，要怎麼搞定這些事情。

最簡單的方法就是去遠振選擇 WordPress 的方案，如此一來他就會給你一個伺服器並且幫你安裝好 WordPress 然後你就可以開始設計網站了。網址的部分建議可以在 Google 購買！價格便宜、管理也方便；唯一的缺點就是目前不支援 .tw 結尾的網頁。

當你購買了網址以及租了要安裝 WordPress 的空間後，你就可以開始架設自己的網站了。過去我會在伺服器裡面架設好 WordPress 後開始設計網站，在網站裡面攥寫語法製作網站。但這樣的方法非常沒有效率…所以我後來開始使用一套叫在 Divi 的網站設計外掛。

它有一些很方便的功能可以讓網頁設計人員可以採用所見即所得的方式進行網頁的設計，但是也有一些缺點就是非常耗損瀏覽器的運算資源。關於這點就看每個人怎麼取捨了…花更多時間研究程式碼？還是多花點錢租用更快的伺服器？

感謝您的閱讀與分享

以上就是今天要跟大家分享的 “調查網站設計需求“ 以後呢，你需要處理的一些前置工作。如果你對於這樣的內容有興趣也可以在下方留言。讓我知道你想要了解哪方面的細部細節，未來在有空的時候我會再寫文章跟大家分享。感謝您的閱讀，我是 Wuli 我們下篇文章見！

Affinity Designer 的遮罩功能介紹

by Mr.Wuli | 7 月 20, 2017 | 網站經營, 軟體推薦 | 0 comments

HELLO 大家好我今天想要跟大家介紹一下如何用這一套 Affinity Designer 來製作妳的部落格的網誌封面圖片。在早期呢..我使用的是一套 aodobe 的 ‎Illustrator .. 那後來呢 ”因為 adobe 改成月費制的.. ㄜ..一個月就要繳１千多塊；所以一年下來你就要繳１萬多塊，如果你沒有..光靠設計接案的話..這樣子的資金投入會比較沒有那麼高的投資報酬率。

所以後來我就找到這一套軟體然後它只要台幣 1490 塊你就可以永久使用、並且更新。剛開始的時候它只有在 Mac 的電腦上可以使用；之後呢…它也開發了 Windows 的版本所以你只要花１４９０塊就可以用這套非常高階的高階的軟體來製作網站上的圖片。

在我的這個網站上有介紹關於 Mac 好用的一些軟體、以及一些我自己在使用的一些工具。在我網站上、網誌上呢.. 你可以看到有很多的圖片，這些圖片呢，都是我使用 Affinity Designer 這套軟體來製作的。那我今天想要分享的如何讓你的照片能夠呈現在 iphone 或著是 Mac 電腦裡面，使用 Affinity Designer 這套軟體製作這樣子的圖片的時候其實非常非常的簡單。

製作流程

Step.1

首先你要有一個你的載具..比如說是相框拉.. 或著是電腦啊、手機之類等等。然後你就可以在這個圖片上面呢，用矩形工具畫一個方匡繪出一個區域，再拉一張圖片到你的工作視窗中。

Step.2

接著你可以看到在右邊的圖層概念裡面呢，這張照片在這方框的上層。然後我們只要透過滑鼠拖移的方式呢，將相片拉到方框的下層的時候，就可以看到它已經跑到那個方匡的後面了。這是一個快速的遮罩的應用！

附註：
那如果你想要調整這方框的大小的話，你可以再把這長方形的這個方框旁邊的三角形，把它點開..然後選擇長方形的這個圖層，你就可以去調整，這個方匡的內容大小。如此一來，你就可以很快的完成一個將照片放到 iphone 或著是 Mac 電腦的一張封面縮圖了。

是不是非常簡單？

影片介紹：

2017 的網站更新計畫

by Mr.Wuli | 2 月 4, 2017 | 網站經營 | 4 comments

2017 年打算不時抽空更新一下網站，畢竟經過了 2 年，在語法的成熟度…應該有比之前進步吧?

在目前管理兩個網站中，一個是以音樂為主的 LiSWEi.com 、另一個則是為了進行實驗而架設的 mrwuli.com…；一開始其實也不知道該在這裡應該寫些什麼？所以就以 Mac 的一些使用心得開始整理，但後來想想：「其實 Mac 的使用者應該也都蠻精明的，可能不太需要多相同的教學內容吧？」

既然如此…還是寫些自己的東西吧？

關於 2017 的網站更新計畫

最近實在是太久沒有接觸設計相關的資訊了，為了督處自己能夠時時保持網站的更新進度，還是訂個新年計畫來趕鴨子上架吧！

網站選單修正

目前 LiSWEi.com 的網站除了主視覺還算滿意之外… 其實還有很多地方的瀏覽方式與設計都需要做一些調整；不管是 menu 的內容、或是 Blog 的排版、以及陳列方式..等等，都有許多進度的空間。

關於網站選單的排列順序，我想應該會有一些差異，什麼選單應該放在前面的順位，什麼選單應該放在最後？應該還是會影響到網站的 SEO ；而且關於選單該不該分層級、或是該怎麼設計選單的動線應該也是一個需要思考的重點。

首頁

在 LiSWEi.com 的首頁動線部分，為了呈現簡單明瞭的網站內容，將首頁內容分成三個大重點【服務內容】、【更新內容】與【聯絡方式】。

當初會這樣設計，是為了讓第一次來的人可以在點下【首頁】選單後，就能快速的瞭解到這個網站的主題、以及最新消息。

因為我認為..如果一個網站的內容（選單）分類的很好的話，其實首頁應該是越簡單越好；總之… 把自己當作使用者，想想自己在瀏覽別人網站時最討厭遇到什麼情況？而不是一股腦的想說想要給別人看什麼。如果能做到時時替使用者著想，應該網站也會慢慢受到更多人喜愛吧～

電子報頁面

關於訂閱的頁面的字體排版以及內容呈現其實…還蠻糟的；誰叫那時候還不懂怎麼寫語法，只能自己修修改改亂改語法..最後也就將將就就了????

服務頁面

早期剛接觸 PhotoShop 的時候還不是很懂它功能，幾乎都是靠著 Google 的功力使用購買來的套版來做修改。

在課程介紹的部分.. 其實有點偷懶（少做了一頁）！現在如果要重新設計的話，應該會在新增一頁【課程介紹】來做分流頁面。

之前有個做設計的朋友跟我說 … 你的 iCON 也未免太牽強了吧？（但我想…網站的內容還是比較重要吧．．．所以一擱著就幾年過去了????）

如果有時間的話… 應該也要自己畫個 icon，畢竟老是使用現成的素材難免有些 “圖不達意”！

軟體攻略（教學內容整理）

認真開始架設網站應該是在 2013 左右，然後差不多到了 2015 年中後，才開始陸陸續續的整理網誌內的教學（根據軟體的類別來做簡單的分類）；但卻因為抽不出太多時間來設計，只好先簡單的用【頁籤】方式的進行分類。

不過..這麼做的話有一個缺點；那就是很有可以會讓部分因為不知道【頁籤】可以點擊的人，因而錯過了【頁籤】內的資訊。

網誌文章列表

網誌文章列表應該是目前最滿意的編排了吧！熱門文章以縮圖的方式呈現、最新文章則以【標題】＋【概述】的方式來分別層級。

我選擇把較多人感興趣的文章放在左邊、最新更新的文章則是方在右邊；透過閱讀時的視覺動線來增加文章的點閱率。

聯絡頁面

在聯絡頁面的設計上，除了簡單的描述一下聯絡方式以外，還有基本的聯絡表單提供線上寄送訊息。

除了提供線上表單供訪客來信外，也在左下角附上 FB 的即時通訊，提供線上簡短的線上諮詢。缺點是… 表單送出按鈕的大小與表單格子不一致????

網站修改實行方案

為了升級目前的網頁內容，我先把另外架設了一個資料庫，然後將現有的網站內容都倒過去；打算等上述所有的目標都達成後再一次將網站更新。

其實在過去也沒有這樣做過，希望這次能夠一次成功；畢竟這樣一來可以拉長修改的時間，也不怕再更改的過程中，讓原有的網站服務受到影響。

另外也打算趁著這段時間補足一下載網路行銷的一些資訊，翻一下大學同學給我的原文書.. （希望可以看得完????）

總之歡迎喜歡網頁設計的朋友留言討論～～～

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

by Mr.Wuli | 8 月 29, 2016 | 軟體推薦 | 0 comments

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

近期使用的主力軟體

iThoughtsX

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

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

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

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

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

Ulysses

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

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

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

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

Affinity Designer

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

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

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

Coda

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

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

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

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

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

感謝你的閱讀與分享

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

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

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

經驗分享：不同版本的 Kindle 到底差別在哪裡？

by Mr.Wuli | 8 月 14, 2016 | 閱讀學習, 隨手雜記 | 2 comments

因為經常看日文書籍的的關係，最近又敗了一台新的 Kindle PaperWhite||| 這篇文章主要的內容是想分享一下，自己在使用過 Kindle 一年後的經驗，以及比較手邊日版 Kindle 與美版 Kindle PaperWhite 的差異性～

為什麼書蟲們都需要一台 Kindle？

最近又買了一台美版的 Kindle PaperWhite ，順便分享一下自己一年多來的使用心得。

輕巧方便攜帶

一開始會想要一台 Kindle 是因為自己經常閱讀日文書籍的緣故，想說有了 Kindle 的話..就算沒辦法經常去日本逛書店、也可以在 Amazon 上購買到自己喜歡的相關書籍！除了方便購買外、價格上也便宜很多；買過日本原文書的人應該都知道…在日本的專業書籍，動不動就台幣 1,000 起跳！雖然在排版以及封面設計上都很精美、嚴格說起來也不算貴…但出國要帶一堆書回來也不是普通的重啊！

而且如果是專業的 “音樂工具書”、或是 “設計相關書籍” 通常都很厚重；如果能把他們全都裝在 Kindle 裡的話，每天出門前就不必煩惱今天要看哪一本了！也可以避免再遇到 “背了一本厚重的書出門、卻沒有時間看的窘境..”（哥只是單純健身)

Kindle 的大小其實就跟文庫本差不多大，大約是 A6 的尺寸，拿在手裡其實不會太大；臨時要收起來的話，也可以直接放到牛仔褲的口袋裡。

一台 Kindle 的重量幾乎不到 200g ，最初階版的 Kindle 比 iPhone 還輕，即使拿在手上好一段時間也不會感到手酸、不適，每天放在包包裡也幾乎感覺不到它的存在！

長期閱讀不傷眼

喜歡閱讀的人應該都會有經常覺得眼睛疲勞的感覺吧？尤其是長期使用平板、電腦的人應該更有感觸；因為螢幕光源的關係，就算配了藍光鏡片，其實還是蠻傷眼睛的…

這張照片是剛拿到 Kindle 還沒開機時的畫面，沒有觸碰的話，看起來真的很像再生紙的質感？

拿到第一台 Kindle 的時候，當下一個感觸是…“看起來真的蠻舒服的耶”；不但不會有反光、也沒有刺激的光源；即使長期閱讀一兩個小時下來，也不會像看平板或是電腦那樣感到強烈的不適感。

在不同的 Kindle 版本中到底有什麼差異？

照片左邊的是最近新購買的黑色美版 Kindle PaperWhite ｜右邊的則是先前委託親戚購買的白色日版 Kindle。

版本的差異請看下圖：

此圖是針對 Kindle 的各種版本做一個簡單的分析，同時還有一些個人在使用上的一些心得與觀察，提供給大家參考～

在 Kindle 的四個版本中，個人覺得差異最大的部分…應該還是在 LED 的輔助光源吧？首次購買的基本版 Kindle 雖然最輕，但是沒有輔助光源，晚上在戶外閱讀時眼睛會有點吃力…；如果你是閱讀慾望超強的書蟲的話，建議還是買 Kindle Paperwhite 的版本，這樣即使半夜走在路上沒有路燈，也可以舒適的閱讀。

Kindle PaperWhite 不只是在解析度上比之前的 Kindle 來得高一些，在想顯示上也比較不會有殘影；最重要的是有 LED 輔助光源！

因為 Kindle Paperwhite 的 LED 輔助光源與一般的手機、平板不同，雖然一樣會有光源，但感覺不會對眼睛帶來太大的負擔；即使是在有輔助光源的情況下，Kindle 頂多也只是好像書本照到檯燈的亮度而已～

至於 Kindle Voyage 以上高階版的翻頁按鈕…到是沒有那麼吸引我；因為在 Kindle 基礎版的操作經驗中，除了在 “畫重點” 時 Kindle 的反應速度會讓人稍微惱怒以外…其他基本的滑動翻頁、或是點按畫面翻頁時，反應倒是還蠻快的～

美版的 Kindle PaperWhite 在質感上… 比 Kindle 基礎版再扎實一點、外觀以及觸感上也比較細緻！(上圖為美版盒裝內的所有內容物)

除了 Amazon 的電子書外的應用

Kindle 除了可以閱讀在 Amazon 上購買的電子書外、你也可以把 PDF 以及 Instapaper 的文章放到 Kindle 裝置中閱讀！

在 Kindler 中閱讀 PDF 檔案

在閱讀 PDF 的部分，Kindle 的表現有點弱…。因為一般的 PDF 在 Kindle 中只能滿版閱讀、以及局部放大；但偏偏 Kindle 在縮放畫面的操作反應很慢，所以你如果要在 Kindle 中愈讀 PDF 的話要有點耐性，等待他反應過來…。

如果你把 PDF 放到 Kindle 中閱讀的話，感覺大概就是像上圖這樣；字體會比較小，然後如果要放大或是調整畫面位置的話，速度會比較慢一點點..

與 Instapaper 合體！稍後閱讀不間斷～

但是！如果是網路上的文章的話～ Kindle 可已結合 Instapaper 使用，變成你的隨身學習利器！不但可以設定自動同步稍後閱讀清單，還可以即時將你查詢過的單字列入 “單字帳” （學習單字列表），方便你在通勤、等車的時候還可以順便背單字！

在 Instapaper 中輸入你的 Kindle 信箱後，就可以定期在 Kindle 中收到 Instapaper 的稍後閱讀文章。

Kindle 的免費字典與單字學習功能

Kindle 還有一個好處就是：“當你購買了 Kindle 之後，就可以直接在選單中下載 5本免費的英、日文電子字典”。

購買 Kindle 後可以直接下載免費的電子祭典！日文的部分是附贈 ”大辞泉”。

當你在閱讀 Amazon 購買的電子書或是 Instapaper 的網路文章時，只要觸碰螢幕選取詞彙，Kindle 就會自動幫你查詢單字語意、或是透過 Wi-fi 查詢維基百科看看有沒有相關資料說明、甚至是直接網路連線取得線上翻譯！

除了支援內建的字典與線上翻譯、還有維基百科外、Kindle 還有內建單字學習的功能！

而且、所有你在閱讀中查詢過的單字，都會自動加入 Kindle 的單字學習列表中，你可以在閒暇之餘打開單字本還複習不熟悉的單字！

所有 Kindle 中查過的單字，都會自動加入單字列表；在閱讀時還會以字卡的方式顯示、同時可以查詢該單字是在哪篇文章中的哪一句話，藉此來加強記憶！

Kindle 的試閱功能

不管你有沒有實體的 Kindle ，現在不論是手機、平板、或是 Mac、Windows PC 都可以下載 Kindle 的 App 來購買、試閱 Amazon 上的所有電子書籍。

雖然目前還沒有台灣的書籍可以購買，但是你也可以自行去一些較大的電子書籍網站，購買電子書後再將檔案放到 Kindle 中閱讀。

不同國家販賣的 Kindle 有什麼不同？

目前手邊的兩台 Kindle 剛好是 1台美版（Kindle Paperwhite）、 1台日版（Kindle），除了日本有附紙本說明書外…包裝內容基本上沒有什麼太大的差異。

照片左邊是美版的 Kindle ，盒子裡面除了 Kindle 以外還有一張黑色卡片說明；右邊的日版 Kindle 還有附贈一本各國語系的基本操作說明手冊。

在 Kindle 選單語言的部分，在第一次開機後就可以選則你習慣的選單語言，目前至少有：Deutsch、English、Espanyol、Francois、Italiano、日本語、Nederlands…等語言選項。

初次開啟 Kindle 時就會有選取語系的步驟，即使外語能力不好的人，也可以先用簡體中文撐一下～

註：即使沒有紙本說明書也沒有關係，因為 Kindle 在設定好語言後，也可以下載電子的說明書！

使用約一年後的心得

雖然 Kindle Paperwhite 價格稍微高了一點；比起 Kindle 來說 Paperwhite 在夜間閱讀時還是比較便利！

另外，由於 Kindle 的觸控反應速度沒有平板來得敏捷、像是 PDF 這類的檔案還是在平板或是電腦上閱讀會比較方便一些；不然光是在那邊調整閱讀範圍就會讓人肝火上升…。

相較起 PDF 檔案；Instapaper 的稍後閱讀就強大許多！目前的使用習慣還是把所有想看的文章直接加到 Instapaper 的閱讀清單為主，等到它們自動同步到 Kindle 後再來閱讀。

如果你有有畫重點的習慣，也配合 Kindle 的 highlight 功能來整理重點，將文章中比較重要的部分加到 ”マイクリップ”（剪貼簿）；或是將喜歡的字句及時分享到 Facebook 或 Twitter 、甚至是結合 iThoughtsX 或是 Evernote 等軟體來做重點整理。