Dreamweaver可視化編輯與應(yīng)用CSS樣式

會(huì)計(jì)學(xué)1Dreamweaver可視化編輯與應(yīng)用CSS樣式DreamweaverCS5快速入門能力目標(biāo)

a.掌握CSS應(yīng)用

b.能用CSS+DIV布局頁(yè)面情感目標(biāo)（1）培養(yǎng)學(xué)生對(duì)本學(xué)科的學(xué)習(xí)興趣。（2）培養(yǎng)學(xué)生嚴(yán)謹(jǐn)求實(shí)的工作態(tài)度以及感受美、評(píng)價(jià)美的藝術(shù)情操。（3）培養(yǎng)學(xué)生在進(jìn)行自主學(xué)習(xí)的過(guò)程中勇于克服困難，體驗(yàn)到成功后的快樂(lè)。

第1頁(yè)/共17頁(yè)教學(xué)重點(diǎn)與難點(diǎn)CSS樣式的調(diào)用方法CSS樣式的各種屬性的應(yīng)用CSS面板的應(yīng)用應(yīng)用DIV+CSS布局網(wǎng)頁(yè)

第2頁(yè)/共17頁(yè)常用的HTML標(biāo)簽a超鏈接table表格tr行td單元格th標(biāo)題單元格div區(qū)塊(層)span文本區(qū)域很小p段落h1-h6標(biāo)題s加強(qiáng)em強(qiáng)調(diào)b粗體i斜體del刪除線ul項(xiàng)目列表ol編號(hào)列表li列表項(xiàng)dl定義列表dd定義說(shuō)明dt定義術(shù)語(yǔ)第3頁(yè)/共17頁(yè)常用的HTML標(biāo)簽

img圖像htmlhtml文檔head文件頭部body整個(gè)頁(yè)面title網(wǎng)頁(yè)標(biāo)題meta網(wǎng)頁(yè)附加信息……第4頁(yè)/共17頁(yè)了解什么叫CSSCSS中文名稱CSS是網(wǎng)頁(yè)元素的修飾者選擇符｛屬性１：屬性值;屬性2：屬性值｝CSS什么叫CSSCSS的功能CSS樣式的語(yǔ)法結(jié)構(gòu)第5頁(yè)/共17頁(yè)使用ＣＳＳ樣式ＣＳＳ樣式（層疊樣式表）ＣＳＳ樣式的創(chuàng)建方法１：外聯(lián)式方法２：內(nèi)聯(lián)式方法３：內(nèi)嵌式第6頁(yè)/共17頁(yè)CSS樣式的創(chuàng)建方法<imgsrc=“img/1.jpg”style=“width:120px;height:100px;”/><styletype=“text/css”>img{Width:120px;Height:100px;}</style><linktype="text/css"rel="stylesheet"href="common.css"/>A

標(biāo)簽內(nèi)分隔符C外聯(lián)方式B

內(nèi)聯(lián)方式第7頁(yè)/共17頁(yè)CSS樣式的結(jié)構(gòu)選擇符｛ 屬性1：屬性值;屬性2：屬性值;…………………｝例：img{ width:100px; height:100px;}注：屬性值的單位只有屬性值為0時(shí)才能省。第8頁(yè)/共17頁(yè)CSS選擇符選擇符就是HTML留給CSS的接口，方便CSS樣式修飾HTML元素類選擇符符合選擇符ID選擇符標(biāo)簽選擇符第9頁(yè)/共17頁(yè)使用ＣＳＳ樣式常用ＣＳＳ樣式選擇器（選擇符）ＩＤ選擇器類選擇器標(biāo)簽選擇器關(guān)聯(lián)選擇器組合選擇器通配符選擇器偽類選擇器第10頁(yè)/共17頁(yè)使用ＣＳＳ樣式ＣＳＳ樣式屬性定義第11頁(yè)/共17頁(yè)關(guān)于偽類

描述同一對(duì)象的不同狀態(tài)a:linka:visiteda:hovera:active描述超鏈接鼠標(biāo)滑上去狀態(tài)描述超鏈接默認(rèn)狀態(tài)描述超鏈接被訪問(wèn)過(guò)的狀態(tài)描述超鏈接被激活的狀態(tài)注：以上4個(gè)屬性同時(shí)出現(xiàn)時(shí)，順序不能錯(cuò)；依次是：link,visited,hover,activeA標(biāo)簽的偽類第12頁(yè)/共17頁(yè)創(chuàng)建樣式表調(diào)出CSS樣式面板（shift+F11）點(diǎn)擊CSS面板上“+”按鈕，并選擇“選擇符”填寫(xiě)相應(yīng)屬性值創(chuàng)建樣式表創(chuàng)建樣式表創(chuàng)建樣式表第13頁(yè)/共17頁(yè)樣式面板刪除樣式禁用屬性修改屬性添加屬性鏈接外部屬性第14頁(yè)/共17頁(yè)作業(yè)布置作業(yè)布置：利用ＣＳＳ樣式來(lái)做汽車用品主頁(yè),頁(yè)面布局與特效制作預(yù)習(xí)作業(yè)（帶上問(wèn)題去學(xué)習(xí)）網(wǎng)頁(yè)上樣式的編輯與修改？第15頁(yè)/共17頁(yè)DiagramDescribeavisionofcompanyorstrategiccontents.Describeavisionofcompanyorstrategiccontents.Describeavisionofcompanyorstrategiccontents.TitleinhereTitleinhereTitleinher