Web用戶(hù)界面設(shè)計(jì)與制作

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

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

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

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

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

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

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

本書(shū)特色如下：

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

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

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

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

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

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

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

本書(shū)作者團(tuán)隊(duì)由校企兩方共同組成，長(zhǎng)期從事Web用戶(hù)界面設(shè)計(jì)與制作一線教學(xué)工作，同時(shí)具備豐富的項(xiàng)目制作經(jīng)驗(yàn)，多年來(lái)團(tuán)隊(duì)教科研成果突出。

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

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

本書(shū)雖然傾注了作者的心血，但由于編寫(xiě)水平有限，書(shū)中難免有疏漏之處，懇請(qǐng)各位讀者和專(zhuān)家批評(píng)指正。

編 者

2021年8月

前言

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

1. 嵌入式人工智能技術(shù)應(yīng)用（數(shù)字教材） [主編 胡娜 楊國(guó)勇 晏廷榮]
2. Java Web項(xiàng)目化設(shè)計(jì)實(shí)踐教程 [邱云 曾陳萍]
3. 人工智能開(kāi)發(fā)框架應(yīng)用 [主編 王明超 蘆婭云]
4. 民航客艙服務(wù)實(shí)用英語(yǔ)教程 [主編 田靜 徐亞玲]
5. Python數(shù)據(jù)分析 [主編　馮志輝　趙磊　李放]
6. 大學(xué)信息技術(shù) [曾翰穎 編著]
7. 多維視域下的高校籃球教學(xué)創(chuàng)新研究 [張利超 李寧 著]
8. 創(chuàng)新創(chuàng)業(yè)訓(xùn)練實(shí)踐教程 [主編 王日華 陳武 黃喆誠(chéng)]
9. 實(shí)用運(yùn)籌學(xué) [主編　邢育紅　于晉臣]
10. 電子技術(shù)（第二版） [主編 覃愛(ài)娜 李飛]
11. 勞動(dòng)爭(zhēng)議處理實(shí)務(wù) [主編 王秀卿 羅靜]
12. 工程數(shù)學(xué) [主編 郭立娟 王海]
13. 語(yǔ)音識(shí)別理論與實(shí)踐 [主編　莫宏偉]
14. 武術(shù)基礎(chǔ)教程 [主編 李代勇 謝志民]
15. 計(jì)算機(jī)網(wǎng)絡(luò)實(shí)訓(xùn)教程 [主編 張浩軍 趙玉娟]
16. 畫(huà)法幾何與機(jī)械制圖習(xí)題集（多學(xué)時(shí)） [主編 趙軍]
17. 電工電子技術(shù)基礎(chǔ) [主編 劉 軍 楊國(guó)龍 劉天成]
18. MySQL數(shù)據(jù)庫(kù)項(xiàng)目式教程 [陳亞峰]
19. 機(jī)械設(shè)計(jì)基礎(chǔ)（第二版） [主編 田亞平 李?lèi)?ài)姣]
20. 畫(huà)法幾何與機(jī)械制圖 [主編 趙軍]
21. C語(yǔ)言程序設(shè)計(jì)習(xí)題與實(shí)驗(yàn)指導(dǎo)（第二版） [主編 甄增榮 張賓]
22. C語(yǔ)言程序設(shè)計(jì)（第二版） [主編 甄增榮 田云霞]
23. Unity3D虛擬現(xiàn)實(shí)應(yīng)用開(kāi)發(fā)實(shí)踐 [主 編 劉龍]
24. 智能化技術(shù)基礎(chǔ)（第三版） [鄧文達(dá)　李禮]
25. 面向?qū)ο蟪绦蛟O(shè)計(jì) [主編 張勇 張平華 趙小龍]
26. 網(wǎng)絡(luò)營(yíng)銷(xiāo) [主編 夏薇薇 劉婷 尚潔]
27. 電視節(jié)目策劃與制作（微課版） [主　編　黃滴滴]
28. 數(shù)據(jù)庫(kù)技術(shù)與應(yīng)用實(shí)踐教程（SQL Server 2019） [主 編 嚴(yán)暉 周肆清]
29. 大學(xué)應(yīng)用數(shù)學(xué) [主編 郭立娟]
30. 工業(yè)機(jī)器人拆裝與調(diào)試 [主編 胡月霞 向艷芳 朱奇]