《網(wǎng)站設計與建設》教案

安徽大學本科教學課程教案彳行拳照誠課程名稱： 網(wǎng)站設計與建設 課程代碼： KJ36010 開課單位： 安徽大學計算機科學與技術學院授課教師： 職^/學位： 館員/碩士 開課時間：二。一六至二。一七學年第二學期

課程基本情況課程編號(2016-2017-2)-KJ36010-09055-押程1名稱網(wǎng)站設計與建設教學單位安徽大學計算機科學與技術學院課程學分2考核方式■考試口考查口其他方式： 課程類別□公共基礎課口專業(yè)必修課（包括專業(yè)基礎課和專業(yè)核心課） 口專業(yè)選修課■人文與科技素質教育課 口其他課程 學時數(shù)總學時： 36 理論學時： 24 實驗學時：12 上機學時： 任課教師顧偉職稱館員教師來源■本校教師□外聘教師使用教材■統(tǒng)編教材口自編教材或講義書名作者出版社出版時間教材網(wǎng)頁制作與網(wǎng)站設計（第三版）陽西述華中科技大學出版社2016年08月教學參考用書網(wǎng)站設計與Web應用開發(fā)技術（第二版）吳偉敏清華大學出版社2015年HTML5+CSS3網(wǎng)站設計基礎教程人民郵電出版社傳智播客高教產品研發(fā)部2016年

周次1 課時數(shù) 3教學章節(jié)網(wǎng)頁設計基礎知識及相關輔助設計工具Dreamweaver的使用教學目標和要求通過本次課程的學習，明確網(wǎng)頁基礎知識、網(wǎng)站開發(fā)流程，并學會使用網(wǎng)頁制作軟件Dreamweaver。教學重點1、網(wǎng)站開發(fā)流程2、Dreamweaver的使用教學難點Dreamweaver中表格、框架的使用主要教學方式■課堂講授 口小組活動 口實驗演示 □難點答疑 口提問□作業(yè)講評 口實踐教學 口考試測驗 口其他活動 使用媒體資源□文字教材 ■電子教案 口錄像材料 口錄音材料 口直播課堂□CAI課件 口IP課件 口其他資源： 作業(yè)或練習使用Dreamweaver，設計—個簡單的網(wǎng)頁頁面。板書設計（空白不夠可添加附頁）

教學環(huán)節(jié)主要教學內容學生活動安排導入新課認識網(wǎng)頁設計網(wǎng)頁設計背景常見網(wǎng)頁的組成元素設計工具及設計方法簡介網(wǎng)頁布局方式網(wǎng)頁色彩要素搭配網(wǎng)站制作的一般步驟認識DreamweaverCS6工作界面工作界面及視圖標題欄和菜單欄多文檔窗口編輯界面面板組“屬性”面板不同風格的界面站點管理為什么要創(chuàng)建站點創(chuàng)建站點編輯站點復制與刪除站點導入和導出站點網(wǎng)頁操作創(chuàng)建并保存網(wǎng)頁文檔設置網(wǎng)頁屬性預覽網(wǎng)頁表格的基本操作插入表格設置表格屬性在表格中添加內容操作行或列拆分與合并單元格插入嵌套表格擴展表格模式表格中所使用的屬性使用表格進行網(wǎng)頁布局框架布局框架集和框架的概念框架集和框架的基本操作設置框架集和框架的屬性內嵌式框架的應用布置作業(yè)使用Dreamweaver，設計—個簡單的網(wǎng)頁頁面。

周次2 課時數(shù) 3教學章節(jié)繼續(xù)講解網(wǎng)站設計工具Dreamweaver的使用教學目標和要求通過本次課程的學習，學會并能熟練使用Dreamweaver。教學重點Dreamweaver的文本、圖像、Spry、超鏈接、表單使用。教學難點Dreamweaver的表單的使用主要教學方式■課堂講授 口小組活動 口實驗演示 □難點答疑 口提問□作業(yè)講評 口實踐教學 口考試測驗 口其他活動 使用媒體資源□文字教材 ■電子教案 口錄像材料 口錄音材料 口直播課堂□CAI課件 口IP課件 口其他資源： 作業(yè)或練習使用Dreamweaver設計一個簡單的能展示多媒體元素的網(wǎng)站。板書設計（空白不夠可添加附頁）

教學環(huán)節(jié)主要教學內容學生活動安排導入新課在網(wǎng)頁中添加文本文本的基本操作設置文本字體和大小設置文本顏色設置文本樣式設置文本對齊方式插入和設置水平線插入特殊符號、時間和注釋在網(wǎng)頁中添加段落將文本設置為段落將文本設置為標題設置空格和段落縮進在網(wǎng)頁中添加圖像了解圖像格式并學會插入并設置圖像插入并設置圖像占位符插入鼠標經過圖像添加背景圖像認識及應用超級鏈接認識并添加超級鏈接為現(xiàn)有文本添加超級鏈接添加電子郵件超級鏈接添加錨記、腳本鏈接和空鏈接添加圖像超級鏈接熱點鏈接應用Spry菜單插入和編輯菜單欄Widget更改菜單欄Widget的方向更改菜單欄Widget的尺寸在頁面中使用Flash對象插入SWF格式的Flash文件調整Flash文件顯示的大小Flash相關信息設置Flash播放控制Flash邊距調整對齊方式及背景顏色設置Flash附加參數(shù)設置插入其他多媒體對象插入并設置FLV視頻文件認識并插入Shockwave影片在網(wǎng)頁中插入背景音樂布置作業(yè)使用Dreamweaver設計一個簡單的能展示多媒體元素的網(wǎng)站。

周次3 課時數(shù) 3教學章節(jié)講解HTML的使用教學目標和要求通過本次課程的學習，初步了解HTML語言，并能使用簡單的HTML標記。教學重點HTML文件結構、head部分中的常用標記及body中的文本格式標記。教學難點body中的文本格式標記主要教學方式■課堂講授 口小組活動 口實驗演示 □難點答疑 口提問□作業(yè)講評 口實踐教學 口考試測驗 口其他活動 使用媒體資源□文字教材 ■電子教案 口錄像材料 口錄音材料 口直播課堂□CAI課件 口IP課件 口其他資源： 作業(yè)或練習正確使用HTML語言書寫網(wǎng)頁。板書設計（空白不夠可添加附頁）

教學環(huán)節(jié)主要教學內容學生活動安排導入新課HTML語言的發(fā)展過程HTML語言的概念HTML文件結構＜head＞部分的文件標記（1）＜meta＞標記（2）＜title＞標記＜body＞中的文本格式標記（1）標題標記（2）換行標記（3）段落標記（4）字型標記（5）字符樣式標記（6）水平線標記（7）預定義標記（8）特殊符號標記布置作業(yè)使用HTML設計一個簡單的能展示多媒體元素的網(wǎng)站。

周次4 課時數(shù) 3教學章節(jié)繼續(xù)講解HTML的使用教學目標和要求通過本次課程的學習，熟悉HTML語言，并能正確運用HTML語言制作簡單1網(wǎng)頁。教學重點列表標記、多媒體元素標記、超鏈接標記、表格標記、框架標記和表單標記教學難點多媒體元素標記、表格標記和表單標記主要教學方式■課堂講授 口小組活動 口實驗演示 □難點答疑 口提問□作業(yè)講評 口實踐教學 口考試測驗 口其他活動 使用媒體資源□文字教材 ■電子教案 口錄像材料 口錄音材料 口直播課堂□CAI課件 口IP課件 口其他資源： 作業(yè)或練習正確使用HTML語言書寫網(wǎng)頁。板書設計（空白不夠可添加附頁）

教學環(huán)節(jié)主要教學內容學生活動安排導入新課一、繼續(xù)學習HTML語言標記的使用列表標記多媒體元素標記超鏈接標記表格標記框架標記表單標記二、通過3個實例，分析如何使用HTML語言制作實際的復雜網(wǎng)頁；布置作業(yè)使用HTML語言設計一個簡單的網(wǎng)站。

周次5 課時數(shù) 3教學章節(jié)CSS樣式的使用教學目標和要求通過本次課程的學習，了解CSS基本知識和語法規(guī)則，并能正確運用CSS設置樣式。教學重點CSS樣式的設置教學難點CSS樣式的設置主要教學方式■課堂講授 口小組活動 口實驗演示 □難點答疑 口提問□作業(yè)講評 口實踐教學 口考試測驗 口其他活動 使用媒體資源□文字教材 ■電子教案 口錄像材料 口錄音材料 口直播課堂□CAI課件 口IP課件 口其他資源： 作業(yè)或練習CSS樣式的設置板書設計（空白不夠可添加附頁）

教學環(huán)節(jié)主要教學內容學生活動安排導入新課1、簡介CSSCSS的語法規(guī)則CSS的作用4、選擇器的定義（1）派生選擇器（2）id選擇器（3）類選擇器（4）屬性選擇器5、創(chuàng)建CSS（1）外部樣式表（2）內部樣式表（3）內聯(lián)樣式表6、偽類7、濾鏡的使用8、CSS樣式（1）CSS背景（2）CSS文本（3）CSS字體（4）CSS鏈接（5）CSS列表（6）CSS表格布置作業(yè)使用CSS設置樣式。

周次6 課時數(shù) 3教學章節(jié)講解CSS布局教學目標和要求通過本次課程的學習，熟悉使用CSS對頁面進行布局。教學重點框模型、定位教學難點定位主要教學方式■課堂講授 □小組活動 □實驗演示 □難點答疑 □提問□作業(yè)講評 □實踐教學 □考試測驗 □其他活動 使用媒體資源□文字教材 ■電子教案 □錄像材料 □錄音材料 □直播課堂□CAI課件 □IP課件 □其他資源： 作業(yè)或練習正確使用HTML語言書寫網(wǎng)頁。板書設計（空白不夠可添加附頁）

教學環(huán)節(jié)主要教學內容學生活動安排導入新課1、CSS框模型（1）CSS框模型概述（2）CSS內邊距（3）CSS邊框（4）CSS外邊距（5）CSS外邊距合并2、CSS定位（1）CSS定位概述（2）CSS相對定位（3）CSS絕對定位（4）CSS浮動布置作業(yè)使用CSS對頁面進行劃分和設計。

周次7 課時數(shù) 3教學章節(jié)講解JAVASCRIPT基礎知識教學目標和要求通過本次課程的學習，熟悉JAVASCRIPT語言，并能初步使用JAVASCRIPT語言進行編程。教學重點JAVASCRIPT的函數(shù)和程序設計語句教學難點JAVASCRIPT的函數(shù)和程序設計語句主要教學方式■課堂講授 口小組活動 口實驗演示 □難點答疑 口提問□作業(yè)講評 口實踐教學 口考試測驗 口其他活動 使用媒體資源□文字教材 ■電子教案 口錄像材料 口錄音材料 口直播課堂□CAI課件 口IP課件 口其他資源： 作業(yè)或練習正確書寫JAVASCRIPT語句。板書設計（空白不夠可添加附頁）教學環(huán)節(jié)主要教學內容學生活動

安排1、JAVASCRIPT簡介2、JAVASCRIPT實現(xiàn)3、JAVASCRIPT輸出4、JAVASCRIPT語句5、JAVASCRIPT注釋6、JAVASCRIPT變量7、JAVASCRIPT數(shù)據(jù)類型8、JAVASCRIPT對象導入新課9、JAVASCRIPT函數(shù)導入新課10、JAVASCRIPT運算符11、JAVASCRIPT比較12、JAVASCRIPTIf...Else13、JAVASCRIPTSwitch14、JAVASCRIPTFor15、JAVASCRIPTWhile16、JAVASCRIPTBreak17、JAVASCRIPT錯誤18、JAVASCRIPT驗證布置作業(yè)使用HTML語言設計一個簡單的網(wǎng)站。周次8 課時數(shù) 3教學章節(jié)講解JAVASCRIPTHTMLDOM、對象和JS庫教學目標和要求通過本次課程的學習，熟悉JAVASCRIPTHTMLDOM、對象和JS庫。教學重點DOM、對象的理解教學難點DOM、對象的理解主要教學方式■課堂講授 口小組活動 口實驗演示 □難點答疑 口提問□作業(yè)講評 口實踐教學 口考試測驗 口其他活動 使用媒體資源□文字教材 ■電子教案 口錄像材料 口錄音材料 口直播課堂□CAI課件 口IP課件 口其他資源： 作業(yè)或練正確使用DOM和JS庫板書設計（空白不夠可添加附頁）

教學環(huán)節(jié)主要教學內容學生活動安排導入新課1、JSHTMLDOMDOM簡介DOMHTMLDOMCSSDOM事件DOM節(jié)點2、JS對象JS對象JS數(shù)字JS字符串JS日期JS數(shù)組JS邏輯JS算數(shù)JS正則表達式3、JS庫JS庫JSjQueryJSPrototype布置作業(yè)正確使用DOM和JS庫

周次9 課時數(shù) 3教學章節(jié)XML教學目標和要求通過本次課程的學習，理解XML語言，并能正確使用XML。教學重點XML語法、XML元素、XML屬性、XML驗證、XML驗證器、XML瀏覽器教學難點XML語法、XML元素和XML屬性主要教學方式■課堂講授 口小組活動 口實驗演示 □難點答疑 口提問□作業(yè)講評 口實踐教學 口考試測驗 口其他活動 使用媒體資源□文字教材 ■電子教案 口錄像材料 口錄音材料 口直播課堂□CAI課件 口IP課件 口其他資源： 作業(yè)或練習正確使用XML。板書設計（空白不夠可添加附頁）

教學環(huán)節(jié)主要教學內容學生活動安排導入新課1、XML基礎2、XML教程3、XML簡介4、XML用途5、XML樹結構6、XML語法7、XML元素8、XML屬性9、XML驗證10、XML驗證器11、XML瀏覽器12、XML查看13、XMLCSS14、XMLXSLT布置作業(yè)正確使用XML。

周次10 課時數(shù) 3教學章節(jié)網(wǎng)站的構建、使用和維護教學目標和要求通過本次課程的學習，了解網(wǎng)站的構建過程，并能初步掌握網(wǎng)站維護的相關技術。教學重點網(wǎng)站構建、網(wǎng)站維護。教學難點網(wǎng)站維護主要教學方式■課堂講授 口小組活動 口實驗演示 □難點答疑 口提問□作業(yè)講評 口實踐教學 口考試測驗 口其他活動 使用媒體資源□文字教材 ■電子教案 口錄像材料 口錄音材料 口直播課堂□CAI課件 口IP課件 口其他資源： 作業(yè)或練習無板書設計（空白不夠可添加附頁）

教學環(huán)節(jié)主要教學內容學生活動安排導入新課1、網(wǎng)站構建網(wǎng)站設計網(wǎng)絡用戶網(wǎng)站標準網(wǎng)站驗證萬維網(wǎng)聯(lián)盟網(wǎng)絡安全2、基本概念域名主機性能電子郵件服務主機技術主機數(shù)據(jù)庫主機類型圖片服務器3、網(wǎng)站的發(fā)布與維護發(fā)布網(wǎng)站前的準備網(wǎng)站的發(fā)布網(wǎng)站的宣傳網(wǎng)站的日常管理和維護布置作業(yè)無

周次11 課時數(shù) 3教學章節(jié)實驗課（一）：HTML語言教學目標和要求通過本次實驗課，使學生熟練掌握HTML語言的書寫，能制作出具有一定實用性的網(wǎng)頁。教學重點掌握各種HTML語言的標記。教學難點正確調試、解決編程中遇到的各種錯誤。主要教學方式□課堂講授 口小組活動 ■實驗演示 □難點答疑 口提問□作業(yè)講評 口實踐教學 口考試測驗 口其他活動 使用媒體資源□文字教材 ■電子教案 口錄像材料 口錄音材