網(wǎng)頁設(shè)計(jì)與制作-實(shí)驗(yàn)大綱

《網(wǎng)頁設(shè)計(jì)與制作》課程實(shí)驗(yàn)教學(xué)大綱課程性質(zhì)：獨(dú)立設(shè)課課程屬性：專業(yè)基礎(chǔ)實(shí)驗(yàn)課適用專業(yè)：應(yīng)用技術(shù)、多媒體技術(shù)學(xué)時(shí)：總學(xué)時(shí)96實(shí)驗(yàn)學(xué)時(shí)32開出時(shí)間：二年級一學(xué)期綜合性、設(shè)計(jì)性實(shí)驗(yàn)項(xiàng)目數(shù)：4學(xué)時(shí)先修課程：計(jì)算機(jī)基礎(chǔ)一、課程簡介《網(wǎng)頁設(shè)計(jì)與制作》課程是計(jì)算機(jī)專業(yè)的一門必修專業(yè)課程。它涵蓋Dreamweaver網(wǎng)頁設(shè)計(jì)、Flash動(dòng)畫制作、Photoshop圖像處理、動(dòng)態(tài)網(wǎng)站等多項(xiàng)相關(guān)知識(shí)，通過開發(fā)一個(gè)網(wǎng)站，全面介紹WEB站點(diǎn)設(shè)計(jì)的基本操作技術(shù)和使用技巧，為后續(xù)《XML語言》、《動(dòng)態(tài)網(wǎng)頁制作》等課程打下一個(gè)堅(jiān)實(shí)的基礎(chǔ)。通過本課程的學(xué)習(xí)，使學(xué)生掌握運(yùn)用Dreamweaver進(jìn)行網(wǎng)站的導(dǎo)入、規(guī)劃、管理、發(fā)布的相關(guān)技術(shù)及網(wǎng)頁制作的操作技能；能夠熟練運(yùn)用HTML中的文字、鏈接、列表、表格、表單、圖像、多媒體、等設(shè)計(jì)出多窗口網(wǎng)頁、動(dòng)態(tài)網(wǎng)頁；能夠利用Photoshop設(shè)計(jì)網(wǎng)頁界面，處理圖像；能夠運(yùn)用flash制作與網(wǎng)頁相關(guān)的小動(dòng)畫。從而能夠承擔(dān)網(wǎng)站制作的規(guī)劃、設(shè)計(jì)以及制作；能夠有清晰思路和動(dòng)手能力解決各種各樣的實(shí)際問題；并具有與客戶溝通、與團(tuán)隊(duì)成員協(xié)作的能力。從而培養(yǎng)學(xué)生的開發(fā)網(wǎng)站的能力和職業(yè)素質(zhì)。二、實(shí)驗(yàn)教學(xué)目的及要求通過上機(jī)實(shí)踐，讓學(xué)生掌握網(wǎng)頁設(shè)計(jì)與制作的基本知識(shí)和基本技能，能較熟練地在Dreamweaver平臺(tái)下合理設(shè)計(jì)網(wǎng)頁并對站點(diǎn)進(jìn)行規(guī)劃、管理、發(fā)布，從而為下一階段學(xué)習(xí)動(dòng)態(tài)網(wǎng)頁技術(shù)和高級Web程序設(shè)計(jì)打下良好的理論和實(shí)踐基礎(chǔ)。三、實(shí)驗(yàn)項(xiàng)目設(shè)置表序號實(shí)驗(yàn)名稱實(shí)驗(yàn)學(xué)時(shí)儀器套數(shù)每套人數(shù)實(shí)驗(yàn)要求實(shí)驗(yàn)類型面向?qū)I(yè)1HTML語言211掌握WWW工作原理、HTML語言基礎(chǔ)驗(yàn)證信息管理、應(yīng)用技術(shù)、軟件技術(shù)、多媒體技術(shù)2使用Dreamweaver建立和管理站點(diǎn)211熟悉Dreamweaver制作工具；學(xué)會(huì)如何建立站點(diǎn)和管理站點(diǎn)。驗(yàn)證信息管理、應(yīng)用技術(shù)、軟件技術(shù)、多媒體技術(shù)3文檔的基本操作211掌握文檔的基本操作、文本的基本操作。驗(yàn)證信息管理、應(yīng)用技術(shù)、軟件技術(shù)、多媒體技術(shù)4表格211掌握表格的基本操作，以及用布局表格來設(shè)計(jì)網(wǎng)頁。驗(yàn)證信息管理、應(yīng)用技術(shù)、軟件技術(shù)、多媒體技術(shù)5圖像和其他多媒體211掌握對圖像、聲音、動(dòng)畫和視頻的基本操作。驗(yàn)證信息管理、應(yīng)用技術(shù)、軟件技術(shù)、多媒體技術(shù)6鏈接211掌握創(chuàng)建鏈接和管理鏈接的方法。驗(yàn)證信息管理、應(yīng)用技術(shù)、軟件技術(shù)、多媒體技術(shù)7框架集211掌握如何創(chuàng)建具有框架結(jié)構(gòu)的頁面。驗(yàn)證信息管理、應(yīng)用技術(shù)、軟件技術(shù)、多媒體技術(shù)8CSS樣式表211掌握制作CSS樣式表的方法以及其應(yīng)用方式。驗(yàn)證信息管理、應(yīng)用技術(shù)、軟件技術(shù)、多媒體技術(shù)9層和時(shí)間軸411掌握如何創(chuàng)建層、編輯層，如何創(chuàng)建時(shí)間軸動(dòng)畫等。驗(yàn)證信息管理、應(yīng)用技術(shù)、軟件技術(shù)、多媒體技術(shù)10行為411掌握添加行為和編輯行為的方法。驗(yàn)證信息管理、應(yīng)用技術(shù)、軟件技術(shù)、多媒體技術(shù)11庫和模板211掌握創(chuàng)建庫和模板的方法，并熟練地對其進(jìn)行管理和應(yīng)用。驗(yàn)證信息管理、應(yīng)用技術(shù)、軟件技術(shù)、多媒體技術(shù)12表單211掌握如何設(shè)計(jì)表單，如何添加表單對象等。驗(yàn)證信息管理、應(yīng)用技術(shù)、軟件技術(shù)、多媒體技術(shù)13綜合實(shí)例411學(xué)會(huì)設(shè)計(jì)并制作一個(gè)美觀的靜態(tài)主頁綜合信息管理、應(yīng)用技術(shù)、軟件技術(shù)、多媒體技術(shù)（注：“實(shí)驗(yàn)類型”：指演示性、驗(yàn)證性、設(shè)計(jì)性、綜合性、研究性等）四、考核方法與評分標(biāo)準(zhǔn)上機(jī)部分考核采取上機(jī)表現(xiàn)成績結(jié)合實(shí)驗(yàn)報(bào)告成績的方式進(jìn)行，分?jǐn)?shù)組成為：上機(jī)成績=上機(jī)表現(xiàn)成績（50%）+實(shí)驗(yàn)報(bào)告成績（50%）。上機(jī)部分的成績在本課程總成績中占有的分值為20。上機(jī)表現(xiàn)成績基于上機(jī)實(shí)驗(yàn)出勤情況及上機(jī)過程的表現(xiàn)，每次上機(jī)對應(yīng)1分。實(shí)驗(yàn)報(bào)告成績基于每個(gè)項(xiàng)目對應(yīng)的實(shí)驗(yàn)報(bào)告完成情況，一個(gè)項(xiàng)目對應(yīng)1分。五、教材或指導(dǎo)書1、教材：《網(wǎng)頁設(shè)計(jì)與制作》，馬占欣、周文剛、支建飛編著，中國水利水電出版社，20072、主要參考書：1）馬占欣、周文剛、支建飛.網(wǎng)頁設(shè)計(jì)與制作.北京：中國水利水電出版社，2007.2）甘登岱.網(wǎng)頁設(shè)計(jì)三劍客(第5版).北京：機(jī)械工業(yè)出版社,2006.六、單項(xiàng)實(shí)驗(yàn)的內(nèi)容和要求1、實(shí)驗(yàn)名稱：使用HTML語言進(jìn)行簡單的網(wǎng)頁設(shè)計(jì)實(shí)驗(yàn)內(nèi)容：用記事本或?qū)懽职寰帉慔TML文檔，該文檔文件名為“姓名_1.htm”,使得最后顯示效果如下圖所示：實(shí)驗(yàn)要求：1.掌握WWW的工作原理；2.掌握HTML語言的基本語法，并利用該語言進(jìn)行簡單的網(wǎng)頁設(shè)計(jì)。2、實(shí)驗(yàn)名稱：使用Dreamweaver創(chuàng)建站點(diǎn)和主頁文件實(shí)驗(yàn)內(nèi)容：1．建立本地站點(diǎn)(1)在D盤建立一個(gè)名為“mysite”的文件夾。(2)在文件夾“mysite”基礎(chǔ)上建立一個(gè)名為“我的個(gè)人網(wǎng)站”的站點(diǎn)。（提示：站點(diǎn)|新建站點(diǎn)）2.在“mysite”中創(chuàng)建和設(shè)置網(wǎng)站主頁文件index.html，要求如下：(1)標(biāo)題為“我的個(gè)人網(wǎng)站”,設(shè)置bg.jpg作為背景，上邊距和左邊距設(shè)為0(2)網(wǎng)頁中插入三行文字1）第一行為“歡迎光臨我的個(gè)人網(wǎng)站”（格式要求：居中，字體大小為7）2）第二行為“這是我做的第一個(gè)網(wǎng)頁”（格式要求：居左，字體大小為5）3）第三行為“請多多指教”（格式要求：居右，字體大小為1）(3)在網(wǎng)頁適當(dāng)?shù)奈恢貌迦胍粭l水平線，結(jié)合網(wǎng)頁背景設(shè)置水平線的顏色實(shí)驗(yàn)要求：1．掌握站點(diǎn)的創(chuàng)建2．掌握網(wǎng)頁文件的基本操作；頁面屬性的設(shè)置；文本的插入和格式設(shè)置3、實(shí)驗(yàn)名稱：文檔的基本操作實(shí)驗(yàn)內(nèi)容：1.使用Dreamweaver制作如下一個(gè)頁面，命名為“index.htm”，并在瀏覽器中運(yùn)行，結(jié)果如下圖所示。在主頁“index.html”中，要求添加背景顏色，每句詩之間要空行，且整個(gè)詩要求居中，在“QQ的生活”創(chuàng)建一個(gè)空鏈接。實(shí)驗(yàn)要求：掌握文檔的基本操作，掌握文本的屬性設(shè)置。4、實(shí)驗(yàn)名稱：表格的創(chuàng)建和使用實(shí)驗(yàn)內(nèi)容：1．創(chuàng)建如下圖所示的表格2.使用表格完成如下圖所示的頁面布局。實(shí)驗(yàn)要求：1．掌握表格的創(chuàng)建；表格的基本操作2．掌握使用表格或布局表格設(shè)計(jì)網(wǎng)頁的布局5、實(shí)驗(yàn)名稱：多媒體元素的插入1．使用布局表格完成效果如下圖所示的頁面布局，并插入網(wǎng)頁的基本元素。Flash動(dòng)畫Flash動(dòng)畫2、任選圖像和文本，掌握兩者的相互對齊方式實(shí)驗(yàn)要求：掌握圖像、聲音、動(dòng)畫、視頻和其他多媒體元素的插入。6、實(shí)驗(yàn)名稱：鏈接實(shí)驗(yàn)內(nèi)容：1．將上次的作業(yè)復(fù)制到d盤，對主頁文件”index.html”進(jìn)行以下操作：(1)選中圖像”美食介紹”，鏈接到網(wǎng)頁“msjs.html”(2)選中文本“偽滿皇宮”，鏈接到網(wǎng)頁“wmhg.html”(3)為文本“聯(lián)系我們”創(chuàng)建電子郵件鏈接，地址為自己的郵箱2.創(chuàng)建一個(gè)網(wǎng)頁“map.html”，將圖片”map.jpg”插入到網(wǎng)頁中，請地圖中創(chuàng)建若干熱點(diǎn)，點(diǎn)擊各熱點(diǎn)時(shí)要求如下：1)點(diǎn)擊周口地區(qū)時(shí)，鏈接到zhoukou.html文件上（在原窗口中顯示）。2)點(diǎn)擊三門峽地區(qū)時(shí)，鏈接到某個(gè)圖片上（在新窗口中顯示）。3)點(diǎn)擊鄭州地區(qū)時(shí)，做一個(gè)電子郵件鏈接，收件人是你本人的郵箱地址.4)5)點(diǎn)擊南陽地區(qū)時(shí)，做一個(gè)腳本鏈接，用alert函數(shù)彈出任意內(nèi)容的信息窗口6)點(diǎn)擊洛陽地區(qū)時(shí)，要求跳到zhoukou.html文件的底部（在該文件底部添加命名錨記）7)在網(wǎng)頁的頂部添加標(biāo)題“河南省地圖導(dǎo)航”，并將它做成一個(gè)超鏈接，要求鼠標(biāo)放上時(shí)，右下角顯示標(biāo)題“這是河南圖象地圖”，鏈接目標(biāo)為空鏈接（任意一種），并且可以使用“alt+d”快捷鍵直接選中該鏈接。實(shí)驗(yàn)要求：1．掌握相對路徑的設(shè)置2．掌握基本超級鏈接、電子郵件鏈接、熱點(diǎn)鏈接、錨點(diǎn)鏈接、腳本鏈接的創(chuàng)建7、實(shí)驗(yàn)名稱：制作具有框架結(jié)構(gòu)的網(wǎng)頁實(shí)驗(yàn)內(nèi)容：1、建立一個(gè)名為“花的世界”的站點(diǎn)，自己定義站點(diǎn)文件夾名，并創(chuàng)建一個(gè)如下所示的框架集，根據(jù)需要對其中各個(gè)框架的大小和屬性進(jìn)行設(shè)置并保存(文件|保存全部)，保存時(shí)建議輸入一個(gè)好記的名稱。當(dāng)單擊左邊框架花的名稱，主框架中會(huì)顯示對應(yīng)的內(nèi)容。實(shí)驗(yàn)要求：1．了解框架集和框架的概念2．掌握框架結(jié)構(gòu)網(wǎng)頁的創(chuàng)建及常用屬性的設(shè)置8、實(shí)驗(yàn)名稱：創(chuàng)建CSS樣式表實(shí)驗(yàn)內(nèi)容：1.完成以下操作：(1)使用重定義標(biāo)簽的方法把1.htm中的表格中的所有文字設(shè)置成12像素，紅色，應(yīng)用范圍僅對該文檔。(2)首先把1.html中的表格中“連接”兩個(gè)字做成空鏈接，然后把該鏈接使用重定義標(biāo)簽的方法設(shè)置成沒有下劃線，綠色，14象素大小。應(yīng)用范圍是外部的樣式表文件，名字為new.css(3)使用CSS高級樣式，把2.htm中的鏈接的四種狀態(tài)分別定義為：正常狀態(tài)（link）為紅色，12像素；鼠標(biāo)放上狀態(tài)（hovor）為藍(lán)色，14像素；正在點(diǎn)擊狀態(tài)（active）為黃色，16像素；訪問過的狀態(tài)（visitied）為黑色，18像素。以上四種狀態(tài)都沒有下劃線。應(yīng)用范圍僅對該文檔。(4)使用自定義樣式（class）的方法，把3.htm中的4句話分別設(shè)置4種不同顏色和字體的的自定義樣式，名字任意。(5)新建一個(gè)文件4.htm，在其中建立一個(gè)鏈接，用鏈接外部樣式表的形式把new.css中的樣式應(yīng)用到當(dāng)前文檔中。實(shí)驗(yàn)要求：1．了解CSS的基本概念2．掌握三種CSS樣式類型的創(chuàng)建及應(yīng)用3.掌握”CSS規(guī)則定義”對話框中樣式八大類別的使用9、實(shí)驗(yàn)名稱：利用時(shí)間軸創(chuàng)建層動(dòng)畫實(shí)驗(yàn)內(nèi)容：1、建立文件donghua1.htm，要求在圖片背景上，使用能夠扇動(dòng)翅膀的3張蝴蝶圖片(GIF格式)，結(jié)合層和時(shí)間軸設(shè)計(jì)出自由紛飛的效果。2、建立文件donghua2.htm,利用層的嵌套屬性結(jié)合時(shí)間軸能夠制作出站點(diǎn)中常見的公告板，公告板中的文字從下向上循環(huán)運(yùn)動(dòng)，能夠?qū)W(wǎng)頁中的重要內(nèi)容進(jìn)行動(dòng)態(tài)分布.3、建立文件donghua3.htm，利用錄制層路徑的方法創(chuàng)建一個(gè)動(dòng)畫，要求層運(yùn)動(dòng)的軌跡是一個(gè)近似圓形，預(yù)覽時(shí)，動(dòng)畫在打開瀏覽器兩秒鐘后才開始播放，請根據(jù)時(shí)間軸的相關(guān)知識(shí)實(shí)現(xiàn)。實(shí)驗(yàn)要求：1．了解時(shí)間軸2．掌握應(yīng)用層和時(shí)間軸制作動(dòng)畫的方法10、實(shí)驗(yàn)名稱：添加行為實(shí)驗(yàn)內(nèi)容：1.在頁面1.htm中繼續(xù)回車換行，插入一個(gè)層，設(shè)置層的背景顏色為綠色，當(dāng)在層上單擊鼠標(biāo)時(shí)，層的背景顏色變?yōu)榧t色。2．建立頁面2.htm，插入圖片“hh.jpg”，在圖片上3個(gè)圓形區(qū)域“機(jī)器貓”“小黑熊”“米老鼠”上分別創(chuàng)建3個(gè)熱點(diǎn)。當(dāng)鼠標(biāo)移到相應(yīng)熱點(diǎn)上時(shí)，顯示相應(yīng)的圖片，鼠標(biāo)移開時(shí)，所有圖片消失。請根據(jù)層和行為實(shí)現(xiàn)。效果如下入所示：實(shí)驗(yàn)要求：1．熟悉對象、事件、動(dòng)作和行為的基本概念2．掌握使用行為面板添加和編輯各種行為3.掌握Dreamweaver自帶行為的應(yīng)用11、實(shí)驗(yàn)名稱：創(chuàng)建模板和庫實(shí)驗(yàn)內(nèi)容：1.利用模板制作如下圖所示的網(wǎng)頁。圖人與自然首頁圖植物天地頁面圖動(dòng)物世界頁面實(shí)驗(yàn)要求：1．掌握利用資源面板管理站點(diǎn)中各種資源2．掌握利用模板和庫制作統(tǒng)一風(fēng)格的網(wǎng)站，并更新網(wǎng)站中的各個(gè)網(wǎng)頁12、實(shí)驗(yàn)名稱：制作表單實(shí)驗(yàn)內(nèi)容：結(jié)合表格的布局功能和CSS樣式表的相關(guān)知識(shí)，設(shè)計(jì)如下圖所示的表單頁面。實(shí)驗(yàn)要求：1.掌握在網(wǎng)頁中插入表單的操作2.掌握表單元素屬性的設(shè)置的操作3.能夠運(yùn)用表單及表單對象制作網(wǎng)頁13、實(shí)驗(yàn)名稱：制作一個(gè)靜態(tài)網(wǎng)頁實(shí)驗(yàn)內(nèi)容：請按照圖中所示進(jìn)行主頁設(shè)計(jì)，在完成設(shè)計(jì)后的“個(gè)人信息”欄中寫上自己的姓名，學(xué)號。頁面布局要合理，不能出現(xiàn)表格偏移，錯(cuò)位的情況。頁面要分成明顯的圖片標(biāo)題區(qū)，導(dǎo)航條區(qū)，

主內(nèi)容區(qū)以及最下面的版權(quán)說明區(qū)。其中當(dāng)前日期的代碼已經(jīng)給出（時(shí)間代碼.txt）,請把該代碼正確應(yīng)用到網(wǎng)頁的導(dǎo)航條中導(dǎo)航條要求用單線