表格基礎(chǔ)和DIVCSS網(wǎng)頁(yè)布局基礎(chǔ)教案

1、本部分任務(wù)制作“寶貝分類”頁(yè)面制作“公告欄”頁(yè)面為什么使用表格表格應(yīng)用場(chǎng)合具體內(nèi)容見ppt表格的基本結(jié)構(gòu)具體內(nèi)容見ppt表格的基本語(yǔ)法Table標(biāo)簽Tr標(biāo)簽Td標(biāo)簽具體內(nèi)容見ppt注：表格標(biāo)簽中沒(méi)有列標(biāo)簽。如何創(chuàng)建表格具體內(nèi)容見ppt跨行跨列的表格什么是跨行跨列的表格跨多行的表格跨多列的表格具體內(nèi)容見ppt表格的美化修飾什么是表格的美化修飾如何設(shè)置表格的尺寸和邊框width用來(lái)設(shè)置表格的寬度height用來(lái)設(shè)置表格的高度border用來(lái)設(shè)置表格邊框尺寸大小bordercolor用來(lái)設(shè)置表格邊框顏色如何設(shè)置背景background屬性用來(lái)設(shè)置表格的背景圖片bgcolor屬性用來(lái)設(shè)置表格、行、列的

2、背景色。RGB指的HTML中顏色的表示方式：“#EBEFFF”是用RGB表示的一種顏色值,是紅綠藍(lán)。如何設(shè)置對(duì)其方式align屬性用來(lái)設(shè)置表格、行、列的對(duì)齊方式為什么要使用填充屬性具體內(nèi)容見ppt什么是填充屬性和間距屬性border（邊框的厚度）cellpadding（單元格填充）cellspacing（單元格間距）如何使用填充、間距屬性border（邊框的厚度）cellpadding（單元格填充）cellspacing（單元格間距）表格的布局什么是表格布局使用表格進(jìn)行布局用表格對(duì)網(wǎng)頁(yè)的內(nèi)容進(jìn)行整體控制DIV+CSS規(guī)劃頁(yè)面什么是CSS?為什么要使用CSS?如何使用CSS?DIV+CSS如何規(guī)

3、劃頁(yè)面？什么是CSS?CSS（CascadingStyleSheet）可譯為“層疊樣式表或級(jí)聯(lián)樣式表”，它定義如何顯示HTML元素，用于控制Web頁(yè)面的外觀。為什么要使用CSS?CSS的特點(diǎn)便于頁(yè)面的修改。便于頁(yè)面風(fēng)格的統(tǒng)一。減少網(wǎng)頁(yè)的體積。為什么要使用CSS?使用CSS布局的優(yōu)點(diǎn)表現(xiàn)和內(nèi)容相分離提高頁(yè)面瀏覽速度易于維護(hù)和改版CSS樣式表極大地提高了工作效率樣式通常保存在外部的.css文件中。通過(guò)僅僅編輯一個(gè)簡(jiǎn)單的CSS文檔,外部樣式表使你有能力同時(shí)改變站點(diǎn)中所有頁(yè)面的布局和外觀。由于允許同時(shí)控制多重頁(yè)面的樣式和布局。作為網(wǎng)站開發(fā)者，你能夠?yàn)槊總€(gè)HTML元素定義樣式，并將之應(yīng)用于你希望的任意多

4、的頁(yè)面中。如需進(jìn)行全局的更新，只需簡(jiǎn)單地改變樣式，然后網(wǎng)站中的所有元素均會(huì)自動(dòng)地更新。如何使用CSS?內(nèi)聯(lián)定義內(nèi)聯(lián)定義即是在對(duì)象的標(biāo)記內(nèi)使用對(duì)象的style屬性定義適用其的樣式表屬性。只針對(duì)標(biāo)簽內(nèi)的元素有效，因其沒(méi)有和內(nèi)容相分離，所以不建議使用。定義內(nèi)部樣式塊對(duì)象你可以在你的HTML文檔的HTML和BODY標(biāo)記之間插入一個(gè)STYLE/STYLE塊對(duì)象。定義方式請(qǐng)參閱樣式表語(yǔ)法。這樣的樣式表只能針對(duì)本頁(yè)有效。不能作用于其它頁(yè)面。導(dǎo)入樣式Style導(dǎo)入與鏈入外部樣式的功能基本相同，只是語(yǔ)法和實(shí)現(xiàn)方式上有差別。它一般常用在另一個(gè)樣式表內(nèi)部。如layout.css為主頁(yè)所用樣式，那么我們可以把全局都需

5、要用的公共樣式放到一個(gè)global.css的文件中，然后在layout.css中以importurl(/css/global.css)的形式鏈接全局樣式，這樣就使代碼達(dá)到很好的重用性。導(dǎo)入樣式一一Link標(biāo)簽導(dǎo)入使用Link標(biāo)簽彳t替Style標(biāo)簽來(lái)導(dǎo)入CSS文件。它的好處是不但本頁(yè)可以調(diào)用，其它頁(yè)面也可以調(diào)用，是最常用的一種形式。CSS樣式和頁(yè)面標(biāo)簽元素的對(duì)應(yīng)方式除了內(nèi)聯(lián)定義是直接作用于標(biāo)簽本身以外，其他CSS使用方式都需要建立標(biāo)簽和樣式之間的映射關(guān)系。主要的映射關(guān)系有：id映射class映射標(biāo)簽映射混合映射幾種樣式的優(yōu)先級(jí)id優(yōu)先級(jí)高于class后面的樣式覆蓋前面的指定的高于繼承行內(nèi)樣式高于內(nèi)部或外部樣式