Web前端开发项目化教程(第3版)/胡平

本教材使用HTML5+CSS3技术，由校企合作、校 校合作编写，旨在培养学生的Web前端开发能力。教 材按照由简单到复杂的顺序，设计了8个教学项目， 分别是：项目1简单网页设计、项目2文本类网页设 计、项目3图像类网页设计、项目4响应式布局网站 设计、项目5媒体杂志类网页设计、项目6移动端推 广项目、项目7企业官网设计、项目8使用canvas制 作飞机大战游戏。前5个项目锻炼了Web前端的必要 技能，是“必修”内容，满足于 大多数院校的学 期教学需要；在内容设计上，将知识点融在了项目 开发的各个子任务中，让学生边学边操作边提高。 后3个项目是专项提高项目，是“选修、拓展”内容 ，供教师和学生按需选择；在项目选取上，项目6是 移动端项目，项目7是实战开发项目，项目8是游戏 开发项目；内容设计上，在项目开发之前整理出必 要的知识，让学生有所储备之后，再去投入开发项 目。所有的项目完成后进行归纳总结。

项目1 简单网页设计
教学导航
项目描述
1.1 Web前端开发语言与开发工具
1.1.1 认识Web前端开发语言
1.1.2 开发工具
任务1—1 创建Web项目
1.2 HTML和CSS基础
1.2.1 HTML语法结构
1.2.2 HTML常用标签
任务1—2 制作文字新闻页面
任务1—3 制作 学习生活宝典页面
1.2.3 引入CSS样式表
1.2.4 CSS基础选择器
1.2.5 伪类选择器
1.2.6 常用CSS样式
任务1—4 制作图文新闻页面
1.3 CSS3常用的新增选择器
任务1—5 给导航条添加CSS样式
1.4 HTML5常用的新增标签
任务1—6 制作一个常见问题答疑页面
1.5 盒模型
任务1.7 制作“五环之歌”页面
职业技能知识点考核
项目拓展
讨论：你有过丢失数据的惨痛经历吗
项目2 文本类网页设计
教学导航
项目描述
2.1 文本处理
2.1.1 文本阴影
2.1.2 溢出文本处理
任务2—1 制作网站新闻列表区
2.2 特殊字体
任务2—2 制作古诗页面
职业技能知识点考核
项目拓展
讨论：代码能正确执行，可以不用管编写规范吗
项目3 图像类网页设计
教学导航
项目描述
3.1 背景
3.1.1 背景的定义
3.1.2 背景的原点位置
3.1.3 背景的显示区域
3.1.4 背景图像的大小
3.1.5 背景图像的定位
任务3—1 制作信纸页面
3.2 边框
3.2.1 圆角边框