第七章 WEB標(biāo)準(zhǔn)與頁面布局基礎(chǔ)(理論)_第1頁
第七章 WEB標(biāo)準(zhǔn)與頁面布局基礎(chǔ)(理論)_第2頁
第七章 WEB標(biāo)準(zhǔn)與頁面布局基礎(chǔ)(理論)_第3頁
第七章 WEB標(biāo)準(zhǔn)與頁面布局基礎(chǔ)(理論)_第4頁
第七章 WEB標(biāo)準(zhǔn)與頁面布局基礎(chǔ)(理論)_第5頁
已閱讀5頁，還剩32頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

WEB標(biāo)準(zhǔn)與頁面布局基礎(chǔ)第七章本章單詞Structure （體系，構(gòu)造，結(jié)構(gòu)）

Presentation （介紹，演示，外觀，表象）

Behavior （反應(yīng)，行為，舉止）

XML （Extensible

Markup

Language，即可擴(kuò)展標(biāo)記語言）

DTD （DocumentTypeDefinition，文檔類型定義）

Transitional （過渡性的）

Strict （嚴(yán)格的）

margin （外邊的空白，外邊距，外補(bǔ)?。?/p>

padding （填充物，內(nèi)邊距，內(nèi)補(bǔ)?。?/p>

block （街區(qū)，塊）

inline （內(nèi)聯(lián)，行內(nèi)）

overflow （泛濫，溢出）

relative （相對(duì)的）

absolute （絕對(duì)的）

vertical （垂直的，豎直的）預(yù)習(xí)檢查3預(yù)習(xí)檢查當(dāng)使用margin屬性對(duì)元素的四個(gè)外邊距進(jìn)行設(shè)置，依次的順序?yàn)?)。top bottom left rightleft right top bottomtop left bottom righttop right bottom left使用position屬性可設(shè)置元素的定位機(jī)制。要使元素以它的父元素為參照，進(jìn)行相對(duì)定位，應(yīng)為postion屬性賦以下（）的值。staticabsoluterelativefixed

預(yù)習(xí)檢查當(dāng)頁面中有多個(gè)元素在垂直于瀏覽器窗口的方向上發(fā)生層疊時(shí)，可使用()屬性設(shè)置它們的層疊順序，此屬性的值越()則此元素就越接近瀏覽者。z 大index 小z-index 大z-number 大要將一個(gè)元素隱藏，并且要求此元素原來占據(jù)的頁面空間被釋放，應(yīng)為此元素設(shè)置()屬性，并賦值為()。visibility nonevisibility hiddendisplay hiddendisplay none

預(yù)習(xí)檢查CSS盒狀模型規(guī)定盒子由四個(gè)content,margin,padding,border部分組成。由盒子的外部到盒子內(nèi)部，這四個(gè)部分的順序依次是()。border padding margin contentmargin border padding contentcontent padding border marginborder margin content padding

網(wǎng)站重構(gòu)與WEB標(biāo)準(zhǔn)

網(wǎng)站重構(gòu)把“未采用CSS，大量使用HTML進(jìn)行定位、布局，或者雖然已經(jīng)采用CSS，但是未遵循HTML結(jié)構(gòu)化標(biāo)準(zhǔn)的站點(diǎn)”變成“讓標(biāo)記回歸標(biāo)記的原本意義。通過在HTML文檔中使用結(jié)構(gòu)化的標(biāo)記以及用CSS控制頁面表現(xiàn)，使頁面的實(shí)際內(nèi)容與它們呈現(xiàn)的格式相分離的站點(diǎn)?！钡倪^程就是網(wǎng)站重構(gòu)。網(wǎng)站重構(gòu)>>>WEB標(biāo)準(zhǔn)

WEB標(biāo)準(zhǔn)網(wǎng)頁主要由三個(gè)部分構(gòu)成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。它們都有各自的標(biāo)準(zhǔn)。結(jié)構(gòu)結(jié)構(gòu)是指一個(gè)網(wǎng)頁有哪些內(nèi)容以及這些內(nèi)容如何被清晰地組織在一起。網(wǎng)頁結(jié)構(gòu)的標(biāo)準(zhǔn)主要是XML語言和XHTML語言。表現(xiàn)表現(xiàn)是指一個(gè)網(wǎng)頁的內(nèi)容以何種樣式來展現(xiàn)。網(wǎng)頁表現(xiàn)的標(biāo)準(zhǔn)是CSS語言。行為行為是指一個(gè)網(wǎng)頁及其所它包含的網(wǎng)頁元素以及它所屬的瀏覽器窗口如何與用戶交互。網(wǎng)頁行為由JavaScript腳本語言來實(shí)現(xiàn)。XHTML

XHTML是HTML的替代者，它是從HTML繼承而來，但使用了XML的規(guī)則進(jìn)行嚴(yán)格規(guī)范。XHTML與傳統(tǒng)的HTML的不同之處，主要來自于XML語法規(guī)范的格式要求，即要求“格式良好”。必須有且僅能有一個(gè)根元素<html></html>標(biāo)簽必須正確地嵌套標(biāo)簽必須關(guān)閉標(biāo)簽名和屬性名必須使用小寫屬性必須賦值屬性值必須包含在引號(hào)內(nèi)特殊字符必須用實(shí)體編碼來表示圖片必須有替代文字注釋的內(nèi)容中不能包含”--”DTDXHTML文檔的有效性網(wǎng)頁文檔中可以使用的標(biāo)簽有哪些，標(biāo)簽有哪些可用的屬性，屬性可用哪些值，標(biāo)簽之間如何嵌套，特殊字符如何表示等等。XHTML文檔的有效性通過DTD（DocumentTypeDefinition，文檔類型定義）來定義和驗(yàn)證。在文檔第一行（<html>標(biāo)簽開始之前）添加DOCTYPE即文檔類型聲明。萬維網(wǎng)聯(lián)盟（W3C）為XHTML制定了三種DTD過渡的(Transitional)<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"“url">

嚴(yán)格的(Strict)<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"“url">

框架集的(Frameset)<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Frameset//EN""url">

結(jié)構(gòu)與表現(xiàn)分離CSS的出現(xiàn)，使得網(wǎng)頁的結(jié)構(gòu)與表現(xiàn)比較清晰地分離成為可能。對(duì)于網(wǎng)頁包含的數(shù)據(jù)內(nèi)容，由HTML標(biāo)簽負(fù)責(zé)承載，同時(shí)，文檔內(nèi)眾多標(biāo)簽的先后順序和嵌套關(guān)系，也說明了這些數(shù)據(jù)內(nèi)容的結(jié)構(gòu)。對(duì)于網(wǎng)頁中的每一個(gè)元素最終在瀏覽器中以何種樣式來呈現(xiàn)，則由CSS的樣式規(guī)則來負(fù)責(zé)定義。CSS樣式規(guī)則一般編寫在網(wǎng)頁的頭部<head></head>中，這樣可使得用來承載數(shù)據(jù)和描述結(jié)構(gòu)的HTML代碼與控制樣式的CSS代碼分離開來。如果需要二者更進(jìn)一步地分離，則可將CSS樣式規(guī)則轉(zhuǎn)移到獨(dú)立的外部樣式表文件中。網(wǎng)頁的結(jié)構(gòu)與表現(xiàn)分離，帶來的好處。WEB標(biāo)準(zhǔn)與CSS實(shí)現(xiàn)網(wǎng)頁布局

網(wǎng)頁布局又可理解為網(wǎng)頁排版。簡(jiǎn)單地說就是：網(wǎng)頁中的某一塊內(nèi)容應(yīng)該放置在網(wǎng)頁的哪個(gè)位置，占用多大的面積。大量使用表格實(shí)現(xiàn)頁面布局，不符合WEB標(biāo)準(zhǔn)。目前普遍采用CSS結(jié)合div標(biāo)簽來實(shí)現(xiàn)網(wǎng)頁的布局。將整個(gè)網(wǎng)頁的所有內(nèi)容分割成為相對(duì)獨(dú)立的內(nèi)容塊，這些內(nèi)容塊分別用一個(gè)div標(biāo)簽來包裹，再使用CSS的屬性分別設(shè)置這些內(nèi)容塊的位置和尺寸。這樣整個(gè)頁面的版式就受到了控制，從而實(shí)現(xiàn)了網(wǎng)頁的布局。CSS的盒狀模型

CSS的盒狀模型（BoxModel），是使用CSS實(shí)現(xiàn)網(wǎng)頁布局的基礎(chǔ)。頁面中可放置內(nèi)容的窗口元素稱為盒子即Box，盒子就是一個(gè)矩形區(qū)域。每個(gè)盒子都有內(nèi)容Content，內(nèi)邊距Padding，邊框Border，外邊距Margin。盒狀模型用于描述它們之間的層次，關(guān)系與相互的影響。margin：外邊距border：邊框padding：內(nèi)邊距，又稱內(nèi)補(bǔ)丁或間隙content：內(nèi)容兩種盒子盒子還有塊級(jí)盒子(blockbox)和內(nèi)聯(lián)盒子(inlinebox)之分。這兩種盒子分別是塊級(jí)元素與內(nèi)聯(lián)元素的默認(rèn)盒狀模型。塊級(jí)元素div、table、form、fieldset、h1~h6、p、ol、ul、li、hr等。內(nèi)聯(lián)元素span、a、label、input、select、textarea、img、embed、br等。塊級(jí)元素顯示為獨(dú)立的一塊（矩形區(qū)域），它的前后都會(huì)換行；內(nèi)聯(lián)元素不會(huì)導(dǎo)致?lián)Q行，它會(huì)和其他內(nèi)聯(lián)元素一起在一行內(nèi)顯示。內(nèi)聯(lián)元素只能包含文本和其他內(nèi)聯(lián)元素；而塊級(jí)元素則能包含內(nèi)聯(lián)元素和其他塊級(jí)元素。標(biāo)準(zhǔn)文檔流盒狀模型的轉(zhuǎn)換CSS屬性display可以設(shè)置網(wǎng)頁元素使用的盒狀模型。為塊級(jí)元素的display屬性賦值為inline，那么這個(gè)塊級(jí)元素轉(zhuǎn)變?yōu)閮?nèi)聯(lián)元素；為內(nèi)聯(lián)元素的display屬性賦值為block，則這個(gè)內(nèi)聯(lián)元素轉(zhuǎn)變?yōu)閴K級(jí)元素。<divid="firstDiv"> <pclass="myp">第一個(gè)段落</p><pclass="myp">第二個(gè)段落</p></div><ulid="myul"> <li>列表項(xiàng)目</li> <li>列表項(xiàng)目</li> <li>列表項(xiàng)目</li></ul><divid="secondDiv">secondDiv</div><divid="thirdDiv">thirdDiv</div>演示例7-1盒狀模型的轉(zhuǎn)換<style> #firstDiv,#secondDiv,#thirdDiv{ border:1pxsolidgray; }

#myulli{ display:inline; } .myp{ display:inline; } #secondDiv,#thirdDiv{ display:inline;}</style>演示例7-1外邊距

CSS外邊距屬性用來設(shè)置一個(gè)元素所占空間的邊緣到相鄰元素之間的距離。使用margin屬性來設(shè)置外邊距。屬性意義取值margin-topmargin-rightmargin-bottommargin-left設(shè)置元素的頂外邊距。設(shè)置元素的右外邊距。設(shè)置元素的底外邊距。設(shè)置元素的左外邊距?？墒褂孟袼貑挝坏臄?shù)字或百分比，也可使用auto。margin簡(jiǎn)寫屬性。在一個(gè)聲明中設(shè)置外邊距屬性。依次設(shè)置頂外邊距、右外邊距、底外邊距、左外邊距。margin<body>

<divid="outerDiv"> <p>外部DIV塊</p> <p>這是一個(gè)段落。這是一個(gè)段落。這是一個(gè)段落。這是一個(gè)段落。這是一個(gè)段落。這是一個(gè)段落。這是一個(gè)段落。</p>

<divid="innerDiv"> <p>內(nèi)部DIV塊</p> <p>這是一個(gè)段落。這是一個(gè)段落。這是一個(gè)段落。這是一個(gè)段落。這是一個(gè)段落。這是一個(gè)段落。</p>

</div>

</div></body><styletype="text/css">*{margin:0;padding:0;}body{background-color:#fedcba;}#outerDiv{ border:1pxsolidblue; width:400px;

margin:0px; background-color:#abcdef;}#innerDiv{ border:1pxsolidred; width:300px;

margin:20px; background-color:#cccccc;}p{border:1pxdashedgreen;}</style>演示例7-2內(nèi)邊距CSS內(nèi)邊距屬性是用來設(shè)置元素內(nèi)容到元素邊框的距離。使用padding屬性來設(shè)置內(nèi)邊距。屬性意義取值padding-toppadding-rightpadding-bottompadding-left設(shè)置元素的頂內(nèi)邊距。設(shè)置元素的右內(nèi)邊距。設(shè)置元素的底內(nèi)邊距。設(shè)置元素的左內(nèi)邊距?？墒褂孟袼貑挝坏臄?shù)字或百分比，也可使用auto。padding簡(jiǎn)寫屬性。作用是在一個(gè)聲明中設(shè)置元素的內(nèi)邊距屬性。依次設(shè)置頂內(nèi)邊距、右內(nèi)邊距、底內(nèi)邊距、左內(nèi)邊距。padding<body>

<divid="outerDiv"> <p>外部DIV塊</p> <p>這是一個(gè)段落。這是一個(gè)段落。這是一個(gè)段落。這是一個(gè)段落。這是一個(gè)段落。

<divid="innerDiv"> <p>內(nèi)部DIV塊</p> <p>這是一個(gè)段落。這是一個(gè)段落。這是一個(gè)段落。這是一個(gè)段落。這是一個(gè)段落。這是一個(gè)段落。這是一個(gè)段落。這是一個(gè)段落。</p>

</div>

</div></body><styletype="text/css">*{margin:0;padding:0;}body{background-color:#fedcba;}#outerDiv{ border:1pxsolidblue; width:400px;

padding:10px; background-color:#abcdef;}#innerDiv{ border:1pxsolidred; width:300px;

padding:10px; background-color:#cccccc;}p{border:1pxdashedgreen;}</style>演示例7-3尺寸CSS尺寸屬性指的是content內(nèi)容區(qū)域的寬和高。使用width和height屬性來設(shè)置內(nèi)容區(qū)域的寬度和高度。屬性意義取值width設(shè)置元素內(nèi)容區(qū)域的寬度。可使用px像素單位或%百分比。height設(shè)置元素內(nèi)容區(qū)域的高度?？墒褂胮x像素單位或%百分比。width和height<styletype="text/css">#mytable{

height:120px; border:4pxdoubleblack; border-collapse:collapse;}#mytabletd{

width:180px; border:1pxsolidgray;}#myp{

width:450px;height:80px; background-color:#fedcba;}</style><pid="myp">段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字</p><tableid="mytable"><tr> <td>單元格</td> <td>單元格</td></tr><tr> <td> <img

src="image/eg_bg.gif"alt="示例圖片"style="width:125px;height:125px;"/> </td> <td> <p>段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字</p> </td></tr></table>演示例7-4溢出CSS溢出屬性指內(nèi)容區(qū)域的尺寸不足以容納元素的內(nèi)容時(shí)，超出的部分如何處理。使用overflow屬性來設(shè)置如何處理溢出的內(nèi)容。屬性意義取值overflow設(shè)置當(dāng)元素內(nèi)容所需占用的區(qū)域超出內(nèi)容區(qū)域時(shí)，如何處理。默認(rèn)visible，其他值可用auto、scroll、

hidden。overflow<divid="mydiv"> <p>這是一個(gè)段落</p><p>這是一個(gè)段落</p> <p>這是一個(gè)段落</p><p>這是一個(gè)段落</p> <p>這是一個(gè)段落</p><p>這是一個(gè)段落</p> <p>這是一個(gè)段落</p><p>這是一個(gè)段落</p> ……</div><styletype="text/css">#mydiv{ width:300px;

height:200px;

overflow:scroll; border:1pxsolidblue;}</style>演示例7-51、2、3、小結(jié)1盒狀模型中所謂的盒子如何構(gòu)成？有哪兩種盒子？分別包含哪些標(biāo)簽？CSS中哪個(gè)屬性可以改變HTML標(biāo)簽?zāi)J(rèn)的盒狀模型？與定位相關(guān)的CSS屬性定位方式坐標(biāo)層疊順序?qū)R方式定位方式和坐標(biāo)position屬性可以設(shè)置默認(rèn)定位方式之外的其他三種方式。top、right、bottom、left用于設(shè)置定位坐標(biāo)。屬性意義取值position設(shè)置元素的定位機(jī)制。static，靜態(tài)定位，默認(rèn)值。定位于頁面文檔流給定的位置。relative，相對(duì)定位。在頁面文檔流給定位置基礎(chǔ)上進(jìn)行偏移。absolute，絕對(duì)定位。以父級(jí)元素作為參照，使用坐標(biāo)進(jìn)行絕對(duì)定位。fixed，固定定位。固定在相對(duì)于瀏覽器窗口的指定位置，不隨頁面滾動(dòng)而移動(dòng)。toprightbottomleft設(shè)置元素的某邊界相對(duì)于其包含塊相應(yīng)邊界的偏移量。默認(rèn)為auto，可使用px像素或%百分比設(shè)定。絕對(duì)定位<body> <divid="first"> <p>firstdiv位于body中</p> </div> <divid="second"> <p>seconddiv位于body中</p> <divid="third"> <p>thirddiv位于seconddiv中</p> </div> </div> <divid="forth"> <p>forthdiv位于body中</p> </div></body><styletype="text/css">*{margin:0px;padding:0px;}div{border:1pxsolidblue;}p{border:1pxdashedred;}#first{position:absolute;

left:20px;top:10px;width:220px;height:250px;background-color:#abcdef;}#second{position:absolute;left:250px;top:10px;width:180px;height:150px;background-color:#abcdef;}#third{position:absolute;left:-20px;top:50px;background-color:#fedcba; }#forth{position:absolute;

left:100px;top:120px;width:180px;height:100px;background-color:red; }</style>演示例7-6相對(duì)定位<body> <pid="p_pos_left">這是一個(gè)段落</p> <p>這是一個(gè)段落</p> <pid="p_pos_top">這是一個(gè)段落</p></body><styletype="text/css">p{margin:0;border:1pxsolidgray;width:250px;}#p_pos_left{position:relative;left:20px;}#p_pos_top{position:relative;top:20px;}</style>演示例7-7固定定位<body> <divid="footer"> <p>不管頁面如何滾動(dòng)，我自始至終都在這里。</p> </div> <p>頁面正文</p><p>頁面正文</p><p>頁面正文</p><p>頁面正文</p> <p>頁面正文</p><p>頁面正文</p><p>頁面正文</p><p>頁面正文</p> <p>頁面正文</p><p>頁面正文</p><p>頁面正文</p><p>頁面正文</p></body><styletype="text/css">#footer{

position:fixed;bottom:10px;right:10px; width:350px;height:50px; background-color:#fedcba;}</style>演示例7-8層疊順序網(wǎng)頁中的多個(gè)內(nèi)容塊可能使用多種不同的定位方式，這可能導(dǎo)致它們?cè)诖怪庇跒g覽器窗口（或文檔正文區(qū)域）的方向上層疊起來，相互遮擋。使用z-index（Z軸索引）屬性可以設(shè)置它們的層疊順序。屬性意義取值z(mì)-index設(shè)置元素在垂直瀏覽器窗口方向上的層疊順序。使用數(shù)字設(shè)定，數(shù)字越大越靠近瀏覽者。為負(fù)數(shù)時(shí)，作為頁面正文的背景顯示。z-index<body> <divid="first"> <p>firstdiv位于body中</p> </div> <divid="second"> <p>seconddiv位于body中</p> <divid="third"> <p>thirddiv位于seconddiv中</p> </div> </div> <divid="forth"> <p>forthdiv位于body中</p> </div></body><styletype="text/css">*{margin:0px;padding:0px;}div{border:1pxsolidblue;}p{border:1pxdashedred;}#first{position:absolute;z-index:1;left:20px;top:10px;width:220px;height:250px;background-color:#abcdef;}#second{position:absolute;z-index:3;left:250px;top:10px;width:180px;height:150px;background-color:#abcdef;}#third{position:absolute;background-color:#fedcba;left:-20px;top:50px; }#forth{position:absolute;z-index:2;left:100px;top:120px;width:180px;height:100px;background-color:red; }</style>演示例7-9對(duì)齊方式對(duì)齊方式屬性用于設(shè)置元素的內(nèi)容在作為容器的元素內(nèi)部的對(duì)齊方式，

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(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)論