《nternet与web技术》实验指导书综述

1、Internet与web技术实验指导书目录网页制作实验大纲实验（一）简单网页制作实验（二）CSS 初步应用实验（三）XHTML语言实验（四）CSS选择器实验（五）应用背景图像实验（六）CSS浮动布局实验（七）CSS定位布局实验（八）导航条和表单实验（九）开发环境的使用及C#语法实验（十）构建新闻类实验（十一）控件使用及站点配置实验（十二）创建数据库操作类实验（十三）新闻列表页及内容页制作实验（十四）绑定数据并显示信息实验（十五）使用LINQ及Ajax改进网站实验（十六）构建统一的站点页面 实验一 简单网页制作一、实验目的1熟悉Dreamweaver软件的操作界面。2掌握建立本地站点的方法。3掌

2、握简单网页制作方法。4掌握超链接的建立方法。二、实验内容1创建“潜水俱乐部”站点。2制作“俱乐部首页”、“俱乐部简介”、“近期活动”、“精彩图片”、“在线预约”5个网页，并完成网页之间的超链接。三、操作步骤1创建“潜水俱乐部”站点（1）在D盘新建文件夹，命名为myweb；（2）将images文件夹和gallery文件夹复制到中myweb中；（3）启动Dreamweaver，使用“站点新建站点”命令创建站点。2制作“俱乐部首页”。（1）新建网页。（2）使用“文件保存”命令保存网页，命名为index.html。（3）在文档工具栏上设置网页标题“泡泡潜水俱乐部欢迎你”。（4）从“文本.txt”中将首

3、页的相关文字粘贴到网页中。（5）设置一级标题、二级标题、三级标题、项目列表、编号列表。（6）插入图像。（7）在Copyright后插入版权符号©。（8）在电话号码之间插入半角空格。（9）在电子邮箱地址上建立超链接，mailto: vipBubbleU。（10）选中网页内容，然后单击“插入Div标签”按钮，分别插入header、navigation、mainContent、footer共4个Div。（11）保存网页，按F12，预览网页。3制作“俱乐部简介”网页。（1）在文件面板上复制index.html网页，重新命名为about.html。（2）在文件面板上双击打开about.html

4、。（3）删除mainContent区域中的原有内容，然后粘贴俱乐部简介文字。（4）设置二级标题。（5）选中“国际潜水运动协会”，设置为“强调”。（6）选中“泡泡俱乐的宗旨是开创新的篇章”，设置为“块引用”。（7）保存网页，按F12，预览网页。4制作“近期活动”网页。（1）在文件面板上复制index.html网页，重新命名为events.html。（2）在文件面板上双击打开events.html。（3）删除mainContent区域中的原有内容，然后粘贴俱乐部近期活动文字。（4）设置二级标题。（5）插入表格。（6）在表格中输入文字。（7）保存网页，按F12，预览网页。5制作“精彩图片”网页。（1

5、）在文件面板上复制index.html网页，重新命名为gallery.html。（2）在文件面板上双击打开gallery.html。（3）删除mainContent区域中的原有内容，然后粘贴精彩图片文字。（4）设置二级标题。（5）插入5张图片，为每张图片设置替换文本。（6）选中图片及其下面的段落，然后单击“插入Div标签”按钮，将图片及其说明文字分别装入5个Div中。（7）保存网页，按F12，预览网页。6制作“在线预约”网页。（1）在文件面板上复制index.html网页，重新命名为reserve.html。（2）在文件面板上双击打开reserve.html。（3）删除mainContent区

6、域中的原有内容，然后粘贴在线预约文字。（4）设置二级标题。（5）插入“表单”。（6）光标置于表单内，插入“菜单”表单元素。（7）选中“菜单”，在属性面板上单击“列表值”按钮，设置选项。（8）在表单内插入其它表单元素。（9）保存网页，按F12，预览网页。7建立网站内各页面之间的超链接。实验二 CSS初步应用一、实验目的初步掌握为网页添加CSS样式表的方法。二、实验内容为“潜水俱乐部”网站中的5个网页添加CSS样式表。三、操作步骤1创建“潜水俱乐部”站点（1）将“实验二”文件夹中的myweb文件夹复制D盘；（2）启动Dreamweaver，使用“站点新建站点”命令新建“潜水俱乐部”站点，并指定my

7、web文件夹为“潜水俱乐部”站点的本地根文件夹。2打开“index.html”文件。3新建CSS样式表文件，保存在myweb文件夹中，命名为style.css。（注意：此时文档窗口中有两个文件，一个网页文件，一个样式表文件。）4为“index.html”文件附加样式表，并添加样式。（1）将文档窗口切换至index.html文件。（2）单击CSS面板上的“附加样式表”按钮，并选择style.css作为外部样式表。（3）将文档窗口切换至style.css文件，添加如下样式。* 是通配选择器。设置网页上所有元素的边界（margin）为0，填充（padding）为0。* margin: 0;paddi

8、ng: 0;body 是类型选择器。设置网页主体（body）上的文字（font）大小为0.75字体高（em），字体为“宋体”，文字颜色（color）为#000080，网页的背景颜色（background-color）为#e2edff。body font: 0.75em "宋体"color: #000080;background-color: #e2edff;p, h2, h3 是群选择器。同时设置段落（p）、二级标题（h2）、三级标题（h3）的边界（margin）上下值为0.8字体高（em），左右值为0。p, h2, h3 margin: 0.8em 0;p, li 是群选

9、择器。同时设置段落（p）、列表项（li）的行高（line-height）为1.8倍。p, li line-height: 1.8;h1 是类型选择器。设置一级标题（h1）的文字大小（font-size）为基础字号的180%，文字颜色（color）为白色。h1 font-size: 180%;color: #FFFFFF;h2 是类型选择器。设置二级标题（h2）的文字大小和文字颜色。h2 font-size: 150%;h3 是类型选择器。设置h3的文字大小和文字颜色。文字粗细（font-weight）为正常（normal）。背景图像（background）为dot.gif，该背景图像不重复（n

10、o-repeat），位于h3的左上角（left top）。左填充（padding-left）为15像素。color:#FF6633;h3 font-size: 100%;color:#FF6633;font-weight: normal; background:url(images/dot.gif) no-repeat left top;padding-left: 15px; ol 是类型选择器。设置编号列表（ol）的左边界（margin-left）为字体高（em）。ol margin-left: 2em;a 是类型选择器。设置超链接（a）的文字颜色为#000080，文字粗细（font-wei

11、ght）为粗体（bold）。a color: #000080;a:hover 是伪类选择器。设置超链接（a）鼠标经过（hover）时，文本装饰（text-decoration）为无装饰（none），文字颜色为白色，背景颜色为#000080。font-weight: bold;a:hover #header 是ID选择器。设置#header块的背景颜色为#000080，背景图像为header-bg.jpg，该背景图像不重复，位于#header块的右下角。填充（padding）上、右、下、左值分别是40px、0、5px、20px。text-decoration: none;color: #FFFF

12、FF;background-color: #000080;#header background: #000080 url(images/header-bg.jpg) no-repeat right bottom;设置#header块的下边框（border-bottom）宽度为3px，边框样式为实线（solid），边框颜色为#7da5d8。padding: 40px 0 5px 20px;border-bottom: 3px solid #7da5d8;#navigation 是ID选择器。设置#navigation块的宽度（width）为180px，向左浮动（float）。背景颜色#98b6e

13、8，背景图像nav-bg.jpg，该背景图像不重复（no-repeat），位于左下角（left bottom）。#navigation width: 180px;float: left;设置#navigation块的最小高度（min-height）为150px，底部填充330px。150+330=480由于IE6浏览器不识别min-height属性，所以使用“下划线属性过滤器”专门为IE6浏览器设置高度（height）为150px。background: #98b6e8 url(images/nav-bg.jpg) no-repeat left bottom;min-height: 150px

14、;padding-bottom: 330px;_height: 150px;#mainContent 是ID选择器。设置#mainContent块的左边界（margin-left）为180px。设置#mainContent块的填充（padding）上、右、下、左值分别是0、20px、30px、20px。#mainContent margin-left: 180px;padding: 0 20px 30px 20px;#footer 是ID选择器。设置#footer块清除（clear）两边（both）的浮动对象。设置#footer块的上边框、填充和背景颜色。#footer clear: both

15、;border-top: 3px solid #7da5d8;padding: 20px 0;background-color: #bed8f3;#header p 是后代选择器。设置#header块中段落（p）的文字颜色和下边界。#header p color: #ffffff;margin-bottom: 0;#navigation ul 是后代选择器。设置#navigation块中项目列表（ul）的文字大小为基础字号的120%。项目符号的样式（list-style）为无符号（none）。边界（margin）上、右、下、左值分别是15px、0、0、20px。#navigation ul f

16、ont-size: 120%;list-style: none;margin: 15px 0 0 20px;#footer p 是后代选择器。设置#footer块中段落（p）的文字对齐方式（text-align）为居中（center），边界（margin）值为0。#footer p text-align: center;margin: 0;#fltrt 是类选择器。设置class=fltrt的元素向右浮动（float），左边界（margin-left）值为8px。.fltrt float: right;margin-left: 8px; 5为“about.html”文件附加样式表，并添加样式。

17、（1）打开about.html文件。（2）附加样式表style.css。（3）将文档窗口切换至style.css文件，添加如下样式。#emphasize 是类选择器。设置class=emphsize的元素文字大小为基础字号的120%，文字粗细（font-weight）为粗体（bold）。文字倾斜（font-style）为正常。.emphasize font-size: 120%;font-weight: bold;font-style: normal; 6为“events.html”文件附加样式表，并添加样式。（1）打开events.html文件。（2）附加样式表style.css。（3）将文

18、档窗口切换至style.css文件，添加如下样式。table.events 是类选择器。设置class=events的表格（table）边框合并（border-collapse）为合并（collapse）。table.events border-collapse: collapse;table.events th, table.events td 是群选择器。同时设置class=events的表格中标题单元格（th）和普通单元格（td）的边框和填充。table.events th, table.events td border: 1px solid #000066;table.events t

19、h 是后代选择器。设置class=events的表格中标题单元格（th）的背景和文字颜色。padding: 8px 20px;table.events th background: #241374 url(images/th-bg.jpg);table.events td 是后代选择器。设置class=events的表格中普通单元格（td）的背景颜色为#e2edff，背景图像为td-bg.jpg，该背景图像水平重复，位于底部。color: #ffffff;table.events td background: #e2edff url(images/td-bg.jpg) repeat-x bot

20、tom;table.events caption 是后代选择器。设置class=events的表格中标题（caption）的文字大小为基础字号的120%，文字粗细（font-weight）为粗体（bold）。下填充（padding-bottom）值为0.5em。table.events caption font-size: 120%; font-weight: bold; padding-bottom: 0.5em;7为“gallery.html”文件附加样式表，并添加样式。（1）打开gallery.html文件。（2）附加样式表style.css。（3）将文档窗口切换至style.css文件

21、，添加如下样式。div.galleryphoto 是类选择器。设置class=galleryphoto的div块的下边框和下边界。div.galleryphoto border-bottom: 1px solid #000080;margin-bottom: 20px;div.galleryphoto img 是后代选择器。设置class=galleryphoto的div块中图像（img）的边框。div.galleryphoto img border: 15px solid #FFFFFF;div.galleryphoto p 是后代选择器。设置class=galleryphoto的div块中

22、段落（p）的宽度。div.galleryphoto p width: 430px;div.galleryphoto p span 是后代选择器。设置class=galleryphoto的div块中段落（p）中行内块（span）的文字颜色。div.galleryphoto p span color: #808080;8为“reserve.html”文件附加样式表，并添加样式。（1）打开reserve.html文件。（2）附加样式表style.css。（3）将文档窗口切换至style.css文件，添加如下样式。form.contact fieldset 是后代选择器。设置class=contact

23、的表单（form）中字段集（fieldset）的宽度、边框和填充。form.contact fieldset width: 40em;border: 1px solid #000080; padding: 0 0 10px 10px; form.contact legend 是后代选择器。设置class=contact的表单（form）中说明文字（legend）的文字粗细和文字颜色。form.contact legend font-weight: bold; color:#000080; form.contact label.fixedwidth 是后代选择器。设置class=contact的

24、表单（form）中class=fixedwidth的标签（label）显示方式（display）为块（block），宽度为6em，向左浮动。form.contact label.fixedwidth display: block; width: 6em; float: left; .center 是类选择器。设置class=center的元素文字对齐方式（text-align）为居中（center）。.center text-align: center;9保存网页，预览网页，效果如下。实验三 XHTML语言一、实验目的1掌握XHTML 语法。2掌握XHTML标记及属性。3掌握XHTML 标记校

25、验的方法。二、实验内容制作“唯存教育探究学习”栏目中的“article01.html”网页。三、操作步骤1创建“唯存教育”站点（1）在D盘新建文件夹，命名为myweb；（2）将“实验三”文件夹中的images文件夹复制到中myweb中；（3）启动Dreamweaver，使用“站点新建站点”命令创建站点。2制作“article01.html”网页。（1）新建网页。（2）使用“文件保存”命令保存网页，命名为article01.html。（3）在文档工具栏上设置网页标题“唯存教育探究学习”。（4）切换到代码视图，从“文本.txt”中将文字粘贴到HTML文档<body></body&

26、gt;之间。3根据网页语义添加XHTML标记和属性。标题标记：<h1> <h2> <h3> <h4>段落标记：<p>超链接标记：<a href=” ”>图像标记：<img src=” ” alt=” ” width=” ” height=” ” />换行标记：<br />项目列表及列表项标记：<ul> <li>表格、表格行、标题单元格、普通单元格标记：<table> <tr> <th scope=” ”> <td>4使用<

27、div>标记定义网页的逻辑结构，包括container、header、content、footer几个部分。结果如下：<body><div id="container"><div id="header"><h1><a href="#">惟存教育探究学习</a></h1><p><a href="#">返回首页</a></p></div><div id="

28、content"><h2>如何构建高效的 webquest</h2><p>杨淑莲 华南师范大学教育技术研究所</p><h3>一、什么是 WebQuest</h3><p>WebQuest 是美国的 Bernie Dodge 和 Tom March 于 1995 年倡导开发的一种“课程计划”。它把整个课程用导言、任务、过程、资源、评价、结论六个基本模块贯串在一起，形成一个完整的教学体系。</p><h3>二、 WebQuest 具体的构建过程</h3><h4&

29、gt;（一）选择合适的主题</h4><p>WebQuest 仅仅是教学方式中的一种，</p><p><img src="images/pic.gif" alt="选择学习任务" width="323" height="108" /><br />图1选择学习任务</p><p>开展网上与网下丰富的专题讲座活动，</p><h4>（二）任务</h4><p>在设计任务时要结合以下原则确

30、定任务：</p><ul><li>科学性、知识性：体现教学目标。</li><li>趣味性：引发学习者探索的积极性。</li><li>可操作性：任务要具体，一般要形成一定的产品。</li><li>开放性：任务完成可以采取不同的途径，任务解决没有固定答案。</li><li>伸缩性：可以把任务分为基本题目和扩展性题目，满足能力较强的学生。</li></ul><h4>（三）评价</h4><p>WebQuest 通常

31、采用测评表格来考察学生作品的不同方面（包括过程、结果、态度、情感等）。根据任务的差异，评价的对象可表现为书面作业、学生的作品、创作的网页或其他内容。</p><table><tr><th scope="col">评价对象</th><th scope="col">起步阶段</th><th scope="col">发展阶段</th><th scope="col">完成阶段</th></

32、tr><tr><th scope="row">参与讨论</td><td>优秀</td><td>良好</td><td>优秀</td></tr><tr><th scope="row">搜集资料</td><td>良好</td><td>优秀</td><td>良好</td></tr><tr><th sco

33、pe="row">作品创作</td><td>良好</td><td>良好</td><td>优秀</td></tr></table></div><div id="footer"><p>Copyright&copy;BEING, Being Lab. All Rights Reserved</p><p>版权所有 惟存教育实验室</p></div></d

34、iv></body>5登录/网站，使用文件上传的方式进行标记校验，并修改发现的错误。6使用CSS控制网页的表现。（1）启动Dreamweaver，创建being站点，并将myweb文件夹指定为站点文件夹。（2）打开article01.html文件。（3）新建样式表，保存为style.css。（4）为article01.html文件附加样式表style.css。（5）在style.css文件中添加如下样式。* 是通配选择器。设置网页上所有元素的边界（margin）为0，填充（padding）为0。* margin:0;padding:

35、0;body 是类型选择器。设置网页主体（body）上的文字大小、字体和背景。body font: 0.75em "宋体"background: #e0e0e0 url(images/mygrd.gif);#container 是ID选择器。设置#container块的宽度和边界（margin）。当设置margin:auto时，块在其父元素中水平居中。#container width: 760px;margin: auto;p, li 是群选择器。同时设置段落（p）、列表项（li）的行高（line-height）为1.8倍。p, li line-height: 1.8;h1

36、 是类型选择器。设置一级标题（h1）的文字大小（font-size）和文字粗细（font-weight）。h1font-size: 130%;font-weight: normal;h2 是类型选择器。设置二级标题（h2）的文字大小（font-size）和文字对齐方式（text-align）。h2 font-size: 180%;text-align: center;h3 font-size: 130%;color: #660000;p, h2, h3,h4 是群选择器。同时设置段落（p）、二级标题（h2）、三级标题（h3）、四级标题（h4）的边界（margin）上下值为0.8字体高（em），

37、左右值为0。h4 font-size: 110%; p, h2, h3, h4 margin: 0.8em 0;a 是类型选择器。设置超链接（a）的文字颜色为黑色，文字装饰（text-decoration）为无装饰（none）。a color: #000000;a:hover 是伪类选择器。设置超链接（a）鼠标经过（hover）时，文字颜色为红色。text-decoration: none;a:hover table 是类型选择器。设置表格（table）的边界（margin）为自动（auto），边框合并（border-collapse）为合并（collapse）。当设置margin:auto时

38、，块在其父元素中水平居中。color: #ff0000;table margin: auto;border-collapse:collapse;td, th 是群选择器。同时设置标题单元格（th）和普通单元格（td）的填充、边框和文字对齐方式。td,th padding: 5px 15px;border: 1px solid #000000;.center 是类选择器。设置class=center的元素文字对齐方式（text-align）为居中（center）。text-align: center;.center #header 是ID选择器。设置#header块的下边框（border-bot

39、tom）、填充（padding）、溢出方式（overflow）和宽度（width）。当设置overflow:auto时，可以迫使父元素包含其浮动的子元素。对于IE6，设置宽度（width）可以迫使父元素包含其浮动的子元素。750+5+5=760text-align: center;#header border-bottom: 5px solid #666666;padding: 30px 5px 2px 5px;overflow: auto;width: 750px;#header h1 是后代选择器。设置#header块中h1向左浮动。#header h1 float: left;#head

40、er p.goback 是后代选择器。设置#header块中class=goback的段落向右浮动，文字大小为130%，边界为0，行高为1.3倍。#header p.goback float: right;font-size: 130%;margin: 0;line-height: 1.3;#content 是ID选择器。设置#content块的填充（padding）上、右、下、左值都是30px。#content padding: 30px;#content p 是后代选择器。设置#content块中段落的首行文字缩进（text-indent）值为2em。#content p text-ind

41、ent: 2em;#content p.center 是后代选择器。设置#content块中class=center的段落的首行文字缩进（text-indent）值为0。#content p.center text-indent: 0;#content ul 是后代选择器。设置#content块中项目列表（ul）的左边界（margin-left）值为3em。#content ul margin-left:3em;#footer 是后代选择器。设置#footer块的文字对齐方式和上边框。#footer text-align: center;border-top: 1px solid #66666

42、6; 实验四 CSS选择器一、实验目的1掌握在网页上应用CSS的方法。2掌握CSS的基本语法规则。3掌握CSS的常用选择器。二、实验内容定义“泡泡潜水俱乐部”网站首页的样式。三、操作步骤1创建“潜水俱乐部”站点（1）将“实验四”文件夹中的myweb文件夹复制D盘；（2）启动Dreamweaver，使用“站点新建站点”命令新建“潜水俱乐部”站点，并指定myweb文件夹为“潜水俱乐部”站点的本地根文件夹。2打开“index.html”文件。3新建CSS样式表文件，保存在myweb文件夹中，命名为style.css。4为“index.html”文件附加样式表，并添加样式。* 是通配选择器。选择网页上

43、的所有元素。* margin: 0;body 是类型选择器。选择网页主体（body）。设置body的背景颜色是#112981（深蓝），背景图像是gradient.jpg。gradient.jpg是一个20*800像素（又细又长）、由浅蓝到深蓝的渐变图像。该图像在body上水平重复（repeat-x），实现网页的渐变背景。padding: 0;body font: 0.75em "宋体"color:#FFFFFF;background: #112981 url(images/gradient.jpg) repeat-x;body设置了较大值的上、下填充，以便为云、海面、海底、

44、珊瑚等背景图像留出空间。设置position: relative，使body成为有定位属性的父元素。具有绝对定位属性的子元素会相对于body进行定位。padding-top: 180px;padding-bottom: 250px;position: relative;p 是类型选择器。选择段落（p）。p margin: 0.8em 0;p, li 是群选择器。同时选择段落（p）和列表项（li）。p, li line-height: 1.8;h1 是类型选择器。选择一级标题（h1）。h1 font-size: 230%;h2 是类型选择器。选择二级标题（h2）。h2 font-size: 15

45、0%;h3 是类型选择器。选择三级标题（h3）。h3 font-size: 130%;background: url(images/dot.gif) no-repeat;padding-left: 20px;margin-top: 2em;margin-bottom: 0.8em;ol 是类型选择器。选择编号列表（ol）。ol margin-left: 2em;ul 是类型选择器。选择项目列表（ul）。ul font-size: 120%;list-style: none;a 是类型选择器。选择超链接（a）。a color: #FF9600;a:hover 是伪类选择器。选择超链接（a）鼠标经

46、过（hover）时的状态。a:hover color: #FFFFFF;text-decoration: none;#container 是ID选择器。选择id=container的元素。设置container的宽度为600px，边界为自动（atuto），实现网页固定宽度居中布局。#container width: 600px;margin: auto;#header 是ID选择器。选择id=header的元素。#header text-align: center;#navigation 是ID选择器。选择id=navigation的元素。设置navigation的宽度为140px，向右浮动，

47、是使用浮动的方法实现网页两栏布局。padding-bottom: 50px;#navigation #mainContent 是ID选择器。选择id=mainContent的元素。设置mainContent的右边界为180px，使mainContent中的文字不去环绕右边浮动的元素，实现网页两栏布局。width: 140px;float: right;#mainContent #footer 是ID选择器。选择id=footer的元素。设置clear: both，可以清除浮动元素对footer元素的影响。margin-right: 180px;#footer clear: both;#foot

48、er p 是后代选择器。选择id=footer的元素中的段落（p）。padding-top: 50px;#extraDiv1 是ID选择器。选择id=extraDiv1的元素。extraDiv1是一个纯粹为了应用背景图像而加上的空盒子（Div）。extraDiv1应用背景图像clouds.jpg（云），默认情况下，背景图像重复出现。extraDiv1绝对定位（positon: absolute）在body的左上角（left: 0; top: 0;）。#footer p text-align: center;margin: 0;#extraDiv1 width: 100%;height: 104

49、px;background: url(images/clouds.jpg);为了使云布满整个浏览器窗口，extraDiv1的宽度应为100%。虽然块元素的默认宽度为100%，但绝对定位后，块元素收宿至最小（0），所以还需显式声明extraDiv1的宽度为100%。position: absolute;left: 0;top: 0;z-index: -2;#extraDiv2 是ID选择器。extraDiv2应用背景图像water_edge.jpg（水面），绝对定位（positon: absolute）在body的left: 0; top: 104px;。#extraDiv2 width: 10

50、0%;height: 75px;background: url(images/water_edge.jpg);z-index 属性适用于定位元素，即 position 属性值为 relative 或 absolute 或 fixed 的对象，用来确定定位元素在垂直于显示屏方向（称为Z 轴）上的层叠顺序（stack order）。z-index 值较大的元素将叠加在 z-index 值较小的元素之上。z-index 值为正的定位元素显示在文字之上。z-index 值为负的定位元素显示在文字之下。position: absolute;left: 0;top: 104px;z-index: -2;#

51、extraDiv3 width: 315px;height: 316px;background: url(images/sunlight.jpg);#extraDiv3 是ID选择器。extraDiv3应用背景图像sunlight.jpg（阳光），绝对定位（positon: absolute）在body的左上角（left: 0; top: 0;）。由于它的z-index值是-1，大于#extraDiv1和#extraDiv2（z-index值是-2），所以阳光图像显示在云和水面图像的上方。position: absolute;left: 0;top: 0;z-index: -1;#extraD

52、iv4 width: 100%;height: 125px;background: url(images/seafloor.jpg);#extraDiv4 是ID选择器。extraDiv4应用背景图像seafloor.jpg（海底），绝对定位（positon: absolute）在body的左下角（left: 0; bottom: 0;）。position: absolute;left: 0;bottom: 0;z-index: -2;#extraDiv5 width: 633px;#extraDiv3 是ID选择器。extraDiv3应用背景图像sunlight.jpg（阳光），绝对定位（p

53、ositon: absolute）在body的左上角（left: 0; top: 0;）。由于它的z-index值是-1，大于#extraDiv1和#extraDiv2（z-index值是-2），所以阳光图像显示在水和水面的上方。height: 426px;background: url(images/coral.jpg);#extraDiv5 是ID选择器。extraDiv5应用背景图像coral.jpg（珊瑚），绝对定位（positon: absolute）在body的左下角（left: 0; bottom: 0;）。由于它的z-index值是-1，大于#extraDiv4（z-index

54、值是-2），所以珊瑚图像显示在海底图像的上方。position: absolute;left: 0;bottom: 0;z-index: -1;#extraDiv6 width: 180px;height: 80px;background: url(images/fish_top.gif);position: absolute;top: 220px;left: 20px;z-index: 1;#extraDiv7 width: 224px;height: 110px;background: url(images/fish_bottom.gif);position: absolute;botto

55、m: 500px;right: 100px;z-index: 1;.orange是类选择器。选择class=orange是元素。.orange color: #FF9600;5保存网页文件和样式表文件，预览网页，效果如下。实验五 应用背景图像一、实验目的1深入理解CSS盒模型。2掌握CSS背景（background）属性。3掌握设置背景图像位置的方法。4掌握使用背景图像替换文本的方法。5掌握使用背景图像制作圆角框的方法。二、实验内容1制作圆角框。2制作cssocean网页。三、操作步骤1制作圆角框。（1）将“实验五/圆角框”文件夹中的myweb1文件夹复制到D盘，并创建站点。（2）打开“01.html”文件，创建内部样式表，内容如下。内部样式表写在网页的<head></head>区域。<style type="text/css"><!-* margin: 0;padding: 0;body font: 0.75em/1.5 "宋体"margin: 20px 0px 0px 20px;a col