1、電子商務(wù)網(wǎng)頁設(shè)計課程教案項目七授課教師班級學(xué)時2授課日期多媒體教室企業(yè)主題或任務(wù)使用CSS 控制頁面元素課型專業(yè)課授課地點 專業(yè)教室實訓(xùn)室1、知識目標(biāo)：理解CSS 樣式表的含義、分類2技能目標(biāo)掌握利用樣式面板創(chuàng)建及編輯 CSS 樣式表的方法根據(jù)實際需求創(chuàng)建及應(yīng)教學(xué)目標(biāo)CSS樣式表控制頁面元素3、素質(zhì)目標(biāo)：樹立學(xué)生創(chuàng)新設(shè)計電商網(wǎng)站的意識CSS重點：理解CSS學(xué)習(xí)內(nèi)容教學(xué)方法掌握利用樣式面板創(chuàng)建及編輯CSS 樣式表的方法根據(jù)實際需求創(chuàng)建及應(yīng)用CSS樣式表點控制頁面元素素理論講授 小組討論 項目教學(xué)材任務(wù)驅(qū)動 參觀教學(xué) 模擬教學(xué)資實驗實訓(xùn) 演示教學(xué) 其他源本章分 2 次進(jìn)行授課，每次 90 分鐘，具

2、體:類掌握利用樣式面板創(chuàng)建及編輯樣式表的方法CSS樣式表控制頁面元素文本素材實物展示PPT 幻燈片音頻素材視頻素材動畫素材/圖像素材網(wǎng)絡(luò)資源其他任務(wù)一使用CSS設(shè)置頁面、文本、段落的格式課程內(nèi)容回顧宣布教學(xué)內(nèi)容、目的新知導(dǎo)入（10分鐘參考說辭：本項目主要介紹如何利用CSS 樣式,對網(wǎng)頁中的文本、段落、表格、表單、圖像、超鏈教學(xué)設(shè)計接等各種元素的格式進(jìn)行設(shè),使網(wǎng)頁制作過程中內(nèi)容的添加與格式設(shè)置分離開,令網(wǎng)更加美風(fēng)格得到統(tǒng)并能減少工作,便于站點維護(hù)和管理。任務(wù)分析(5 分鐘)：本任務(wù)是使用Dreamweaver 2020 中的樣式面板,創(chuàng)建嵌入式CSS 樣式表,分別對網(wǎng)頁的頁面邊距、文字、段落等格

3、式進(jìn)行控制,詳細(xì)設(shè)置如下:設(shè)置超鏈接無下劃線，還有其它狀態(tài)下的顏色設(shè)置。131.5添加 CSS 前后的網(wǎng)頁效果,分別如圖 71 和圖 72 所示。圖71添加CSS前的網(wǎng)頁效果圖72添加CSS后的網(wǎng)頁效果互動討論：通過觀察，讓學(xué)生看看圖中添加CSS前后的網(wǎng)頁效果呈現(xiàn)。2、教學(xué)內(nèi)容(30 分鐘)1.CSSCSSCSSCSSCSS任務(wù)實施，實操（40分鐘）CS的操作方法。學(xué)生按要求上機(jī)實踐完成任務(wù)。教師指導(dǎo)檢查任務(wù)完成效果。打開上次站點下的index.html在CSSbody重新定義bodymargin07-10圖710重新定義“body”標(biāo)簽由于上述操作是對HTML 中的標(biāo)簽“711圖711重新定

4、義body標(biāo)簽后的網(wǎng)頁效果htm7-12圖 7-12 屬性面板根據(jù)上面的方法，依次給其它文字加上鏈接，如圖7-13圖 7-13 鏈接文字在CSSa:linka:linktext-decoration7-14項，取消鏈接7-14重新定義“a:link”標(biāo)簽超鏈接有主要有四種狀態(tài)分別是 未訪問過的鏈接的樣式； 是 是鼠標(biāo)點擊鏈接的樣式； 是訪問過的鏈接的樣式，我們剛才設(shè)置了a:linka:hover 的文本中的color7-15a:visitedgreen。7-15重新定義“a:hover”標(biāo)簽完成設(shè)置之后，保存網(wǎng)頁按F127-16圖 7-16 網(wǎng)頁效果教師小結(jié)（5分鐘）掌握使用CSS 設(shè)置頁面、

5、文本、段落的格式任務(wù)二使用CSS設(shè)置表格元素外觀任務(wù)分析(5 分鐘)：本任務(wù)使用Dreamweaver 2020CSS單元格等元素的外觀進(jìn)行美化,詳細(xì)設(shè)置如下:(1)商品詳情單元格內(nèi)的文字效果設(shè)置:華文新魏、20 像素，背景色#DCC0B4; (2)內(nèi)容單元格文字效果設(shè)置:華文新魏、16 像素、顏色棕色（brown）;添加 CSS 前后的網(wǎng)頁效果,分別如圖 717 和圖 718 所示。圖717添加CSS前的網(wǎng)頁效果圖718添加CSS后的網(wǎng)頁效果互動討論：CSS為什么？任務(wù)實施（35 分鐘）1. 教師布置任務(wù)，發(fā)送網(wǎng)頁素材和效果圖，演示使用CSS 設(shè)置表格元素外觀的操作方法。2學(xué)生按要求上機(jī)實踐

6、完成任務(wù)。教師指導(dǎo)檢查任務(wù)完成效果。CSS”,7-19圖 7-19 新建文檔對話框在CSS.headertbheadertbclass，在屬性組下設(shè)置字體：font-familyfont-size20px，設(shè)置背景顏色：background-color: CSS在CSS.contenttb新建名字為contenttb 的 font-size 為 16px，字體顏色：color: CSS7-20圖 7-20 CSS 文件提示：如果手寫 CSS 可以借助 dreamweaver 簡寫和快捷鍵來提高編寫效率，如輸入“font-size:16pxdreamweaverfz1”再按Tab就行了。ctrl

7、+smycss.css。打開站點下 index.html7-21圖 7-21 插入表格對話框7-22圖 7-22 插入表格效果圖CSS 文件對話框中瀏覽并選擇剛剛新建的 mycss.css 文件，單擊“確定”返回，如圖 7-23 所示。在index.html 這段引用。圖 7-23 使用現(xiàn)有的CSS 文件對話框CSS 項中，目標(biāo)規(guī)則下拉列表中選擇.headertb，將其應(yīng)用到表格單元格中，如圖7-23圖 7-23 屬性面板選擇表格第二行的單元格，在屬性面板CSS 項中，目標(biāo)規(guī)則下拉列表中選擇.contenttb，將其應(yīng)用到表格單元格,保存文件，按F12預(yù)覽最后效果，如圖7-24示。圖 7-24

8、 最后效果教學(xué)小結(jié)（5 分鐘）本任務(wù)使用Dreamweaver 2020CSS單元格等元素的外觀進(jìn)行美化。任務(wù)三 使用 CSS 設(shè)置表單項目外觀任務(wù)分析(5 分鐘)：CSS 樣式設(shè)置本任務(wù)使用Dreamweaver 2020 中的CSS 設(shè)計器,創(chuàng)建CSS 樣式表,對頁面中各種表單項目的外觀進(jìn)行美化,詳細(xì)設(shè)置如下:設(shè)置按鈕與數(shù)值表單控件的屬性2030:0 像素，字體顏色：白色，字號為 36px添加 CSS 后的網(wǎng)頁效果,如圖 733 所示。圖 733 添加 CSS 后的網(wǎng)頁效果教學(xué)內(nèi)容（5 分鐘）表單(1)表單文本復(fù)選框單選按鈕單選按鈕組按鈕標(biāo)簽任務(wù)實施（30 分鐘）1. 教師布置任務(wù)，發(fā)送網(wǎng)

9、頁素材和效果圖，演示使用CSS 設(shè)置表單項目外觀的操作方法。2學(xué)生按要求上機(jī)實踐完成任務(wù)。3教師指導(dǎo)檢查任務(wù)完成效果。(1) 打開站點下的index.html7-28所示。圖 7-28 插入表單427-29圖 7-29 表格文字通過屬性面板設(shè)置的CSS 項，設(shè)置表格中的文字為宋體，大小為12px36px#ddc1857-30圖 7-30 設(shè)置表格 CSS在第三行，第二列的表格中選擇菜單欄的“插入”“表單”“數(shù)字7-31圖 7-31 插入表單元件選擇表單的數(shù)字，刪除前面的字母，在屬性面板的value 中輸入 1量為。再選擇按鈕在屬性面板的value中輸入“加入購物車7-32所示。圖 7-32 設(shè)置表單在CSS.mybutton：color#ffffffont-size為36pborder為0p，背景顏色：background-colorred7-33圖 7-33 CSS 設(shè)計器class中選擇我們才建立的mybutto，將7-34圖 7-34 應(yīng)用 CSS在CSS.shortnum設(shè)置寬度：width20px，高度：height30px7-35圖 7-35 CSS 設(shè)計器class 中選擇我們才建立的CSS F127-36圖 7-36 最后效果項目總結(jié)（5 分鐘）本項目是利用 CSS格式進(jìn)行設(shè)置,使網(wǎng)頁制作過程中內(nèi)容的添加與格式設(shè)置分離開來,令網(wǎng)頁更加美觀