本书采用通俗易懂的语言，使用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 前端编程基础知识 1
    11理解什么是脚本  1
        111脚本语言的定义  1
        112脚本语言的特点  2
        113脚本语言的分类  2
        114浏览器脚本语言的应用  4
        115 jQuery 库  4
    12如何创建脚本  5
        121认识 JavaScript 脚本文件  5
        122创建第一个 JavaScript 脚本  7
        124动手练一练  10
    13弹窗可以这样做  11
        131浏览器的默认弹框  11
        132浏览器的自定义弹框  15
        133动手练一练  22
    小结  22
    习题  22
单元 2 基本网页特效 23
    21理解网页交互动效  23
        211网页动效的定义  23
        212网页动效的分类  23
        213网页特效的实现  25
    22【案例 1】背景调色板  26
        221案例介绍  26
        222案例准备  27
        223案例实现  30
        224案例拓展  32
    23【案例 2】注册与登录  32
        231案例介绍  32
        232案例准备  33
        233案例实现  38
        234案例拓展  47
    24【案例 3】电子钟表  47
        241案例介绍  47
        242案例准备  48
        243案例实现  49
        244案例拓展  51
    25【案例 4】工作任务单  52
        251案例介绍  52
        252案例准备  54
        253案例实现  60
        254案例拓展  72
    小结  73
    习题  73
单元 3 增强用户体验 74
    31 Web 页面动画特效  74
        311 CSS3 过渡与动画  74
        312 JavaScript 实现动画特效  79
        313 jQuery 动画的实现  81
    32【案例 1】微信红包领取动画  88
        321案例介绍  88
        322案例准备  89
        323案例实现  91
        324案例拓展  97
    33【案例 2】图片懒加载  98
        331案例介绍  98
        332案例准备  99
        333案例实现  100
        334案例拓展  104
    34【案例 3】图片轮播  105
        341案例介绍  105
        342案例准备  106
        343案例实现  107
        344案例拓展  115
    35【案例 4】趣味电子书  116
        351案例介绍  116
        352案例准备  117
        353案例实现  119
        354案例拓展  126
    小结  127
    习题  127
单元 4 网页事件处理 128
    41事件处理方法  128
        411鼠标事件处理  128
        412键盘事件处理  131
        413窗口事件处理  135
    42【案例 1】Tab 选项卡切换  139
        421案例介绍  139
        422案例准备  139
        423案例实现  141
        424案例拓展  144
    43【案例 2】响应式滑块图文轮播  145
        431案例介绍  145
        432案例准备  148
        433案例实现  150
        434案例拓展  157
    44【案例 3】焦点图展示效果  159
        441案例介绍  159
        442案例准备  160
        443案例实现  162
        444案例拓展  164
    45【案例 4】公司简介  165
        451案例介绍  165
        452案例准备  167
        453案例实现  168
        454案例拓展  176
    小结  177
    习题  177
单元 5 表单处理 178
    51表单验证  178
        511   HTML 表单元素  178
        512正则表达式  182
        513表单事件处理  185
    52【案例 1】信息登记卡  190
        521案例介绍  190
        522案例准备  191
        523案例实现  193
        524案例拓展  200
    53【案例 2】可视化拖动表单  201
        531案例介绍  201
        532案例准备  203
        533案例实现  204
        534案例拓展  207
    54【案例 3】仿问卷星  209
        541案例介绍  209
        542案例实现  210
        543案例拓展  216
    小结  217
    习题  217
单元 6 动效布局 218
    61 BOM 与 DOM 对象  218
        611 BOM 对象  218
        612 DOM 对象  219
    62【案例 1】页面骨架屏布局  220
        621案例介绍  220
        622案例准备  222
        623案例实现  224
        624案例拓展  231
    63【案例 2】瀑布流布局  232
        631案例介绍  232
        632案例准备  233
        633案例实现  234
        634案例拓展  237
    64【案例 3】图片响应式布局  238
        641案例介绍  238
        642案例准备  239
        643案例实现  241
        644案例拓展  243
    65【案例 4】商品列表布局  244
        651案例介绍  244
        652案例实现  246
        653案例拓展  251
    小结  252
    习题  252
单元 7 实战：在线音乐播放器 253
    71在线播放器页面布局  253
        711页面布局  253
        712页面展示  254
    72导航与轮播图  255
        721技术准备  255
        722代码实现  258
    73推荐音乐列表  261
        731技术准备  261
        732代码实现  262
    74音乐播放  266
        741技术准备  266
        742代码实现  268
    75歌词展示  272
        751技术准备  272
        752代码实现  273
    小结  276
单元 8 实战：来享用点餐 App 277
    81点餐 App 首页  277
        811效果展示  277
        812代码实现  278
    82餐品列表  284
        821效果展示  284
        822代码实现  285
    83结算中心  292
        831效果展示  292
        832代码实现  292
    84在线支付  299
        841效果展示  299
        842代码实现  299
    85就餐评价  302
        851效果展示  302
        852代码实现  303
    小结  306
参考文献 307

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

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