模塊05 網(wǎng)頁(yè)布局

1模塊05網(wǎng)頁(yè)布局模塊引導(dǎo)網(wǎng)頁(yè)的精彩與否的因素是什么呢？“用戶界面”與“用戶體驗(yàn)”是兩個(gè)較為重要的環(huán)節(jié)，是滿足瀏覽者需求、提升網(wǎng)站瀏覽量與使用滿意度的重要因素?！坝脩趔w驗(yàn)”如色彩的搭配、文字的變化、圖片的處理等，這些當(dāng)然是不可忽略的因素，要給用戶留下深刻印象的，還有一個(gè)非常重要的因素——“用戶界面”網(wǎng)頁(yè)頁(yè)面布局設(shè)計(jì)。采用DIV+CSS制作方法制作頁(yè)面有很多的優(yōu)勢(shì)：使頁(yè)面載入得更快，降低流量費(fèi)用，修改設(shè)計(jì)時(shí)更有效率，保持視覺(jué)的一致性，更好地被搜索引擎收錄。本模塊的所有情境都圍繞網(wǎng)站頁(yè)面的整體設(shè)計(jì)來(lái)開(kāi)展，從頁(yè)面整體設(shè)計(jì)到局部樣式的處理，每個(gè)情境都細(xì)化分解指導(dǎo)操作。各專業(yè)可以根據(jù)自己專業(yè)的特點(diǎn)，對(duì)本模塊的內(nèi)容進(jìn)行有選擇教學(xué)。23學(xué)習(xí)目標(biāo)能力目標(biāo) 1.了解盒狀模型。2.了解元素的間距計(jì)算。3.了解塊級(jí)元素。4.

掌握使用DIV+CSS控制頁(yè)面文檔流的各種方法。知識(shí)目標(biāo) 1.

掌握DIV的自然布局方法。2.

掌握DIV的浮動(dòng)布局方法。3.

掌握DIV的精確布局方法。4.

掌握CSS標(biāo)簽選擇器的使用。課時(shí)分配 4課時(shí)（授課2課時(shí)，實(shí)踐2課時(shí)）。應(yīng)知技能一、基本概念CSS（CascadingStyleSheet）——層疊樣式表，用于控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。二、CSS選擇器

1、標(biāo)記選擇器（body等）

2、類別選擇器（以“.”作為標(biāo)記）

3、ID選擇器（以“#”作為標(biāo)記）

4、復(fù)合選擇器（多種選擇器的組合）三、基本語(yǔ)法4CSS概念及基本語(yǔ)法h1{

}color:red;font-size:25px;選擇器屬性:值;屬性:值;應(yīng)知技能一、塊級(jí)元素與內(nèi)聯(lián)元素塊元素一般都從新行開(kāi)始，它可以容納內(nèi)聯(lián)元素和其他塊元素,常見(jiàn)塊元素是段落標(biāo)簽“P”；內(nèi)聯(lián)元素一般都是基于語(yǔ)義級(jí)的基本元素。內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素，常見(jiàn)內(nèi)聯(lián)元素“a”。二、盒狀模型用于塊元素內(nèi)部或塊元素之間關(guān)系描述5盒狀模型模擬任務(wù)6任務(wù)背景一般個(gè)人主頁(yè)的都偏向圖像、文字元素較多，往往只需要將這些元素有效的排布，就能向大眾展現(xiàn)自我的風(fēng)采，因此，采用簡(jiǎn)單的DIV元素堆疊的方式布局HTML元素，再使用CSS控制HTML元素，就能實(shí)現(xiàn)這類網(wǎng)頁(yè)的基本功能?；静季滞瓿尚Ч尽Ｈ蝿?wù)要求將HTML元素合理的分配，布局結(jié)構(gòu)清晰，效果明顯造型簡(jiǎn)潔。任務(wù)1DIV自然布局模擬任務(wù)7任務(wù)背景控制文檔流的走向使用“float”屬性，可以實(shí)現(xiàn)圖文混排。效果圖如圖所示。任務(wù)要求在用戶瀏覽網(wǎng)頁(yè)中，鼠標(biāo)指針滑過(guò)圖像時(shí)換成另外一幅圖像，離開(kāi)時(shí)恢復(fù)原始圖像。任務(wù)2DIV浮動(dòng)布局模擬任務(wù)8任務(wù)背景當(dāng)所要的頁(yè)面元素不能僅僅局限于原來(lái)的文檔流中，需要和其他元素有交叉重疊時(shí)，通常使用浮動(dòng)與定位結(jié)合，調(diào)整Div的層疊次序，為較好的表達(dá)主題的起到補(bǔ)充作用。效果圖如圖所示。任務(wù)要求背景圖片和數(shù)字選項(xiàng)按鈕較好的融合，并呈現(xiàn)層疊效果。任務(wù)3精確定位布局知識(shí)拓展1．定位（1）絕對(duì)定位（absolute）應(yīng)用了絕對(duì)定位的元素將被不留痕跡地從常規(guī)文檔流中完全移除，使用left，right，top，bottom等屬性相對(duì)于其最接近的一個(gè)最有定位設(shè)置的父對(duì)象進(jìn)行絕對(duì)定位,如果不存在這樣的父對(duì)象，則依據(jù)body對(duì)象定位。其層疊通過(guò)z-index屬性定義。（2）相對(duì)定位（relative）這個(gè)屬性值保持對(duì)象所在文檔流中的位置，它同樣占有在文檔流中的固定位置，后面的對(duì)象不會(huì)侵占或覆蓋。設(shè)置了relative的對(duì)象，可以通過(guò)top,left,right,bottom屬性設(shè)定自己的新顯示位置，這4個(gè)屬性的取值是相對(duì)于文檔流的前一個(gè)對(duì)象的，你可以自由設(shè)置這4個(gè)屬性偏移到新的位置而不對(duì)文檔流中的其他對(duì)象產(chǎn)生任何影響，原來(lái)的頁(yè)面呈現(xiàn)仍然會(huì)我行我素。如果用position來(lái)布局頁(yè)面，父級(jí)元素的position屬性必須為relative，而定位于父級(jí)內(nèi)部某個(gè)位置的元素，最好用absolute，因?yàn)樗皇芨讣?jí)元素的padding的屬性影響。2．浮動(dòng)定位子塊級(jí)元素流集合面向父級(jí)元素的定位，定位的關(guān)鍵詞使用margin、padding】。兄弟塊元素之間進(jìn)行相對(duì)的定位均基于移動(dòng)后的新位置進(jìn)行重新渲染，可以重疊，原位置被清空。9定位和浮動(dòng)的區(qū)別知識(shí)拓展1．ID標(biāo)簽和類的使用區(qū)別ID只能在頁(yè)面中對(duì)應(yīng)一個(gè)元素，就像我們的身份證號(hào)一樣，每個(gè)人的都不一樣；class為類，可以對(duì)應(yīng)多個(gè)元素。2．取消Class和ID前的元素設(shè)定當(dāng)給一個(gè)元素定義Class或ID時(shí)，可以省略前面的元素限定，因?yàn)镮D在一個(gè)頁(yè)面里是唯一的，Class可以在頁(yè)面中多次使用。但是為了CSS結(jié)構(gòu)清晰，也可以適當(dāng)?shù)奶砑忧皩?dǎo)元素進(jìn)行申明。3．默認(rèn)值設(shè)定通常padding的默認(rèn)值為0，background-color的默認(rèn)值為transparent，但是不同的瀏覽器默認(rèn)值可能不同，如果怕有沖突，可以在樣式表一開(kāi)始就先定義所有元素的margin和padding的值均為0。10CSS常用技巧獨(dú)立實(shí)踐11任務(wù)背景么有效的在頁(yè)面上反應(yīng)網(wǎng)站的眾多內(nèi)容，讓用戶能一目了然呢？圖文混排是一個(gè)有效果的辦法。合理的利用CSS可以將頁(yè)面的布局做到干凈、整潔，用戶體驗(yàn)感良好。參照布局方法，制作下面的頁(yè)面，效果如圖所示。任務(wù)要求分析布局，按照布局的模式分清主次，然后增加必要的div標(biāo)簽，并設(shè)置其樣式。任務(wù)

制作上下結(jié)構(gòu)的圖文混排CSS列表學(xué)習(xí)目標(biāo)能力目標(biāo) 1.掌握布局的版式。 2.

掌握合使用布局的多種方法。

知識(shí)目標(biāo) 1.掌握基本布局版式的樣式。 2.掌握根據(jù)版式采用合理的布局方法。

課時(shí)分配 4課時(shí)（授課1課時(shí)，實(shí)踐3課時(shí)）。12應(yīng)知技能131、T型布局T型布局的優(yōu)點(diǎn)是頁(yè)面結(jié)構(gòu)清晰，主次分明，強(qiáng)調(diào)秩序，能給人以穩(wěn)重、可信賴的感覺(jué)，比較容易上手。缺點(diǎn)是規(guī)矩呆板，如果細(xì)節(jié)和色彩搭配上不注意，容易讓人乏味。2、口型布局口型布局的頁(yè)面上下各有一個(gè)廣告條，左側(cè)是主菜單，右側(cè)放置友情鏈接等內(nèi)容，中間是主要內(nèi)容?？谛筒季值膬?yōu)點(diǎn)是充分利用版面，信息量大。其缺點(diǎn)是頁(yè)面擁擠，不夠靈活。3、標(biāo)題正文型標(biāo)題正文型布局的布局結(jié)構(gòu)一般用于顯示文章頁(yè)面、新聞頁(yè)面和一些注冊(cè)頁(yè)面等。4、POP布局POP引自廣告術(shù)語(yǔ)，是指頁(yè)面布局象一張宣傳海報(bào)，以一張精美圖像作為頁(yè)面的設(shè)計(jì)中心，在適當(dāng)位置放置主菜單。這種布局不講究上下左右對(duì)稱，但要平衡和有韻律，能達(dá)到強(qiáng)調(diào)、動(dòng)感、高注目性的效果，常用于時(shí)尚類網(wǎng)站。其優(yōu)點(diǎn)是漂亮吸引人，缺點(diǎn)是速度慢。常見(jiàn)布局版式模擬任務(wù)14任務(wù)背景倫敦是一個(gè)世界級(jí)的城市，也是來(lái)自世界各地游客去英國(guó)旅游的主要景點(diǎn)?！癎ordon’sCrown”是一所比較出名的咖啡館。讓游客如何的了解這個(gè)店，更好的推廣這個(gè)店，了解這個(gè)店的特色，選擇什么樣的餐點(diǎn)，這是本網(wǎng)站的要解決的難題。網(wǎng)站主頁(yè)要界面清新，布局結(jié)構(gòu)合理，能讓游客盡可能多的了解本店的概貌。效果如圖所示。任務(wù)要求使用DIV+CSS模式布局，合理使用DIV，適當(dāng)進(jìn)行嵌套，有效的安排各個(gè)DIV之間層次關(guān)系，達(dá)到客戶要求。任務(wù)1咖啡館的主頁(yè)模擬任務(wù)15任務(wù)背景世界技能大賽是全球年輕技術(shù)工人齊聚一堂，展開(kāi)技能競(jìng)賽的國(guó)際比賽，被稱為技術(shù)工人的奧林匹克，已發(fā)展成為名副其實(shí)的國(guó)際技能大賽。這項(xiàng)比賽的參加選手眾多，任務(wù)繁重，怎么合理化的安排任務(wù)，必然要一個(gè)布局清新，方便程序員編寫(xiě)程序的頁(yè)面。效果如圖所示。任務(wù)要求使用DIV+CSS模式布局，合理使用DIV，適當(dāng)進(jìn)行嵌套，有效的安排各個(gè)DIV之間層次關(guān)系，達(dá)到客戶要求。任務(wù)2世界技能大賽賽程管理主頁(yè)知識(shí)拓展16設(shè)置頁(yè)面居中（1）使用自動(dòng)外邊距實(shí)現(xiàn)居中CSS中首選的讓元素水平居中的方法就是使用margin屬性—將元素的margin-left和margin-right屬性設(shè)置為auto即可。在實(shí)際使用中，我們可以為這些需要居中的元素創(chuàng)建一個(gè)起容器作用的div。需要特別注意的一點(diǎn)就是，必須為該容器指定寬度。知識(shí)拓展17設(shè)置頁(yè)面居中（2）使用text-align實(shí)現(xiàn)居中使用text-align屬性，將該屬性值設(shè)置為center并應(yīng)用到body元素上即可。這種做法并沒(méi)有將文本屬性應(yīng)用到文本上，而是應(yīng)用到了作為容器的元素上。這也給我們帶來(lái)了額外的工作，但它卻能兼容大多數(shù)瀏覽器，所以在某些情況下也自然必不可少。這種方法在創(chuàng)建好布局必須的div之后，按照如下代碼為body應(yīng)用text-align屬性。應(yīng)用后body的所有子孫元素都會(huì)被居中顯示。因此，這就需要用再寫(xiě)一條規(guī)則，讓其中的文本回到默認(rèn)的居左對(duì)齊，如對(duì)段落設(shè)置：知識(shí)拓展18設(shè)置頁(yè)面居中（3）組合使用自動(dòng)外邊距和文本對(duì)齊因?yàn)槲谋緦?duì)齊居中方式有著良好的向下兼容性，且自動(dòng)外邊距方式也被大多數(shù)當(dāng)代瀏覽器支持，以期讓居中效果得到最大限度的跨瀏覽器支持：知識(shí)拓展19設(shè)置頁(yè)面居中（4）負(fù)外邊距解決方案負(fù)外邊距解決方案遠(yuǎn)不是僅僅為元素添加負(fù)外邊距這么簡(jiǎn)單。這種方法需要同時(shí)使用絕對(duì)定位和負(fù)外邊距兩種技巧。下面是該方案的具體實(shí)現(xiàn)方法。首先，創(chuàng)建一個(gè)包含居中元素的容器，然后將其絕對(duì)定位于相對(duì)頁(yè)面左邊邊緣50%的位置。這樣，該容器的左外邊距將從頁(yè)面50%寬度的位置開(kāi)始算起。然后，將容器的左外邊距值設(shè)置為負(fù)的容器寬度的一半。這樣即可將該容器固定在頁(yè)面水平方向的中點(diǎn)。知識(shí)拓展20消除浮動(dòng)影響最外層的div.outer沒(méi)有被設(shè)置高度，但是我們知道如果它里面的元素不浮動(dòng)的話，那么這個(gè)外層的高是會(huì)自動(dòng)被撐開(kāi)的。但是當(dāng)內(nèi)層元素浮動(dòng)后，就出現(xiàn)了一下影響：

（1）背景不能顯示（2）邊框不能撐開(kāi)（3）margin設(shè)置值不能正確顯示知識(shí)拓展21消除浮動(dòng)影響（1）添加新的元素div，應(yīng)用clear：both；

知識(shí)拓展22消除浮動(dòng)影響（2