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

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

那就 … 下次見。

 

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

關於我在那些年設計網頁的心得

大約在 2014 年的時候,曾經和朋友一起為客戶設計網頁;但後來因為自己的時間分配與未來規劃的關係,決定暫停藉洽網頁企劃與設計的工作..。但最近因為該網頁的網址與伺服器都要到期的.. 打算寫一篇關於這個網站當初的設計構想、順便做個記錄。

關於網頁的設計念

當初在製作這個網頁時,我個人主要負責的是分析、文案以及網站的 Coding 工作。由於一開始我們就打算以一條龍的方式幫客戶設計網站,包含網頁製作時會用到的商品攝影的規劃、文案、視覺設計、甚至是品牌的 Logo 與 店面招牌、商品包裝.. 等等;所以最後設定以 2人團隊的形象來製作網頁。

關於網頁的文案

只有 2 個人的團隊到底可以做到什麼程度呢?為了要傳達這點,在討論文案時我們想了很多.. (究竟我們可以做到哪些工作、擁有什麼優勢?)

首頁文案:

先分析、在規劃

有效行銷、簡單管理、商品更新輕鬆搞定

我們認為在服務上跟一般平價網站設計不同的地方在於 ”BazzDesign 會與業主進行訪談、瞭解客戶的商品、以及分析該客戶在商品上的優勢、劣勢、機會、威脅..“、”將品牌的商品特性與品牌個性結合到網頁設計中“,我們希望做出來的不只是一個漂亮的網頁、同時也能夠是個方便閱讀,讓消費者可以快速瞭解到商品與品牌優勢的網站。

在後台的規劃上,會先考慮客戶實際的需求,在經過討潤後,設計比較好簡單的的商品管理流程。減少客戶學習操作後台的時間成本、已經避免一些過於複雜且可能不需要的外掛功能。

帶來更多價值

凡事全力以赴、創造更多可能

我想很多打算創業人或是老闆都希望設計網站的費用越低越好,最好是便宜、快、又美觀好用!但.. 聰明人都知道這是不可能的阿~( 羊毛出在羊身上;一分錢一分貨 )

如果想要一個真正符合業主需求的網站,沒有充分的溝通、或是瞭解商品的特性與優劣,要如何能設計出一個有靈魂的網站呢?( 說靈魂也許有點誇張.. 但如果經歷過平價的網站設計、或是自己買過網頁版型來修改的經驗的話,我想就應該能夠理解了。)

所以好的服務重點應該放在價值、而不是價格;如果只在意價格那永遠會有更便宜的選擇。( 一隻 10 元錢的筆,和一隻 1,000 元以上的筆有差嗎? 如果覺得沒差的話,那麼就讓對方買 10 元的筆吧,因為.. 他要的只是 “有就好” ;而不是 ”值得“)

網站代表企業的臉

有趣不等於有效、便宜不等於有價值 傾聽、調查、分析是我們為你帶來更多的自信!

就如同上述所寫的 ”便宜不等於有價值“ 、 ”有趣不等於有效“ 等同 ”美觀不一定實用“ ;一個美觀的網站,如果操作、閱讀起來非常不便,無法讓瀏覽者可以快速的找到他要的答案,那就等同 ”一個好笑的廣告不一定會提高商品銷售“ 的道理是一樣的。( 如果你想知道為什麼廣告 ”有趣不等於有效“ 的話,可以搜尋關鍵字:”David龔“ 、 ”換位思考“)

沒有經過分析就直接製作的網頁,就等同沒有寫好腳本、分鏡,就直接開拍的電影一樣;在內容品質上勢必會大打折扣。大家覺得會有片商想投入一大筆的金額在這樣的商品上嗎?

品牌、策略、行銷、設計

其實網頁製作就是包含了 ”品牌“ 、”策略“ 、”行銷“ 與 ”設計“,不管缺少了哪一項,效果都不會如預期來得好。

在現在這個什麼都在網路上搜尋的時代,網站就是消費者與你的第一個接觸點,消費者在不知道該商家(品牌)的情況下,要如何判斷該商品的可信度?( 例如:好不好用? 有沒有保障 ?)

個人覺得..一個網站要讓消費者感覺可以信賴,除了在搜尋引擎的排名外,美觀的設計也是增加消費者對商品感興趣的主要原因。

溝通、整合、執行、Coding

溝通是所以團隊形動的第一步,沒有兩好的溝通就不會有一個一致的方向,在方向不明的情況下,只會增加更多的衝突與修無謂的修正。

透過溝通的整合,能讓商品在製作時更有效的充分利用現有的資源以及時間成本,例如品牌的所要傳來的形象如果沒有確立,就直接去執行設計,可能會造成完全相反方向的結果。

一旦有了良好的溝通、整合,才能確保工作在執行時能夠更有效、精準的完成每個階段性的任務。例如 : Logo 的發想、設計的風格、企業的識別色 與 商品包裝.. 等。

當一切的資料都整合好後不但可以減少在 Coding 時的時間,同時也能快速的套用現有的資源。例如網頁在不同的行動裝置上,需要有什麼不同的功能、使用介面與消費者體驗等等的,這些設計都必須符合一開始與業主、團隊所討論的方向一致;唯有如此才能做出讓消費者與業主都滿意的網頁與服務。

未來網站的內容規劃

關於 Mr.Wuli 這個網站,是我在結束網頁設計服務的經驗後所架設的網站。一開始的動機是為了證明自己在過去幾年的經驗,是可以快速套用在現行的網路行銷世界的。

我嘗試挑選了一個很多人都在撰寫的主題,並從中找出切入點,希望能將自己的網頁內容,用最短的時間曝光在 Google 搜尋引擎的第一頁。

經過大約三個月的時間,開始發現某些網頁的內容,已經開始曝光,並且在我不常更新的狀況下還能接到關於網路業配的工作。雖然工作的內容金額並不多,但也是我預料之外的事。

如果這在看這邊文章的你,剛好也想架設一個屬於自己的網站,我非常建議你可以從 WordPress 這個後台服務開始研究。這也是我目前所使用的網頁後台系統,雖然一開始可能會有點陌生,但介面都有繁體中文,只要有心想學,懂得搜尋網路上的資料,要獨立執行也並非是一件難事。

感謝你的閱讀與分享

以上就是筆者在過去的一些網頁設計的經驗與紀錄,雖然不是這個業界的人、網頁設計也不是我主要的工作;但只要有心學習,很多事情都是可以達成的。

如果你也有興趣架設自己的網站,可以參考看看我之前整理的 “網站設計-從企劃開始” 這篇文章與 PDF。

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 官方網站介紹

如何幫你的 WordPress 網站搬到新的伺服器?(圖文解說)

如何幫你的 WordPress 網站搬到新的伺服器?(圖文解說)

事前準備篇

現在越來越多站長、小編都在使用 WordPress 在經營自己的網站或是部落格。而 WordPress 又與原本單存只有 HTML 的網站不同,不單單只有管理語法以及圖片那麼的簡單,還要需要一些關於資料庫、DNS等相關知識;所以不管是在架站或是搬動上都比傳統的 HTML 網站再來的稍微複雜一點點..

今天剛好要幫某位客戶移轉他的網站內容,所以就順便整理了這一篇筆記,除了分享給有搬家需求的人外,也當作是給自己的一份備忘筆記。

確認環境

在搬家前請確認 伺服器 與 Plug-ins 是否相容。

WordPress / Plug-ins / theme 版本

如果你的 WordPress 、 Plug-ins 是使用舊的版本的話 ,在安全權限上有可能會遇上一些問題,為了確保搬家順利,在搬家前最好先更新到最新的版本。

網域名

在搬家前請確認,網站網址的部分是否有更動(或是是否需要更動),或是新的伺服器是否可使用多網域,亦或是附掛網域等功能;因為這可能會影響到搬家中需要更動的設定。

資料夾的所在位置

在搬家前還有一件重要的事情需要確定:那就是在搬家後 [網站資料]所放置的位置是否需要更動?

例如
原本的網站資料是放在 /mrwuli/www

但新的伺服器則是放在 /mrwuli/htdocs/default

資料庫管理工具 phpMyAdmin

為了要搬運 WordPress 中的文章以及相關檔案資料,搬家前請確認新的伺服器是否有支援 phpMyAdmin 管理功能。

進行資料的備份

利用 ftp 下載網站內部的所有資料

為了讓網站能夠順利移轉,在在搬家(移轉)前記得將所以該網站中所有的 FTP 資料下載下來。(隨時記得做備份,養成好習慣)

下載資料庫資料

在你的伺服器管理後台找到 phpMyAdmin 的工具,然後點擊左件進入管理頁面。
在你的伺服器管理後台找到 phpMyAdmin 的工具,然後點擊左件進入管理頁面。

除了要下載 FTP 的網站資料外,資料庫的備份也是很重要的!FTP 與 資料庫的資料都是網站的一部分,如果你的網站本來就有使用資料庫,那麼只搬移 FTP 網站是沒有辦法順利搬家成功了。

  1. 選擇需要移轉資料的資料庫
    先選擇需要移轉的資料庫內容
    先選擇需要移轉的資料庫內容
  2. 選擇匯出資料庫
    再貴出之前請先選擇你要匯出的資料庫~
    再匯出之前請先選擇你要匯出的資料庫~
  3. 匯出前的設定
    如果你需要更細部的設定的話,請選擇自訂匯出選項。
    如果你需要更細部的設定的話,請選擇自訂匯出選項。
  4. 下載備份完成
    匯出後應該就可以在你的下載資料夾中發現 「(檔案名).sql 」的檔案。

移除附掛網域&關掉 Plugin

如果可以的話,當你要搬家之前可以先移除原本伺服器的附掛網域,或是關掉 WordPress 中的所有 Plugin ,這樣一來可以減少你在搬家後遇到亂碼或是無法附掛網域的機率。

新伺服器的設定

新增 FTP 使用者帳號

在真正 WordPress 搬家移轉之前,我們還需要一個 FTP 的使用者帳號,這樣才能夠透過 FTP 將之前備份好的網站資料上傳到 「新的伺服器」中。

(有個伺服器出租商會在你註冊服服時就自動幫你新增好 FTP 帳號)

上傳資料

將方才備份的資料上傳到新的伺服器的網站資料夾中,舉例來說:如果你是使用 “遠振” 的服務的話,可能就必須把網站資料傳送到 /public_html` 的資料夾下。

新資料庫的設定

以下說明如何在準備搬入的新伺服器中新增 “資料庫” 與 “使用者”。

新增資料庫與使用者

點擊管理 cPanel 管理後台中的 MySQL® Database Wizard 來新增新的資料庫與使用者
點擊管理 cPanel 管理後台中的 MySQL® Database Wizard 來新增新的資料庫與使用者
這這裡請輸入你要新增的資料庫名稱,建議直接輸入網址或是網址縮寫。(方便未來辨識)
這這裡請輸入你要新增的資料庫名稱,建議直接輸入網址或是網址縮寫。(方便未來辨識)
接著輸入資料庫的使用者名稱以及密碼。
接著輸入資料庫的使用者名稱以及密碼。
勾選使用者權限的「ALL PRIVILEGES」
勾選使用者權限的「ALL PRIVILEGES」
接下看如果你看到這個畫面就表示「你已經成功了~」
接下看如果你看到這個畫面就表示「你已經成功了~」

確認 WordPress 中 wp-config.php 設定

如果你是使用的 WordPress 來架構自己的網站,那麼在搬家的時候 “請記得一定要修改 WordPress 中的 wp-config.php 設定 ”。因為新舊伺服器中的 SQL 設定有可能會不一樣,所以在上傳 FTP 備份的檔案之前,記得要先把原本網站中的 wp-config.php 設定更改新的伺服器設定。

// ** MySQL 設定 – 您可以從主機服務提供商獲取相關資訊。 ** //`
/** WordPress 的資料庫名稱,請更改 “database_name_here” */
define(‘DB_NAME’, ‘請更改資料庫名稱’);
/** MySQL 資料庫使用者名稱,請更改 “username_here” */
define(‘DB_USER’, ‘請更改資料庫使用者’);
/** MySQL 資料庫密碼,請更改 “password_here” */
define(‘DB_PASSWORD’, ‘請更改資料庫密碼’);

注意:

`DB_NAME 就是先前新增的資料庫名稱
DB_USER 則是先前新增的資料庫使用者

上傳先前備份的資料庫

點擊管理 cPanel 管理後台中的 phpMyAdmin 進入管理介面
點擊管理 cPanel 管理後台中的 phpMyAdmin 進入管理介面
選擇剛新增的資料庫名稱
選擇剛新增的資料庫名稱
匯入先前備份好的資料庫內容
匯入先前備份好的資料庫內容

更改 A 紀錄 或是 DNS 設定

等所有資料都上傳確認後,我們就可以把 網域代管商的 DNS 指向到新的伺服器位置了。(記得一定要先改 DNS 還能附掛網域!)

當資料都上傳好以後再把 網域代管商 的 DNS 指向到你的伺服器商指定的位置。
當資料都上傳好以後再把 網域代管商 的 DNS 指向到你的伺服器商指定的位置。

附掛網域

如果你使用的是附掛網域的話,就要再到 伺服器商 的 cPanel 後台,執行附掛網域的動作。

在 cPanel 後來有個附掛網域的工具,左鍵點擊附掛網域後進入附掛頁面。
在 cPanel 後來有個附掛網域的工具,左鍵點擊附掛網域後進入附掛頁面。
接著就在這畫面輸入你想要附掛的網址,以及網站的指定目錄(也就是剛才 FTP 上傳的位置)
接著就在這畫面輸入你想要附掛的網址,以及網站的指定目錄(也就是剛才 FTP 上傳的位置)

搬完收工

如此一來應該就可以完成網站搬移的動作了。如果還是不行…請向高手求救吧!! 這時候有一兩個工程師朋友真的是上輩子燒好香啊~~

感謝你的閱讀與分享

以上是我自己架設網站、幫朋友以及客戶搬家的一些心得,跟各位分享一下,同時也向所有架站的工程師們致敬!(沒做過的人都以為輕鬆)請大家一定要好好的善待你的網管以及工程師,因為你以為很簡單的事情,其實是很麻煩的!該付的管理費、服務費千萬別少給啊~~

(畢竟就是我們不會的東西才需要人家的服務與專業知識啊~~)

Mac 部落客的文章撰寫流程與工具推薦

Mac 部落客的文章撰寫流程與工具推薦

以前剛開始寫網誌的時候,都是 “想到什麼寫什麼..“ ,比如說今天想寫一篇教學…就會直接登入網站寫在後台的文字編輯區域,導致常常會因為 WordPress 的語法漏洞,寫出很多問題。(像是字型跑掉..照片破格之類的..)後來開始爬文下載一些網誌撰寫軟體,嘗試離線編輯,在最後文章完成時再一併上傳內文以及圖片。

使用離線編輯軟體的小缺點

MultiMarkdown 編輯畫面

在使用離線編輯軟體的時期中,我用過很多不同的軟體,像是 MultiMarkdown 和 MarsEdit .. 等軟體。雖然這些軟體可以離線編輯,但真的要上傳內容時…還是會有很多要另外設定的選項;之前也曾經因為直接複製貼上 MultiMarkdown 撰寫好的內容,發生網誌 RSS 失靈的悲慘情況..。(因為查了很久都不知道問題到底出在哪裡,最後還得每篇重新打過才修復完成..)

嘗試將文字與排版分開

WordPress 後台編輯畫面

堅持了一段時間的離線編輯軟體後,決定還是把 “文字撰寫” 和 “排版” 分開,在構想內文的時候就用單純的筆記編輯軟體,像是 Evernote 或是 Simplenote 這類的文字編輯軟體。(撰寫好內容後再將文字貼上到 WordPress 後台的語法編輯版面排版..)

使用 Evernote 整理資料

Evernote 日本官方網站

Evernote 這套軟體應該不用再介紹了,用過的人就知道有多好用!不但可以把在網頁中看到的資訊直接快速擷取、儲存在 Evernote 中;還可以辨識所有圖片中的文字,強大的搜尋功能可以說是一大特色。

Simplenote 行動筆記

Evernote 日本官方網站

Simplenote 則是我最近才發現的一套軟體,當初之所以會想找另一套筆記軟體..其實只是因為希望在觀看或編輯文字時,可以呈現像 Instpaper 一樣擁有深底色的閱讀模式,比較不傷眼睛…。(單純心理作用?)

Simplenote 的功能很簡單,是個極簡的文字編輯軟體,設計走簡單大方路線;適合在通勤或是在咖啡廳時做一些簡單的筆記,回家後再同步到電腦中。

Alternote 的專注模式

Alternote 官網介紹

但現在最常用的文字編輯軟體還是以 Alternote 為主。Alternote 是一套可以與 Evernote 資料同步的軟體,同時支援多數 Evernote 內部的功能..;像是 標籤 、筆記本、文章捷徑…等主要功能。雖然 Alternote 目前還沒有 Work Chat (未來可能也不打算加入..),但其主要特色還是擁有一個 “極簡的編輯版面”,不但讓你在編輯的時候可以更專心在文字的內容,同時還支援前面所提到的 Night Mode ! (只可惜目前還沒有手機版 App)

(其實…就是喜歡它的設計拉!用喜歡的軟體寫起文章來就是不一樣~~~)

影像製作 Affinity Designer

Affinity Designer 編輯畫面

當我把網誌的內容構想好了以後,就會開始用 Affinity Designer 來編輯網誌中需要的圖片。 Affinity 是一套專門針對 Mac 用戶所研發的繪圖軟體;(目前尚不支援 PC 的 Windows 作業系統)其強大的功能幾乎可以披敵 Adobe 的 Illustrator  和 Photo Shop !還有一個重點是 ”價格超值“ ~~

Affinity Photo 官方網站介紹

Affinity 目前的產品分成 Affinity Designer 和 Affinity Photo 兩款軟體。 Affinity Designer 等同 Adobe 的 Illustrator 、而Affinity Photo 則是和 Photo Shop 一樣是專門拿來修相片的軟體。

如果你和我一樣不需要將檔案送到印刷廠,只是在網路上寫寫圖文部落格…光是這兩套軟體,基本上就已經很夠用了。可以幫助你省下大筆的繪圖軟體費用!相較於正版 Adobe 軟體 / 年費約 NT 19,440; Affinity 兩套軟體加起來才不到 NT 3,000 ,對於尊重製作財產權的創作者來說,真的是個不錯的選擇唷~

語音朗讀

Mac OS 作業系統的朗讀功能
完成所有的文章內文與圖片後,我會使用 Mac 的 ”朗讀功能“ ,請 ”美加“ 小姐幫我把所有的文章念一次,聽聽看文法通不通順,或是有沒有錯字。(實驗證明..利用朗讀功能檢查後..確實可以找出很多錯字與不通順的地方 !)最後在把所有的文章內容貼到 WordPress 後台的文字編輯區域;單存用 CSS 語法編輯排版,避免用預覽模式減少語法亂掉的情況。(另外,因為圖片現在都會上傳到另外租用的圖床空間,所以則改用 Coda 內部的 FTP 功能上傳後,再以坎入連結的方式寫到文章編輯區域中。)

感謝閱讀與分享

以上就是我個人在撰寫更新網誌時的流程,很高興能與大家分享;如果你有任何更棒的方法,也歡迎你與我分享!感謝你的閱讀與分享 O.OP

文章相關連結

下載 MultiMarkdown
MarsEdit 介紹與下載
WordPress 繁體中文網頁
Evernote 中文官方網站
Simplenote 介紹與下載連結
Alternote 官方網站
Affinity Designer 官方介紹
Affinity Photo 官方介紹