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

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

那就 … 下次見。

 

Affinity Designer 的遮罩功能介紹

Affinity Designer 的遮罩功能介紹

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

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

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

製作流程

Affinity Designer 的遮罩功能介紹

Step.1

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

Affinity Designer 的遮罩功能介紹

Step.2

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

 

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

是不是非常簡單?

影片介紹:

簡單的介紹一下關於 部落客 可能會經常用得到網誌封面製作教學分享。

雖然下載了Affinity Designer 有一段時間了,但幾乎都只是拿來製作網站的圖片;如果你也對這類的文章或是教學有興趣,歡迎留言給我。未來也許也可以再多拍一些這系列的影片~

總之喜歡我的影片的朋友,歡迎訂閱本頻道????

 

更多相關文章:

Affinity Designer 重點特色初解與摸索小心得~

部落客與小編的新選擇 Affinity Designer & Affinity Photo

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

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

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

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

關於網頁的設計念

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

關於網頁的文案

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

首頁文案:

先分析、在規劃

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

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

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

帶來更多價值

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

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

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

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

網站代表企業的臉

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

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

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

品牌、策略、行銷、設計

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

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

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

溝通、整合、執行、Coding

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

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

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

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

未來網站的內容規劃

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

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

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

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

感謝你的閱讀與分享

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

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

2017 的網站更新計畫

2017 的網站更新計畫

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

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

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

關於 2017 的網站更新計畫

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

網站選單修正

過去的網站選單除了改顏色以外,幾乎都直接使用 Theme 的原始設計。
過去的網站選單除了改顏色以外,幾乎都直接使用 Theme 的原始設計。

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

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

首頁

LiSWEi.com 的首頁概念主要是為了凸顯:「除了器材以外,音樂的設計與創意才是真正更值得關注的事」
LiSWEi.com 的首頁概念主要是為了凸顯:「除了器材以外,音樂的設計與創意才是真正更值得關注的事」

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

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

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

電子報頁面

為了統一網站的設計(極簡風),所有的底圖都沿用首頁的底圖來當背景。
為了統一網站的設計(極簡風),所有的底圖都沿用首頁的底圖來當背景。

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

服務頁面

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

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

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

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

軟體攻略(教學內容整理)

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

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

【頁籤】的設計也是很重要的... 不清楚的頁籤,很容易讓人忽略。
【頁籤】的設計也是很重要的… 不清楚的頁籤,很容易讓人忽略。

網誌文章列表

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

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

聯絡頁面

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

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

網站修改實行方案

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

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

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

 

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

為什麼創業第一件事不是找店面,而是申請網址?

為什麼創業第一件事不是找店面,而是申請網址?

因為自己工作的關係,從兩年前開始就經常推薦身邊有在接案或是創業的朋友申請一個自己專屬的網址、或是製作一個網站。剛好昨天又在騎單車時和一位朋友討論到:「為什麼創業一定需要聲請一個專屬的網址?」所以今天在咖啡廳就簡單的整理一下:「到底為什麼創業第一件事不是找店面、而是申請一個專屬的網址?」

為什麼創業的第一件事情不是開實體店面、或是成立工作室?

個人認為並不是每一種創業類型,都適合一開始就設立實體店面;因為如果你是剛開始創業就經營實體店面,可能會突然間面臨到很多壓力:房租的壓力、資金的壓力…,但如果是從網路開始創業的話,你可能只需要 NT $4,000 就可以開始創業了!

新台幣 4,000 就可以開始創業?

沒錯!只要四千塊你就可以開始做生意了。看看前幾天的新聞:「15歲蹺家少年靠網拍年賺千萬」, 創業真的不一定需要實體店面;重點還是盈利模式,以及如何與你的顧客連繫、保持良好的關係。

承租一間店面… 一樓的話一個月最少也要 30,000 , 多的話可能要 50,000 甚至是 100,000以上,但申請一個網址或製作一個網站呢?一個專屬網址一年只要 500 – 1,000,架設網站的伺服器租用費用一年也才 3,000 起跳。價格是不是差很多!而且承擔得風險也不同~~

臉書那麼方便,幹嘛不用 FB 就好了!為什麼還需要自己申請網址?

沒錯!臉書很重要,幾乎所有的店家或廠商都會花一筆預算在臉書的行銷上。畢竟現在大家在使用臉書的時間,幾乎都快比看電視還多了… 不讓自家的商品在臉書上曝光怎麼行呢?

不過…雖然臉書在台灣是目前最多人使用的社群平台,但動態更新的太快,導致商品訊息的生命週期太短,粉絲專頁的動態幾乎都只有一天的壽命;想想:「有多少人會點進去粉專挖先前的動態?」;你花那麼多時間拍攝商品照片、撰寫文章、甚至還請朋友插刀助陣,結果卻只換來一天的曝光…不覺得很不划算嗎?

除了商品、服務資訊的生命週期太短外,再來還要考慮到你商品的價格。如果只是低價的商品,消費者的購買決策較低,有時候根本不需要考慮太久就會直接加入購物車購買了;但如果是動不動就上萬元的商品…你會不想要多看看自己到底買的是什麼嗎?或是查查還有沒有其他選擇?

況且,想要曝光的商品這麼多… FaceBook 要如何決定讓誰先曝光?當然是看誰出的錢最多啊!但廣告費砸下去真的有效果嗎?要砸多少才會有效果?

如果你也有自己的粉絲團的話,一定看過 FaceBook 的 “推廣貼文” 廣告吧…

網站如何跟臉書結合產生更大的效益?

好消息是如果你沒有那麼多廣告預算跟大廠商競價的話…還有另一個方法:「那就是讓自己的貼文 按讚 與 分享數 提高!」這樣的話臉書就會判斷這則動態是有價值的,值得讓更多用戶看到~ 但這還要考慮到很多策略… 其中包含你用戶上線的時段、對動態內容的分享意願、以及你刊登的內容… 等等。

讓商品資訊更完整,延長商品資訊的生命週期!

如果你有一個屬於自己的網址,你就等同擁有更多的主導權。你可以在自己的部落格或網站自由的編排照片以及商品資訊,然後再將文章連結轉貼到臉書;如此一來不但可以讓客戶在舒適的方式下瀏覽、看到他想了解的商品資訊(尤其是圖片),同時還可以累積網頁點擊率提升自己網站在搜尋引擎中的排名。

注意:舒適的瀏覽環境,嚴重影響到顧客在你商品資訊頁面停留的時間!

網站在搜尋引擎的排名有多重要?

先問自己一個問題:「當你想要找一些資訊時你會怎麼做? 」Google 啊! 對吧?但你知道 facebook 的動態是無法被 Google 搜尋的嗎?這樣的話…你在 facebook 的辛苦整理的動態不就白費了嗎…

這時候如果你有自己的網站,你不但可以將商品或活動訊息轉貼到臉書被粉絲點擊按讚、分享,同時還可以被 Google 搜尋引擎找到,這樣不是一石二鳥,做一件事情得到兩倍的效益嗎?

想想看:「如果你今天賣的是 ”訂製腳踏車“」當有人在 Google 搜尋 ”訂製腳踏車“ 的時候,自己的網站出現在搜尋頁面的第一個排名的話,會有多少人點擊進去看看?商品的信賴度會增加多少?

感謝你的閱讀與分享:未完待續

其實… 這篇本來是想分享 「如何替你的網站想一個好網址!」的,沒想到寫著寫著…就鋪梗就鋪了這麼長… Otz

為了避免文章太攏長,我會在下一篇文章中再整理一些我自己在網址(品牌)命名時的一些方法與經驗。

在此非常感謝你的閱讀,如果覺得這篇文章有幫助到你的話,歡迎分享給身邊需要的朋友;也歡迎你留言給我,給我一些建議或是分享你的一些網站經營經驗。

相關連結

喔對了!既然說到訂製腳踏車,一定要推薦一位不錯的師父給大家~~
Bambino village
如何讓網站成為搜尋結果中的第一名?

如何幫你的 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 上傳的位置)

搬完收工

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

感謝你的閱讀與分享

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

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