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

主內容區以及最下面的版權說明區。其中當前日期的代碼已經給出（時間代碼.txt）,請把該代碼正確應用到網頁的導航條中導航條要求用單線