《靜態(tài)網頁設計制作》教案全套-教學設計趙健 項目1-12 Dreamweaver 2021概述-時尚資訊網站設計綜合實例

說明一、教案是教師組織實施教學活動必備的教學文件，是教學檢查的必要內容，使用前通常經過系部、學院兩級試教審批，改革課、新開課必須經過系(部)試教審批，學院組織對重點課程進行試教審批。試教未通過、審批手續(xù)不全的不得用于授課。二、教案的編寫應依據人才培養(yǎng)方案和課程標準，教師在充分研究教材的基礎上，區(qū)分教學對象、課程類別、教學內容等進行編寫，應體現任課教師的風格。不同教學班次應使用不同的教案。三、任課教師在授課前應根據學科、專業(yè)、方向的發(fā)展情況、新的教學要求以及教學對象的實際水平，及時補充、修改或重新進行教案的編寫，以保持教學活動的先進性和適用性。四、教案中每次課后應有留給學生的作業(yè)(如思考討論題、學生應查閱的有關書籍資料等)、小結等。課程結束后教案的教學后記中應有課程總結(包括基本情況、好的方面、存在問題、改進措施、意見建議等內容)。五、授課過程中，教案由教師本人負責保管，授課使用結束后由教研室指定專人于每學期結束前統一送至教學檔案室存檔。教案審批表學年度第2學期課程靜態(tài)網頁設計制作授課對象計算機專業(yè)?？粕鷮I(yè)計算機和大數據班級人數80授課學時50（理論25、實驗25）授課地點院部院部領導：年月日學校主管教學副校長：年月日備注年月日《靜態(tài)網頁設計制作》教學方案內容(標題)項目一Dreamweaver2021概述 任務1Dreamweaver2021窗口組成 任務引入 知識準備 一、菜單欄 二、文檔工具欄 三、通用工具欄 四、“插入”面板 五、文檔窗口 六、“屬性”面板 七、浮動面板組 任務2文件操作 任務引入 知識準備 一、打開文件 二、創(chuàng)建文件 三、存儲文件 四、設置文檔屬性 項目總結 項目實戰(zhàn) 實戰(zhàn)一認識Dreamweaver2021界面 實戰(zhàn)二新建HTML文件并保存 課時4教學目標及要求知識目標：熟悉Dreamweaver2021的啟動方法；熟悉Dreamweaver2021的工作界面；掌握Dreamweaver2021的文件操作。能力目標：為后續(xù)學習Dreamweaver2021積累必要的背景知識。素養(yǎng)目標：使學生對Dreamweaver2021有一個較系統和全面的認識。重點難點及其處理重點:（1）Dreamweaver2021窗口組成。（2）文件操作。難點：（1）認識Dreamweaver2021界面。（2）新建HTML文件并保存。處理方法：結合實例，有針對性對學習Dreamweaver2021積累必要的背景知識。教學方法（1）講授（2）加強課堂指導，及時解決學生學習中出現的問題。參考文獻[1].胡漢輝//孔嵐．靜態(tài)網頁設計與制作．ISBN：9787111363415．北京：\o"電子工業(yè)出版社"\o"機械工業(yè)出版社"機械工業(yè)出版社，2016[2].李妍//郭峰//柴俊霞．

Web靜態(tài)網頁設計與排版．ISBN：9787302419471．北京：\o"清華大學出版社"清華大學出版社，2016[3].任長權//李可強//閆鵬飛

．靜態(tài)網頁制作技術教程．ISBN：9787113233990.北京：\o"中國鐵道出版社"中國鐵道出版社，2017及其要求課外作業(yè)（1）新建HTML文件并保存。（2）預習：項目二。備注

《靜態(tài)網頁設計制作》教學方案內容(標題)項目二HTML與CSS基礎 任務1HTML基礎 任務引入 知識準備 一、HTML語言概述 二、HTML的語法特性 任務2常用的HTML標簽 任務引入 知識準備 一、文檔的結構標簽 二、注釋標簽 三、文本格式標簽 四、排版標簽 五、列表標簽 六、表格標簽 七、表單標簽 八、其他標簽 任務3CSS基礎 任務引入 知識準備 一、CSS概述 二、CSS樣式表的組成 任務4CSS設計器 任務引入 知識準備 一、創(chuàng)建和附加樣式表 二、定義媒體查詢 三、定義CSS選擇器 四、設置CSS屬性 綜合案例CSS樣式的應用 項目總結 項目實戰(zhàn) 實戰(zhàn)一編寫網頁文件 實戰(zhàn)二用CSS樣式控制文本樣式 課時6教學目標及要求知識目標：了解HTML語法的3種表達方式；熟悉HTML中常用的一些標簽；掌握創(chuàng)建CSS規(guī)則的方法；學會如何定義媒體查詢；學會如何設置CSS屬性；學會利用CSS樣式定義一些特殊的HTML屬性。能力目標：能夠靈活應用HTML與CSS基礎知識。素養(yǎng)目標：基礎入手，不斷更新所學知識，培養(yǎng)持之以恒的學習態(tài)度。重點難點及其處理重點:（1）常用的HTML標簽。（2）CSS設計器。難點：（1）編寫網頁文件。（2）用CSS樣式控制文本樣式。處理方法：結合實例講授及演示操作；并進行針對性的實訓練習。教學方法（1）講授（2）加強課堂指導，及時解決學生學習中出現的問題。參考文獻[1].胡漢輝//孔嵐．靜態(tài)網頁設計與制作．ISBN：9787111363415．北京：\o"電子工業(yè)出版社"\o"機械工業(yè)出版社"機械工業(yè)出版社，2016[2].李妍//郭峰//柴俊霞．

Web靜態(tài)網頁設計與排版．ISBN：9787302419471．北京：\o"清華大學出版社"清華大學出版社，2016[3].任長權//李可強//閆鵬飛

．靜態(tài)網頁制作技術教程．ISBN：9787113233990.北京：\o"中國鐵道出版社"中國鐵道出版社，2017及其要求課外作業(yè)（1）用CSS樣式控制文本樣。（2）預習：項目三。備注

《靜態(tài)網頁設計制作》教學方案內容(標題)項目三構建本地站點 任務1站點概述 任務引入 知識準備 一、Internet服務器和本地計算機 二、本地站點與遠端站點 任務2構建本地站點 任務引入 知識準備 任務3管理本地站點和站點文件 任務引入 知識準備 一、管理站點 二、操作站點文件或文件夾 任務4站點發(fā)布 任務引入 知識準備 一、配置遠程站點 二、上傳、下載與同步更新 項目總結 項目實戰(zhàn) 實戰(zhàn)一在本機上創(chuàng)建站點bz 實戰(zhàn)二為創(chuàng)建的站點設置服務器 課時4教學目標及要求知識目標：了解服務器與本地計算機的聯系與區(qū)別；了解遠端站點和本地站點的區(qū)別；掌握構建本地站點的方法和步驟；學會打開、編輯、刪除和復制站點；學會創(chuàng)建、刪除、編輯站點文件，刷新本地站點文件列表。能力目標：能夠根據自己的需要掌握構建本地站點的方法。素養(yǎng)目標：學會理論聯系實際，明白實踐是檢驗真理的唯一標準。重點難點及其處理重點：（1）站點概述；（2）站點概述。難點：（1）在本機上創(chuàng)建站點bz。（2）為創(chuàng)建的站點設置服務器。處理方法：結合實例講授及演示操作；并進行針對性的實訓練習。教學方法（1）講授+學生上機練習（2）加強課堂指導，及時解決學生練習中出現的問題。參考文獻[1].胡漢輝//孔嵐．靜態(tài)網頁設計與制作．ISBN：9787111363415．北京：\o"電子工業(yè)出版社"\o"機械工業(yè)出版社"機械工業(yè)出版社，2016[2].李妍//郭峰//柴俊霞．

Web靜態(tài)網頁設計與排版．ISBN：9787302419471．北京：\o"清華大學出版社"清華大學出版社，2016[3].任長權//李可強//閆鵬飛

．靜態(tài)網頁制作技術教程．ISBN：9787113233990.北京：\o"中國鐵道出版社"中國鐵道出版社，2017及其要求課外作業(yè)（1）為創(chuàng)建的站點設置服務器。（2）預習：項目四備注

《靜態(tài)網頁設計制作》教學方案內容(標題)項目四文本與圖像 任務1在網頁中插入文本 任務引入 知識準備 一、插入文本 二、設置文本屬性 三、創(chuàng)建列表項 四、插入日期 任務2在網頁中插入圖像 任務引入 知識準備 一、關于圖像 二、插入圖像 三、圖像的屬性 四、修改圖像尺寸 五、創(chuàng)建翻轉圖像 六、設置背景圖像 項目總結 項目實戰(zhàn) 實戰(zhàn)一在網頁中插入文本和日期 實戰(zhàn)二在網頁中插入圖像和文字 課時4教學目標及要求知識目標：學會在網頁中插入文本并設置文本屬性；學會在網頁中插入日期；學會創(chuàng)建各種鏈接并管理鏈接；學會使用熱點制作圖像映射。能力目標：使學生具備操作網頁中文本與圖像的相關能力。素養(yǎng)目標：體會傳統文化設計作品的構圖精髓，善于發(fā)現和融合特色元素。重點難點及其處理重點：（1）在網頁中插入文本；（2）在網頁中插入圖像。難點：（1）在網頁中插入文本和日期。（2）在網頁中插入圖像和文字。處理方法：結合實例講授及演示操作；并進行針對性的實訓練習。教學方法（1）講授+學生上機練習（2）加強課堂指導，及時解決學生練習中出現的問題。參考文獻[1].胡漢輝//孔嵐．靜態(tài)網頁設計與制作．ISBN：9787111363415．北京：\o"電子工業(yè)出版社"\o"機械工業(yè)出版社"機械工業(yè)出版社，2016[2].李妍//郭峰//柴俊霞．

Web靜態(tài)網頁設計與排版．ISBN：9787302419471．北京：\o"清華大學出版社"清華大學出版社，2016[3].任長權//李可強//閆鵬飛

．靜態(tài)網頁制作技術教程．ISBN：9787113233990.北京：\o"中國鐵道出版社"中國鐵道出版社，2017及其要求課外作業(yè)（1）在網頁中插入圖像和文字。（2）預習：項目五。備注

《靜態(tài)網頁設計制作》教學方案內容(標題)項目五制作超鏈接 任務1認識超級鏈接 任務引入 知識準備 任務2制作、管理超鏈接 任務引入 知識準備 一、創(chuàng)建文本超鏈接 二、創(chuàng)建圖像鏈接 三、鏈接到命名錨點 四、創(chuàng)建E-Mail鏈接 五、虛擬鏈接和腳本鏈接 六、使用“URLs”面板管理超鏈接 任務3使用熱點制作圖像映射 任務引入 知識準備 綜合實例文本與鏈接網頁實例 項目總結 項目實戰(zhàn) 實戰(zhàn)一創(chuàng)建腳本鏈接 實戰(zhàn)二制作圖像映射 課時4教學目標及要求知識目標：學會創(chuàng)建文本、圖像和E-Mail鏈接;學會連接到命名錨點;學會利用“URLs”面板管理超鏈接;學會使用熱點制作圖像映射。能力目標：能夠熟練掌握制作使用超鏈接的相關知識。素養(yǎng)目標：學會不求甚解，實事求是，真正掌握所學內容。重點難點及其處理重點：（1）認識超級鏈接；（2）制作、管理超鏈接。難點：（1）創(chuàng)建腳本鏈接。（2）制作圖像映射。處理方法：結合實例講授及演示操作；并進行針對性的實訓練習。教學方法（1）講授+學生上機練習（2）加強課堂指導，及時解決學生練習中出現的問題。參考文獻[1].胡漢輝//孔嵐．靜態(tài)網頁設計與制作．ISBN：9787111363415．北京：\o"電子工業(yè)出版社"\o"機械工業(yè)出版社"機械工業(yè)出版社，2016[2].李妍//郭峰//柴俊霞．

Web靜態(tài)網頁設計與排版．ISBN：9787302419471．北京：\o"清華大學出版社"清華大學出版社，2016[3].任長權//李可強//閆鵬飛

．靜態(tài)網頁制作技術教程．ISBN：9787113233990.北京：\o"中國鐵道出版社"中國鐵道出版社，2017及其要求課外作業(yè)（1）制作圖像映射。（2）預習：項目六。備注

《靜態(tài)網頁設計制作》教學方案內容(標題)項目六制作多媒體網頁 任務1添加聲音 任務引入 知識準備 一、關于聲音 二、鏈接到音頻文件 三、嵌入音樂文件 任務2HTML5多媒體 任務引入 知識準備 一、插入HTML5視頻 二、設置HTML5視頻屬性 三、插入HTML5音頻 四、設置HTML5音頻屬性 任務3Flash對象 任務引入 知識準備 一、添加Flash動畫 二、插入Flash視頻內容 三、修改Flash視頻屬性 項目總結 項目實戰(zhàn) 實戰(zhàn)一在網頁中添加聲音 實戰(zhàn)二插入Flash視頻 課時4教學目標及要求知識目標：學會在網頁中插添加聲音；學會在網頁中插入HTML5媒體對象；學會在網頁中插入Flash對象。能力目標：能夠掌握制作多媒體網頁的方法。素養(yǎng)目標：培養(yǎng)學生對本課程的興趣以及自主探索能力。重點難點及其處理重點：（1）添加聲音；（2）HTML5多媒體。難點：（1）在網頁中添加聲音;（2）插入Flash視頻。處理方法：結合實例講授及演示操作；并進行針對性的實訓練習。教學方法（1）講授+學生上機練習（2）加強課堂指導，及時解決學生練習中出現的問題。參考文獻[1].胡漢輝//孔嵐．靜態(tài)網頁設計與制作．ISBN：9787111363415．北京：\o"電子工業(yè)出版社"\o"機械工業(yè)出版社"機械工業(yè)出版社，2016[2].李妍//郭峰//柴俊霞．

Web靜態(tài)網頁設計與排版．ISBN：9787302419471．北京：\o"清華大學出版社"清華大學出版社，2016[3].任長權//李可強//閆鵬飛

．靜態(tài)網頁制作技術教程．ISBN：9787113233990.北京：\o"中國鐵道出版社"中國鐵道出版社，2017及其要求課外作業(yè)（1）插入Flash視頻。（2）預習：項目七。備注

《靜態(tài)網頁設計制作》教學方案內容(標題)項目七用表格規(guī)劃網頁 任務1創(chuàng)建表格 任務引入 知識準備 一、創(chuàng)建表格、單元格 二、創(chuàng)建嵌套表格 任務2表格操作 任務引入 知識準備 一、選定表格對象 二、設置表格和單元格屬性 三、擴展表格模式 四、增加、刪除行或列 五、拆分、合并單元格 六、在表格中添加內容 七、復制、粘貼單元格 八、導出/導入表格數據 九、表格排序 綜合案例利用表格布局頁面 項目總結 項目實戰(zhàn) 實戰(zhàn)一創(chuàng)建表格和嵌套表格 實戰(zhàn)二對表格進行排序 課時4教學目標及要求知識目標：學會創(chuàng)建表格、設置表格和單元格屬性;掌握表格的各種操作。能力目標：能夠讓學生掌握用表格規(guī)劃網頁的方法。素養(yǎng)目標：注重培養(yǎng)分析能力，主動拓寬自己的視野，充分發(fā)揮創(chuàng)造力。重點難點及其處理重點：（1）創(chuàng)建表格；（2）表格操作。難點：（1）創(chuàng)建表格和嵌套表格；（2）對表格進行排序。處理方法：結合實例講授及演示操作；并進行針對性的實訓練習。教學方法（1）講授+學生上機練習（2）加強課堂指導，及時解決學生練習中出現的問題。參考文獻[1].胡漢輝//孔嵐．靜態(tài)網頁設計與制作．ISBN：9787111363415．北京：\o"電子工業(yè)出版社"\o"機械工業(yè)出版社"機械工業(yè)出版社，2016[2].李妍//郭峰//柴俊霞．

Web靜態(tài)網頁設計與排版．ISBN：9787302419471．北京：\o"清華大學出版社"清華大學出版社，2016[3].任長權//李可強//閆鵬飛

．靜態(tài)網頁制作技術教程．ISBN：9787113233990.北京：\o"中國鐵道出版社"中國鐵道出版社，2017及其要求課外作業(yè)（1）對表格進行排序。（2）預習：項目八備注《靜態(tài)網頁設計制作》教學方案內容(標題)項目八Div+CSS布局 任務1Div+CSS概述 任務引入 知識準備 任務2CSS盒模型 任務引入 知識準備 一、CSS盒模型簡介 二、常用的盒模型屬性 任務3CSS層疊順序 任務引入 知識準備 一、外部樣式 二、內部樣式 三、行內樣式 四、導入樣式 任務4CSS布局塊 任務引入 知識準備 一、創(chuàng)建div標簽 二、編輯div標簽 三、可視化CSS布局塊 任務5常用CSS布局版式 任務引入 知識準備 一、一列布局 二、兩列布局 三、三列布局 綜合案例Div標簽應用實例 項目總結 項目實戰(zhàn) 實戰(zhàn)一制作簡易公告欄 實戰(zhàn)二利用CSS規(guī)則隱藏布局塊 課時4教學目標及要求知識目標：了解CSS盒模型的屬性；了解CSS的四種樣式的區(qū)別；學會創(chuàng)建和編輯div標簽以及設置CSS布局塊的可視化；學會創(chuàng)建常用的CSS布局版式。能力目標：能夠讓學生利用div+css布局網頁。素養(yǎng)目標：培養(yǎng)積極探索、迎難而上，培養(yǎng)堅持不懈的科學精神。重點難點及其處理重點：（1）Div+CSS概述。（2）CSS盒模型。難點：（1）制作簡易公告欄。（2）利用CSS規(guī)則隱藏布局塊。處理方法：結合實例講授及演示操作；并進行針對性的實訓練習。教學方法（1）講授+學生上機練習（2）加強課堂指導，及時解決學生練習中出現的問題。參考文獻[1].胡漢輝//孔嵐．靜態(tài)網頁設計與制作．ISBN：9787111363415．北京：\o"電子工業(yè)出版社"\o"機械工業(yè)出版社"機械工業(yè)出版社，2016[2].李妍//郭峰//柴俊霞．

Web靜態(tài)網頁設計與排版．ISBN：9787302419471．北京：\o"清華大學出版社"清華大學出版社，2016[3].任長權//李可強//閆鵬飛

．靜態(tài)網頁制作技術教程．ISBN：9787113233990.北京：\o"中國鐵道出版社"中國鐵道出版社，2017及其要求課外作業(yè)（1）利用CSS規(guī)則隱藏布局塊。（4）預習：項目九。備注《靜態(tài)網頁設計制作》教學方案內容(標題)項目九應用表單 任務1創(chuàng)建表單網頁 任務引入 知識準備 一、插入表單 二、文本字段和文件域 三、選擇框 四、單選按鈕與復選框 五、按鈕 六、圖像按鈕 七、隱藏域 任務2處理表單 任務引入 知識準備 項目總結項目實戰(zhàn) 實戰(zhàn)一文檔中插入文本字段 實戰(zhàn)二在文檔中插入復選按鈕組 課時4教學目標及要求知識目標：學會插入表單，在表單中插入文本字段和文件域；學會插入選擇框、單選按鈕和復選框；學會插入圖像按鈕和其他各種按鈕；學會處理表單。能力目標：能夠掌握表單的插入和應用方法。素養(yǎng)目標：培養(yǎng)認真細致的工作作風和精益求精的工匠精神。重點難點及其處理重點：（1）創(chuàng)建表單網頁；（2）處理表單。難點：（1）文檔中插入文本字段。（2）在文檔中插入復選按鈕組。處理方法：結合實例講授及演示操作；并進行針對性的實訓練習。教學方法（1）講授+學生上機練習（2）加強課堂指導，及時解決學生練習中出現的問題。參考文獻[1].胡漢輝//孔嵐．靜態(tài)網頁設計與制作．ISBN：9787111363415．北京：\o"電子工業(yè)出版社"\o"機械工業(yè)出版社"機械工業(yè)出版社，2016[2].李妍//郭峰//柴俊霞．

Web靜態(tài)網頁設計與排版．ISBN：9787302419471．北京：\o"清華大學出版社"清華大學出版社，2016[3].任長權//李可強//閆鵬飛

．靜態(tài)網頁制作技術教程．ISBN：9787113233990.北京：\o"中國鐵道出版社"中國鐵道出版社，2017及其要求課外作業(yè)（1）在文檔中插入復選按鈕組。（2）預習：項目十。備注《靜態(tài)網頁設計制作》教學方案內容(標題)項目十模板與庫 任務1模板 任務引入 知識準備 一、“模板”面板 二、建立模板 三、定義可編輯區(qū)域 四、定義重復區(qū)域 五、定義可選區(qū)域 六、定義嵌套模板 七、應用模板創(chuàng)建文檔 八、應用模板到頁 九、修改模板并更新站點 十、管理模板 任務2庫 任務引入 知識準備 一、庫面板 二、創(chuàng)建及使用庫項目 三、操作庫項目 綜合案例模板與庫的應用 項目總結 項目實戰(zhàn) 實戰(zhàn)一在模板文檔中插入可選區(qū)域 實戰(zhàn)二制作版權聲明 課時4教學目標及要求知識目標：學會建立模板并設置模板屬性；學會定義可編輯、重復和可選區(qū)域；學會定義嵌套模板以及應用模板創(chuàng)建網頁；學會創(chuàng)建庫項目和操作庫項目。能力目標：能夠掌握發(fā)布與部署的方法。素養(yǎng)目標：在掌握技能目標的同時，培養(yǎng)讀者融會貫通、嚴謹務實的優(yōu)秀品質。重點難點及其處理重點：（1）模板；（2）庫。 難點：（1）在模板文檔中插入可選區(qū)域。（2）制作版權聲明。處理方法：結合實例講授及演示操作；并進行針對性的實訓練習。教學方法（1）講授+學生上機練習（2）加強課堂指導，及時解決學生練習中出現的問題。參考文獻[1].胡漢輝//孔嵐．靜態(tài)網頁設計與制作．ISBN：9787111363415．北京：\o"電子工業(yè)出版社"\o"機械工業(yè)出版社"機械工業(yè)出版社，2016[2].李妍//郭峰//柴俊霞．

Web靜態(tài)網頁設計與排版．ISBN：9787302419471．北京：\o"清華大學出版社"清華大學出版社，2016[3].任長權//李可強//閆鵬飛

．靜態(tài)網頁制作技術教程．ISBN：9787113233990.北京：\o"中國鐵道出版社"中國鐵道出版社，2017及其要求課外作業(yè)（1）制作版權聲明。（2）預習：項目十一。備注《靜態(tài)網頁設計制作》教學方案內容(標題)項目十一Dreamweaver2021的內置行為 任務1行為概述 任務引入 知識準備 一、事件與動作 二、“行為”面板 三、附加行為到頁面元素 四、編輯行為 任務2Dreamweaver2021的內置行為 任務引入 知識準備 一、調用JavaScript 二、改變屬性 三、檢查插件 四、jQuery效果 五、轉到URL 六、交換圖像/恢復交換圖像 七、彈出信息 八、打開瀏覽器窗口 九、顯示-隱藏元素 十、檢查表單 十一、設置文本 十二、預先載入圖像 項目總結 項目實戰(zhàn) 實戰(zhàn)一為網頁按鈕調用JavaScript行為 實戰(zhàn)二改變標簽的屬性 課時4教學目標及要求知識目標：了解事件和動作的概念以及“行為”面板的功能；學會附加行為到頁面元素以及編輯行為；學會創(chuàng)建Dreamweaver幾種常見的內置行為。能力目標：能夠學會創(chuàng)建Dreamweaver幾種常見的內置行為。素養(yǎng)目標：學會理論聯系實際，明白實踐是檢驗真理的唯一標準。重點難點及其處理重點：（1）行為概述；（2）Dreamweaver2021的內置行為。 難點：（1）為網頁按鈕調用JavaScript行為。（2）改變標簽的屬性。處理方法：結合實例講授及演示操作；并進行針對性的實訓練習。教學方法（1）講授+學生上機練習（2）加強課堂指導，及時解決學生練習中出現的問題。參考文獻[1].胡漢輝//孔嵐．靜態(tài)網頁設計與制作．ISBN：97871113634