本書以商務網頁設計與制作業務流程為主線，通過對典型企業建站項目的剖析，構建了商務網頁設計導引、商務網頁布局設計、商務網頁效果圖制作、使用表格制作網頁、使用DIV+CSS制作網頁、商務網站發布、移動端網頁制作內容7個教學項目，對商務網頁設計與制作的基本原理及實現方法進行繫統介紹及完整展示。本書是針對中等、高等職業院校及應用性本科商科、計算機等專業開發的"學.用.做”一體化教材，也可供網頁設計類崗位員工培訓使用，還可作社會相關從業人士的參考讀物。

方玲玉，長沙民政職業技術學院商學院院長，管理學教授，教育部全國高校教師網絡培訓中心特聘主講教授，湖南高等職業教育電子商務專業帶頭人，湖南省職業技能鋻定專家委員會電子商務專業委員會秘書長，湖南省工商管理類專委會秘書長，中國職業教育研究會電子商務與物流專業協作委員會副主任；完成課題《高職電子商務職院人纔培養體繫的創新研究與實踐》獲2005年國家教學成果二等獎。 主持開發2008年國家精品課程《網絡營銷實務》、2010年***精品課程《電子商務基礎與應用》，其中《網絡營銷實務》已升級為2013年***精品資源共享課。出版著作？部，其中《電子商務基礎與應用――“學.用.做”一體化教程（第4版）》、《客戶服務與管理――項目教程（第4版）》被教育部評為“十二五”職業教育國家規劃教材。

目錄

項目一 商務網頁設計導引 1
任務一 商務網站概述 1
一、網站設計的基本流程 2
二、商務網站的類型 3
三、網頁結構 8
四、網頁風格的種類 12
任務二 客戶需求分析 16
一、行業背景分析 17
二、競爭對手分析 19
三、網頁原型分析 23
任務三 商務網站欄目規劃 27
一、欄目設置的基本原則 27
二、網站欄目的策劃 28
三、網站欄目的設計方法 32
任務四 網頁首屏設計 35
一、確定可視範圍 35
二、展示吸引用戶的信息 35
三、視覺焦點要顯眼 37
四、圖片讓內容更易於理解 37
五、用風格強調主題 38
六、鎖定用戶的視覺重點 39
七、用動畫吸引用戶的注意 40
八、符合視覺習慣的圖文混排 40
九、產品特性的恰當處理 41
任務五 企業公信力打造 42
一、專業性展示 42
二、硬實力呈現 43
三、專家團隊 43
四、獎勵、榮譽及資質 43
五、優質客戶 44
六、成功案例 44
七、權威媒體報道 45
實訓一 企業網站欄目規劃 45
思考與練習 46
項目二 商務網頁布局設計及網頁草圖繪制 48
任務一 網頁布局設計 49
任務二 網頁草圖繪制 57
實訓二 企業網站首頁草圖繪制 60
思考與練習 61
項目三 商務網頁效果圖制作 63
任務一 網頁素材選取 66
任務二 圖層組管理 70
任務三 素制作 74
任務四 網頁效果圖制作 83
任務五 網頁效果圖切片 96
實訓三 企業網站首頁效果圖制作 99
思考與練習 100
項目四 表格制作網頁 102
任務一 本地站點配置 103
任務二 使用表格制作網頁 110
實訓四 使用表格制作企業網站首頁 127
思考與練習 128
項目五 DIV+CSS制作網頁 130
任務一 首頁DIV框架制作 131
任務二 內容制作 146
任務三 CSS特效導航欄制作 163
實訓五 使用DIV+CSS制作企業網站首頁 167
思考與練習 168
項目六 商務網站發布 170
任務一 域名注冊 171
任務二 虛擬主機租用 174
任務三 網站備案 177
任務四 網站文件上傳 182
任務五 域名綁定與解析 187
實訓六 企業網站首頁的發布 192
思考與練習 193
項目七 移動端網站制作 195
任務一 了解移動端網站 196
一、移動端網站的概念 196
二、移動端網站的開發策略 196
三、移動端網站的制作方法 199
任務二 使用第三方建站平臺制作移動端網站 202
一、注冊賬號及開通建站服務 202
二、熟悉網站後臺管理頁面 204
三、分模塊制作手機端網站首頁 206
任務三 使用CMS制作移動端網站 218
一、CMS及KesionCMS的概況 218
二、建站準備工作 219
三、使用KesionCMS制作移動端網站首頁 227
實訓七 企業手機端網站制作 240
思考與練習 241
參考文獻 242

前 言

在移動互聯網時代，誰不想擁有並掌控自己的網絡空間呢？

商務網頁設計與制作是商科類專業學生迫切需要掌握的技術。讓教學回歸市場，讓網頁輕松上手，讓學生既能切切實實地學到技術，又能創新性地解決具體的商務問題，這是本書的重要使命。

針對商科類專業學生的特點，本書創新性地以商務網頁設計與制作市場的業務流程為主線，以典型企業建站項目為載體，通過商務網頁設計導引、商務網頁布局設計及網頁草圖繪制、商務網頁效果圖制作、表格制作網頁、DIV+CSS制作網頁、商務網站發布、移動端網站制作7個教學項目，對 PC 端+移動端商務網頁設計與制作的基本原理及實現方法進行深度剖析，實現技術與商務的融合，提升學生的獲得感與成就感。

項目一在介紹網頁設計基本流程的同時，對商務網站的類型、網頁結構、網頁風格進行了簡要描述，還對客戶需求分析、網站欄目規劃、網頁首屏設計及企業公信力打造進行了繫統梳理。項目二以典型企業建站項目為載體，對競爭對手網站的對比分析、常見的網頁布局類型、網頁草圖繪制的方法及流程進行了介紹。項目三以網頁素材的選取為突破口，讓學生快速掌握網頁效果圖制作的方法及關鍵技術。項目四以現有網頁效果圖為藍本，介紹了最基本的網頁布局方法，即用表格進行布局，並在技術介紹的同時，不斷呈現相應的HTML代碼，讓學生在學習網頁設計的同時輕松理解HTML。項目五介紹了使用DIV+CSS制作網頁的方法，讓學生掌握網頁制作的主流技術，以適應網頁設計類崗位職業發展的需要。項目六圍繞網站發布業務，對域名注冊、虛擬主機租用、網站備案、網站文件上傳、域名綁定與解析等內容進行了繫統介紹。項目七同樣基於開放資源平臺及共享網站模板，將建設移動端網站的原理及方法進行了簡要概述及實踐。

本書的主要特色如下。

1．創新資源利用，實現網頁設計“零門檻”

本書拒絕網頁設計“零起點”，實現網頁設計“零門檻”。讓學生站在巨人的肩膀上，以現有優秀企業網站為模板，從LOGO到Banner，從欄目到導航，從風格到定位，合理利用互聯網上豐富的網頁資源，先學習借鋻，再模仿超越。這種“企業怎麼做，我們怎麼學”的教學模式，引人入勝，事半功倍；讓網頁設計不僅易學，還好用。

打破學術思維束縛，遵循企業建站邏輯，讓學生在較短的時間內制作出既美觀大方，又能體現企業商務訴求的網站。

2．創新教學體繫，實現技術與商務的融合

作為技術色彩較濃的教材，本書以典型企業建站項目為載體，從企業的真實商務訴求出發，開發了7個教學項目，用戶需求分析及網站市場定位貫穿始終，實現技術與商務的融合。

本書是電子商務專業國家資源庫“商務網頁設計與制作”課程的配套教材，由方玲玉教授負責全書的體繫設計及統稿，由劉娜、劉傑負責項目六、項目七兩個新增項目的編寫，由陳煒、張鴿、王靜萍負責其他項目的修訂。另外，由劉娜、易文偉負責全書立體化教學資源的創意設計。湖南領度信息技術有限公司的總經理聶磊、湖南西子電商品牌管理有限公司的副總經理李鶴等企業專家及校友，一如既往地全程參與本書的改編，並提供了大量企業素材及真實案例，在此對他們深表謝意！

由於編者的水平有限，書中難免存在疏漏與不足之處，懇請各位讀者批評指正。

方玲玉

chinahnfly@126.com