作者：谢冠怀 林晓仪
出版社：中国铁道出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
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年于广州项目1制作一个网页广告单页的内容
☑项目简介
本项目将通过“制作一个网页广告单页的内容”，制作一个HTML页面来承载HTML知识，完成网页开发环境、HTML基础知识和HTML5标签的学习。
☑项目情景
随着高考平行志愿的执行，某工业大学信息工程系招生就业办公室希望能够制作一个网页，来宣传其系专业学科及招生情况，以期能够吸引更多优秀的毕业生报考。
招生就业办公室希望网页能够通过手机扫描二维码的方式在手机浏览，以弥补招生宣传渠道的不足，且网页所有内容都应该包含在这个网页上，包括：
● 招生广告词
● 关于我们
● 招生计划
● 专业介绍
● 实训环境
● 优秀毕业生
● 联系我们
● 新媒体分享
招生就业办公室已经将必要的图文材料整理好，并找到专业的设计公司完成了网页界面的设计工作。
你所在的科技公司已经拿到了设计稿，由于项目不大，你的项目主管希望担任前端工程师的你来完成本次项目的前端工作，并将你的成果交付程序员张妃完成逻辑制作，最后交给客户发布。
☑项目分析
拿到设计稿后，你需要根据网页制作的一般流程，完成网页的制作。
网页制作的一般流程如下：
首先，需求是明确的，项目的目标为：根据设计稿制作一个适合手机浏览的网页单页。
其次，需要制订项目完成的计划：
考虑知识的结构和类型，将“设置网页格式”“网页测试”“发布网页”的任务安排在了项目2。
☑能力目标
①能够选择合适的软件完成HTML网页页面的制作。
②能够根据内容属性选择HTML5标签并设置标签属性，同时保证代码符合W3C规范。任务1.1工作环境准备
☑学习目标
①能够陈述常用的Web前端开发软件及其优缺点：Adobe Dreamweaver、Visual Studio Code、Sublime Text 3、Notepad++、HBuilder等。
②能够根据系统环境选择合适的开发软件。
☑任务描述
下载Visual Studio Code软件安装程序，按照说明文档的安装指引，将Visual Studio Code软件安装到自己的客户端。
☑知识学习与课堂练习
网页开发工具有很多，可以使用任何能够生成TXT类型源文件的文本编辑来产生页面文件，因此记事本也可以作为网页开发工具。【课堂练习1.1-1】 使用记事本制作一个网页。
①打开记事本，输入如下标签（注意代码格式缩进）：
②将记事本保存到桌面：保持类型为“所有文件（*.*）”，文件名为“index.html”，第一个静态网页制作完成。
③双击桌面上的“index.html”文件，浏览器打开的网页显示效果如图1.1-1所示。
记事本是最基础的网页开发工具。为了提高网页编写效率，很多公司开发了网页辅助开发软件，以提高网页开发的效率。
下面介绍一些常用的Web前端开发软件：
图1.1-1 使用记事本制作网页
1.Adobe Dreamweaver
Adobe Dreamweaver，简称DW，中文名称为“梦想编织者”，是集网页制作和网站管理于一身的所见即所得网页编辑器，DW是第一套针对专业网页设计师特别开发的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
2.Visual Studio Code
Visual Studio Code（简称VS Code / VSC）是微软公司推出的一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比Diff、GIT等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持Windows、Mac OS以及Linux，运行流畅。
3.Sublime Text
Sublime Text是一个代码编辑器，也是HTML等的文本编辑器。有漂亮的用户界面和非凡的功能，如迷你地图、多选择、Python插件、代码段等。Sublime Text的主要功能包括拼写检查、书签、完整的Python API、Goto功能、即时项目切换、多选择、多窗口等。
4.Notepad++
Notepad++是Windows操作系统下的一套文本编辑器，有完整的中文接口及支持多国语言编写的功能（UTF8技术）。
Notepad++功能比Windows中的Notepad（记事本）强大，除了可以用来制作一般的纯文字说明文件，也十分适合编写计算机程序代码。Notepad++不仅有语法高亮度显示，也有语法折叠功能，并且支持宏以及扩充基本功能的外挂模组。
5.HBuilder
HBuilder是DCloud推出的一款支持HTML5的Web开发IDE。“快”是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、JS、CSS的开发效率。同时，它还包括最全面的语法库和浏览器兼容性数据。【课堂练习1.1-2】 根据自己的情况选用Web开发软件。
请根据自己的系统开发环境情况，选择Web前端开发软件，如表1.1-1所示。
表1.1-1 Web前端开发软件环境的配置
请根据情况完成上表，并说出选择的理由。
☑任务实施
考虑到市场上的软件应用以及软件大小情况，本书以Visual Studio Code为例，简要介绍此软件的安装和配置。
1.软件下载
①打开浏览器，输入微软官方网站地址www.microsoft.com（见图1.1-2）并按Enter键，在搜索框中输入Visual Studio Code，单击搜索按钮，出现Visual Studio Code的常规信息（见图1.1-3）。
图1.1-2 微软官方网站
图1.1-3 Visual Studio Code的常规信息
②选择图1.1-3第二项中的“Visual Studio Code”，单击“下载Code”（见图1.1-4），进入软件下载界面见图1.1-5。
图1.1-4 Visual Studio Code下载页面
③在软件下载界面（见图1.1-5）中根据系统选择对应的下载项，并下载Visual Studio Code软件。
2.软件安装
①双击下载的VSCodeSetup-stable.exe文件，在弹出的“用户账户控制”对话框中单击“是”按钮后进入“安装程序”对话框（见图1.1-6），单点击“下一步”按钮，出现安装程序“许可协议”对话框（见图1.1-7），选择“我接受协议”单选按钮，单击“下一步”按钮，进入“选择目标位置”对话框（见图1.1-8）。
图1.1-5 Visual Studio Code不同平台下载页面
图1.1-6 “安装程序”对话框
图1.1-7 “许可协议”对话框
②在“选择目标位置”对话框中选择Visual Studio Code软件的安装路径，可以选择默认路径，也可以改至D：\Microsoft VS Code，单击“下一步”按钮，进入“选择开始菜单文件夹”对话框（见图1.1-9），如果不想其出现在“开始”菜单文件夹中，可勾选“不创建开始菜单文件夹”复选框，单击“下一步”按钮，进入“选择其他任务”对话框（见图1.1-10）。
③在“选择其他任务”对话框中可勾选“创建桌面对话框快捷方式”复选框，在桌面中创建Visual Studio Code软件快捷方式，单击“下一步”按钮，进入软件安装准备就绪对话框（见图1.1-11）。
④在“安装准备就绪”对话框中单击“安装”按钮，进入“正在安装”对话框（见图1.1-12），等待软件安装完成（见图1.1-13），单击“完成”按钮。至此，软件安装成功。
图1.1-8 “选择目标位置”对话框
图1.1-9 “选择开始菜单文件夹”对话框
图1.1-10 “选择其他任务”对话框
图1.1-11 “安装准备就绪”对话框
图1.1-12 “正在安装”对话框
图1.1-13 安装完成对话框
3.软件使用介绍（1）软件界面介绍
安装完Visual Studio Code软件，打开后界面如图1.1-14所示。顶部为菜单栏，包括文件、编辑、查看、转到和帮助功能项，左侧为快捷菜单栏，包括资源管理器、搜索、Git、调试，其他部分是代码编辑区，底部为鼠标输入区域信息，包括行数，列数。（2）软件常用快捷键
通过按Ctrl+Shift+P组合键可以打开主命令面板，在主命令面板中可以执行VSCode的任何一条命令，如图1.1-15所示。
图1.1-14 Visual Studio Code软件界面
图1.1-15 主命令面板
通过按Ctrl+P组合键进入“本地文件导航模式”，该模式默认列出了打开过的文件。在输入框中可以输入想要打开的文件，如图1.1-16所示。
在图1.1-16的输入框中输入“？”可以获得一些帮助，输入“：”，可以跳转到行数，也可以使用Ctrl+G组合键。
图1.1-16 本地文件导航模式
另外还有一些常用的编辑器及窗口快捷键，如表1.1-2所示。
表1.1-2 编辑器及窗口快捷键
☑任务回顾
Visual Studio Code支持语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比Diff、Git等特性，并针对网页开发和云端应用开发做了优化。软件跨平台支持Windows、Mac OS以及Linux，运行流畅。
网上可供下载安装的Visual Studio Code软件版本有很多，可以通过它的官网进行下载。通常下载的安装包中都会附带相关的安装说明文档，按照安装说明的指引一般都能顺利地把软件安装到计算机中。
☑任务拓展
1.网站文件夹结构及命名
关于网站文件夹结构及命名，看似无足轻重，但实际上如果没有良好的网站文件夹结构及命名规则进行必要的约束，最终导致的结果就是整个网站或是文件夹无法管理。所以，网站文件夹结构及命名规则很重要。需要特别注意的是，网站文件或文件夹命名要尽量避免使用中文字符命名。
建立网站文件夹的原则是以最少的层次提供最清晰简便的访问结构。
根目录只允许存放index.html文件和js、img、css这三个文件夹，所有的js文件存放在根目录下的js文件夹，所有的css文件存放在根目录下的css文件夹，所有的图片存放在根目录下的img文件夹中。网站文件夹结构如图1.1-17所示。
图1.1-17 网站文件夹结构
2.W3C的介绍
W3C指万维网联盟，它是建立于1994年的组织，其宗旨是通过促进通用协议的发展并确保其通用性，以激发Web世界的全部潜能。
W3C标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C的DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，如ECMA的ECMAScript标准。
为了简化网站代码，降低网站建设的成本，保证网站在长期互联网环境中有效，加强网站的兼容性，能适应不同的网络设备和网络终端，在建设网站时应该要保证代码符合W3C规范。任务1.2创建空白网页
☑学习目标
①能够输入基本的网页结构标签。
②能够表述HTML语言以及基本的标签语法。
③能够使用Visual Studio Code新建和保存页面。
☑任务描述
使用Visual Studio Code新建并保存一个简单的基本页面。
☑知识学习与课堂练习
1.HTML概念
HTML（Hyper Text Mark-up Language，超文本置标语言）是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。
2.HTML文本基本结构
一个网页对应一个HTML文件，HTML文件以.htm或.html为扩展名。HTML的结构包括头部（head）、主体（body）两大部分，其中头部描述浏览器所需的信息，主体部分包含网页所要说明的具体内容。其完整结构如下：
其中＜！doctype＞声明位于文档中最前面的位置，处于＜html＞标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。
＜html＞＜/html＞标签标识了文件的开头与结尾，表示这对标记间的内容是HTML文档。
＜head＞＜/head＞标记包含了文件的头部，标记内的内容不在浏览器中显示，主要用来说明文件的有关信息，如文件标题、作者、编写时间等。
＜meta＞标签没有结束标签，位于head元素内部，＜meta＞标签的属性定义了与文档相关联的名称和值。例如＜meta charset="UTF-8"＞表示使用的字符编码为国际化编码，比较常见的还有简体中文编码gb2312。
在head标记内最常用的标记是＜title＞＜/title＞，该标记是网页主题标记，提示网页内容和功能的文字，它将出现在浏览器的标题栏中。
＜body＞＜/body＞标记是HTML文档的主体部分，网页正文中的所有内容包括文字、表格、图像、声音和动画等都包含在这对标记对之间。【课堂练习1.2-1】 录入一个完整的网页结构标签。
打开Visual Studio Code，输入如下标签：
3.移动设备的HTML基本结构
计算机经过多年的发展，显示器的屏幕分辨率已经能够达到1280×1024像素及更高的1280×1024像素，因此移动设备无法将普通网页全屏显示在移动设备上，虽然通过屏幕放大和缩小也可访问传统的网页，但由于用户体验不佳，很难得到实际的应用。
为了增加对移动设备的友好性，应该将针对移动设备的样式融合进框架的每个角落，而不是增加一个额外的文件。
为了确保适当的绘制和触屏缩放，需要在＜head＞之中添加viewport元数据标签。
＜meta name="viewport" content="width=device-width，initial-scale=1"＞
在移动设备浏览器上，通过为视口（viewport）设置meta属性为user-scalable=no可以禁用其缩放（zooming）功能。禁用缩放功能后，用户只能滚动屏幕，就能让网站看上去更像原生应用的。注意，这种方式并不推荐所有网站使用，要视情况而定。
＜meta name="viewport" content="width=device-width，initial-scale=1，
maximum-scale=1，user-scalable=no"＞【课堂练习1.2-2】 录入一个完整的移动设备网页结构标签。
打开Visual Studio Code，输入如下标签：
其中＜html lang="zh-CN"＞主要是告知各个浏览器所用的字符集，如果没有该字符集，浏览器就按各自默认的字符来显示，这样各个浏览器的显示结果就可能不一样。
4.HTML5新增结构标签
一个普通的页面一般会有头部、导航、文章内容，还有附着的右边栏、底部等模块。这些模块可以使用HTML5新标签进行布局，如图1.2-1所示。
图1.2-1 网页布局（1）header标签
header标签定义文档的页眉，通常是一些引导和导航信息。header标签至少包含（但不局限于）一个标题标记（＜h1＞-＜h6＞），还可以包括其他标签，如表格、列表、表单、nav标签等。（2）nav标签
nav标签代表页面的一个部分，是一个可以作为页面导航的链接组，其中的导航元素链接到其他页面或者当前页面的其他部分，使html代码在语义化方面更加精确，同时对于屏幕阅读器等设备的支持也更好。（3）article标签
article标签代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件，或其他任何独立的内容。除了内容部分，一个article标签通常有它自己的标题（一般放在一个header元素里面），有时还有自己的脚注。（4）section标签
section标签定义文档中的节，如章节、页眉、页脚或文档中的其他部分。一般用于成节的内容，会在文档流中开始一个新的节。它用来表现普通的文档内容或应用区块，通常由内容及其标题组成。（5）aside标签
aside标签通常用来描述与文档主体内容不相关的内容。比如，博客文章用article标签，而博客旁边的文章信息栏（作者头像、博文分类、作者等级等和博客正文内容无关的）用aside。（6）footer标签
footer标签定义section或document的页脚。在典型情况下，该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。它和header标签的使用基本一样，可以在一个页面中多次使用，如果在一个区段的后面加入footer，那么它就相当于该区段的页脚。【课堂练习1.2-3】 完成图1.2-1所示网页布局的结构标签。
打开Visual Studio Code，输入如下标签：
☑任务实施
①打开任务1中的index.html文件。
②完成网页广告单页HTML结构的编写。
☑任务回顾
HTML是网页主要的组成部分，基本上每一个网页都是由HTML语言组成的，所以要学习如何建设网站，必须从网页的基本语言学起。
HTML的结构包括头部（head）、主体（body）两大部分，其中头部描述浏览器所需的信息，主体部分包含网页所要说明的具体内容。
☑任务拓展
HTML元素的选用原则：（1）少亦可为多
试读结束[说明：试读内容隐藏了图片]