资源简介

(共17张PPT)
制作响应式网页
第三阶段
能进一步完善栅格化系统的功能，增加栅格布局的留白区域和栅格模块的隐藏功能；
能将栅格化系统运用到D清单页面中进行响应式布局。
任务目标
任务21 重布局页面实现响应式效果
使用任务20中制作的响应式栅格系统（文件grid.css），对D清单页面进行响应式改造，使页面在平板设备、电脑设备中都能正常显示，并根据浏览器的宽度自动调整页面内容的排版。
任务描述
图1-21平板和电脑端浏览效果
任务21 重布局页面实现响应式效果
完成D清单页面的响应式改造，需要：
增加栅格布局的留白区域设置；
增加栅格模块的隐藏功能设置；
根据需要对D清单页面重新布局的内容进行HTML和CSS修订，以应用栅格系统对D清单页面进行响应式改造。
部分电脑端页面排版布局如图1-21-1所示。
任务分析
图1-21-1 变更为左右或左中右布局的电脑端页面效果
任务21 重布局页面实现响应式效果
知识与技能准备
在网页布局中，并不是任何网页都会将页面的空间填满，有时候由于网页设计的需要会预留一些不放置内容的区域。在上一任务中设置的栅格布局中，每个模块都会从左向右排列将空间填满，现在需要进一步改良设置。
如下图所示，由于标签的填充已用于设置模块间的间距，所以使用左边界，以每份网格为单位，为模块标签的左侧隔开留白的空间。
1、为网页栅格系统添加留白区域
图1-21-2留白栅格原理图
知识与技能准备
左边界的长度同样还是以百分比%为单位，设置为一份网格的整倍数，有1份网格、2份、……、11份一种11种情况。和上一任务中栅格系统设置方法类似，为不同的情况都设置一个独立的选择符。
1、为网页栅格系统添加留白区域
知识与技能准备
为栅格系统的CSS文件补充下面的设置：
1、为网页栅格系统添加留白区域
为模块标签添加“grid_”设置宽度的同时，添加“ml_”付加上左边界产生左侧留白效果。
css：
1
2
3
4
5
6
7
8
9
10
11
12 /*追加留白的设置*/
.ml_s1{ margin-left: 8.33333%; }
.ml_s2{ margin-left: 16.66667%; }
.ml_s3{ margin-left: 25%; }
.ml_s4{ margin-left: 31.213333%; }
.ml_s5{ margin-left: 41.66667%; }
.ml_s6{ margin-left: 50%; }
.ml_s7{ margin-left: 58.33333%; }
.ml_s8{ margin-left: 66.66667%; }
.ml_s9{ margin-left: 75%; }
.ml_s10{ margin-left: 81.213333333%; }
.ml_s11{ margin-left: 91.66667%; }
HTML：
1
2
3
4
5
6
7
8
9
10

图1-21-3有留白的栅格显示效果
知识与技能准备
响应式栅格系统中要添加留白效果，需要为每种设备的媒体查询，分别添加上述的CSS设置，并通过选择符的名称区分，做法与上一任务中响应式栅格系统设置方法类似。代码请查看书本。
如果因为布局需求添加右侧留白边界的，使用相同的方法添加对应的选择符。
1、为网页栅格系统添加留白区域
知识与技能准备
部分网页的内容比较多，在手机或平板设备下页面无法显示过多的内容，可能需要隐藏部分次要的模块，以节省空间。前面栅格系统的设置中，设定了1-12份网格占用的空间，现在追加一个“0份”空间，设置为“display:none;”，添加了该选择符的标签便会被隐藏。
2、在特定设备宽度下隐藏部分的栅格模块
grid.css：
1
2
3
4
5
6
7
8
9
10
11
12 @media all and (max-width:767px){
/*追加设置*/
.grid_s0{ display: none;}
}
@media all and (min-width:768px) and (max-width:1023px){
/*追加设置*/
.grid_m0{ display: none;}
}
@media all and (min-width:1024px){
/*追加设置*/
.grid_L0{ display: none;}
}
任务实施
使用上一个任务中制作的响应式栅格系统（文件grid.css），进一步完善D清单网页。使页面在平板设备、电脑设备中都能正常显示，并根据浏览器的宽度自动调整页面部分内容的排版。
由于排版方式有所变化，部分内容的html标签代码需要进行一下修改。
1、关于
1.1 布局修改
1.2 内容格式优化
由于该部分与手机端其实是一致的，在电脑和平板端，由于视口宽度的增加，我们可以对其字体大小、留白等进行适当修改。
图1-21-4 关于部分的效果图
任务实施
2、特征模块
在该内容模块中，我们可以对其进行栅格化布局，其中标题和副标题可以是12栅格，不需要修改。
图片和文本区域，平板端可以按照5：7进行布局，电脑端可以按照4：8进行布局。
图1-21-5 特征模块效果图
任务实施
3、应用下载
与上一模块类似，其中标题和副标题可以是12栅格，不需要修改。
图片和文本区域，平板和电脑端都可以按照4：4：4进行布局。
图1-21-6 应用下载效果图
任务实施
4、高级会员
该表格在布局时已经是12列栅格的布局，与关于部分类似，只需要增加最大宽度样式到HTML的即可，这里操作省略。
5、帮助中心
该部分与应用下载模块类似，为4：4：4布局，最大宽度方面分别对标题、3组文本和视频添加row样式，具体代码可以参考下载模块内容进行设置，这里省略。
图1-21-7 帮助中心效果图
任务实施
6、联系我们
该模块为左右结构，与“特征模块”类似，在平板端为6：6布局。为了右边的表单短一些，在电脑端可以采用8：4的比例进行布局。
图1-21-8 联系我们效果图
任务实施
7、测试
完成所有布局后，我们需要对响应式效果进行测试。以火狐浏览器为例，我们可以依次单击设置菜单中的“WEB开发者”->”响应式设计模式”，打开响应式设计模式视图。也可以直接单击右键“检查元素”或按快捷键“F12”，打开调试窗口，再单击“响应式设计模式”按钮打开响应式设计模式视图。如图1-21-9所示：
我们选择设备型号为手机了设备时，会发现在前面使用了栅格布局的都会出现元素“偏移”的情况，如图1-21-10所示：
图1-21-9 响应式设计模式视图
图1-21-10 移动端网页元素偏移
部分栅格布局的子模块由于文字数量的不相等，会在特定页面宽度下造成子模块高度不一致，导致排版错位。
任务拓展
任务21 重布局页面实现响应式效果(共21张PPT)
制作响应式网页
第三阶段
能够在学习的Web内容无障碍指南（WCAG）知识和可访问的互联网应用（ARIA）基础上，对D清单页面进行无障碍改造；
能够根据网可访问的互联网应用（ARIA）提示的网页辅助浏览方法，对D清单页面进行无障碍测试。
任务目标
任务22 对页面进行无障碍改造
本次任务要求学习Web内容无障碍指南（WCAG）知识，对页面进行无障碍改造并测试。
任务描述
任务22 对页面进行无障碍改造
完成对页面进行无障碍改造，并对改造后的页面进行测试，需要：
学习WCAG2.0/2.1知识；
学习可访问的互联网应用（ARIA）及其最佳实践方法；
对D清单进行无障碍改造，并模拟障碍人士进行无障碍页面测试。
任务分析
任务22 对页面进行无障碍改造
知识与技能准备
Web内容可访问性指南（WCAG）2.1定义了如何使残障人士更容易访问Web内容。无障碍获取涉及广泛的残疾，包括视觉，听觉，身体，言语，认知，语言，学习和神经障碍。尽管这些准则涵盖了广泛的问题，但它们无法满足所有类型，程度和残障人士的需求。这些准则还使年龄较大的人更容易使用Web内容，但随着年龄的增长其能力会发生变化，并且通常会提高用户的可用性。
WCAG 2.1是通过W3C流程与世界各地的个人和组织合作开发的，目的是为Web内容可访问性提供共享的标准，以满足国际上个人，组织和政府的需求。WCAG 2.1建立在WCAG 2.0 [ WCAG20 ]的基础上，而WCAG 2.0 [ WCAG20 ]又建立在WCAG 1.0 [ WAI-WEBCONTENT ]的基础上，旨在现在和将来广泛应用于不同的Web技术，并且可以结合自动化测试和人工测试评价。有关WCAG的介绍，请参阅《Web内容可访问性指南（WCAG）概述》。
1、WCAG
知识与技能准备
ARIA是“Accessible Rich Internet Applications”的缩写。它是W3C的Web无障碍推进组织(Web Accessibility Initiative/WAI)在2014年3月20日发布的可访问富互联网应用实现指南，是一个为残疾人士等提供无障碍访问动态、可交互Web内容的技术规范，是对Web内容无障碍指南（WCAG）的有效补充，是具体的技术指标。
ARIA提供了语义，因此作者可以将用户界面行为和结构信息传达给辅助技术（例如屏幕阅读器）。ARIA规范提供了定义可访问用户界面元素的角色，状态和属性的本体。
ARIA套件包括提供用户代理实施指南的API映射规范。它还包括图形和数字出版模块。
2、WAI-ARIA
知识与技能准备
2.1 ARIA使用方法
应用于HTML的ARIA包括“role”（角色）和带“aria-”前缀的属性。
role标识了一个元素的作用，aria-属性描述了与之有关的事物特征及其是什么样的状态。
2.2 ARIA的角色定义“role”
下表列出了HTML元素中常用的ARIA角色role。
2、WAI-ARIA
知识与技能准备
2、WAI-ARIA
表1-22-1 role角色定义
知识与技能准备
在使用时，只需在HTML代码中加入role即可定义HTML的角色。
表1-22-1中并没用列出所用的ARIA角色，表1-22-2列出了常用标签元素对应的ARIA的role。当然，并不是使用的HTML元素都具有对应的ARIA的role。
在不同的情况下HTML的ARIA角色也是不一样的，如a标签不带href属性就不具有link角色，当a标签父元素是一个菜单时，其角色为menuitem；又如input表单标签，其角色取决于其type属性，type属性设置为checkbox，这角色为checkbox，如果其父元素是一个菜单时则为menuitemcheckbox；属性为button、image、reset、submit，角色为button，属性为text，角色为textbox。
2、WAI-ARIA
1
2
3
4
5

知识与技能准备
2.3 ARIA的属性和状态“aria-”
表1-22-3 ARIA 属性值示意及说明表
限于篇幅，需要了解更多ARIA的属性值，可通过https://www.w3.org/TR/2014/REC-wai-aria-20140320/states_and_properties页面查看。
在使用时，只需根据需求在HTML代码中加入aria-属性即可。
知识与技能准备
2.3 ARIA的属性和状态“aria-”
示例1：（在示例1中，工具栏的第一个控件（id为button1）是能够获取焦点的控件。）
1
2
3
4
5
示例2：（在示例2中，aria-用在progressbar组件上，对应HTML5中的min。）
1
2
示例3：（在示例3中，表示按钮已经按下，同时处于禁用状态。。）
1
知识与技能准备
2.3 ARIA的属性和状态“aria-”
表1-22-4 ARIA 状态值示意及说明表
知识与技能准备
开发一个可访问的 Web 应用不仅需要工具的支持，浏览器的支持，还需要开发人员遵循一定的规范提供对应的元素信息，才能达到最终的目的。下面着重介绍一些开发中的最佳实践。
3.1 image
图片或者动画均需提供 alt 信息，使得读屏软件可以将图片动画的内容清楚的读出来。对于某些用于装饰性的图片，则需设置 alt 为空，使得读屏软件可以忽略此元素。对于放在链接里面的图片，如果已经有文字的说明，alt也设置为空，这样避免读屏软件重复同样的内容。
CSS 将样式跟结构分离，使得 HTML 代码结构清晰。很多装饰性的图片也都放在 CSS 里面来加载，带来的一个问题就是在 CSS 里面的图片在高对比度模式下都无法显示。如果这个图片并不仅仅是装饰性的，还可以触发功能，那就需要从 CSS 里面拿出来，当成一个独立的 img 或者 input元素。
3、开发最佳实践
知识与技能准备
3.2 table
Table 分为两类：一类是做布局的 table，一类是数据 table。对于布局用的 table，读屏软件没必要知道这是一个表，可以通过设置 role=presentation 使读屏软件忽略这个表，只关注里面的内容。对于数据表格，则需要设置 caption 属性，说明整个表是用来做什么的，使得读屏软件可以告诉用户这个表的作用。对于每一个单元内的数据，还应该通过 th 属性使得读屏软件能识别这个数据的表头是什么。对于复杂表，可以通过 id 和 header 属性来标识。如图所示：
3、开发最佳实践
知识与技能准备
以第一行的数字 5 为例，正常人可以很容易得看出 5 指的是一年级 Mr.Henry 老师这个班的男生有 5 个，但当读屏软件面对这个数字 5 的时候，怎么能识别出来呢？通过 header 来标识表头，header 的值就指向对应表头的 id。
3.3 form
form 元素需要关联一个label元素，所有的button都已经有了一个隐含的 label，所以不再需要显示关联。对于 input，select，checkbox，radio，button则都需要显示一个 label 元素。这样读屏软件在面对这个表单元素的时候才能告诉用户这个表单的作用。例如下面的 input，读屏软件会告诉用户这个是需要输入名字的一个输入框。当 label 属性不方便使用的时候，还可以通过 title 属性达到相同的效果，也可以满足Webking检查的需要。下面的两种写法都可以。但前提是name不需要被显示出来。当title和label都设置的时候title会被读屏软件忽略。
3、开发最佳实践
知识与技能准备
当一个表单元素如果前后都需要描述的时候，label就显得力不从心了。ARIA 规范的出现解决了这一问题。aria-labelledby 属性可以设置多个值，说明这个表单元素是被那些值所描述的, aria-describedby属性则更详细的扩展了这个描述。
当读屏软件把焦点放在 10 上的时候，会告诉用户 10 表示的是 10 分钟刷新一次。对应的 HTML 代码如下所示。aria-required的属性标识这个元素是必须的，JAWS 识别此元素并告知用户必须输入此元素。我们可以看到中间的 input 元素被多个元素来描述（aria-labelledby 中的几个 id 值），这样读屏软件就能够识别这个标签，并且按照这个标签的顺序读出前后的 label， 并且提示用户如果还有更详细的描述以及如何获取这个更详细的描述。当用户需要时，aria-describedby 所对应的元素信息就会被读出来。增强了视力有障碍人士与普通人了解内容的一致性。
3、开发最佳实践
知识与技能准备
3.4 关于 Tabindex 与获取焦点的顺序
Tabindex属性的使用可以使得原本无法取得焦点的元素获取焦点。目的是为了使用户可以用键盘访问任何可以用鼠标访问的元素。我们知道，使用Tab键可以按文档顺序 tab 到所有可以获取焦点的元素。tabindex可以设置为 -1，0 或者是任何自然数。
tabindex=0就使原本无法获取焦点的元素可以在用户 tab 的时候获取焦点，并且按照文档顺序排列。
tabindex=-1使得元素可以获取焦点，但当用户用 tab 键访问的时候并不出现在 tab 的列表里面。可以方便的通过 Javascript 设置上下左右键的响应事件。非常有利于应用小部件（widget）内部的键盘访问。
tabindex设置为大于 0 的数字则可以控制用户 Tab 时候的顺序，一般很少用。
当用户使用 Tab 键浏览页面时，元素获取焦点的顺序是按照 HTML 代码里面元素出现的顺序排列的，有时跟实际看到的页面顺序并不一致。
3、开发最佳实践
知识与技能准备
3.5 Label
3.6 Alert Dialog
3.7 headings
3.8 list/listitem
3.9 button
3.10 toggle button
3.11 checkbox
3.12 radio
3.13 link
限于篇幅限制，以上实现方法代码详见书本，其它实现方法就不在介绍，如果感兴趣，可以查看http://www.w3.org/TR/2014/REC-wai-aria-20140320/或http://www./wai-aria/wai-aria.html了解。
3、开发最佳实践
知识与技能准备
信息无障碍网页的测试主要是模拟相关人群去测试页面。相关人群使用的无障碍辅助技术（硬件或软件）主要是：
依靠用户代理提供的服务来检索和呈现Web内容。
通过使用API 与用户代理或Web内容本身协同工作。
提供超出用户代理提供的服务，以方便用户与残疾人的网页内容交互。
该定义可能与其他文档中使用的定义不同。如：
屏幕放大镜，用于放大和提高渲染文本和图像的视觉可读性；
屏幕阅读器，最常用于通过合成语音或可刷新盲文显示来传达信息；
文本到语音软件，用于将文本转换为合成语音；
语音识别软件，用于允许口语控制和口授；
用于模拟键盘的备用输入技术（包括头指针，屏幕键盘，单开关和sip / puff设备）；
备用指点设备，用于模拟鼠标指向和点击。
4、信息无障碍网页的测试
任务实施
1、角色说明
按钮是使用标签制作的，使用应该对其角色进行说明。
2、图片描述
对应装饰性图片，我们要让img的alt属性为空，但是对应非装饰性图片，这需使用alt属性对图片进行说明。
3、表单
在项目中因为我们按照标准的input标签及属性来制作表单和按钮，所以可以不需要添加role角色。
由于我们在页面制作时遵循了HTML5标准，很少使用非语义化标签来设置相关内容，且页面交互相对简单，所以需要修改的并不多。(共14张PPT)
制作响应式网页
第三阶段
能描述各个浏览器对HTML5及CSS3的兼容情况；
能根据浏览器兼容性情况使用CSS3前缀解决兼容性问题；
能够使用W3C提供的验证工具对D清单页面进行验证，并能根据验证结果修改不符合W3C规范的代码。
任务目标
任务23测试及兼容性设置
1、完善上一任务的D清单网页，让该网页的兼容性更强。
2、使用W3C对D清单页面HTML和CSS代码进行验证，确认是否符合W3C标准。W3C CSS验证测试页面如图1-23所示。
任务描述
图1-23 W3C HTML和CSS验证测试页面
任务23测试及兼容性设置
完成对D清单页面进行兼容性测试和W3C验证测试，需要：
学习常见的浏览器及其对H5的兼容性；
学习并为D清单页面添加CSS3浏览器前缀；
对D清单页面代码进行W3C认证测试。
任务分析
任务23测试及兼容性设置
知识与技能准备
目前，支持CSS3和HTML5的浏览器变得越来越多，包括最新版的Microsoft Edge浏览器。但是，由于CSS3和HTML5的W3C规范在不断的完善，浏览器的兼容性也在不断的更新。
目前IE，Firefox，Opera，Chrome，Safari五大主流浏览器对 HTML5 和 CSS3 各种特性都有比较好的支持，HTML5正在成为开发的主流。
1、五大浏览器对CSS3和HTML5兼容性比较
知识与技能准备
1.1 CSS3属性
目前我国用户浏览器使用情况如下图：
注：第3、4、6列分别为Firefox、Chrome和Opera，数据来自http:///usage-table。
各浏览器版本对CSS3、HTML5、JS、JS API、Other、Security、SVG等的支持情况由于版本不断更新，请自行前往http:///#comparison了解。
1、五大浏览器对CSS3和HTML5兼容性比较
图1-23-1 国内占98.09%市场份额浏览器各版本使用情况
知识与技能准备
浏览器一直都在实施CSS3，但它还未成为真正的标准。为此，当一些CSS3样式语法存在波动时，它们提供针对浏览器的前缀。现在主要流行的浏览器内核主要有：
（1）Trident内核：主要代表为IE浏览器；
（2）Gecko内核：主要代表为Firefox；
（3）Presto内核：主要代表为Opera；
（4）Webkit内核：产要代表为Chrome和Safari。
针对这些不同内核的浏览器，CSS3部分属性需要添加不同的前缀，也将其称之为浏览器的私有前缀，添加上私有前缀之后的CSS3属性可以说是对应浏览器的私有属性。
2、CSS3前缀
知识与技能准备
2、CSS3前缀
表1-23-2 CSS3前缀
这样编写代码，无形之中给前端人员增加了不少工作量，那么如何在编写CSS时不需要添加浏览器的私有前缀，又能让浏览器识别呢？
我们可以通过引用一个prefixfree脚本来解决这个问题。只需要在.html文件中插入一个prefixfree.js文件（建议把这个脚本文件放在样式表之后）。
添加这个脚本之后，使用CSS3的属性时，只需书写标准样式即可。
prefixfree脚本仅在IE9+、Opera10+、Firefox3.5+、Safari4+得到支持。
但是对于开发人员来说，使用这个方法也是需要调试的。一旦客户端禁用了JavaScirpt，它的功能会失效。另外对于客户体验来说，也有一定影响。
打开Visual Studio Code，输入如下标签：
课堂练习1-23-1 制作如下图效果的图像
html
1

css
1
2
3
4
5
6
7
8
9 div{
width:200px;
height:100px;
background: #80A060;
background-image: linear-gradient(transparent, rgba(10,0,0,.3)); /*线性渐变*/
border-radius: 50%;
box-shadow: 1em 2em 4em -2em black; /*阴影*/
transform: rotate(15deg);
}
js
1
2
图1-23-2图像
知识与技能准备
在本教程的项目一中我们已经介绍过W3C标准了，知道我们在建设网站时应该要保证代码符合W3C规范。
那要如何验证我们编写的代码符合W3C标准呢？
W3C本身已经提供了该验证服务，可以为互联网用户检查HTML文件是否附合HTML或XHTML标准，并且向网页设计师提供快速检查网页错误的方法。
W3C html 验证地址：http://validator.w3.org
W3C css 验证地址：http://jigsaw.w3.org/css-validator
3、W3C验证
（1）将课堂练习1-23-1的代码上传到http://validator.w3.org网址，如果出现以下语句，则说明你的html已经通过验证。
（2）将课堂练习1-23-1的代码上传到http://jigsaw.w3.org/css-validator
网址，如果出现以下语句，则说明你的css也已经通过验证。
课堂练习1-23-2 验证课堂练习1-23-1是否符合W3C标准
图1-23-3 CSS验证通过结果截图
任务实施
1、下载并引用prefixfree脚本，让网页兼容性更强。在样式表之后添加prefixfree.js文件。
2、将自己所写的D清单网页上传到http://jigsaw.w3.org/css-validator和
http://validator.w3.org网址，验证网页是否符合W3C标准。
除了前面所讲的prefixfree脚本之外，还有其他方法可以解决CSS3属性前缀问题。
任务拓展
任务23测试及兼容性设置

展开更多......

收起↑