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

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

3、。（3）在文檔工具欄上設置網頁標題“文學小屋紅舞鞋”。（4）插入table1，1行2列，寬度760像素。（5）選中table1，在屬性面板上設置其居中對齊。（6）光標置于table1的左列單元格中，設置其寬度為200像素。（7）在table1的左、右單元格中分別插入圖像。（8）光標置于table1之后，插入table2，1行3列，寬度760像素。（9）選中table2，在屬性面板上設置其居中對齊。（10）設置table2左、中、右單元格的寬度分別為150像素，460像素，150像素。（11）在table2 的中列單元格中輸入文字，并設置文字屬性。（12）光標置于table2之后，插入table

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

5、欄上設置網頁標題“文學小屋愛的秘密”。（4）使用“修改頁面屬性”命令設置網頁背景圖像為lovebg.jpg。（5）插入table1，1行2列，寬度760像素。（6）設置table1左列單元格的寬度為110像素。（7）光標置于table1的右列單元格中，設置該單元格的垂直對齊方式為“頂端”。（8）在table1中嵌套表格table2，1行1列，寬度100%，高度80像素。在其中輸入文字, 并設置文字屬性。（9）將光標置于table2之后，插入嵌套表格table3，1行2列，寬度100%。，設置table3的兩個單元格的垂直對齊方式為“頂端”。然后在其中插入圖像和文字。（10）將光標置于table

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

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

8、。（9）新建CSS規則。設置選擇器類型為“高級”，選擇器為“a:visited”，定義在“basic.css”文件中，單擊“確定”按鈕。（10）定義a:visited的樣式為，文字黑色，修飾“無”。（11）新建CSS規則。設置選擇器類型為“高級”，選擇器為“a:hover”，定義在“basic.css”文件中，單擊“確定”按鈕。（12）定義a:hover的樣式為，文字紅色，修飾“下劃線”。（13）新建CSS規則。設置選擇器類型為“高級”，選擇器為“a:active”，定義在“basic.css”文件中，單擊“確定”按鈕。（14）定義a:active的樣式為，文字紅色，修飾“下劃線”。（15）保

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

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

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

12、DAA03-8BE4-11cf-B84B-0020AFBBCCFA，寬320像素，高280像素，參數設置如圖所示。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）切換到代碼

13、窗口，設置XML文件的路徑。 <param name="movie" value="bcastr/bcastr4.swf?xml=bcastr/bcastr.xml" /> <embed src="bcastr/bcastr4.swf?xml=bcastr/bcastr.xml"（4）打開bcastr.xml文件，在其中設置圖片的路徑。<item><link></link><image>images/image1.gif</image><title&g

14、t;學科建設</title></item><item><link></link><image>images/image2.gif</image><title>人才培養</title></item><item><link></link><image>images/image3.gif</image><title>校園環境</title></item>7在網頁中嵌入flv播放器。（1）

15、新建網頁，保存網頁為006.htm。在網頁中插入圖片播放器vcastr/vcastr3.swf。（2）在屬性面板上設置播放器寬550像素，高400像素。（3）設置參數如下：（4）打開vcastr.xml文件，在其中設置flv視頻文件的路徑。<channel><item><source>./media/01.flv</source><title>你和我</title></item><item><source>./media/02.flv</source><title>

16、;飛人大賽</title></item></channel>8制作“歲月留聲”網頁，并實現歌曲點播。主要步驟：（1）新建網頁，保存網頁為007.htm。設置網頁背景圖像，并在網頁中插入圖像、表格及文字。（2）在網頁中插入ActiveX，在屬性面板上設置ClassID為clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95，寬320像素，高28像素。為播放器加入id標識player。<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" i

17、d="player" width="320" height="28"></object>（3）在網頁中插入表格，填寫歌曲名稱，并設置超鏈接：<a href='javascript:musicplay("media/xihuanni.mp3")'>偏偏喜歡你</a><a href='javascript:musicplay("media/houlai.mp3")'>后來</a>（4）加入在<he

18、ad></head>之間加入javascript，實現歌曲點播。<script language=JavaScript>function musicplay(name) if (name="") return; filename = name; player.Cancel() player.Open(filename)</script>四、實驗要求及注意事項1從服務器下載素材。2認真完成全部實驗內容。3先建立站點，再制作網頁。4播放器對象的classid從clsid開始填寫。實驗三 表格布局網頁制作一、實驗目的1掌握在Firewor

19、ks中提取圖像、提取尺寸、提取顏色的方法。2掌握使用表格布局網頁的方法。二、實驗內容制作“北京大學首頁”網頁。三、操作步驟1新建文件夾，命名為“beida”，在其中創建“images”子文件夾。2啟動Fireworks，使用切片工具提取需要的圖像，并導出到images文件夾中。需要提取以下圖像切片在網頁中的作用命名body的背景mainbg.gif網站logologo.gif導航條左圓角navleft.gif導航條右圓角navright.gif圖片bjdx.gif欄目圖片news.gif欄目圖片notice.gif欄目圖片hot.gif箭頭arrow.gif箭頭arrow2.gif圓角欄圖片1

20、box_top.gif圓角欄圖片2box_bg.gif圓角欄圖片3box_bottom.gif3 將“bcasrt” 文件夾復制到“beida”文件夾中。4啟動Dreamweaver，創建“北京大學”站點，本地目錄為“beida”文件夾。5新建網頁，保存為index.html。6設置網頁標題：北京大學歡迎你。7單擊“CSS”面板上的“新建CSS規則”按鈕。在“新建CSS規則”對話框中設置選擇器類型為“標簽”，標簽為“body”，定義在“新建樣式表文件”，單擊“確定”按鈕。將CSS文件保存在style文件夾中，命名為basic.css。body的CSS樣式定義如圖：8插入第一個表格，985像素，

21、居中對齊。其中嵌套表格。310像素寬1行3列280像素寬1行9列660像素寬9繼續插入表格，985像素，居中對齊。其中嵌套表格。305像素寬427像素寬460像素寬3行1列190像素寬3行1列180像素寬220像素寬10繼續插入表格，985像素，居中對齊。11切換到代碼窗口，為導航條表格添加唯一標識。<table width="660" border="0" cellpadding="0" cellspacing="0" id="nav">12定義超鏈接的CSS樣式。body fon

22、t: 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:

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

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

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

26、ont: 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）用相同方法制作第二個導航條。（7）

27、刪除圖像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列表格，輸入文字。（1

28、3）選中圖像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從服務器下載素材。2先建立站點，再制作網頁。3在Fireworks中切圖時，先利用標尺添加輔助線。4網頁制作過程中，以自己處理的切圖素材的尺寸為準。5設置CSS時，首先設置Dre

29、amweaver的CSS代碼為速記。實驗五 XHTML語言網頁制作一、實驗目的1掌握XHTML 語法。2掌握XHTML 文檔類型聲明。3掌握XHTML 標記及屬性。二、實驗內容制作“webquest/article01.html”網頁。三、操作步驟1創建“webquest”站點。2新建網頁，保存為article01.html。3切換到代碼窗口，從“文本.txt”中復制文字，粘貼到<body></body>中。4按照網頁內容的語義修改XHTML代碼。<body><h1><a href="#">惟存教育探究學習<

30、/a></h1><p><a href="#">返回首頁</a></p><h2>如何構建高效的 webquest</h2><p>楊淑蓮 華南師范大學教育技術研究所</p><h3>一、什么是 WebQuest</h3><p>WebQuest 是美國的評價、結論六個基本模塊貫串在一起，形成一個完整的教學體系。</p><h3>二、 WebQuest 具體的構建過程</h3><h4>（一）

31、選擇合適的主題</h4><div><img src="images/pic.gif" alt="選擇學習任務" width="323" height="108" /><br />圖1選擇學習任務</div><p>WebQuest 僅僅是教學方式中的一種，才能有助于學習者發現問題，并激活知識儲備。</p><h4>（二）任務</h4><p>在設計任務時要結合以下原則確定任務：</p><

32、;ul><li>科學性、知識性：體現教學目標。</li><li>趣味性：引發學習者探索的積極性。</li><li>可操作性：任務要具體，一般要形成一定的產品。</li><li>開放性：任務完成可以采取不同的途徑，任務解決沒有固定答案。</li><li>伸縮性：可以把任務分為的學生。</li></ul><h4>（三）評價</h4><p>WebQuest 通常采用表現為書面作業、學生的作品、創作的網頁或其他內容。</p&

33、gt;<table><tr><th scope="col">評價對象</th><th scope="col">起步</th><th scope="col">發展中</th><th scope="col">完成</th></tr><tr><td>參與討論</td><td>&nbsp;</td><td>&

34、;nbsp;</td><td>&nbsp;</td></tr><tr><td>網上搜集資料</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>作品創作</td><td>&nbsp;</td><td>&nbsp;</td><

35、;td>&nbsp;</td></tr></table><p>版權所有 惟存教育實驗室</p></body>實驗六 CSS選擇符一、實驗目的1掌握CSS的基本語法規則。2掌握CSS的常用選擇符。3掌握在網頁上應用CSS的方法。4掌握使用Dreamweaver定義CSS的方法。二、實驗內容1使用<div>標記定義“webquest/article01.html”網頁的邏輯結構。2使用CSS控制“webquest/article01.html”網頁的樣式。3使用<div>標記定義“webq

36、uest/article02.html”網頁的邏輯結構，并為該網頁鏈接外部CSS樣式表。三、操作步驟1創建“webquest”站點。2打開article01.html，使用<div>標記定義網頁的邏輯結構。<body><div id="container"><div id="header"><p class="goback"><a href="#">返回首頁</a></p></div><div id=&

37、quot;content"><h2>如何構建高效的 webquest</h2><p class="author">楊淑蓮 華南師范大學教育技術研究所</p><div id="pic"><img src="images/pic.gif" alt="選擇學習任務" width="323" height="108" />圖1選擇學習任務</div></table><

38、/div><div id="footer"><p>版權所有 惟存教育實驗室</p></div></div></body>3使用CSS控制網頁的表現。* margin: 0px;padding: 0px;body font: 0.75em/1.7 "宋體"background: #E0E0E0 url(images/mygrd.gif);text-align: center;#container margin: auto;width: 760px;text-align: left

39、;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%;text-align: center;margin-bottom: 0.5em;h3 font-size: 130%;color: #660000;h4 font-size: 110%;h3,

40、 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:collapse;td, th padding: 5px;border: 1px solid #000000;#footer text-align: center;padding: 20px 0

41、px;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使用<div>標記定義“webquest/article02.html”網頁的邏輯結構，并為該網頁鏈接外部CSS樣式表。實驗七 CSS盒模型一、實驗目的1深入理解CSS盒模型及其屬性。2熟練掌握CSS屬性的定義方法。二、實驗內容制作”悠然我

42、思”網站。三、操作步驟1創建“悠然我思”站點。2打開index.html，定義其邏輯結構。<body><div id="container"><h1 id="header">悠然我思</h1><div id="content"><h2><a href="poems.html">月光詩集</a></h2></div><div id="footer"><p>

43、旖旎信箱：moonlili.cc</p><p>版權所有&copy;旖旎 1999</p></div></div></body> 3使用CSS控制“首頁”的樣式。新建CSS樣式表，保存在style文件夾中，命名為style_homepage.css，其內容如下：body font: 0.75em/1.5 "宋體"color: #dee3c1;background: #134113 url(./images/bg_body.jpg);text-align: center;padding: 30px

44、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%;#content padding: 0px 100px 30px 100px;#content h2 font-size:

45、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-decoration: none;a:hover text-decoration: underline;4定義“

46、zhenxi.html”網頁結構。<body><div id="container"> <p class="title">永遠的夏娃·珍惜</p> <p>我曾經那么<br /> 學會好好愛我</p> <p class="author">作者：旖旎（moonlili.cc）</p> <p><a href="qinsheng.html">下一首</a> <a h

47、ref="poems.html">返回</a></p></div></body>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;padding: 20px 0;#container width: 290p

48、x;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樣式。四、實驗要求及注意事項1從服務器下載素材。2認真完成全部實驗內容。

49、3先建立站點，再制作網頁。4設置CSS時，首先設置Dreamweaver的CSS代碼為速記。實驗八 CSS兩列浮動布局一、實驗目的1掌握兩列布局網頁的典型邏輯結構。2熟練掌握CSS兩列浮動布局的方法。二、實驗內容制作csszengarden網站的163號作品。三、操作步驟1創建163站點。2打開index.html，定義其邏輯結構。<body><div id="container"><div id="header"><h1>css Zen Garden</h1><h2>The Bea

50、uty of CSS Design</h2></div><div id="summary"><p class="p1">A demonstration of what can be accomplished visually through CSS-based design. Select any style sheet from the list to load it into this page.</p><p class="p2">Download the s

51、ample <a href="#">html file</a> and <a href="#">css file</a></p></div><div id="content"><div id="preamble"><h3>The Road to Enlightenment</h3><p>Littering a dark and dreary road lay the past reli

52、cs of browser-specific tags, incompatible DOMs, and broken CSS support.</p></div><div id="explanation"><h3>So What is This About?</h3><p>There is clearly a need for CSS to be taken seriously by graphic artists. </p></div><div id="part

53、icipation"><h3>Participation</h3><p>Graphic artists only please. </p></div><div id="benefits"><h3>Benefits</h3><p>Why participate? </p></div><div id="requirements"><h3>Requirements</h3><

54、;p>We would like to see as much CSS1 as possible.</p></div></div><div id="linkList"><div id="select"><h3>Select a Design:</h3><ul><li><a href="#">A Walk in the Garden</a> by <a href="#" cl

55、ass="c">Simon Van Hauwermeiren</a></li><li><a href="#">spring360</a> by <a href="#" class="c">Rene Hornig</a></li></ul></div><div id="archives"><h3>Archives:</h3><ul&

56、gt;<li><a href="#">next designs>></a></li><li><a href="#">View All Designs</a></li></ul></div><div id="resources"><h3>Resources:</h3><ul><li><a href="#">View

57、This Designs CSS</a></li><li><a href="#">CSS Resources</a></li></ul></div></div><div id="footer"><a href="#">xhtml</a> &nbsp; <a href="#">css</a> &nbsp; <a href=&quo

58、t;#">cc</a> &nbsp;<a href="#">508</a> &nbsp;<a href="#">aaa</a></div></div></body>3使用CSS控制網頁的樣式。新建CSS樣式表，保存在style文件夾中，命名為style.css，其內容如下：* padding: 0;margin: 0;body font: 0.7em/1.5 Tahoma, Arial, Helvetica, sans-seri

59、f;color: #566047; background: #FBFBE5 url(images/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: r