HTML CSS DIV網(wǎng)頁設(shè)計與布局（第3版）（微課版）-教案 第13章 網(wǎng)頁布局與設(shè)計技巧

網(wǎng)頁設(shè)計與制作授課教案學(xué)年第學(xué)期學(xué)院（部）專業(yè)（學(xué)部）課程名稱電子商務(wù)網(wǎng)頁設(shè)計與制作任課教師課內(nèi)形式理論教學(xué)□課內(nèi)實踐□理實一體習(xí)題復(fù)習(xí)□考核評價□其他活動□學(xué)習(xí)量安排課內(nèi)：課外形式調(diào)查分析小組研討□實踐任務(wù)理論探究□考核評價□匯報展示□其他活動課外：序號13授課日期月日月日月日月日授課班級課內(nèi)教學(xué)內(nèi)容：第13章網(wǎng)頁布局與設(shè)計技巧課外學(xué)習(xí)任務(wù)：（1）課前：以小組為單位，討論網(wǎng)頁布局與設(shè)計技巧相關(guān)知識，并以PPT的形式記錄下來。（2）課后：=1\*GB3①使用表格布局來設(shè)計一個網(wǎng)頁。=2\*GB3②使用CSS布局來設(shè)計一個網(wǎng)頁。=3\*GB3③使用CSS布局技巧來布局網(wǎng)頁。教學(xué)目標(biāo)：知識目標(biāo)掌握網(wǎng)頁布局。掌握CSS布局技巧。掌握CSS盒子模型。能力目標(biāo)能夠獨立實現(xiàn)網(wǎng)頁布局；能夠掌握CSS布局技巧和盒子模型。素質(zhì)目標(biāo)較強的專業(yè)知識和自學(xué)能力；豐富知識結(jié)構(gòu)，提升專業(yè)知識；掌握網(wǎng)頁布局和盒子模型的相關(guān)技術(shù)，理解并應(yīng)用專業(yè)知識。重點難點及解決方法：（1）重點：CSS布局技巧解決方法：通過知識點講解+課堂在線展示相結(jié)合的方法，教師講解CSS的布局技巧，引導(dǎo)學(xué)生積極思考，掌握相應(yīng)知識；同時通過課堂在線展示，使學(xué)生可以更直觀的了解CSS布局技巧；培養(yǎng)學(xué)生的思維能力和分析問題解決問題的能力。（2）難點：CSS盒子模型解決方法：通過代碼講解+在線演示的的方式教學(xué)，細(xì)致講解網(wǎng)頁中CSS盒子模型的概念。幫助學(xué)生掌握CSS盒子模型實現(xiàn)方法和技巧。從實用的角度幫助學(xué)生提高專業(yè)知識。課內(nèi)教學(xué)授課地點：教學(xué)媒體：微課、PPT課件、網(wǎng)頁圖片、相關(guān)教學(xué)視頻等。設(shè)備及材料：多媒體計算機、多媒體教學(xué)廣播軟件、網(wǎng)頁素材圖片、教學(xué)載體源文件等。其它資源：與本次課相關(guān)的專業(yè)技術(shù)論文電子版。學(xué)習(xí)效果評價方式：對理論知識學(xué)習(xí)效果評價：采用課堂提問、課后習(xí)題和查閱技術(shù)論文研讀筆記的方式；對技能的評價：教師對學(xué)生上交網(wǎng)頁作品按制作要求進行綜合性評價；對職業(yè)素養(yǎng)的評價：采用學(xué)生自評、小組內(nèi)評價和教師評價相結(jié)合的方式。課后小結(jié)：填表說明：1.序號，指該課程授課的順序號，應(yīng)與授課計劃一致；2.授課形式在相應(yīng)的選項打“√”。課內(nèi)教學(xué)內(nèi)容及過程時間分配方法及手段1.網(wǎng)頁布局【網(wǎng)頁大小】設(shè)計網(wǎng)頁的第一步，需要考慮網(wǎng)頁的大小。網(wǎng)頁過大，瀏覽器會出現(xiàn)滾動條，瀏覽不便；網(wǎng)頁過小，顯示內(nèi)容過少，影響美觀。1．影響網(wǎng)頁大小的因素直接影響網(wǎng)頁大小的因素是瀏覽者顯示器的分辨率。市面上主流的顯示器或顯示屏分辨率包括以下幾種。1280px×720px（HD）：也稱為720p，是高清晰度的標(biāo)準(zhǔn)分辨率，適合手機和平板電腦等小型顯示屏。1080p（1920px×1080px）：適用于大多數(shù)日常辦公和娛樂需求，24英寸及24英寸以下的屏幕常采用此分辨率。2K（2560px×1440px）：適合需要更高清晰度的用戶使用，如設(shè)計師和攝影師，27英寸及27英寸以上屏幕常采用此分辨率。4K（3840px×2160px）：適合專業(yè)設(shè)計和視頻制作領(lǐng)域使用，40英寸及40英寸以上屏幕常采用此分辨率。8K（7680px×4320px）：目前市場上最高端的顯示器分辨率，主要應(yīng)用于科研、醫(yī)療等專業(yè)領(lǐng)域。使用瀏覽器打開一個網(wǎng)頁時，除了顯示網(wǎng)頁內(nèi)容之外，還會顯示瀏覽器的框架，因此，網(wǎng)頁不能完全按照顯示器的分辨率來設(shè)計。網(wǎng)頁內(nèi)容一般會居中顯示，兩側(cè)進行留白處理，這樣在不同分辨率的屏幕中顯示的效果都會按比例縮放，不會因為分辨率改變而導(dǎo)致網(wǎng)頁內(nèi)容出現(xiàn)溢出的現(xiàn)象。2．如何設(shè)計網(wǎng)頁大小網(wǎng)頁究竟要設(shè)計多大的尺寸呢？近年來，計算機硬件的更新?lián)Q代十分迅速，幾乎所有市面上的顯示器均支持超過1440px×900px的分辨率，因此建議在設(shè)計網(wǎng)頁時可以以1920px×1080px分辨率為基礎(chǔ)來設(shè)計。在1920px×1080px分辨率的顯示器中，網(wǎng)頁中心顯示內(nèi)容建議的寬度在1200px以內(nèi)，最佳寬度范圍為1000~1200px。這樣的尺寸可以保證大部分用戶舒適地瀏覽網(wǎng)頁，同時適應(yīng)不同屏幕尺寸的需求。3．其他設(shè)計網(wǎng)頁大小的方法如果開發(fā)者精益求精，也可以設(shè)計多個網(wǎng)頁，這樣可以實現(xiàn)在瀏覽者打開網(wǎng)頁時，先使用JavaScript等腳本語言判斷用戶顯示器分辨率的大小，再跳轉(zhuǎn)到相應(yīng)的網(wǎng)頁上。例如，將同一個網(wǎng)頁按照不同的×720px時，顯示1280.html文件；當(dāng)用戶的顯示器分辨率為1920px×1080px時，顯示1920.html文件。不過，這么做，工作量很大。其實還有其他辦法讓網(wǎng)頁適應(yīng)用戶顯示器的分辨率，即需要結(jié)合腳本語言來實現(xiàn)。【網(wǎng)頁欄目劃分】確定網(wǎng)頁大小之后，就可以開始設(shè)計網(wǎng)頁的布局。網(wǎng)頁布局是用來設(shè)計在網(wǎng)頁上放什么內(nèi)容，以及這些內(nèi)容放在網(wǎng)頁的什么位置。網(wǎng)頁設(shè)計沒有什么定論可言，只要設(shè)計得漂亮，想怎么設(shè)計都行。一個設(shè)計良好的網(wǎng)站首頁（即網(wǎng)站的第一個頁面）會包含以下幾個區(qū)域。1．頁頭頁頭也稱為網(wǎng)頁的頁眉，主要作用是定義頁面的標(biāo)題。通過網(wǎng)頁的標(biāo)題，用戶可以一目了然地知道該網(wǎng)頁，甚至該網(wǎng)站的主題是什么。通常頁頭會放置網(wǎng)站的Logo（網(wǎng)站標(biāo)志）、Banner等圖片。2．BannerBanner是橫幅廣告的意思，很多網(wǎng)站首頁的上方會放置一個Banner。不過，Banner的位置不一定在頁頭上，也有可能出現(xiàn)在網(wǎng)頁的其他區(qū)域。Banner中不一定放置的都是廣告，也常放置網(wǎng)站的標(biāo)題或介紹。此外，還有一些網(wǎng)站干脆就沒有放置Banner。3．導(dǎo)航區(qū)域不是每個網(wǎng)站都會有Banner，但幾乎所有網(wǎng)站都會有導(dǎo)航區(qū)域。導(dǎo)航用于鏈接網(wǎng)站的各個欄目，通過導(dǎo)航區(qū)域也可以看出網(wǎng)站的定位是什么。導(dǎo)航區(qū)域通常是以導(dǎo)航欄的形式出現(xiàn)的，導(dǎo)航欄可以大致分為橫向?qū)Ш綑凇⒖v向?qū)Ш綑诤筒藛螌?dǎo)航欄三大類。橫向?qū)Ш綑趯谀繖M向平鋪?？v向?qū)Ш綑趯谀靠v向平鋪。菜單導(dǎo)航欄通常用于欄目比較多的情況下，尤其是欄目下又有子欄目的情況。4．內(nèi)容網(wǎng)站按照鏈接的深度，可以分為以下多級。一級頁面通常是網(wǎng)站的首頁，該頁面中的內(nèi)容比較多，如各欄目的介紹、最新動態(tài)、最近更新、重要信息等。二級頁面通常是在首頁里單擊欄目鏈接之后的頁面，該頁面中的內(nèi)容是某一個欄目下的所有內(nèi)容（往往只顯示標(biāo)題）。例如，單擊新浪網(wǎng)首頁導(dǎo)航欄中的“體育”欄目之后看到的就是二級頁面，在該頁面中看到的是所有與體育相關(guān)的新聞標(biāo)題。三級頁面通常是在二級頁面中單擊標(biāo)題后出現(xiàn)的頁面，該頁面通常顯示一些具體內(nèi)容，如某個新聞的具體內(nèi)容。注意：并不是所有的網(wǎng)站都僅有這3個級別的頁面內(nèi)容。5．頁腳頁腳通常位于網(wǎng)頁的最下方，用于放置公司信息或制作的信息、版權(quán)信息等。有時頁腳也會放置一些常用的網(wǎng)站導(dǎo)航信息。圖13.1所示為一個網(wǎng)頁效果。導(dǎo)航區(qū)域網(wǎng)站LogoBanner網(wǎng)站內(nèi)容導(dǎo)航區(qū)域網(wǎng)站LogoBanner網(wǎng)站內(nèi)容圖13.1一個網(wǎng)頁效果【表格布局】在CSS出現(xiàn)之前，網(wǎng)頁都使用表格來布局。在使用表格布局時，利用表格的無邊框和間距的特性（將表格的邊框與單元格間距都設(shè)置為0）將網(wǎng)頁元素按版面需要劃分之后，再插入表格的各個單元格中即可?！臼纠?3-1】根據(jù)圖13.2所示的欄目劃分方式，將網(wǎng)頁不同的部分組成一個完整的網(wǎng)頁?！綜SS布局】使用表格布局，會大量用到表格的嵌套，并且會在表格中加入大量的如width、border、cellspacing、cellpadding等標(biāo)簽屬性。它們所構(gòu)成的代碼大大降低了網(wǎng)頁源代碼的可讀性，例如，如果想弄明白哪些表格用來顯示數(shù)據(jù)、哪些表格用來控制網(wǎng)頁樣式，要耗費很多時間和精力，維護起來也不方便。使用CSS布局可以將網(wǎng)頁內(nèi)容以及網(wǎng)頁樣式進行分離，從根本上改變網(wǎng)頁內(nèi)容和網(wǎng)頁標(biāo)簽屬性混合在一起的局面。使用CSS布局時最常用的為div元素，每一個div元素對應(yīng)的是一個欄目內(nèi)容。也可以將div元素看成一個個“塊”，每一個塊的作用是顯示內(nèi)容，而至于將塊放在哪個位置，就由CSS樣式來控制。例如，圖13.2可以按圖13.5所示的方式來劃分。圖13.5CSS布局劃分方式2.網(wǎng)頁結(jié)構(gòu)設(shè)計CSS布局技巧使用CSS布局雖然比使用表格布局要簡潔、方便，但是div與表格還是有很大區(qū)別的。使用表格布局，只要將表格劃分好之后，就可以在單元格中填入內(nèi)容。使用CSS布局時，很多開發(fā)者不知道如何控制div元素，總是無法將其擺放到想要放的位置上。下面總結(jié)了網(wǎng)站上常用的一些網(wǎng)頁布局方式，并介紹如何在CSS中處理這種布局?！疽粰诓季帧恳粰诓季质亲詈唵蔚牟季址绞剑@種布局方式將網(wǎng)頁中的所有內(nèi)容都顯示為一欄。一欄布局中的寬度都是一樣的，這時只需要使用一個簡單的div元素就可以顯示整體的網(wǎng)頁布局，代碼如下。<divid="mydiv">網(wǎng)頁內(nèi)容</div>設(shè)置div元素之后，就可以為該層設(shè)置樣式，如層的大小、背景顏色、邊框等，代碼如下。#mydiv{width:600px;height:300px;background-color:#AEAEAE;border-style:solid;border-width:1px;border-color:blue;}在一欄布局中，經(jīng)常要考慮以下兩個方面的問題。（1）寬度。寬度是指div元素的寬度。開發(fā)者要考慮多大的寬度才能完全顯示網(wǎng)頁的內(nèi)容。除此之外，還有前面說過的分辨率問題。通常，寬度可以設(shè)置成比較合適的值，如1080px，這個寬度能適應(yīng)當(dāng)前的大多數(shù)顯示器?；蛘邔挾仍O(shè)置為一個百分?jǐn)?shù)，如width:80%，這個寬度可以讓div元素的大小隨著瀏覽器窗口大小的改變而改變，也可以在不同分辨率的顯示器上顯示所有網(wǎng)頁內(nèi)容。但這種方法也不是絕對完美的，當(dāng)div層的寬度改變時，有可能讓原本不換行的文字產(chǎn)生換行而引起版面混亂。（2）水平對齊方式。設(shè)置一個層時，默認(rèn)該層是居左顯示。當(dāng)瀏覽器窗口大于層的寬度時，在層的右側(cè)會顯示一些空白，這種不對稱的視覺效果并不是很好，因此通常都會讓層居中顯示。但是在CSS中，只有設(shè)置對象內(nèi)容居中顯示的屬性，并沒有設(shè)置對象居中顯示的屬性，這種情況下又應(yīng)該怎么處理呢？請看示例13-3?！径诓季帧慷诓季质菍⒕W(wǎng)頁分為左側(cè)與右側(cè)兩列，這也是使用較多的布局方式。二欄布局其實也很簡單，首先是創(chuàng)建兩個div元素，再設(shè)置兩個div元素的寬度，然后設(shè)置兩欄并列顯示?！径鄼诓季帧慷鄼诓季质侵笇⒕W(wǎng)頁的內(nèi)容分為左、中、右三大部分。這種布局方式也是網(wǎng)絡(luò)中常用的布局方式。通常三欄布局是固定左欄與右欄的大小，而中間欄的大小是可變的，即可以隨著瀏覽器大小的改變而改變。三欄布局與一欄布局和二欄布局有很大的不同。其通常用width屬性將左欄與右欄的寬度固定，并且這兩欄使用絕對定位模式被固定到瀏覽器的左側(cè)和右側(cè)，中間欄還是以默認(rèn)樣式出現(xiàn)，但要為中間欄指定邊距。邊距至少要大于左右欄的寬度。3.CSS盒子模型本節(jié)的內(nèi)容非常重要，因為盒子模型是CSS定位、布局的核心內(nèi)容。在前面章節(jié)的學(xué)習(xí)中，讀者了解了各種網(wǎng)頁布局的方式，僅僅通過div元素和列表元素即可完成網(wǎng)頁大部分的布局工作。在學(xué)習(xí)、理解盒子模型的概念后，讀者可以更加熟練地進行CSS定位、布局操作。【盒子模型的概念】HTML中大部分的元素（特別是塊狀元素）都可以被看作一個盒子，而網(wǎng)頁元素的定位實際就是這些大大小小的盒子在頁面中的定位。這些盒子在頁面中是“流動”的，當(dāng)某個塊狀元素被用CSS設(shè)置了浮動屬性，這個盒子就會“流”到上一行。網(wǎng)頁布局即關(guān)注這些盒子在頁面中如何擺放、如何嵌套，而這么多盒子擺在一起，最需要關(guān)注的是盒子尺寸的計算、盒子是否流動等方面。為什么要把HTML元素作為盒子模型來研究呢？這是因為HTML元素的特性和盒子非常相似，如圖13.9所示。大多數(shù)HTML元素的結(jié)構(gòu)都類似圖13.9中所示，即除了包含的內(nèi)容（文本或圖像）外，還有內(nèi)邊距、邊框和外邊距。讀者在布局網(wǎng)頁、定位HTML元素時只有充分考慮到這些要素，才能更自如地擺弄這些盒子。外邊距屬性即CSS的margin屬性，該屬性可拆分為margin-top（頂部外邊距）、margin-bottom（底部外邊距）、margin-left（左邊外邊距）和margin-right（右邊外邊距）。CSS的邊框（border）屬性和內(nèi)邊距（padding）屬性同樣可拆分為4邊。在Web標(biāo)準(zhǔn)中，CSS的width屬性即為盒子包含內(nèi)容的寬度，而整個盒子的實際寬度為盒子寬度=（padding-left）+（border-left）+（margin-left）+width+（padding-right）+（border-right）+（margin-right）相應(yīng)地，CSS的height屬性即為盒子包含內(nèi)容的高度，而整個盒子的實際高度為盒子高度=（margin-top）+（border-top）+（padding-top）+height+（padding-bottom）+（border-bottom）+（margin-bottom）【設(shè)置外邊距】在CSS中，margin屬性可以統(tǒng)一設(shè)置，也可以上、下、左、右分開設(shè)置?！驹O(shè)置邊框樣式】邊框作為盒子模型的組成部分之一，其樣式非常重要。設(shè)置邊框的CSS樣式不但影響盒子的尺寸，還影響盒子的外觀。邊框（border）屬性的值有3種：邊框尺寸（px）、邊框類型和邊框顏色（十六進制）。【設(shè)置內(nèi)邊距】內(nèi)邊距（padding）類似HTML中表格單元格的填充屬性，即盒子邊框和內(nèi)容之間的距離。內(nèi)邊距和外邊距（margin）很相似，都是不可見的盒子組成部分，只不過內(nèi)邊距和外邊距之間夾著邊框。4.教學(xué)評價【組織階段考核與學(xué)生自評互評、展示考核結(jié)果】本次課的考核注重過程評價：課上考核包括專