高职高专计算机类专业“十三五”规划教材:HTML5+CSS3网页布局项目化教程 下载 pdf 百度网盘 epub 免费 2025 电子版 mobi 在线

本书是采用学习领域课程开发方法开发的课程配套教材，对应课程是基于从事网站开发工作的前端工程师岗位工作领域转化而来，教材内容是“网页布局能力”转化而来形成的学习内容，

项目1 制作一个网页广告单页的内容...............................................................................1

任务1.1 工作环境准备.........................................................................................................

2

任务1.2 创建空白网页.......................................................................................................

10

任务1.3 在网页中添加段落和文字....................................................................................

14

任务1.4 在网页中添加列表...............................................................................................

19

任务1.5 在网页中添加表格...............................................................................................

24

任务1.6 在网页中添加图片...............................................................................................

30

任务1.7 在网页中添加超链接...........................................................................................

36

任务1.8 在网页中添加表单...............................................................................................

43

项目2 使用CSS3 设置网页广告单页格式......................................................................55

任务2.1 将CSS 样式表引入文件......................................................................................

55

任务2.2 使用CSS 设置段落文字格式...............................................................................

61

任务2.3 使用CSS 实现网页布局......................................................................................

71

任务2.4 使用CSS 背景美化网页标签...............................................................................

89

任务2.5 使用CSS 设置列表格式、超链接效果............................................................. 101

任务2.6 使用CSS 边框设置表格格式.............................................................................

113

任务2.7 使用CSS 美化表单............................................................................................

129

项目3 对网页广告单页进行响应式改造........................................................................144

任务3.1 变更网页导航菜单.............................................................................................

145

任务3.2 编写网页栅格系统.............................................................................................

149

任务3.3 重布局网页内容列表以适应不同窗口.............................................................. 158

任务3.4 测试及兼容性设置.............................................................................................

167

*任务3.5 使用伸缩盒子布局响应式页面........................................................................

171

项目4 使用Bootstrap 开源框架快速搭建响应式网页...................................................184

任务4.1 配置Bootstrap 开发环境....................................................................................

185

任务4.2 使用Bootstrap 栅格系统快速布局页面............................................................ 190

任务4.3 使用Bootstrap 组件和JS 插件制作网页导航条............................................... 199

任务4.4 使用Bootstrap 组件和JS 插件制作网页内容和交互....................................... 210

*任务4.5 为你的网页添加无障碍功能............................................................................

224

参考文献........................................................................................................................237

     谢冠怀：高级工程师，就职于广东省机械高级技工学校。教研组长，校十大教学能手；教研教改论文获得校论文评选名2次，中国职协一等奖1次；第43、44届世界技能大赛网站设计项目广东省选拔赛优秀指导教师，培养的竞赛选手分获省属选拔赛名、省选拔赛第二名。林晓仪，毕业于华南师范大学增城学院信息管理与信息系统本科专业，多媒体应用设计师，数据库系统工程师，网络管理员技师，多媒体软件制作考评员。曾获得广东省机械技师学院优秀教师、优秀党员、优秀班主任等称号。担任计算机网络应用和电子商务专业的教学，如《计算机应用基础》《操作系统》《THML5》《电子商务网页制作》《版面设计》等课程教学工作。

暂无出版社相关信息，正在全力查找中！

暂无相关书籍摘录，正在全力查找中！

在线阅读地址：高职高专计算机类专业“十三五”规划教材:HTML5+CSS3网页布局项目化教程在线阅读

在线听书地址：高职高专计算机类专业“十三五”规划教材:HTML5+CSS3网页布局项目化教程在线收听

在线购买地址：高职高专计算机类专业“十三五”规划教材:HTML5+CSS3网页布局项目化教程在线购买

暂无原文赏析，正在全力查找中！

前言

网站开发技术更新非常快，特别是HTML5 技术推出之后，网站开发技术从电脑端开始转向

移动端，“移动优先”的理念开始深入人心。在技术更新大潮下，很多学校开设的网站开发技术课

程却停滞不前。如何紧跟时代步伐，将新技术和企业标准快速引入课堂，并适用于职业教育，是

我们急需解决的问题。

本人在毕业后一直从事网站开发技术的教学工作，2014 年开始负责我校世界技能大赛网站设

计项目的相关工作并持续至今，虽然没有取得斐然的成绩，但通过大赛的锤炼，却让我对网站设

计的课程有了更多的想法。

在2015 年，本人作为我校“HTML5 CSS3 网页布局”课程改革项目的负责人，承担起这门

课程的改革工作，并斗胆编撰成书，与大家分享，以期起到抛砖引玉之功效，让更多的同行编写

出更加优秀的教材以服务于职教学子。

本书从前端工程师岗位出发，以项目引领全书，以任务驱动知识和技能，聚焦HTML5 CSS3

网页布局技术，Axure、PS 和JavaScript 技术不在本书中涉及。

本书具有以下特点：

1．立足基础、企业标准、接轨世界

本书以“立足基础、企业标准、接轨世界”为目标，采用学习领域课程开发方法，通过分析

确定前端工程师岗位设计、布局和交互制作的工作能力转化为学习领域，本教材将其中的“网页

布局能力”（学习领域）转化为本书的“学习内容”，同时结合世界技能大赛题目所要求的知识、

标准和技术等进行整合，完成代表性工作任务列表。

世界技能大赛的题目要求必须来自企业的实际工作任务，紧贴企业需求和新技术标准。把

世界技能大赛标准引入课堂，既符合我们工学结合一体化和工作过程系统化课程改革要求，又为

我们的教材快速达到企业行业标准并接轨世界提供了捷径。

2．“一往情深”的项目教材

教材通过一个项目工作情景统领全书，通过各项目需求将所有的工作任务进行串联。

项目和情景设计为：随着高考平行志愿的执行，华南工业大学信息工程系招生就业办公室希

望能够制作一个网页，通过扫码的方式来宣传其系专业学科及招生情况，以期能够吸引更多优秀

的毕业生报考。项目1 和项目2 要求为手机端而设计，项目3 要求变更为响应式设计，项目4 要

求使用Bootstrap 框架提高开发效率。

3．项目引领、任务驱动

在知识和技能编排上，项目1、2 为HTML5 和CSS3 基础性知识，包括开发环境的配置、HTML5

和CSS3 知识、CSS2 和CSS3 中浏览器普遍兼容的知识及常规的网页布局知识；项目3 是对基础

知识的提升，包括栅格系统、媒体查询、网页响应式布局和优化、浏览器兼容相关知识，要求能

够达到企业行业标准和世界技能大赛试题中的基础要求；项目4 是应用型知识，包含Bootstrap 开

源框架、Font Awesome 开源图标型字体等开源资源的应用知识，适用于企业快速迭代的高效率开

发需求。在各项目中还加入了商用还不是很成熟的新知识新技术（书本中带*的任务），包含CSS3

中现阶段应用较少、浏览器兼容不完善，但在技术长远发展中将被应用的新技术、新知识，目的

是对接世界技能大赛网站设计试题的高级技术要求，同时为学生的终身学习打下基础。

本书为每个项目设置了项目简介、项目情景、项目分析、能力目标作为项目的引入，在每个

任务中设置学习目标、任务描述、知识学习（知识探究学习 学习工作页）与课堂练习、任务实

施、任务回顾、任务拓展6 个环节。

4．授人以渔

在专业能力上，我们寄希望于立足技术基础，同时按企业行业标准要求学生，在充分考虑学

生实际情况的同时考虑学生的发展和技术的更新进程，将世界技能大赛网站设计项目对技术和能

力要求与课程知识进行对接。

在社会和方法能力上，我们期望通过以“项目引领、任务驱动、工学结合、赛学互促”的方

式让学生在课堂中以“行动导向”方式解决实际的项目问题，同时在任务中通过设置“知识学习

与课后练习”提高学生的知识自主学习能力，强化基础，通过设置“任务拓展”提高知识的迁移

应用能力等。

通过这样的设计，我们期望大部分学生都能够掌握网页布局基础技术，并运用开源框架开发

出能达到企业标准的网页，部分学习能力强的学生能够在学习新的技术后达到世界技能大赛网

站设计项目对布局能力的要求，并为其后继的终身技术学习打下基础。

本书由谢冠怀、林晓仪任主编，武龙、林程华任副主编。具体分工如下：谢冠怀负责全书的

框架制定、统稿和项目4 全部、项目3 任务3.5 的编写工作，林晓仪参与全书框架制定并负责项

目1 和项目3（任务3.1 和3.4）的编写工作，武龙负责项目2 和项目3（任务3.2 和任务3.3）的

编写工作，林程华与王令、但金燃参与各任务的教学实验编写工作。

由于编者水平有限，加之时间仓促，书中难免存在疏漏和不足之处，恳请各位读者批评指正

（编者邮箱：xieguanhuai@qq.com）。本书资源丰富，课件、素材、教案可在http://www.tdpress.com/

51eds/下载。

谢冠怀

2017 年于广州