1、 互聯網與網站建設實驗指導書聊城大學傳媒技術學院2008年8月1實驗指導書 目錄實驗一 簡單網頁制作3實驗二 多媒體網頁制作15實驗三 表格布局網頁制作20實驗四 Fireworks切圖網頁制作24實驗五 XHTML語言網頁制作30實驗六 CSS選擇符33實驗七 CSS盒模型37實驗八 CSS兩列浮動布局41實驗九 CSS三列浮動布局49實驗十 CSS兩列定位布局57實驗十一 CSS三列定位布局61實驗十二 Ajax框架在網頁中的應用67實驗十三 網頁制作綜合訓練71實驗一 簡單網頁制作一、實驗目的1熟悉Dreamweaver軟件的操作界面。2掌握建立本地站點的方法。3掌握簡單網頁制作方法。4

2、掌握超鏈接的建立方法。5初步了解表格布局方法。6初步了解為網頁添加CSS樣式表的方法。二、實驗內容1創建“文學小屋”站點。2制作“文學小屋首頁” 網頁。3制作“文學小屋紅舞鞋”網頁。4制作“文學小屋愛的秘密”網頁。5完成網頁超鏈接。6為網頁添加CSS樣式表。三、操作步驟1創建“文學小屋”站點（1）在硬盤根目錄下新建文件夾，命名為mysite；（2）打開mysite文件夾，在其中建立子文件夾，命名為images；（3）將所有圖片素材復制到images文件夾中；（4）啟動Dreamweaver，使用“站點新建站點”命令新建“文學小屋”站點，并指定mysite文件夾為“文學小屋”站點的本地根文件夾。

3、2制作“文學小屋首頁”。（1）使用“文件新建”命令新建網頁。（2）使用“文件保存”命令保存網頁，命名為index.html。（3）在文檔工具欄上設置網頁標題“文學小屋首頁”。（4）使用“修改頁面屬性”命令設置網頁背景顏色為淡黃色。（5）在網頁中插入圖片、文字、水平線、表格等對象，并在屬性面板上設置對象屬性。（6）保存網頁，按F12，預覽網頁。3制作“文學小屋紅舞鞋”網頁。（1）使用“文件新建”命令新建網頁。（2）使用“文件保存”命令保存網頁，命名為dance.html。（3）在文檔工具欄上設置網頁標題“文學小屋紅舞鞋”。（4）插入table1，1行2列，寬度760像素。（5）選中table1，

4、在屬性面板上設置其居中對齊。（6）光標置于table1的左列單元格中，設置其寬度為200像素。（7）在table1的左、右單元格中分別插入圖像。（8）光標置于table1之后，插入table2，1行3列，寬度760像素。（9）選中table2，在屬性面板上設置其居中對齊。（10）設置table2左、中、右單元格的寬度分別為150像素，460像素，150像素。（11）在table2 的中列單元格中輸入文字，并設置文字屬性。（12）光標置于table2之后，插入table3，1行1列，寬度760像素。（13）選中table3，在屬性面板上設置其居中對齊。（14）光標置于table3的單元格中，設置

5、該單元格的水平對齊方式為右對齊。然后在其中插入圖像。（16）光標置于table3之后，插入table4，1行1列，寬度760像素。（17）選中table4，在屬性面板上設置其居中對齊。（18）光標置于table4的單元格中，設置該單元格的水平對齊方式為居中對齊，并在其中插入文字“返回”。（19）保存網頁，按F12，預覽網頁。4制作“文學小屋愛的秘密”網頁。（1）使用“文件新建”命令新建網頁。（2）使用“文件保存”命令保存網頁，命名為love.html。（3）在文檔工具欄上設置網頁標題“文學小屋愛的秘密”。（4）使用“修改頁面屬性”命令設置網頁背景圖像為lovebg.jpg。（5）插入table

6、1，1行2列，寬度760像素。（6）設置table1左列單元格的寬度為110像素。（7）光標置于table1的右列單元格中，設置該單元格的垂直對齊方式為“頂端”。（8）在table1中嵌套表格table2，1行1列，寬度100%，高度80像素。在其中輸入文字, 并設置文字屬性。（9）將光標置于table2之后，插入嵌套表格table3，1行2列，寬度100%。，設置table3的兩個單元格的垂直對齊方式為“頂端”。然后在其中插入圖像和文字。（10）將光標置于table3之后，插入嵌套表格table4，1行2列，寬度100%。設置table4的兩個單元格的垂直對齊方式為“頂端”，右列單元格的水平

7、對齊方式為“右對齊”，然后插入圖像和文字。（11）將光標置于table4之后，插入嵌套表格table5，1行1列，寬度100%。設置table5的單元格的水平對齊方式為“居中對齊”，在其中輸入文字“返回”。（12）保存網頁，按F12，預覽網頁。5建立超鏈接（1）建立首頁與“紅舞鞋”、“愛的秘密”網頁之間的超鏈接；（2）在“首頁”上選中“榕樹下”網站Logo，建立到“榕樹下”網站的超鏈接；（4）在“首頁”上選中“信鴿”圖像，建立電子郵件地址鏈接。6為網頁添加CSS樣式表（1）打開“index.html”文件。（2）單擊“CSS”面板上的“新建CSS規則”按鈕。（3）在“新建CSS規則”對話框中設

8、置選擇器類型為“標簽”，標簽為“body”，定義在“新建樣式表文件”，單擊“確定”按鈕。（4）將CSS文件保存在style文件夾中，命名為basic.css。（5）定義字體為宋體，0.75字體高（em），1.5倍行高。單擊“確定”。（6）保存文件，按F12預覽，網頁文字小而精致，增加了行高。（7）新建CSS規則。設置選擇器類型為“高級”，選擇器為“a:link”，定義在“basic.css”文件中，單擊“確定”按鈕。（8）定義a:link的樣式為，文字黑色，修飾“無”。（9）新建CSS規則。設置選擇器類型為“高級”，選擇器為“a:visited”，定義在“basic.css”文件中，單擊“確定

9、”按鈕。（10）定義a:visited的樣式為，文字黑色，修飾“無”。（11）新建CSS規則。設置選擇器類型為“高級”，選擇器為“a:hover”，定義在“basic.css”文件中，單擊“確定”按鈕。（12）定義a:hover的樣式為，文字紅色，修飾“下劃線”。（13）新建CSS規則。設置選擇器類型為“高級”，選擇器為“a:active”，定義在“basic.css”文件中，單擊“確定”按鈕。（14）定義a:active的樣式為，文字紅色，修飾“下劃線”。（15）保存文件，按F12預覽，網頁上的超鏈接黑色，無下劃線。當鼠標經過超鏈接時，文字紅色，有下劃線。（16）關閉“index.html”

10、和“basic.css”文件。（17）打開“love.html”文件。（18）單擊“CSS”面板上的“附加樣式表”按鈕。（19）為“love.html”文件鏈接外部樣式表“basic.css”。（20）保存文件，按F12預覽，網頁上的文字小而精，增加了行高。網頁上的超鏈接黑色，無下劃線。當鼠標經過超鏈接時，文字紅色，有下劃線。四、實驗要求及注意事項1從53服務器下載素材。2認真完成全部實驗內容。3先建立站點，再制作網頁。4表格布局時，表格的邊框、填充、邊距全部為0。5設置CSS時，首先設置Dreamweaver的CSS代碼為速記。實驗二 多媒體網頁制作一、實驗

11、目的掌握在網頁中插入各種多媒體元素的方法。二、實驗內容1在網頁中嵌入Media Player播放器。2在網頁中嵌入RealPlayer播放器。3在網頁中插入背景音樂。4在網頁中插入flash動畫。5在網頁中嵌入圖片播放器。6在網頁中嵌入flv播放器。三、操作步驟1創建“多媒體”站點。（1）在硬盤根目錄下新建文件夾，命名為myweb。（2）將images、media、bcastr、vcastr四個文件夾復制到myweb文件夾中，其中images是圖片文件夾，media是多媒體文件夾，bcastr是圖片播放器文件夾，vcastr是flv播放器文件夾。（3）啟動Dreamweaver，使用“站點新建

12、站點”命令新建“多媒體”站點，并指定myweb文件夾為“多媒體”站點的本地根文件夾。2在網頁中嵌入Media Player播放器新建網頁，保存網頁為001.htm。在網頁中插入ActiveX，在屬性面板上設置ClassID為clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95，寬320像素，高240像素，參數設置如圖所示。3在網頁中嵌入RealPlayer播放器新建網頁，保存網頁為002.htm。在網頁中插入ActiveX，在屬性面板上設置ClassID為clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA，寬320像素，高280

13、像素，參數設置如圖所示。4在網頁中插入背景音樂新建網頁，保存網頁為003.htm。在網頁中插入，在彈出的選擇文件對話框中選擇media/lovemed.mid。插件的參數設置如圖所示。5在網頁中插入flash動畫新建網頁，保存網頁為004.htm。在網頁中插入flash動畫media/yueding.swf。6在網頁中嵌入圖片播放器。（1）新建網頁，保存網頁為005.htm。在網頁中插入圖片播放器bcastr/bcastr4.swf。（2）在屬性面板上設置播放器寬400像素，高300像素。（3）切換到代碼窗口，設置XML文件的路徑。 embed src=bcastr/bcastr4.swf?x

14、ml=bcastr/bcastr.xml（4）打開bcastr.xml文件，在其中設置圖片的路徑。images/image1.gif學科建設images/image2.gif人才培養images/image3.gif校園環境7在網頁中嵌入flv播放器。（1）新建網頁，保存網頁為006.htm。在網頁中插入圖片播放器vcastr/vcastr3.swf。（2）在屬性面板上設置播放器寬550像素，高400像素。（3）設置參數如下：（4）打開vcastr.xml文件，在其中設置flv視頻文件的路徑。./media/01.flv你和我./media/02.flv飛人大賽8制作“歲月留聲”網頁，并實現歌

15、曲點播。主要步驟：（1）新建網頁，保存網頁為007.htm。設置網頁背景圖像，并在網頁中插入圖像、表格及文字。（2）在網頁中插入ActiveX，在屬性面板上設置ClassID為clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95，寬320像素，高28像素。為播放器加入id標識player。（3）在網頁中插入表格，填寫歌曲名稱，并設置超鏈接：偏偏喜歡你后來（4）加入在之間加入javascript，實現歌曲點播。function musicplay(name) if (name=) return; filename = name; player.Cancel() p

16、layer.Open(filename)四、實驗要求及注意事項1從53服務器下載素材。2認真完成全部實驗內容。3先建立站點，再制作網頁。4播放器對象的classid從clsid開始填寫。實驗三 表格布局網頁制作一、實驗目的1掌握在Fireworks中提取圖像、提取尺寸、提取顏色的方法。2掌握使用表格布局網頁的方法。二、實驗內容制作“北京大學首頁”網頁。三、操作步驟1新建文件夾，命名為“beida”，在其中創建“images”子文件夾。2啟動Fireworks，使用切片工具提取需要的圖像，并導出到images文件夾中。需要提取以下圖像切片在網頁中的作用命名bod

17、y的背景mainbg.gif網站logologo.gif導航條左圓角navleft.gif導航條右圓角navright.gif圖片bjdx.gif欄目圖片news.gif欄目圖片notice.gif欄目圖片hot.gif箭頭arrow.gif箭頭arrow2.gif圓角欄圖片1box_top.gif圓角欄圖片2box_bg.gif圓角欄圖片3box_bottom.gif3 將“bcasrt” 文件夾復制到“beida”文件夾中。4啟動Dreamweaver，創建“北京大學”站點，本地目錄為“beida”文件夾。5新建網頁，保存為index.html。6設置網頁標題：北京大學歡迎你。7單擊“CS

18、S”面板上的“新建CSS規則”按鈕。在“新建CSS規則”對話框中設置選擇器類型為“標簽”，標簽為“body”，定義在“新建樣式表文件”，單擊“確定”按鈕。將CSS文件保存在style文件夾中，命名為basic.css。body的CSS樣式定義如圖：8插入第一個表格，985像素，居中對齊。其中嵌套表格。310像素寬1行3列280像素寬1行9列660像素寬9繼續插入表格，985像素，居中對齊。其中嵌套表格。305像素寬427像素寬460像素寬3行1列190像素寬3行1列180像素寬220像素寬10繼續插入表格，985像素，居中對齊。11切換到代碼窗口，為導航條表格添加唯一標識。12定義超鏈接的CS

19、S樣式。body font: 0.75em 宋體;margin: 0px;padding: 0px;background: url(./images/mainbg.gif) repeat-x;a color: #002b5e;text-decoration: none;a:hover color: #ff0000;text-decoration: none;#nav a color: #FFFFFF;text-decoration: none;#nav a:hover color: #FF0000;text-decoration: none;.borderright border-right:

20、 1px solid #CCCCCC;.dotline border-bottom: 1px dashed #CCCCCC;13應用類樣式（1）將.borderright樣式應用于第二個大表格的中間單元格。（2）將.dotline樣式應用于新聞列表和通知列表的所有單元格。四、實驗要求及注意事項1從53服務器下載素材。2先建立站點，再制作網頁。3表格布局時，表格的邊框、填充、邊距全部為0。4網頁制作過程中，以自己處理的切圖素材的尺寸為準。5設置CSS時，首先設置Dreamweaver的CSS代碼為速記。實驗四 Fireworks切圖網頁制作一、實驗目的1掌握Fi

21、reworks切圖并導出網頁的方法。2掌握在Dreamweaver中編輯切圖網頁的方法。二、實驗內容1使用Fireworks切圖并導出“清華大學”首頁。2使用Fireworks切圖并導出單元格背景圖。3在Dreamweaver中編輯“清華大學”首頁。4為網頁添加CSS樣式表。三、操作步驟1使用Fireworks切圖并導出“清華大學”首頁。（1）啟動Fireworks，打開“qinghua.png”文件。（2）使用切圖工具進行切圖。（3）在“優化”面板上設置切片導出格式為“JPEG較高品質”。（4）選中切片3，在屬性面板上設置切片導出格式為“GIF最適合256”。（5）選中切片9，在屬性面板上設

22、置切片導出格式為“GIF最適合256”。（6）選擇“文件HTML設置”命令，做以下設置。（7）選擇“文件導出”命令，在“導出”對話框中做以下設置。2使用Fireworks切圖并導出單元格背景圖。（1）刪除切片4，設置視圖縮放比例為“200%”，在“學校概況”后面的空白區域做一個小切片。（2）在該切片上右擊，選擇“導出所選切片”命令。將該切片命名為“bg1”，并保存在“images”文件夾中。（3）用相同方法導出“bg2”。3在Dreamweaver中編輯“清華大學”首頁。（1）在Dreamweaver中打開index.html。新建CSS樣式，定義在“新建樣式表文件”，命名為basic.css

23、。定義body的CSS樣式：body font: 0.75em/1.5 宋體;background-color: #FFFFFF;margin: 0px;padding: 0px;（2）刪除圖像index_2.jpg，同時設置該單元格寬度為615像素，水平對齊方式為“右對齊”，垂直對齊方式為“底部”。背景顏色白色。（3）在該單元格中插入1行2列表格，寬度250像素，填充10像素。輸入文字。（4）刪除圖像index_4.jpg，同時設置該單元格寬度為582像素，背景圖像為“bg1.jpg”。（5）在該單元格中插入1行7列表格，寬度100%，邊框0，填充0，間距0。輸入文字。（6）用相同方法制作第

24、二個導航條。（7）刪除圖像index_7.jpg，同時設置該單元格寬度為369像素，背景顏色為#DFDFDF。（8）刪除圖像index_8.jpg，同時設置該單元格寬度為481像素，高度132像素，背景顏色為#DFDFDF。（9）在該單元格中插入表格，6行2列，寬度420像素，填充0，間距2，邊框0。合并第一列單元格。輸入文字。（10）刪除圖像index_9.jpg，同時設置該單元格寬度為418像素，背景圖像為“index_9.jpg”。（11）在該單元格中插入表單，并在表單中插入文本框，輸入文字。（12）刪除圖像index_12.jpg，同時設置該單元格寬度為582像素。在其中嵌套一行2列表

25、格，輸入文字。（13）選中圖像index_13.jpg，使用屬性面板上的矩形熱點工具，制作熱點超鏈接。4為網頁添加CSS樣式表a color: #000000;text-decoration: none;a:hover color: #FF0000;text-decoration: underline;form margin: 0px;.navtd border-right: 1px solid #000000;四、實驗要求及注意事項1從53服務器下載素材。2先建立站點，再制作網頁。3在Fireworks中切圖時，先利用標尺添加輔助線。4網頁制作過程中，以自己

26、處理的切圖素材的尺寸為準。5設置CSS時，首先設置Dreamweaver的CSS代碼為速記。實驗五 XHTML語言網頁制作一、實驗目的1掌握XHTML 語法。2掌握XHTML 文檔類型聲明。3掌握XHTML 標記及屬性。二、實驗內容制作“webquest/article01.html”網頁。三、操作步驟1創建“webquest”站點。2新建網頁，保存為article01.html。3切換到代碼窗口，從“文本.txt”中復制文字，粘貼到中。4按照網頁內容的語義修改XHTML代碼。惟存教育探究學習返回首頁如何構建高效的 webquest楊淑蓮 華南師范大學教育技術研究所一、什么是 WebQuest

27、WebQuest 是美國的評價、結論六個基本模塊貫串在一起，形成一個完整的教學體系。二、 WebQuest 具體的構建過程（一）選擇合適的主題圖1選擇學習任務WebQuest 僅僅是教學方式中的一種，才能有助于學習者發現問題，并激活知識儲備。（二）任務在設計任務時要結合以下原則確定任務：科學性、知識性：體現教學目標。趣味性：引發學習者探索的積極性。可操作性：任務要具體，一般要形成一定的產品。開放性：任務完成可以采取不同的途徑，任務解決沒有固定答案。伸縮性：可以把任務分為的學生。（三）評價WebQuest 通常采用表現為書面作業、學生的作品、創作的網頁或其他內容。評價對象起步發展中完成參與討論&

28、nbsp;  網上搜集資料   作品創作   Copyright©BEING, Being Lab. All Rights Reserved版權所有 惟存教育實驗室實驗六 CSS選擇符一、實驗目的1掌握CSS的基本語法規則。2掌握CSS的常用選擇符。3掌握在網頁上應用CSS的方法。4掌握使用Dreamweaver定義CSS的方法。二、實驗內容1使用標記定義“webquest/article01.html”網頁的邏輯結構。2使用CSS控制“webquest/article01.html”網頁的樣式。3使用標

29、記定義“webquest/article02.html”網頁的邏輯結構，并為該網頁鏈接外部CSS樣式表。三、操作步驟1創建“webquest”站點。2打開article01.html，使用標記定義網頁的邏輯結構。返回首頁如何構建高效的 webquest楊淑蓮 華南師范大學教育技術研究所圖1選擇學習任務Copyright©BEING, Being Lab. All Rights Reserved版權所有 惟存教育實驗室3使用CSS控制網頁的表現。* margin: 0px;padding: 0px;body font: 0.75em/1.7 宋體;background: #E0E0E0

30、 url(images/mygrd.gif);text-align: center;#container margin: auto;width: 760px;text-align: left;position: relative;#headerpadding: 20px 0 10px 5px;border-bottom: 5px solid #666666;h1 font-size: 110%;#header p.goback position: absolute;right: 10px;top: 25px;#content padding: 30px;h2 font-size: 180%;t

31、ext-align: center;margin-bottom: 0.5em;h3 font-size: 130%;color: #660000;h4 font-size: 110%;h3, h4 margin: 0.5em 0;#content p text-indent: 2em;#pic float: right;text-align: center;margin-bottom: 10px;#pic img display: block;ul margin-left: 3em;table width: 400px;margin: 0.5em auto;border-collapse:co

32、llapse;td, th padding: 5px;border: 1px solid #000000;#footer text-align: center;padding: 20px 0px;border-top: 1px solid #666666;#content p.author text-indent: 0;text-align: center;a color: #000000;text-decoration: none;a:hover color: #000000;text-decoration:underline;4使用標記定義“webquest/article02.html”

33、網頁的邏輯結構，并為該網頁鏈接外部CSS樣式表。實驗七 CSS盒模型一、實驗目的1深入理解CSS盒模型及其屬性。2熟練掌握CSS屬性的定義方法。二、實驗內容制作”悠然我思”網站。三、操作步驟1創建“悠然我思”站點。2打開index.html，定義其邏輯結構。悠然我思月光詩集旖旎信箱：moonlili.cc版權所有©旖旎 1999 3使用CSS控制“首頁”的樣式。新建CSS樣式表，保存在style文件夾中，命名為style_homepage.css，其內容如下：body font: 0.75em/1.5 宋體;color: #dee3c1;background: #134113 url

34、(./images/bg_body.jpg);text-align: center;padding: 30px 0px;margin: 0px;#container width: 750px;margin: auto;background: url(./images/bg_container.jpg);text-align: left;#header height: 80px;padding: 150px 0px 0px 300px;background: url(./images/bg_header.jpg) no-repeat left top;font-size: 300%;#conte

35、nt padding: 0px 100px 30px 100px;#content h2 font-size: 130%;#content p padding-bottom: 50px;background: url(./images/bg_divide.jpg) no-repeat center bottom;#footer height: 128px;padding-top: 30px;background: url(./images/bg_footer.jpg) no-repeat left bottom;text-align: center;a color: #dee3c1;text-

36、decoration: none;a:hover text-decoration: underline;4定義“zhenxi.html”網頁結構。 永遠的夏娃珍惜 我曾經那么 學會好好愛我 作者：旖旎（moonlili.cc） 下一首 返回5使用CSS定義“zhenxi.html”網頁的樣式。新建CSS樣式表，保存在style文件夾中，命名為style_zhenxi.css，其內容如下：body font: 0.75em/1.5 宋體;background: url(./images/bg_zhenxi.jpg);color: #00FFFF;text-align: center;paddin

37、g: 20px 0;#container width: 290px;padding-left: 360px;margin: auto;background: url(./images/zhenxi.jpg) no-repeat left top;text-align: left;a color: #c6c78c;text-decoration: none;a:hover text-decoration: underline;.title color: #FFFFFF;.author color: #c6c78c;6使用相似的方法，定義“qinsheng.html”網頁的邏輯結構和CSS樣式。四

38、、實驗要求及注意事項1從53服務器下載素材。2認真完成全部實驗內容。3先建立站點，再制作網頁。4設置CSS時，首先設置Dreamweaver的CSS代碼為速記。實驗八 CSS兩列浮動布局一、實驗目的1掌握兩列布局網頁的典型邏輯結構。2熟練掌握CSS兩列浮動布局的方法。二、實驗內容制作csszengarden網站的163號作品。三、操作步驟1創建163站點。2打開index.html，定義其邏輯結構。css Zen GardenThe Beauty of CSS DesignA demonstration of what can be accomplished

39、visually through CSS-based design. Select any style sheet from the list to load it into this page.Download the sample html file and css fileThe Road to EnlightenmentLittering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, and broken CSS support.So What is Thi

40、s About?There is clearly a need for CSS to be taken seriously by graphic artists. ParticipationGraphic artists only please. BenefitsWhy participate? RequirementsWe would like to see as much CSS1 as possible.Select a Design:A Walk in the Garden by Simon Van Hauwermeirenspring360 by Rene HornigArchive

41、s:next designsView All DesignsResources:View This Designs CSSCSS Resourcesxhtml   css   cc  508  aaa3使用CSS控制網頁的樣式。新建CSS樣式表，保存在style文件夾中，命名為style.css，其內容如下：* padding: 0;margin: 0;body font: 0.7em/1.5 Tahoma, Arial, Helvetica, sans-serif;color: #566047; background: #FBFBE5 url(imag

42、es/grass.gif) right bottom fixed no-repeat;text-align: center;p margin: 1em 0;a color: #566047; text-decoration: underline;a:hover text-decoration: none;/* container- */#container width: 760px; margin: auto; text-align: left; background: #FBFBE5 url(images/container_bg.gif) repeat-y left top;position: relative;/* header and summary- */#header height: 300px; background: #8C9777 url(images/header_bg.jpg) no-repeat left top;h