Web用戶界面設(shè)計與制作

技術(shù)融合，體現(xiàn)工作流程

素技并重，體現(xiàn)崗位需求

階梯遞進，體現(xiàn)訓(xùn)練過程

實時客觀，體現(xiàn)效果反饋

總覽分析，體現(xiàn)學(xué)習(xí)思路

資源齊備，體現(xiàn)學(xué)習(xí)輔助

在“互聯(lián)網(wǎng)+”時代，人們?nèi)粘Ｉ�活各領(lǐng)域都離不開網(wǎng)絡(luò)平臺的使用，WUI（Web用戶界面）顯得尤為重要。本書作者瞄準市場對Web用戶界面設(shè)計制作相關(guān)崗位的能力分解要求，一方面面向高職院校相關(guān)課程教學(xué)，另一方面面向WUI設(shè)計愛好者的自主學(xué)習(xí)，教材內(nèi)容設(shè)計以項目為引領(lǐng)，以任務(wù)為導(dǎo)向，融合多項常用技術(shù)，強調(diào)了學(xué)習(xí)者動手能力的循序漸進培養(yǎng)，內(nèi)容系統(tǒng)全面、清晰易懂、實用性強。

本書特色如下：

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

 素技并重，體現(xiàn)崗位需求：歸納“知識+技能+標(biāo)準”的20個工作任務(wù)，全面覆蓋Web用戶界面設(shè)計與制作技術(shù)，不斷增強學(xué)習(xí)者的崗位意識。

 階梯遞進，體現(xiàn)訓(xùn)練過程：拓展“知識解析+任務(wù)實現(xiàn)+學(xué)習(xí)小測”3個環(huán)節(jié)，構(gòu)建融合互通的工作任務(wù)體系，不斷增強學(xué)習(xí)者綜合能力。

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

 總覽分析，體現(xiàn)學(xué)習(xí)思路：設(shè)置“知識導(dǎo)圖+任務(wù)描述”，幫助學(xué)習(xí)者梳理學(xué)習(xí)思路，不斷提升學(xué)習(xí)興趣與學(xué)習(xí)效率。

 資源齊備，體現(xiàn)學(xué)習(xí)輔助：配備“電子課件+任務(wù)資源+完整代碼+自測標(biāo)答”，為學(xué)習(xí)者提供有效的學(xué)習(xí)輔助。

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

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

本書是一本W(wǎng)eb用戶界面設(shè)計與制作指南，信息量大、資源豐富，既可以作為高職高專院校相關(guān)課程的專用教材和學(xué)習(xí)輔導(dǎo)書，同時也是WUI設(shè)計愛好者的必備參考書。

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

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

編 者

2021年8月

前言

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

1. 人工智能應(yīng)用基礎(chǔ) [主編 楊纓 李佳]
2. 中華水文化（慕課版）（第二版） [畢雪燕 楊華軻 羅玲誼 等編著]
3. 電路與電子技術(shù)Ⅱ——電路分析基礎(chǔ) [主編 陳曉 金哲]
4. 人工智能概論（第二版） [主編　任云暉　丁紅　徐迎春 ]
5. 信息時代美育之道 [主編　劉宏宇　黎婭]
6. 數(shù)字媒體交互設(shè)計項目式教程（微課版） [主編　蘇陸]
7. Amazing！兒童英語自然拼讀分級教材（全8冊） [王玲　編著]
8. Spark大數(shù)據(jù)處理技術(shù) [主編　劉仁山　周洪翠　莊新妍]
9. 人工智能算法與實踐 [主編　梁琨　張翼英]
10. 計算機網(wǎng)絡(luò)技術(shù)項目化教程（微課版） [主編 王艷萍 安華萍]
11. 數(shù)據(jù)清洗 [黃源　劉智楊　孫大松]
12. 電路設(shè)計與PCB制作實操教程 [主編 周永宏]
13. 電路與電子技術(shù)Ⅰ—數(shù)字電子技術(shù) [主編 鄭玉珍 王淑琴]
14. Java編程基礎(chǔ)案例式教程 [主編 陳艷華 唐春蘭]
15. Python語言同步案例習(xí)題精解 [主編 肖朝暉]
16. Excel在會計工作中的應(yīng)用（第三版） [主 編 趙艷莉 耿聰慧]
17. 應(yīng)用數(shù)學(xué) [主編 劉東海 劉麗瑤]
18. 計算機網(wǎng)絡(luò)基礎(chǔ)創(chuàng)新教程（模塊化+課程思政版） [主編 唐繼勇 李旭]
19. 計算機應(yīng)用技術(shù)基礎(chǔ)案例教程 [主編 周麗娟 王璐]
20. Unity應(yīng)用開發(fā)與實戰(zhàn)（微課版） [主 編 程永恒]
21. PHP程序設(shè)計項目化教程 [主 編 杜海穎]
22. 文學(xué)基礎(chǔ)與影視欣賞 [楊華軻 朱偉利 畢雪燕 羅玲誼]
23. 路由交換技術(shù)項目化教程 [主編　范國娟]
24. 信息技術(shù)基礎(chǔ)立體化教程 [鄒承俊 周洪林 劉和文 葉煜 ]
25. 大學(xué)計算機基礎(chǔ)與計算思維 [主編 閔笛 汪瑩]
26. 無線局域網(wǎng)技術(shù)與實踐 [主編 唐繼勇 劉思伶]
27. 信息技術(shù)基礎(chǔ)項目化教程 [主編 王宏斌 王萬麗 王芳]
28. 體育與健康 [主編 馬馳 吳雅彬]
29. 大學(xué)計算機信息素養(yǎng)（第二版） [主編 盧山]
30. 全國計算機等級考試一級（MS Office）指導(dǎo)手冊 [主編 王宏斌 孫元 禹晨]