1、網頁設計與制作實驗指導一覽表實驗名稱實驗內容備注實驗一HTMI語言詳細內容實驗二初識Dreamweaver詳細內容實驗三文本操作詳細內容實驗四圖像操作詳細內容實驗五超級鏈接詳細內容實驗六表格布局詳細內容實驗七多媒體應用詳細內容實驗八CSS樣式詳細內容實驗九層的布局詳細內容實驗十框架網頁詳細內容實驗一模板和庫詳細內容實驗十二表單網頁詳細內容實驗十三網站開發綜合實例詳細內容實驗1 HTML語言實訓目的：為了讓學生能熟悉學習網頁不可避免要接觸的HTML語言，達到用該語言 可以建立一個簡單的網頁的目的，同時了解建立站點是做網站必不可少的， 要掌 握建立站點的方法。素材準備：準備制作網頁所需的文字素材、

2、圖像素材。實驗課時：2學時實驗內容：1.創建站點；2.新建網頁以及保存，重命名；3.輸入HTML語言。實驗步驟:1.在E盤中新建本地根文件夾，命名為root，并在該文件夾中新建image文件夾以存放網站中所要用到的圖片。2.定義站點：設置站點名稱，命名為mysite;設置本地根文件夾,指定 為E盤下的root文件夾；設置HTTP地址為localhost。3.創建與設置文檔的頁面屬性：新建一個頁面，保存名為“HTM基礎”的文檔。4.切換代碼模式下，輸入代碼。5.保存文件，預覽文件效果。實驗過程注意事項：1.在創建站點的過程中注意建立本地文件夾， 文件夾命名最好為英文；網站 中所有的文件最好取名為

3、英文；注意文件的路徑；2.所有的圖片文件單獨放在image文件夾內。實驗思考：除了用HTML語言來做這個網頁，還有沒有其它的方法？書寫實驗報告要求：根據最終所作的網頁，寫出實驗報告。頁面效果圖：圖1-1實驗2初識Dreamweaver實驗目的 ：為了讓學生能熟練掌握Dreamweave啲安裝與卸載，啟動與退出，基本工 作環境和設置，對Dreamweaver操作環境有一定了解。素材準備：準備好從網上下載的安裝程序。實驗課時：2學時實驗內容：1.安裝Dreamweaver：2.Dreamweaver的啟動與退出：3.了解工具欄、菜單欄、標題欄等工作環境：4.卸載Dreamweaver實驗步驟：1.

4、打開從網上下載的Dreamweaver程序，雙擊安裝。2.安裝完成后輸入注冊號。3.啟動Dreamweave，并查看工具欄、菜單欄、標題欄等工作環境。4.退出Dreamweaver。5.卸載Dreamweaver實驗過程注意事項：1.安裝過程完成后，要激活。實驗思考：從“控制面板”里刪除程序與從安裝到的目錄文件里刪除有什么區別？書寫實驗報告要求：寫出本次實驗報告。實驗3文本操作實驗思考：實驗目的：為了讓學生能熟練掌握在Dreamweaver mx中如何輸入文本，調整設置文 本的格式；如何插入特殊字符、文本列表、水平線、時間、注釋的方法。素材準備：準備制作網頁所需的文字素材、圖像素材、音樂素材。

5、實驗課時：2學時實驗內容：1.輸入文本：2.調整文本：3.插入特殊字符：4.插入文本列表：5.插入水平線：6.插入時間：7.插入注釋：8.設置文本格式：實驗步驟：1.新建一個頁面文件；2.輸入文本，調整文本的間距，設置文本的格式；通過“屬性”面板中的“格 式”和“顏色”等參數，將文字設為標題格式，并改變其顏色；3.輸入一段不帶格式的文字，選擇“常用”工具欄上的“文本”單選項目， 利用換行按鈕對文本進行換行處理，實現分段的效果；4.插入特殊字符、項目符號、水平線、時間、注釋等內容；實驗過程注意事項：1.在“編輯字體列表” 對話框中選擇要添加的字體要一個個地添加進去， 不 能全部選取再添加；2.當

6、輸入文本時要插入多個連續的空格，必須要“編輯”菜單下的“首選參 數”中設置；3.換行的幾種方式：自行換行；按ENTER強行換行；按SHIFT+ENTE換行操 作；如何插入版權符號？如何插入特殊字符“Y”？書寫實驗報告要求：實驗思考：根據調試結果，寫出實驗報告實驗4圖像操作實驗目的：為了讓學生熟練掌握在Dreamweavermx中插入圖像，學會設置圖像屬性; 如何插入鼠標經過圖像、插入圖像占位符的方法，掌握圖文混排的技巧等操作。素材準備：準備制作網頁所需的文字素材、圖像素材、音樂素材。實驗課時：2學時實驗內容：1.插入圖像：2.設置圖像屬性：3.插入鼠標經過圖像：4.插入圖像占位符：5.圖文混排

7、操作：實驗步驟：1.打開上次實訓所做的頁面文件;2.插入圖像，在屬性面板對圖像的格式進行設置;3.插入鼠標經過圖像、圖像占位符;4.將圖片和文字進行混合排版;5.保存文件，預覽文件效果;實驗過程注意事項：1.插入的圖像必須放在站點文件夾下的image文件夾內;2.設置圖片的熱點區域可選任意的工具;如何設置圖片超鏈接，鏈接到指定的頁面文件? 如何設置圖片的熱點區域？書寫實驗報告要求：根據調試結果，寫出實驗報告。頁面效果圖：實驗5超級鏈接實驗目的：為了讓學生掌握如何利用超級鏈接來制作頁面；了解主頁的創作步驟；掌 握鏈接各種方式的制作方法與步驟。素材準備：準備制作網頁所需的文字素材、圖像素材、音樂素

8、材。實驗課時：2學時實驗內容：1.插入橫向導航條2.設置文本鏈接3.插入左置導航欄4.創建外部超級鏈接5.創建內部超級鏈接6.創建E-MAIL鏈接7.創建錨點鏈接8.創建下載文件的鏈接9.創建空鏈接10.創建腳本鏈接 實驗步驟：1.創建一個上方固定左側嵌套的框架頁面；2.在框架的上部分插入相關的圖片或網站的LOG（及BANNE；3.左側插入相關的文字，作為左側導航欄，右側框架頁面中輸入相關文字；4.在右側框架頁面中， 分別以3段文本段落標題作為錨點， 在頁面上部設置 錨記鏈接；5.在左下部設置“友誼鏈接”到相關的網站，設置“聯系我們”的E-MAIL鏈接；創建“下載”到下載文件的鏈接；6.保存文

9、件，預覽文件效果；7.實訓過程注意事項8.導航欄要注意分類，避免重復出現；9.錨點的名稱要注意不能重名。實驗思考：錨點在同一個文件中是否可以重名？ 如何設置鏈接到指定的網站？書寫實驗報告要求：根據調試結果，寫出實驗報告頁面效果圖：圖1-4實驗6表格布局實驗目的：為了讓學生熟練掌握在Dreamweaver mx中插入表格，學會設置表格的各 項屬性；并掌握如何在表格中插入文本、插入圖像的操作方法和步驟。素材準備：準備制作網頁所需的文字素材、圖像素材、音樂素材。實驗課時：2學時實驗內容：1.插入表格，并選擇表格和單元格：2.設置單元格屬性：3.調整表格結構、大小：4.格式化表格：稅園新聞狡園生運校園

10、文化校園相時下載文件聯系妝們第一童校園第二章吿別校園第三章我們的明天第一登棧園一顆蒲公英小小的種子.被革地上那個小女孩莊輕 一吹，神奇地落在這里便不再動了這也許寛是夙家己經變得十分遙遠的那個八月末的午夜.車子 在黑幽幽的校園里林叢中錠轉終于停住的時候，我 認定那是一繪中最神圣的一個複晚命運安排我選 様了蘇園一片土R咐45.表格中插入文本，表格中插入圖像:實驗步驟：1.新建一個頁面，在頁面中插入一個表格，并在其中輸入相應的文字；2.選擇表格利用“格式化表格”命令來對表格格式進行修改，使其更美觀;3.根據要求對部分單元格進行拆分或合并操作；4.設置文字的對齊方式，通過對邊框、填充和間距進行設置；5

11、.保存文件，預覽文件效果；6.實驗過程注意事項7.插入表格時要注意：單元格的邊距和單元格的間距值的設置；8.表格邊框線精細為0像素的特殊用途；9.插入的圖像必須放在站點文件夾下的image文件夾內。實驗思考:如何折分和合并單元格？如何設置表格的背景？書寫實驗報告要求：根據調試結果，寫出實驗報告 頁面效果圖:山東工業職毗學院計算機班課程表星期星期一星期二1星期三1星期四星期五;_T 節大學英語機械制圖，大學英語高等數學節高尊數學網頁制作圈像處理機械制圖5-6節腑制圖圖像處理網頁制作圖1-5實驗7多媒體應用實驗目的：為了讓學生熟練掌握Flash動畫、視頻、聲音等多媒體， 能夠制作出動感 十足的網頁

12、，主要掌握如何插入Flash元素、插入背景音樂、插入視頻、插入圖 像查看器等內容。重點是插入Flash元素，難點是插入圖像查看器。素材準備：準備制作網頁所需的Flash元素、圖像素材、音樂素材、視頻素材等。實驗課時：2學時實驗內容：1.插入FLASH動畫2.插入FLASH按鈕3.插入FLASH文本4.插入FLASH視頻5.插入音頻、視頻6.插入Java Applet7.插入ActiveX控件實驗步驟：1.新建一個頁面，用表格劃分布局。2.插入Flash導航條，添加背景。使背景透明化3.在第二個表格左側插入Flash按鈕。4.右側表格中插入視頻。實驗過程注意事項：1.表格布局是重點2. Flas

13、h背景透明化需設置參數。3.插入Flash視頻格式是.flv4.插入的FLASH文件必須將其復制到站點文件夾內；5.插入的按鈕必須要更改各個按鈕的存儲名稱， 否則網頁中顯示的將是同一 個按鈕；實驗思考：如何使Flash背景透明化？ 如何設置按鈕的背景色與網頁中的背景色一致？ 在Fireworks中制作的圖形要在網頁中引用應如何操作？書寫實驗報告要求：根據調試結果，寫出實驗報告頁面效果圖：圖1-6實驗8 CSS樣式實驗目的：為了讓學生了解使用CSS樣式來美化網頁的方法，掌握創建CSS樣式的方 法和步驟，以及利用CSS濾鏡來制作文字特效等操作。素材準備：準備制作網頁所需的文字素材、圖像素材、音樂素

14、材、動畫素材。實驗課時:2學時實驗內容：1. csS羊式的新建：2. CSS羊式的編輯與修改：3. CSS羊式的應用：4.利用CSS濾鏡來特效文字效果：5.制作光暈字、陰影字、遮罩字、動感字實驗步驟：1.新建一個頁面，在此頁面中創建CSS羊式將圖片應用CSSS鏡。2.對頁面中兩部分文字分別使用CSS羊式：并對部份文字作超級鏈接。3修改CSS羊式：對表格的框線、背景圖片、鏈接樣式等進行設置，并重新 應用到所指定的部分；4.運用CSSS鏡來制作文字特效：光暈字、陰影字、遮罩字、動感字的制作;5.保存頁面，預覽效果圖； 實驗過程注意事項：csS羊式應保存到網站站點目錄下;csS羊式的名稱應注意不能同

15、名。實驗思考：如何利用csS羊式來創建鏈接文本不顯示下劃線? 如何將csS羊式應用到另外的網站的網頁中？書寫實驗報告要求：根據調試結果，寫出實驗報告。頁面效果圖：四川 ns址干四 III 皆叵覽藏族羌撈自治州九略 G 曇 占黃釀鹽堰基禰地貌.景宓長 8 猜公里.5SEA7J 有盤皈罄機蜒盤亞則讎.黑角漲WiE 九平歸飾農而得名*幾察闖焙約鮒 0 班萬尬耍。目績普色兼有湖 I 軒掩之類。范墾恣害鼻中于 忙 字床.的三越主亍,里.靑*MllJl3 來不九捌 35fc 不水廿的捷缶九廈遏的精艮是水獵 *J 飛琥與弄請蠟合.剛剎昌凰榮宿帶.千 05色.多翌冬黔高征鉗返的薛浸扈唱妊喧； 縣活盪葡水*耐虹

16、時”硼.SB.潔天.一涉一芭*些幻無窮；廉在顧販*極 河在木中矢 九藁辺現已觀施丸個#卜籠 寶覆巖嘗 E 陋正震 E afflJSE 鉤巖胃: 自直“圖1-7實驗9層的布局實驗目的：為了讓學生掌握如何利用層來布局網頁，掌握層的插入，設置層的各項屬 性，利用層與行為的應用來創建層動畫以及“行為”的添加等操作。素材準備：準備制作網頁所需的文字素材、圖像素材、音樂素材。實驗課時：2學時實驗內容：1.使用層排版2.設置層文本3.顯示隱藏層4.拖動層5.調整層的大小6.層的對齊7.“行為”調用實驗步驟：1.新建一個頁面，用表格劃分布局。2.在左側第二個單元格中插入“保存圖像”“原始狀態”兩個提交按鈕。3

17、.左側小女孩分為三個層，并設置層名字分別為“tou”,“yi”、 “ku”顯示屬性都為可見；4.右側衣服分為四個層，并設置名字分別為“yil”，“yi2”、“kul”，“ku2” 顯示屬性都為可見；5.利用層與行為來制作顯示與隱藏層動畫：選擇“yi1”，添加一個“顯示隱藏層”行為，設置”tou”可見，”ku”可見；”yi1”可見，其它 全部隱藏事件改為onClick；再添加一個雙擊脫下衣服，還原行為，設置”tou”可見，” ku”可見；” yi”可見，其它全部隱藏事件改為onDbICIick.6.利用同樣的道理，設置分別單擊，雙擊”yi2”ku1”ku2”的事件行 為。7.保存文件，預覽文件效

18、果。實驗過程注意事項：插入的圖像必須放在站點文件夾下的image文件夾內； 利用層與行為制作動畫首先應選中對應層。實驗思考：行為由哪兩部分組成？如何設置行為中的事件更多？書寫實驗報告要求：根據調試結果，寫出實驗報告頁面效果圖：卻囿Z”必 T * 預覽形隸點擊圖片穿上/雙擊圖片脫下圖1-10實驗10框架網頁實驗目的：為了讓學生掌握如何創建框架；設定框架的內容和樣式；學會制作浮動的 框架等操作。素材準備：準備制作網頁所需的文字素材、圖像素材、音樂素材。實驗課時：2學時實驗內容：1.創建框架2.設定框架內容和樣式，保存框架3.設置無框架內容4.制作浮動框架實驗步驟：1.在新建文檔對話框的 “框架集”

19、 類型中，選擇左側固定上方嵌套的框架模 式，創建一個新的框架頁；2.插入圖片和按鈕，以及相關的文字內容；3.在屬性面板中設置文字和圖片的格式屬性；4.在左側列出導航鏈接， 制作鏈接對應的子頁面， 最終實現點擊左側框架的 鏈接，右面的框架會跳轉到相應的子頁面；5.保存文件，一定要分別保存框架的各個部分，每一部分為一個HTM文件, 總的框架是一個HTML文件，預覽文件效果；實驗過程注意事項：插入的圖像必須放在站點文件夾下的image文件夾內； 框架的保存分幾個部分。實驗思考：框架的保存應注意有幾個文件要保存？如何設置框架中的鏈接？書寫實驗報告要求：根據調試結果，寫出實驗報告。頁面效果圖：圖1-11

20、實驗11模板和庫實驗目的：為了讓學生掌握如何利用模板和庫來制作網頁；掌握模板的創建與編輯； 掌握創建可編輯區域、可選區域、重復區域；掌握模板的保存與應用操作；了解 如何創建庫項目及插入庫項目等操作。素材準備：準備制作網頁所需的文字素材、圖像素材、音樂素材。實驗課時：2學時實驗內容：1.創建模板2.定義可編輯區域3.定義可選區域4.定義重復區域5.設置可編輯標簽屬性6.應用模板7.調整模板8.創建庫9.插入庫10.調整庫實驗步驟：1.新建一個模板頁面，編輯模板頁面；2.在模板中插入可編輯區域并保存；3.新建一個基于模板的頁面， 修改模板文件， 所有基于此模板的頁面都會被 修改；4.新建一個空白頁

21、，套用上一實例中的模板；5.打開上一實例基于模板的頁面， 選擇插入菜單中的模板對象， 選擇創建嵌 套模板，制作新的嵌套模板， 加入第2個可編輯區域并保存， 最終生成嵌 套模板；6.制作一個包含圖像的網頁，選中圖像并拖動到庫中；7.新建一個空白文檔，從庫中將圖像拖到空白頁面中；8.打開庫項目，對其添加鏈接，保存庫文件，提示更新相關頁面，打開包含 被修改庫項目的頁面文檔，完成更新；9.保存文件，預覽文件效果；實驗過程注意事項：插入的圖像必須放在站點文件夾下的image文件夾內； 模板的保存注意擴展名。實驗思考：如何套用模板到頁面？ 如何在模板中添加重復區域？書寫實驗報告要求：根據調試結果，寫出實驗

22、報告。頁面效果圖：輩子就再也沒有機令去讀了雖然不是每本書舂了都一宦有 用*但是.因九你不知道究竟鄆本書以后舎肓用.顱以只好多看書，開且施棄那些過于功利的SB法.盡管每次朋到魚的不過是一嚀網眼，舊要 想摘到魚.就吧或要備織一張網。聯系人：jcumx:上觸126. 8tu圖1-12實驗12表單網頁實驗目的：為了讓學生掌握如何創建表單網頁；了解各個表單對象屬性的設置；熟練 掌握各個表單對象不同的使用范圍。素材準備：準備制作網頁所需的文字素材、圖像素材、音樂素材。實驗課時：2學時實驗內容：1插入表單；2.插入表單對象：文本框、復選框、單選按鈕、按鈕、復框框、圖像域、密 碼域、列表和菜單。實驗步驟：1.

23、新建一個頁面，按圖13所示，插入左右兩個層,2.在每個層里插入表單， 在表單中插入文字內容及對應的表單對象： 文本框、 復選框、單選按鈕、按鈕、復框框、圖像域、密碼域、列表和菜單3.設置各個表單對象的屬性值：將學生姓名、E-MAIL、具體地址的文本域依 次命名為name、email、address等等；設置好字符寬度，文本域類型等；4.將“專業”“性別”“民族”“政治面貌”“學歷”“學制” 為列表菜 單。5.插入“笑臉”圖片，對齊層。6.保存文件，預覽文件效果；實驗過程注意事項：在一個網頁中只能插入一個表單，但在一個網頁中可以有多個表單對象； 各個表單對象注意在屬性面板中定義其名稱。實驗思考：

24、1.表單對象中的插入兩個單選按鈕，如何命名？2.如何設置密碼域？3.文本字段與文本區域如何轉換？4.如何設置檢查表單的行為？書寫實驗報告要求：根據調試結果，寫出實驗報告。頁面效果圖：圖1-13實驗13網站開發綜合實例實驗目的:通過綜合實訓進一步鞏固、深化和擴展學生的理論知識與專業技能。（1）掌握規劃網站的內容結構、目錄結構、鏈接結構的方法。（2）熟練掌握網頁制作軟件Dreamweaver 8的基本操作和使用技能。（3）掌握頁面的整體控制和頭部內容設置的方法。（4）熟練掌握網頁頁面布局的各種方法。（5）熟練掌握在網頁中輸入、設置標題和正文文字的方法。（6）熟練掌握在網頁中插入圖像、flash動畫、背景音樂的方法。（7）掌握建立各種形式超級鏈接的方法。（8）掌握表單網頁制作方法。（9）掌握網頁特效的制作方法。（10）掌握網站測試的方法。素材準備:準備制作網頁所需的文字素材、圖像素材、音樂素材、FLASH動畫、網頁特效等。實驗