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

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