網上創業 (營運及市場推廣 )單元證書課程

04/12/2023 CopyRight 2012 - 2013 City University of Hong Kong

3. 網站結構及管理策略概要

3.1 商業網站的設計概念

3.2 公司、產品定位與網站風格

3.3 公司網站的資料準備及製作技術

3.4 網頁製作技術概要

3.5 選用 Domain Name 及申請程序

3.6 網站寄存及網頁搜尋

3.7 利用網站管理服務

04/12/2023 CopyRight 2012

3.1 商業網站的設計概念

• 具有豐富的功能和簡單的操作界面

• 通過範本式的操作即可完成網上商店的建設

• 不同的網站所採用的系統具有很大的區別– 有些只需要直接上傳產品圖片和文字說明

– 有些則需要自己對店面進行高級管理

• 一個普遍存在的現象是，說明不足，建店前應準備哪些資料、格式和標準等比較欠缺

• 由於採用範本式的結構，個性化要求就有很大限制，有些必要的需求無法利用現有功能得到滿足

04/12/2023 CopyRight 2012

• 無論是建設一個向合作夥伴

• 或者供應商提供產品和服務的商業網站

• 或者是一個銷售產品或為消費者提供服務的零售網站

• 還是建立一個發佈新聞和其他多媒體資訊的傳媒和娛樂網站

• 作為一個成功的企業網站，都需遵循下面的幾點原則，以完成網路行銷的目標

04/12/2023 CopyRight 2012

網站內容的專業銷售，電子商務應遵循的規則

• 內容的商業網站必須有兩個目標 :

1. 銷售您的產品和服務，溝通，營銷信息

2. 有一個有用的服務遊客，讓他們回來

例如把一個搜索引擎，並包括相關的關鍵字，您的網上業務

04/12/2023 CopyRight 2012

1. 明確網站設計目標與使用者需求2. 總體設計方案主題鮮明3. 網頁形式與內容統一 4. 網站結構設計清晰5. 存取速度保證快6. 合理應用多媒體技術7. 及時更新網站資訊8. 網站資訊的交互能力

04/12/2023 CopyRight 2012

1. 明確網站設計目標與使用者需求

• 企業網站是展現企業形象、介紹產品和服務、體現企業發展戰略的重要途徑

• 根據消費者的需求、市場的狀況、企業自身的情況等進行綜合分析，牢記以“消費者”為中心進行設計規劃

• 在設計規劃之初還要同時考慮– 建設網站的目的是什麼？

– 為誰提供服務和產品 ?

– 企業能提供什麼樣的產品和服務 ?

– 網站的目標消費者和受眾的特點是什麼 ?04/12/2023 CopyRight 2012

2. 總體設計方案主題鮮明• 明確網站設計目標後，應對網站的構思創意即總體設計方案做出定位，對網站的組織結構進行規劃

• 企業網站應針對所服務物件 (機構或人 )的不同而採用不同的形式

• 有些網站可以只提供簡潔的文本資訊

• 有些則需採用多媒體表現手法，提供華麗的圖像、閃爍的燈光、複雜的頁面佈置，甚至可以播放聲音和錄影片段

• 優秀的網站要做到主題鮮明突出、要點明確，以簡單明確的語言和畫面體現網站的主題

04/12/2023 CopyRight 2012

• 所以，要調動一切手段充分表現網站的個性和情趣，辦出網站的特色。一般網站主頁應具備的基本成分包括以下幾部分  :

1. 頁頭：準確無誤地標識網站和企業標誌。 

2. E-mail地址：用來接收用戶垂詢。

3. 聯繫資訊：如普通郵寄地址或電話。

4. 版權資訊：聲明版權所有者等。

5. 注意重複利用已有資訊，如客戶手冊、公共關係文檔、技術手冊和資料庫等都可以輕而易舉地用到企業的網站中。

04/12/2023 CopyRight 2012

3. 網頁形式與內容統一 

• 要將豐富的意義和多樣的形式組織成統一的頁面結構，形式語言必須符合頁面的內容，體現內容的豐富含義。

• 運用對比與調和、對稱與平衡、節奏與韻律以及留白等手段，利用空間、文字、圖形之間的相互關係建立起整體的均衡狀態，產生和諧的美感

• 例如，對稱原 則的運用在頁面設計時有可能會使頁面顯得呆板，但如果加入一些富有動感的文字、圖案，或採用誇張的手法來表現內容往往會達到更好的效果。

04/12/2023 CopyRight 2012

4. 網站結構設計清晰• 網站結構要以結構清晰、導向清楚及便於使用為原則進行設計

• 如果人們看不懂或不能在網站上自由前進或後退，那麼瀏覽者如何瞭解企業和服務呢 ?

• 如果使 用一些醒目的標題或來文字來突出產品與服務，並且在導航設計中使用超文字連結或圖片連結，那麼就不會讓他們只能使用瀏覽器上的前進或後退功能

• 即使你擁有最棒的產品，如果客戶不清楚網站在介紹什麼或不清楚如何受益，那麼他們就不會喜歡你的網站。04/12/2023 CopyRight 2012

5. 存取速度保證快• 網站要保證快速的存取速度• 大多數瀏覽者不會進入需要等待 5分鐘才能進入的網站，在互聯網上等待 60秒與我們平常等待 30分鐘的感覺相同

• 因此，設 計網站應該儘量避免使用過多的圖片及體積過大的圖片

• 設計網站時通常要與客戶協調，將主要頁面的容量控制在 50KB以內，平均 3OKB左右，以確保普通瀏 覽者等待頁面的時間不超過 10秒鐘。

04/12/2023 CopyRight 2012

6. 合理應用多媒體技術

• 網路資源的優勢之一是多媒體功能

• 為了吸引瀏覽者的注意力，頁面的內容可以用三維動畫、 Flash等來表現

• 但要注意，由於網路頻寬的限制，在使用多媒體形式來表現網頁內容時應考慮用戶端的傳送速率

04/12/2023 CopyRight 2012

7. 及時更新網站資訊• 企業網站建立後，要不斷更新內容

• 網站資訊的不斷更新 會讓瀏覽者瞭解企業的最新發展動態和網上服務等

同時也會幫助企業建立良好的形象

04/12/2023 CopyRight 2012

8. 網站資訊的交互能力

• 在企業的網站上，要認真回覆使用者的電子郵件並保證及時回覆傳統聯繫方式如信件、電話垂詢和傳真，做到有問必答

• 最好將用戶的用意進行分類，如售前一般瞭解、售後服務等，由相關部門處理，使網站訪問者感受到企業的真實存在並由此產生信任感。

• 企業網站只要遵循這些原則來建制網站，就容易完成SEO的工作，達成網站推廣的過程，使網路行銷更加容易的達到企業的預設目標，所以在建製網站前，必需進行良好的構思及規劃，及早進行 SEO

04/12/2023 CopyRight 2012

商業網站製作上常見的問題

1. 別總是把文字用圖形顯示：  即使網路字型 (web fonts)開始流行，但是無可諱言的，用 

Photoshop 做出的圖形化文字在外觀上還是比內定的瀏覽器字型來得好看；所以很多網頁設計師或是客戶，喜歡使用大量的圖形來顯示網頁的內容

但是，搜尋引擎看不懂圖形，因此這種做法不但降低了搜尋引擎的能見度，更增加了網頁載入的時間，使得網站開啟速度嚴重變慢，從網站排名、搜尋引擎優化的角度來看，是非常不妥的

04/12/2023 CopyRight 2012

商業網站製作上常見的問題

2. 搜尋引擎看不懂  Flash： • 大多人喜歡聲光具佳的 Flash動畫，因此許多公司網站，整個首頁都以 Flash來設計，甚致為了美觀，還將整個網站都做成了  Flash 動畫；但是問題是，搜尋引擎看不懂  Flash，自然對網站優化、搜尋引擎排名的結果有影響

• 除此之外， iOS的裝置、 Apple已經擺明了放棄  Flash

平台，擁抱  HTML5，因此對於這些使用者來說，全 Flash 的網站跟  404 網頁差不了多少 

04/12/2023 CopyRight 2012

商業網站製作上常見的問題

3.   別忘了更新文章日期：  大部分的商業網站都提供版權內容，因此在網頁下方通常會標示文章日期，千萬別讓你的網站版權還停留在五年甚至十年前，一方面讓使用者覺得網站未能妥善管理

甚至誤以為公司亂無章法，影響形象，降低再拜訪這個網站的意願

不僅如此，搜尋引擎也會對不常更新內容的網頁，降低再訪這個網站的頻率

04/12/2023 CopyRight 2012

商業網站製作上常見的問題

4. 別使用「點我」：  許多網站在內容裡提供連結時，都會使用「點我」或「按這」做為連結文字

但其實這些連結文字是很重要的，因為這些連結文字，是搜尋引擎決定自然排序順序所用的關鍵字條件之一 

而我們相信，一般的使用者絕對不會搜尋「按這」的字樣，所以一個優化良好的網站，應該使用具有意義的關鍵字當做連結文字。 

04/12/2023 CopyRight 2012

3.2 公司、產品定位與網站風格

04/12/2023 CopyRight 2012

1. 網站的風格定位

2. 網站的欄目設置

3. 網站的內容規劃

4. 網站的技術解決方案

5. 網站的網頁結構和框架

04/12/2023 CopyRight 2012

1. 網站的風格定位• 網站的風格定位是網站建設的第一步，是網站走向成功的起點

• 其重要性應得到足夠的重視

• 影響網站風格定位的主要因素有，公司企業文化、行業特徵、產品定位、客戶定位等

• 在綜合考慮了這些因素之後，網站設計師、分析師以及策劃師聯合對網站進行風格定位

• 網站風格主要包括：1. 網站色彩

2. 版面佈局

3. 流覽方式

04/12/2023 CopyRight 2012

4. 交互性5. 網頁表現形式6. 風格定位的準確性是網站成功

與否的關鍵所在

2. 網站的欄目設置• 網站的欄目是構成網站最重要的部分，是承載網站內容的基礎

• 好的欄目設置，可以幫助用戶更好的瞭解和使用網站，提高用戶的停留時間，從而增加企業的商業機會

• 合理的欄目設置，可以更好的展示企業的文化、核心價值、產品資訊、解決方案等客戶最關心的問題。 

04/12/2023 CopyRight 2012

3. 網站的內容規劃

• 互聯網時代，內容為王是不變的真理

• 網頁漂亮美觀固然重要，可是真正能吸引和留住客戶的是內容

• 所以，對內容的組織和提煉就變成了網站建設過程中最關鍵的 一個環節

• 網站獨創的有價值的內容不但可以提高訪問使用者的黏貼度，更能有效的提高網站在搜尋引擎中的排名，從而吸引更多的用戶

• 對產品合理的分類和描述， 對您公司產品的銷售起到無法估量的作用

• 網站內容更新頻率同樣是衡量一個網站水準的重要指標04/12/2023 CopyRight 2012

4. 網站的技術解決方案

• 技術解決方案是網站最終能夠被用戶使用的根本，不同的企業，對網站有不同的功能需求。技術解決方案主要包括網站的軟體環境、硬體環境，包括：

       網站開發語言（ ASP、 ASP.NET等）資料庫類型（ SQL Server、 Access等）伺服器類型（虛擬主機、虛擬專機、主機託管等）網站安全性方案（防黑、防病毒等）技術方案沒有絕對的好壞，我們認為：最適合的就是最好的。

5. 網站的網頁結構和框架

• 網站的網頁結構和框架是一個比較容易被忽視的問題，可是，它們對於網站的價值卻是非常重要的。網頁結構和框架的整合。 

04/12/2023 CopyRight 2012

04/12/2023 CopyRight 2012

04/12/2023 CopyRight 2012

04/12/2023 CopyRight 2012

04/12/2023 CopyRight 2012

“F” 模式佈局

04/12/2023 CopyRight 2012

“F” 模式佈局

04/12/2023 CopyRight 2012

“F” 模式佈局

• F-佈局的基本概念依賴於不同的視覺跟踪研究

• 這些科學的研究顯示，網上瀏覽，閱讀屏幕中的“ F”模式 – • 看到最多的是左上角 ...只是偶爾在屏幕右側

• 這些視覺跟踪研究認為在左側的設計有利於將您的網站的最重要的要素（品牌，導航，呼籲採取行動）

04/12/2023 CopyRight 2012

“F” 模式佈局• 瀏覽者開始在網頁頂部左邊瀏覽

• 然後，他們瀏覽該網站的頂部（導航，訂閱，搜索等）

• 接著，他們向下移動，讀取下一行的內容 ......

所有的方式到側邊欄

• 最後，他們找到合適的內容  / 有趣的內容，瀏覽者進入“掃描模式”

04/12/2023 CopyRight 2012

“F” 模式佈局• 讓我們花一點時間把這個模式變成一個準系統線框：

04/12/2023 CopyRight 2012

“F” 佈局的設計

04/12/2023 CopyRight 2012

04/12/2023 CopyRight 2012

04/12/2023 CopyRight 2012

04/12/2023 CopyRight 2012

04/12/2023 CopyRight 2012

“Z” 佈局的網頁設計• Z-佈局的前提下，其實很簡單：• 將你希望讀者首先看到的頂部” Z”加強，眼睛自然會走的一條路的 Z的項目，並且以“行動呼籲”結束。所有的道路上：

04/12/2023 CopyRight 2012

“Z” 佈局的網頁設計

04/12/2023 CopyRight 2012

“Z” 佈局的網頁設計“Z” 佈局網頁設計，有 4大具體目的：

1. 品牌

2. 等級制度

3. 結構

4. 呼籲採取行動

04/12/2023 CopyRight 2012

04/12/2023 CopyRight 2012

04/12/2023 CopyRight 2012

04/12/2023 CopyRight 2012

04/12/2023 CopyRight 2012

3.3 公司網站的資料準備及製作技術

• 電子商務在某程度上需要精確的資料，例如貨運費用、貨品的售價等，所以在展示產品給顧客前，務必在正式輸入系統前預先準備所需資料

• 將會展示於網站的一般「中英文」資料：

• 網站主題

• 網站說明  / 簡介

• 網站關鍵字04/12/2023 CopyRight 2012

• 將會展示於網站和各類“電子郵件”內的「中英文」聯絡資料資料：1. 網站負責人稱呼

2. 主要電子郵件

3. 客戶查詢郵件的收件地址

4. 新訂單的通知電郵地址

5. 公司聯絡電話號碼

6. 客戶服務電話號碼

7. 公司傳真機號碼

8. 公司名稱

9. 公司地址04/12/2023 CopyRight 2012

用於系統向您發出通知的資料： 傳真機號碼 接收短訊的手機號碼

商品展示的「中英文」資料：• 產品目錄• 產品名稱• 產品型號• 產品售價• 產品數量• 產品重量• 產品詳細說明

04/12/2023 CopyRight 2012

商品展示的外觀資料：•    一幅主要圖片•    其他附加圖片•   適用的產品視像檔案

• 若業務資料需較詳盡，可預備一些選擇性的資料：

• 多種組別的客戶群組

• 產品狀態

• 特色產品

• 商品品牌

• 開售日期

• 產品稅別

• 產品成本

• 特價產品

04/12/2023 CopyRight 2012

• 產品客戶群組售價•     產品客戶群組特價•     產品欄位資料•     產品簡短主題•     產品簡短介紹•     產品關鍵字•    關聯的產品•     產品的可選擇特性

5. 關於我們

6. 客戶服務

7. 貨運及退貨說明

8. 服務條款

9. 個人私隱說明

04/12/2023 CopyRight 2012

1. 首頁 =>

公司簡介 (或關於我們 )　　

2. 產品介紹 (或服務項目 )　　

3. 最新消息 (問與答 Q&A)　　

4. 聯絡我們

整頁展示的資料：

3.4 網頁製作技術概要• 美工繪圖：使用 PhotoImpact7.0 或  Adobe Illustrator 來製作美工方面的需求，再加上 Adobe Photoshop 做相片修改

• 網頁設計：使用 Dreamweaver4.0、Microsoft FrontPage

2000 製作網頁

• 動畫製作：使用 Flash5.0、  Adobe Image Ready 製作動畫，畫面為此動了起來，心裡雀躍無比

• 影像擷取：使用Windows Movie Maker 將影像擷取出來。

• 網頁技術：使用 CSS(Cascading Style Sheets)來作更細微的網頁排版與文字定位

04/12/2023 CopyRight 2012

http://www.gohappy.com.tw GOHAPPY快樂購物網

04/12/2023 CopyRight 2012

http://www.fullhouse-tourism.com

04/12/2023 CopyRight 2012

http://www.1digitalonline.com

04/12/2023 CopyRight 2012

http://www.mblife.com

04/12/2023 CopyRight 2012

http://www.degreesshop.com

04/12/2023 CopyRight 2012

http://www.heelntoe.com.hk 健康矯正鞋專門店

04/12/2023 CopyRight 2012

http://www.hilairez.com

04/12/2023 CopyRight 2012

http://www.kiyuto.com

04/12/2023 CopyRight 2012

http://www.romanticstarint.com

04/12/2023 CopyRight 2012

http://www.paweddinghk.com/ 甜．婚禮

04/12/2023 CopyRight 2012