技術融合，體現工作流程

素技并重，體現崗位需求

階梯遞進，體現訓練過程

實時客觀，體現效果反饋

總覽分析，體現學習思路

資源齊備，體現學習輔助

在“互聯網+”時代，人們日常生活各領域都離不開網絡平臺的使用，WUI（Web用戶界面）顯得尤為重要。本書作者瞄準市場對Web用戶界面設計制作相關崗位的能力分解要求，一方面面向高職院校相關課程教學，另一方面面向WUI設計愛好者的自主學習，教材內容設計以項目為引領，以任務為導向，融合多項常用技術，強調了學習者動手能力的循序漸進培養，內容系統全面、清晰易懂、實用性強。

本書特色如下：

 技術融合，體現工作流程：設計“設計入門+內容制作+素材處理+元素設計+動畫導入+前端樣式”6大項目，展現融合多種軟件完成WUI的流程、步驟、技術、方法。

 素技并重，體現崗位需求：歸納“知識+技能+標準”的20個工作任務，全面覆蓋Web用戶界面設計與制作技術，不斷增強學習者的崗位意識。

 階梯遞進，體現訓練過程：拓展“知識解析+任務實現+學習小測”3個環節，構建融合互通的工作任務體系，不斷增強學習者綜合能力。

 實時客觀，體現效果反饋：面向“知識測試+技術實戰”2個角度，開展客觀全面、自主測評的學習反饋，不斷促進學習者查缺補漏。

 總覽分析，體現學習思路：設置“知識導圖+任務描述”，幫助學習者梳理學習思路，不斷提升學習興趣與學習效率。

 資源齊備，體現學習輔助：配備“電子課件+任務資源+完整代碼+自測標答”，為學習者提供有效的學習輔助。

本書從設計入門、內容制作、素材處理、元素設計、動畫導入、前端樣式6個項目進行設計，共包括20個典型任務。項目1（Web用戶界面設計入門）從認識Web用戶界面入手，主要講解了常用名詞、主流設計軟件、WUI設計師的必備技能、HTML文檔的基本結構。項目2（頁面內容的設計與制作）從創建本地站點入手，主要講解了管理站點、簡單靜態網頁的制作、用表格排版網頁、表單的使用。項目3（素材圖像的調整與修飾）從常用圖片格式入手，詳細講解了圖片的修復與調整、圖像的摳取調整、圖層工具在網頁制作中的使用。項目4（頁面元素的設計與制作）從認識logo入手，主要講解了logo和banner設計要素、logo和banner的分類、按鈕和導航的設計制作。項目5（簡單動畫的設計與制作）從認識Flash動畫入手，主要講解了自定義工作界面及測試影片、編輯圖形對象及外部素材、典型動畫分類及設計制作。項目6（頁面布局的優化與處理）從CSS樣式概述入手，主要講解了樣式文件的定義和使用、常用的樣式實現、網頁整體布局實現。

本書作者團隊由校企兩方共同組成，長期從事Web用戶界面設計與制作一線教學工作，同時具備豐富的項目制作經驗，多年來團隊教科研成果突出。

本書是一本Web用戶界面設計與制作指南，信息量大、資源豐富，既可以作為高職高專院校相關課程的專用教材和學習輔導書，同時也是WUI設計愛好者的必備參考書。

本書由趙娟任主編，負責全書的統稿、修改、定稿工作，劉蘅、秦潔任副主編。主要編寫人員分工如下：李鑫平編寫了項目1和項目5的任務2，趙娟編寫了項目2和項目5的任務1，劉蘅編寫了項目3，王曉卓編寫了項目4和項目5的任務3，秦潔編寫了項目5任務1的任務實現部分，杜海穎編寫了項目6。

本書雖然傾注了作者的心血，但由于編寫水平有限，書中難免有疏漏之處，懇請各位讀者和專家批評指正。

編 者

2021年8月

前言

項目1 Web用戶界面設計入門 1
任務1 認識Web用戶界面 2
任務2 Web用戶界面的后臺表現 10
項目2 頁面內容的設計與制作 19
任務1 創建本地站點 20
任務2 簡單靜態網頁的制作 33
任務3 用表格排版網頁 52
任務4 網頁中表單的使用 63
任務5 使用HTML輔助Dreamweaver
設計制作網頁元素 76
項目3 素材圖像的調整與修飾 83
任務1 圖像素材的基礎處理 84
任務2 圖像的摳取調整 116
任務3 圖層工具的使用 127
項目4 頁面元素的設計與制作 135
任務1 logo設計制作 136
任務2 banner設計制作 143
任務3 按鈕設計制作 157
任務4 導航欄設計制作 164
項目5 簡單動畫的設計與制作 173
任務1 快速體驗動畫制作流程 174
任務2 編輯圖形對象及外部素材 182
任務3 典型動畫分類及設計制作 199
項目6 頁面布局的優化與處理 216
任務1 樣式文件的定義和使用 217
任務2 網頁常用的樣式實現 224
任務3 網頁整體布局實現 233
參考文獻 250

1. 實用運籌學 [主編　邢育紅　于晉臣]
2. 電子技術（第二版） [主編 覃愛娜 李飛]
3. 勞動爭議處理實務 [主編 王秀卿 羅靜]
4. 工程數學 [主編 郭立娟 王海]
5. 語音識別理論與實踐 [主編　莫宏偉]
6. 武術基礎教程 [主編 李代勇 謝志民]
7. 計算機網絡實訓教程 [主編 張浩軍 趙玉娟]
8. 畫法幾何與機械制圖習題集（多學時） [主編 趙軍]
9. 電工電子技術基礎 [主編 劉 軍 楊國龍 劉天成]
10. MySQL數據庫項目式教程 [陳亞峰]
11. 機械設計基礎（第二版） [主編 田亞平 李愛姣]
12. 畫法幾何與機械制圖 [主編 趙軍]
13. C語言程序設計習題與實驗指導（第二版） [主編 甄增榮 張賓]
14. C語言程序設計（第二版） [主編 甄增榮 田云霞]
15. Unity3D虛擬現實應用開發實踐 [主 編 劉龍]
16. 智能化技術基礎（第三版） [鄧文達　李禮]
17. 面向對象程序設計 [主編 張勇 張平華 趙小龍]
18. 網絡營銷 [主編 夏薇薇 劉婷 尚潔]
19. 電視節目策劃與制作（微課版） [主　編　黃滴滴]
20. 數據庫技術與應用實踐教程（SQL Server 2019） [主 編 嚴暉 周肆清]
21. 大學應用數學 [主編 郭立娟]
22. 工業機器人拆裝與調試 [主編 胡月霞 向艷芳 朱奇]
23. 功能材料制備與表征實驗指導書 [龔偉平 趙軍峰 梅海娟 等編著]
24. 信號與系統（第二版） [主編 張宇]
25. 信息技術基礎 [主編 唐倩 邵銳]
26. Python 語言程序設計實踐指導 [主編　張雙獅]
27. Photoshop 圖形圖像項目化教程 [主編 胡斌斌 黎婭 蘇大椿]
28. 基于.NET Core框架的分布式系統架構設計 [湯佳 著]
29. 體育舞蹈教程 [主編 劉偉 陳志明 曾明]
30. 線性代數導學篇 [主編 史昱]