互聯(lián)網(wǎng)與網(wǎng)站建設(shè)

1、 互聯(lián)網(wǎng)與網(wǎng)站建設(shè)實(shí)驗(yàn)指導(dǎo)書(shū)聊城大學(xué)傳媒技術(shù)學(xué)院2008年8月1實(shí)驗(yàn)指導(dǎo)書(shū) 目錄實(shí)驗(yàn)一 簡(jiǎn)單網(wǎng)頁(yè)制作3實(shí)驗(yàn)二 多媒體網(wǎng)頁(yè)制作15實(shí)驗(yàn)三 表格布局網(wǎng)頁(yè)制作20實(shí)驗(yàn)四 Fireworks切圖網(wǎng)頁(yè)制作24實(shí)驗(yàn)五 XHTML語(yǔ)言網(wǎng)頁(yè)制作30實(shí)驗(yàn)六 CSS選擇符33實(shí)驗(yàn)七 CSS盒模型37實(shí)驗(yàn)八 CSS兩列浮動(dòng)布局41實(shí)驗(yàn)九 CSS三列浮動(dòng)布局49實(shí)驗(yàn)十 CSS兩列定位布局57實(shí)驗(yàn)十一 CSS三列定位布局61實(shí)驗(yàn)十二 Ajax框架在網(wǎng)頁(yè)中的應(yīng)用67實(shí)驗(yàn)十三 網(wǎng)頁(yè)制作綜合訓(xùn)練71實(shí)驗(yàn)一 簡(jiǎn)單網(wǎng)頁(yè)制作一、實(shí)驗(yàn)?zāi)康?熟悉Dreamweaver軟件的操作界面。2掌握建立本地站點(diǎn)的方法。3掌握簡(jiǎn)單網(wǎng)頁(yè)制作方法。4

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

18、S”面板上的“新建CSS規(guī)則”按鈕。在“新建CSS規(guī)則”對(duì)話框中設(shè)置選擇器類型為“標(biāo)簽”，標(biāo)簽為“body”，定義在“新建樣式表文件”，單擊“確定”按鈕。將CSS文件保存在style文件夾中，命名為basic.css。body的CSS樣式定義如圖：8插入第一個(gè)表格，985像素，居中對(duì)齊。其中嵌套表格。310像素寬1行3列280像素寬1行9列660像素寬9繼續(xù)插入表格，985像素，居中對(duì)齊。其中嵌套表格。305像素寬427像素寬460像素寬3行1列190像素寬3行1列180像素寬220像素寬10繼續(xù)插入表格，985像素，居中對(duì)齊。11切換到代碼窗口，為導(dǎo)航條表格添加唯一標(biāo)識(shí)。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應(yīng)用類樣式（1）將.borderright樣式應(yīng)用于第二個(gè)大表格的中間單元格。（2）將.dotline樣式應(yīng)用于新聞列表和通知列表的所有單元格。四、實(shí)驗(yàn)要求及注意事項(xiàng)1從53服務(wù)器下載素材。2先建立站點(diǎn)，再制作網(wǎng)頁(yè)。3表格布局時(shí)，表格的邊框、填充、邊距全部為0。4網(wǎng)頁(yè)制作過(guò)程中，以自己處理的切圖素材的尺寸為準(zhǔn)。5設(shè)置CSS時(shí)，首先設(shè)置Dreamweaver的CSS代碼為速記。實(shí)驗(yàn)四 Fireworks切圖網(wǎng)頁(yè)制作一、實(shí)驗(yàn)?zāi)康?掌握Fi

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

22、置切片導(dǎo)出格式為“GIF最適合256”。（6）選擇“文件HTML設(shè)置”命令，做以下設(shè)置。（7）選擇“文件導(dǎo)出”命令，在“導(dǎo)出”對(duì)話框中做以下設(shè)置。2使用Fireworks切圖并導(dǎo)出單元格背景圖。（1）刪除切片4，設(shè)置視圖縮放比例為“200%”，在“學(xué)校概況”后面的空白區(qū)域做一個(gè)小切片。（2）在該切片上右擊，選擇“導(dǎo)出所選切片”命令。將該切片命名為“bg1”，并保存在“images”文件夾中。（3）用相同方法導(dǎo)出“bg2”。3在Dreamweaver中編輯“清華大學(xué)”首頁(yè)。（1）在Dreamweaver中打開(kāi)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，同時(shí)設(shè)置該單元格寬度為615像素，水平對(duì)齊方式為“右對(duì)齊”，垂直對(duì)齊方式為“底部”。背景顏色白色。（3）在該單元格中插入1行2列表格，寬度250像素，填充10像素。輸入文字。（4）刪除圖像index_4.jpg，同時(shí)設(shè)置該單元格寬度為582像素，背景圖像為“bg1.jpg”。（5）在該單元格中插入1行7列表格，寬度100%，邊框0，填充0，間距0。輸入文字。（6）用相同方法制作第

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

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

26、處理的切圖素材的尺寸為準(zhǔn)。5設(shè)置CSS時(shí)，首先設(shè)置Dreamweaver的CSS代碼為速記。實(shí)驗(yàn)五 XHTML語(yǔ)言網(wǎng)頁(yè)制作一、實(shí)驗(yàn)?zāi)康?掌握XHTML 語(yǔ)法。2掌握XHTML 文檔類型聲明。3掌握XHTML 標(biāo)記及屬性。二、實(shí)驗(yàn)內(nèi)容制作“webquest/article01.html”網(wǎng)頁(yè)。三、操作步驟1創(chuàng)建“webquest”站點(diǎn)。2新建網(wǎng)頁(yè)，保存為article01.html。3切換到代碼窗口，從“文本.txt”中復(fù)制文字，粘貼到中。4按照網(wǎng)頁(yè)內(nèi)容的語(yǔ)義修改XHTML代碼。惟存教育探究學(xué)習(xí)返回首頁(yè)如何構(gòu)建高效的 webquest楊淑蓮 華南師范大學(xué)教育技術(shù)研究所一、什么是 WebQuest

27、WebQuest 是美國(guó)的評(píng)價(jià)、結(jié)論六個(gè)基本模塊貫串在一起，形成一個(gè)完整的教學(xué)體系。二、 WebQuest 具體的構(gòu)建過(guò)程（一）選擇合適的主題圖1選擇學(xué)習(xí)任務(wù)WebQuest 僅僅是教學(xué)方式中的一種，才能有助于學(xué)習(xí)者發(fā)現(xiàn)問(wèn)題，并激活知識(shí)儲(chǔ)備。（二）任務(wù)在設(shè)計(jì)任務(wù)時(shí)要結(jié)合以下原則確定任務(wù)：科學(xué)性、知識(shí)性：體現(xiàn)教學(xué)目標(biāo)。趣味性：引發(fā)學(xué)習(xí)者探索的積極性?？刹僮餍裕喝蝿?wù)要具體，一般要形成一定的產(chǎn)品。開(kāi)放性：任務(wù)完成可以采取不同的途徑，任務(wù)解決沒(méi)有固定答案。伸縮性：可以把任務(wù)分為的學(xué)生。（三）評(píng)價(jià)WebQuest 通常采用表現(xiàn)為書(shū)面作業(yè)、學(xué)生的作品、創(chuàng)作的網(wǎng)頁(yè)或其他內(nèi)容。評(píng)價(jià)對(duì)象起步發(fā)展中完成參與討論&

28、nbsp;  網(wǎng)上搜集資料   作品創(chuàng)作   Copyright©BEING, Being Lab. All Rights Reserved版權(quán)所有 惟存教育實(shí)驗(yàn)室實(shí)驗(yàn)六 CSS選擇符一、實(shí)驗(yàn)?zāi)康?掌握CSS的基本語(yǔ)法規(guī)則。2掌握CSS的常用選擇符。3掌握在網(wǎng)頁(yè)上應(yīng)用CSS的方法。4掌握使用Dreamweaver定義CSS的方法。二、實(shí)驗(yàn)內(nèi)容1使用標(biāo)記定義“webquest/article01.html”網(wǎng)頁(yè)的邏輯結(jié)構(gòu)。2使用CSS控制“webquest/article01.html”網(wǎng)頁(yè)的樣式。3使用標(biāo)

29、記定義“webquest/article02.html”網(wǎng)頁(yè)的邏輯結(jié)構(gòu)，并為該網(wǎng)頁(yè)鏈接外部CSS樣式表。三、操作步驟1創(chuàng)建“webquest”站點(diǎn)。2打開(kāi)article01.html，使用標(biāo)記定義網(wǎng)頁(yè)的邏輯結(jié)構(gòu)。返回首頁(yè)如何構(gòu)建高效的 webquest楊淑蓮 華南師范大學(xué)教育技術(shù)研究所圖1選擇學(xué)習(xí)任務(wù)Copyright©BEING, Being Lab. All Rights Reserved版權(quán)所有 惟存教育實(shí)驗(yàn)室3使用CSS控制網(wǎng)頁(yè)的表現(xiàn)。* 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使用標(biāo)記定義“webquest/article02.html”

33、網(wǎng)頁(yè)的邏輯結(jié)構(gòu)，并為該網(wǎng)頁(yè)鏈接外部CSS樣式表。實(shí)驗(yàn)七 CSS盒模型一、實(shí)驗(yàn)?zāi)康?深入理解CSS盒模型及其屬性。2熟練掌握CSS屬性的定義方法。二、實(shí)驗(yàn)內(nèi)容制作”悠然我思”網(wǎng)站。三、操作步驟1創(chuàng)建“悠然我思”站點(diǎn)。2打開(kāi)index.html，定義其邏輯結(jié)構(gòu)。悠然我思月光詩(shī)集旖旎信箱：moonlili.cc版權(quán)所有©旖旎 1999 3使用CSS控制“首頁(yè)”的樣式。新建CSS樣式表，保存在style文件夾中，命名為style_homepage.css，其內(nèi)容如下：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”網(wǎng)頁(yè)結(jié)構(gòu)。 永遠(yuǎn)的夏娃珍惜 我曾經(jīng)那么 學(xué)會(huì)好好愛(ài)我 作者：旖旎（moonlili.cc） 下一首 返回5使用CSS定義“zhenxi.html”網(wǎng)頁(yè)的樣式。新建CSS樣式表，保存在style文件夾中，命名為style_zhenxi.css，其內(nèi)容如下：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”網(wǎng)頁(yè)的邏輯結(jié)構(gòu)和CSS樣式。四

38、、實(shí)驗(yàn)要求及注意事項(xiàng)1從53服務(wù)器下載素材。2認(rèn)真完成全部實(shí)驗(yàn)內(nèi)容。3先建立站點(diǎn)，再制作網(wǎng)頁(yè)。4設(shè)置CSS時(shí)，首先設(shè)置Dreamweaver的CSS代碼為速記。實(shí)驗(yàn)八 CSS兩列浮動(dòng)布局一、實(shí)驗(yàn)?zāi)康?掌握兩列布局網(wǎng)頁(yè)的典型邏輯結(jié)構(gòu)。2熟練掌握CSS兩列浮動(dòng)布局的方法。二、實(shí)驗(yàn)內(nèi)容制作csszengarden網(wǎng)站的163號(hào)作品。三、操作步驟1創(chuàng)建163站點(diǎn)。2打開(kāi)index.html，定義其邏輯結(jié)構(gòu)。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控制網(wǎng)頁(yè)的樣式。新建CSS樣式表，保存在style文件夾中，命名為style.css，其內(nèi)容如下：* 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