網(wǎng)頁設(shè)計與制作-實驗大綱

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

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