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

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

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

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

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

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

6、通過本項(xiàng)目,讓同學(xué)們對(duì)Dreamweaver CS6有一個(gè)總體相識(shí),并通過制作一個(gè)簡(jiǎn)潔的網(wǎng)頁來駕馭常用的工具欄和面板的運(yùn)用方法。（1）教學(xué)內(nèi)容：1、駕馭有關(guān)Dreamweaver CS6的一些基本概念、Dream Weaver CS6的工作界面等基礎(chǔ)學(xué)問。2、了解網(wǎng)頁初步工作，打好堅(jiān)實(shí)基礎(chǔ)。（2）教學(xué)要求：任務(wù)一 了解Dreamweaver CS6界面任務(wù)二 網(wǎng)頁文件頭設(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)頁基礎(chǔ)學(xué)問。2、項(xiàng)目二網(wǎng)站的規(guī)劃和管理（4學(xué)時(shí)）通過一個(gè)實(shí)例創(chuàng)建一個(gè)簡(jiǎn)潔的站點(diǎn)，并設(shè)計(jì)出站點(diǎn)的首頁，使同學(xué)們體會(huì)到Dreamweaver8的強(qiáng)大功能并且駕馭一個(gè)網(wǎng)站從創(chuàng)建到管理的整個(gè)過程。（1）教學(xué)內(nèi)容：了解網(wǎng)站建設(shè)的相關(guān)術(shù)語及簡(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ù)碼攝影學(xué)問網(wǎng)頁（4學(xué)時(shí)）通過制作一個(gè)編排數(shù)碼攝影學(xué)問網(wǎng)頁，

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

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

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

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

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

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

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