教材共11章，主要介绍了Web响应式网站的页面布局、样式美化及Bootstrap响应式布局设计。依照网站前端的设计过程，通过两个项目贯穿整本教材，由浅入深地介绍了Web前端开发的知识点。读者通过学习本教材能够使用HTML5+CSS3开发出炫丽的页面交互效果。
本教材建议总学时为72小时，其中理论26学时，实践46学时。
本教材的内容结构如下：
任务一～任务三主要完成“鲜花网站首页、关于我们以及商品详情”等页面的布局及设计，从而让读者掌握HTML5、CSS3的基础知识，包括响应式Web介绍、HTML5和CSS3的概念、HTML5开发工具、HTML5基本结构标签、HTML的文本网页设计、CSS基础选择器、CSS3字体样式、CSS3文本样式、CSS3列表样式等。
任务四～任务九主要完成“鲜花网站注册、个人中心、我的地址”等页面的设计与样式美化。通过完成任务读者可以掌握CSS盒子模型、HTML5表单的应用、浮动与定位、CSS3动画、CSS3变形、CSS32D和3D效果、HTML5新特性、HTML5画布以及本地存储技术。
任务十、任务十一主要完成“鲜花网站购物车、登录”等页面的响应式布局设计。读者学习了响应式Web设计及响应式设计神器Bootstrap框架技术，能够快速实现网页的布局与美化。
本教材编写团队由学校教师及企业一线工程师共同组成。黄玲、薛继昌任主编，朱珍、欧薇任副主编，吴巧雪、卢沛刁参与编写。学校教师和企业一线工程师将企业实践案例与学校教学知识相结合，精心准备了教材案例，提前让学生了解企业的实际开发要求。
教材配套了丰富的教学资源，包括精美的教学PPT、项目案例、习题案例、教学大纲、试题卷，并对公众开放了精品在线开放课程，帮助教师轻松实现翻转课堂的教学模式。贴近当前职教教学实际，体现以生为本，使学生在快乐中学习、在快乐中创造，新颖的呈现形式能调动学生的学习积极性。
本教材是高等职业院校新一代信息技术相关专业的教材，也可作为应用型本科Web前端开发课程的教材，同时本教材也适合作为计算机编程爱好者的入门参考，还可作为计算机培训机构的培训教材。
本教材在编写的过程中得到了广东工程职业技术学院软件技术专业的大力支持。朱珍教授审阅了教材全部内容，并对本教材的编写提出了很好的修改意见，在此表示衷心的感谢！
由于时间仓促，教材中难免存在不妥之处，请读者原谅，并提出宝贵意见。
任务一鲜花网首页布局与实现1
1.1子任务一：网站规划与分析2
1.1.1认识网页2
1.1.2网站类型2
1.1.3网页名词解释3
1.1.4网站组成部分3
1.1.5HTML5概述3
1.1.6HTML5的发展历程3
1.1.7HTML5优势4
1.1.8CSS3概述5
1.1.9CSS3优势5
1.1.10JavaScript简介6
1.1.11浏览器6
1.2子任务二：网站开发环境搭建7
1.3子任务三：鲜花网站首页设计12
1.3.1HTML基础使用13
1.3.2HTML5语义化结构标签16
任务二鲜花网“关于我们”页面的设计与实现28
2.1子任务一：“关于我们”页面的文字与段落实现29
2.1.1页面格式化标签29
2.1.2文本样式标签33
2.1.3文本格式化标签33
2.1.4文本语义标签34
2.1.5特殊字符标签34
2.2子任务二：“关于我们”页面的图像实现44
2.2.1常用的图像格式44
2.2.2相对路径和绝对路径44
2.2.3图像标签45
2.3子任务三：“关于我们”页面列表实现50
2.3.4列表的嵌套应用51
2.4子任务四：“关于我们”页面的超链接实现54
2.4.1创建超链接55
2.4.2锚点链接55
任务三鲜花网“商品详情”页面的设计与实现59
3.1子任务一：“商品详情”页面CSS样式的创建60
3.2子任务二：“商品详情”页面CSS样式的引入64
3.2.1行内式64
3.2.2内嵌式64
3.2.3外链式65
3.2.4导入式68
3.3子任务三： “商品详情”页面CSS基础选择器的设置69
3.3.1标签选择器69
3.3.2类选择器69
3.3.3id选择器71
3.3.4通配符选择器72
3.3.5属性选择器72
3.3.6并集选择器73
3.3.7后代选择器75
3.3.8子代选择器75
3.3.9兄弟选择器76
3.3.10伪元素选择器78
3.3.11伪类选择器79
3.4子任务四： “商品详情”页面CSS列表样式的实现83
3.4.1liststyletype属性83
3.4.2liststyleimage属性84
3.4.3liststyleposition属性84
3.4.4liststyle属性84
3.5子任务五：“商品详情”页面CSS3字体样式的实现86
3.5.1字号大小86
3.5.2字体87
3.5.3字体粗细87
3.5.4字体风格88
3.5.5综合设置字体样式88
3.6子任务六：“商情详情”页面CSS3文本样式的实现91
3.6.1文本颜色92
3.6.2字间距92
3.6.3单词间距92
3.6.4行间距92
3.6.5文本转换92
3.6.6文本装饰92
3.6.7水平对齐方式93
3.6.8首行缩进93
3.6.9空白符处理93
3.6.10阴影效果93
3.6.11标示对象内溢出文本94
3.6.12wordwrap属性94
任务四鲜花网“首页”的设计与实现98
4.1子任务一：鲜花网首页页面结构的分析和实现99
4.1.1盒子模型99
4.1.2内、外边距属性101
4.1.3元素的类型及转换104
4.2子任务二：鲜花网首页的设计和实现112
4.2.1元素的浮动112
4.2.2元素的定位属性120
4.2.3网页布局129
任务五鲜花网“注册”页面CSS3样式的设计与实现136
5.1子任务一：“注册”页面CSS3边框属性分析与实现137
5.1.1边框样式137
5.1.2边框宽度137
5.1.3边框颜色137
5.1.4综合设置边框138
5.1.5圆角边框138
5.1.6图片边框138
5.2子任务二：“注册”页面CSS3背景设置143
5.2.1CSS3背景设置143
5.2.2综合设置元素的背景144
5.3子任务三：“注册”页面CSS3阴影效果实现146
5.3.1阴影属性146
5.3.2渐变148
5.4子任务四： “注册”页面CSS3用户界面的设计与实现152
5.4.1boxsizing属性152
5.4.2resize调整尺寸153
5.4.3outlineoffset153
任务六鲜花网“注册”页面表单的设计与实现155
6.1子任务一：注册页面创建表单156
6.1.1认识表单156
6.1.2创建表单156
6.2子任务二：注册页面的表格创建158
6.2.1创建表格158
6.2.2标签属性158
6.2.3标签属性159
6.2.4标签及其属性159
6.2.5表格的属性160
6.3子任务三：input控件165
6.3.1单行文本输入框type="text"166
6.3.2密码输入框type="password"166
6.3.3单选按钮type="radio"166
6.3.4复选框type="checkbox"167
6.3.5提交按钮type="submit"167
6.3.6重置按钮type="reset"167
6.3.7普通按钮type="button"167
6.3.8图像形式的提交按钮type="image"167
6.3.9文件域type="file"167
6.3.10email类型type="email"168
6.3.11url类型type="url"168
6.3.12tel类型type="tel"168
6.3.13search类型type="search"168
6.3.14color类型type="color"168
6.3.15number类型type="number"168
6.3.16range类型type="range"169
6.3.17date pickers类型type=month，date…169
6.4子任务四：注册页面中的其他标签和控件173
6.4.1meter标签173
6.4.2progress标签173
6.4.3datalist标签174
6.4.4details标签174
6.4.5textarea控件174
6.4.6select控件174
6.5子任务五：HTML5表单新属性178
6.5.1placeholder属性178
6.5.2min、max和step属性178
6.5.3autofocus属性178
6.5.4autocomplete属性178
6.5.5required属性179
6.5.6pattern属性179
6.5.7multiple属性179
6.5.8form属性179
6.6子任务六：HTML5多媒体标签182
6.6.1视频标签182
6.6.2音频标签184
6.6.3音视频文件的兼容性问题185
任务七鲜花网“个人中心”页面设计与实现187
7.1子任务一:“个人中心”页面动画效果的实现188
7.1.1定义动画188
7.1.2绑定动画189
7.2子任务二:“个人中心”页面过渡和变形
效果的实现193
7.2.1过渡属性193
7.2.2变形属性195
7.3子任务三:“个人中心”页面自定义字体和字体图标的实现208
7.3.1HTML5字体库208
7.3.2字体图标211
任务八鲜花网“个人中心”页面时钟的设计与实现217
8.1子任务:“个人中心”页面时钟的设计与实现218
8.1.1认识canvas218
8.1.2使用Canvas绘图对象绘制基本图形222
8.1.3使用Canvas绘图对象裁剪图像224
任务九鲜花网“我的地址”页面设计与实现230
9.1子任务：鲜花网“我的地址”页面设计与实现231
9.1.1WebStorage的常用属性和方法231
9.1.2本地数据库访问234
任务十鲜花网站响应式Web设计244
10.1子任务一：购物车响应式灵活适配245
10.1.1响应式Web设计概念246
10.1.2Viewport视口246
10.1.3 媒体查询249
10.1.4百分比布局254
10.2子任务二：购物车响应式快速布局258
10.2.1弹性盒布局258
10.2.2响应式栅格系统263
任务十一Bootstrap响应式框架279
11.1子任务一：鲜花网登录界面框架环境搭建280
11.1.1Bootstrap框架概述280
11.1.2Bootstrap下载281
11.2子任务二：鲜花网登录页面的框架布局283
11.2.1栅格系统283
11.3子任务三：鲜花网登录界面的框架样式设计291
11.3.1Bootstrap排版291
11.3.2表单297
11.3.3按钮302
11.4子任务四：鲜花网首页页面设计309
11.4.1下拉菜单309
11.4.2导航栏310
11.4.3分页314
11.4.4徽章315
11.4.5警告框316
11.4.6轮播插件319
11.4.7折叠322
11.4.8模态框325
11.4.9进度条326
本教材凝聚了广东工程职业技术学院及合作企业多年来Web前端课程教学改革的成果与经验，在如下三方面体现了高职教育的特色。
1.本教材根据教育部最新公布的软件技术专业教学标准，参考最新“软件技术”职业资格标准编写,教材建设中能紧盯社会发展的脉搏和行业发展的需要，突显现代职教特色。注重专业实践教学环节，强化实践技能训练，与国家“1+X”职业技能等级证书考试和全国职业技能大赛的内容连接与融通，成为学生、相关领域技术工人掌握职业技能、步入工作岗位的实用入门必读手册。
2.本教材根据高职学生的认知特点，围绕基于从事网站开发工作的前端工程师岗位能力要求，采用以案例驱动、分析解决问题的方式，双案例双线并行，由浅入深，展开知识点的讲述。课堂上以一个完整的“鲜花网站”为背景，按照网站前端的设计过程来组织教学内容。课后以企业真实项目“企业门户网站”为背景，为学生设计课后练习任务。每个任务的案例既有各自的主题，又相互关联，同时融合了软件工程、界面设计、框架设计等知识，真正做到了Web前端开发课程的项目化教学。
3.本教材采用大量精美图片展现各知识点，以全新的理念来编写。尽量以丰富的信息给学习者多感官的刺激与体验，力求在传统教材的基础上有较大的突破。在专业教学过程中结合教材知识融入政校企协同、学习强国等网站界面设计，增强学生的国家意识，激发学生的爱国情怀。通过职业岗位的介绍，加强学生职业精神的塑造，提高学生的职业素养，培养学生正确的价值观、人生观和世界观。
