網站架設 :17 篇不藏私教學(網頁製作+費用推薦)

30
40477
網站架設
網站架設

你想自己 網站架設 ,卻找不到教學課程嗎?搜尋網頁製作公司,除了對 網頁設計教學 不熟悉,也覺得費用、價格過高?

今天,我將帶你全方位學習,從網域申請、wordpress主機教學、架設網站推薦軟體、網路開店平台等 .. 總共 17 篇教學課程,一次從門外漢進化成高手!  icon-arrow-down  icon-arrow-down 

如果都順利看完,在「觀念+實戰」上,搞不好「業界」上的人還沒你懂的多,我們開始吧 😉  😉

若想直接開始實戰,架設個人 Or 公司的「 形象網站 」,可以前往 icon-arrow-down icon-arrow-down

網站設計 :如何架設形象網站(入門篇)


subject-1

1. 網域是什麼?

網域是什麼
網域是什麼

「 網址 」是網站組成的第一步,它就像家的門牌一樣,讓人可以順利的找到你:)

主要用來取代 IP 號碼,如「 123.123.123.123 」等 ..,變得可視覺化,讓人好記憶。

1. 簡單好記:越簡單的網域名稱越方便使用者查詢和記憶。
例:蘋果 – https://www.apple.com/tw/

2. 品牌名稱:網域名稱以品牌為名,簡單、易記。只要打算發展品牌的公司,都可以用這個方式。
例:愛迪達 – https://www.adidas.com.tw/

3. 與產品名稱有關:網址與產品的關鍵字有關聯。你也可以用關鍵字工具來想網站名稱。
例:博客來 – http://www.books.com.tw/

4. 去除www:目前大部分新網址都不太會在前面加上www,這是比較舊式的用法。

5. .com優先:.com是大多數人的直覺印象,主要方便好記,增加搜尋率。

6. 勿用中文:網址傳輸是以英文為主,所以網址上有中文,就會轉成一長串的特殊符號+數字,除了難記外,對排名也不太理想。

在台灣,一般民眾最常選擇的就是 .com / .com.tw,大概是這兩種最常見,也最符合。

挑選你喜歡的網址吧!
挑選你喜歡的網址吧!

這邊也把其他類型的網址,也一並列出:

  • org – 財團法人才可申請網域,需要財團法人資料。
  • net – 網路事業機構,例如中華電信、seednet等 .. 才可使用或是其他網路事業。
  • edu – 教育機構,一般為學校機關的網址申請,非一般補習班等機構。
  • gov – 政府機構,為政府網頁使用之網址申請,一般人無法申請。
  • tw / cn / jp – 代表不同國家,如台灣/中國/日本等。

用免費網址好嗎?

申請免費「 網址+網路空間 」最大的好處就是「 免費和練習 」,但可別用它來當正式網站的環境阿 😯 😯

如果是單純練習用當然好!但如果想長久經營,用免費的是百分百不推薦!因為:

子網域
不屬於自己的子網域
  1. 網址是子網域(公司倒了,你養的網址也沒了)
  2. 提供的免費空間,主機效能不好+有時容易被攻擊(因為免費)
  3. 用一段時間,大致上有 8~9 成會購買域名來更換(簡單來說就是,你從新手村畢業了 😆 )

下一篇我將會帶著你,了解 網站架設 第二個重點「 虛擬主機 」 😆


subject-2

2. 虛擬主機是什麼?

虛擬主機是什麼
虛擬主機是什麼

「 虛擬主機 」也是共享主機,也可以稱為網站空間、網頁空間、主機空間、虛擬空間、網站代管、網頁代管(這些都是同個東西 😯 😯 )。

「 虛擬主機 」是虛擬主機公司,在自管的實體主機上,切分成多個虛擬空間,並把這些空間,租給一般使用者使用。

使用虛擬主機的好處?

若要使用「 實體主機 」,你的伺服主機、專線頻寬、專業人員技術,缺一不可,而專業的伺服主機動輒數十萬、專線每個月也是好幾萬、專業的技術人員更是不便宜。

若使用「 虛擬主機 」,會有專業的技術團隊,幫忙建制好一切網路設施與伺服主機設定,只需要每年花個幾千元,就可以開始使用主機,大大的節省了網站的製作成本,絕大部分的網站主,都是用這個方式。

挑選主機的幾個小重點?

1. 公司:基本上找任何服務,首先確定一下公司開了多久規模,自己也比較安心。想想自己的網站資料,放在一個不知名的地方,應該也會很擔心吧 🙄  🙄

2. 價位:通常國外的價格,會比國內便宜。但也不要完全價格取向,如果都選擇低價,但主機功能性不好,之後你也會選擇離開的。

3. 功能性:如果是一開始建立網站的新手,規格用入門款的應該就可以了,價錢也不會太貴;如果是經營一段時間的網站主,在挑選主機時,可以大致抓一下自己網頁的流量和狀況,選擇合適的。


subject-3

3. 虛擬主機推薦

虛擬主機推薦
虛擬主機推薦

一開始架設網站,虛擬主機要選擇哪一家申請,也是常會遇到的問題!

小犬自己,從開始架設個人網站,到後來直接下去寫程式碼,前後也用過 10 幾家虛擬主機 .. ,最後發現,這家 SiteGround 使用體驗十分滿意:

虛擬主機推薦:SiteGround

衡量的重點不外乎就是公司規模、主機速度、後台使用介面、客服回覆速度、虛擬主機費用、安全性、自動備份等 .. 。

SiteGround

SiteGround:雲端主機推薦
SiteGround:雲端主機推薦

SiteGround 是高度專業的虛擬主機公司,同時也有經營網域申請服務,在全球有多個數據中心(亞洲有新加坡據點),連線起來一樣快,到目前已經管理超過 800,000 個網域。

同時他也是 WordPress.org 推薦 的虛擬主機,基本上就是一間老牌&穩定的虛擬主機公司。

這也是為什麼能讓 WordPress.org 官方,列為推薦的主機之一,你可以享有 ..

  • WordPress一鍵安裝
  • WordPress 版本+外掛自動升級
  • 免費的 SSL
  • WordPress 搬家
  • SuperCacher 速度優化軟體
  • 每日自動備份
  • 24/7 的客服服務、即時聊天、快速表單回覆 .. 等。

當然它的優點不僅於此,由於篇幅關係,這裡只列舉部分。

專家們對 SiteGround 評論?

SiteGround 是 WordPress 社區中最受歡迎和評分最高的託管服務提供商之一。

他們提供獨特的主機解決方案,讓主機穩定度、主機速度、主機安全性等 ..,都能達到最高的審核標準,且有接近 100% 的正常運行時間。

當然少不了的就是他們一流的客戶服務,由於 SiteGround 的使用者來自世界各地,至少可以說,他們的客戶支持很棒。

如:24/7 的客服服務、即時聊天、快速表單回覆 .. 等。

在國外虛擬主機的品質上,SiteGround 無庸置疑是推薦排行前幾名的,所以受到許多國內外的網站主喜愛。

若是打算經營自己的網站事業, SiteGround 會是你很好的選擇!

SiteGround 正常運行時間&回應時間

少不了的是,它不論在國內外,也有十分優良的使用評價,如下圖:

SiteGround 客戶評價

SiteGround 費用了解

至於費用部分,虛擬主機的原訂價格為$ 11.95 美元 /月,值得開心的是,SiteGround 官方已經同意為我們網站的讀者,提供任一方案 70% Off 的虛擬主機折扣

立即購買 SiteGround 主機,本站讀者享有3折優惠

SiteGround 方案費用

就等於虛擬主機只需 $3.95 美元 /月(一年約 1440 台幣),即可開始享用 SiteGround 主機。

若網址也同樣在 SiteGround 申請,域名的價格通常為$ 15.95 美元 /年(一年約 480 台幣)。

等於網址+主機費用相加起來,可以用不到 2000 台幣,開始你的網路事業!

下一章節,我會帶領大家網域申請+虛擬主機租用,教學很容易上手的,我們開始吧:)


subject-4

4. 網址+虛擬主機申請

網址+虛擬主機申請
網址+虛擬主機申請

一個 網站架設流程 ,會包含下列三要素,並且缺一不可!

架設網站三要素
1. 購買網址
(申請門牌)
2. 申請主機
(租一塊地)
3. 網頁設計
(搭建房子)

在這章節,會帶領大夥兒申請網址+虛擬主機,而 網頁設計教學 部分在下一章節,也會帶著大夥兒實做一次。

Step 1:挑選主機方案

首先前往 SiteGround ,挑選適合自己的主機方案。

SiteGround 方案費用

如果你是初學者,推薦使用 StartUp 入門方案 創建第一個 WordPress 網站,是一個不錯的選擇,費用較低方便入門。

立即購買 SiteGround 主機,本站讀者享有3折優惠

若你是有些經驗的使用者,想擁有更好的 SiteGround 服務,如:更好的主機規格、SuperCacher 外掛(提升網站速度)等 .. ,你可以選擇 GrowUp 中階方案

Step 2:申請你的專屬網址

填入想申請的網址( Register a new Domain ),並前往下一步,若是原來就有網址,就選( I already have a domain ),就不另做申請。

siteground:網址申請

3. 填入申請資料

填寫申請帳戶資料(英文),客戶資料,付款方式等 .. ,最後送出付款。

  • 帳戶資訊,請務必記好,是要登入 SiteGround 的帳密唷!
  • 地址 / 郵遞區號,都要用國際方式填寫,這邊上個「 中英地址翻譯 」工具,協助大家填寫:)
siteground:資料填寫
siteground:申請資料填寫
SiteGround:網址+網路空間申請成功
SiteGround:網址+網路空間申請成功

申請完成後,可能需要留意一下信箱,系統可能會寄送確認信 or 申請完成的主機訊息,若都沒收到也無所謂,不會造成影響。

付款成功後,你的網址+虛擬主機就正式申請完成囉!

這章節,是協助你打好網站事業的基底,有點像是基礎設施,下一章節就要來學習如何 WordPress 安裝,也就是網頁製作教學的部分囉!


subject-5

5. 架設個人或公司網站

開始架設個人&公司網站
開始架設個人&公司網站

首次登入 SiteGround 後台,會發現 Set Up Site,把它用力點下去 😎 😎

若還沒有網址&虛擬主機,請點擊下面按鈕,可照本文 3~7 章教學,完成申請。

立即購買 SiteGround 主機,本站讀者享有3折優惠

SiteGround:點擊網站設計
SiteGround:點擊網站設計

照著下面流程選取,主要分為 Start New WebSite(開始新網站)和 Migrate Website(轉移現有網站)。

SiteGround:網址+虛擬主機+Wordpress安裝完成
SiteGround:網址+虛擬主機+Wordpress安裝完成

小提醒:

  1. 這裡設置的帳號密碼,是未來會用到的 WordPress 後台帳密唷(之後可改密碼,別擔心)
  2. 若有網站要搬家至 SiteGround,他也有提供免費搬家服務。你可以使用 Migrator WebSite 搬家工具(如上圖,任一方案都有),或直接請 SiteGround 公司的專人協助你搬家(需 GrowBig 方案以上)。

點擊完成後,會到 Add Extras(額外服務)頁面,這邊都先不選取,我們只把錢花在刀口上。

送出後,SiteGround 就會開始運行 WordPress 安裝啦,完成後會出現安裝成功的畫面。

SiteGround:DNS指向+網站管理工具
SiteGround:DNS指向+網站管理工具

若網址非在 SiteGround 申請,請看這:

請把上圖的左邊 DNS  兩行複製下來(Site Tools 後台也找得到)。

然後到自己的網域商,進行 DNS 設定(把剛複製的兩行貼上去),然後等待24小時 ~ 48小時的作業時間(網址指向主機需要時間)。

就可以順利把你的網址和 SiteGround 主機,串接起來了!

我們先不點擊前往 Site Tools,有關 Site Tools(網站後台管理工具),稍後會跟大夥兒介紹,這是 SiteGround 開發來取代舊版 Cpanel 介面的超好用工具。

回到前台,來看一下努力的成果,太棒了一個 WordPress 部落格主題,已經完成了:)

SiteGround:搞定的 wordpress 網站
SiteGround:搞定的 wordpress 網站

若想學習更多「 WordPress 前後台 」如何使用,我在 WordPress 教學 這篇有良好的範例說明。

下一章節,我會帶著大家調整自己的 wordpress 網站,變成自己喜歡的佈景+設定 😆 😆


subject-6

6. WordPress教學+佈景外掛

wordpress教學+佈景外掛
wordpress教學+佈景外掛

來到這章節,若有照著前面步驟,相信已經完成網址+虛擬主機+worpdress安裝了吧 😀 😀

若還沒有網址&虛擬主機,請點擊下面按鈕,可照本文 3~7 章教學,完成申請。

立即購買 SiteGround 主機,本站讀者享有3折優惠

可惜美中不足的, wordpress 網站版型太陽春了 .. 實在需要給它打造一番!

首先,我們前往已建立好的 wordpress 後台,網址是:你申請的網址/wp-admin,然後輸入剛在 SiteGround 建立 wordpress 網站,所輸入的帳密。

wordpress 後台登入
wordpress 後台登入

會看到 架設網站流程 ,開始我們的網站設計,點擊 Start Now 前往下一步。

SiteGround:wordpress 網站登入
SiteGround:wordpress 網站登入

這邊有很多免費的 wordpress 佈景主題+網站範例,可以挑選自己喜愛的網頁設計 😛 😛

左邊有分類列表,也可以用它來塞選,版型確認後點 Select

小提醒:這裡提到的佈景主題+外掛,之後在 wordpress 後台,都可以再修改唷,可以放心!

SiteGround:wordpress 佈景主題+網站範例
SiteGround:wordpress 佈景主題+網站範例

選擇 wordpress 佈景主題後,會跳出這款佈景所使用的主要外掛,SiteGround 預設會協助安裝,確認後點 Confirm

wordpress 外掛下載
wooCommerce 外掛下載:wordpress 購物網站專用外掛

接下來,wordpress 會推薦安裝幾款熱門外掛,如:Contact Form(聯絡表單)、Jetpack(綜合外掛包,如:網頁速度優化 / 社群分享 / 熱門文章等 ..)。

這邊我們就選擇這兩款,先來進行預先安裝 🙂 🙂

wordpress 外掛安裝,擴充後台功能
wordpress 外掛安裝,擴充後台功能

這頁我們選擇 Optimize for SEO,這款就是 wordpress seo 神器 Yoast SEO,確認後送出。

wordpress seo 外掛下載:Yoast SEO
wordpress seo 外掛下載:Yoast SEO

接著會開始跑 wordpress 外掛安裝,耐心等一下,就會完成安裝啦!

這邊點擊 View Site,前往新的 wordpress 網頁主題,來看看會發生什麼事 😛 😛

wordpress 外掛安裝成功
wordpress 外掛安裝成功

兩個重要的路徑位置(要記得唷):

  • wordpress 網站前台: yourdomain.com
  • wordpress 網站後台: yourdomain.com/wp-admin

會發現我們新的 wordpress 佈景主題,一個簡單的個人部落格網站、公司網站、購物網站,已經順利完成啦  😛 😛

當然你喜歡的,可能跟我不同,這就是 wordpress 好玩的地方,把它打造好,吸引更多人前往你的網站光顧吧:)

wordpress 佈景主題:網頁設計
wordpress 佈景主題:選取 cart 分類,呈現的簡單版購物頁面

當然 wordpress 網站優化,其實是一門學問,有許多可以學習和改造的。

若想學習更多,我有準備一篇文章,協助你快速上手 wordpress 前後台,如下:

WordPress 前後台教學全文,完整學習 icon-arrow-down icon-arrow-down

WordPress教學 :25個後台課程(含安裝+主題推薦)

下一章節,小犬將帶著你們,使用 SiteGround 開發的 Site Tools 工具,讓大夥兒對網站掌握度,變得更高 .. 衝吧!


subject-7

7. Site Tools 工具

SiteGround 的 Site Tools 工具教學
SiteGround 的 Site Tools 工具教學

經過一連串的努力,不知道有沒有順利完成 架設網站教學 呢?

若還沒有網址&虛擬主機,請點擊下面按鈕,可照本文 3~7 章教學,完成申請。

立即購買 SiteGround 主機,本站讀者享有3折優惠

若中間有遇到問題,都歡迎在下面留言給我 🙂 🙂

這一章節,我將簡單介紹 SiteGround 所開發的 Site Tools 工具,開始囉!

Site Tools 是什麼?

是 SiteGround 自己開發,用來取代舊版 Cpanel 的功能介面 ,讓整個後台「 網頁設計 」質感大幅提升,而且提供的功能,也比之前多很多(上圖分類選單,都還能再展開)!

例如:檔案管理員、FTP 帳戶建立、網站備份、SSL 安全憑證、CDN 內容傳遞、Caching 伺服器快取等 ..,都在 Site Tools 操作。

1. 如何進入 Site Tools?

首先到 SiteGround 登入自己的帳號,登入之後點 Websites  icon-arrow-right  Site Tools,直接進入工具裡面。

Site Tools 進入位置:架設網站軟體
Site Tools 進入位置:架設網站軟體

然後就會看到,超多功能列表 .. 出現了,因為長度限制,還沒全部截圖完成。

Site Tools 功能後台
Site Tools 功能後台

2. SSL Manager 免費憑證

網址+虛擬主機申請,都有照教學安裝(都在 SiteGround 申請 ),這裡的 SSL 憑證,會自動安裝好,就不用手動再設定一次囉!

若網址不在 SiteGround 申請,就需手動安裝 SSL,這邊跟大夥兒教學一下,如下:

前往 Security 的 SSL Manager icon-arrow-right 選擇網址 icon-arrow-right 選擇 SSL 憑證種類(Let’s Encrypt)icon-arrow-right 點擊 GET icon-arrow-right 申請完成
SSL 憑證申請
SSL 憑證申請

3. HTTPS Enforce 強制安全傳輸

當 SSL 憑證申請完成,接下來就要讓網站,都使用 HTTPS 加密安全方式,進行資料傳輸啦 😎 😎

https-enforce 開啟
https-enforce 開啟

4. SuperCacher 網站速度優化

SuperCacher 簡單來說,就是把第一次從伺服器請求回來的資料,先備份一份在前台(如文字、圖片、所有檔案 ..)用來呈現給訪客。

之後就不用每次都要向伺服器重新要資料,加快了網站速度。

其實還有許多 SiteGround 的 Site Tools 工具,還沒辦法一次說完 .. 之後會再寫一篇文章,大夥兒可以先自行玩一下。

到了這章節尾聲,大致上的 網站架設教學 ,也已經都完成了,先給自己掌聲鼓勵:)

接下來,我還是會持續分享 架設網站 的觀念+其他方式,有興趣的朋友們,可以繼續看下去 😀 😀


subject-8

8. DNS 是什麼?

dns是什麼
dns是什麼

DNS 全名「Domain Name Server」,可以把它想成是一個資料庫,裡面存放許多網址+IP 的資料。

當進行網址搜尋後,會先跑來 DNS Server 辨識比對,如果「搜尋的網址」和「某 IP」(就是存放網頁的虛擬主機)比對成功,就會把該主機的資料取出,然後呈現在使用者面前,才會出現所謂的「網頁」。

(所以網址才需要做DNS設定,如果沒設定,就無法進行比對  😐 😐  )

小教學:IP位址(例如103.13.009.566)是網路世界的門牌號碼。每個網站都有一個IP位址。

使用者動作行為

網路世界裡,舉個動作行為來說:「小明在Google輸入 frankknow.com 後,結果跳出來「 小犬程式 」的網頁。這個動作再自然不過,但其實每個搜尋的背後就有DNS Server在運作。

進行搜尋時,瀏覽器必須要先去一台有 Domain Name 和 IP 對應資料的主機,而這台被用來做比對的主機,我們稱呼為 Domain Name Server,簡稱 DNS。

如何查詢是否生效

DNS指向,理論上需24 – 48小時,大約1-2天轉換成功,當然也有幾小時就轉換完畢(或者更快),每個人長短不一定。

如何測試成功了嗎?很簡單,只要在瀏覽器輸入你的域名,若出現主機商的預設頁面,新的DNS設定即正式生效 😆  😆


subject-9

9. cPanel介紹

cPanel是什麼?

cPanel 是管理主機的操作介面。在以前,若是想操作虛擬主機,多半是使用 Dos 指令框(工程師常用的小黑框),來輸入程式碼執行指定功能。

但這對一般使用者難度太高,於是有人開發cPanel(圖形介面),只要點點圖示、動動開關、或輸入點文字,就能處理大部分的功能,提高使用效率 😆  😆

不同主機商會在基礎的 cPanel 框架上開發自有功能,所以常會發現每家主機商的 cPanel 後台,長得不太一樣。

cPanel 有什麼功能?

有建立 Email 帳戶、網域管理、備份 / 還原網站、設定網頁快取、FTP架設、資料庫、查網站流量 / 空間等 … 非常多功能(依不同主機商提供功能為準)。

許多虛擬主機商,後台都會使用 Cpanel 進行開發+擴展,也有的就直接開發一套,如:SiteGround 的超好用後台工具 Site Tools .. 就是為了,更好的體驗 😎 😎

這是 SiteGround 舊版的後台介面( Cpanel 介面)  icon-arrow-down  icon-arrow-down

siteground - cpanel功能
siteground – cpanel功能

新版的 SiteGround 後台介面 Site tools 長這樣,是不是美多了!

Site Tools 功能後台
Site Tools 功能後台

現在,相信對 cPanel 有進一步的認識了吧!

下一章你將會學到,小犬會和大夥兒分享 網站架設推薦 的幾種方式,繼續看下去 😆 😆


subject-10

10. 網頁製作教學(4種方式)

網頁製作教學
網頁製作教學

通常要架設網站,不外乎 4 種方式(等等進行評比):

  1. 使用網頁製作軟體,如:WordPressJoomlaDrupal ..
  2. 使用網頁製作平台,如:痞客邦MediumWixWeebly ..
  3. 自學程式語法架設,如:HTML、CSS、JS、PHP、Python、Nodejs、Ruby、C#等 ..
  4. 請網頁設計公司製作。

看完這幾點,你可能會問:「哪一種比較好?」。

你小時候的選擇障礙!
你小時候的選擇障礙!

網頁設計公司 製作?或者免費網頁製作平台?還是自己學程式?覺得很難選嗎,請先問自己三個問題:

  1. 官網主要目的是什麼?是否需要特殊的功能?
  2. 我是否有足夠的架設網站知識(技術背景)或是足夠的財力?
  3. 我對於曝光能力與行銷是否有把握?

如果網站本身就是產品(SAAS),也可能會不斷的更新或擴充功能,或需要高度客製化功能,這種情況,基本上你就是得自行開發啦(選3或4)!

不過,如果你的主要目的是「寫Blog平台、網路開店平台、官網形象展示 .. 」,其實不一定要花大錢,也可以透過第三方平台來達到,這樣不但省錢,而且也快速(選1或2)。

如:近來很夯的 WordPress 都很方便,而且使用網頁製作軟體、平台,多少會有些固定社群流量,對於一開始什麼資源都沒有的,是比較好入門的選擇 😆

針對這幾項,等在後面也都有做介紹,別著急 🙂

4 種方式優缺點,簡單小評比

這邊先看看,剛上面提到的 4 種 網站架設 方式,並做簡單的評比:

網頁製作軟體(優缺點)

案例代表有:WordPressJoomlaDrupal

先說優點:首先你有屬於自己的網域(自有),像我的網址:「 https://frankknow.com/ 」,就是自己申請的,不會附屬在任何子網域下面。

若還沒有網址&虛擬主機,請點擊下面按鈕,可照本文 3~7 章教學,完成申請。

立即購買 SiteGround 主機,本站讀者享有3折優惠

wordpress v.s drupal v.s joomla
wordpress v.s drupal v.s joomla

主機也自己管理,可用主機公司提供的 Cpanel 做檔案備份、和一些擴展功能(如:信件傳輸、排程執行等 .. ),就算不懂程式,一樣可以使用Cpanel管理自己的虛擬主機。

不用擔心使用網頁製作平台(如:痞客邦、Wix等 ..),若公司出了狀況那附屬在下面的網站會不會有危險、 資料會不喪失等 ..,因為你就是網站的持有人。

cpanel教學
cpanel教學

儘管如此,但還是建議是定時的備份網站資料唷(以防萬一) 😉 

那至於如何備份,其實多數虛擬主機公司都有備份功能,你只要點選,就可以把網站檔案+資料庫,全都給下載下來 😛  😛

網頁製作軟體(如:wordpress、joomla等 ..)還有很多好處,他們有超多套件可以安裝,不論你是想要討論區、會員系統、電子報設計、主題背景等 .. 應有盡有 😯  😯

想的到的幾乎上面都有開發者已經開發好,不太用再花錢請網頁設計公司開發,自己搞定就可以了。

wordpress外掛搜尋
wordpress外掛搜尋

舉例來說,如果使用 WordPress,那要做的就是照著教學安裝,就算你不會程式,還是可以自己完成一個 網站架設 ,整體成本降低很多 🙂

網頁製作平台(優缺點)

案例代表有:痞客邦MediumWixWeebly

對於第二點(網頁製作平台)的看法,好處是都建置好了,只要專注在自身專業上,如:文字撰寫 / 商品銷售等.. ,程式這些難懂的人家都處理好了,不懂打個客服問也沒問題 😮

大多數也是免費軟體,有收錢的話是用月 / 年租方式(如:網路開店平台),用的不習慣終止也行,所以壓力也小很多。

wix免費註冊
wix免費註冊

比較麻煩是資料都綁在平台上,假如某天平台公司倒了(不是不可能的),想當然資料就 ..👋👋。

有良心的會提供匯出系統,可以讓你把商品 / 文章資料會出,如果沒提供那就只能節哀了 ..(想想你的好幾百件上架的網路文章、商品要重上 ..,整個辛苦經營的 SEO 歸零,整個很點點點 ..)。

無名小站關站公告 - 範例(有提供匯出資料功能)
無名小站關站公告 – 範例(有提供匯出資料功能)

還有,你的網域申請只是子網域,如:痞客邦網址(yourname.pixnet.net/xxx/xxx .. ),雖然還是可以經營自媒體,但你的網站,終究不是你自己的 。

痞客邦子網域
痞客邦子網域

小建議:

如果是架設 Blog(經營自媒體,需要寫文章),我建議使用 wordpress 架設(或其他網頁製作軟體),自己取得完全控制權比較保險。

自學程式語法架設(優缺點)

案例語法有:如:HTML、CSS、JS、PHP、Python、Nodejs、Ruby、C#等 ..。

第三點方式架設(學程式,自己架設網站):優點是你有最高的網站控制權,從網址、 主機、 程式架構、 擴展性等.. 你就是王,不用依附任何平台的改變。

不用被迫調整自己的商業走向,所有變化性完全自己決定,如果你要做SAAS(軟體即服務),那這一定是必須的,舉例有名的如:FB、 Line、 User等 .. 都是,就是很夯的「 網路新創 」公司 🙂  🙂

saas幾種模式
saas幾種模式

如果你的商業策略不需如此,只需要單純自媒體來行銷自己。那對於初心者來說,如果為了 網站架設 ,花了好幾年學習程式語法,可能有點太大費周章了。

當然,如果你是要完全客製化的或是要很特別功能,那你還是要懂程式語法才行,不然還是要花錢請人製作了。

想自學程式架站這也可行,但在我學習程式的路途上,確實發現這個領域非常的「深」,沒幾年時間,想架設出像樣的網站(架構、 功能、速度)等都不太可能的,這不是在潑冷水,看看下面的圖應該會有所感 😯  😯

 GitHub前端學習路線
GitHub前端學習路線

上圖只是網頁前端領域(每一個長方形格子,代表著一個需要學習的技術),後台程式和主機架構又是各另一張學習領域,所以 .. 如果要踏入,強烈建議一定要有決心或興趣才會走的久💪💪

當然懂些基本程式語法一定有幫助,如:Html(身體)、Css(衣服)、JS(動作),在編寫文章時,可以直接操作語法,有時也來的更快、更漂亮!

請網頁設計公司製作(優缺點)

如果預算足夠,「花錢外包製作」也是一個好的選項,因為只需要出錢,其他交給設計公司完成就好,也能享有高度的客製化 🙂  🙂

網頁設計網站
網頁設計網站

Q:「 小犬,如果我想做一個叫車系統,有點像 Uber 一樣,有會員端和司機端,會員端的頁面要有即時車輛移動的畫面、和司機評價顯示、轎車類型選擇、線上支付、還可以一次叫兩台車(因為可能人很多),然後司機端功能需要 …,請問我該如何做? 」。

A:「 1. 自己學程式  2. 花錢外包製作  3. 請工程師朋友幫忙 」,選一個吧!

想高度客製化網站,可能就需要花錢外包製作、或自己學程式完成、或找工程師朋友幫忙 ..,不建議使用任何一個網路架站平台,會很難做成你想要的。

因為他們程式碼幾乎不給修改(如:痞客邦、Medium、Shopline等 ..),就算開放修改,程式碼框架也是他們訂的,之後也難維護/擴充。

花錢買時間 / 買技術
花錢買時間 / 買技術

所以乾脆直接花錢外包製作,速度還比較快一點,但 .. 在外包之前,我建議還是要懂些 網頁設計教學 流程,不然到時找到很「雷」的設計公司,或者是自己的需求也不知道跟人家如何談,那就麻煩了。

結論

看到這裡,恭喜對 網站架設 的方式,有了更深一步的認識了。

對比之前,不知道有幾種網站設計推薦,在選擇上不太容易做出正確的決定,但在這章節一次了解多種架設方式,再整理自己的需求,相信比較能做出正確的決定。

接下來輪到你了,還沒有自己的網站嗎?快開始 網址+虛擬主機申請,開始 網站設計流程 吧 😆  😆


subject-11

11. 網頁製作軟體

說到 網頁製作軟體 ,我直接列出市場上,最受歡迎的 WordPress ,為大家介紹。

若還沒有網址&虛擬主機,請點擊下面按鈕,可照本文 3~7 章教學,完成申請。

立即購買 SiteGround 主機,本站讀者享有3折優惠

WordPress

wordpress-banner
wordpress-banner

WordPress 開始於 2003 年,當時只有一些簡單的代碼,與少數的使用者,他們藉此提升日常寫作排版的便利性。自那時以來,它以逐漸成長為目前世界上最大的自我架設部落格工具,也被數以萬計的網站所使用。

CMS 系統市佔率
CMS 系統市佔率

WordPress 是一個 PHP 為主體的開放原始碼專案,全世界有數以百計的人正在為它付出心力(多於大多數的商業平台)。

WordPress.org  vs  WordPress.com 有差別嗎? 

WordPress 分為 wordpress.org 以及 wordpress.com 兩種,不管哪一種都擁有 wordpress 網頁製作軟體的特色,如:免費架設網站、寫Blog平台、網路開店平台等..。

wordpress.org 優缺點

優點:整體來說開放性高、可自己管理網站程式碼、可自行管理虛擬主機、可在後台免費安裝wordpress外掛和主題(wordpress重要特色之一)、夠帥(咦!  😳 😳 )

缺點:網域申請、主機架設都要自己來,對於想省事的人可能會覺得麻煩一點。

wordpress.com 優缺點

優點:網域申請、虛擬主機架設,他們都已經幫你搞定,通常在安裝時,只要不斷的填資料然後點下一步,就可以安裝完成,簡單來說就是省事。

缺點:附屬在 wordpress 公司底下由他們直接管理,自由度低,如果你想安裝外掛是需要付費的,無法管理自己的虛擬主機(沒有FTP帳密)。

WordPress 網站範例,如何組成?

WordPress主要分成「主程式」、「外掛」、「佈景主題」三種。

主程式:
目前 WordPress 由 wordpress.org 維護和發展,在台灣也有 WordPress Taiwan正體中文 社團,可供入門者詢問或老手技術研究+探討,目前社團人員有2W多位,對於想要學習 wordpress 的朋友來說,是很好的資源。

外掛:
Wordpress 在外掛上的表現非常全面,大多任舉你想擴展在網站上的功能,都有程式開發者開發完畢,如:社掛、Email、網站優化、SEO、外觀主題、論壇討論區等 .. ,可說是超級豐富。對於最近電子商務,也可以使用Woocommerce,就可以擁有自己的網路商店平台了。

佈景主題:
Wordpress 提供多數免費的佈景主題,在其內部系統就有許多可以選擇,若不喜歡,在網路上也有許多開發者開發的免費主題可以下載,若想功能更全面的話,也可以使用付費主題。

envatomarket 是國外可以購買主題和外掛的知名網站,也可以來這裡逛逛。

WordPress 教學全文看這:安裝+前後台教學+主題外掛推薦等,完整學習 icon-arrow-down icon-arrow-down

WordPress教學 :25個詳細課程(含安裝+主題推薦)

看完這裡,對 wordpress 是不是又更加了解呢 😆 😆


subject-12

12. Google、Yahoo、Bing網站登錄

前言
這篇是手動提交 Sitemap 教學流程(網站登錄),若是你使用網頁製作軟體架設如 wordpress,內部也有外掛:Google XML Sitemaps 可以幫你生成 Sitemap 和提交給 Google、Bing 搜尋引擎。

但寫了這章節是想讓大家對網站登錄有更深一層的認識,這是直接在Google上操作的,如果照步驟走,是100%有提交出去的,還有多懂一些知識,這樣也比較帥 😎  😎

網站登錄是什麼?
網站登錄的目的:「 主動將網站提交給搜尋引擎,讓使用者可以透過關鍵字排名,找到你的網頁 」,目前台灣搜尋引擎主要是Google、Yahoo(搜尋引擎已經和Bing合併),所以 Google 註冊網站就使用Google search console,Yahoo 和 Bing 註冊網站就使用 Bing網站管理員

因為每天新增的網頁十分的多,主動出擊提交文章給搜尋引擎,會加速你網頁被搜尋到的速度,所以網站管理員(Google search consolebing webmaster)是不是非常重要呢 🙄 🙄

搜尋引擎數據比較
目前全球搜尋引擎市場,幾乎都由 Google、Yahoo、Bing 三家所瓜分,讓我們來看看下面的圖表:

Bing-vs-Google-Search
Bing-vs-Google-Search

第一名 Google 高達 64% 的搜尋引擎市場,第二名 Bing 也有 22%,第三名 Yahoo 則是佔了 12% 左右,由數據也告訴我們,如果想獲得網路流量,往這三大搜尋引擎做 SEO 優化準沒錯。

接著再來看這張,與我們比較相關的國家,搜尋引擎比例:

Google、Yahoo、Bing網站登錄
Google、Yahoo、Bing網站登錄

會發現台灣是 Google、Yahoo 寡占市場(搜尋引擎已經和Bing合併),若想在 Google、Bing 取得良好的關鍵字排名,最重要就是先到 Google網站登錄Bing網站登錄

最後,推薦一個可以免費 sitemap 製作工具 xml-sitemaps 。

目前一天最多可以生成 500 頁,對於中小型網站很夠用了,生成完成後提交出去,一切順利的話將看到提交的網頁資訊囉(收入需要時間) 😆 😆

P.S 網頁收錄需要些時間,要耐心等候嘿 🙂  🙂


subject-13

13. CloudFlare(CDN)& SuperCacher

CDN 是什麼 &優點?
CDN 是什麼呢?全名是「 內容傳遞網路 」(Content delivery network 或 Content distribution network)。

Cloudflare-banner
Cloudflare-banner

簡單說 CDN 伺服器分散於全球各地,會去抓取你網站的內容快取,當網頁瀏覽者進行搜尋,CDN 會找取它最近的 CDN 伺服器(如果你人在美國,就會去讀取美國的 CDN 伺服器),並把原來存取在裡面的網頁內容取出,最後呈現在瀏覽者面前。

Cloudflare示意圖
Cloudflare示意圖

優點就是:可以節省主機流量、網站全球加速、分散風險、降低主機被攻擊的機率等(不容易找到你真實主機的位置)  ..

小缺點:但使用 CDN 有時候也會發生修改後但前台沒變動的狀態,這是後就要清除一下 CDN 的暫存才會看到新畫面唷 😆  😆

新版的 CDN 和 SuperCacher,請看 新版 Site Tools 工具,下面是舊版 SiteGround 工具介紹。

CloudFlare 是什麼?
CloudFlare 是一家提供CDN服務的公司,也是目前最廣為人知的,國外有眾多大公司均使用其服務,如:nasdaq、cisco等 ..,且背後有微軟、Google、百度等贊助,所以想啟用CDN服務,先使用CloudFlare 就對了。

CloudFlare 簡易教學
到 cPanel 選取 CloudFlare 開始管理,一開始雲朵會是灰的(代表還沒啟動),正確啟動後會變成橘色雲朵,且會出現「Manage」的按鈕(可以管理DNS),如下圖:

cloudflare教學
cloudflare教學

進入Settings面板,我們會看到許多CND功能,我用紅筆標注地方,是比較需要留意的地方,其他都用默認就好,如下圖:

cloudflare教學
cloudflare教學
  • Cache Purge(快速清除):當使用CDN時,會發現有時文章修改了,但前台沒反應。是因為讀取到分流主機的舊檔案,但實際上主流主機上的檔案已經改變,這時就可能要用到這個按鈕,快速清除舊檔案(小提醒:太頻繁更新可能會拖累主機速度,必要才使用他)。
  • Development Mode(開發者模式):當有修改如 html / css / js 等.. 程式碼時,可以開啟這個模式,只要有修改,前台都會立即見效。在開啟3小時之後系統會自動把此模式關閉,所以如有頻繁修改網頁,這個會比較建議使用。
  • Auto Minify (網頁優化):多數html / css / js 程式碼都是適合閱讀的模式,但如果沒壓縮(優化),有時會造成線上資源比較大,網頁會稍微讀取慢,這時就可以把這3個按鈕打開,讓系統自動優化。(我自己有開著 😆 😆 )

經過這章節,相信你已經充分了解,CDN介紹、優點、操作方式。

但就算不是使用SiteGround主機也沒關係唷,這邊附上他們官網連結 Cloudflare,有興趣可以去他們官網看看,照著流程走,一樣也可以在你的網站上加上CDN唷 😆  😆

SuperCacher簡易教學
SuperCacher 是 SiteGround 開發的一組「超快速緩存」程式,該程式還強調有:4倍速網頁、優化多數應用程式等.. 。

實際使用過後,發現速度真的有變快,不知道是否有4倍速這麼快XD,但確實快很多,見下圖:

SuperCacher教學
SuperCacher教學

操作步驟:首先到 cPanel 選取「SuperCacher」,選 Level1 並在下面新增自己的網址(下面是我的官網網址),然後再記得把按鈕打開就完成了,非常容易上手。

SuperCacher教學
SuperCacher教學

SuperCacher 還有 Level2 和 Level3,在 Level2 中 SiteGround 還有自行開發一個給 wordpress 使用的外掛,可以直接擴充這項功能(wordpress 外掛,搜尋:「SG Optimizer」),來完成Level2 – 3的功能唷 😀


subject-14

14. 網頁製作平台

目前評價比較好的網頁製作平台,有Wix、Weebly、Strikingly ..使用他們就算不會程式碼,
也能成功架設網站唷!

這邊跟大家教學,使用這三款網頁製作平台做出一個漂亮的網站,最後再來做一個簡單的評比,我們開始吧 😛  😛

Wix

首先進入 Wix ,點擊「Get Started」,然後選擇登入方式,進行註冊,目前提供Email、FB、Google註冊方式。

Wix目前平台上還沒有中文化,如果英文沒這麼OK的,別忘了我們有Google翻譯 😎  😎

wix教學
wix教學

註冊完成後,依照指示點擊,Wix提供兩種個人網頁製作的方式,

  • 左邊:使用Wix ADI,會依照你想創造的類型:如:部落格、作品集等進行模板推薦。
  • 右邊:自己選喜歡的模板,裡面有好幾百種供你選擇。

我們選擇右邊的模式,製作個人網頁,如下圖:

wix教學
wix教學

進去後,選擇一款你喜歡的模板,開始進行編輯,下圖是我開始編輯的畫面:

Wix是一款標準的「所見即所得」網頁製作平台,這邊我劃分了3區塊:

Frank-wix教學
小犬程式-wix教學

頁面功能區(綠色):由上到下分別是:

  • Menus & Pages :新增頁面和選擇編輯頁面的地方。
  • Background:背景選擇。
  • Add:新增文字、圖片、按鈕、輪播圖、功能選項的地方,這部分是編輯的核心。
  • Add Apps:Wix有開發一些外掛,可以用來新增如社群、Blog擴充功能。
  • My Uploads:選擇你上傳的資料,當作素材。
  • Bookings:類似行事曆的功能。
  • My Blog:文章管理區,新增文章/編輯文章的地方。

拖拉編輯區(橘色):所見即所得的編輯區,可點選修改文字、圖片、大小等。

系統功能區(紅色):主要是儲存、預覽、發佈網站、一些系統功能等選項。

當完成網頁製作後,點選系統功能區(紅色)的儲存(Save)、預覽(Preview)看看樣式,若一切都沒問題我們就來進行發佈(Publish)啦 😛

如果順利成功,你也會跟我一樣,看到你的網頁製作成功囉 😆  😆

wix教學-完成頁面
wix教學-完成頁面

順帶一提,wix試用期14天,之後就需要收費了。

由於是使用第三方網頁製作平台架設的網站,所以一開始網域都會是他們的子網域(上圖紅色標記的地方),加上會有wix廣告,所以如果想要申請自有網域或是免除廣告,就要付費升級唷!

Wix額外教學

該如何更改網站名稱、網域名稱呢?來看看下面的教學:

首先進入要編輯的網站,然後點選「Dashboard」 → 「Manage & Edit Site」,開始設定網站基本訊息,如下圖:

wix教學
wix教學

接著會看到Site Name(網站名稱) 和 Site Address(網域名稱),這兩個就是要更改的資訊啦,點擊即可設定!

wix教學
wix教學

Wix收費費用

wix費用列表
wix費用列表

先來看看最熱門的「 Unlimited 」方案功能中,比較重要的 2 個內容:

  • 連線個人網域:自訂網址名稱
  • 移除 Wix 廣告

有自己網域是基本款,加上去除惱人的 Wix 廣告,都是付費版的優點!

若未來要用 Wix,挑選哪種方案,就看每個人的需求了 😛 😛

Weebly

Weebly 評價在台灣不比 Wix 遜色,讓我們來看看 Weebly 教學文章吧!

點擊紅色框,註冊會員並開始 weebly 網站架設 ,如下圖:

Frank-weebly教學
小犬程式-weebly教學

照著步驟往下點,我們就可以開始選擇主題啦,選完喜歡的 weebly 主題然後開始編輯,如下圖:

weebly教學
weebly教學

接著會跳出「選擇網站域名」,我們先選擇「weebly.com子網域」,再點「繼續」下一步,如下圖:

註冊新網域、使用您擁有的域名,這兩個都是weebly付費功能,先選擇子網域是weebly免費的。

weebly教學 - 網址
weebly教學 – 網址

再來會看到weebly範例區(參考下圖),

  • 左側(紅框):可以添加文字、圖片、輪播圖、地圖、聯絡表單等,其實跟Wix網站滿像的。
  • 上側(淺藍框):可以新增頁面、更換主題、網站/網域申請、和最重要的發佈網站功能。
  • 中間(所見即所得):網站的編輯區,用「所見即所得」的方式設計。
weebly教學 - 編輯區
weebly教學 – 編輯區

我有標記幾個上側(淺藍框)的功能:

  1. 頁面:新增頁面、修改頁面的地方。
  2. 設定:命名網站名稱、修改網域、SEO設定等.. 功能的地方。
  3. 發佈:就是發佈文章囉!

接著我們就可以動手來玩玩啦!Weebly 可以用拖拉的方式,讓你一步步完成網站。

當看到網站快完成,我相信你也會很有成就感的 🙂  🙂

Weebly收費費用

weebly 收費費用
weebly 收費費用

那如果有電子商務的需求呢,需要選擇 Pro 以上方案,才有支援唷!

至於想使用哪種方案,就看個人需求囉 😎  😎

Strikingly

Strikingly平台,也是一款容易入門的網頁製作平台,除了Strikingly官網教學是中文,Strikingly在畫面設計上,也是簡單明瞭、美觀,果然應證了他的宣傳文案 ..

Strikingly - 網站描述
Strikingly – 網站描述

好的!我們開始Strikingly教學吧,首先進入 Strikingly台灣

Strikingly 需要有個人資訊才能做使用,當然右下角還有小小的FB註冊選項可以使用(想要個資的FU 😳 😳 ),如下圖:

Strikingly-官網
Strikingly-官網

接下來挑選喜歡的模板,可以藉由分類會更容易挑到喜歡的哦,如下圖:

Strikingly-模板選擇
Strikingly-模板選擇

選完模板後進入內容編輯區,來看一下淺藍的區塊,分別是預覽、設計風格、發佈、設定等功能,主要設定大致涵蓋在這裡,那右區就是「所見即所得」編輯區,就跟Wix、Weebly一樣。

Strikingly-編輯區
Strikingly-編輯區

當然最基本的,需要改一下網站基本資料、網域申請等 ..,如下圖:

Strikingly-網站編輯
Strikingly-網站編輯

順利把Strikingly範例完成,我們就進行發佈,就會看到你的可愛網站正式上線囉 😆  😆

Strikingly-個人網站
Strikingly-個人網站

只不過Strikingly免費版的網站,會有惱人的廣告,他是放在畫面底部 🙄  🙄

Strikingly收費費用

Strikingly收費費用
Strikingly收費費用

Strikingly 費用分成三種,這三種都有自訂網域功能(免費版沒有),且都有去除 Strikingly 廣告、電子商務等 .. 功能,只不過基本款最多只能上5種商品 🙄  🙄

使用 Strikingly 網站,選擇專業版以上比較好(功能比較全),直接購買 2 年也會比較划算。

「專業版」跟「VIP套餐」方案最大差別在上架商品數多寡,至於想使用哪種方案,就看個人需求囉 😎  😎


subject-15

15. 網站設計公司挑選

除了免費 網站架設,或許你網站需要很「 客製化 」功能,如特別的會員管理系統、購物車網站設計、SAAS(軟體及服務)等 ..。

trivago客製化網站
trivago客製化網站

舉個例子:像 Trivago 網站,相信不管是什麼網頁製作軟體(平台),都無法做出來吧 .. 😯  😯

免費網頁軟體無法辦到時,如:wordpress(雖然很彈性,但還是有上限),就需要付費請網站設計公司,協助你架設網站了。

本章節會教大家如何挑選好的網站設計公司,需要注意些什麼,還有 網頁設計流程 等概念 ..。

網站設計公司挑選,重要3點:

1. 公司 OR 個人(SOHO族)

2. 網頁設計作品集

3. 網頁設計報價價格

知道這3點後,接下來我們各別來說明細節部分:

1. 公司還是個人?

網頁設計網站的外包市場,大致上可以分公司、個人網頁接案(SOHO族)這兩種。

如果要選擇的話,我會推薦選擇「 公司 」協助架設網站,而不是「 個人 」接案,原因是:

[ 個人:可以說不幹就不幹 ,公司:員工不幹,老闆可以再請人 ]

通常一個人要在網頁接案領域長久經營,除非本身業務力強,不然是很容易中途放棄的,若是幫你架設網站的人不做了,你的網站資料可能就不翼而飛了。

當然也有公司倒的,就像個人接案後來不做一樣,但公司穩定性通常比一個人高很多。

大多數人,會請網頁製作的人 or 公司代管主機,如果個人不見要找到是比較困難,公司的話還比較有辦法追溯。

當然相比「 請人代管主機 」,我最推薦的是「 自己管理主機 」,因為程式碼+資料庫都在你手上,可以放一百萬顆心,麻煩的是要懂些架設網站觀念。

( 還好這篇文章,就是在教你這些技術 😎  😎 )

這邊也建議,不管是請個人 or 公司製作網站,假如是請網頁設計公司協助你代管主機,切記一定要拿到完整的程式碼,不然到時候人或公司怎麼了,你的錢也白花了。

記得,如果是請網站架設公司製作網頁,也先打聽一下公司成立多久,也會安心許多!

我來整理一下重點:

1. 找公司製作比找個人還來的安全。

2. 自己管理主機是最好,沒辦法的話請拿到你網站程式碼。

3. 打聽一下公司成立了多久。

2. 網頁設計作品集

比起網頁設計報價費用,我會認為公司的作品集(範例網站)更加重要。

可以做個小實驗,點進喜歡的網頁設計公司作品集,隨機挑選 3 – 5 個網站,之後幫你架設的網站,大概也會長那樣子。

目前在網頁設計的市場,很多人喊價喊到5000、8000做一個網站,我心裡也是點點點,看看他們的作品集吧,你會有答案的 🙄  🙄

其實一分錢一分貨,當然如果真要花錢做網站,一定要貨比三家不吃虧,但 .. 我會提醒的是,千萬不要把價錢當唯一,不然做出來很醜,你會很想哭的相信我。

還有一個判斷這家公司設計品質方式,就是看他的官網設計的如何,如果很醜,請三思而後行。

想想他的官網都長成這樣了,你的網站設計會好看到哪裡去,是吧?

小提醒:網站設計品質比費用還重要!

3. 網站設計報價價格

最常見的架設網站費用,就是 套版客製化 兩種,但最近由於網路服務的興起,有些網頁設計公司也搞了個 租用型 的方式,所以目前大致上是這三種。

1. 套版方案

2. 客製化方案

3. 月/年租型方案

1. 套版方案

就算是 Rwd 網頁設計,如果只是一般的企業形象網站,有超過 10 萬就算貴了。

如果是購物網站套版,5 – 20萬(或更高)都有可能,因為裡面可能有公司開發好的會員系統、商品管理、訂單系統、客服系統等 .. ,功能多自然價格也高,是合理的。

要注意的是,是否有需要用到這麼多功能,畢竟剛開始經營網路商店,創業維艱,衡量自己需求找到最適合自己的套版方案,是要做點功課的 😉  😉

2. 客製化方案

客製化方案的網頁設計報價,是沒有上限的,對的你沒看錯「沒有上限」!

如果需要很「 客製化 」的,教你一個跟網頁業務溝通的方式,先告訴他你的預算,方便他在你的預算內,幫你搭配功能。

網頁設計範例 - 客製化網站
網頁設計範例 – 客製化網站(企業+購物+賽事等功能 ..)

上圖,是客製化的購物網站設計,還結合了跑步的報名系統、折扣系統、商家定位等功能 .. 想當然費用會比較高。

客製化方案的網頁設計報價費用,從10萬、20萬、50萬、甚至100萬都有可能,主要還是看需求而定。

使用客製化方案,可留意下面幾點:

  1. 客製化網站時,請先告訴業務你的需求和預算。
  2. 貨比三家不吃虧。
  3. 設計品質比價格更重要!

3. 月/年租型方案

使用租用型方案,背後的運作方式是原來一次性的買賣改成分期方式跟你收費而已,但最終網頁設計網站,還是不屬於你的 .. 所以,除非是以下兩種狀況,不然不太推薦 😯  😯

如果是我,假如要用月租型方案,會只會用在這個情況:

一次性網站設計費用太高,先月租試看看水溫

寫到這裏,是不是對挑選網站設計公司,有了一些概念了呢?希望能幫助你,找到理想的網站架設公司唷!  😆  😆

接著,對於一個完整的網站組成,主要由「設計」+「程式」兩塊構建而成,

下一篇我會跟大家分享「設計」和「程式」的教學和資源,提升大家對網站架設教學的 Know-How!


subject-16

16. 網頁設計教學/資源

有人問我說,若自己想學習架設網站(類似網頁設計師),而不是用軟體或外包,那需要會些什麼?

我回答:一個完整的網站,包含兩個重點「設計」+「程式」層面,目前所看到都是。

網頁設計(程式+設計)
網頁設計(程式+設計)

網頁設計 – 業界小概念

在網路剛剛開始盛行時,若有個網站就很帥了,「設計」那時還不是很重要。但現在,如果rwd網頁設計不好看,那「跳出率」自然就會高,當然得不到好的Google網站排名。

「設計」完成的下一步,就輪到「程式」開始實作啦!

「程式」部分比較理性,任何一個功能實現,都需要合乎邏輯的程式碼,也代表需要花很多時間 (設計的越是複雜越是 ..),所以常會聽到設計師需要和工程師「溝通」,就是這樣來滴!

若是設計的太天花亂墜,再強的工程師也做不出來,所以在網頁設計業界,這兩者達到一個平衡並完成作品,是最好的 😆  😆

接下來,我整理了一些「設計」和「程式」的相關資源。

架設網站(教學+課程)資源

網頁設計「靈感參考」:

Dribbble:最有人氣的設計靈感網站,挖寶的好地方。

Behance:支援中文版,後面有Adobe老大哥站台。

Pinterest:圖片界的Google,有大量圖片素材可供搜尋,很多人愛不釋手。

站酷:眾多網頁設計作品案例,靈感來源參考。

Awwwards:常會舉辦設計作品投票,當作設計趨勢指標。

CollectUI:眾多網頁設計作品案例,靈感來源參考。

網頁設計「軟體教學」:

學UI網:學習PS、 AI等軟體好地方,也有影片學習。

UI中國:中國知名的UI/UX設計,教學分享網站。

PS Lession:Adobe 的 photoshop 相關頻道,分享很多使用PS的影片教學。

網頁設計「素材來源」:

iconfinder:很多扁平化 Icon 圖示可以使用 ,適合作為介面設計的圖示來源。

flaticon:國外有名的icon素材網站,挖寶的好地方。

sketchappsources:提供 Sketch 軟體可用模版與素材的網站,收錄許多漂亮的樣板。

pexels: CC0 圖片搜尋引擎,收錄了許多網站的 CC0 圖片,方便尋找想要的圖片。

pixabay: 大量 CC0 圖片可供搜尋,適合用在商業文章或網頁設計範例中。

freepik:提供大量圖像設計素材的搜尋引擎,滿多向量圖型可以下載來使用。

網頁設計「程式學習」:

W3School在線課程(簡中):蒐集大量程式語法的基礎知識點,新手入門程式的好地方。

Codecademy:網頁設計課程/教學,可以從HTML、 CSS 開始學起,註冊會員後有一系列的教學。

Tuts+ Web Design:網頁設計教學網站,挖寶好地方。

Teamtreehouse:主打網頁開發語言的線上學習平台,從HTML、 CSS、 JS、 IOS等.. 都有。

慕課網:擁有多種語言的線上視屏教程,網頁設計、 APP開發都有。

網頁設計「程式編輯器」:

sublime:編輯器的入門款選項,簡潔風格讓很多使用者喜愛。

vscode:由微軟開發新一代強大且優秀的編輯器,內含豐富外掛可供安裝。

在這章節,相信大家應該也初步了解,一個網站設計組成的基本要素了,也分享了一些網頁設計資源,如果更有興趣的,還可以成為「設計師」「工程師」一起入坑(喂~)  😆  😆

分享這些也不是說一定要成為「設計師」或「工程師」,才能架設一個漂亮的網站。

但若想請網頁設計公司製作漂亮的網站,自己也要懂些基本概念流程才可以,才不會要求設計師做出「很雷」的網站。

可以學習的:A)基本的設計美感  B)程式的話,稍微懂工程師主要是用哪些語言開發的即可


subject-17

17. 開始起飛!

恭喜啦!!如果有從最上面看到這裡,在架設網站這塊領域,你應該也了解網站如何從 0 到 1,從建立到完成 ,還有 網站架設 的相關概念,一次通通灌輸給你 🙂  🙂

startup-rocket
startup-rocket

許多人認為 架設網站 一定要工程師才能完成,但事實是,在現在 架設網站推薦 這麼多下,就算是門外漢,其實只要照著步驟走,也能親手架設屬於自己的網站(上面我教學了許多種方式)。

現在輪到你了 

我在這篇文章,示範了多種從 0 到 1 的網站架設範例,也提到了多個知識點,如:網站架設教學、網頁製作軟體、網頁設計公司挑選等 .. 多種教學。

除了這些,想更上手 WordPress 前後台教學嗎?25個課程,前往學習 icon-arrow-down icon-arrow-down

WordPress教學 :25個後台課程(含安裝+主題推薦)

還是你在操作上,有遇到的任何問題?

無論是哪種情況,我非常歡迎你在下面的評論裡告訴我,你學到、遇到了什麼?

如果可以,我也會幫忙大家解惑的!

資料參考(若沒附上的,再麻煩提醒我,我在加上去,感謝~):

三個CMS系統的比較

Bing vs Google: SEO Strategy Across Search Engines

CloudFlare: 維基百科

奧革設計資源彙整

DNS: 維基百科

30 COMMENTS

    • 嗨~方先生你好:
      剛看了你的連結內容,裡面功能算是簡易版的淨銷存系統,是比較客製化的網站功能,採用PHP程式語法架構出來的。

      建議如果公司內部有技術團隊,可以和公司溝通請他們協助開發;若是沒有的話,可以找尋網頁外包(公司或是個人Soho,優缺點和注意事項,文章內有敘述)。

      祝你一切順利:)

  1. 您好,看到您的文章讓我受益許多,但有些疑惑
    不曉得如果要從網頁製作平台轉到網頁製作軟體或是自己架網站,或者從網頁製作軟體轉到自己架網站的時候
    之前建立的會員系統會不會有無法轉移(會員要重新註冊)的情況發生?

    • 嗨~HeZe你好,首先很開心我的文章有幫助到你:)

      切入正題,在平台上的移轉,舉例:如果原來用wix(網站製作平台),想要把會員移轉到wordress(網頁製作軟體),你可以先看wix後台,有無開放會員資料匯出功能,若是有的話就輕鬆許多,但以我的經驗來說多半沒有(因為多半不希望你跳槽)。

      如此一來,只能用人工手動新建會員方式,在wordpress建置會員檔案,如此一來也不用再發信給原來會員,請他們重新註冊,不然多半會有會員流失問題。

      如果是要把wordpress的會員,匯出到自己架設的網站,應該比較有機會實行,你可以先搜尋是否有類似的外掛,協助你進行。

      但如果沒有的話,可能還是需要人工手動重建會員,或者可用程式,爬wordpress的會員資料+頭像等資料..進入到你自行架設的官網,也可以達成。

      因為跨平台的移轉資料是算比較大的工程,各家軟體本來就不一定會相互支援,祝你一切順利:)

  2. 您好, 謝謝你這麼詳細地解說, 讓我終於有點頭緒…

    另外有個問題想請教: 如果想做互動性較高的新聞網站, 也打算初步的設計和開發外包給網頁設計公司製作, 比較好奇是在和他們洽談前, 就要有一定量的新聞內容了嗎?(避免網站架設好但產品還沒好?)
    或是能夠先有網站, 再慢慢累積內容?如果是前者的話, 有建議要提供設計公司多少的內容量嗎?

    非常感謝!

    • WenYen 你好,基本上這兩種模式都可以,但如果怕網站成品出來,沒有內容會有點單調,那建議可以先準備幾則文章,等待網站完成後先上傳幾則(自己上 or 請外包公司上),免得網站看起來空空的,其他的文章再慢慢製作就可以。

      希望有幫助到你:)

  3. 請問為何我已經使用Let’s Encrypt加密,也出現如同您顯示畫面表示已經成功,但為何在一鍵安裝WordPress的Choose Protocol時,選擇https:// 的選項是出現A trusted SSL Certificate was not found呢?
    是因為DNS指向剛設定的關係嗎?需要等待時間嗎?還是有哪裡出問題呢?謝謝您指教!

    • HI,CarolHuang:

      有的時候可能是剛才設定完成的關係唷,可以試著等一下。

      或是先安裝好wordpress,再用Let’s Encrypt加密。

  4. 想請問,只想做一個最基本的公司網頁(介紹公司提供的檢測項目而已),是用weebly自己好呢?還是請人架設好呢?
    主要是希望能夠上搜尋引擎,讓公司能見度提高
    如果是用weebly做,看他方案內也有優化的功能,這樣就能上收尋引擎嗎?還是也是要自己上google去申請
    不好意思….問的問題或許很好笑…..但我真的是不太懂….再請您指教,謝謝

    • HI Amy:

      若只是簡單的形象網站,可以使用上面的免費架站軟體,他們內建都有 SEO優化(應該也會協助做網站提交),只要公司名稱沒有含熱門關鍵字,是滿快在瀏覽器上可以用公司名稱搜尋到自己網站。

      若是想要自己控制 SEO優化,建議你可以使用 wordpress 進行網站架設(有網址+主機費用),但又須比用 weebly 這些軟體,還要多學一些東西補足了,好處是你可以自行變更任何東西。

      希望有幫助到你唷:)

  5. 有幸拜讀您的文章 真的是相當的認真且用心
    能夠看出筆者地努力的心血及想盡可能完善各方面介紹的認真態度
    在此感謝您的分享

    順便請教 如想精進有關網頁前端布置及後端資料處理的相關技術
    例如 必要js套件的學習應用 學習資源.書籍等等
    有沒有什麼個人推薦的呢?

    • HI Hower:

      謝謝你的鼓勵和支持:)

      若要學習程式技術,目前來說網站上的資源已經很多了,你可以參考 w3school(簡體教學),會入門比較快,從 HTML => CSS => JS => PHP 逐步學習,從前端入門,若是對後端有興趣,可以玩看看 PHP 比較好入門。

      JQ 是 JS 的一種框架,可以幫助你完成許多前端功能(有很多套件,都是基於 JQ 開發),在學 JS 打完基礎後,也可以玩看看 JQ ,希望有幫助到你唷:)

  6. 因為最近才剛購買網域、租主機也是在學習階段,有幸拜讀您的文章,真的是很感謝。讓我對整個架構又更清楚了。相對比其他架站網站來說,您的網站呈現的是更清楚的是整個架構與觀念的釐清,剩下的就是使用者自己再去找更深入的議題學習。對我受益良多。~感謝!!

    • Hi lydia:
      有關 Wix 上的付款功能,是他們內部綁定的唷!簡單來說,就是要配合他們的金流廠商,是無法自己串接的,除非是使用 wordpress 等開源軟體,進行網站開發。

  7. 剛個人創業,許多事都在起頭,一步步的戴著鋼盔往前衝
    好不容易把FB粉專搞懂了,也把資料漸漸豐富起來
    下一步就是個人網站了!
    感謝版主豐富又詳細的架站介紹,對我這個網路資訊新手有莫大幫助
    有信心繼續往前衝了!

    • Hi 傑瑞:

      看到你一步步往你的夢想前進,很替你開心!

      很開心我的文章有為你帶來幫助,祝你一切順利:)

  8. 感謝筆者用心分享關於網站架設的資訊
    初學架站真的很多東西需要慢慢去學習理解
    像是虛擬主機租借等也得自己去評估選擇
    不論什麼都是博大精深呢XD

    • HI bella00xx:

      你好,是可以的唷。

      照著本站的流程申請完成 SiteGround 後,登入 SiteGround 然後前往 cPanel ,在這裡面可以上傳你的 database(使用 MySQL DataBases & phpMyAdmin),然後再用 FTP 工具,把網站資料上傳到 server 即可。

      希望也幫助到你唷:)

發表迴響