第9章 使用Div+CSS靈活布局網(wǎng)頁(yè)_第1頁(yè)
第9章 使用Div+CSS靈活布局網(wǎng)頁(yè)_第2頁(yè)
第9章 使用Div+CSS靈活布局網(wǎng)頁(yè)_第3頁(yè)
第9章 使用Div+CSS靈活布局網(wǎng)頁(yè)_第4頁(yè)
第9章 使用Div+CSS靈活布局網(wǎng)頁(yè)_第5頁(yè)
已閱讀5頁(yè),還剩12頁(yè)未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1.結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言

HTML是網(wǎng)頁(yè)的基本描述語(yǔ)言,設(shè)計(jì)HTML語(yǔ)言的目的是為了能把存放在一臺(tái)電腦中的文本或圖形與另一臺(tái)電腦中的文本或圖形方便地聯(lián)系起來(lái),形成有機(jī)的整體,不用考慮具體信息是在當(dāng)前電腦上還是在網(wǎng)絡(luò)的其他電腦上。

2.表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言

CSS稱為層疊樣式表,英文是CascadingStyleSheets。目前遵循的是W3C于1998年5月12日發(fā)布的CSS2。W3C創(chuàng)建CSS目的是以CSS取代HTML表格式布局和其他表現(xiàn)的語(yǔ)言。

3.行為標(biāo)準(zhǔn)

DOM稱為文檔對(duì)象模型,英文全稱是DocumentObjectModel,是一種W3C頒布的標(biāo)準(zhǔn),用于對(duì)結(jié)構(gòu)化文檔建立對(duì)象模型,從而使得用戶可以通過程序語(yǔ)言(包括腳本)來(lái)控制其內(nèi)部結(jié)構(gòu)。

9.1什么是網(wǎng)站標(biāo)準(zhǔn)網(wǎng)站標(biāo)準(zhǔn)不是某一個(gè)標(biāo)準(zhǔn),而是標(biāo)準(zhǔn)的集合。網(wǎng)頁(yè)主要由3部分組成:結(jié)構(gòu)(Structure)、表現(xiàn)(Presentation)和行為(Behavior)。對(duì)應(yīng)的標(biāo)準(zhǔn)也分3個(gè)方面:結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言主要包括HTML和XML,表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言主要包括CSS,行為標(biāo)準(zhǔn)主要包括對(duì)象模型,如W3CDOM、ECMAScript等。

9.2關(guān)于表格布局傳統(tǒng)表格布局方式實(shí)際上是利用了HTML中的表格元素(table)具有的無(wú)邊框特性,由于表格元素可以在顯示時(shí)使單元格的邊框和間距設(shè)置為0,所以可以將網(wǎng)頁(yè)中的各個(gè)元素按版式劃分放入表格的各單元格中,從而實(shí)現(xiàn)復(fù)雜的排版組合。

9.2.1表格布局的特點(diǎn)目前仍有一部分網(wǎng)站在使用表格布局,表格布局使用簡(jiǎn)單,制作者只要將內(nèi)容按照行和列拆分,用表格組裝起來(lái)即可實(shí)現(xiàn)設(shè)計(jì)版面布局。9.2.2冗余的嵌套表格和混亂的結(jié)構(gòu)采用表格布局的頁(yè)面內(nèi),為了實(shí)現(xiàn)設(shè)計(jì)的布局,制作者往往在單元格標(biāo)簽<td>內(nèi)設(shè)置高度、寬度和對(duì)齊等屬性,有時(shí)還要加入裝飾性的圖片,圖片和內(nèi)容混雜在一起,使代碼視圖顯得非常臃腫。復(fù)雜的表格使得設(shè)計(jì)極為困難,修改更加繁瑣,最后生成的網(wǎng)頁(yè)代碼除了表格本身的代碼,還有許多沒有意義的圖像占位符及其他元素,文件量龐大,最終導(dǎo)致瀏覽器下載解析速度變慢。而使用CSS布局則可以從根本上改變這種情況。CSS布局的重點(diǎn)不再放在表格元素的設(shè)計(jì)中,取而代之的是HTML中的另一個(gè)元素——Div,Div可以理解為“圖層”或是一個(gè)“塊”,Div是一種比表格簡(jiǎn)單的元素,語(yǔ)法上只有從<Div>開始和</Div>結(jié)束,Div的功能僅僅是將一段信息標(biāo)記出來(lái)用于后期的樣式定義。

9.3關(guān)于DIV+CSS布局9.3.1什么是Web標(biāo)準(zhǔn)

Web標(biāo)準(zhǔn),即網(wǎng)站標(biāo)準(zhǔn)。目前通常所說的Web標(biāo)準(zhǔn)一般指進(jìn)行網(wǎng)站建設(shè)所采用的基于HTML語(yǔ)言的網(wǎng)站設(shè)計(jì)語(yǔ)言。Web標(biāo)準(zhǔn)中典型的應(yīng)用模式是Div+CSS。實(shí)際上,Web標(biāo)準(zhǔn)并不是某一個(gè)標(biāo)準(zhǔn),而是一系列標(biāo)準(zhǔn)的集合。9.3.2

Div+CSS的優(yōu)勢(shì)

CSS樣式表是控制頁(yè)面布局樣式的基礎(chǔ),并真正能夠做到網(wǎng)頁(yè)表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計(jì)語(yǔ)言。相對(duì)傳統(tǒng)HTML的簡(jiǎn)單樣式控制而言,CSS能夠?qū)W(wǎng)頁(yè)中的對(duì)象的位置排版進(jìn)行像素級(jí)的精確控制,支持幾乎所有的字體字號(hào)樣式,以及擁有對(duì)網(wǎng)頁(yè)對(duì)象盒模型樣式的控制能力,并能夠進(jìn)行初步頁(yè)面交互設(shè)計(jì),是目前基于文本展示的最優(yōu)秀的表現(xiàn)設(shè)計(jì)語(yǔ)言。

9.4塊元素和行內(nèi)元素HTML中的元素分為塊元素和行內(nèi)元素,通過CSS樣式可以改變HTML元素原本具有的顯示屬性,也就是說,通過CSS樣式的設(shè)置可以將塊元素與行內(nèi)元素相互轉(zhuǎn)換。9.4.1塊元素在HTML代碼中,常見的塊元素包括<Div>、<p>、<table>等,塊元素具有以下特點(diǎn)。(1)總是在新行上開始顯示。(2)行高以及頂和底邊距都可以控制。(3)如果不設(shè)置寬度,則會(huì)默認(rèn)為整個(gè)容器的100%;而如果設(shè)置了其寬度值,就會(huì)應(yīng)用所設(shè)置的寬度。9.4.2行內(nèi)元素當(dāng)display屬性的值被設(shè)置為inline時(shí),可以把元素設(shè)置為行內(nèi)元素,塊元素具有以下特點(diǎn)。(1)和其他元素顯示在一行上。(2)行高以及頂邊距和底邊距不可以改變。(3)寬度就是它的文字或圖片的寬度,不可以改變。在常用的一些元素中,<span>、<a>、<img>、<b>、<font>、<input>等默認(rèn)都是行內(nèi)元素。

9.5在網(wǎng)頁(yè)中插入DivDiv與其他HTML標(biāo)簽一樣,是一個(gè)HTML所支持的標(biāo)簽。例如當(dāng)使用一個(gè)表格時(shí),應(yīng)用<table></table>這樣的結(jié)構(gòu)一樣,Div在使用時(shí)也是同樣以<div></div>的形式出現(xiàn)。使用Div進(jìn)行網(wǎng)頁(yè)排版布局是現(xiàn)在網(wǎng)頁(yè)設(shè)計(jì)制作的趨勢(shì),通過CSS樣式可以輕松控制Div的位置,從而實(shí)現(xiàn)許多不同的布局方式。9.5.1

Div是什么Div是一個(gè)容器。在HTML頁(yè)面中的每個(gè)標(biāo)簽對(duì)象幾乎都可以稱得上是一個(gè)容器,<div>文檔內(nèi)容</div>9.5.2如何在網(wǎng)頁(yè)中插入Div如果需要在網(wǎng)頁(yè)中插入Div,可以像插入其他的HTML元素一樣,只需在代碼中應(yīng)用<div></div>這樣的標(biāo)簽形式,將內(nèi)容放置其中,便可以應(yīng)用Div標(biāo)簽。

9.5.3

Div的嵌套

Div對(duì)象除了可以直接放入文本和其他標(biāo)簽,還可以多個(gè)Div標(biāo)簽進(jìn)行嵌套使用,最終的目的是合理的標(biāo)識(shí)出頁(yè)面的區(qū)域。單擊“插入”面板上的Div按鈕,彈出“插入Div”對(duì)話框。

9.6關(guān)于Div+CSS盒模型盒模型是CSS控制頁(yè)面時(shí)一個(gè)很重要的概念。只有很好地掌握了盒模型以及其中每個(gè)元素的用法,才能真正的控制頁(yè)面中的各個(gè)元素的位置。

9.6.1盒模型的概念

盒模型是由margin(邊界)、border(邊框)、padding(填充)和content(內(nèi)容)4部分組成的,此外,在盒模型中,還具備高度和寬度兩個(gè)輔助屬性。margin-topmargin-bottomborder-rightborder-leftborder-topborder-bottommargin-leftmargin-rightpadding-leftpadding-rightpadding-toppadding-bottomcontent9.6.2

margin(邊界)margin(邊界)用來(lái)設(shè)置頁(yè)面中元素和元素之間的距離,即定義元素周圍的空間范圍,margin屬性包含4個(gè)子屬性,分別是margin-top、margin-right、margin-bottom和margin-left,分別用于控制元素4周的邊距。動(dòng)手實(shí)踐——定位網(wǎng)頁(yè)元素位置9.6.3

border(邊框)

border(邊框)是內(nèi)邊距和外邊距的分界線,可以分離不同的HTML元素,border屬性設(shè)置的是元素的最外圍。在網(wǎng)頁(yè)設(shè)計(jì)中,如果計(jì)算元素的寬和高,則需要把border計(jì)算在內(nèi)。border屬性有3個(gè)子屬性,分別是邊框樣式(border-style)、邊框?qū)挾龋╞order-width)和邊框顏色(border-color)。動(dòng)手實(shí)踐——為網(wǎng)頁(yè)元素添加邊框最終文件:光盤\最終文件\第9章\9-6-2.html視頻:光盤\視頻\第9章\9-6-2.swf最終文件:光盤\最終文件\第9章\9-6-3.html視頻:光盤\視頻\第9章\9-6-3.swf9.6.4

padding(填充)在CSS中,可以通過設(shè)置padding屬性定義內(nèi)容與邊框之間的距離,即內(nèi)邊距。padding屬性值可以是一個(gè)具體的長(zhǎng)度,也可以是一個(gè)相對(duì)于上級(jí)元素的百分比,但不可以使用負(fù)值。padding屬性可以為盒子定義上、右、下、左各邊填充的值,分別是padding-top(上填充)、padding-right(右填充)、padding-bottom(下填充)和padding-left(左填充)。動(dòng)手實(shí)踐——控制Div中內(nèi)容位置9.6.5

content(內(nèi)容)從盒模型中可以看出中間部分是content(內(nèi)容),它主要用來(lái)顯示內(nèi)容,這部分也是整個(gè)盒模型的主要部分,其他如margin、border、padding所做的操作都是對(duì)content部分所做的修飾。對(duì)于內(nèi)容部分的操作,也就是對(duì)文、圖像等頁(yè)面元素的操作。最終文件:光盤\最終文件\第9章\9-6-4.html視頻:光盤\視頻\第9章\9-6-4.swfDiv+CSS布局是一種比較新的網(wǎng)頁(yè)布局理念,完全有別于傳統(tǒng)的布局方式。它將頁(yè)面首先在整體上進(jìn)行<div>標(biāo)簽的分塊,然后對(duì)各個(gè)塊進(jìn)行CSS定位,最后再在各個(gè)塊中添加相應(yīng)的內(nèi)容。9.7.1元素定位的CSS屬性在網(wǎng)頁(yè)設(shè)計(jì)制作中,定位就是精確的定義HTML元素在頁(yè)面中的位置,可以是頁(yè)面中的絕對(duì)位置,也可以是相對(duì)于父級(jí)元素或另一個(gè)元素的相對(duì)位置。在使用Div+CSS布局制作頁(yè)面的過程中,都是通過CSS的定位屬性對(duì)元素完成位置和大小的控制的。

9.7

Div+CSS布局定位9.7.2

relative(相對(duì)定位)如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位,首先將出現(xiàn)在它所在的位置上,然后通過設(shè)置垂直或水平位置,讓這個(gè)元素相對(duì)于它的原始起點(diǎn)進(jìn)行移動(dòng)。另外,相對(duì)定位時(shí),無(wú)論是否進(jìn)行移動(dòng),元素仍然占據(jù)原來(lái)的空間。因此,移動(dòng)元素會(huì)導(dǎo)致它覆蓋其他元素。動(dòng)手實(shí)踐——實(shí)現(xiàn)網(wǎng)頁(yè)元素相對(duì)定位最終文件:光盤\最終文件\第9章\9-7-2.html視頻:光盤\視頻\第9章\9-7-2.swf9.7.3

absolute(絕對(duì)定位)絕對(duì)定位是參照瀏覽器的左上角,配合top、right、bottom和left進(jìn)行定位的,如果沒有設(shè)置上述的4個(gè)值,則默認(rèn)的依據(jù)父級(jí)元素的坐標(biāo)原點(diǎn)為原始點(diǎn)。絕對(duì)定位可以通過top、right、bottom和left來(lái)設(shè)置元素,使其處在任何一個(gè)位置。動(dòng)手實(shí)踐——實(shí)現(xiàn)網(wǎng)頁(yè)元素絕對(duì)定位9.7.4

fixed(固定定位)固定定位和絕對(duì)定位比較相似,它是絕對(duì)定位的一種特殊形式,固定定位的容器不會(huì)隨著滾動(dòng)條的拖動(dòng)而變化位置。在視線中,固定定位的容器位置是不會(huì)改變的。固定定位可以把一些特殊效果固定在瀏覽器的視線位置。動(dòng)手實(shí)踐——實(shí)現(xiàn)網(wǎng)頁(yè)元素固定定位最終文件:光盤\最終文件\第9章\9-7-3.html視頻:光盤\視頻\第9章\9-7-3.swf最終文件:光盤\最終文件\第9章\9-7-4.html視頻:光盤\視頻\第9章\9-7-4.swf9.7.5

float(浮動(dòng)定位)除了使用position進(jìn)行定位外,還可以使用float定位。float定位只能在水平方向上定位,而不能在垂直方向上定位。float屬性表示浮動(dòng)屬性,它用來(lái)改變?cè)貕K的顯示方式。浮動(dòng)定位是CSS排版中非常重要的手段。浮動(dòng)的框可以左右移動(dòng),直到它外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊緣。動(dòng)手實(shí)踐——實(shí)現(xiàn)網(wǎng)頁(yè)元素浮動(dòng)定位9.7.6空白邊疊加空白邊疊加是一個(gè)比較簡(jiǎn)單的概念,當(dāng)兩個(gè)垂直空白邊相遇時(shí),它們將形成一個(gè)空白邊。這個(gè)空白邊的高度是兩個(gè)發(fā)生疊加的空白邊中的高度的較大者。動(dòng)手實(shí)踐——空白邊疊加在網(wǎng)頁(yè)中的應(yīng)用最終文件:光盤\最終文件\第9章\9-7-5.html視頻:光盤\視頻\第9章\9-7-5.swf最終文件:光盤\最終文件\第9章\9-7-6.html視頻:光盤\視頻\第9章\9-7-6.swf在網(wǎng)頁(yè)制作的過程中,首先需要對(duì)網(wǎng)頁(yè)進(jìn)行布局,網(wǎng)頁(yè)布局的形式多種多樣,例如居中的網(wǎng)頁(yè)布局,居右的網(wǎng)頁(yè)布局,兩列的網(wǎng)頁(yè)布局,3列的網(wǎng)頁(yè)布局等,通過CSS樣式的設(shè)置能夠輕松的實(shí)現(xiàn)各種不同效果的網(wǎng)頁(yè)布局。9.8.1

Div高度自適應(yīng)高度值可以使用百分比進(jìn)行設(shè)置,但是直接使用height:100%;不會(huì)顯示效果的,這與瀏覽器的解析方式有一定關(guān)系,如圖為實(shí)現(xiàn)高度自適應(yīng)的CSS代碼,在瀏覽器中預(yù)覽該頁(yè)面,可以看到Div高度自適應(yīng)的效果。9.8.2網(wǎng)頁(yè)內(nèi)容居中布局居中的網(wǎng)頁(yè)設(shè)計(jì)目前在網(wǎng)頁(yè)布局的應(yīng)用中非常廣泛,所以如何在CSS中讓設(shè)計(jì)居中顯示是大多數(shù)開發(fā)人員首先要學(xué)習(xí)的重點(diǎn)之一。

9.8常用Div+CSS布局方式9.8.3網(wǎng)頁(yè)元素浮動(dòng)布局在Div+CSS布局中,浮動(dòng)布局是使用最多,也是常見的布局方式,浮動(dòng)的布局又可以分為多種形式。1.兩列固定寬度布局2.兩列百分比寬度布局3.兩列右列寬度自適應(yīng)布局4.兩列固定寬度居中布局5.三列浮動(dòng)中間列寬度自適應(yīng)布局9.8.4流體網(wǎng)格布局

隨著網(wǎng)絡(luò)及移動(dòng)設(shè)備的迅速發(fā)展,現(xiàn)在越來(lái)越多的人可以隨時(shí)隨地的使用各種移動(dòng)設(shè)備瀏覽網(wǎng)頁(yè),為了滿足各種不同設(shè)備對(duì)網(wǎng)頁(yè)的瀏覽,在DreamweaverCC中新增了流體網(wǎng)格布局的功能,該功能主要是針對(duì)目前流行的智能手機(jī)、平板電腦和桌面電腦三種設(shè)備。通過創(chuàng)建流體網(wǎng)格布局頁(yè)面,可以使頁(yè)面能夠適應(yīng)3種不同的設(shè)備,并且可以隨時(shí)在3種不同的設(shè)備中查看頁(yè)面的效果。動(dòng)手實(shí)踐——制作商場(chǎng)網(wǎng)站IPAD頁(yè)面布局最終文件:光盤\最終文件\第9章\9-8-4.html視頻:光盤\視頻\第9章\9-8-4.swf一個(gè)典型的網(wǎng)頁(yè)中通常都會(huì)包含頭部、頁(yè)腳、導(dǎo)航、主體內(nèi)容和側(cè)邊內(nèi)容等區(qū)域。針對(duì)這情況,HTML5中引入了與文檔結(jié)構(gòu)相關(guān)聯(lián)的網(wǎng)頁(yè)結(jié)構(gòu)元素。在DreamweaverCC是為了能夠使設(shè)計(jì)者能夠輕松的在網(wǎng)頁(yè)中插入HTML5結(jié)構(gòu)元素,在“插入”面板中新增了“結(jié)構(gòu)”選項(xiàng)卡,通過單擊“結(jié)構(gòu)”選項(xiàng)卡中的按鈕,即可快速在網(wǎng)頁(yè)中插入相應(yīng)的HTML5結(jié)構(gòu)元素。

9.9插入HTML5結(jié)構(gòu)元素9.9.1

頁(yè)眉頁(yè)眉通常用于定義網(wǎng)頁(yè)的介紹信息內(nèi)容,在HTML5中新增了<header>標(biāo)簽,使用該標(biāo)簽可以在網(wǎng)頁(yè)中定義網(wǎng)頁(yè)的頁(yè)眉部分。9.9.2頁(yè)腳頁(yè)腳通常用于定義網(wǎng)頁(yè)文檔的版底信息,包括設(shè)計(jì)者信息、文檔的創(chuàng)建日期以及聯(lián)系方式等。在HTML5中新增了<footer>標(biāo)簽,使用該標(biāo)簽可以在網(wǎng)頁(yè)中定義網(wǎng)頁(yè)的頁(yè)腳部分。9.9.3

Navigation導(dǎo)航是每個(gè)網(wǎng)頁(yè)中都包含的重要元素之一,通過網(wǎng)站導(dǎo)航可以在網(wǎng)站中各頁(yè)面之間進(jìn)行跳轉(zhuǎn)。在在HTML5中新增了<nav>標(biāo)簽,使用該標(biāo)簽可以在網(wǎng)頁(yè)中定義網(wǎng)頁(yè)的導(dǎo)航部分。9.9.4

章節(jié)在網(wǎng)頁(yè)文檔中常常需要定義章節(jié)等特定的區(qū)域。在HTML5中新增了<section>標(biāo)簽,使用該標(biāo)簽可以在網(wǎng)頁(yè)中定義章節(jié)、頁(yè)眉、頁(yè)腳或文檔中的其他部分。9.9.5文章網(wǎng)頁(yè)中常常出現(xiàn)大段的文章內(nèi)容,通過文章結(jié)構(gòu)元素可以將網(wǎng)頁(yè)中大段的文章內(nèi)容標(biāo)識(shí)出來(lái),使網(wǎng)頁(yè)的代碼結(jié)構(gòu)更加整齊。在HTML5中新增了<article>標(biāo)簽,使用該標(biāo)簽可

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論