《網(wǎng)頁設計》教學大綱

1、廣州市機電技師學院廣州市機電高級技工學校教學大綱 課程名稱： 網(wǎng)頁設計 適用對象： 高 職 修訂人員： 陳瑞英 修訂時間： 2016年2月 審 核： 網(wǎng)頁設計教學大綱一、 說明課程編號1002課程名稱網(wǎng)頁設計總學時72實踐課時72課程類別理論課程適用專業(yè)計算機類專業(yè)1、課程的性質(zhì)和任務（1）性質(zhì)：本課程是計算機專業(yè)的一門專業(yè)課。主要內(nèi)容包括：網(wǎng)頁設計所需的基礎知識及初始準備工作、網(wǎng)頁的基本設計方法、常用的網(wǎng)頁高級制作技巧、有關HTML代碼的解讀和編輯知識、網(wǎng)頁的上傳發(fā)布等。（2）任務：學習有關網(wǎng)頁設計的基礎知識和基本技能，能夠熟練地制作出較高水平的網(wǎng)頁。2、課程教學目標 使學生掌握有關網(wǎng)頁設計

2、的基本概念和原理，學會制作網(wǎng)頁的各種技巧，熟悉地掌握普及網(wǎng)頁制作工具DreamweaverCS6的使用方法。3、教學注意事項本課程具有操作較復雜和實踐性很強的特點，因而在教學中要注意突出重點、講清難點，充分運用多媒體教學手段，加強上機練習，將理論與實踐緊密結(jié)合，使學生能在生動直觀的講授中掌握基礎理論知識，在上機練習中鞏固所學的操作技能。為使上機練習課能充分配合理論課的講授，建議將二者同步進行（也就是每學完一實踐性強的章節(jié)就進行相應的上機練習），并且要求學生從一開始就一步步地按照所學內(nèi)容獨立設計和制作自己的個人主頁。二、學時分配表課題或章節(jié)主要內(nèi)容學時分配備注第一章初識Dreamweaver C

3、S6 通過本項目,讓同學們對DreamweaverCS6有一個總體認識,并通過制作一個簡單的網(wǎng)頁來掌握常用的工具欄和面板的使用方法。4第二章文本編輯通過制作一個編排青山別墅網(wǎng)頁、果蔬網(wǎng)頁、電器城網(wǎng)店和藝術(shù)攝影網(wǎng)頁，使同學們了解并掌握對網(wǎng)頁文本進行格式化的基本方法。4第三章圖像和媒體通過編排建筑工程網(wǎng)頁和五谷雜糧網(wǎng)頁，使同學們了解并掌握在網(wǎng)頁中插入常用格式的圖像和媒體的方法。4第四章超級鏈接通過制作實木地板網(wǎng)頁、溫泉度假網(wǎng)頁和金融投資網(wǎng)頁和口腔護理網(wǎng)頁實例，使同學們了解并掌握有關超級鏈接的基本知識和制作方法。4第五章使用表格通過對布藝沙發(fā)網(wǎng)頁、健康美食網(wǎng)頁的制作，使同學們了解并掌握使用表格進行頁

4、面布局的基本方法。8第六章使用框架通過網(wǎng)頁實例茗茶頻道網(wǎng)頁、家具天地網(wǎng)頁和干果批發(fā)網(wǎng)頁的制作，使同學們了解并掌握使用框架進行頁面布局的基本方法。4第七章使用層通過網(wǎng)頁實例時尚前沿網(wǎng)頁、化妝公司網(wǎng)頁的制作，使同學們了解并掌握使用層進行頁面布局的基本方法。4第八章CSS樣式通過網(wǎng)頁實例山地車網(wǎng)頁、汽車配件網(wǎng)頁的制作，使同學們了解并掌握使用CSS樣式控制網(wǎng)頁外觀的基本方法。4第九章庫和模板通過網(wǎng)頁實例水果慕斯網(wǎng)頁、老年生活頻道的制作，使同學們了解并掌握使用庫和模板制作網(wǎng)頁的基本方法。4第十講使用表單通過網(wǎng)頁實例用戶注冊頁面、留言板網(wǎng)頁、健康測試網(wǎng)頁和OA登錄系統(tǒng)頁面的制作，使同學們了解并掌握創(chuàng)建表單

5、的基本方法。8第十一講使用行為 通過網(wǎng)頁實例婚戒網(wǎng)頁、全麥面包網(wǎng)頁和公告欄界面的制作，使同學們了解并掌握使用行為完善網(wǎng)頁功能的基本方法。4第十二講網(wǎng)頁代碼通過網(wǎng)頁實例商業(yè)公司網(wǎng)頁的制作，再通過軟件相關功能的解析學習標簽的編寫方法和常用工具，以及HTML響應時間使同學們了解并掌握代碼的基本方法。4第十三講綜合設計實訓通過網(wǎng)頁實例李明的攝影網(wǎng)頁、百貨商場網(wǎng)頁、旅游度假網(wǎng)頁、新焦點房產(chǎn)網(wǎng)頁、TSHFA汽車網(wǎng)頁的制作；學習表格布局頁面，以及通過CSS樣式命令修飾頁面。提高了學生的設計網(wǎng)頁綜合能力。8機動4綜合考評4總計72三、教學要求、內(nèi)容及建議1、第一章 認識Dreamweaver CS6（4學時）

6、通過本項目,讓同學們對Dreamweaver CS6有一個總體認識,并通過制作一個簡單的網(wǎng)頁來掌握常用的工具欄和面板的使用方法。（1）教學內(nèi)容：1、掌握有關Dreamweaver CS6的一些基本概念、Dream Weaver CS6的工作界面等基礎知識。2、了解網(wǎng)頁初步工作，打好堅實基礎。（2）教學要求：任務一 了解Dreamweaver CS6界面任務二 網(wǎng)頁文件頭設置任務三 網(wǎng)站框架及管理站點(一) 定義站點的操作 (二) 創(chuàng)建和保存文件的操作 (三) 設置文本屬性的操作(四) 保存工作區(qū)布局的操作（3）教學建議：1、建議在理論引導下，要深刻地教會學生要在基礎學起，不能急功近利。2、建議

7、在上機練習指導下，要仔細的教好網(wǎng)頁基礎知識。2、項目二網(wǎng)站的規(guī)劃和管理（4學時）通過一個實例創(chuàng)建一個簡單的站點，并設計出站點的首頁，使同學們體會到Dreamweaver8的強大功能并且掌握一個網(wǎng)站從創(chuàng)建到管理的整個過程。（1）教學內(nèi)容：了解網(wǎng)站建設的相關術(shù)語及簡單的控制方法。（2）教學要求：任務一新建站點 任務二管理站點 (一) 復制和編輯站點(二) 導出、刪除和導入站點 任務三管理站點內(nèi)容 (一) 設置首選參數(shù) (二) 創(chuàng)建文件夾和文件 (三) 在站點地圖中鏈接文件（3）教學建議：本部分內(nèi)容可根據(jù)實際選擇講解。3、項目三文本編輯編排數(shù)碼攝影知識網(wǎng)頁（4學時）通過制作一個編排數(shù)碼攝影知識網(wǎng)頁，

8、使同學們了解并掌握對網(wǎng)頁文本進行格式化的基本方法。（1）教學內(nèi)容：了解如何輸入和編排文本、插入文本、插入圖片和制作超級鏈接等知識。（2）教學要求：任務一網(wǎng)頁文本的編輯 任務二編排文本格式 (一) 設置文檔標題格式 (二) 設置正文格式 任務三完善網(wǎng)頁（3）教學建議：1、本章所講的內(nèi)容上機指導效果會更佳，教師必須多下功夫在文本編輯這方面上。2、在上機指導中發(fā)現(xiàn)有學生不過關要及時加強指導，不能忽視。4、項目四圖像和媒體編排攝影作品網(wǎng)頁（4學時）通過制作一個編排攝影作品網(wǎng)頁，使同學們了解并掌握在網(wǎng)頁中插入常用格式的圖像和媒體的方法。（1）教學內(nèi)容：任務一插入圖像 (一) 插入圖像占位符 (二) 插入

9、圖像和設置圖像屬性 任務二插入媒體 (一) 插入Flash動畫 (二) 插入圖像查看器 (三) 插入ActiveX視頻（2）教學要求：1、本章所講的內(nèi)容上機指導效果會更佳，教師必須多下功夫在保存網(wǎng)頁、輸入文本、使用圖像這三方面上。2、在上機指導中發(fā)現(xiàn)有學生不過關要及時加強指導，不能忽視。5、項目五超級鏈接制作導航網(wǎng)頁（4學時）（1）教學內(nèi)容：通過制作網(wǎng)頁實例，使同學們了解并掌握有關超級鏈接的基本知識和制作方法。（2）教學要求：任務一設置錨記超級鏈接 任務二設置圖像超級鏈接 任務三設置電子郵件超級鏈接 任務四設置文本超級鏈接（3）教學建議：1. 要求學生對超級鏈接的設置，要將各種類型分開清楚。2

10、. 要求學生每一種類型在上機練習時多加練習。6、項目六表格布局商務網(wǎng)頁（4學時）通過網(wǎng)頁實例的制作，使同學們了解并掌握使用表格進行頁面布局的基本方法。（1）教學內(nèi)容：1、掌握表格制作的基本操作，學會使用表格來組織網(wǎng)頁。2、掌握表格在網(wǎng)頁布局的基本操作。（2）教學要求：任務一使用表格布局頁眉 任務二使用嵌套表格布局主體頁面 (一) 布局網(wǎng)頁右上方欄目的內(nèi)容 (二) 布局右下方欄目的內(nèi)容 任務三使用表格布局頁腳（3）教學建議：由于網(wǎng)頁元素的布局排版依賴于表格應用，必須多下功夫講授好表格與單元格的編輯處理技巧。7、項目七框架制作綠色天空論壇網(wǎng)頁（4學時）通過網(wǎng)頁實例的制作，使同學們了解并掌握使用框架

11、進行頁面布局的基本方法。（1）教學內(nèi)容：1、掌握圖形圖像的基本概念。2、掌握Fireworks MX專業(yè)的網(wǎng)頁圖像設計制作軟件的使用方法。（2）教學要求： 任務一創(chuàng)建論壇框架網(wǎng)頁 (一) 創(chuàng)建框架 (二) 保存框架 任務二設置論壇框架網(wǎng)頁 (一) 設置框架集和框架屬性 (二) 設置框架中鏈接的目標窗口（3）教學建議1. 由于框架是一種特殊的網(wǎng)頁技術(shù)，所以不能講得太快，必須多下功夫講授清楚框架的操作。2. 發(fā)現(xiàn)操作不過關的學生要及時加強指導8、項目八CSS設置海洋知識網(wǎng)頁樣式（4學時）通過網(wǎng)頁實例的制作，使同學們了解并掌握使用CSS樣式控制網(wǎng)頁外觀的基本方法。（1）教學內(nèi)容：掌握CSS的編輯和使

12、用方法。（2）教學要求：任務一設置頁眉CSS樣式 (一) 定義“body”的CSS樣式 (二) 定義頁眉的CSS樣式 任務二設置網(wǎng)頁主體的CSS樣式 (一) 設置左側(cè)欄目CSS樣式 (二) 設置右側(cè)欄目的CSS樣式 任務三設置頁腳的CSS樣式（3）教學建議對于本章內(nèi)容，要加強練習。9、項目九Div布局搜索網(wǎng)頁（4學時）通過網(wǎng)頁實例的制作，使同學們了解并掌握使用Div布局網(wǎng)頁的基本方法。（1）教學內(nèi)容：掌握DIV的使用方法。（2）教學要求：任務一布局頁眉 任務二布局主體 任務三布局頁腳（3）教學建議講解時要注意學生掌握情況，發(fā)現(xiàn)操作不過關的學生要及時加強指導。10、項目十時間軸制作航行動畫（4學

13、時）通過網(wǎng)頁實例的制作，使同學們了解并掌握使用時間軸制作動畫的基本方法。（1）教學內(nèi)容： 掌握時間軸的使用方法。（2）教學要求：任務一使用層制作藍天大海背景 任務二使用時間軸制作運動效果（3）教學建議必須做好時間軸基礎知識講解，不能忽視。11、項目十一庫和模板制作花卉基地主頁（4學時）通過網(wǎng)頁實例的制作，使同學們了解并掌握使用庫和模板制作網(wǎng)頁的基本方法。（1）教學內(nèi)容：1、 掌握庫的使用方法。2、 掌握模板的使用方法。（2）教學要求：任務一創(chuàng)建庫 (一) 創(chuàng)建庫項目 (二) 編排頁眉庫項目 (三) 編排頁腳庫項目 任務二創(chuàng)建模板 (一) 創(chuàng)建模板文件 (二) 插入庫項目 (三) 插入模板對象

14、任務三應用模板（3）教學建議：通過網(wǎng)頁實例的制作，使同學們了解并掌握使用庫和模板制作網(wǎng)頁的基本方法。12、項目十二使用行為完善網(wǎng)頁功能（4學時）掌握網(wǎng)頁行為的使用方法。（1）教學內(nèi)容：任務一設置頁眉部分 (一) 設置狀態(tài)欄文本 (二) 制作彈出式菜單 任務二設置主體部分 (一) 打開瀏覽器窗口 (二) 交換圖像 (三) 彈出信息 (四) 控制Shockwave或Flash（2）教學要求：任務一設置頁眉部分 (一) 設置狀態(tài)欄文本 (二) 制作彈出式菜單 任務二設置主體部分 (一) 打開瀏覽器窗口 (二) 交換圖像 (三) 彈出信息 (四) 控制Shockwave或Flash（3）教學建議：1、由于網(wǎng)頁的行為是難點知識，必須多加演示來詳細講解。2、發(fā)現(xiàn)操作不過關的學生要及時加強指導。13、項目十三表單制作注冊網(wǎng)頁（4學時）通過網(wǎng)頁實例的制作，使同學們了解并掌握創(chuàng)建表單的基本方法。（1）教學內(nèi)容：掌握表單的制作方法（2）教學要求：任務一創(chuàng)建表單 任務二驗證表單（3）教學建議：如有學生操作不過關，必須及時加強指導。四、推薦教材和參考