網(wǎng)頁設計與制作

網(wǎng)頁設計與制作》課程實驗教學大綱課程性質(zhì)：獨立設課課程屬性：專業(yè)基礎實驗課適用專業(yè)：應用技術、多媒體技術學時：總學時96_實驗學時 32開出時間：二—年級一學期綜合性、設計性實驗項目數(shù)：4學時先修課程：計算機基礎一、課程簡介《網(wǎng)頁設計與制作》課程是計算機專業(yè)的一門必修專業(yè)課程。它涵蓋Dreamweaver網(wǎng)頁設計、Flash動畫制作、Photoshop圖像處理、動態(tài)網(wǎng)站等多項相關知識，通過開發(fā)一個網(wǎng)站，全面介紹WEB站點設計的基本操作技術和使用技巧，為后續(xù)《XML語言》、《動態(tài)網(wǎng)頁制作》等課程打下一個堅實的基礎。通過本課程的學習，使學生掌握運用Dreamweaver進行網(wǎng)站的導入、規(guī)劃、管理、發(fā)布的相關技術及網(wǎng)頁制作的操作技能；能夠熟練運用HTML中的文字、鏈接、列表、表格、表單、圖像、多媒體、等設計出多窗口網(wǎng)頁、動態(tài)網(wǎng)頁；能夠利用Photoshop設計網(wǎng)頁界面，處理圖像；能夠運用flash制作與網(wǎng)頁相關的小動畫。從而能夠承擔網(wǎng)站制作的規(guī)劃、設計以及制作；能夠有清晰思路和動手能力解決各種各樣的實際問題；并具有與客戶溝通、與團隊成員協(xié)作的能力。從而培養(yǎng)學生的開發(fā)網(wǎng)站的能力和職業(yè)素質(zhì)。二、實驗教學目的及要求通過上機實踐，讓學生掌握網(wǎng)頁設計與制作的基本知識和基本技能，能較熟練地在Dreamweaver平臺下合理設計網(wǎng)頁并對站點進行規(guī)劃、管理、發(fā)布，從而為下一階段學習動態(tài)網(wǎng)頁技術和高級Web程序設計打下良好的理論和實踐基礎。三、實驗項目設置表序號實驗名稱實驗學儀器套每套人實驗要求實驗類型面向專業(yè)

時數(shù)數(shù)1HTML語言211掌握WWW工作原理、HTML語言基礎驗證信息管理、應用技術、軟件技術、多媒體技術2使用Dreamweaver建立和管理站占八、、211熟 悉Dreamweaver制作工具；學會如何建立站點和管理站點。驗證信息管理、應用技術、軟件技術、多媒體技術3文檔的基本操作211掌握文檔的基本操作、文本的基本操作。驗證信息管理、應用技術、軟件技術、多媒體技術4表格211掌握表格的基本操作，以及用布局表格來設計網(wǎng)頁。驗證信息管理、應用技術、軟件技術、多媒體技術5冬像和其211掌握對圖像、聲音、動畫和視頻的基本驗證信息管理、應用技術、軟件技術、多媒體

他多媒體操作。技術6鏈接211掌握創(chuàng)建鏈接和管理鏈接的方法。驗證信息管理、應用技術、軟件技術、多媒體技術7框架集211掌握如何創(chuàng)建具有框架結構的頁面。驗證信息管理、應用技術、軟件技術、多媒體技術8CSS樣式表211掌握制作CSS樣式表的方法以及其應用方式。驗證信息管理、應用技術、軟件技術、多媒體技術9層和時間軸411掌握如何創(chuàng)建層、編輯層，如何創(chuàng)建時間軸動畫等。驗證信息管理、應用技術、軟件技術、多媒體技術10行為411掌握添加行為和編輯行為的方法。驗證信息管理、應用技術、軟件技術、多媒體技術11庫和模板211掌握創(chuàng)建庫和模板的方法，并熟練地對其進行管理和應用。驗證信息管理、應用技術、軟件技術、多媒體技術12表單211掌握如何設計表單，如何添加表單對象等。驗證信息管理、應用技術、軟件技術、多媒體技術13綜合實例411學會設計并制作一個美觀的靜態(tài)主頁綜合信息管理、應用技術、軟件技術、多媒體技術（注：“實驗類型”：指演示性、驗證性、設計性、綜合性、研究性等）四、考核方法與評分標準上機部分考核采取上機表現(xiàn)成績結合實驗報告成績的方式進行，分數(shù)組成為：上機成績=上機表現(xiàn)成績（50%）+實驗報告成績（50%）。上機部分的成績在本課程總成績中占有的分值為20。上機表現(xiàn)成績基于上機實驗出勤情況及上機過程的表現(xiàn)，每次上機對應1分。實驗報告成績基于每個項目對應的實驗報告完成情況，一個項目對應1分。五、教材或指導書1、教材：《網(wǎng)頁設計與制作》，馬占欣、周文剛、支建飛編著，中國水利水電出版社，20072、主要參考書：1）馬占欣、周文剛、支建飛.網(wǎng)頁設計與制作.北京：中國水利水電出版社，2007.2）甘登岱.網(wǎng)頁設計三劍客（第5版）.北京：機械工業(yè)出版社,2006.六、單項實驗的內(nèi)容和要求1、實驗名稱：使用HTML語言進行簡單的網(wǎng)頁設計實驗內(nèi)容：用記事本或寫字板編寫HTML文檔，該文檔文件名為“姓名_l.htm”，使得最后顯示效果如下圖所示：實驗要求：掌握WWW的工作原理；掌握HTML語言的基本語法，并利用該語言進行簡單的網(wǎng)頁設計。2、實驗名稱：使用Dreamweaver創(chuàng)建站點和主頁文件

實驗內(nèi)容：1．建立本地站點⑴在D盤建立一個名為“mysite”的文件夾。（2）在文件夾“mysite”基礎上建立一個名為“我的個人網(wǎng)站”的站點。（提示：站點|新建站點）在“mysite”中創(chuàng)建和設置網(wǎng)站主頁文件index.html,要求如下：（1） 標題為“我的個人網(wǎng)站”，設置bg.jpg作為背景，上邊距和左邊距設為0（2） 網(wǎng)頁中插入三行文字1）第一行為“歡迎光臨我的個人網(wǎng)站”（格式要求：居中，字體大小為7）2）第二行為“這是我做的第一個網(wǎng)頁”（格式要求：居左，字體大小為5）3）第三行為“請多多指教”（格式要求：居右，字體大小為1）（3） 在網(wǎng)頁適當?shù)奈恢貌迦胍粭l水平線，結合網(wǎng)頁背景設置水平線的顏色實驗要求：1．掌握站點的創(chuàng)建2．掌握網(wǎng)頁文件的基本操作；頁面屬性的設置；文本的插入和格式設置3、 實驗名稱：文檔的基本操作實驗內(nèi)容：1?使用Dreamweaver制作如下一個頁面，命名為“index.htm"，并在瀏覽器中運行，結鏈接果如下圖所示。在主頁“index.html”中，要求添加背景顏色，每句詩之間要空行，且的基本操作，掌握文本整個詩要求居中，在“QQ的生活”創(chuàng)建一個空鏈接。實驗要求：掌握文檔的屬性設文件（巳編輯（或查看（也收藏（直工具鏈接果如下圖所示。在主頁“index.html”中，要求添加背景顏色，每句詩之間要空行，且的基本操作，掌握文本整個詩要求居中，在“QQ的生活”創(chuàng)建一個空鏈接。實驗要求：掌握文檔的屬性設文件（巳編輯（或查看（也收藏（直工具（D幫助（出空活總是美麗的不是苦惱太多，而是我們的胸懷不夠開闊不是幸福太少，而是我們還不懂如何生活憂愁時，就寫一首詩快樂時，就唱一支歌QQ的生活唇QQ的家園-MicrosoftInternetExplorero實驗名稱：表格的創(chuàng)建和使用是件么，生命總是美麗的）后退丁Q丁回圈總11工搜索☆收奩夾《|命〒乙閡〒地址（Q）|構匚：心□匚UITI已「I佔日「id三已也「心或山=1「「1『1試記1：匸譏桌面1實驗*「1日應：：上止「「|1-畫完畢J我的電腦實驗內(nèi)容：1．創(chuàng)建如下圖所示的表格2.使用表格完成如下圖所示的頁面布局。實驗要求：1．掌握表格的創(chuàng)建；表格的基本操作2．掌握使用表格或布局表格設計網(wǎng)頁的布局5、實驗名稱：多媒體元素的插入1．使用布局表格完成效果如下圖所示的頁面布局，并插入網(wǎng)頁的基本元素。Flash動畫實驗內(nèi)容：1．創(chuàng)建如下圖所示的表格2.使用表格完成如下圖所示的頁面布局。實驗要求：1．掌握表格的創(chuàng)建；表格的基本操作2．掌握使用表格或布局表格設計網(wǎng)頁的布局5、實驗名稱：多媒體元素的插入1．使用布局表格完成效果如下圖所示的頁面布局，并插入網(wǎng)頁的基本元素。Flash動畫長春介紹旅游介紹景點介紹祕旅游線路右美負介紹長春是亍具有歐洲田園城市規(guī)劃特點冊城市，市岡內(nèi)街路笙直寬闊；街道兩旁松柏常青宛如條條綠色長廊，座座街心廣場則花処錦藤，是人們休息和農(nóng)練、娛樂冊好場所，市岡內(nèi)既有中國古典建筑，也有日式和歐式建筑、而不斷崛起的高樓大廈和居民住宅小岡使得長春不斷増希著古今中外文化交融輝映的韻調(diào)和現(xiàn)代化城市的魅力-位于市岡東北部的偽滿洲國皇宮，是中國蓿朝末代皇帝愛新覺羅?溥儀第三諛“登基"時的宮殿.偽滿政楓“國務院"等"A±部"機關舊址和佛教圣地般若寺也是國家級旅游景點?購物指南長舂景點長春市概況區(qū)號：0431郵編：130000位苴：位于松遼平原中部，西北與白城市毗鄰，西南與四平市相連，東南與吉林市相連，東北同黒龍江省接壤.區(qū)劃：下轄南關區(qū)、寬城區(qū)、朝陽區(qū)、二道區(qū)、綠園區(qū)、收陽岡、德惠市、九臺市、榆樹市、農(nóng)安縣?偽滿皇宮2、任選圖像和文本,掌握兩者的相互對齊方式實驗要求：多媒體元素的插入掌握圖像、聲音、動6、實驗名稱：鏈接多媒體元素的插入掌握圖像、聲音、動6、實驗名稱：鏈接實驗內(nèi)容：1.將上次的作業(yè)復制/”\、小 人 ” 34丄宀衣"177771 a ■ 1 ,r”設為首頁I聯(lián)糸我們I加人收藏i站長信箱⑵選中文本“偽滿皇宮”，鏈接到網(wǎng)頁“wmhg.html”（3）為文本“聯(lián)系我們”創(chuàng)建電子郵件鏈接，地址為自己的郵箱創(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)頁的頂部添加標題“河南省地圖導航”，并將它做成一個超鏈接，要求鼠標放上時，右下角顯示標題“這是河南圖象地圖”，鏈接目標為空鏈接（任意一種），并且可以使用“alt+d”快捷鍵直接選中該鏈接。實驗要求：1．掌握相對路徑的設置2．掌握基本超級鏈接、電子郵件鏈接、熱點鏈接、錨點鏈接、腳本鏈接的創(chuàng)建7、 實驗名稱：制作具有框架結構的網(wǎng)頁實驗內(nèi)容：1、建立一個名為“花的世界”的站點，自己定義站點文件夾名，并創(chuàng)建一個如下所示的框架集，根據(jù)需要對其中各個框架的大小和屬性進行設置并保存（文件|保存全部），保存時建議輸入一個好記的名稱。當單擊左邊框架花的名稱，主框架中會顯示對應的內(nèi)容。實驗要求：1．了解框架集和框架的概念2．掌握框架結構網(wǎng)頁的創(chuàng)建及常用屬性的設置8、 實驗名稱：創(chuàng)建CSS樣式表實驗內(nèi)容：完成以下操作：（1） 使用重定義標簽的方法把l.htm中的表格中的所有文字設置成12像素,紅色,應用范圍僅對該文檔。（2） 首先把1.html中的表格中“連接”兩個字做成空鏈接，然后把該鏈接使用重定義標簽的方法設置成沒有下劃線，綠色，14象素大小。應用范圍是外部的樣式表文件，名字為new.css（3） 使用CSS高級樣式，把2.htm中的鏈接的四種狀態(tài)分別定義為：正常狀態(tài)（link）為紅色，12像素；鼠標放上狀態(tài)（hovor）為藍色，14像素；正在點擊狀態(tài)（active）為黃色，16像素；訪問過的狀態(tài)（visitied）為黑色，18像素。以上四種狀態(tài)都沒有下劃線。應用范圍僅對該文檔。⑷使用自定義樣式（class）的方法，把3.htm中的4句話分別設置4種不同顏色和字體的的自定義樣式，名字任意。（5）新建一個文件4.htm,在其中建立一個鏈接，用鏈接外部樣式表的形式把new.css中的樣式應用到當前文檔中。實驗要求：1．了解CSS的基本概念2．掌握三種CSS樣式類型的創(chuàng)建及應用掌握”CSS規(guī)則定義”對話框中樣式八大類別的使用9、 實驗名稱：利用時間軸創(chuàng)建層動畫實驗內(nèi)容：1、 建立文件donghual.htm，要求在圖片背景上，使用能夠扇動翅膀的3張蝴蝶圖片（GIF格式），結合層和時間軸設計出自由紛飛的效果。2、 建立文件donghua2.htm,利用層的嵌套屬性結合時間軸能夠制作出站點中常見的公告板，公告板中的文字從下向上循環(huán)運動，能夠對網(wǎng)頁中的重要內(nèi)容進行動態(tài)分布.3、 建立文件donghua3.htm，利用錄制層路徑的方法創(chuàng)建一個動畫，要求層運動的軌跡是一個近似圓形，預覽時，動畫在打開瀏覽器兩秒鐘后才開始播放，請根據(jù)時間軸的相關知識實現(xiàn)。實驗要求：1．了解時間軸2．掌握應用層和時間軸制作動畫的方法10、 實驗名稱：添加行為實驗內(nèi)容：在頁面l.htm中繼續(xù)回車換行，插入一個層，設置層的背景顏色為綠色，當在層上單擊鼠標時，層的背景顏色變?yōu)榧t色。建立頁面2.htm，插入圖片“hh.jpg”，在圖片上3個圓形區(qū)域“機器貓”“小黑熊”“米老鼠”上分別創(chuàng)建3個熱點。當鼠標移到相應熱點上時，顯示相應的圖片，鼠標移開時，所有圖片消失。請根據(jù)層和行為實現(xiàn)。效果如下入所示：實驗要求：1．熟悉對象、事件、動作和行為的基本概念2．掌握使用行為面板添加和編輯各種行為3.掌握Dreamweaver自帶行為的應用11、實驗名稱：創(chuàng)建模板和庫實驗內(nèi)容：1.利用模板制作如下圖所示的網(wǎng)頁。圖人與自然首頁圖植物天地