網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目式教程（HTML+CSS）課件06.制作“著名詩(shī)人”模塊

網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目式教程（HTML+CSS）功能模塊類網(wǎng)站開(kāi)發(fā)項(xiàng)目——“古詩(shī)詞”網(wǎng)站頁(yè)面模塊的實(shí)現(xiàn)“古詩(shī)詞”網(wǎng)站頁(yè)面模塊的實(shí)現(xiàn)我國(guó)傳統(tǒng)文化博大精深、源遠(yuǎn)流長(zhǎng)，蘊(yùn)含著極其豐富而寶貴的精神財(cái)富，傳承和弘揚(yáng)中華優(yōu)秀傳統(tǒng)文化一直是教育領(lǐng)域的熱點(diǎn)。最近，學(xué)校國(guó)風(fēng)社團(tuán)負(fù)責(zé)人阿文找到小丁，希望他能夠幫忙制作一個(gè)“古詩(shī)詞”網(wǎng)站，提高同學(xué)們對(duì)傳統(tǒng)文化的學(xué)習(xí)興趣。小丁充分了解了社團(tuán)的需求，分析了網(wǎng)站需要的功能模塊，他和團(tuán)隊(duì)的小伙伴將在工作室老師和企業(yè)專家的指導(dǎo)下學(xué)習(xí)制作該網(wǎng)站的功能模塊。情景導(dǎo)入任務(wù)3.1創(chuàng)建“古詩(shī)詞”網(wǎng)站項(xiàng)目項(xiàng)目實(shí)施任務(wù)分析小丁分配到的任務(wù)是制作“古詩(shī)詞”網(wǎng)站中的“著名詩(shī)人”“詩(shī)詞推薦”“詩(shī)文釋義”“詩(shī)人簡(jiǎn)歷”模塊。在制作之前，小丁需要做一些準(zhǔn)備工作，根據(jù)網(wǎng)站開(kāi)發(fā)需求以及UI設(shè)計(jì)師提供的素材，創(chuàng)建網(wǎng)站項(xiàng)目，項(xiàng)目信息如表3-1所?示。表3-1項(xiàng)目信息項(xiàng)目名稱古詩(shī)詞網(wǎng)站模塊“著名詩(shī)人”模塊（poet.html）、“詩(shī)詞推薦”模塊（commend.html）、“詩(shī)文釋義”模塊（translate.html）、“詩(shī)人簡(jiǎn)歷”模塊（introduce.html）資源目錄樣式表目錄（css）、圖片目錄（img）項(xiàng)目實(shí)施操作實(shí)施1.新建網(wǎng)站項(xiàng)目在開(kāi)發(fā)軟件HBuilderX中新建“古詩(shī)詞”網(wǎng)站項(xiàng)目，具體步驟如下：（1）打開(kāi)開(kāi)發(fā)軟件HBuilderX，選擇“文件”菜單中的“新建”→“項(xiàng)目”命令。任務(wù)3.1創(chuàng)建“古詩(shī)詞”網(wǎng)站項(xiàng)目項(xiàng)目實(shí)施操作實(shí)施1.新建網(wǎng)站項(xiàng)目（2）在“選擇模板”區(qū)域中選擇“基本HTML項(xiàng)目”，填寫項(xiàng)目名稱“古詩(shī)詞”，設(shè)置存儲(chǔ)位置。任務(wù)3.1創(chuàng)建“古詩(shī)詞”網(wǎng)站項(xiàng)目項(xiàng)目實(shí)施操作實(shí)施2.網(wǎng)站資源管理根據(jù)網(wǎng)站資源需求新建目錄和文件，基于模板基礎(chǔ)，在“古詩(shī)詞”根目錄上右擊，選擇“新建”→“目錄”和“新建”→“html文件”命令，建立commend.html、introduce.html、poet.html、translate.html文件。注意：要將素材文件夾中的圖片文件復(fù)制到img文件夾?內(nèi)。任務(wù)3.1創(chuàng)建“古詩(shī)詞”網(wǎng)站項(xiàng)目任務(wù)3.2制作“著名詩(shī)人”模塊項(xiàng)目實(shí)施任務(wù)分析““著名詩(shī)人”模塊效果圖項(xiàng)目實(shí)施任務(wù)分析分析頁(yè)面的框架結(jié)構(gòu)，其框架結(jié)構(gòu)圖及主要設(shè)置如下：任務(wù)3.2制作“著名詩(shī)人”模塊知識(shí)儲(chǔ)備知識(shí)導(dǎo)圖根據(jù)任務(wù)分析，在之前掌握知識(shí)的基礎(chǔ)上，完成本任務(wù)還需要學(xué)習(xí)的主要知識(shí)點(diǎn)有CSS選擇器基礎(chǔ)、盒子模型基礎(chǔ)和浮動(dòng)布局，知識(shí)導(dǎo)圖如圖所示。任務(wù)3.2制作“著名詩(shī)人”模塊知識(shí)儲(chǔ)備新知學(xué)習(xí)1：CSS選擇器基礎(chǔ)CSS選擇器是用于選擇應(yīng)用樣式的HTML元素的一種模式，通過(guò)CSS選擇器，我們可以對(duì)頁(yè)面中的元素進(jìn)行樣式設(shè)置。CSS選擇器主要分為以下幾類：基本選擇器、屬性選擇器、偽類選擇器、組合選擇器和偽元素選擇器。這里將介紹基本選擇器中的標(biāo)簽選擇器、類選擇器、id選擇器和群組選擇?器。任務(wù)3.2制作“著名詩(shī)人”模塊知識(shí)儲(chǔ)備標(biāo)簽選擇器是最簡(jiǎn)單的選擇器，選擇器通常是某個(gè)HTML元素，如p元素、td元素等，甚至可以是HTML本?身。語(yǔ)法：標(biāo)簽名{屬性1:屬性值1；屬性2:屬性值2；屬性3:屬性值3；……}舉例：任務(wù)3.2制作“著名詩(shī)人”模塊新知學(xué)習(xí)1：CSS選擇器基礎(chǔ)知識(shí)儲(chǔ)備類選擇器可以為指定class的HTML元素設(shè)置樣?式。在HTML元素中，class屬性的值不具有唯一性，可以使用class屬性為一個(gè)或多個(gè)元素添加相同的樣式。語(yǔ)法：類名{屬性1:屬性值1；屬性2:屬性值2；屬性3:屬性值3；……}舉例：任務(wù)3.2制作“著名詩(shī)人”模塊新知學(xué)習(xí)1：CSS選擇器基礎(chǔ)知識(shí)儲(chǔ)備id選擇器通過(guò)HTML元素的id屬性來(lái)選取元素。每個(gè)HTML元素只能有一個(gè)id屬性，且該屬性的值在整個(gè)文檔中必須是唯一?的。語(yǔ)法：id名{屬性1:屬性值1；屬性2:屬性值2；屬性3:屬性值3；……}舉例：任務(wù)3.2制作“著名詩(shī)人”模塊新知學(xué)習(xí)1：CSS選擇器基礎(chǔ)知識(shí)儲(chǔ)備群組選擇器是由逗號(hào)分隔的選擇器列表，是一種將多個(gè)選擇器組合在一起，應(yīng)用相同樣式的選擇器。我們可以在群組選擇器中同時(shí)包含類選擇器、id選擇器、元素選擇器等，用逗號(hào)分開(kāi)，從而選擇多個(gè)元素同時(shí)應(yīng)用相同的樣?式。例如<h1>、<h2>和<p>標(biāo)簽均應(yīng)用了相同的字體和顏色樣式，可以使用以下代碼：任務(wù)3.2制作“著名詩(shī)人”模塊新知學(xué)習(xí)1：CSS選擇器基礎(chǔ)知識(shí)儲(chǔ)備新知學(xué)習(xí)2：盒子模型基礎(chǔ)盒子模型是CSS布局的基礎(chǔ)，它描述了HTML元素在頁(yè)面上的顯示方式。了解盒子模型有助于我們更好地掌握CSS布局技?巧。1．盒子模型的概念盒子模型是一個(gè)矩形的容器，用于存放HTML元素。每個(gè)HTML元素都可以看作一個(gè)盒子，而這個(gè)盒子由4個(gè)部分組成：內(nèi)容區(qū)、內(nèi)邊距、邊框和外邊距。任務(wù)3.2制作“著名詩(shī)人”模塊知識(shí)儲(chǔ)備（1）內(nèi)容區(qū)（content）。內(nèi)容區(qū)是盒子中承載HTML元素內(nèi)容的矩形區(qū)域。（2）內(nèi)邊距（padding）。內(nèi)邊距是盒子與邊框之間的空白區(qū)域。（3）邊框（border）。邊框是盒子的4條線，用于分隔內(nèi)容區(qū)和內(nèi)邊距。（4）外邊距（margin）。外邊距是盒子與盒子之間的空白區(qū)域。任務(wù)3.2制作“著名詩(shī)人”模塊新知學(xué)習(xí)2：盒子模型基礎(chǔ)知識(shí)儲(chǔ)備（1）content常用屬性。元素中所有的子元素和文本內(nèi)容都排列在內(nèi)容區(qū)中，可以使用width和height屬性來(lái)控制內(nèi)容區(qū)大小。content常用屬性如表3-2所?示。表3-2content常用屬性任務(wù)3.2制作“著名詩(shī)人”模塊新知學(xué)習(xí)2：盒子模型基礎(chǔ)屬性描述height用于設(shè)置內(nèi)容區(qū)的高度width用于設(shè)置內(nèi)容區(qū)的寬度知識(shí)儲(chǔ)備（2）padding常用屬性。元素的內(nèi)邊距在邊框和內(nèi)容區(qū)之間，padding常用屬性如表3-3所?示。表3-3padding常用屬性任務(wù)3.2制作“著名詩(shī)人”模塊新知學(xué)習(xí)2：盒子模型基礎(chǔ)屬性描述padding-top定義元素的上內(nèi)邊距padding-right定義元素的右內(nèi)邊距padding-bottom定義元素的下內(nèi)邊距padding-left定義元素的左內(nèi)邊距Padding用一個(gè)聲明定義所有內(nèi)邊距屬性知識(shí)儲(chǔ)備（3）margin常用屬性。外邊距定義元素之間的空間，簡(jiǎn)單來(lái)說(shuō)，如果將網(wǎng)頁(yè)中的每個(gè)元素看成一個(gè)個(gè)盒子，外邊距就是盒子與盒子之間的距離。margin常用屬性如表3-4所?示。表3-4margin常用屬性任務(wù)3.2制作“著名詩(shī)人”模塊新知學(xué)習(xí)2：盒子模型基礎(chǔ)屬性描述margin-top定義元素的上外邊距margin-right定義元素的右外邊距margin-bottom定義元素的下外邊距margin-left定義元素的左外邊距margin用一個(gè)聲明定義所有外邊距屬性知識(shí)儲(chǔ)備（4）border常用屬性。邊框可以是圍繞內(nèi)容和內(nèi)邊距的一條或者多條線，對(duì)于這些線條，可以設(shè)置它們的樣式、寬度及顏色。border常用屬性如表3-5所?示。表3-5border常用屬性任務(wù)3.2制作“著名詩(shī)人”模塊新知學(xué)習(xí)2：盒子模型基礎(chǔ)知識(shí)儲(chǔ)備任務(wù)3.2制作“著名詩(shī)人”模塊新知學(xué)習(xí)2：盒子模型基礎(chǔ)表3-5border常用屬性知識(shí)儲(chǔ)備1．網(wǎng)頁(yè)文檔流的概念網(wǎng)頁(yè)文檔流是指網(wǎng)頁(yè)中所有元素的排列方式，包括文本、圖像、表格、列表等。這些元素按照一定的規(guī)則排列，以便用戶可以輕松地閱讀和理解頁(yè)面內(nèi)容。網(wǎng)頁(yè)文檔流包含標(biāo)準(zhǔn)文檔流、浮動(dòng)文檔流和定位文檔流三種，其中浮動(dòng)文檔流和定位文檔流也可以統(tǒng)稱為脫離文檔?流。任務(wù)3.2制作“著名詩(shī)人”模塊新知學(xué)習(xí)3：浮動(dòng)布局知識(shí)儲(chǔ)備2．浮動(dòng)布局的概念浮動(dòng)布局是一種基于CSS的網(wǎng)頁(yè)布局方式，常用于實(shí)現(xiàn)文本環(huán)繞圖片、對(duì)齊導(dǎo)航菜單等效果。在浮動(dòng)布局中，元素的位置由它在HTML文檔流中的位置決定，而不是由CSS樣式?jīng)Q定。這意味著，當(dāng)一個(gè)元素浮動(dòng)后，它會(huì)脫離正常的文檔流，不再占據(jù)空間，浮在其他元素之上。其他元素會(huì)圍繞在浮動(dòng)元素周圍，形成一個(gè)新的布局結(jié)?構(gòu)。浮動(dòng)布局通過(guò)設(shè)置元素的float屬性來(lái)實(shí)現(xiàn)，可設(shè)置向左或向右浮動(dòng)。任務(wù)3.2制作“著名詩(shī)人”模塊新知學(xué)習(xí)3：浮動(dòng)布局知識(shí)儲(chǔ)備3．浮動(dòng)布局的優(yōu)點(diǎn)（1）布局簡(jiǎn)單：浮動(dòng)布局可以輕松地實(shí)現(xiàn)文本環(huán)繞圖片、對(duì)齊導(dǎo)航菜單等效?果。（2）兼容性好：大多數(shù)瀏覽器都能支持浮動(dòng)布局，不需要額外的兼容性處?理。（3）靈活性高：通過(guò)調(diào)整浮動(dòng)的方向和順序，可以實(shí)現(xiàn)多種復(fù)雜的布局效?果。4．浮動(dòng)布局的缺點(diǎn)（1）高度塌陷問(wèn)題：當(dāng)兩個(gè)浮動(dòng)元素在同一行時(shí)，它們的高度會(huì)塌陷，導(dǎo)致布局混?亂。（2）清除浮動(dòng)問(wèn)題：當(dāng)頁(yè)面中有多個(gè)浮動(dòng)元素時(shí)，需要使用clear屬性來(lái)清除浮動(dòng)，否則可能會(huì)導(dǎo)致高度塌陷等問(wèn)?題。（3）不易維護(hù)：由于浮動(dòng)元素脫離了正常的文檔流，與其他元素的關(guān)系不清晰，因此需要仔細(xì)考慮浮動(dòng)元素的順序和清除浮動(dòng)問(wèn)題，否則可能會(huì)導(dǎo)致布局混?亂。任務(wù)3.2制作“著名詩(shī)人”模塊新知學(xué)習(xí)3：浮動(dòng)布局知識(shí)儲(chǔ)備5．浮動(dòng)float浮動(dòng)屬性float是CSS網(wǎng)頁(yè)布局的“利器”，我們可以通過(guò)不同的浮動(dòng)屬性值靈活地定位div元素，以達(dá)到布局網(wǎng)頁(yè)的目的,我們可以通過(guò)float屬性使元素向左或向右浮動(dòng)。語(yǔ)法：float:取值;表3-6float屬性常用值任務(wù)3.2制作“著名詩(shī)人”模塊新知學(xué)習(xí)3：浮動(dòng)布局屬性值描述left元素向左浮動(dòng)right元素向右浮動(dòng)知識(shí)儲(chǔ)備6．清除浮動(dòng)clear在CSS中，清除浮動(dòng)都是在定義浮動(dòng)的元素之后設(shè)置?的。語(yǔ)法：clear:取值;表3-7clear屬性常用值任務(wù)3.2制作“著