本书按照Web前端工程师岗位技能要求，以真实项目组织内容，由浅入深地讲解了如何利用HTML5和CSS3等网页制作技术制作网站。本书共分为7个项目，项目1为Web前端基础的相关介绍；项目2和项目3包含HTML和CSS的基础知识、常用标签、CSS基础语法及选择器等内容；项目4和项目5介绍了HTML5语义化标签、CSS3的新特性等；项目6主要介绍JavaScript编程基础等；项目7为综合实践。全书以任务为导向，通过多个项目将知识点贯穿起来，并辅以实例，以此激发读者的学习兴趣。 本书可作为高等职业院校计算机相关专业的教材，也可作为计算机行业相关从业人员的自学参考书。

1.内容丰富、组织合理 本书按照由浅入深的顺序，结合职业教育背景下的软件技术专业学生的特点，以碎片化“知识点”为单元，采用案例驱动、项目导向，通过理论与实践相结合的方式，便于读者在学习知识的同时进行项目实践。 2.结合实际、突出实践 本书由企业工程师精心设计了大量示例和项目实训，体现了“教、学、做一体化”的思想，方便读者快速上手，培养读者实际操作的动手能力。示例和项目实践有详细的代码说明和实践步骤解释。 3.资源丰富、立体教学 本书配备了丰富的立体化教学资源，包括教学课件、案例代码、习题及答案等。 4.校企合作“双元”模式教材 本书由成都中慧科技有限公司组织，邀请实战经验丰富的IT专家参与教材建设，将最前沿的技术引入到教材中，保证内容新颖实用。教材主编积累了丰富的教学经验，他们依据先进的教育理念，结合全国职业院校实际教学情况以及学生专业水平，与IT专家共同探讨培养目标、内容、框架，基于不同的教学情境，开发出新一代信息技术优质教材。

李洪建 副教授，山东省高等学校教师，国家技能鉴定高级考评员、全国高职计算机基础学会电子信息委员、山东省计算机职业教育教学指导委员会委员、山东省物联网职业教育集团副秘书长。近五年，获国家教学成果奖二等奖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