《網(wǎng)頁(yè)設(shè)計(jì)》教學(xué)大綱

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

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

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

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

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

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

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

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

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

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

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

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

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

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