互聯網與網站建設

1、 PAGE 1互聯網與與網站建設設實驗指導書書聊城大學傳傳媒技術學學院2008年年8月實驗指導書 PAGE 107傳媒技術學院數字媒體藝術專業(yè)目錄TOC o 1-3 h z u HYPERLINK l _Toc211737240 實驗一 簡單網頁頁制作 PAGEREF _Toc211737240 h 3 HYPERLINK l _Toc211737241 實驗二 多媒體網網頁制作 PAGEREF _Toc211737241 h 15 HYPERLINK l _Toc211737242 實驗三 表格布局局網頁制作作 PAGEREF _Toc211737242 h 20 HYPERLINK l _

2、Toc211737243 實驗四 Fireeworkks切圖網網頁制作 PAGEREF _Toc211737243 h 24 HYPERLINK l _Toc211737244 實驗五 XHTMML語言網網頁制作 PAGEREF _Toc211737244 h 30 HYPERLINK l _Toc211737245 實驗六 CSS選選擇符 PAGEREF _Toc211737245 h 33 HYPERLINK l _Toc211737246 實驗七 CSS盒盒模型 PAGEREF _Toc211737246 h 37 HYPERLINK l _Toc211737247 實驗八 CSS兩兩列

3、浮動布布局 PAGEREF _Toc211737247 h 41 HYPERLINK l _Toc211737248 實驗九 CSS三列列浮動布局局 PAGEREF _Toc211737248 h 49 HYPERLINK l _Toc211737249 實驗十 CSS兩兩列定位布布局 PAGEREF _Toc211737249 h 57 HYPERLINK l _Toc211737250 實驗十一 CSSS三列定位位布局 PAGEREF _Toc211737250 h 61 HYPERLINK l _Toc211737251 實驗十二 Ajaax框架在在網頁中的的應用 PAGEREF _To

4、c211737251 h 67 HYPERLINK l _Toc211737252 實驗十三 網頁制制作綜合訓訓練 PAGEREF _Toc211737252 h 71實驗一 簡單網頁頁制作一、實驗目目的1熟悉DDreammweavver軟件件的操作界面。2掌握建建立本地站點的方法法。3掌握簡簡單網頁制制作方法。4掌握超超鏈接的建立方法。5初步了了解表格布布局方法。6初步了了解為網頁頁添加CSSS樣式表表的方法。二、實驗內內容1創(chuàng)建“文學小屋屋”站點。2制作“文學小屋屋首頁” 網頁。3制作“文學小屋屋紅舞鞋鞋”網頁。4制作“文學小屋屋愛的秘秘密”網頁。5完成網網頁超鏈接。6為網頁頁添加CSSS

5、樣式表表。三、操作步步驟1創(chuàng)建“文學小屋屋”站點（1）在硬硬盤根目錄錄下新建文文件夾，命命名為myysitee；（2）打開開mysitte文件夾夾，在其中中建立子文文件夾，命命名為immagess；（3）將所所有圖片素素材復制到到imagges文件件夾中；（4）啟動動Dreaamweaaver，使使用“站點新新建站點”命令新建建“文學小屋屋”站點，并并指定myysitee文件夾為為“文學小屋屋”站點的本本地根文件件夾。2制作“文學小屋屋首頁”。（1）使用用“文件新新建”命令新建網網頁。（2）使用用“文件保保存”命令保存存網頁，命命名為inndex.htmll。（3）在文文檔工具欄欄上設置網網頁

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

7、左列單元格格中，設置置其寬度為為200像像素。（7）在ttablee1的左、右單元格格中分別插入圖圖像。（8）光標標置于taable11之后，插插入tabble2，11行3列，寬寬度7600像素。（9）選中中tablle2，在屬性性面板上設設置其居中中對齊。（10）設設置tabble2左左、中、右右單元格的的寬度分別為150像素素，460像像素，1550像素。（11）在在tablle2 的的中列單元元格中輸入文字，并設置文字字屬性。（12）光光標置于ttablee2之后，插插入tabble3，11行1列，寬寬度7600像素。（13）選選中tabble3，在在屬性面板板上設置其其居中對齊齊。（1

8、4）光光標置于ttablee3的單元元格中，設設置該單元元格的水平對齊齊方式為右右對齊。然然后在其中中插入圖像像。（16）光光標置于ttablee3之后，插插入tabble4，11行1列，寬寬度7600像素。（17）選選中tabble4，在在屬性面板板上設置其其居中對齊齊。（18）光光標置于ttablee4的單元元格中，設設置該單元元格的水平平對齊方式式為居中對對齊，并在在其中插入入文字“返回”。（19）保保存網頁，按按F12，預預覽網頁。4制作“文學小屋屋愛的秘秘密”網頁。（1）使用用“文件新新建”命令新建建網頁。（2）使用用“文件保保存”命令保存存網頁，命命名為loove.hhtml。（3

9、）在文文檔工具欄欄上設置網網頁標題“文學小屋屋愛的秘秘密”。（4）使用用“修改頁頁面屬性”命令設置置網頁背景景圖像為llovebbg.jppg。（5）插入入tablle1，1行2列，寬度度760像像素。（6）設置置tablle1左列單元格格的寬度為為110像素。（7）光標標置于taable11的右列單元格格中，設置置該單元格格的垂直對對齊方式為為“頂端”。（8）在ttablee1中嵌套套表格taable22，1行11列，寬度度100%，高度880像素。在其中輸輸入文字, 并并設置文字字屬性。（9）將光光標置于ttablee2之后，插插入嵌套表表格tabble3，11行2列，寬寬度1000%。，

10、設置tabble3的的兩個單元元格的垂直直對齊方式式為“頂端”。然后在其其中插入圖圖像和文字字。（10）將將光標置于于tablle3之后后，插入嵌嵌套表格ttablee4，1行行2列，寬寬度1000%。設置置tablle4的兩兩個單元格格的垂直對對齊方式為為“頂端”，右列單元格的的水平對齊齊方式為“右對齊”，然后插入入圖像和文文字。（11）將將光標置于于tablle4之后后，插入嵌嵌套表格ttablee5，1行行1列，寬寬度1000%。設置置tablle5的單單元格的水水平對齊方方式為“居中對齊齊”，在其中中輸入文字字“返回”。（12）保保存網頁，按按F12，預預覽網頁。5建立超超鏈接（1）建

11、立立首頁與“紅舞鞋”、“愛的秘密密”網頁之間的超鏈鏈接；（2）在“首頁”上選中“榕樹下”網站Loogo，建建立到“榕樹下”網站的超鏈接；（4）在“首頁”上選中“信鴿”圖像，建立立電子郵件件地址鏈接接。6為網頁頁添加CSSS樣式表表（1）打開開“indeex.httml”文件。（2）單擊擊“CSS”面板上的的“新建CSSS規(guī)則”按鈕。（3）在“新建CSSS規(guī)則”對話框中中設置選擇擇器類型為為“標簽”，標簽為為“bodyy”，定義在在“新建樣式式表文件”，單擊“確定”按鈕。（4）將CCSS文件件保存在sstylee文件夾中中，命名為為basiic.csss。（5）定義義字體為宋體體，0.775字體

12、高高（em），1.5倍行高。單擊“確定”。（6）保存存文件，按按F12預預覽，網頁頁文字小而而精致，增增加了行高高。（7）新建建CSS規(guī)規(guī)則。設置置選擇器類類型為“高級”，選擇器器為“a:liink”，定義在在“basiic.csss”文件中，單單擊“確定”按鈕。（8）定義義a:liink的樣樣式為，文文字黑色，修修飾“無”。（9）新建建CSS規(guī)規(guī)則。設置置選擇器類類型為“高級”，選擇器器為“a:viisiteed”，定義在在“basiic.csss”文件中，單單擊“確定”按鈕。（10）定定義a:vvisitted的樣樣式為，文文字黑色，修修飾“無”。（11）新新建CSSS規(guī)則。設設置選擇器器

13、類型為“高級”，選擇器器為“a:hoover”，定義在在“basiic.csss”文件中，單單擊“確定”按鈕。（12）定定義a:hhoverr的樣式為為，文字紅紅色，修飾飾“下劃線”。（13）新新建CSSS規(guī)則。設設置選擇器器類型為“高級”，選擇器器為“a:acctivee”，定義在在“basiic.csss”文件中，單單擊“確定”按鈕。（14）定定義a:aactivve的樣式式為，文字字紅色，修修飾“下劃線”。（15）保保存文件，按按F12預預覽，網頁頁上的超鏈鏈接黑色，無無下劃線。當鼠標經經過超鏈接接時，文字字紅色，有有下劃線。（16）關關閉“indeex.httml”和“basiic.c

14、sss”文件。（17）打打開“l(fā)ovee.htmml”文件。（18）單單擊“CSS”面板上的的“附加樣式式表”按鈕。（19）為為“l(fā)ovee.htmml”文件鏈接接外部樣式式表“basiic.csss”。（20）保保存文件，按按F12預預覽，網頁頁上的文字字小而精，增增加了行高高。網頁上上的超鏈接接黑色，無無下劃線。當鼠標經經過超鏈接接時，文字字紅色，有有下劃線。四、實驗要要求及注意意事項1從 HYPERLINK fttp:/210.44.1122.2253 ftp:/2110.444.1222.2533服務器下下載素材。2認真完完成全部實實驗內容。3先建立立站點，再再制作網頁頁。4表格布布局

15、時，表表格的邊框框、填充、邊距全部部為0。5設置CCSS時，首首先設置DDreammweavver的CCSS代碼碼為速記。實驗二 多媒體網網頁制作一、實驗目目的掌握在網頁頁中插入各各種多媒體體元素的方方法。二、實驗內內容1在網頁頁中嵌入MMediaa Plaayer播播放器。2在網頁頁中嵌入RRealPPlayeer播放器器。3在網頁頁中插入背背景音樂。4在網頁頁中插入fflashh動畫。5在網頁頁中嵌入圖圖片播放器器。6在網頁頁中嵌入fflv播放放器。三、操作步步驟1創(chuàng)建“多媒體”站點。（1）在硬硬盤根目錄錄下新建文文件夾，命命名為myyweb。（2）將iimagees、meedia、bca

16、sstr、vvcasttr四個文文件夾復制制到mywweb文件件夾中，其其中imaages是是圖片文件件夾，meedia是是多媒體文文件夾，bbcasttr是圖片片播放器文文件夾，vvcasttr是fllv播放器器文件夾。（3）啟動動Dreaamweaaver，使使用“站點新新建站點”命令新建建“多媒體”站點，并并指定myyweb文文件夾為“多媒體”站點的本本地根文件件夾。2在網頁頁中嵌入Meddia PPlayeer播放器器新建網頁，保保存網頁為為001.htmm。在網頁頁中插入AActivveX，在在屬性面板板上設置CClasssID為cclsidd:22DD6F3112-B00F6-11

17、1D0-94ABB-00880C744C7E995，寬3320像素素，高2440像素，參參數設置如如圖所示。3在網頁頁中嵌入ReaalPlaayer播播放器新建網頁，保保存網頁為為002.htm。在網頁中中插入AcctiveeX，在屬屬性面板上上設置CllassIID為cllsid:CFCDDAA033-8BEE4-111cf-BB84B-00200AFBBBCCFAA，寬3220像素，高高280像像素，參數數設置如圖圖所示。4在網頁頁中插入背背景音樂新建網頁，保保存網頁為為003.htm。在網頁中中插入，在在彈出的選選擇文件對對話框中選選擇meddia/llovemmed.mmid。插插件的

18、參數數設置如圖圖所示。5在網頁頁中插入fflashh動畫新建網頁，保保存網頁為為004.htm。在網頁中中插入fllash動動畫meddia/yyuediing.sswf。6在網頁頁中嵌入圖圖片播放器器。（1）新建建網頁，保保存網頁為為005.htm。在網頁中中插入圖片片播放器bbcasttr/bccastrr4.swwf。（2）在屬屬性面板上上設置播放放器寬4000像素，高高300像像素。（3）切換換到代碼窗窗口，設置置XML文文件的路徑徑。 emmbed src=bcaastr/bcasstr4.swf?xml=bcasstr/bbcasttr.xmml（4）打開開bcasstr.xxml

19、文件件，在其中中設置圖片片的路徑。imaages/imagge1.ggif學科建建設imaages/imagge2.ggif人才培培養(yǎng)imaages/imagge3.ggif校園環(huán)環(huán)境7在網頁頁中嵌入fflv播放放器。（1）新建建網頁，保保存網頁為為006.htm。在網頁中中插入圖片片播放器vvcasttr/vccastrr3.swff。（2）在屬屬性面板上上設置播放放器寬5550像素，高高400像像素。（3）設置置參數如下下：（4）打開開vcasstr.xxml文件件，在其中中設置fllv視頻文文件的路徑徑。./meddia/001.fllv你和我我./meddia/002.fllv飛人大大

20、賽8制作“歲月留聲聲”網頁，并并實現歌曲曲點播。主要步驟：（1）新建建網頁，保保存網頁為為007.htm。設置網頁頁背景圖像像，并在網網頁中插入入圖像、表表格及文字字。（2）在網網頁中插入入ActiiveX，在在屬性面板板上設置CClasssID為cclsidd:22DD6F3112-B00F6-111D0-94ABB-00880C744C7E995，寬3320像素素，高288像素。為為播放器加加入id標標識plaayer。（3）在網網頁中插入入表格，填填寫歌曲名名稱，并設設置超鏈接接：偏偏喜歡歡你后來來（4）加入入在之間間加入jaavasccriptt，實現歌歌曲點播。functtion m

21、usiicplaay(naame) if (namee=) reeturnn; fileenamee = nname; playyer.CCanceel() playyer.OOpen(fileenamee)四、實驗要要求及注意意事項1從 HYPERLINK fttp:/210.44.1122.2253 ftp:/2110.444.1222.2533服務器下下載素材。2認真完完成全部實實驗內容。3先建立立站點，再再制作網頁頁。4播放器器對象的cclasssid從cclsidd開始填寫寫。實驗三 表格布局局網頁制作作一、實驗目目的1掌握在在Fireeworkks中提取取圖像、提提取尺寸、提取顏色

22、色的方法。2掌握使使用表格布布局網頁的的方法。二、實驗內內容制作“北京京大學首首頁”網頁。三、操作步步驟1新建文文件夾，命命名為“beidda”，在其中中創(chuàng)建“imagges”子文件夾夾。2啟動FFirewworkss，使用切切片工具提提取需要的的圖像，并并導出到iimagees文件夾夾中。需要提取以以下圖像切片在網頁中的的作用命名body的的背景mainbbg.giif網站loggologo.gif導航條左圓圓角navleeft.ggif導航條右圓圓角navriight.gif圖片bjdx.gif欄目圖片news.gif欄目圖片noticce.giif欄目圖片hot.ggif箭頭arroww

23、.giff箭頭arroww2.giif圓角欄圖片片1box_ttop.ggif圓角欄圖片片2box_bbg.giif圓角欄圖片片3box_bbottoom.giif3 將“bcassrt” 文件夾夾復制到“beidda”文件夾中中。4啟動DDreammweavver，創(chuàng)創(chuàng)建“北京大學學”站點，本本地目錄為為“beidda”文件夾。5新建網網頁，保存存為inddex.hhtml。6設置網網頁標題：北京大學學歡迎你。7單擊“CSS”面板上的的“新建CSSS規(guī)則”按鈕。在在“新建CSSS規(guī)則”對話框中中設置選擇擇器類型為為“標簽”，標簽為為“bodyy”，定義在在“新建樣式式表文件”，單擊“確定”按

24、鈕。將將CSS文文件保存在在stylle文件夾夾中，命名名為bassic.ccss。bbody的的CSS樣樣式定義如如圖：8插入第第一個表格格，9855像素，居居中對齊。其中嵌套套表格。310像素素寬1行3列280像素寬1行9列660像素寬9繼續(xù)插插入表格，9985像素素，居中對對齊。其中中嵌套表格格。305像素素寬427像素寬460像素素寬3行1列190像素寬3行1列180像素寬220像素素寬10繼續(xù)續(xù)插入表格格，9855像素，居居中對齊。11切換換到代碼窗窗口，為導導航條表格格添加唯一一標識。12定義義超鏈接的的CSS樣樣式。body fontt: 0.75emm 宋體體;marggin:

25、 0px;paddding: 0pxx;backkgrouund: url(./iimagees/maainbgg.giff) reepeatt-x;a coloor: #002bb5e;textt-deccorattion: nonne;a:hovver coloor: #ff00000;textt-deccorattion: nonne;#nav a coloor: #FFFFFFF;textt-deccorattion: nonne;#nav a:hoover coloor: #FF00000;textt-deccorattion: nonne;.bordderriight bordde

26、r-rrightt: 1ppx soolid #CCCCCCC;.dotlline bordder-bbottoom: 11px ddasheed #CCCCCCCC;13應用用類樣式（1）將.bordderriight樣樣式應用于于第二個大大表格的中中間單元格格。（2）將.dotlline樣樣式應用于于新聞列表表和通知列列表的所有有單元格。四、實驗要要求及注意意事項1從 HYPERLINK fttp:/210.44.1122.2253 ftp:/2110.444.1222.2533服務器下下載素材。2先建立立站點，再再制作網頁頁。3表格布布局時，表表格的邊框框、填充、邊距全部部為0。4網頁制

27、制作過程中中，以自己己處理的切切圖素材的的尺寸為準準。5設置CCSS時，首首先設置DDreammweavver的CCSS代碼碼為速記。實驗四 Fireeworkks切圖網網頁制作一、實驗目目的1掌握FFirewworkss切圖并導導出網頁的的方法。2掌握在在Dreaamweaaver中中編輯切圖圖網頁的方方法。二、實驗內內容1使用FFirewworkss切圖并導導出“清華大學學”首頁。2使用FFirewworkss切圖并導導出單元格格背景圖。3在Drreamwweaveer中編輯輯“清華大學學”首頁。4為網頁頁添加CSSS樣式表表。三、操作步步驟1使用FFirewworkss切圖并導導出“清華

28、大學學”首頁。（1）啟動動Fireeworkks，打開開“qingghua.png”文件。（2）使用用切圖工具具進行切圖圖。（3）在“優(yōu)化”面板上設設置切片導導出格式為為“JPEGG較高品品質”。（4）選中中切片3，在在屬性面板板上設置切切片導出格格式為“GIF最最適合2556”。（5）選中中切片9，在在屬性面板板上設置切切片導出格格式為“GIF最最適合2556”。（6）選擇擇“文件HHTML設設置”命令，做做以下設置置。（7）選擇擇“文件導導出”命令，在在“導出”對話框中中做以下設設置。2使用FFirewworkss切圖并導導出單元格格背景圖。（1）刪除除切片4，設設置視圖縮縮放比例為為“2

29、00%”，在“學校概況況”后面的空空白區(qū)域做做一個小切切片。（2）在該該切片上右右擊，選擇擇“導出所選選切片”命令。將將該切片命命名為“bg1”，并保存存在“imagges”文件夾中中。（3）用相相同方法導導出“bg2”。3在Drreamwweaveer中編輯輯“清華大學學”首頁。（1）在DDreammweavver中打打開inddex.hhtml。新建CSSS樣式，定義義在“新建樣式式表文件”，命名為為basiic.csss。定義義bodyy的CSSS樣式：body fontt: 0.75emm/1.55 宋體體;backkgrouund-ccolorr: #FFFFFFFF;margiin

30、: 00px;paddding: 0pxx;（2）刪除除圖像inndex_2.jppg，同時時設置該單單元格寬度度為6155像素，水水平對齊方方式為“右對齊”，垂直對對齊方式為為“底部”。背景顏顏色白色。（3）在該該單元格中中插入1行行2列表格格，寬度2250像素素，填充110像素。輸入文字字。（4）刪除除圖像inndex_4.jppg，同時時設置該單單元格寬度度為5822像素，背背景圖像為為“bg1.jpg”。（5）在該該單元格中中插入1行行7列表格格，寬度1100%，邊邊框0，填填充0，間間距0。輸輸入文字。（6）用相相同方法制制作第二個個導航條。（7）刪除除圖像inndex_7.jppg

31、，同時時設置該單單元格寬度度為3699像素，背背景顏色為為#DFDDFDF。（8）刪除除圖像inndex_8.jppg，同時時設置該單單元格寬度度為4811像素，高高度1322像素，背背景顏色為為#DFDDFDF。（9）在該該單元格中中插入表格格，6行22列，寬度度420像像素，填充充0，間距距2，邊框框0。合并并第一列單單元格。輸輸入文字。（10）刪刪除圖像iindexx_9.jjpg，同同時設置該該單元格寬寬度為4118像素，背背景圖像為為“indeex_9.jpg”。（11）在在該單元格格中插入表表單，并在在表單中插插入文本框框，輸入文文字。（12）刪刪除圖像iindexx_12.jpg

32、，同同時設置該該單元格寬寬度為5882像素。在其中嵌嵌套一行22列表格，輸輸入文字。（13）選選中圖像iindexx_13.jpg，使使用屬性面面板上的矩矩形熱點工工具，制作作熱點超鏈鏈接。4為網頁頁添加CSSS樣式表表a coloor: #0000000;textt-deccorattion: nonne;a:hovver coloor: #FF00000;textt-deccorattion: undderliine;form marggin: 0px;.navttd bordder-rrightt: 1ppx soolid #0000000;四、實驗要要求及注意意事項1從 HYPERLI

33、NK fttp:/210.44.1122.2253 ftp:/2110.444.1222.2533服務器下下載素材。2先建立立站點，再再制作網頁頁。3在Fiirewoorks中中切圖時，先先利用標尺尺添加輔助助線。4網頁制制作過程中中，以自己己處理的切切圖素材的的尺寸為準準。5設置CCSS時，首首先設置DDreammweavver的CCSS代碼碼為速記。實驗五 XHTMML語言網網頁制作一、實驗目目的1掌握XXHTMLL 語法。2掌握XXHTMLL 文檔類類型聲明。3掌握XXHTMLL 標記及及屬性。二、實驗內內容制作“weebqueest/aarticcle011.htmml”網頁。三、操作

34、步步驟1創(chuàng)建“webqquestt”站點。2新建網網頁，保存存為artticlee01.hhtml。3切換到到代碼窗口口，從“文本.ttxt”中復制文文字，粘貼貼到中。4按照網網頁內容的的語義修改改XHTMML代碼。惟惟存教育探究學學習返回回首頁如如何構建高高效的 wwebquuest楊淑淑蓮 華南南師范大學學教育技術術研究所一一、什么是是 WebbQuesstWeebQueest 是是美國的評價、結論六個個基本模塊塊貫串在一一起，形成成一個完整整的教學體體系。二二、 WeebQueest 具具體的構建建過程（一一）選擇合合適的主題題圖1選選擇學習任任務WeebQueest 僅僅僅是教學學方式

35、中的的一種，才能有有助于學習習者發(fā)現問問題，并激激活知識儲儲備。（二二）任務在設設計任務時時要結合以以下原則確確定任務：科科學性、知知識性：體體現教學目目標。趣趣味性：引引發(fā)學習者者探索的積積極性?？煽刹僮餍裕喝蝿找呔唧w，一般般要形成一一定的產品品。開開放性：任任務完成可可以采取不不同的途徑徑，任務解解決沒有固固定答案。伸伸縮性：可可以把任務務分為的學生。（三三）評價WeebQueest 通通常采用表現為為書面作業(yè)業(yè)、學生的的作品、創(chuàng)創(chuàng)作的網頁頁或其他內內容。評評價對象起起步發(fā)發(fā)展中完完成參參與討論 p; p; p;網網上搜集資資料 p; p;&nbs

36、pp;作作品創(chuàng)作 p; p; p;Coopyriight©y;BEIING.oorg.ccn, BBeingg Labb. Alll Riightss Resserveed版權權所有 惟惟存教育實實驗室實驗六 CSS選選擇符一、實驗目目的1掌握CCSS的基基本語法規(guī)規(guī)則。2掌握CCSS的常常用選擇符符。3掌握在在網頁上應應用CSSS的方法。4掌握使使用Dreeamweeaverr定義CSSS的方法法。二、實驗內內容1使用標記定義義“webqquestt/artticlee01.hhtml”網頁的邏邏輯結構。2使用CCSS控制制“webqquestt/arttic

37、lee01.hhtml”網頁的樣樣式。3使用標記定義義“webqquestt/artticlee02.hhtml”網頁的邏邏輯結構，并并為該網頁頁鏈接外部CSSS樣式表。三、操作步步驟1創(chuàng)建“webqquestt”站點。2打開aarticcle011.htmml，使用用標記定定義網頁的的邏輯結構構。返回首首頁如如何構建高高效的 wwebquuest楊淑蓮蓮 華南師師范大學教教育技術研研究所圖1選擇學習習任務Coopyriight©y;BEIING.oorg.ccn, BBeingg Labb. Alll Riightss Resserveed版權權所有 惟惟存教育實實驗室3使用CCSS

38、控制制網頁的表表現。* marggin: 0px;paddding: 0pxx;body fontt: 0.75emm/1.77 宋體體;backkgrouund: #E0EE0E0 url(imagges/mmygrdd.giff);textt-aliign: centter;#conttaineer marggin: autoo;widtth: 7760pxx;textt-aliign: leftt;posiitionn: reelatiive;#headderpaddding: 20ppx 0 10pxx 5pxx;bordder-bbottoom: 55px ssolidd #6666

39、6666;h1 fontt-sizze: 1110%;#headder pp.gobback posiitionn: abbsoluute;righht: 110px;top: 25ppx;#conttent paddding: 30ppx;h2 fontt-sizze: 1180%;textt-aliign: centter;marggin-bbottoom: 00.5emm;h3 fontt-sizze: 1130%;coloor: #6600000;h4 fontt-sizze: 1110%;h3, hh4 marggin: 0.5eem 0;#conttent p textt-indd

40、ent: 2emm;#pic floaat: rrightt;textt-aliign: centter;marggin-bbottoom: 110px;#pic img dispplay: bloock;ul marggin-lleft: 3emm;tablee widtth: 4400pxx;marggin: 0.5eem auuto;bordder-ccollaapse:colllapsee;td, tth paddding: 5pxx;bordder: 1px soliid #00000000;#footter textt-aliign: centter;paddding: 20ppx

41、 0ppx;bordder-ttop: 1px soliid #66666666;#conttent p.auuthorr textt-inddent: 0;textt-aliign: centter;a coloor: #0000000;textt-deccorattion: nonne;a:hovver coloor: #0000000;textt-deccorattion:undeerlinne;4使用標記定義義“webqquestt/artticlee02.hhtml”網頁的邏邏輯結構，并并為該網頁頁鏈接外部CSSS樣式表。實驗七 CSS盒盒模型一、實驗目目的1深入理理解CSSS盒模型

42、及及其屬性。2熟練掌掌握CSSS屬性的定定義方法。二、實驗內內容制作”悠然然我思”網站。三、操作步步驟1創(chuàng)建“悠然我思思”站點。2打開iindexx.htmml，定義義其邏輯結結構。悠悠然我思月光詩集集旖旎旎信箱：mmoonlilii.cc版權權所有&ccopy;旖旎 11999 3使用CCSS控制制“首頁”的樣式。新建CSSS樣式表表，保存在在stylle文件夾夾中，命名名為styyle_hhomeppage.css，其其內容如下下：body fontt: 0.75emm/1.55 宋體體;coloor: #dee33c1;backkgrouund: #1344113 url(./iimag

43、ees/bgg_boddy.jppg);textt-aliign: centter;paddding: 30ppx 0ppx;marggin: 0px;#conttaineer widtth: 7750pxx;marggin: autoo;backkgrouund: url(./iimagees/bgg_conntainner.jjpg);textt-aliign: leftt;#headder heigght: 80pxx;paddding: 1500px 00px 00px 3300pxx;backkgrouund: url(./iimagees/bgg_heaader.jpg) no-r

44、epeeat lleft top;fontt-sizze: 3300%;#conttent paddding: 0pxx 1000px 330px 100ppx;#conttent h2 fontt-sizze: 1130%;#conttent p paddding-botttom: 50pxx;backkgrouund: url(./iimagees/bgg_divvide.jpg) no-repeeat ccenteer boottomm;#footter heigght: 128ppx;paddding-top: 30ppx;backkgrouund: url(./iimagees/bg

45、g_foooter.jpg) no-repeeat lleft botttom;textt-aliign: centter;a coloor: #dee33c1;textt-deccorattion: nonne;a:hovver textt-deccorattion: undderliine;4定義“zhennxi.hhtml”網頁結構構。 永遠的的夏娃珍惜 我曾曾經那么么 學會好好愛我我 作者：旖旖旎（mooonllili.cc） 下一一首 返返回5使用CCSS定義義“zhennxi.hhtml”網頁的樣樣式。新建建CSS樣樣式表，保保存在sttyle文文件夾中，命命名為sttyle_zh

46、ennxi.ccss，其其內容如下下：body fontt: 0.75emm/1.55 宋體體;backkgrouund: url(./iimagees/bgg_zheenxi.jpg);coloor: #00FFFFF;textt-aliign: centter;paddding: 20ppx 0;#conttaineer widtth: 2290pxx;paddiing-lleft: 3600px;margiin: aauto;backkgrouund: url(./iimagees/zhhenxii.jpgg) noo-reppeat leftt topp;text-aliggn: ll

47、eft;a coloor: #c6c78cc;textt-deccorattion: nonne;a:hovver textt-deccorattion: undderliine;.titlle coloor: #FFFFFFF;.authhor coloor: #c6c78cc;6使用相相似的方法法，定義“qinsshengg.htmml”網頁的邏輯輯結構和CSSS樣式。四、實驗要要求及注意意事項1從 HYPERLINK fttp:/210.44.1122.2253 ftp:/2110.444.1222.2533服務器下下載素材。2認真完完成全部實實驗內容。3先建立立站點，再再制作網頁頁。4

48、設置CCSS時，首首先設置DDreammweavver的CCSS代碼碼為速記。實驗八 CSS兩兩列浮動布布局一、實驗目目的1掌握兩兩列布局網網頁的典型型邏輯結構構。2熟練掌掌握CSSS兩列浮動動布局的方方法。二、實驗內內容制作cssszenggardeen網站的1663號作品品。三、操作步步驟1創(chuàng)建1163站點點。2打開iindexx.htmml，定義義其邏輯結結構。csss Zenn GarrdenThee Beaauty of CCSS DDesiggnAA demmonsttratiion oof whhat ccan bbe acccompplishhed vvisuaally thr

49、oough CSS-baseed deesignn. Seelectt anyy styyle ssheett froom thhe liist tto looad iit innto tthis pagee.DDownlload the sampple htmll fille annd ccss ffileThhe Rooad tto EnnlighhtenmmentLittteriing aa darrk annd drrearyy roaad laay thhe paast rreliccs off broowserr-speecifiic taags, incoompattiblee

50、DOMMs, aand bbrokeen CSSS suupporrt.Soo Whaat iss Thiis Abbout?Theere iis cllearlly a needd forr CSSS to be ttakenn serrioussly bby grraphiic arrtistts. PaarticcipattionGraaphicc arttistss onlly plleasee. BeenefiitsWhyy parrticiipatee? ReequirremenntsWe woulld liike tto seee ass mucch CSSS1 aas poos

51、sibble.Seelectt a DDesiggn:AA Wallk inn thee Garrden by Siimon Van Hauwwermeeirennspriing3660 byy Renee HorrnigArrchivves:nnext desiignsVieww Alll DessignssReesourrces:Vieww Thiis Deesignns CSSSCSS Resoourceesxxhtmll &nbbsp; ccss  p; ccc &nnbsp;5508  p;aaaa3使用CCSS控制制網頁的樣樣式。新建建CSS樣樣式表，保保存在stt

52、yle文文件夾中，命命名為sttyle.css，其其內容如下下：* paddding: 0;marggin: 0;body foont: 0.7eem/1.5 Taahomaa, Arrial, Hellvetiica, sanss-serrif;coloor: #5660047; baackgrroundd: #FFBFBEE5 urrl(immagess/graass.ggif) righht boottomm fixxed nno-reepeatt;textt-aliign: centter;p mmargiin: 11em 00;a ccolorr: #55660447; ttext-

53、decooratiion: undeerlinne;a:hovver ttext-decooratiion: nonee;/* coontaiiner */#conttaineer wwidthh: 7660px; mmargiin: aauto; ttext-aliggn: lleft; bbackggrounnd: #FBFBBE5 uurl(iimagees/coontaiiner_bg.ggif) repeeat-yy lefft toop;posiitionn: reelatiive;/* heeaderr andd summmaryy */#headder hheighht: 33

54、00pxx; bbackggrounnd: #8C97777 urrl(immagess/heaader_bg.jjpg) no-rrepeaat leeft ttop;h1, hh2textt-inddent: -99999pxx;#summmary .p1 wiidth: 4755px;posiitionn: abbsoluute; toop: 665px; leeft: 40pxx; foont-wweighht: bbold; coolor: #FBBFBE55;#summmary .p2posiitionn: abbsoluute;top: 2455px; leeft: 530ppx

55、;coloor: #5660047;/* coontennt */#conttent widtth: 4445pxx;floaat: rrightt;marggin-rrightt: 500px;dispplay: inlline; /*修修復IE雙雙邊距buug*/marggin-ttop: -30ppx; paaddinng-boottomm: 400px;#conttent h3 heeightt: 322px; boorderr-botttom: 1pxx sollid #7D89965;marggin-bbottoom: 00.8emm;#preaamblee h3 baackgrr

56、oundd: urrl(immagess/h3_preaamblee.giff) noo-reppeat leftt topp;textt-inddent: -99999pxx;#expllanattion h3 baackgrroundd: urrl(immagess/h3_expllanattion.gif) no-repeeat lleft top;textt-inddent: -99999pxx;#partticippatioon h33 baackgrroundd: urrl(immagess/h3_partticippatioon.giif) nno-reepeatt lefft

57、toop;textt-inddent: -99999pxx;#beneefitss h3 baackgrroundd: urrl(immagess/h3_beneefitss.giff) noo-reppeat leftt topp;textt-inddent: -99999pxx;#requuiremmentss h3 baackgrroundd: urrl(immagess/h3_requuiremmentss.giff) noo-reppeat leftt topp;textt-inddent: -99999pxx;/* liink llist */#linkkListt wiidth:

58、 1388px; flloat: lefft; maarginn-lefft: 660px;dispplay: inlline; /*修復IIE雙邊距距bug*/#linkkListt h3 heeightt: 244px;bordder-bbottoom: 11px ssolidd #7DD89655;marggin:11.5emm 0 00.5emm 0; #seleect hh3 marggin-ttop: 0; baackgrroundd: urrl(immagess/h3_seleect.ggif) no-rrepeaat leeft ttop;textt-inddent: -999

59、99pxx;#archhivess h3 baackgrroundd: urrl(immagess/h3_archhivess.giff) noo-reppeat leftt topp;textt-inddent: -99999pxx;#resoourcees h33 baackgrroundd: urrl(immagess/h3_resoourcees.giif) nno-reepeatt lefft toop;textt-inddent: -99999pxx;#linkkListt ul llist-stylle: nnone;#linkkListt li mmargiin: 00.7em

60、m 0; ccolorr: #88C97777;#linkkListt a ffont-weigght: boldd; ccolorr: #88C97777;#seleect uul lii padddingg-lefft: 220px; bbackggrounnd: uurl(iimagees/seelectt_a_bbg.giif) nno-reepeatt lefft toop;#seleect aa ddispllay: blocck;#seleect aa.c ddispllay: inliine; ffont-weigght: normmal; ttext-decooratiion