第十一章第十一章

第11章HTML5和彈性布局網(wǎng)頁(yè)設(shè)計(jì)與制作DreamweaverCC標(biāo)準(zhǔn)教程1．HTML5概述2．HTML5結(jié)構(gòu)元素3．彈性盒子布局4．媒體查詢應(yīng)用本章學(xué)習(xí)主要內(nèi)容：HTML5是在HTML4.01規(guī)范的基礎(chǔ)上，建立起來的一個(gè)全新HTML標(biāo)準(zhǔn)規(guī)范，得到了各主流瀏覽器廠商的廣泛認(rèn)可和支持。11.1HTML5概述11.1.1HTML5簡(jiǎn)介11.1.2HTML5特性11.1HTML5概述在HTML5標(biāo)準(zhǔn)規(guī)范中，對(duì)視頻、音頻、圖像、動(dòng)畫以及與計(jì)算機(jī)等終端設(shè)備的交互進(jìn)行了標(biāo)準(zhǔn)化，引入新標(biāo)簽元素和屬性，以適應(yīng)互聯(lián)網(wǎng)應(yīng)用的迅速發(fā)展，為桌面和移動(dòng)平臺(tái)提供無縫銜接的豐富內(nèi)容。11.1.1HTML5簡(jiǎn)介解決了跨瀏覽器問題新增了多個(gè)新特性設(shè)計(jì)安全機(jī)制表現(xiàn)和內(nèi)容進(jìn)一步分離簡(jiǎn)化HTML描述語(yǔ)言11.1.2HTML5特性11.2.1HTML5結(jié)構(gòu)標(biāo)簽11.2.2課堂案例——在線課程11.2HTML5布局<article>標(biāo)簽<header>標(biāo)簽<nav>標(biāo)簽<section>標(biāo)簽<aside>標(biāo)簽<footer>標(biāo)簽11.2.1HTML5結(jié)構(gòu)標(biāo)簽案例學(xué)習(xí)目標(biāo)：學(xué)習(xí)掌握HTML5結(jié)構(gòu)標(biāo)簽的使用。案例知識(shí)要點(diǎn)：<article>標(biāo)簽、<header>標(biāo)簽、<nav>標(biāo)簽、<section>標(biāo)簽、<aside>標(biāo)簽和<footer>標(biāo)簽等在文字頁(yè)面結(jié)構(gòu)中的作用。素材所在位置：案例素材/ch11/課堂案例-在線課程。案例布局要求如圖11-1所示，案例效果如圖11-2所示。11.2.2課堂案例——在線課程11.3.1彈性盒子概念11.3.2彈性容器屬性11.3.3彈性容器項(xiàng)目屬性11.3.4課堂案例-尚品家居11.3彈性盒子布局彈性盒子是實(shí)現(xiàn)“彈性布局"的基礎(chǔ)，彈性盒子模型如11-35所示。彈性盒子是具有彈性布局屬性的元素，也可稱為”彈性容器“，所有嵌入到“彈性容器”內(nèi)的元素稱為容器成員，簡(jiǎn)稱"項(xiàng)目"。11.3.1彈性盒子概念彈性容器可以通過flex-direction，flex-wrap，justify-content，align-item等屬性，設(shè)置項(xiàng)目的排列方式。11.3.2彈性容器屬性彈性盒子中的項(xiàng)目可以通過flex-grow和flex-shrink屬性控制自身縮放比例，以適應(yīng)彈性盒子的大小變化，最終適應(yīng)瀏覽器窗口大小的變化。11.3.3彈性容器項(xiàng)目屬性案例學(xué)習(xí)目標(biāo)：學(xué)習(xí)應(yīng)用彈性布局的方法。案例知識(shí)要點(diǎn)：設(shè)置彈性盒子相關(guān)屬性的方法，以及彈性盒子內(nèi)各項(xiàng)目的顯示方式。素材所在位置：案例素材/ch11/課堂案例-尚品家居。案例布局效果如圖11-52所示，案例效果如圖11-53所示。11.3.4課堂案例-尚品家居11.4.1媒體查詢11.4.2課堂案例-健康大步走11.4媒體查詢應(yīng)用媒體查詢介紹媒體查詢是一種條件語(yǔ)句，可用來確定將不同的CSS樣式應(yīng)用到Web頁(yè)面，因此彈性布局和媒體查詢的結(jié)合使用，可以實(shí)現(xiàn)一個(gè)能適應(yīng)移動(dòng)、平板和桌面環(huán)境的響應(yīng)式頁(yè)面設(shè)計(jì)。媒體查詢的使用媒體查詢格式：@media媒體類型and（媒體特征）{樣式代碼}媒體查詢通過不同的媒體類型和媒體特征的定義調(diào)用特定的樣式表規(guī)則。

媒體查詢讓CSS可以更精確作用于不同的媒體類型和同一媒體的不同特

征條件。11.4.1媒體查詢案例學(xué)習(xí)目標(biāo)：學(xué)習(xí)應(yīng)用媒體查詢的方法。案例知識(shí)要點(diǎn)：設(shè)置媒體查詢條件的方法以及將不同CSS樣式應(yīng)用到不同的Web頁(yè)面。素材所在位置：案例素材/ch11/課堂案例-健康大步走。案例布局要求如圖11-85所示，11-86所示，案例效果如圖

11-87所示，11-88所示。11.4.2課堂案例-健康大步走11.5.1練習(xí)案例——優(yōu)勝企業(yè)網(wǎng)站12.3.2練習(xí)案例-恒生國(guó)際老年公寓11.5.2練習(xí)案例——雅派服飾11.5練習(xí)案例案例練習(xí)目標(biāo)：練習(xí)HTML5結(jié)構(gòu)元素的使用。案例操作要點(diǎn)：1．創(chuàng)建名稱為index.html的網(wǎng)頁(yè)文檔并存于站點(diǎn)根文件夾中。2．將外部樣式表文件mystyle.css鏈接到網(wǎng)頁(yè)中。3．根據(jù)案例布局要求，使用HTML5結(jié)構(gòu)標(biāo)簽<header>、

<article>、<section>、<aside>和<footer>以及預(yù)設(shè)樣式

body、#container、.n1、.n1a:link、.n1a:hover、.h、.s1、

.a1、.as1和.f1，完成網(wǎng)頁(yè)制作。11.5.1練習(xí)案例——優(yōu)勝企業(yè)網(wǎng)站案例練習(xí)目標(biāo)：練習(xí)彈性布局的設(shè)置。案例操作要點(diǎn)如下。1．創(chuàng)建名稱為index.html的網(wǎng)頁(yè)文檔并存于站點(diǎn)根文件夾中。2．將外部樣式表文件mystyle.css鏈接到網(wǎng)頁(yè)中。3．根據(jù)案例布局要求，應(yīng)用預(yù)設(shè)樣式body、#container、#logo、#nav、#nava:link、#nava:hover、#banner、.mainbox-1和#footer，定義#header、#mainbox、img和*樣式，插入<div>標(biāo)簽。4、設(shè)置#header樣式屬性，寬度為100%，高度為40px，背景顏色為#cccccc；

設(shè)置display屬性為flex，justify-content屬性為space-between。5、設(shè)置#mainbox樣式屬性，寬度為100%，左右外邊距為自動(dòng)