網站架設與設計

定位網站目標與策略,展現網站巨大價值

Gremlin Works多年網站設計與建置等應用開發經驗,網站的開發最重關鍵在目標與定位,網站架設屬於工具與技術,其網站所有功能都是因為目標成效來企劃。例如:購買率、會員量、回購率、關注度、使用率… 等價值的創造,都是網站建置最核心的動機與目的,創造網站所帶來的價值與資產,網站不再是技術面的問題,而是定位與策略,只有這樣才能看見網站真正成效與價值。

網站目標分析定位

透過品牌價值與核心群眾分析,定義網站希望目標與成效,企劃網站連結性與核心群眾需求性,讓網站滿足不同造訪者不同需求與服務,確認網站建置目標。

品牌網站企劃與策略

滿足不同造訪者動機與目的,建構品牌與服務產品在網站上的完整連結性,佈局體驗與策略需求,提升網站關注瀏覽量,創造網站所帶來的品牌價值與成效。

模擬體驗UI/UX設計

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

網站SEO內容企劃

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

網站程式開發與建置

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

網站維運與營運

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

服務項目

企業Intranet
線上電商架設

專業技術整合認證

專業技術整合認證

Poster of Jiu Zhen Nan
Poster of Jiu Zhen Nan
台北英僑商務協會

接軌英國與台灣會員是專案執行的目標,提供會員企業全方位的線上整合服務,並提升網路形象,創造會員服務價值。

Kymco's homepage template
Kymco homepage
DRIWAYS

全球線上叫車平台技術與服務整合,並透過行銷策略建立品牌網路知名度,成功提升品牌優質形象。

Poster of Jiu Zhen Nan
Poster of Jiu Zhen Nan
凱舟

我們掌握與其他淨水大品牌競爭關鍵要素,挖掘拓展歐美市場利基點。展現服務為導向的品牌網站,成功建立品牌信任感,並跨足國際市場。

品牌網路形象提升為專案核心,我們運用客製化網站服務技術,開發全球會員與訂房系統,有效整合飯店與飯店線上支援。

iONEX banner with man standing next to his scooter

我們優質的跨國行銷團隊已經成功幫助超過200間公司,包括光陽機車、舊振南、BENQ等等。想了解我們其他成功案例,或免費諮詢嗎?歡迎聯絡我們!

previous arrow
next arrow
Slider
想與我們合作?

讓我們了解您的需求,將有專人與您聯繫,
協助規劃最適合您的方案。

想與我們合作?

讓我們了解您的需求,將有專人與您聯繫,
協助規劃最適合您的方案。

2019網站架設基礎指南:了解我們架設網站的流程與服務

最後更新:

Gremlin Works >> 文章列表 Blog >> 網站架設與設計 >> 實現網站架設目標與策略:了解我們網站建置的服務與優勢

你想動手開始架設網站,卻總是困擾於陌生的專有名詞? 網路上很多教學資訊,卻找不到給還是初學者的你一個重點式整理嗎?

這篇文章將一次補齊你入門前必須具備的重點資訊! 包括常見問題: DNS是什麼? 為什麼需要擁有網域和主機,不能用免費的嗎?  SSL是什麼? 如何知道來觀看網站的使用者分析呢?前端 (Front-End) 和後端 (Back-End) 程式又是什麼? 自己做網站或找專業的人,優缺點是什麼?

 

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

網頁製作,你該完成的七項流程

你是否具備了架設網站該有的基本概念?先看看你是不是這些資料都準備好了。

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

如果你對上面的問題都很陌生,不用緊張!接下來我們將針對這些必備的基本概念介紹給你,也會推薦適合初入門的你該使用的平台。

網頁製作,你該知道的六個名詞

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權重的轉移:你在網站上所有經營累積的成果,都很有可能在日後面臨搬家轉址的過程,而必須得從頭開始,主因是不少平台仍不提供權重的轉移。白話來說,就算你搬家了也重新指向新頁面了,但使用者搜尋時還是會因為舊網站的權重較重而先搜尋到。 各位應該有搜尋過一些文章,頁面點開後顯示「我已搬家,將為你連到本頁新連結」吧?沒錯,就是這個缺點。如此一來,以後使用者要找到你,搜尋結果都要先繞過以前使用的平台頁面。這實在不是長久之計啊!

 

要去哪裡買網址呢?

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

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

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

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

要去哪裡租虛擬主機呢?

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

3. DNS是什麼?如何設定DNS?

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

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

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

4. URL是什麼?URL和網域的差別在哪?

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

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

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

Secure HTTPS

 

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

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

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

 

Secure HTTPS icon去哪裡申請SSL憑證呢?

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

若考量預算,而想轉而選擇免費的SSL憑證的朋友,以下兩大平台也是不錯的選擇: StartSSLLet’s Encrypt 

6. Google Analytics和Google Map如何取得?

Google Analytics Tracking Code(追蹤碼) 

註冊帳號後,輸入網站資訊,將取得的追蹤碼放到網站 <head>標籤裡,Google就會開始幫你追蹤你的來訪者資訊了。Google Analytics 對整體網站SEO的重要性,在連結中的文章會仔細探討。

Google Analytics logo

 

 

Google Map API key (金鑰)

那有些網站都會嵌入Google Map,它的API key又是怎麼申請的呢?點擊取得金鑰(GET STARTED)按鈕後,將你的網域輸入限制的HTTP參照網址內,系統就會自動產生一組金鑰提供你使用了。

架設網站用哪個平台?五大網頁製作平台比較

Table 2

 

WordPress為最推薦的自架網站平台

為何Wordpress在某些項目相對不足,卻在最後得到最高的推薦評價呢? 其實 WordPress 與其他平台在本質上是有些差異的。首先,Wordpress 是個網站內容管理系統 (CMS, Content Managment System) ,而其他的是網路架站平台。兩個都是製作網頁的方式,那到底差別是什麼?

WordPress 是一個網頁製作軟體,只要你將它下載在任何一個伺服器 (非常簡單,一鍵搞定),你就能擁有一個完整的後台來管理你的網頁。在後台你可以撰寫文章、修改佈景主題、上傳照片、做任何外觀上的客製化,是個很完善的管理系統。這個選擇適合想要掌控網站細節,而且想擁有自己網域的人,因為 WordPress 網站設計自由極大。相對的,要花的時間較多,而且如果你有一些基本的程式概念會幫助很大(不是必須)。

其他的網路架站平台如 Wix、Squarespace 是不需要程式背景的,架站速度簡單且快速。缺點是,你的網站容易被平台綁住,不易搬運。網頁佈景主題受限,有些無法客製化。長期來說價位也相對高。如果你對網站外觀不是那麼在意,只需要短期快速的架設一個可以發布消息的網頁,那麼這可能比較適合你。

有一件事我們得釐清一下,上述所提的 WordPress 是 WordPress.org,網頁製作軟體。而其實 WordPress 本身也有提供與其他網路架站平台作用較相似的 WordPress.com。Wordpress.com 的優缺點也就是簡單快速,但客製化的自由性較低,且價格偏高。注意不要搞錯了喔。

現在大部分的 B2B企業中,WordPress.org 是較廣為使用的。雖然在一開始的設定看似較費工,但對於長久的經營及各項功能費用算下來,相對來講是在這些選擇中最為強大的工具! 鼓勵大家可以試試看喔。有興趣的話,可以閱讀 WordPress人人能上手? 這篇文章。

如何架設網站:了解客製化網站建置流程

恭喜,你已經有了網頁製作名詞的基礎概念,也設定好網域和製作平台了!但接下來呢?現在你的網站上是沒有任何內容的,該從哪裡開始?是外觀設計,撰寫文章,還是寫程式?不管你是自己架站還是聘請網頁設計公司,了解網站建置流程都會對你有幫助。因為每個流程順序是環環相扣的,知道每個步驟的程序能幫你節省資源及時間,不怕白做工。

接下來我們會先簡單帶過建置過程,詳細介紹請點延伸閱讀:如何架設網站:了解客製化網站建置流程

 

 

1. 策略分析 (Plan & Analyze)

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

 

2. 網站地圖 (Sitemap)

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

 

 

3. 圖稿原型 (Wireframe & Prototype)

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

 

4. 撰寫程式 (Code)

如果你想要完整得去客製化你的網站,那麼認識前端及後端語言就會對你有很大的幫助。前端最主要由三大部分組成:HTML + CSS + JavaScript。他們的作用就是替網站建構出一副骨架,穿上漂亮的新衣,並賦予他能與使用者互動的能力。如果你願意花時間在前端語言上,在Wordpress後台裡的佈景主題CSS客製化,或是JavaScript外掛工具都能給你很多發揮創意的空間,打造出獨一無二的網頁介面。而後台的開發則是為了方便以後長期的網站內容管理。

 

5. 上稿除錯 (Launch & Debug)

每個網站系統的運作被開發完成後,一定需要經過多次的測試並除錯,透過不同測試者操作每個網站功能,並在各個環境(Windows、Mac、iOS、Android) 及各瀏覽器(Chrome、Safari、Firefox) 反覆測試過後,才能讓網站在上線後,面對不同狀態下的使用者都能正確地被呈現。最後,網站的管理要把手上的所有資料都上傳到後台,讓頁面上的資料都是正確的。如此一來,網站就可以正式公告大家上線了!

結語

講了這麼多,對於架設網站你是否更有信心了?如果沒有,沒關係,或許你可以考慮網站架設公司的服務。你可能會想,自己架設網站比較省錢吧?我的網站資訊都給對方,這樣不安全吧?如果你還在猶豫,可以參考連結文章中的自架網站優缺點分析,幫你做出適當的決定。

如果你在考慮打造一個跨國網站,想知道經營跨國網站跟一般網站有什麼不同,有什麼該注意的設定、是不是在自己的能力之內,我們也有相關的文章說明。

不管你最後的選擇為何,希望本篇文章的基本概念都能讓你的網頁製作流程更加順暢!

想與我們合作?

讓我們了解您的需求,將有專人與您聯繫,
協助規劃最適合您的方案。

想與我們合作?

讓我們了解您的需求,將有專人與您聯繫,
協助規劃最適合您的方案。