前端交互设计基础

赵丽梅，女，副教授，绵阳职业技术学院，参与软件技术专业人才培养方案的制定：全栈工程师方向、前端工程师方向；负责的课程标准：计算机导论、C语言程序设计、前端交互设计、数据库应用（所有课程）；在线课程：关系数据库基础、Web志愿服务端程序设计；参与软件技术专业资源库建设。

项目一 走进前端交互世界 1

任务1-1 前端技术的演进――IT人的担当与奋斗 1

项目二 移动的欢迎页 9

任务2-1 问候语的写入 9

任务2-2 欢迎页的移动 23

任务2-3 问候语的写入与调试 39

任务2-4 欢迎页的完善 51

项目三 首页链接页 77

任务3-1 日历的实现 77

任务3-2 时钟的制作 99

项目四 志愿项目 125

任务4-1 表格隔行异色 125

任务4-2 志愿者报名 133

项目五 首页轮播图 141

任务5-1 幻灯片轮播 141

任务5-2 点动控制幻灯片轮播 154

任务5-3 无缝轮播 165

任务5-4 特效轮播（一） 176

任务5-5 特效轮播（二） 189

项目六 首页注册页面 202

任务6-1 表单验证（一） 202

任务6-2 表单验证（二） 212

任务6-3 本地存储 219

任务6-4 注册信息的存储 227

任务6-5 表单生成器 236

项目七 志愿风采 251

任务7-1 风采相册的制作 251

任务7-2 敬老院志愿服务 259

项目八 志愿之星 266

任务8-1 认识jQuery 266

任务8-2 服务宣言展示 273

任务8-3 列表风格切换（一） 278

任务8-4 列表风格切换（二） 284

任务8-5 服务评星与留言板点评 289

任务8-6 丰富网页交互效果 296

任务8-7 列表展示 301

项目九 锦上添花 311

任务9-1 响应式导航 311

任务9-2 飘落的枫叶 318

任务9-3 图片3D特效展示 324

参考文献 330

三、前端技术的演进

从1990年开始出现Web前端技术至今已有几十年的历史，前端技术从简单的HTML 演进到SPA框架，经历了非常艰辛的技术创新、攻坚克难的阶段。扫描二维码1-1-1查看 Web前端技术的演进。

1、静态页面阶段

1990年12月25日， Tim Berners-Lec在他的NeXT 计算机上部署了第一套“主机-网站-浏览器”构成的Web系统，这标志BS架构的网站应用软件的开端，也是前端工程的开端。

这个阶段的网页还非常原始，以HTML技术为主，是纯静态的只读网页。静态页面网页效果如图1-1-3所示，

2.动态页面阶段

1995年，Netscape公司的工程师 Brendan Eich 设计了JavaScript 脚本语言，并集成到了Navigator 2.0版本中。JavaScript 诞生之初就给网页带来了跑马灯、浮动广告之类的特效和应用，让网页动了起来。动态页面网页效果如图1-1-4所示。以朱

这时以Google为代表的搜索引擎和各种论坛出现，万维网开始飞速发展。

……

采用校企合作、校校合作方式编写，注重培养学生的Web前端开发能力。教材依托《校园志愿服务网站》，针对性选取子项目，子项目分解若干任务，以任务描述、思路整理、代码实现、创新训练、任务总结、知识梳理、讨论、认证测试、实战提升为教材体例，展开前端交互技术JavaScript与jQuery的基础知识介绍与技能实战训练。教材采用校企研合作方式编写，精心设计案例，引领读者从模仿开始，用体验尝试代替知识点一一讲解、用思路整理指引学习技巧，用问题发现激发学习创新，用方法归纳形成学习经验。对标前端工程师岗位，注重技能与职业素养的培养，适时的进行前端工程师职业愿景的展望，强调职业规划与职业担当。