網站架設 |
掌握專業的設計與開發技術,
為您的網站創造無限價值

為什麼Gremlin Works
與眾不同?

Intro

Gremlin Works擁有專業用心的網站設計服務,與多年網站建置的應用開發經驗,深知網站最關鍵的核心在目標與定位。我們透過與客戶溝通了解您的需求,不論是購物網站、形象官網的架設,還是ERP與CRM系統建立,或是客製化網站、一頁式網頁設計等,利用程式撰寫和UI/UX設計等技術,提供最有效率的網站架設解決方案,並進行完整的分析,擬定SEO企劃及品牌行銷策略,協助您打造心目中理想的網站,讓Gremlin Works為您的企業創造最佳效益與無限價值。

Gremlin Works 網站架設的六大特色

網站目標分析與品牌策略

透過品牌價值與目標客群分析,定位網站發展方向與成效,建構品牌與服務產品在網站上的完整連結性,佈局客戶體驗與策略需求,提升網站關注瀏覽量,創造網站所帶來的企業價值與效益。

模擬體驗UI/UX設計

以良好的使用者體驗為核心,運用UI/UX 企劃與設計技術,透過 Wireframe 製作,準確繪製所有功能與模擬使用者操作,並進行設計與規範製作,預覽網站視覺呈現與態度,以利進行下階程式開發的網頁製作。

網站SEO內容企劃

針對企業性質及需求擬定的SEO優化企劃,專注於改善關鍵字報告、內容行銷、內部連結等方向,為您打造穩定排名的關鍵字佈局。我們將定期分析競業網站、線上流量與市場狀況,確保策略符合搜尋引擎的演算法更新。

網站程式開發與建置

網路架設技術與程式應用整合是重要的核心基礎,包跨國際企業網站應用整合、中小型網站、工具應用平台、內部服務功能平台、ERP、CRM導入串接… 等項目,透過完整分析與計畫,提供最適切的開發技術與工具應用及物聯網整合。

網站設計與體驗優化

順應目前的主流裝置與使用趨勢,設計符合使用者習慣的網站,其中RWD響應式網站設計與一頁式網頁,不僅提供使用者在不同環境下都能有最佳的瀏覽體驗,還能提升SEO排名與企業形象。

網站維運與營運

網站在線上發佈後,持續提供維護與營運的服務,包含內容企劃、設計製作、功能製作更新、經營代管等工作執行。國際企業的網站平台營運執行與技術支援,有效提升數位化與網路化效能與創造利潤。

我們提供了哪些網站架設服務?

購物網站架設

面對網路世界的龐大商機,該怎麼架設自己的購物網站,如何讓自家品牌的產品與服務在同行中展現優勢呢?Gremlin Works提供全方位「購物網站架設」方案,幫你一次分析我們的購物網站架設特色!

  1. 根據客戶需求訂製的基礎軟體包,包含獨立電商網站架構、、操作簡易方便,讓客戶可隨時客製化自己的產品。
  2. 雖然Shopify、Shopline及Cyberbiz等電商平台容易上手,對於新手賣家友善,但制式模板上的設計受到很大的限制,也無法擴充功能。選擇我們的購物網站架設服務,不只可隨意設計網站版面樣式,更提供SEO優化的服務,方便商家做未來的電商規劃。
  3. Gremlin Works的購物網站架設服務,與線上各店商平台最大的不同點在於,我們不必每月付費、無須繳交易手續費,也不會有不續約就無法取得網站上所有資料的問題。長遠來說,客製化購物網站架設的費用,其實比每個月付給電商平台的成本來得省很多。

想知道Gremlin Works的詳細購物網站架設服務嗎?立刻進入購物網站架設了解更多。

品牌官網架設

大多數的公司為了增加自家品牌的曝光度,提高企業營收的轉換率,會選擇架設品牌官網。想要打造自己的官方網站,提升企業形象又可以傳達品牌精神嗎?Gremlin Works提供客製化的「官網架設」方案,幫你一次分析我們的官網架設特色!

  1. 我們的客製化官網穩定性高,不受市面上架站平台系統的限制與干擾。透過與客戶的溝通協調,加強品牌與商品的連結強度,明確傳遞產品特色,並有效提升產品的曝光率。
  2. 內建SEO優化系統,以數據分析方式呈現商品頁面流量、商品關鍵字搜尋度等等,不僅方便了解使用者來訪目的,還可以協助企業擬定官網優化的策略,利於鎖定目標客戶(Target Audience),進而發掘潛在客戶並拓展市場。

想知道Gremlin Works的詳細官網架設服務嗎?立刻進入「官網架設」了解更多。

客製化網站設計

如果以上的服務項目都不符合你的需求,別擔心!我們也提供全面客製化的網站設計,讓你擁有自己的專屬網站。Gremlin Works提供專業用心的「客製化網站設計」方案,幫你一次分析我們客製化網站的特色!

  1. 特殊獨有的網站架設與網頁製作
  2. 透過與客戶的溝通,了解客戶明確的架站要求,進一步擬定具體詳細的網站設計畫。

想知道Gremlin Works的詳細官網架設服務嗎?立刻進入「客製化網站設計」了解更多。

一頁式網頁

 一頁式網頁精簡的單頁設計擁有不少優點,包含節省時間、使用者體驗佳、搜尋機率提高等等,許多企業紛紛開始架設一頁式網頁,儼然成為目前網站設計的趨勢。具備一頁式網頁設計的專業技術,是我們的一大優勢。Gremlin Works提供的精美「一頁式網頁」方案,幫你一次分析我們的一頁式網頁特色!

  1. 優質且專業的客製化設計,使用者在介面上的操作簡單方便,也因為其製作容易的特點,可以在短期內快速上線,非常適合做企劃活動的網站。
  2. 我們的一頁式網頁設計方案,不只是網頁製作而已,也提供網路行銷策略的規劃,融合線上與線下的服務,提升企業或活動成效。
    (CTA)

想知道Gremlin Works的詳細官網架設服務嗎?立刻進入一頁式網頁設計了解更多。

如何選擇適合的網頁設計公司?

關於網站架設,應該自己架設網站,還是交給網頁設計公司製作呢?自己架站的成本是不是比網頁設計公司便宜?但聽說自己維護網站費時又費力?業界的網頁設計公司那麼多,究竟要怎麼選擇適合自己的公司呢?

如果你曾有這樣的疑慮,我們都幫你分析好了!可以參考:該選擇網站設計公司還是自架網站?優缺點大分析!,協助正在猶豫的你做出適當的決策!

另外,決定尋求的網頁設計公司的你,可以閱讀「如何選擇適合的網頁設計公司?」,讓我們教你如何做出聰明又適合的選擇!

網頁設計範例

看完了Gremlin Works提供的各項網站架設方案,是否對我們的網頁設計範例有興趣呢?參考更多成功案例並聯絡我們,讓Gremlin Works為您服務,設計您專屬的網站,創造更大的效益!

What is the right website for You?

想架設網站?網站需要改版?網站沒有轉換成效?無論是任何網站相關需求,都歡迎填寫以下的表單,我們的網站專業團隊將與您聯繫,進一步共同討論您的想法及目標,並提供網站設計與架構建議、預估的費用與時程。

如何架設網站呢?分享我們的網站設計秘訣!

你正在尋找適合的網站架設平台嗎?該運用什麼網頁製作的軟體或程式語言?網站建置流程又是什麼呢?想自己動手架設網站卻還是初學者的你,看完網路上琳瑯滿目的教學資訊,不知道該從何下手?Gremlin Works分享我們的專業網站架設經驗,一次補齊你入門前必須具備的重點資訊!

這套網站設計秘訣內容涵蓋5大主題,包含:

  • 網站架設流程
  • 網站架設的必備知識
  • 網站製作軟體與架站平台
  • 網頁製作的程式語言
  • 網站維護與SEO優化

網站架設流程

網域申請、虛擬主機租用與DNS指向設定

如果我們將網站架設比喻成「住家」,「網域」如同網站的門牌,申請網域才能讓我們的網站在茫茫網路世界中能夠被清楚辨識,因此網域名稱通常越精簡好記越好,通常以幾個原則為主:「.com」優先、以品牌命名、去除www、避免使用中文。

虛擬主機可以視為網站的「房子」,需要先有個空間才能存放網站的所有資料,通常自己經營的主機所費不貲,現在許多主機商提供租用虛擬主機的服務,不僅方便更是省下了許多人事和技術成本,而挑選主機的的考量點有:公司、價格、功能性等,其中大多數的人推薦選用國外主機,例如Bluehost和Siteground。

DNS為網路名稱系統,像是「地址簿」一樣,是儲存許多IP位址的資料庫。設定DNS指向的意思如同告訴別人這間房子的門牌就是你家,讓瀏覽者可以輸入網域就找到你的主機,參觀你的網站。

更多網域、虛擬主機和DNS的運作和推薦,在下方「網站架設的必備知識」有更深入的介紹喔!

網站地圖

正式進入網頁製作的步驟前,建議繪製網站地圖(Sitemap)確立網站的架構,並釐清網站架設的目的、目標客群是誰、期望達到的效益等等。

網站地圖(Sitemap):製作Sitemap就像是繪製你的網站地圖,計畫頁面組織以及資訊該存放在哪個位置,讓用戶可以找到他們想去的方向。網站架構的全貌在這個階段會被具體繪製出來,以「頁面」為單位進行架構的確認,透過 sitemap 圖可以知道各頁面的層級關係及如何連結,以及定義清楚靜態頁面及需要後台管理的頁面。

確認網站架構和內容主軸後,就可以開始探討網站呈現的方式。首先,我們要先了解網頁組成的3大要素:Header(頁首)、Content(內容)、Footer(頁尾),每一部分都有它的功能與策略。

Header包含主要的視覺設計和精神,企業Logo也涵蓋在內,是維持網站整體感的重要部分,由於不斷的重複顯示於每一頁,不宜做得太花俏。
Content是變化最多元、最有趣的地方,內容可以用段落(section)組合而成,而段落中可以依照需求劃分數個欄(column),不同的欄數也有不同的效果。

Footer為頁面做收尾的動作,跟Header一樣重複顯示於每一頁,其提供網站的聯絡資訊,例如聯絡電話、Email、版權宣示…等,同時也是SEO的重要項目之一。

圖稿原型

在前置作業階段,不需要太仔細設計外觀,只需把網站架設的配置大略提出並製成圖稿原型(Wireframe & Prototype),主要是為了呈現頁面上的重要資訊與資訊的排版。

圖稿原型 (Wireframe & Prototype):為了避免製作網頁後一直修改設計消耗成本,必須先做出基本的 UI 使用者介面設計圖稿及原型。Wireframe是將所有頁面的功能繪製出來的靜態線框稿,它完全不考慮任何視覺上的元素,目的就是要專注於頁面的主要資訊及編排架構。Prototype 和 Wireframe 基本上目的一樣,是讓我們得知頁面功能及資訊的原型,但差別在於:Prototype 要考慮 UX 使用者經驗!它是像瀏覽網站一樣可以被操作的,並不是靜態,因此能讓你更真實感受網站使用者的體驗。

網站架設基礎指南:客製化最適合您的專業網站

使用案例的執行方針

架設一個好網站並不只是發布一些文章和漂亮的圖片而已,網站設計業界有眾多公司競爭,要讓自己的網站在網路上曝光,除 了分析競爭對手追求知己知彼、百戰百勝,也要了解使用者的行為與目的,掌握使用趨勢利於規劃網站優化方向。

與競爭者的策略分析(Plan & Analyze):

當你在比較競爭對手的網站時,是否總覺得對方經營得很出色,而自己想要進入線上市場,卻缺少網站結構及技術端的資訊分析?其實了解線上消長趨勢是個一直持續的過程,因為網路世界不斷的在變化。你可以從最簡單的開始,注意競爭對手介面設計(UI)、使用者經驗(UX),構想一個你喜歡的網站範本。以後再慢慢深入到文章架構、網頁讀取速度、搜尋引擎優化等等。

進行競爭者分析,知曉對方的優勢後,也需要了解消費者行為(Consumer Behavior),精準切入使用者的想法,才能做有效率的改善規劃。而其中包含5W1H的思考:

  1. 客戶為什麼搜尋到你的網站?
  2. 你的目標客群(Target Audience)是誰?
  3. 客戶來訪你的網站的原因?
  4. 客戶透過什麼方式搜尋到你的網站?
  5. 你能提供什麼樣的服務?
  6. 哪個網頁是你希望客戶進入的頁面?

掌握了這些資訊後我們就能更完善企劃網站整體方向,架設出一個符合使用者來訪需求的網站,成功創造更多商機。

網頁製作與設計

開始網頁製作前,建議可以做幾項事前準備工作:

  1. 找喜歡網站作參考範本:為了讓網站設計的雛型更明確,可以根據網站架構、排版樣式、功能等,將設計的藍圖具體化。
  2. 深入了解品牌形象:透過品牌形象的理解,可以清楚自己的核心價值和想要傳達的理念,因此更確立網頁製作的方向與強調的重心,思考適合品牌形象的網站風格,加強網站與品牌之間的連結。
  3. 線框稿(Wireframe)為網站設計指南:上面提到的圖稿原型,其中包含網站線框稿(Wireframe),以線框稿為主軸設計你的首頁(homepage),可視你的喜好、參考範本等再添加圖片、動畫特效等等美化你的頁面,在視覺效果上吸引使用者來訪你的網站。

前端程式撰寫

雖然市面上有許多不需要太多程式基礎的架站平台,但如果想要完全客製化自己的網站,前端(Front-End)和後端(Back-End)程式撰寫是你不可不知的工具!

前端(Front-End):進入一個網站,映入眼簾的是漂亮的圖片排版和許多連結按鈕,這些畫面與使用者的互動功能就是前端(Front-End)的範圍。前端作為網頁的前台,前端工程師主要打造網站的「門面」,建立流暢、友善的的介面,讓瀏覽者可以順利接收頁面的資訊,並使用網站上的各種功能。同時,不斷優化產品的效能也是前端工程師重要的工作。組成前端的三大語言有HTML、CSS、JavaScript。

如何架設網站:網站架設程式語言有哪些?

後端程式撰寫

後端(Back-End):在前端接收了許多使用者的指令後,後端(Back-End)則是負責管理後台的開發,方便以後長期的網站內容裡。網站的資料內容透過後端的程式存放到網站的資料庫內,資料庫就像一個大型的倉庫,裡頭會分門別類儲存資料,當有需求時,會再透過後端程式將這些對應資料傳送到前端的畫面中。後端的程式語言數量眾多,現今主要的有:PHP、Python、Ruby、Node.js、Go。

現在我們知道了前端與後端各自負責的工作,那它們實際上是怎麼運作的呢?

這邊要提到另一個過程中重要的角色:網頁伺服器(Web Server,可稱Server)。伺服器是存放寫好的程式碼且讓它們可以運作的地方,,當使用者輸入網址連到伺服器時,就能看到伺服器上的網頁,而這時伺服器開始執行程式與儲存資料,這裡就是所謂的後端(Back-End),處理完之後的結果再印出來呈現給使用者看,丟到使用者面前的結果就是前端(Front-End),由此可知,後端負責邏輯運算、儲存資料,而呈現給使用者的結果與畫面的就是前端。

網站架設的必備知識

在開始著手架設網站前,先回想一下你是否具備了網站設計的基本概念?檢視一下是否都做好架設前的準備呢?

  1. 我的網域申請了嗎?我的網域名是什麼?
  2. 我的主機商是誰?主機資訊已經完整從該公司收到了嗎?
  3. 我是否已經正確將DNS指向我的主機位置了?
  4. 我的網站需要資料庫嗎?如果是靜態網站則不需要。
  5. 我需要SSL憑證並且購買好了嗎?或是認為現階段還不需要?

面對上面這些陌生的專有名詞,是不是看得一頭霧水呢?別擔心,Gremlin Works在接下來的介紹幫你一次解惑!

1. 網域是什麼?

網域是什麼?網域申請教學

每個人都有自己的名字,每戶人家也都有自己門牌, 這些都是辨別個體的一種方式。浩瀚的網路上有來自全球成千上萬的網站,當然也需要分別它們的辦法。而每個網站自己專有的名牌,就是網域。以我們Gremlin Works網站為例子,我們的網域便是:www.gremlinworks.com.tw

以下是幾個常見網站的網域:

  • 谷歌:www.google.com
  • 臉書:www.facebook.com
  • 推特:www.twitter.com

要架設網站前,你得先搞清楚你想要申請自己的網域,還是用架站平台或部落格平台上提供的免費網域。這兩個有什麼差別呢?為什麼免費的不用還要考慮?

如果你有用過痞客邦Pixnet隨意窩 XuiteTumblrBlogger 等部落格平台,那你用的就是他們的免費子網域。在類似平台上辦部落格,他們都會要求你設定一個還沒被用過的使用者帳號,而這個帳號名會被用來區分你的部落格網站。假設我們創了一個帳號叫 gremlinworks,以下是我們在不同平台上會擁有的免費網域。

  • 痞客邦:gremlinworks.pixnet.net
  • 隨意窩:blog.xuite.net/gremlinworks/blog
  • Tumblr:gremlinworks.tumblr.com

看得出來這些子網域跟我們自己申請網域 (gremlinworks.com.tw) 有什麼差別了吧,選用自己的網域會給用戶更專業的感覺!雖然使用免費網域是最快速又 ( 短時期內 ) 省錢的方式,但卻也隱藏一些問題,因此建議在一開始就把網站未來發展考慮進去才行。

免費網域會衍生 2 個問題:

  1. 冗長的網域名:立即要面對的問題,就是當你必須曝光自己的網站時,不論是名片上也好,在行銷廣告也罷,往往會是一長串字母,裡面還會交雜平台名字 ( 跟自己品牌無關 ) 的文字。
  2. SEO權重的轉移:你在網站上所有經營累積的成果,都很有可能在日後面臨搬家轉址的過程,而必須得從頭開始,主因是不少平台仍不提供權重的轉移。白話來說,就算你搬家了也重新指向新頁面了,但使用者搜尋時還是會因為舊網站的權重較重而先搜尋到。 各位應該有搜尋過一些文章,頁面點開後顯示「我已搬家,將為你連到本頁新連結」吧?沒錯,就是這個缺點。如此一來,以後使用者要找到你,搜尋結果都要先繞過以前使用的平台頁面。這實在不是長久之計啊!

要去哪裡買網址呢?

  • Namecheap:24小時客服團隊 ( 雖然要用英文溝通,但有問題時,他們 Live Support Team 回覆真的很快!),一年 .com 費用較 GoDaddy 少約1塊錢美金,網友評價高,購買介面簡單。
  • GoDaddy:有中文介面,老品牌網站,全球客戶眾多,僅提供週一至週五客服,購買流程對新入門者較容易產生誤會。
  • PChome買網址:沒錯!萬能的台灣 PChome 也可以買網址,當然介面客服也都是很「台灣」,對於追求親切感的朋友,這也是不錯的選擇。

2. URL是什麼?

URL是什麼?URL和網域的差別在哪?在製作網站過程你一定會看到URL這個名詞,卻一時不知道是什麼。其實,這在生活中很常使用,我們常口語化把它稱為「連結」,也就是「網址」。當你要分享一篇實用的文章,或有趣的新聞給朋友時,你複製貼上的那一串網址就是所謂的URL。或許有些人會有疑問,那URL和網域的差別在哪?所謂的網域是你網站的名字,但仔細觀察後發現,在這個網站中每一頁的網址其實都會不同。 舉例來說:你的網域是 example.com,而你的最新文章的URL肯定會在網域後台加上一些後綴,就像 example.com/blog/post-2019 ,像這樣的字串。基本上,網域只是URL的其中一部分。

有些人在工作時可能需要附上一個連結到信件中,但往往頁面的URL極為冗長複雜,這時請記得善用 Google的短網址工具:https://goo.gl/ 。只要把你的連結貼上去,它自動幫你產生一組短網址喔! 更棒的是,他還有幫你記錄點擊次數,所以你也可以同時追蹤呢。

3. 虛擬主機是什麼?

虛擬主機是什麼?最受歡迎虛擬主機比較

若把架設網站比喻成一個室內裝修的工程,那麼首先你至少需要有一間房子。 不管是小型公寓還是濱海別墅,總是要先有一個房,才能開始動手室內裝修,把漂亮的傢俱放進去。同樣的,你的網站就是需要這樣的虛擬主機空間 (Web Hosting),來存放網站的所有資料。

如果本身沒有工程師在管理網站的話,記得要詢求「虛擬主機」,而不是VPS或實體主機的方案喔!虛擬主機就等於主機商已經幫你蓋好所有的環境,而你只需要把自己的物品搬進去就可以了,對於非工程師背景的人,管理及使用上會比較容易。要去哪裡租虛擬主機呢?

  • 遠振資訊:台灣機房,中文客服,超簡單中文介面,適合對主機相關知識很陌生又有點懼怕的初階管理者使用,好上手。
  • BlueHost:香港機房,價格平價、無限流量、無限容量、也無限網域,相當俗又大碗的選擇。
  • SiteGround:新加坡機房,穩定性很高,客服展現高評價的水準,自家開發的 Super Cacher 功能,也就是讓你的 WordPress 網站瀏覽起來飛快。還有,最重要的還有免費支援 Let’s Encrypt SSL 憑證功能。一整個水平高到破表的服務,也讓近期很多人都轉而投向它的懷抱了!

另外,許多人挑選虛擬主機最主要的考量重點在價格,但是虛擬主機的選擇也會影響網站的SEO排名,以下為幾個可能造成的影響:

  • 網站運作速度:網站的運作速度在使用者體驗裡是很關鍵的影響因素,若網站載入速度快,不僅提高用戶滿意度,對於搜尋引擎認同度也會有很大的幫助。而Google也指出,網站速度是搜尋引擎排名的評分標準之一,由此可見網站運作速度的重要性不容小覷。
  • 網站安全性:網站的安全性,對於企業與使用者都有重大影響。企業方可能有許多重要的數據,如果安全性不佳可能有數據遭竊、遭惡意散播廣告等,而使用者方則可能存在中毒或個資遭駭等風險。若選擇正規的主機商,使網站的安全性得到多一層的保障,網站數據遺失或損壞的機會下降,因此虛擬主機的選擇對於網站安全有一定的重要性。
  • 網站穩定度:網站的穩定度對於使用者體驗也是十分重要的,虛擬主機運行正常與否,攸關網站的運作是否穩定,虛擬主機的品質越好,網站正常運作的時間就會越長、越穩定,假如當機發生機率頻繁、當機時間過長,則須考慮切換主機商了。網站無法穩定連線不僅影響SEO排名,對於網站的跳出率和搜尋引擎點擊率都會產生負面結果。
  • 虛擬主機所在位置:影響網站性能的另一個因素是網站主機的所在位置,大致上來說,當訪客距離主機位置越遠,網站載入速度就會越慢。若網站主要鎖定的市場在台灣,那虛擬主機的位置和服務供應商的選擇,原則上離台灣越近越好,或是直接選擇當地的服務供應商。

4. DNS是什麼?

DNS是什麼?如何設定DNS?

前面我們已經說明了「網域是你的門牌」、「主機是你的房子」,那如何在網路世界讓大家找到你的房子呢? 這時就是要倚靠DNS設定 (Domain Name System)。DNS像是地址簿,確定網域指向主機,讓瀏覽者可以輸入門牌就找到你的房子,參觀你精心設計的家。另外要提醒你,所有的DNS設定變更最久會在48小時才生效。

DNS設定最常使用的有三個記錄 (Record Types):

  • A記錄:將你的網域名稱指向你的主機IP,將網域及主機串接起來最主要的記錄,多數人的需求只要成功設定此項,就可以讓你的網站順利運作了。
  • MX記錄:當你需要用這台主機收發信件時,記得也要將你的 MX 記錄指到這台主機,才能正常使用信箱。
  • CNAME記錄:當你的網站有其他別名時,你就需要設定 CNAME 記錄來連結到正規的網域。舉例來說:你的正規網域是 example.com,你可以使用 CNAME 設定,將 www.example.com 或子網域 abc.example.com 指到 example.com。記得!A記錄是對應IP位址,而 CNAME 則是對應網域。

5. SSL憑證是什麼?

Secure HTTPS
Secure HTTPS icon

SSL憑證是什麼?如何安裝SSL?

在瀏覽網站時,你有沒有注意過有些網站開頭是 https:// 有些是 http://,而且 https 的網站前面還有個小鎖頭? 擁有這個鎖頭的網站就是有特別建立SSL憑證的網站。https的 「s」 就是代表安全性,secure 的意思。透過這個字母來告訴瀏覽者,他們正在觀看的網站是有認證過的,可以放心又安心!因為你申請時必須接受公司資料的審核,而使用者也可以直接點擊鎖頭,看到這些公開的資訊。

哪些人一定要申請SSL憑證呢?

如果你的網站會有記錄個資、商品交易、訂購等功能的,那麼,強烈建議你在準備主機網域時,也一併將SSL憑證準備好。若是消費者在填入個人資訊時發現你的網站不安全,很有可能會打消念頭,嘗試其他網站。

去哪裡申請SSL憑證呢?

除了前段介紹到的 SiteGround 主機商是免費提供SSL憑證,並且可簡便完成之外,其實上方推薦的網域商及主機商都有各自提供SSL購買的服務。 因此,對於網站架設初階入門的人,建議選定好主機/網域商之後,直接選擇他們的SSL憑證即可。

若考量預算,而想轉而選擇免費的SSL憑證的朋友,Let’s Encrypt也是不錯的選擇。

網站製作軟體與架站平台

網路上有許多架設網站的線上資源可以利用,而網站製作方式大約可分為三大類:

  • 使用程式語言寫網頁,例如:HTML、CSS、JavaScript等
  • 使用架站平台,例如:Wix、Weebly、Strikingly、Webnode、痞客幫等
  • 使用CMS(Content Manage System內容管理系統),例如:WordPress、Joomla!Drupal

以下介紹幾個全球目前較知名的網站架設平台:

1. WordPress

WordPress為目前全世界最受歡迎的CMS,根據W3C官方網站資料顯示,全球有超過37.4%的網站是利用WordPress製作。WordPress的介面操作簡易、網站彈性極大,擁有數量豐富的主題與外掛程式,即使不會寫CSS、HTML、JS等程式語言,還是能輕鬆架設網站,後台系統也相當友善,可快速管理與更新內容,有利於網站維護。另外,WordPress的網站架構大體一致,Google很快可以辨識出網頁內容並搜尋到你的網站,非常適合做SEO。

WordPress根據使用需求的不同分為WordPress.com和WordPress.org兩種,WordPress.com類似痞客幫等免費部落格平台,申請帳號後即有一套WordPress後台管理系統可自行架設,適合興趣導向、無盈利目的族群。WordPress.org提供完整版的WordPress內容管理系統,還可根據自己的需求安裝SEO優化工具與串接Google Analytics,但必須另外購買虛擬主機,適合想建立品牌形象、追求數據成效、擁有完全掌握主權的用戶。

2. Wix

Wix 是一個提供架設網站的工具,目前全球有1.7億用戶使用,主打入門門檻低,不需要會任何程式語言與網站架設技術,就能快速架站。Wix其中一大優勢在於內建拖曳式編輯器,只要拖曳物件到你所想的位置即可,也提供設計工具、模板、用戶指南等,可以按照你的想法設計獨一無二的網站。

3. Weebly

Weebly和Wix性質相似,以拖曳式模組操作,對於沒有程式語法背景的人來說也是方便又容易上手的架站工具。Weebly雖為免費的網站架設平台,但它提供免費的網址與SSL安全憑證,提升網站的安全性和信賴度。另外,Weebly擁有線上客服的支援服務,可迅速解決用戶在架設網站時的疑難雜症。

4. Strikingly

Strikingly也是免費的架設網站工具,操作介面可支援中文,一樣無需任何程式撰寫的經驗就能上手。使用Strikingly設計出的網站線條感較強,特別適合製作視覺效果強烈的一頁式網站。

5. Webnode

Webnode也是免費的架站系統,在全球協助3000萬用戶架設網站,提供完整的中文介面支援,具備拖曳式的編輯器,不需程式背景只要拖拉元件至想要的位置即可。另外,Webnode內建SEO服務,而這項特色對於網站架設新手而言是很重要的。

網頁製作的程式語言

關於網頁製作程式語言,包含前端(Front-End)以及後端(Back-End)。前端的作用就是替網站建構出一副骨架,穿上漂亮的新衣,並賦予他能與使用者互動的能力,後端則著重在功能和資料的儲存,透過它處理業務和操作資料庫,詳細的前端和後端用途和運作方式,可以參考上面的「前端程式撰寫」和「後端程式撰寫」。

現在我們知道了前端和後端負責的工作,那應該要學習哪些程式語言呢?以下介紹網頁工程師常用的幾種語言:

HTML

HTML(HyperText Markup Language)是前端程式的主要語言之一,是一種標記語言(markup language),用以描述一個網站的結構和內容,因此並非一般的程式語言,也因為沒有程式語言的邏輯,相對較容易理解。HTML最大的特色在於文件中的元素(elements)含有以「<」、「>」組成的標籤(tags)和內容(content),大多數的瀏覽器都可以讀取HTML,利用標籤可以控制內容的呈現,也允許嵌入圖像與物件,還可以用於建立互動式表單,例如:標題、段落和列表等。

CSS

CSS中文名稱為階層式樣式表(Cascading Style Sheets),也是前端程式的主要語言之一,為一種風格頁面語言(style sheets language)。僅利用HTML編寫的頁面只有基本的網站架構而已,頁面上華麗的排版樣式,像是字型、顏色、背景等等,就是透過CSS美化而成的,甚至一些動畫和簡易的滑鼠指令反應,CSS也可以完成。基本上利用HTML和CSS就可以製作出一個簡單的網站。

JavaScript

如果想讓你的網站有更多複雜的動態互動功能,就需要運用JavaScript編寫了。理論上,JavaScript(簡稱JS)其實才是前端裡真正的程式語言,JS是一種腳本語言(script),之所以稱為腳本,就是在HTML頁面加載時可自動執行指令。主要描述網頁的行為,可以回應使用者的動作、動態更新內容、控制多媒體等等,有賦予網站生命的功用。在學習JS前,建議具備HTML的概念,畢竟先有HTML架構出來的「身體」,才會有JS能展現「行為舉止」。

PHP

PHP是一種伺服器端的腳本語言,適用於後端系統並經常嵌入HTML網頁中。由於入門門檻低,只要了解基本邏輯,即可架設出簡單的網站,因此適合網頁程式新手學習,也算是最普及的後端語言。相對於HTML和CSS製作的網頁,只有單向接收使用者指令,但網站中的留言板、會員登入、購物車系統等需要後台資料庫蒐集保存訊息,此時PHP就可以作為與資料庫的溝通橋樑,在資料庫進行處理,將相對應的資料回傳給使用者。

網站維護與SEO優化

網站架設完畢後,後續的系統維護、內容優化和SEO策略等,都是很重要的一環,需要進一步規劃。好不容易架設了精美的網站,如果沒有出現在Google的第一頁,網站也發揮不了效益,因此長期的維護工作絕對不能少。

網站測試與維護

透過網站測試,了解網站現況與體質,才能有效率地找出需要修正的地方,進一步找到 SEO 優化方向,並且找出執行重點。而系統維護包含幾項:

  • 網頁上稿除錯:上稿除錯 (Launch & Debug):每個網站系統的運作被開發完成後,一定需要經過多次的測試並除錯,透過不同測試者操作每個網站功能,並在各個環境(Windows、Mac、iOS、Android) 及各瀏覽器(Chrome、Safari、Firefox) 反覆測試過後,才能讓網站在上線後,面對不同狀態下的使用者都能正確地被呈現。最後,網站的管理要把手上的所有資料都上傳到後台,讓頁面上的資料都是正確的。如此一來,網站就可以正式公告大家上線了!
  • 網站安全性維護:安全性維護(Security and Maintenance):採取一定的安全手段,提高網站的安全性,主要包含網站安全管理、監測、數據備份、防止病毒的攻擊和惡意的訪問等。現在的駭客出於很多的商業目的,攻擊網站是經常的事情,因此網站安全維護是非常有必要的。
  • 網站伺服器維護:伺服器維護(Server Maintenance):伺服器是最主要的硬體設備,盡量使用擁有多個CPU的專業伺服器。伺服器的維護需保持設備處於良好狀態且安全運作,並對可能出現的故障問題進行評估,制定出一套或多套應急預案。

內容優化與SEO

好的網站,不只有介面功能、版面樣式佳而已,還需要依靠好的網站內容,才能被搜尋引擎判定為優質網站。因此,除了在網站架設之時放上好的內容外,更需要定期追蹤、更新並加以優化。線上有許多追蹤網站的工具,較為知名的比如免費的工具 Google Analytics

Google Analytics:

Google Analytics 網站分析主要是用一種稱之為網頁標記 (page tags) 的追蹤技術進行資料收集,而這標記是一小段 JavaScript 程式碼名為 Google Analytics Tracking Code。當我們就將這串程式碼設置於網站中的每一頁,GA便能追蹤到訪客在每一頁上所進行的行為加以分析,並提供數據參考建議。透過GA的四大報表:目標對象、客戶開發、行為及轉換,分析各管道的流量和使用者表現。

網站分析的結果能提供你優化的方向,而具體上是什麼樣的做法呢?

SEO(Searching Engine Optimization 搜尋引擎優化):透過搜尋引擎的演算法則來優化網站環境,以提高網站在搜尋引擎內的關鍵字排名及曝光度。SEO的核心基礎其實不難,以「提升使用者體驗」為目標,只要能掌握SEO 優化關鍵,就能為你的網站帶來高網站流量、提升排名。SEO大致可分為技術層面的技術SEO和內容導向的內容SEO

技術SEO:即優化網站 SEO 架構,目的是幫助搜尋引擎讀懂你的網站結構和內容,並評估你的網站權重,因此也必須要了解Google演算法。

內容 SEO: 目標就是「提供優良的使用者體驗」,因此必須要提供優質的內容,說服搜尋引擎認可為優良網站,其中包含:關鍵字研究及分析、撰寫符合SEO架構的文案、新增內部/外部連結、運用內容行銷策略等。

Contact

想與我們合作?

聯絡我們

Gremlin Works 擁有各產業網站設計與建置等應用開發經驗,網站的開發最重要關鍵在目標與定位,網站屬於行銷工具與技術架設,其網站所有功能都將符合網站目標及成效來企劃。