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

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

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

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

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

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

img圖像htmlhtml文檔head文件頭部body整個頁面title網(wǎng)頁標(biāo)題meta網(wǎng)頁附加信息……第4頁/共17頁了解什么叫CSSCSS中文名稱CSS是網(wǎng)頁元素的修飾者選擇符｛屬性１：屬性值;屬性2：屬性值｝CSS什么叫CSSCSS的功能CSS樣式的語法結(jié)構(gòu)第5頁/共17頁使用ＣＳＳ樣式ＣＳＳ樣式（層疊樣式表）ＣＳＳ樣式的創(chuàng)建方法１：外聯(lián)式方法２：內(nèi)聯(lián)式方法３：內(nèi)嵌式第6頁/共17頁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頁/共17頁CSS樣式的結(jié)構(gòu)選擇符｛ 屬性1：屬性值;屬性2：屬性值;…………………｝例：img{ width:100px; height:100px;}注：屬性值的單位只有屬性值為0時才能省。第8頁/共17頁CSS選擇符選擇符就是HTML留給CSS的接口，方便CSS樣式修飾HTML元素類選擇符符合選擇符ID選擇符標(biāo)簽選擇符第9頁/共17頁使用ＣＳＳ樣式常用ＣＳＳ樣式選擇器（選擇符）ＩＤ選擇器類選擇器標(biāo)簽選擇器關(guān)聯(lián)選擇器組合選擇器通配符選擇器偽類選擇器第10頁/共17頁使用ＣＳＳ樣式ＣＳＳ樣式屬性定義第11頁/共17頁關(guān)于偽類

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