HTML5 + CSS3项目开发实战

本书以HTML5与CSS3知识点为主线，以响应式布局项目为任务载体，采用迭代递增的网页设计方法，根据项目需求来逐步完成任务，实现学习相关知识与动手实操并重的目的。全书按照网页设计的步骤，围绕HTML5与CSS3重要特性编写而成，通过详细讲解各个任务的制作来对知识点进行总结，使读者更详细地了解网页设计制作技术。本书以学习者为中心，不仅强调基本技能的训练、基础知识的夯实，还注重拓展能力的培养，所以内容编排方式为“学习目标、学习路径、项目描述、项目实施、项目拓展、项目总结、英语角、项目习题”，内容翔实、难度渐进、结构清晰、语言准确，使读者能够学以致用。本书既可作为高职院校和应用型大学网页设计课程的教材，也可作为信息技术培训机构的培训用书，还可以作为网页设计与制作人员的参考用书。

王庆桦，天津中德应用技术大学 教务处副处长，中国职业技术教育学会(CSTVE) 教学工作委员会 自动化技术类专业教学研究会 副秘书长，天津市”五一”劳动奖章获得者，从事相关专业和课程教学14年。先后在加拿大BC省理工学院参加计算机技术、教育教学技能培训、清华大学Web应用开发技术高级研修班、访问过澳大利亚和新西兰等国家，学校职业教育体系。主编或参与编写教材9册；参加*教改课题3项，市级教改课题3项；作为主要承担者参与*、市级精品课或资源共享课3门；指导学生参加天津市高职计算机技能大赛获一等奖1项，二等奖2项、三等奖2项。

项目1 服装品牌墙界面设计 1
学习目标 1
学习路径 1
项目描述 1
项目技能 3
1.1 HTML5概述 3
1.2 HTML5基础 3
1.3 网页编辑器及环境 5
1.4 CSS3初体验 7
1.5 CSS样式表 8
1.6 CSS选择器 11
项目实施 16
项目拓展 20
项目总结 22
英语角 22
项目习题 22
项目2 新浪微博导航界面设计 24
学习目标 24
学习路径 24
项目描述 24
项目技能 25
2.1 HTML5文本标签 26
2.2 CSS文本属性 30
2.3 CSS字体属性 38
2.4 CSS颜色 42
2.5 CSS导航栏 43
2.6 固定布局和流动布局 45
项目实施 46
项目拓展 53
项目总结 54
英语角 55
项目习题 55
项目3 同城旅游主界面设计 56
学习目标 56
学习路径 56
项目描述 56
项目技能 57
3.1 网页中支持的图片格式 57
3.2 HTML5图像标签 58
3.3 设置背景属性 60
3.4 盒子模型 67
3.5 CSS3新增边框属性 72
3.6 HTML5图像过渡和变形属性 76
任务实施 80
任务拓展 88
任务总结 90
英语角 90
任务习题 91
项目4 小快鱼旗舰店主界面设计 92
学习目标 92
学习路径 92
项目描述 92
项目技能 94
4.1 列表的作用 94
4.2 HTML5文本列表标签 94
4.3 CSS列表标签属性 97
4.4 HTML5创建表格 101
4.5 CSS定位 105
项目实施 110
项目拓展 119
项目总结 120
英语角 121
任务习题 121
项目5 同城旅游用户注册界面设计 122
学习目标 122
学习路径 122
项目描述 122
项目技能 123
5.1 表单的概述 123
5.2 表单基本元素的使用 125
5.3 HTML5新增的input属性 135
项目实施 142
项目拓展 146
项目总结 149
英语角 149
任务习题 149
项目6 天天动听播放器界面设计 150
学习目标 150
学习路径 150
项目描述 150
项目技能 151
6.1 audio标签概述 151
6.2 audio标签的属性 153
6.3 video标签概述 153
6.4 video标签的属性 154
项目实施 155
项目拓展 157
项目总结 158
英语角 158
任务习题 158
项目7 使用HTML5绘制火柴棒人物 160
学习目标 160
学习路径 160
项目描述 160
项目技能 161
7.1 Canvas概述 161
7.2 Canvas绘制基本图形 162
7.3 绘制渐变图形 166
7.4 绘制变形图形 169
7.5 图形组合 175
7.6 使用图像 176
7.7 绘制文字 177
7.8 SVG 179
项目实施 179
项目拓展 182
项目总结 184
英语角 184
项目习题 184
项目8 HTML5 CSS3开发购物网首页 186
学习目标 186
学习路径 186
项目描述 186
项目规划 187
8.1 网站定位 187
8.2 需求分析 188
8.3 网站的风格设计 188
项目实施 188
项目拓展 202
项目总结 204
附录 参考答案 205
参考文献 206

随着信息技术向纵深发展，作为依托互联网发展起来的网站制作面临新的挑战。一方面，用户更加注重站点信息丰富、功能齐备、页面精美、操作流畅；另一方面，要满足用户不受系统平台和软件插件的限制，可以通过移动设备访问网站。Web新技术HTML5和CSS3能够实现这些新要求，使其迅速成为网页设计的热点。
网页设计与制作课程是B/S架构软件项目开发的Web前端技术课程，而HTML与CSS是网页制作技术的核心和基础，也是每个网页制作者必须掌握的基本知识，两者在网页设计中不可或缺。
网页设计本身是一个复杂的系统过程，需要了解问题，对问题进行分析，用逻辑的方法确定的优化方案，后通过相关技术来实现。初学者如何掌握网页设计的方法尤为重要。本书以HTML5与CSS3技术为工具，以响应式布局Web页面设计为载体，强调问题的分析、技术的掌握、能力的拓展，所有知识点都紧跟HTML5与CSS3的发展动态，以创新的模式、结构化的设计、实用的案例、简明的语言详细介绍了使用HTML5与CSS3进行网页设计与制作的相关内容和技巧。
本书针对职业教育人才培养规格的需要，突出职业素质教育和技术应用能力，运用创新思维模式理实一体系统化教学方法。各项目首先确定学习目标，通过项目实施掌握相关的基本知识，然后通过拓展练习强调基本技能的训练，后辅以习题。本书每个项目都提供英语角，形成专业词汇提示，帮助读者对国际化专业术语的认识，提升学习效果。
本书编写有以下特色：
（1）全书结构广度层面体现了职业教育特点，以应用为主，适度够用为量，内容以HTML5与CSS3技术的技能训练为主线，突出能力的培养，内容完整、由浅入深、循序渐进，层次清楚。
（2）各项目结构深度层面运用了思维导图形式，提供一个以职业技能发展为主轴的结构化学习方案，直观体现学习路径，提升学习效率。
 
（3）内容采用任务驱动、项目导入、教学做一体化模式编排而成，通过任务驱动将项目载体融入教学，高强度培养学生工程实践能力，要求在教学过程中达到项目实践实训的目的，实现技术培养与行业企业人才需求接轨。
（4）项目设计实用性强，选取当今互联网热点网站设计作为素材，将8个仿真项目融入教材，提高了学习者的学习热情；同时，添加了企业站点开发的管理规范元素，突出项目管理理念。
（5）突出“做中学、做中教、做中练”，与项目剖析相结合，在体系结构安排上，尽可能将HTML5 CSS3的重要特性与项目相结合。通过项目的分析、设计、总结，将所学的知识与技能点融会贯通，易于理解，能够帮助读者提升实际应用技能。
（6）注重“以能力培养为核心，强化实际操作的训练”，每个项目都精心设计了拓展练习，目的明确，突出实用性、操作性。考虑到初学者经常困惑于如何进行页面程序的设计，拓展项目给出了相关的提示步骤，使学生在学习的过程中不至于“毫无头绪”而产生厌烦，从而提高学习的兴趣和对编程的爱好程度。
（7）配有针对性的习题，强调每个项目的学习重点，巩固对知识的掌握。同时，每个项目的英语角提供了相应的专业词汇，利于专业国际化标准的引入和职业素养的培养。
（8）丰富的新形态教学资源。本书除配套提供电子教学课件、案例库、习题库之外，还提供了大量的关于网页设计、HTML5和CSS3技术的数字资源库，读者可以通过扫描二维码获取相关资料，实现课程全方位的资源共享。
本书由长期工作在职业教育教学一线，同时具有企业实践开发经验的教师编写而成。其中，项目1～项目4主要由王庆桦老师编写，项目5～项目8和附录主要由王新强老师编写，王玥老师编写了本书部分内容。全书由王庆桦老师统稿。
虽然编者力求准确无误、尽善尽美，但由于时间仓促，书中的内容仍难免出现错误或不足之处，恳请专家、教师和读者批评指正。

编  者