HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作課件：制作響應(yīng)式網(wǎng)頁(yè)

制作響應(yīng)式網(wǎng)頁(yè)能表述響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)概念；能說(shuō)明CSS媒體查詢?cè)陧憫?yīng)式網(wǎng)頁(yè)設(shè)計(jì)中的作用；能夠正確使用CSS媒體查詢等完成D清單頁(yè)面頁(yè)面響應(yīng)式導(dǎo)航菜單制作。任務(wù)目標(biāo)

制作響應(yīng)式導(dǎo)航菜單將D清單頁(yè)面設(shè)置為響應(yīng)式網(wǎng)頁(yè)，當(dāng)用戶使用平板設(shè)備或電腦設(shè)備時(shí)，對(duì)導(dǎo)航欄中的列表標(biāo)簽進(jìn)行樣式設(shè)置和排版，使導(dǎo)航欄的列表內(nèi)容全部顯示在頁(yè)面頂部。效果如下：任務(wù)描述任務(wù)1配置工作環(huán)境圖1-19平板和電腦端導(dǎo)航條效果圖本次任務(wù)要求根據(jù)D清單頁(yè)面效果圖，使用CSS樣式，在基礎(chǔ)上將D清單頁(yè)面菜單修改為響應(yīng)式菜單，需要：學(xué)習(xí)響應(yīng)式頁(yè)面的相關(guān)概念特征；CSS媒體查詢的相關(guān)知識(shí)綜合運(yùn)用媒體查詢和CSS相關(guān)知識(shí)，對(duì)D清單頁(yè)面菜單欄進(jìn)行響應(yīng)式改造，使其在手機(jī)端、平板端和電腦端（根據(jù)效果圖，平板和電腦端效果一致）的菜單欄顯示不同狀態(tài)。任務(wù)分析圖1-19平板和電腦端導(dǎo)航條效果圖

制作響應(yīng)式導(dǎo)航菜單知識(shí)與技能準(zhǔn)備響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)就是網(wǎng)頁(yè)的設(shè)計(jì)與開(kāi)發(fā)能夠根據(jù)用戶行為以及設(shè)備環(huán)境（系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等）進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。即無(wú)論用戶正在使用筆記本、ipad、手機(jī)，我們的頁(yè)面都能夠自動(dòng)切換分辨率、圖片尺寸等，以適應(yīng)不同設(shè)備。實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)的主要途徑是使用CSS媒體查詢。1、認(rèn)識(shí)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)知識(shí)與技能準(zhǔn)備CSS媒體查詢可以根據(jù)不同的屏幕尺寸設(shè)置不同的樣式。當(dāng)我們重置瀏覽器大小的過(guò)程中，頁(yè)面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁(yè)面。2、CSS媒體查詢語(yǔ)法：@mediamediatypeand|not|only(mediafeature){CSS-Code;}知識(shí)與技能準(zhǔn)備其中，mediatype即媒體類型有以下幾種：2、CSS媒體查詢表1-19-1媒體類型知識(shí)與技能準(zhǔn)備Mediafeature即媒體功能有以下取值：2、CSS媒體查詢表1-19-2媒體功能課堂練習(xí)1-19-1CSS媒體查詢簡(jiǎn)單應(yīng)用HTML代碼：1<divclass="text">sometext</div>CSS代碼：12345678910111213.text{ color:grey;}@mediascreenand(max-width:960px){.text{ color:red;}}@mediascreenand(max-width:768px){.text{ color:orange;}}@mediascreenand(max-width:550px){.text{ color:yellow;}}@mediascreenand(max-width:320px){.text{ color:green;}}課堂練習(xí)1-19-1CSS媒體查詢簡(jiǎn)單應(yīng)用在火狐瀏覽器的響應(yīng)式設(shè)計(jì)模式下調(diào)整瀏覽器視口寬度，可以看到在不同分辨率下，文字的顏色有所變化。圖1-19-5768px下文字顏色效果（橘黃色）圖1-19-5768px下文字顏色效果（橘黃色）圖1-19-7320px下文字顏色效果（綠色）知識(shí)與技能準(zhǔn)備這些變化，正是媒體查詢所要的效果。媒體查詢就是通過(guò)不同的媒體類型和條件定義樣式表規(guī)則。媒體查詢的實(shí)現(xiàn)方法很多，這里只介紹W3C推薦的媒體查詢CSS樣式規(guī)則。也可以通過(guò)下列兩種寫(xiě)法來(lái)實(shí)現(xiàn)媒體查詢：或另外，在使用media時(shí)候需要先設(shè)置下面這段代碼，來(lái)兼容移動(dòng)設(shè)備的展示效果：其中width=device-width為寬度等于當(dāng)前設(shè)備的寬度，initial-scale為初始的縮放比例（默認(rèn)設(shè)置為1.0）。2、CSS媒體查詢@importurl(example.css)screenand(width:800px);<linkmedia="screenand(width:800px)"rel="stylesheet"href="example.css"/><meta

name="viewport"

content="width=device-width,

initial-scale=1.0>任務(wù)實(shí)施在上一任務(wù)完成代碼的基礎(chǔ)上，更改D清單網(wǎng)頁(yè)頭部的導(dǎo)航欄部分，讓導(dǎo)航欄的列表內(nèi)容顯示在頁(yè)面頂部。注意，本任務(wù)中，因?yàn)樵O(shè)置了變換和過(guò)渡效果，所以其元素的顯示和隱藏并不完全是依賴display的方式來(lái)實(shí)現(xiàn)，而是通過(guò)opacity屬性修改透明度來(lái)實(shí)現(xiàn)。參考代碼請(qǐng)參照書(shū)本。二級(jí)導(dǎo)航菜單即指當(dāng)鼠標(biāo)放到一級(jí)導(dǎo)航菜單上后，會(huì)彈出相應(yīng)的二級(jí)導(dǎo)航菜單，移去鼠標(biāo)后消失。我們可以通過(guò)給一級(jí)導(dǎo)航菜單加一個(gè)hover，滑過(guò)時(shí)二級(jí)導(dǎo)航菜單顯示，鼠標(biāo)移走后隱藏二級(jí)導(dǎo)航菜單。任務(wù)拓展

制作響應(yīng)式導(dǎo)航菜單能敘述網(wǎng)頁(yè)柵格系統(tǒng)的布局原理，柵格系統(tǒng)的設(shè)計(jì)原則；能編寫(xiě)固定寬度和彈性頁(yè)面柵格系統(tǒng)的CSS布局代碼；能將柵格系統(tǒng)和媒體查詢功能結(jié)合，制作出CSS布局文件，兼容任意寬度的網(wǎng)頁(yè)排版布局。能夠?qū)W習(xí)伸縮盒子（FlexibleBox）的相關(guān)知識(shí)，并能辨析其與傳統(tǒng)的響應(yīng)式浮動(dòng)布局的差異。能夠綜合運(yùn)用各柵格技術(shù)編寫(xiě)柵格系統(tǒng)使其后續(xù)能夠應(yīng)用于D清單頁(yè)面進(jìn)行彈性布局。任務(wù)目標(biāo)

編寫(xiě)網(wǎng)頁(yè)柵格系統(tǒng)本任務(wù)要求將媒體查詢功能和柵格化布局結(jié)合，制作一個(gè)適用于響應(yīng)式頁(yè)面排版布局的通用型CSS文件，使得任何一個(gè)按要求設(shè)置并應(yīng)用該CSS文件的頁(yè)面能夠?qū)崿F(xiàn)響應(yīng)式效果。編寫(xiě)的文件接下來(lái)將應(yīng)用于D清單的響應(yīng)式布局。具體要求為：1、編寫(xiě)一個(gè)通用型柵格系統(tǒng)代碼文件；2、文件能夠被復(fù)用于應(yīng)用其的頁(yè)面進(jìn)行柵格化布局。任務(wù)描述

編寫(xiě)網(wǎng)頁(yè)柵格系統(tǒng)完成D清單頁(yè)面柵格系統(tǒng)的編寫(xiě)，需要：學(xué)習(xí)柵格系統(tǒng)的布局原理和設(shè)計(jì)原則；學(xué)習(xí)固定寬度和任意寬度頁(yè)面的柵格系統(tǒng)區(qū)別及CSS布局代碼編寫(xiě)。編寫(xiě)適用于任意寬度的柵格系統(tǒng)文件，并進(jìn)行測(cè)試。任務(wù)分析

編寫(xiě)網(wǎng)頁(yè)柵格系統(tǒng)知識(shí)與技能準(zhǔn)備網(wǎng)頁(yè)柵格系統(tǒng)是一種網(wǎng)頁(yè)排版布局方式，將網(wǎng)頁(yè)寬度平分為多個(gè)等份的網(wǎng)格，如6等份、12等份、24等份，頁(yè)面中每個(gè)模塊的寬度設(shè)置為1等份的整倍數(shù)。如下圖將頁(yè)面分為6等份的布局效果：1、認(rèn)識(shí)網(wǎng)頁(yè)柵格系統(tǒng)圖1-20-1柵格系統(tǒng)示意圖知識(shí)與技能準(zhǔn)備對(duì)于網(wǎng)頁(yè)設(shè)計(jì)來(lái)說(shuō)，柵格系統(tǒng)的使用，不僅可以讓網(wǎng)頁(yè)的信息呈現(xiàn)更加美觀易讀，更具可用性。對(duì)于前端開(kāi)發(fā)來(lái)說(shuō)，網(wǎng)頁(yè)將更加的靈活與規(guī)范，如上圖的6等份的網(wǎng)格，還可組合出2:2:2、3:3、4:2等布局方式。下面是不同等份的分割在網(wǎng)頁(yè)中的實(shí)際應(yīng)用。1、認(rèn)識(shí)網(wǎng)頁(yè)柵格系統(tǒng)圖1-20-26等份柵格網(wǎng)頁(yè)圖1-20-312等份柵格網(wǎng)頁(yè)知識(shí)與技能準(zhǔn)備1、認(rèn)識(shí)網(wǎng)頁(yè)柵格系統(tǒng)圖1-20-424等份柵格網(wǎng)頁(yè)知識(shí)與技能準(zhǔn)備如下圖，假設(shè)將網(wǎng)頁(yè)寬度平均分為n份，每份網(wǎng)格寬度為w，則網(wǎng)頁(yè)總寬度為w×n。但考慮到每個(gè)網(wǎng)頁(yè)模塊之間因保留一定的間距i，如果一個(gè)模塊占用3份網(wǎng)格，其實(shí)際寬度為：w×3-i。而水平排列的最后一個(gè)模塊不應(yīng)該保留間距i，所以網(wǎng)頁(yè)的實(shí)際總寬度應(yīng)該為：總寬度Width=w×n-i2、網(wǎng)頁(yè)柵格系統(tǒng)的設(shè)計(jì)圖1-20-5網(wǎng)頁(yè)柵格寬度知識(shí)與技能準(zhǔn)備根據(jù)上面的公式，假設(shè)網(wǎng)頁(yè)分為12等份，每份寬度80px，間距10px，則總寬度為950px。這是網(wǎng)頁(yè)柵格化中比較常用的劃分方式，12等份的網(wǎng)格可以使網(wǎng)頁(yè)平均放入2個(gè)模塊（6:6），或是3個(gè)模塊（4:4:4），或是4個(gè)模塊（3:3:3:3），或是6個(gè)模塊（2:2:2:2:2:2），使布局靈活多樣。如果需要更加細(xì)致的布局，也可以分為24等份，每份寬度40px，間距10px，總寬度為950px。但不一定要局限于這兩種劃分方式，也可自行嘗試其它的劃分，如10等份、16等份等。2、網(wǎng)頁(yè)柵格系統(tǒng)的設(shè)計(jì)知識(shí)與技能準(zhǔn)備以網(wǎng)頁(yè)分12等份，每份寬度80px，間距10px，總寬度950px為例，設(shè)置網(wǎng)頁(yè)的CSS樣式。由于網(wǎng)頁(yè)中一個(gè)模塊占用的寬度可能為1份、2份、3份……12份，一共12種情況，需要將每種情況都使用一個(gè)CSS選擇符進(jìn)行設(shè)置，以后直接為標(biāo)簽添加對(duì)應(yīng)份數(shù)的選擇符即可完成寬度的設(shè)置。其中不同份數(shù)與其寬度的關(guān)系如下：1份寬度=80×1-10=70px，附帶10px的右邊界；2份寬度=80×2-10=150px，附帶10px的右邊界；3份寬度=80×3-10=230px，附帶10px的右邊界；……11份寬度=80×11-10=870px，附帶10px的右邊界；12份寬度=80×12-10=950px，無(wú)右邊界；3、網(wǎng)頁(yè)柵格系統(tǒng)的實(shí)現(xiàn)知識(shí)與技能準(zhǔn)備3、網(wǎng)頁(yè)柵格系統(tǒng)的實(shí)現(xiàn)CSS代碼：1234567891011121314151617[class*="grid"]{/*為.gridn統(tǒng)一添加樣式*/

float:left; margin:010px10px0;/*右邊界和下邊界*/}.grid1{width:70px;}.grid2{width:150px;}.grid3{width:230px;}.grid4{width:310px;}.grid5{width:390px;}.grid6{width:470px;}.grid7{width:550px;}.grid8{width:630px;}.grid9{width:710px;}.grid10{width:790px;}.grid11{width:870px;}.grid12{width:950px;margin-right:0;}/*不需要邊界*/.grid_last{margin-right:0;}/*消除一行最后一個(gè)的邊界*/知識(shí)與技能準(zhǔn)備選擇符“.grid1”至“.grid12”設(shè)置了12種等份情況下所使用的寬度，“[class*="grid"]”選擇符為添加了“.gridn”的標(biāo)簽再添加上10px的右邊界和其它相同的樣式設(shè)置。由于一行中最后一個(gè)模塊不需要添加右邊界，所以設(shè)置“.grid_last”選擇符用于消除右邊界，最后一個(gè)模塊的class因?qū)憺椤癱lass="gridngrid_last"”。3、網(wǎng)頁(yè)柵格系統(tǒng)的實(shí)現(xiàn)知識(shí)與技能準(zhǔn)備3、網(wǎng)頁(yè)柵格系統(tǒng)的實(shí)現(xiàn)HTML代碼：1234567891011121314151617<divclass="main"><!—網(wǎng)頁(yè)主體，寬950px--><!--第一行--><divclass="grid2">2</div><divclass="grid2">2</div><divclass="grid2">2</div><divclass="grid2">2</div><divclass="grid2">2</div><divclass="grid2grid_last">2</div><!--第二行--><divclass="grid3">3</div><divclass="grid4">4</div><divclass="grid5grid_last">5</div><!--第三行--><divclass="grid4">4</div><divclass="grid8grid_last">8</div><divclass="clear"></div></div>顯示效果如下：圖1-20-6固定寬度網(wǎng)頁(yè)柵格測(cè)試效果知識(shí)與技能準(zhǔn)備在上一內(nèi)容的設(shè)置中，柵格系統(tǒng)只能適用于固定的網(wǎng)頁(yè)寬度，如果網(wǎng)頁(yè)總寬度變更，需要重新計(jì)算和設(shè)置每份網(wǎng)格的寬度。再或者要制作自動(dòng)適應(yīng)瀏覽器寬度的網(wǎng)頁(yè)，這種設(shè)置方法將不適用。此時(shí)可以使用百分比%為單位設(shè)置寬度，但間距如果為固定值時(shí)，將無(wú)法計(jì)算出不同寬度下每份網(wǎng)格的比例。現(xiàn)在需要對(duì)網(wǎng)格的設(shè)置進(jìn)行一些調(diào)整，如下圖：4、網(wǎng)頁(yè)柵格系統(tǒng)的另一種設(shè)置（自動(dòng)適應(yīng)不同的頁(yè)面寬度）圖1-20-7自適應(yīng)網(wǎng)頁(yè)柵格知識(shí)與技能準(zhǔn)備使用百分比%設(shè)置網(wǎng)格的寬度，如果分為12等份，n份網(wǎng)格的寬度設(shè)置如下：1份寬度=1/12=8.33333%；2份寬度=2/12=16.66667%；3份寬度=3/12=25%；……11份寬度=11/12=91.66667%；12份寬度=12/12=100%；將標(biāo)簽設(shè)置為“怪異盒子模型”，使用填充代替邊界產(chǎn)生各份的間距，這樣間距的寬度將不會(huì)對(duì)各份的實(shí)際寬度造成影響。填充設(shè)置為左填充和右填充，寬度為間距寬度的一半。網(wǎng)頁(yè)的總寬度等同于瀏覽器的寬度，或等同于柵格化標(biāo)簽的父標(biāo)簽寬度。由于網(wǎng)頁(yè)兩側(cè)會(huì)留有填充產(chǎn)生的間距，所以網(wǎng)頁(yè)內(nèi)容可視的寬度為“網(wǎng)頁(yè)總寬度Width-i”。4、網(wǎng)頁(yè)柵格系統(tǒng)的另一種設(shè)置（自動(dòng)適應(yīng)不同的頁(yè)面寬度）知識(shí)與技能準(zhǔn)備3、網(wǎng)頁(yè)柵格系統(tǒng)的實(shí)現(xiàn)CSS代碼：1234567891011121314151617[class*="grid_"]{/*為.gridn_統(tǒng)一添加樣式*/

box-sizing:border-box;/*怪異盒子模型*/padding:05px10px5px;/*間距為5+5=10*/

float:left;}.grid_s1{width:8.33333%;}.grid_s2{width:16.66667%;}.grid_s3{width:25%;}.grid_s4{width:31.213333%;}.grid_s5{width:41.66667%;}.grid_s6{width:50%;}.grid_s7{width:58.33333%;}.grid_s8{width:66.66667%;}.grid_s9{width:75%;}.grid_s10{width:81.213333333%;}.grid_s11{width:91.66667%;}.grid_s12{width:100%;}知識(shí)與技能準(zhǔn)備3、網(wǎng)頁(yè)柵格系統(tǒng)的實(shí)現(xiàn)HTML代碼：12345678910111213141516<divclass="main"><!—網(wǎng)頁(yè)主體，寬任意--><!--第一行--><divclass="grid_s3">3</div><divclass="grid_s3">3</div><divclass="grid_s3">3</div><divclass="grid_s3">3</div><!--第二行--><divclass="grid_s5">5</div><divclass="grid_s7">7</div><!--第三行--><divclass="grid_s1">1</div><divclass="grid_s1">1</div><divclass="grid_s6">6</div><divclass="grid_s4">4</div><divclass="clear"></div></div>顯示效果如下：圖1-20-8自適應(yīng)柵格實(shí)現(xiàn)效果圖任務(wù)實(shí)施設(shè)計(jì)一種響應(yīng)式柵格布局，除了能夠?qū)崿F(xiàn)柵格化布局功能外，還能結(jié)合媒體查詢功能，在不同的瀏覽器寬度下，自動(dòng)調(diào)整布局結(jié)構(gòu)，如網(wǎng)頁(yè)在手機(jī)設(shè)備中一行只顯示1個(gè)模塊的內(nèi)容，在平板設(shè)備中自動(dòng)調(diào)整為一行顯示3個(gè)模塊，電腦設(shè)備中一行顯示4個(gè)模塊。使用媒體查詢功能設(shè)置出3種瀏覽器寬度下所使用的設(shè)置：手機(jī)設(shè)備（寬度<=767）、平板設(shè)備（768<=寬度<=1023）、電腦設(shè)備（寬度>=1024）。都添加相同的柵格系統(tǒng)設(shè)置，但是選擇符的命名有所區(qū)別，分別是“.grid_sn”、“.grid_mn”、“.grid_Ln”。網(wǎng)頁(yè)中模塊標(biāo)簽將同時(shí)添加這三種選擇符，如“class='grid_s12grid_m6grid_L3'”，由于不同寬度下只有一種選擇符會(huì)生效，所以標(biāo)簽在不同寬度下將使用不同的布局比例。任務(wù)實(shí)施創(chuàng)建一個(gè)grid.css樣式：

grid.css：1234567891011121314151617181920212223[class*="grid_"]{/*柵格化標(biāo)簽的通用設(shè)置*/

box-sizing:border-box; padding:05px10px5px; float:left; background-clip:content-box;/*填充部分不顯示背景，該句可不設(shè)置*/}/*手機(jī)設(shè)備附加的樣式，頁(yè)面寬度<=767*/@mediaalland(max-width:767px){ .grid_s1{width:8.33333%;} .grid_s2{width:16.66667%;} /*其余設(shè)置與上一內(nèi)容設(shè)置的一樣，此處省略*/ .grid_s12{width:100%;}}/*平板設(shè)備附加的樣式，768<=頁(yè)面寬度<=1023*/@mediaalland(min-width:768px)and(max-width:1023px){ .grid_m1{width:8.33333%;} .grid_m2{width:16.66667%;} /*其余設(shè)置與上一內(nèi)容設(shè)置的一樣，此處省略*/ .grid_m12{width:100%;}}/*電腦設(shè)備附加的樣式，頁(yè)面寬度>=1024*/@mediaalland(min-width:1024px){ .grid_L1{width:8.33333%;} .grid_L2{width:16.66667%;} /*其余設(shè)置與上一內(nèi)容設(shè)置的一樣，此處省略*/ .grid_L12{width:100%;}}任務(wù)實(shí)施效果測(cè)試：

grid.css：123456789<divclass="main"><!—網(wǎng)頁(yè)主體，寬任意--> <divclass="grid_s6grid_m4grid_L3"></div> <divclass="grid_s6grid_m4grid_L3"></div> <divclass="grid_s12grid_m4grid_L3"></div> <divclass="grid_s6grid_m4grid_L3"></div> <divclass="grid_s6grid_m4grid_L6"></div> <divclass="grid_s12grid_m4grid_L6"></div> <divclass="clear"></div></div>任務(wù)實(shí)施顯示效果如下：

圖1-20-9柵格系統(tǒng)測(cè)試效果任務(wù)實(shí)施完成后可以運(yùn)用制作的柵格化設(shè)置文件（grid.css），制作如下圖效果的相冊(cè)頁(yè)面進(jìn)行測(cè)試。要求：1）不同設(shè)備下圖片部分的排版有所不同，手機(jī)、平板設(shè)備下圖片部分的總寬度等同于瀏覽器的寬度，電腦設(shè)備下圖片部分總寬度為1000px；2）頭部部分寬度始終等同于瀏覽器寬度，可不使用柵格化布局，但手機(jī)設(shè)備下文字排布位置有所不同。任務(wù)實(shí)施顯示效果如下：

圖1-20-10柵格系統(tǒng)測(cè)試手機(jī)端、平板端、電腦端網(wǎng)頁(yè)布局是網(wǎng)頁(yè)實(shí)現(xiàn)的框架，對(duì)整個(gè)網(wǎng)頁(yè)視覺(jué)效果起到非常關(guān)鍵的作用。浮動(dòng)布局(也稱DIV+CSS布局)技術(shù)是網(wǎng)站布局使用范圍最廣的布局技術(shù)，利用浮動(dòng)布局技術(shù)可以實(shí)現(xiàn)大部分瀏覽器的兼容，達(dá)到相對(duì)最優(yōu)的布局效果。但從W3C組織在2009年發(fā)布第一個(gè)伸縮盒子草案至今，已更新過(guò)多次，其提供的全新的布局伸縮盒子，因其專為布局和響應(yīng)式而設(shè)計(jì)，給網(wǎng)頁(yè)布局帶來(lái)了新的思路，對(duì)響應(yīng)式布局更是福音。任務(wù)拓展

編寫(xiě)網(wǎng)頁(yè)柵格系統(tǒng)能進(jìn)一步完善柵格化系統(tǒng)的功能，增加?xùn)鸥癫季值牧舭讌^(qū)域和柵格模塊的隱藏功能；能將柵格化系統(tǒng)運(yùn)用到D清單頁(yè)面中進(jìn)行響應(yīng)式布局。任務(wù)目標(biāo)

重布局頁(yè)面實(shí)現(xiàn)響應(yīng)式效果使用中制作的響應(yīng)式柵格系統(tǒng)（文件grid.css），對(duì)D清單頁(yè)面進(jìn)行響應(yīng)式改造，使頁(yè)面在平板設(shè)備、電腦設(shè)備中都能正常顯示，并根據(jù)瀏覽器的寬度自動(dòng)調(diào)整頁(yè)面內(nèi)容的排版。任務(wù)描述圖1-21平板和電腦端瀏覽效果

重布局頁(yè)面實(shí)現(xiàn)響應(yīng)式效果完成D清單頁(yè)面的響應(yīng)式改造，需要：增加?xùn)鸥癫季值牧舭讌^(qū)域設(shè)置；增加?xùn)鸥衲K的隱藏功能設(shè)置；根據(jù)需要對(duì)D清單頁(yè)面重新布局的內(nèi)容進(jìn)行HTML和CSS修訂，以應(yīng)用柵格系統(tǒng)對(duì)D清單頁(yè)面進(jìn)行響應(yīng)式改造。部分電腦端頁(yè)面排版布局如圖1-21-1所示。任務(wù)分析圖1-21-1變更為左右或左中右布局的電腦端頁(yè)面效果

重布局頁(yè)面實(shí)現(xiàn)響應(yīng)式效果知識(shí)與技能準(zhǔn)備在網(wǎng)頁(yè)布局中，并不是任何網(wǎng)頁(yè)都會(huì)將頁(yè)面的空間填滿，有時(shí)候由于網(wǎng)頁(yè)設(shè)計(jì)的需要會(huì)預(yù)留一些不放置內(nèi)容的區(qū)域。在上一任務(wù)中設(shè)置的柵格布局中，每個(gè)模塊都會(huì)從左向右排列將空間填滿，現(xiàn)在需要進(jìn)一步改良設(shè)置。如下圖所示，由于標(biāo)簽的填充已用于設(shè)置模塊間的間距，所以使用左邊界，以每份網(wǎng)格為單位，為模塊標(biāo)簽的左側(cè)隔開(kāi)留白的空間。1、為網(wǎng)頁(yè)柵格系統(tǒng)添加留白區(qū)域圖1-21-2留白柵格原理圖知識(shí)與技能準(zhǔn)備左邊界的長(zhǎng)度同樣還是以百分比%為單位，設(shè)置為一份網(wǎng)格的整倍數(shù)，有1份網(wǎng)格、2份、……、11份一種11種情況。和上一任務(wù)中柵格系統(tǒng)設(shè)置方法類似，為不同的情況都設(shè)置一個(gè)獨(dú)立的選擇符。1、為網(wǎng)頁(yè)柵格系統(tǒng)添加留白區(qū)域知識(shí)與技能準(zhǔn)備為柵格系統(tǒng)的CSS文件補(bǔ)充下面的設(shè)置：1、為網(wǎng)頁(yè)柵格系統(tǒng)添加留白區(qū)域?yàn)槟K標(biāo)簽添加“grid_”設(shè)置寬度的同時(shí)，添加“ml_”付加上左邊界產(chǎn)生左側(cè)留白效果。css：123456789101112/*追加留白的設(shè)置*/.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：12345678910<divclass="main"><!—網(wǎng)頁(yè)主體--><divclass="grid_s10ml_s2"></div><!--留白2個(gè)網(wǎng)格--><divclass="grid_s3"></div><divclass="grid_s3ml_s1"></div><!--留白1個(gè)網(wǎng)格--><divclass="grid_s3ml_s1"></div><!--留白1個(gè)網(wǎng)格--><divclass="clear"></div></div>圖1-21-3有留白的柵格顯示效果知識(shí)與技能準(zhǔn)備響應(yīng)式柵格系統(tǒng)中要添加留白效果，需要為每種設(shè)備的媒體查詢，分別添加上述的CSS設(shè)置，并通過(guò)選擇符的名稱區(qū)分，做法與上一任務(wù)中響應(yīng)式柵格系統(tǒng)設(shè)置方法類似。代碼請(qǐng)查看書(shū)本。如果因?yàn)椴季中枨筇砑佑覀?cè)留白邊界的，使用相同的方法添加對(duì)應(yīng)的選擇符。1、為網(wǎng)頁(yè)柵格系統(tǒng)添加留白區(qū)域知識(shí)與技能準(zhǔn)備部分網(wǎng)頁(yè)的內(nèi)容比較多，在手機(jī)或平板設(shè)備下頁(yè)面無(wú)法顯示過(guò)多的內(nèi)容，可能需要隱藏部分次要的模塊，以節(jié)省空間。前面柵格系統(tǒng)的設(shè)置中，設(shè)定了1-12份網(wǎng)格占用的空間，現(xiàn)在追加一個(gè)“0份”空間，設(shè)置為“display:none;”，添加了該選擇符的標(biāo)簽便會(huì)被隱藏。2、在特定設(shè)備寬度下隱藏部分的柵格模塊grid.css：123456789101112@mediaalland(max-width:767px){ /*追加設(shè)置*/ .grid_s0{display:none;}}@mediaalland(min-width:768px)and(max-width:1023px){ /*追加設(shè)置*/ .grid_m0{display:none;}}@mediaalland(min-width:1024px){ /*追加設(shè)置*/ .grid_L0{display:none;}}任務(wù)實(shí)施使用上一個(gè)任務(wù)中制作的響應(yīng)式柵格系統(tǒng)（文件grid.css），進(jìn)一步完善D清單網(wǎng)頁(yè)。使頁(yè)面在平板設(shè)備、電腦設(shè)備中都能正常顯示，并根據(jù)瀏覽器的寬度自動(dòng)調(diào)整頁(yè)面部分內(nèi)容的排版。由于排版方式有所變化，部分內(nèi)容的html標(biāo)簽代碼需要進(jìn)行一下修改。1、關(guān)于1.1布局修改1.2內(nèi)容格式優(yōu)化由于該部分與手機(jī)端其實(shí)是一致的，在電腦和平板端，由于視口寬度的增加，我們可以對(duì)其字體大小、留白等進(jìn)行適當(dāng)修改。圖1-21-4關(guān)于部分的效果圖任務(wù)實(shí)施2、特征模塊在該內(nèi)容模塊中，我們可以對(duì)其進(jìn)行柵格化布局，其中標(biāo)題和副標(biāo)題可以是12柵格，不需要修改。圖片和文本區(qū)域，平板端可以按照5：7進(jìn)行布局，電腦端可以按照4：8進(jìn)行布局。圖1-21-5特征模塊效果圖任務(wù)實(shí)施3、應(yīng)用下載與上一模塊類似，其中標(biāo)題和副標(biāo)題可以是12柵格，不需要修改。圖片和文本區(qū)域，平板和電腦端都可以按照4：4：4進(jìn)行布局。圖1-21-6應(yīng)用下載效果圖任務(wù)實(shí)施4、高級(jí)會(huì)員該表格在布局時(shí)已經(jīng)是12列柵格的布局，與關(guān)于部分類似，只需要增加最大寬度樣式到HTML的即可，這里操作省略。5、幫助中心該部分與應(yīng)用下載模塊類似，為4：4：4布局，最大寬度方面分別對(duì)標(biāo)題、3組文本和視頻添加row樣式，具體代碼可以參考下載模塊內(nèi)容進(jìn)行設(shè)置，這里省略。圖1-21-7幫助中心效果圖任務(wù)實(shí)施6、聯(lián)系我們?cè)撃K為左右結(jié)構(gòu)，與“特征模塊”類似，在平板端為6：6布局。為了右邊的表單短一些，在電腦端可以采用8：4的比例進(jìn)行布局。圖1-21-8聯(lián)系我們效果圖任務(wù)實(shí)施7、測(cè)試完成所有布局后，我們需要對(duì)響應(yīng)式效果進(jìn)行測(cè)試。以火狐瀏覽器為例，我們可以依次單擊設(shè)置菜單中的“WEB開(kāi)發(fā)者”->”響應(yīng)式設(shè)計(jì)模式”，打開(kāi)響應(yīng)式設(shè)計(jì)模式視圖。也可以直接單擊右鍵“檢查元素”或按快捷鍵“F12”，打開(kāi)調(diào)試窗口，再單擊“響應(yīng)式設(shè)計(jì)模式”按鈕打開(kāi)響應(yīng)式設(shè)計(jì)模式視圖。如圖1-21-9所示：我們選擇設(shè)備型號(hào)為手機(jī)了設(shè)備時(shí)，會(huì)發(fā)現(xiàn)在前面使用了柵格布局的都會(huì)出現(xiàn)元素“偏移”的情況，如圖1-21-10所示：圖1-21-9響應(yīng)式設(shè)計(jì)模式視圖圖1-21-10移動(dòng)端網(wǎng)頁(yè)元素偏移部分柵格布局的子模塊由于文字?jǐn)?shù)量的不相等，會(huì)在特定頁(yè)面寬度下造成子模塊高度不一致，導(dǎo)致排版錯(cuò)位。任務(wù)拓展

重布局頁(yè)面實(shí)現(xiàn)響應(yīng)式效果能夠在學(xué)習(xí)的Web內(nèi)容無(wú)障礙指南（WCAG）知識(shí)和可訪問(wèn)的互聯(lián)網(wǎng)應(yīng)用（ARIA）基礎(chǔ)上，對(duì)D清單頁(yè)面進(jìn)行無(wú)障礙改造；能夠根據(jù)網(wǎng)可訪問(wèn)的互聯(lián)網(wǎng)應(yīng)用（ARIA）提示的網(wǎng)頁(yè)輔助瀏覽方法，對(duì)D清單頁(yè)面進(jìn)行無(wú)障礙測(cè)試。任務(wù)目標(biāo)

對(duì)頁(yè)面進(jìn)行無(wú)障礙改造本次任務(wù)要求學(xué)習(xí)Web內(nèi)容無(wú)障礙指南（WCAG）知識(shí)，對(duì)頁(yè)面進(jìn)行無(wú)障礙改造并測(cè)試。任務(wù)描述

對(duì)頁(yè)面進(jìn)行無(wú)障礙改造完成對(duì)頁(yè)面進(jìn)行無(wú)障礙改造，并對(duì)改造后的頁(yè)面進(jìn)行測(cè)試，需要：學(xué)習(xí)WCAG2.0/2.1知識(shí)；學(xué)習(xí)可訪問(wèn)的互聯(lián)網(wǎng)應(yīng)用（ARIA）及其最佳實(shí)踐方法；對(duì)D清單進(jìn)行無(wú)障礙改造，并模擬障礙人士進(jìn)行無(wú)障礙頁(yè)面測(cè)試。任務(wù)分析

對(duì)頁(yè)面進(jìn)行無(wú)障礙改造知識(shí)與技能準(zhǔn)備Web內(nèi)容可訪問(wèn)性指南（WCAG）2.1定義了如何使殘障人士更容易訪問(wèn)Web內(nèi)容。無(wú)障礙獲取涉及廣泛的殘疾，包括視覺(jué)，聽(tīng)覺(jué)，身體，言語(yǔ)，認(rèn)知，語(yǔ)言，學(xué)習(xí)和神經(jīng)障礙。盡管這些準(zhǔn)則涵蓋了廣泛的問(wèn)題，但它們無(wú)法滿足所有類型，程度和殘障人士的需求。這些準(zhǔn)則還使年齡較大的人更容易使用Web內(nèi)容，但隨著年齡的增長(zhǎng)其能力會(huì)發(fā)生變化，并且通常會(huì)提高用戶的可用性。WCAG2.1是通過(guò)W3C流程與世界各地的個(gè)人和組織合作開(kāi)發(fā)的，目的是為Web內(nèi)容可訪問(wèn)性提供共享的標(biāo)準(zhǔn)，以滿足國(guó)際上個(gè)人，組織和政府的需求。WCAG2.1建立在WCAG2.0[WCAG20]的基礎(chǔ)上，而WCAG2.0[WCAG20]又建立在WCAG1.0[WAI-WEBCONTENT]的基礎(chǔ)上，旨在現(xiàn)在和將來(lái)廣泛應(yīng)用于不同的Web技術(shù)，并且可以結(jié)合自動(dòng)化測(cè)試和人工測(cè)試評(píng)價(jià)。有關(guān)WCAG的介紹，請(qǐng)參閱《Web內(nèi)容可訪問(wèn)性指南（WCAG）概述》。1、WCAG知識(shí)與技能準(zhǔn)備ARIA是“AccessibleRichInternetApplications”的縮寫(xiě)。它是W3C的Web無(wú)障礙推進(jìn)組織(WebAccessibilityInitiative/WAI)在2014年3月20日發(fā)布的可訪問(wèn)富互聯(lián)網(wǎng)應(yīng)用實(shí)現(xiàn)指南，是一個(gè)為殘疾人士等提供無(wú)障礙訪問(wèn)動(dòng)態(tài)、可交互Web內(nèi)容的技術(shù)規(guī)范，是對(duì)Web內(nèi)容無(wú)障礙指南（WCAG）的有效補(bǔ)充，是具體的技術(shù)指標(biāo)。ARIA提供了語(yǔ)義，因此作者可以將用戶界面行為和結(jié)構(gòu)信息傳達(dá)給輔助技術(shù)（例如屏幕閱讀器）。ARIA規(guī)范提供了定義可訪問(wèn)用戶界面元素的角色，狀態(tài)和屬性的本體。ARIA套件包括提供用戶代理實(shí)施指南的API映射規(guī)范。它還包括圖形和數(shù)字出版模塊。2、WAI-ARIA知識(shí)與技能準(zhǔn)備2.1ARIA使用方法應(yīng)用于HTML的ARIA包括“role”（角色）和帶“aria-”前綴的屬性。role標(biāo)識(shí)了一個(gè)元素的作用，aria-屬性描述了與之有關(guān)的事物特征及其是什么樣的狀態(tài)。2.2ARIA的角色定義“role”下表列出了HTML元素中常用的ARIA角色role。2、WAI-ARIA知識(shí)與技能準(zhǔn)備2、WAI-ARIA表1-22-1role角色定義知識(shí)與技能準(zhǔn)備在使用時(shí)，只需在HTML代碼中加入role即可定義HTML的角色。表1-22-1中并沒(méi)用列出所用的ARIA角色，表1-22-2列出了常用標(biāo)簽元素對(duì)應(yīng)的ARIA的role。當(dāng)然，并不是使用的HTML元素都具有對(duì)應(yīng)的ARIA的role。在不同的情況下HTML的ARIA角色也是不一樣的，如a標(biāo)簽不帶href屬性就不具有l(wèi)ink角色，當(dāng)a標(biāo)簽父元素是一個(gè)菜單時(shí)，其角色為menuitem；又如input表單標(biāo)簽，其角色取決于其type屬性，type屬性設(shè)置為checkbox，這角色為checkbox，如果其父元素是一個(gè)菜單時(shí)則為menuitemcheckbox；屬性為button、image、reset、submit，角色為button，屬性為text，角色為textbox。2、WAI-ARIA12345<!--定義一個(gè)彈出框--><divclass=”modal”role=”dialog”><h1>彈出框標(biāo)題</h1><p>彈出框的內(nèi)容</p></div>知識(shí)與技能準(zhǔn)備2.3ARIA的屬性和狀態(tài)“aria-”表1-22-3ARIA屬性值示意及說(shuō)明表限于篇幅，需要了解更多ARIA的屬性值，可通過(guò)

頁(yè)面查看。在使用時(shí)，只需根據(jù)需求在HTML代碼中加入aria-屬性即可。知識(shí)與技能準(zhǔn)備2.3ARIA的屬性和狀態(tài)“aria-”示例1：（在示例1中，工具欄的第一個(gè)控件（id為button1）是能夠獲取焦點(diǎn)的控件。）12345<divrole="toolbar"tabindex="0"aria-activedescendant="button1"><imgsrc="btncut.png"id="button1"role="button"alt="cut"/><imgsrc="btncopy.png"id="button2"role="button"alt="copy"/><imgsrc="btnpaste.png"id="button3"role="button"alt="paste"/></div>示例2：（在示例2中，aria-用在progressbar組件上，對(duì)應(yīng)HTML5中的min。）12<divclass="progress-bar"role="progressbar"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"></div>示例3：（在示例3中，表示按鈕已經(jīng)按下，同時(shí)處于禁用狀態(tài)。。）1<divrole="button"tabindex="0"aria-pressed="false"aria-disabled="false"></div>知識(shí)與技能準(zhǔn)備2.3ARIA的屬性和狀態(tài)“aria-”表1-22-4ARIA狀態(tài)值示意及說(shuō)明表知識(shí)與技能準(zhǔn)備開(kāi)發(fā)一個(gè)可訪問(wèn)的Web應(yīng)用不僅需要工具的支持，瀏覽器的支持，還需要開(kāi)發(fā)人員遵循一定的規(guī)范提供對(duì)應(yīng)的元素信息，才能達(dá)到最終的目的。下面著重介紹一些開(kāi)發(fā)中的最佳實(shí)踐。3.1image圖片或者動(dòng)畫(huà)均需提供alt信息，使得讀屏軟件可以將圖片動(dòng)畫(huà)的內(nèi)容清楚的讀出來(lái)。對(duì)于某些用于裝飾性的圖片，則需設(shè)置alt為空，使得讀屏軟件可以忽略此元素。對(duì)于放在鏈接里面的圖片，如果已經(jīng)有文字的說(shuō)明，alt也設(shè)置為空，這樣避免讀屏軟件重復(fù)同樣的內(nèi)容。CSS將樣式跟結(jié)構(gòu)分離，使得HTML代碼結(jié)構(gòu)清晰。很多裝飾性的圖片也都放在CSS里面來(lái)加載，帶來(lái)的一個(gè)問(wèn)題就是在CSS里面的圖片在高對(duì)比度模式下都無(wú)法顯示。如果這個(gè)圖片并不僅僅是裝飾性的，還可以觸發(fā)功能，那就需要從CSS里面拿出來(lái)，當(dāng)成一個(gè)獨(dú)立的img或者input元素。3、開(kāi)發(fā)最佳實(shí)踐知識(shí)與技能準(zhǔn)備3.2tableTable分為兩類：一類是做布局的table，一類是數(shù)據(jù)table。對(duì)于布局用的table，讀屏軟件沒(méi)必要知道這是一個(gè)表，可以通過(guò)設(shè)置role=presentation使讀屏軟件忽略這個(gè)表，只關(guān)注里面的內(nèi)容。對(duì)于數(shù)據(jù)表格，則需要設(shè)置caption屬性，說(shuō)明整個(gè)表是用來(lái)做什么的，使得讀屏軟件可以告訴用戶這個(gè)表的作用。對(duì)于每一個(gè)單元內(nèi)的數(shù)據(jù)，還應(yīng)該通過(guò)th屬性使得讀屏軟件能識(shí)別這個(gè)數(shù)據(jù)的表頭是什么。對(duì)于復(fù)雜表，可以通過(guò)id和header屬性來(lái)標(biāo)識(shí)。如圖所示：3、開(kāi)發(fā)最佳實(shí)踐知識(shí)與技能準(zhǔn)備以第一行的數(shù)字5為例，正常人可以很容易得看出5指的是一年級(jí)Mr.Henry老師這個(gè)班的男生有5個(gè)，但當(dāng)讀屏軟件面對(duì)這個(gè)數(shù)字5的時(shí)候，怎么能識(shí)別出來(lái)呢？通過(guò)header來(lái)標(biāo)識(shí)表頭，header的值就指向?qū)?yīng)表頭的id。3.3formform元素需要關(guān)聯(lián)一個(gè)label元素，所有的button都已經(jīng)有了一個(gè)隱含的label，所以不再需要顯示關(guān)聯(lián)。對(duì)于input，select，checkbox，radio，button則都需要顯示一個(gè)label元素。這樣讀屏軟件在面對(duì)這個(gè)表單元素的時(shí)候才能告訴用戶這個(gè)表單的作用。例如下面的input，讀屏軟件會(huì)告訴用戶這個(gè)是需要輸入名字的一個(gè)輸入框。當(dāng)label屬性不方便使用的時(shí)候，還可以通過(guò)title屬性達(dá)到相同的效果，也可以滿足Webking檢查的需要。下面的兩種寫(xiě)法都可以。但前提是name不需要被顯示出來(lái)。當(dāng)title和label都設(shè)置的時(shí)候title會(huì)被讀屏軟件忽略。3、開(kāi)發(fā)最佳實(shí)踐知識(shí)與技能準(zhǔn)備當(dāng)一個(gè)表單元素如果前后都需要描述的時(shí)候，label就顯得力不從心了。ARIA規(guī)范的出現(xiàn)解決了這一問(wèn)題。aria-labelledby屬性可以設(shè)置多個(gè)值，說(shuō)明這個(gè)表單元素是被那些值所描述的,aria-describedby屬性則更詳細(xì)的擴(kuò)展了這個(gè)描述。當(dāng)讀屏軟件把焦點(diǎn)放在10上的時(shí)候，會(huì)告訴用戶10表示的是10分鐘刷新一次。對(duì)應(yīng)的HTML代碼如下所示。aria-required的屬性標(biāo)識(shí)這個(gè)元素是必須的，JAWS識(shí)別此元素并告知用戶必須輸入此元素。我們可以看到中間的input元素被多個(gè)元素來(lái)描述（aria-labelledby中的幾個(gè)id值），這樣讀屏軟件就能夠識(shí)別這個(gè)標(biāo)簽，并且按照這個(gè)標(biāo)簽的順序讀出前后的label，并且提示用戶如果還有更詳細(xì)的描述以及如何獲取這個(gè)更詳細(xì)的描述。當(dāng)用戶需要時(shí)，aria-describedby所對(duì)應(yīng)的元素信息就會(huì)被讀出來(lái)。增強(qiáng)了視力有障礙人士與普通人了解內(nèi)容的一致性。3、開(kāi)發(fā)最佳實(shí)踐知識(shí)與技能準(zhǔn)備3.4關(guān)于Tabindex與獲取焦點(diǎn)的順序Tabindex屬性的使用可以使得原本無(wú)法取得焦點(diǎn)的元素獲取焦點(diǎn)。目的是為了使用戶可以用鍵盤(pán)訪問(wèn)任何可以用鼠標(biāo)訪問(wèn)的元素。我們知道，使用Tab鍵可以按文檔順序tab到所有可以獲取焦點(diǎn)的元素。tabindex可以設(shè)置為-1，0或者是任何自然數(shù)。tabindex=0就使原本無(wú)法獲取焦點(diǎn)的元素可以在用戶tab的時(shí)候獲取焦點(diǎn)，并且按照文檔順序排列。tabindex=-1使得元素可以獲取焦點(diǎn)，但當(dāng)用戶用tab鍵訪問(wèn)的時(shí)候并不出現(xiàn)在tab的列表里面。可以方便的通過(guò)Javascript設(shè)置上下左右鍵的響應(yīng)事件。非常有利于應(yīng)用小部件（widget）內(nèi)部的鍵盤(pán)訪問(wèn)。tabindex設(shè)置為大于0的數(shù)字則可以控制用戶Tab時(shí)候的順序，一般很少用。當(dāng)用戶使用Tab鍵瀏覽頁(yè)面時(shí)，元素獲取焦點(diǎn)的順序是按照HTML代碼里面元素出現(xiàn)的順序排列的，有時(shí)跟實(shí)際看到的頁(yè)面順序并不一致。3、開(kāi)發(fā)最佳實(shí)踐知識(shí)與技能準(zhǔn)備3.5Label3.6AlertDialog3.7headings3.8list/listitem3.9button3.10togglebutton3.11checkbox3.12radio3.13link限于篇幅限制，以上實(shí)現(xiàn)方法代碼詳見(jiàn)書(shū)本，其它實(shí)現(xiàn)方法就不在介紹，如果感興趣，可以查看

或

了解。3、開(kāi)發(fā)最佳實(shí)踐知識(shí)與技能準(zhǔn)備信息無(wú)障礙網(wǎng)頁(yè)的測(cè)試主要是模擬相關(guān)人群去測(cè)試頁(yè)面。相關(guān)人群使用的無(wú)障礙輔助技術(shù)（硬件或軟件）主要是：依靠用戶代理提供的服務(wù)來(lái)檢索和呈現(xiàn)Web內(nèi)容。通過(guò)使用API??與用戶代理或Web內(nèi)容本身協(xié)同工作。提供超出用戶代理提供的服務(wù)，以方便用戶與殘疾人的網(wǎng)頁(yè)內(nèi)容交互。該定義可能與其他文檔中使用的定義不同。如：屏幕放大鏡，用于放大和提高渲染文本和圖像的視覺(jué)可讀性；屏幕閱讀器，最常用于通過(guò)合成語(yǔ)音或可刷新盲文顯示來(lái)傳達(dá)信息；文本到語(yǔ)音軟件，用于將文本轉(zhuǎn)換為合成語(yǔ)音；語(yǔ)音識(shí)別軟件，用于允許口語(yǔ)控制和口授；用于模擬鍵盤(pán)的備用輸入技術(shù)（包括頭指針，屏幕鍵盤(pán)，單開(kāi)關(guān)和sip/puff設(shè)備）；備用指點(diǎn)設(shè)備，用于模擬鼠標(biāo)指向和點(diǎn)擊。4、信息無(wú)障礙網(wǎng)頁(yè)的測(cè)試任務(wù)實(shí)施1、角色說(shuō)明按鈕是使用<a>標(biāo)簽制作的，使用應(yīng)該對(duì)其角色進(jìn)行說(shuō)明。2、圖片描述對(duì)應(yīng)裝飾性圖片，我們要讓img的alt屬性為空，但是對(duì)應(yīng)非裝飾性圖片，這需使用alt屬性對(duì)圖片進(jìn)行說(shuō)明。3、表單在項(xiàng)目中因?yàn)槲覀儼凑諛?biāo)準(zhǔn)的input標(biāo)簽及屬性來(lái)制作表單和按鈕，所以可以不需要添加role角色。由于我們?cè)陧?yè)面制作時(shí)遵循了HTML5標(biāo)準(zhǔn)，很少使用非語(yǔ)義化標(biāo)簽來(lái)設(shè)置相關(guān)內(nèi)容，且頁(yè)面交互相對(duì)簡(jiǎn)單，所以需要修改的并不多。能描述各個(gè)瀏覽器對(duì)HTML5及CSS3的兼容情況；能根據(jù)瀏覽器兼容性情況使用CSS3前綴解決兼容性問(wèn)題；能夠使用W3C提供的驗(yàn)證工具對(duì)D清單頁(yè)面進(jìn)行驗(yàn)證，并能根據(jù)驗(yàn)證結(jié)果修改不符合W3C規(guī)范的代碼。任務(wù)目標(biāo)測(cè)試及兼容性設(shè)置1、完善上一任務(wù)的D清單網(wǎng)頁(yè)，讓該網(wǎng)頁(yè)的兼容性更強(qiáng)。2、使用W3C對(duì)D清單頁(yè)面HTML和CSS代碼進(jìn)行驗(yàn)證，確認(rèn)是否符合W3C標(biāo)準(zhǔn)。W3CCSS驗(yàn)證測(cè)試頁(yè)面如圖1-23所示。任務(wù)描述圖1-23W3CHTML和CSS驗(yàn)證測(cè)試頁(yè)面測(cè)試及兼容性設(shè)置完成對(duì)D清單頁(yè)面進(jìn)行兼容性測(cè)試和W3C驗(yàn)證測(cè)試，需要：學(xué)習(xí)常見(jiàn)的瀏覽器及其對(duì)H5的兼容性；學(xué)習(xí)并為D清單頁(yè)面添加CSS3瀏覽器前綴；對(duì)D清單頁(yè)面代碼進(jìn)行W3C認(rèn)證測(cè)試。任務(wù)分析測(cè)試及兼容性設(shè)置知識(shí)與技能準(zhǔn)備目前，支持CSS3和HTML5的瀏覽器變得越來(lái)越多，包括最新版的MicrosoftEdge瀏覽器。但是，由于CSS3和HTML5的W3C規(guī)范在不斷的完善，瀏覽器的兼容性也在不斷的更新。目