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

可視化編輯與應(yīng)用CSS樣式Dreamweaver第五章可視化編輯與應(yīng)用CSS樣式共18頁，您現(xiàn)在瀏覽的是第1頁!可視化編輯與應(yīng)用CSS樣式教學目標知識目標 掌握樣式表的創(chuàng)建方法，以及CSS面板的相關(guān)操作技巧 掌握樣式表的應(yīng)用 掌握樣式表的編輯、修改等操作 掌握外部樣式表文件的建立及調(diào)用方法 掌握CSS濾鏡的使用方法Dreamweaver第五章可視化編輯與應(yīng)用CSS樣式共18頁，您現(xiàn)在瀏覽的是第2頁!DreamweaverCS5快速入門能力目標

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

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

Dreamweaver第五章可視化編輯與應(yīng)用CSS樣式共18頁，您現(xiàn)在瀏覽的是第3頁!常用的HTML標簽a超鏈接table表格tr行td單元格th標題單元格div區(qū)塊(層)span文本區(qū)域很小p段落h1-h6標題s加強em強調(diào)b粗體i斜體del刪除線ul項目列表ol編號列表li列表項dl定義列表dd定義說明dt定義術(shù)語Dreamweaver第五章可視化編輯與應(yīng)用CSS樣式共18頁，您現(xiàn)在瀏覽的是第4頁!了解什么叫CSSCSS中文名稱CSS是網(wǎng)頁元素的修飾者選擇符｛屬性１：屬性值;屬性2：屬性值｝CSS什么叫CSSCSS的功能CSS樣式的語法結(jié)構(gòu)Dreamweaver第五章可視化編輯與應(yīng)用CSS樣式共18頁，您現(xiàn)在瀏覽的是第5頁!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="mon.css"/>A

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

內(nèi)聯(lián)方式Dreamweaver第五章可視化編輯與應(yīng)用CSS樣式共18頁，您現(xiàn)在瀏覽的是第6頁!CSS選擇符選擇符就是HTML留給CSS的接口，方便CSS樣式修飾HTML元素類選擇符符合選擇符ID選擇符標簽選擇符Dreamweaver第五章可視化編輯與應(yīng)用CSS樣式共18頁，您現(xiàn)在瀏覽的是第7頁!使用ＣＳＳ樣式ＣＳＳ樣式屬性定義Dreamweaver第五章可視化編輯與應(yīng)用CSS樣式共18頁，您現(xiàn)在瀏覽的是第8頁!創(chuàng)建樣式表調(diào)出CSS樣式面板（shift+F11）點擊CSS面板上“+”按鈕，并選擇“選擇符”填寫相應(yīng)屬性值創(chuàng)建樣式表創(chuàng)建樣式表創(chuàng)建樣式表Dreamweaver第五章可視化編輯與應(yīng)用CSS樣式共18頁，您現(xiàn)在瀏覽的是第9頁!作業(yè)布置作業(yè)布置：利用ＣＳＳ樣式來做汽車用品主頁,頁面布局與特效制作預(yù)習作業(yè)（帶上問題去學習）網(wǎng)頁上樣式的編輯與修改？Dreamweaver第五章可視化編輯與應(yīng)用CSS樣式共18頁，您現(xiàn)在瀏覽的是第10頁!教學重點與難點CSS樣式的調(diào)用方法CSS樣式的各種屬性的應(yīng)用CSS面板的應(yīng)用應(yīng)用DIV+CSS布局網(wǎng)頁

Dreamweaver第五章可視化編輯與應(yīng)用CSS樣式共18頁，您現(xiàn)在瀏覽的是第11頁!常用的HTML標簽

img圖像htmlhtml文檔head文件頭部body整個頁面title網(wǎng)頁標題meta網(wǎng)頁附加信息……Dreamweaver第五章可視化編輯與應(yīng)用CSS樣式共18頁，您現(xiàn)在瀏覽的是第12頁!使用ＣＳＳ樣式ＣＳＳ樣式（層疊樣式表）ＣＳＳ樣式的創(chuàng)建方法１：外聯(lián)式方法２：內(nèi)聯(lián)式方法３：內(nèi)嵌式Dreamweaver第五章可視化編輯與應(yīng)用CSS樣式共18頁，您現(xiàn)在瀏覽的是第13頁!CSS樣式的結(jié)構(gòu)選擇符｛ 屬性1：屬性值;屬性2：屬性值;…………………｝例：img{ width:100px; height:100px;}注：屬性值的單位只有屬性值為0時才能省。Dreamweaver第五章可視化編輯與應(yīng)用CSS樣式共18頁，您現(xiàn)在瀏覽的是第14頁!使用ＣＳＳ樣式常用ＣＳＳ樣式選擇器（選擇符）ＩＤ選擇器類選擇器標簽選擇器關(guān)聯(lián)選擇器組合選擇器通配符選擇器偽類選擇器Dreamweaver第五章可視化編輯與應(yīng)用CSS樣式共18頁，您現(xiàn)在瀏覽的是第15頁!關(guān)于偽類

描述同一對象的不同狀態(tài)a:linka:visiteda:hovera:active描述超鏈接鼠標滑上去狀態(tài)描述超鏈接默認狀態(tài)描述超鏈接被訪問過的狀態(tài)描述超鏈接被激活的狀態(tài)注：以上4個屬性同時出現(xiàn)時，順序不能錯；依次是：link,visited,hover,activeA標簽的偽類Dreamweaver第五章可視化編輯與應(yīng)用CSS樣式共18頁，您現(xiàn)在瀏覽的是第16頁!樣式面板刪除樣式禁用屬性修改屬性添加屬性鏈接外部屬性Dreamweaver第五章可視化編輯與應(yīng)用CSS樣式共18頁，您現(xiàn)在瀏覽的是第17頁!DiagramDescribeavisionofpanyorstrategiccontents.Describeavisionofpanyorstrategiccontents.Describeavisionofpanyorstrategiccontents.TitleinhereTitleinhereTitleinh