Web用户界面设计与制作

技术融合，体现工作流程

素技并重，体现岗位需求

阶梯递进，体现训练过程

实时客观，体现效果反馈

总览分析，体现学习思路

资源齐备，体现学习辅助

在“互联网+”时代，人们日常生活各领域都离不开网络平台的使用，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. Amazing！儿童英语自然拼读分级教材（全8册） [王玲　编著]
8. Spark大数据处理技术 [主编　刘仁山　周洪翠　庄新妍]
9. 人工智能算法与实践 [主编　梁琨　张翼英]
10. 计算机网络技术项目化教程（微课版） [主编 王艳萍 安华萍]
11. 数据清洗 [黄源　刘智杨　孙大松]
12. 电路设计与PCB制作实操教程 [主编 周永宏]
13. 电路与电子技术Ⅰ—数字电子技术 [主编 郑玉珍 王淑琴]
14. Java编程基础案例式教程 [主编 陈艳华 唐春兰]
15. Python语言同步案例习题精解 [主编 肖朝晖]
16. Excel在会计工作中的应用（第三版） [主 编 赵艳莉 耿聪慧]
17. 应用数学 [主编 刘东海 刘丽瑶]
18. 计算机网络基础创新教程（模块化+课程思政版） [主编 唐继勇 李旭]
19. 计算机应用技术基础案例教程 [主编 周丽娟 王璐]
20. Unity应用开发与实战（微课版） [主 编 程永恒]
21. PHP程序设计项目化教程 [主 编 杜海颖]
22. 文学基础与影视欣赏 [杨华轲 朱伟利 毕雪燕 罗玲谊]
23. 路由交换技术项目化教程 [主编　范国娟]
24. 信息技术基础立体化教程 [邹承俊 周洪林 刘和文 叶煜 ]
25. 大学计算机基础与计算思维 [主编 闵笛 汪莹]
26. 无线局域网技术与实践 [主编 唐继勇 刘思伶]
27. 信息技术基础项目化教程 [主编 王宏斌 王万丽 王芳]
28. 体育与健康 [主编 马驰 吴雅彬]
29. 大学计算机信息素养（第二版） [主编 卢山]
30. 全国计算机等级考试一级（MS Office）指导手册 [主编 王宏斌 孙元 禹晨]