Web前端开发项目案例教程

本书根据职业院校学生以及社会人员对Web前端开发相关基本技能的需求，按照“项目+任务+习题”模式讲解相关内容。本书语言通俗易懂，实例实用性强，使读者加深对相关知识的理解和掌握。本书提供的思路和方法，涵盖了工作领域、工作任务和职业技能要求，帮助读者走出学习困境，突破难关，成为社会急需的高技能Web前端开发人才。本书以一体化教学为框架，通过基础理论知识和实用任务，将理论和实际结合起来，使读者能够通过学习本书全方位掌握相关内容和技能。

李洪建，山东科技职业学院信息工程系副主任、副教授，山东省高等学校教学名师，国家技能鉴定高级考评员、全国高职计算机基础学会电子信息委员、山东省计算机职业教育教学指导委员会委员、山东省物联网职业教育集团副秘书长、潍坊商校专业建设指导委员会专家。主要讲授《web前端开发基础》《H5+css3》等课程，获国家教学成果奖二等奖1项，国家在线精品课程1门，省教学成果奖特等奖1项，一等奖2项，山东省教育科学研究优秀成果二等奖1项，指导学生获国赛一等奖2项。近五年来，出版教材两部，主持省软科学、省教改、省高校科技计划项目6项，参与各类横纵向课题27项。授权实用新型专利2项，软件著作权2件。

在搭建蔬菜科技展示网站开发环境之前，我们首先需要了解一些 Ｗｅｂ前端的基础知
识，包括初识 Web前端、Web标准、Web前端的三大核心技术、浏览器，以及 Visual Studio
Code的下载与安装，同时使用 Visual Studio Code创建第一个HTML网页，下面将对这些
内容进行介绍。

项目 １ 蔬菜科技展示网制作 ……… 001
学习目标 ……………………………002
项目描述 …………………………… 002
任务 １ 搭建蔬菜科技展示网站开发
环境 ……………………… 003
需求分析 ……………………… 003
知识储备 ……………………… 003
一、初识 Web前端 ………… 003
二、Web标准 ……………… 004
三、Web前端的三大核心技术
………………………… 005
四、浏览器 ………………… 006
五、Visual Studio Code的下载
与安装 ………………… 007
六、安装插件 ……………… 008
七、Visual Studio Code的使用
…………………………008
任务实现 ……………………… ０１０
任务 ２ 搭建蔬菜科技展示网站首页
…………………………… ０１１
需求分析 ……………………… ０１１
知识储备 ……………………… ０１２
一、HTML发展历史 ……… ０１２
二、HTML与 ＸHTML……… ０１３
三、HTML５文档结构 ……… ０１４
四、HTML５标签与元素 …… ０１５
五、HTML５语义化 ………… ０１６
六、HTML５的结构标签 …… ０１６
七、标题标签 ……………… ０１７
八、段落标签 ……………… ０１８
九、图片标签 ……………… ０１９
十、超链接标签 …………… ０２２
十一、层次标签 …………… ０２６
任务实现 ……………………… ０２７
任务 ３ 搭建蔬菜种植技术页面 … ０３１
需求分析 ……………………… ０３１
知识储备 ……………………… ０３２
一、换行标签 ……………… ０３２
二、水平线标签 …………… ０３３
三、文本格式化标签 ……… ０３５
任务实现 ……………………… ０３６
任务 ４ 搭建病虫害防治方法页面
…………………………… ０３８
需求分析 ……………………… ０３８
知识储备 ……………………… ０３９
一、表格基本结构 ………… ０３９
二、语义化标签 …………… ０４１
三、单元格边距与间距 …… ０４３
四、合并行与列 …………… ０４５
五、表格的其他常用属性 … ０４７
任务实现 ……………………… ０４８
任务 ５ 搭建农业技术页面 ……… ０５０
需求分析 ……………………… ０５０
知识储备 ……………………… ０５１
一、无序列表标签 ………… ０５１
二、有序列表标签 ………… ０５２
三、自定义列表标签 ……… ０５４
任务实现 ……………………… ０５５
任务 ６ 搭建农业技术调查页面 … ０５７
需求分析 ……………………… ０５７
知识储备 ……………………… ０５８
一、表单简介 ……………… ０５８
二、创建表单 ……………… ０５８
三、表单输入标签 ………… ０６０
四、标记标签 ……………… ０６２
五、下拉列表标签 ………… ０６４
六、多行文本框标签 ……… ０６６
任务实现 ……………………… ０６８
任务 ７ 搭建关于我们页面 ……… ０７０
需求分析 ……………………… ０７０
知识储备 ……………………… ０７１
一、特殊字符 ……………… ０７１
二、 ＜span＞标签 ………… ０７２
三、 ＜fieldset＞标签 ……… ０７２
任务实现 ……………………… ０７４
项目小结 …………………………… ０７４
习 题 …………………………… ０７５

项目 ２ 风筝展示网制作 …………… ０７７
学习目标 …………………………… ０７８
项目描述 …………………………… ０７８
任务 １ 设置风筝展示网页面的
基础样式 ………………… ０７９
需求分析 ……………………… ０７９
知识储备 ……………………… ０８０
一、CSS概述 ……………… ０８０
二、CSS3样式的引入方式 … ０８１
三、CSS3基础属性 ………… ０８５
四、CSS3显示或隐藏属性 … ０９１
五、CSS3新增文本与背景属性
………………………… １００
六、CSS3基础选择器 ……… １０８
七、CSS3复合选择器 ……… １１８
任务实现 ……………………… １２４
任务 ２ 改进风筝展示网页面样式 … １２７
需求分析 ……………………… １２７
知识储备 ……………………… １２８
一、盒子模型概述 ………… １２８
二、内容区域 ……………… １２９
三、边框常用属性 ………… １２９
四、新增边框属性 ………… １３１
五、内边距属性 …………… １３６
六、外边距属性 …………… １３８
任务实现 ……………………… １４３
任务 ３ 完成风筝展示网页面布局
…………………………… １４４
需求分析 ……………………… １４４
知识储备 ……………………… １４５
一、浮动概述 ……………… １４５
二、清除浮动 ……………… １４６
三、定位属性 ……………… １４７
四、相对定位 ……………… １４８
五、绝对定位 ……………… １５０
六、固定定位 ……………… １５２
任务实现 ……………………… １５４
项目小结 …………………………… １５６
习 题 …………………………… １５６

项目 ３ 线上博物馆制作 …………… １５９
学习目标 …………………………… １６０
项目描述 …………………………… １６０
任务 １ 完成移动端线上博物馆的
基础布局 ………………… １６１
需求分析 ……………………… １６１
知识储备 ……………………… １６１
一、网页模块命名规范 …… １６２
二、视口 …………………… １６３
三、百分比布局 …………… １６５
任务实现 ……………………… １６８
任务 ２ 设置线上博物馆 Flex布局
…………………………… １７２
需求分析 ……………………… １７２
知识储备 ……………………… １７２
一、Flex结构 ……………… １７２
二、Flex容器属性 ………… １７３
三、Flex项目属性 ………… １８１
任务实现 ……………………… １８４
任务 ３ 设置线上博物馆Rem
与 Grid布局 ……………… １８９
需求分析 ……………………… １８９
知识储备 ……………………… １９０
一、媒体查询 ……………… １９０
二、Rem布局 ……………… １９４
三、Grid布局 ……………… １９６
任务实现 ……………………… １９９
项目小结 …………………………… ２０７
习 题 …………………………… ２０７

项目 ４ 科技资讯网制作 …………… ２０９
学习目标 …………………………… ２１０
项目描述 …………………………… ２１０
任务 １ 实现科技资讯网首页的
导航栏与下拉菜单 ……… ２１１
需求分析 ……………………… ２１１
知识储备 ……………………… ２１２
一、JavaScript简介 ………… ２１２
二、JavaScript的引入方式
………………………… ２１３
三、标识符、关键字与保留字
………………………… ２１５
四、常量、变量与数据类型
………………………… ２１６
五、JavaScript函数 ………… ２１８
六DOM对象 ……………… ２１８
任务实现 ……………………… ２２０
任务 ２ 实现科技资讯网首页的广告栏
与城市商业信息 ………… ２２４
需求分析 ……………………… ２２４
知识储备 ……………………… ２２５
一、流程控制 ……………… ２２５
二、数组 …………………… ２２８
三、BOM对象 ……………… ２３１
四、定时器 ………………… ２３２
任务实现 ……………………… ２３５
任务 ３ 实现科技资讯网首页的
热门推荐与资讯 ………… ２４１
需求分析 ……………………… ２４１
知识储备 ……………………… ２４２
一、事件对象 ……………… ２４２
二、事件的调用和处理 …… ２４３
三、常用的JavaScript事件
………………………… ２４３
四、ECMAScript6.0 新特性
………………………… ２４６
任务实现 ……………………… ２５１
项目小结 …………………………… ２５６
习 题 …………………………… ２５６

项目 ５ 山东多彩生活网制作 ……… ２５９
学习目标 …………………………… ２６０
项目描述 …………………………… ２６０
任务 １ 搭建山东多彩生活网首页
…………………………… ２６１
需求分析 ……………………… ２６１
项目准备 ……………………… ２６２
一、项目结构 ……………… ２６２
二、项目文件夹结构 ……… ２６３
任务实现 ……………………… ２６３
任务 ２ 搭建山东多彩生活网蔬菜
产业页面 ………………… ２８８
需求分析 ……………………… ２８８
任务实现 ……………………… ２８９
任务 ３ 搭建山东多彩生活网风筝
文化页面 ………………… ２９３
需求分析 ……………………… ２９３
任务实现 ……………………… ２９４
任务 ４ 搭建山东多彩生活网旅游
指南页面 ………………… ２９９
需求分析 ……………………… ２９９
任务实现 ……………………… ３００
任务 ５ 搭建山东多彩生活网科技
发展页面 ………………… ３０２
需求分析 ……………………… ３０２
任务实现 ……………………… ３０３
任务 ６ 搭建山东多彩生活网
关于我们页面 …………… ３０５
需求分析 ……………………… ３０５
任务实现 ……………………… ３０６
项目小结 …………………………… ３０７

参考文献 ……………………………… ３０８