李洪建
副教授，山东省高等学校教师，国家技能鉴定高级考评员、全国高职计算机基础学会电子信息委员、山东省计算机职业教育教学指导委员会委员、山东省物联网职业教育集团副秘书长。近五年，获国家教学成果奖二等奖1项，省教学成果奖特等奖1项、一等奖2项，山东省教育科学研究优秀成果二等奖1项，指导学生获国赛一等奖2项，主持省教改、省软科学、省高校科技（人文）等课题7项，授权实用新型专利2项，软件著作权2个。

游学军
硕士，毕业于南京邮电大学，现任职于江苏海事职业技术学院信息工程学院，主要研究方向为软件开发，一直承担Java开发、前端开发相关核心课程的教学工作。担任过移动互联网应用软件开发、Web应用开发等全国职业院校技能大赛赛项裁判员，指导学生参加江苏省职业院校技能大赛获得一等奖、指导学生参加全国蓝桥杯软件大赛获得二等奖，指导学生参加中国软件杯大赛获得三等奖等。主持完成江苏省教育技术研究重点课题2项，参与多项省级课题的研究。

李真
硕士研究生，山东科技职业学院信息工程系中级讲师，从教8年，所建课程入选2017年度、2019年度、2020年度“山东终身学习在线”资源库课程，其中2019年度课程被评选为“山东省优秀课程资源”.曾获山东省第六届“超星杯”青年教师教学能力大赛二等奖，第八届“超星杯”青年教师教学能力大赛三等奖等等。

刘辉
计算机软件技术专业副教授。2017年获辽宁省信息技术优秀科研成果二等奖、辽宁省职业院校技能大赛（高职组）软件测试赛项一等奖。参编计算机专业教材3本。


朱晓彦
安徽工业经济职业技术学院计算机与艺术学院副院长，具有美国红帽认证工程师、虚拟化工程师、微软认证专家、中国开源推进联盟Linux认证讲师、南京五十五所云计算金牌讲师、工信部云计算工程师等认证资格。2020年荣获省级技术技能大师称号，并设立技术技能大师工作室；2014年荣获安徽省教育厅省级教坛新秀称号，并于2013年获得美国红帽软件公司颁发的中国区优秀教育贡献奖；获得教科研奖励多项。长期担任安徽省职业技能大赛中职组企业网搭建与应用项目裁判长，并担任安徽省中小学现代教育技术装备技能大赛专家裁判。

目录

项目1　Web前端基础 1
任务1 认识Web前端 1
1．1．1　Web前端发展历史和前端主要技术简介 1
1．1．2　Web前端学习路线 2
任务2　开发准备 3
1．2．1　主流浏览器 3
1．2．2　开发工具 3
小　　结 6
习　　题 6
项目2　HTML快速入门 8
任务1 我的第 一个页面 8
2．1．1　案例描述 8
2．1．2　知识储备 9
2．1．3　需求分析 13
2．1．4　案例实施 14
任务2　每日新闻列表 15
2．2．1　案例描述 15
2．2．2　知识储备 15
2．2．3　需求分析 22
2．2．4　案例实施 22
任务3　课程信息表 24
2．3．1　案例描述 24
2．3．2　知识储备 25
2．3．3　需求分析 27
2．3．4　案例实施 28
任务4　校园调查表 29
2．4．1　案例描述 29
2．4．2　知识储备 30
2．4．3　需求分析 35
2．4．4　案例实施 35
任务5　项目实战——网站登录页 37
2．5．1　案例描述 37
2．5．2　效果展示 37
2．5．3　需求分析 37
2．5．4　案例实施 38
小　　结 39
习　　题 39
项目3　CSS（层迭样式表） 41
任务1 新闻详情页制作 41
3．1．1　案例描述 41
3．1．2　知识储备 41
3．1．3　需求分析 65
3．1．4　案例实施 66
任务2　个人相册制作 70
3．2．1　案例描述 70
3．2．2　知识储备 71
3．2．3　需求分析 77
3．2．4　案例实施 77
任务3　商城列表布局 79
3．3．1　案例描述 79
3．3．2　知识储备 80
3．3．3　需求分析 83
3．3．4　案例实施 83
任务4　常见网站侧边导航栏的制作 88
3．4．1　案例描述 88
3．4．2　知识储备 89
3．4．3　需求分析 91
3．4．4　案例实施 91
任务5　项目实战——商城首页制作 95
3．5．1　案例描述 95
3．5．2　需求分析 96
3．5．3　案例实施 97
小　　结 104
习　　题 104
项目4　HTML5构建网站 106
任务1 视频/音频展示网 106
4．1．1　案例描述 106
4．1．2　知识储备 107
4．1．3　需求分析 110
4．1．4　案例实施 110
任务2　员工入职信息录入 113
4．2．1　案例描述 113
4．2．2　知识储备 114
4．2．3　需求分析 116
4．2．4　案例实施 117
任务3　项目实战——学校网站 123
4．3．1　案例描述 123
4．3．2　需求分析 124
4．3．3　案例实施 125
小　　结 133
习　　题 133
项目5　CSS3新特性 135
任务1 照片墙 135
5．1．1　案例描述 135
5．1．2　知识储备 136
5．1．3　需求分析 139
5．1．4　案例实施 140
任务2　旅游网首页（响应式） 142
5．2．1　案例描述 142
5．2．2　知识储备 144
5．2．3　需求分析 146
5．2．4　案例实施 147
任务3　个人相册 157
5．3．1　案例描述 157
5．3．2　知识储备 157
5．3．3　需求分析 159
5．3．4　案例实施 160
任务4　暴怒的小猪 162
5．4．1　案例描述 162
5．4．2　知识储备 162
5．4．3　需求分析 164
5．4．4　案例实施 164
任务5　3D相册环 168
5．5．1　案例描述 168
5．5．2　知识储备 168
5．5．3　需求分析 169
5．5．4　案例实施 169
任务6　项目实战——艺展网站 172
5．6．1　案例描述 172
5．6．2　效果展示 172
5．6．3　需求分析 172
5．6．4　案例实施 173
小　　结 181
习　　题 181
项目6　JavaScript编程基础 183
任务1 抽奖活动 183
6．1．1　案例描述 183
6．1．2　知识储备 184
6．1．3　需求分析 189
6．1．4　案例实施 189
任务2　公司数据加密 192
6．2．1　案例描述 192
6．2．2　知识储备 192
6．2．3　需求分析 195
6．2．4　案例实施 195
任务3　找色块游戏 196
6．3．1　案例描述 196
6．3．2　知识储备 196
6．3．3　需求分析 198
6．3．4　案例实施 198
任务4　用户信息录入 200
6．4．1　案例描述 200
6．4．2　知识储备 201
6．4．3　需求分析 204
6．4．4　案例实施 204
任务5　项目实战——宠物世界网站 209
6．5．1　案例描述 209
6．5．2　需求分析 209
6．5．3　案例实施 209
小　　结 220
习　　题 220
项目7　综合项目——环保网站 222
7．1 项目介绍 222
7．2　需求分析 222
7．3　页面设计 224
7．4　项目实施 224