本书采用通俗易懂的语言，使用HTML、CSS、JavaScript、jQuery等技术介绍交互式设计的基础内容和核心原理，再通过项目实践应用相关技术，理论与实践相结合，使读者更深刻地理解本书内容。本书共分8个单元，内容包括前端编程基础知识、基本网页特效、增强用户体验、网页事件处理、表单处理、动效布局以及两个实战项目——在线音乐播放器和来享用点餐App。本书以实用、高效为标准，内容深入浅出、循序渐进，每个单元通过多个案例演示贯穿本单元的技术内容，凭借案例实战提升技能，帮助读者更好地掌握理论层面和技术层面的知识，使读者更深入、快速地应用Web前端交互式设计。本书适合作为高等职业院校各专业“网页设计与制作”课程的教材，也可作为Web前端开发人员培训教材，还可作为Web开发爱好者的自学用书。

当前时代，Web应用已经不再局限于桌面端应用，移动端的Web应用也得到空前发展，这就要求Web应用趋向智能化、大规模个性化体验。Web交互设计远非仅仅负责文字和图片，而是负责创建在屏幕上的所有元素，所有用户可能会触摸、点按或者输入的元素。


本书主要基于HTML、CSS、JavaScript、jQuery等技术编写，通过前端交互式设计实现用户与界面的交互。本书内容架构合理，知识由浅入深，以丰富的案例、完整的项目实践为主要内容，循序渐进地引导读者学习理论层面和技术层面的知识，并加以案例实战演示，帮助读者快速提升前端开发技能。


本书特点


随着时代的发展，计算机早已不仅仅是一个单向提供服务的产品，人与计算机之间的互动至关重要。在前端的交互式设计中，页面或界面会根据用户的行为（如键盘、鼠标、触摸等）进行相应的变化。本书语言通俗易懂，通过实战项目带领读者进入交互式设计的开发。


通过本书你将学习到以下内容：


单元1：主要介绍前端基础知识，包括讲解脚本语言的定义、特点、分类和应用，以及创建脚本和制作浏览器弹窗。


单元2：主要介绍如何设计基本网页特效，包括讲解网页特效的定义、分类和实现，以及制作4个相关特效案例。


单元3：主要介绍如何设计动画，增强用户体验，包括讲解CSS3动画、JavaScript动画和jQuery动画，以及制作4个相关动画案例。


单元4：主要介绍常用事件处理方法的使用，包括鼠标事件、键盘事件和窗口事件，以及制作4个相关事件处理案例。


单元5：主要介绍表单处理方法的使用，包括表单元素、表单事件和正则表达式语法，以及制作3个相关表单处理案例。


单元6：主要介绍常用的网页布局动态效果的实现，包括AJAX异步加载等待时的骨架屏布局效果、呈Z字形的瀑布流布局效果和随着窗口尺寸不断变化的响应式布局效果。
单元7：制作在线音乐播放器实战项目，项目采用Layui前端UI库提供的元素和模块实现页面的部分功能，并结合HTML5的audio音频媒体标签和CSS的Filter过滤函数实现音乐播放页面。
单元8：制作来享用点餐App实战项目，项目采用jQuery WeUI库作为基础组件样式，并结合Flex弹性盒子布局实现页面的整体布局效果。
通过本书的系统学习，读者能够快速掌握前端交互式设计的开发流程，为后续深入学习前端设计开发奠定基础。
致谢
本书的编写和整理工作由北京千锋互联科技有限公司与河南轻工职业学院共同完成，其中主要的参与人员有陈亚峰、齐英兰、潘亚、李彩艳、韩文雅、田芳、程方玉、杨敬伟。河南轻工职业学院陈亚峰任主编，河南轻工职业学院齐英兰、田芳、程方玉、杨敬伟任副主编。陈亚峰编写了单元1、6、7、8、齐英兰编写了单元3，田芳编写了单元2，程方玉编写了单元5，杨敬伟编写了单元4、潘亚、李彩艳、韩文雅在本书的编写和代码调试中提供了大量帮助。除此之外，千锋教育的500多名学员参与了教材的试读工作，他们站在初学者的角度对教材提出了许多宝贵的修改意见，在此一并表示衷心的感谢。
意见反馈
在本书的编写过程中，虽然力求完美，但难免有一些不足之处，欢迎各界专家和读者朋友们给予宝贵的意见，联系方式：textbook@1000phone.com。
编 者


2022年10月

单元1前端编程基础知识.........................................................................................11.1理解什么是脚本................................................................................................................11.1.1脚本语言的定义.......................................................................................................11.1.2脚本语言的特点.......................................................................................................21.1.3脚本语言的分类........

陈亚峰，男，副教授，河南轻工职业学院系党支部书记，主要从事人工智能、知识图谱的研究，从教16年来主要讲授软件工程、数据结构、网页开发与设计、嵌入式数据库等。现任软件技术专业带头人，河南省教育厅学术技术带头人，省级名师工作室主要成员，入选河南省高校青年骨干教师培养计划。主持和参与了课题研究10余项，并获得省一等奖获二等奖；发表论文20余篇，其中核心4篇；主编或参编教材8部，获得河南省首届教材奖二等奖；多次获得省教学能力比赛一等奖，2018年12月获得全国信息化教学设计与说课大赛二等奖。

本书主要基于HTML、CSS、JavaScript、jQuery等技术编写，通过前端交互式设计实现用户与界面的交互。书籍内容架构合理，知识由浅入深，以丰富的案例、完整的项目实践为主要内容，循序渐进地引导读者学习理论层面和技术层面的知识，并加以案例实战演示，帮助读者快速提升前端开发技能。通过本书的系统学习，读者能够快速掌握前端交互式设计的开发流程，为后续深入学习前端设计开发奠定基础。