互联网与网站建设

1、 PAGE 1互联网与网站站建设实验指导书聊城大学传媒技技术学院2008年8月月实验指导书 PAGE 116传媒技术学院数字媒体艺术专业目录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 _To

2、c211737243 实验四 Fiireworrks切图网网页制作 PAGEREF _Toc211737243 h 24 HYPERLINK l _Toc211737244 实验五 XHHTML语言言网页制作 PAGEREF _Toc211737244 h 30 HYPERLINK l _Toc211737245 实验六 CSSS选择符 PAGEREF _Toc211737245 h 33 HYPERLINK l _Toc211737246 实验七 CSSS盒模型 PAGEREF _Toc211737246 h 37 HYPERLINK l _Toc211737247 实验八 CSSS两列浮动

3、动布局 PAGEREF _Toc211737247 h 41 HYPERLINK l _Toc211737248 实验九 CSSS三列浮动动布局 PAGEREF _Toc211737248 h 49 HYPERLINK l _Toc211737249 实验十 CSSS两列定位位布局 PAGEREF _Toc211737249 h 57 HYPERLINK l _Toc211737250 实验十一 CCSS三列定定位布局 PAGEREF _Toc211737250 h 61 HYPERLINK l _Toc211737251 实验十二 AAjax框架架在网页中的的应用 PAGEREF _Toc2

4、11737251 h 67 HYPERLINK l _Toc211737252 实验十三 网网页制作综合合训练 PAGEREF _Toc211737252 h 71实验一 简单单网页制作一、实验目的1熟悉Dreeamweaaver软件件的操作界面。2掌握建立本本地站点的方法。3掌握简单网网页制作方法法。4掌握超链接接的建立方法。5初步了解表表格布局方法法。6初步了解为为网页添加CCSS样式表表的方法。二、实验内容1创建“文学学小屋”站点。2制作“文学学小屋首页页” 网页。3制作“文学学小屋红舞舞鞋”网页。4制作“文学学小屋爱的的秘密”网页。5完成网页超超链接。6为网页添加加CSS样式式表。三、

5、操作步骤1创建“文学学小屋”站点（1）在硬盘根根目录下新建建文件夹，命命名为mysitee；（2）打开myysite文件件夹，在其中中建立子文件件夹，命名为为imagees；（3）将所有图图片素材复制制到imagges文件夹夹中；（4）启动Drreamweeaver，使使用“站点新建建站点”命令新建“文学小屋”站点，并指指定mysitee文件夹为“文学小屋”站点的本地地根文件夹。2制作“文学学小屋首页页”。（1）使用“文文件新建”命令新建网页页。（2）使用“文文件保存”命令保存网网页，命名为为indexx.htmll。（3）在文档工工具栏上设置置网页标题“文学小屋首页”。（4）使用“修修改页面

6、属属性”命令设置网网页背景颜色色为淡黄色。（5）在网页中中插入图片、文字、水平线、表格等对象，并在属性面板上设置对象属性。（6）保存网页页，按F12，预预览网页。3制作“文学学小屋红舞舞鞋”网页。（1）使用“文文件新建”命令新建网网页。（2）使用“文文件保存”命令保存网网页，命名为为dancee.htmll。（3）在文档工工具栏上设置置网页标题“文学小屋红舞鞋”。（4）插入taable1，11行2列，宽宽度760像像素。（5）选中taable1，在在属性面板上上设置其居中中对齐。（6）光标置于于tablee1的左列单元格中中，设置其宽宽度为2000像素。（7）在tabble1的左左、右单元格格

7、中分别插入图像像。（8）光标置于于tablee1之后，插插入tablle2，1行行3列，宽度度760像素素。（9）选中taable2，在属性面面板上设置其其居中对齐。（10）设置ttable22左、中、右右单元格的宽度度分别为150像素，460像素素，150像像素。（11）在taable2 的中列单元元格中输入文字，并设置文字属属性。（12）光标置置于tablle2之后，插插入tablle3，1行行1列，宽度度760像素素。（13）选中ttable33，在属性面面板上设置其其居中对齐。（14）光标置置于tablle3的单元元格中，设置置该单元格的的水平对齐方方式为右对齐齐。然后在其中中插入图像

8、。（16）光标置置于tablle3之后，插插入tablle4，1行行1列，宽度度760像素素。（17）选中ttable44，在属性面面板上设置其其居中对齐。（18）光标置置于tablle4的单元元格中，设置置该单元格的的水平对齐方方式为居中对对齐，并在其其中插入文字字“返回”。（19）保存网网页，按F112，预览网网页。4制作“文学学小屋爱的的秘密”网页。（1）使用“文文件新建”命令新建网网页。（2）使用“文文件保存”命令保存网网页，命名为为love.html。（3）在文档工工具栏上设置置网页标题“文学小屋爱的秘密”。（4）使用“修修改页面属属性”命令设置网网页背景图像像为loveebg.jp

9、pg。（5）插入taable1，1行2列，宽度7760像素。（6）设置taable1左列单元格的的宽度为1110像素。（7）光标置于于tablee1的右列单元格中中，设置该单单元格的垂直直对齐方式为为“顶端”。（8）在tabble1中嵌嵌套表格taable2，11行1列，宽宽度100%，高度800像素。在其其中输入文字, 并设设置文字属性性。（9）将光标置置于tablle2之后，插插入嵌套表格格tablee3，1行22列，宽度1100%。，设置tablle3的两个个单元格的垂垂直对齐方式式为“顶端”。然后在其中中插入图像和和文字。（10）将光标标置于tabble3之后后，插入嵌套套表格tabb

10、le4，11行2列，宽宽度100%。设置taable4的的两个单元格格的垂直对齐齐方式为“顶端”，右列单元格的水水平对齐方式式为“右对齐”，然后插入图图像和文字。（11）将光标标置于tabble4之后后，插入嵌套套表格tabble5，11行1列，宽宽度100%。设置taable5的的单元格的水水平对齐方式式为“居中对齐”，在其中输输入文字“返回”。（12）保存网网页，按F112，预览网网页。5建立超链接接（1）建立首页页与“红舞鞋”、“爱的秘密”网页之间的超链接接；（2）在“首页页”上选中“榕树下”网站Loggo，建立到到“榕树下”网站的超链接；（4）在“首页页”上选中“信鸽”图像，建立电电子

11、邮件地址址链接。6为网页添加加CSS样式式表（1）打开“iindex.html”文件。（2）单击“CCSS”面板上的“新建CSSS规则”按钮。（3）在“新建建CSS规则则”对话框中设设置选择器类类型为“标签”，标签为“body”，定义在“新建样式表表文件”，单击“确定”按钮。（4）将CSSS文件保存在在stylee文件夹中，命命名为bassic.csss。（5）定义字体体为宋体，0.775字体高（eem），1.5倍行高高。单击“确定”。（6）保存文件件，按F122预览，网页页文字小而精精致，增加了了行高。（7）新建CSSS规则。设设置选择器类类型为“高级”，选择器为为“a:linnk”，定义在

12、“basicc.css”文件中，单单击“确定”按钮。（8）定义a:link的的样式为，文文字黑色，修修饰“无”。（9）新建CSSS规则。设设置选择器类类型为“高级”，选择器为为“a:vissited”，定义在“basicc.css”文件中，单单击“确定”按钮。（10）定义aa:visiited的样样式为，文字字黑色，修饰饰“无”。（11）新建CCSS规则。设设置选择器类类型为“高级”，选择器为为“a:hovver”，定义在“basicc.css”文件中，单单击“确定”按钮。（12）定义aa:hoveer的样式为为，文字红色色，修饰“下划线”。（13）新建CCSS规则。设设置选择器类类型为“高级

13、”，选择器为为“a:acttive”，定义在“basicc.css”文件中，单单击“确定”按钮。（14）定义aa:actiive的样式式为，文字红红色，修饰“下划线”。（15）保存文文件，按F112预览，网网页上的超链链接黑色，无无下划线。当当鼠标经过超超链接时，文文字红色，有有下划线。（16）关闭“indexx.htmll”和“basicc.css”文件。（17）打开“love.hhtml”文件。（18）单击“CSS”面板上的“附加样式表表”按钮。（19）为“llove.hhtml”文件链接外外部样式表“basicc.css”。（20）保存文文件，按F112预览，网网页上的文字字小而精，增增

14、加了行高。网页上的超链接黑色，无下划线。当鼠标经过超链接时，文字红色，有下划线。四、实验要求及及注意事项1从 HYPERLINK ftp:/2100.44.1122.2553 ftp:/2100.44.1122.2553服务器下下载素材。2认真完成全全部实验内容容。3先建立站点点，再制作网网页。4表格布局时时，表格的边边框、填充、边边距全部为00。5设置CSSS时，首先设设置Dreaamweavver的CSSS代码为速速记。实验二 多媒媒体网页制作作一、实验目的掌握在网页中插插入各种多媒媒体元素的方方法。二、实验内容1在网页中嵌嵌入Mediia Plaayer播放放器。2在网页中嵌嵌入Real

15、lPlayeer播放器。3在网页中插插入背景音乐乐。4在网页中插插入flassh动画。5在网页中嵌嵌入图片播放放器。6在网页中嵌嵌入flv播播放器。三、操作步骤1创建“多媒媒体”站点。（1）在硬盘根根目录下新建建文件夹，命命名为mywweb。（2）将imaages、mmedia、bbcastrr、vcasstr四个文文件夹复制到到mywebb文件夹中，其其中imagges是图片片文件夹，mmedia是是多媒体文件件夹，bcaastr是图图片播放器文文件夹，vccastr是是flv播放放器文件夹。（3）启动Drreamweeaver，使使用“站点新建建站点”命令新建“多媒体”站点，并指指定myw

16、eeb文件夹为为“多媒体”站点的本地地根文件夹。2在网页中嵌嵌入Mediia Plaayer播放放器新建网页，保存存网页为0001.httm。在网页页中插入AcctiveXX，在属性面面板上设置CClassIID为clssid:222D6F3112-B0FF6-11DD0-94AAB-00880C74CC7E95，宽宽320像素素，高2400像素，参数数设置如图所所示。3在网页中嵌嵌入ReallPlayeer播放器新建网页，保存存网页为0002.htmm。在网页中中插入ActtiveX，在在属性面板上上设置ClaassID为为clsidd:CFCDDAA03-8BE4-11cf-B84B-00

17、20AAFBBCCCFA，宽3320像素，高高280像素素，参数设置置如图所示。4在网页中插插入背景音乐乐新建网页，保存存网页为0003.htmm。在网页中中插入，在弹弹出的选择文文件对话框中中选择meddia/loovemedd.mid。插插件的参数设设置如图所示示。5在网页中插插入flassh动画新建网页，保存存网页为0004.htmm。在网页中中插入flaash动画mmedia/yuediing.swwf。6在网页中嵌嵌入图片播放放器。（1）新建网页页，保存网页页为005.htm。在在网页中插入入图片播放器器bcasttr/bcaastr4.swf。（2）在属性面面板上设置播播放器宽40

18、00像素，高高300像素素。（3）切换到代代码窗口，设设置XML文文件的路径。 embeed srcc=bcaastr/bbcastrr4.swff?xml=bcasttr/bcaastr.xxml（4）打开bccastr.xml文件件，在其中设设置图片的路路径。immages/imagee1.giff学科科建设immages/imagee2.giff人才才培养immages/imagee3.giff校园园环境7在网页中嵌嵌入flv播播放器。（1）新建网页页，保存网页页为006.htm。在在网页中插入入图片播放器器vcasttr/vcaastr3.swf。（2）在属性面面板上设置播播放器宽55

19、50像素，高高400像素素。（3）设置参数数如下：（4）打开vccastr.xml文件件，在其中设设置flv视视频文件的路路径。./meddia/011.flv你和和我./meddia/022.flv飞人人大赛8制作“岁月月留声”网页，并实实现歌曲点播播。主要步骤：（1）新建网页页，保存网页页为007.htm。设设置网页背景景图像，并在在网页中插入入图像、表格格及文字。（2）在网页中中插入ActtiveX，在在属性面板上上设置ClaassID为为clsidd:22D66F312-B0F6-11D0-94AB-0080CC74C7EE95，宽3320像素，高高28像素。为为播放器加入入id标识p

20、playerr。（3）在网页中中插入表格，填填写歌曲名称称，并设置超超链接：偏偏喜欢欢你后后来（4）加入在之间加加入javaascrippt，实现歌歌曲点播。functioon mussicplaay(namme) if (naame=) reeturn; filenaame = name; playerr.Canccel() playerr.Openn(fileename)四、实验要求及及注意事项1从 HYPERLINK ftp:/2100.44.1122.2553 ftp:/2100.44.1122.2553服务器下下载素材。2认真完成全全部实验内容容。3先建立站点点，再制作网网页。4播放

21、器对象象的classsid从cclsid开开始填写。实验三 表格格布局网页制制作一、实验目的1掌握在Fiireworrks中提取取图像、提取取尺寸、提取取颜色的方法法。2掌握使用表表格布局网页页的方法。二、实验内容制作“北京大学学首页”网页。三、操作步骤1新建文件夹夹，命名为“beidaa”，在其中创创建“imagees”子文件夹。2启动Firreworkks，使用切切片工具提取取需要的图像像，并导出到到imagees文件夹中中。需要提取以下图图像切片在网页中的作用用命名body的背景景mainbg.gif网站logologo.giif导航条左圆角navleftt.gif导航条右圆角navri

22、ghht.giff图片bjdx.giif栏目图片news.giif栏目图片notice.gif栏目图片hot.giff箭头arrow.ggif箭头arrow2.gif圆角栏图片1box_topp.gif圆角栏图片2box_bg.gif圆角栏图片3box_botttom.ggif3 将“bccasrt” 文件夹复复制到“beidaa”文件夹中。4启动Dreeamweaaver，创创建“北京大学”站点，本地地目录为“beidaa”文件夹。5新建网页，保保存为inddex.httml。6设置网页标标题：北京大大学欢迎你。7单击“CSSS”面板上的“新建CSSS规则”按钮。在“新建CSSS规则”对话框

23、中设设置选择器类类型为“标签”，标签为“body”，定义在“新建样式表表文件”，单击“确定”按钮。将CCSS文件保保存在styyle文件夹夹中，命名为为basicc.css。bbody的CCSS样式定定义如图：8插入第一个个表格，9885像素，居居中对齐。其其中嵌套表格格。310像素宽1行3列280像素宽1行3列280像素宽1行9列660像素宽1行9列660像素宽9继续插入表表格，9855像素，居中中对齐。其中中嵌套表格。305像素宽427像素宽460像素宽427像素宽3行1列190像素宽3行1列3行1列190像素宽3行1列180像素宽10继续插入入表格，9885像素，居居中对齐。11切换到代

24、代码窗口，为为导航条表格格添加唯一标标识。12定义超链链接的CSSS样式。body font: 0.75eem 宋体体;marginn: 0pxx;paddinng: 0ppx;backgrround: url(./immages/mainbbg.giff) reppeat-xx;a color: #0022b5e;text-ddecoraation: nonee;a:hoverr color: #ff00000;text-ddecoraation: nonee;#nav a color: #FFFFFFF;text-ddecoraation: nonee;#nav a:hoverr colo

25、r: #FF00000;text-ddecoraation: nonee;.borderrrightt borderr-righht: 1ppx sollid #CCCCCCCC;.dotlinne borderr-botttom: 11px daashed #CCCCCCC;13应用类样样式（1）将.boorderrright样样式应用于第第二个大表格格的中间单元元格。（2）将.dootlinee样式应用于于新闻列表和和通知列表的的所有单元格格。四、实验要求及及注意事项1从 HYPERLINK ftp:/2100.44.1122.2553 ftp:/2100.44.1122.2553服务器下

26、下载素材。2先建立站点点，再制作网网页。3表格布局时时，表格的边边框、填充、边边距全部为00。4网页制作过过程中，以自自己处理的切切图素材的尺尺寸为准。5设置CSSS时，首先设设置Dreaamweavver的CSSS代码为速速记。实验四 Fiireworrks切图网网页制作一、实验目的1掌握Firreworkks切图并导导出网页的方方法。2掌握在Drreamweeaver中中编辑切图网网页的方法。二、实验内容1使用Firreworkks切图并导导出“清华大学”首页。2使用Firreworkks切图并导导出单元格背背景图。3在Dreaamweavver中编辑辑“清华大学”首页。4为网页添加加CS

27、S样式式表。三、操作步骤1使用Firreworkks切图并导导出“清华大学”首页。（1）启动Fiireworrks，打开开“qinghhua.pnng”文件。（2）使用切图图工具进行切切图。（3）在“优化化”面板上设置置切片导出格格式为“JPEG较高品质”。（4）选中切片片3，在属性性面板上设置置切片导出格格式为“GIF最适适合256”。（5）选中切片片9，在属性性面板上设置置切片导出格格式为“GIF最适适合256”。（6）选择“文文件HTMML设置”命令，做以以下设置。（7）选择“文文件导出”命令，在“导出”对话框中做做以下设置。2使用Firreworkks切图并导导出单元格背背景图。（1）

28、删除切片片4，设置视视图缩放比例例为“200%”，在“学校概况”后面的空白白区域做一个个小切片。（2）在该切片片上右击，选选择“导出所选切切片”命令。将该该切片命名为为“bg1”，并保存在在“imagees”文件夹中。（3）用相同方方法导出“bg2”。3在Dreaamweavver中编辑辑“清华大学”首页。（1）在Dreeamweaaver中打打开indeex.htmml。新建CCSS样式，定义在在“新建样式表表文件”，命名为bbasic.css。定定义bodyy的CSS样样式：body font: 0.75eem/1.55 宋体;backgrround-colorr: #FFFFFFF;ma

29、rgin: 0px;paddinng: 0ppx;（2）删除图像像indexx_2.jppg，同时设设置该单元格格宽度为6115像素，水水平对齐方式式为“右对齐”，垂直对齐齐方式为“底部”。背景颜色色白色。（3）在该单元元格中插入11行2列表格格，宽度2550像素，填填充10像素素。输入文字字。（4）删除图像像indexx_4.jppg，同时设设置该单元格格宽度为5882像素，背背景图像为“bg1.jjpg”。（5）在该单元元格中插入11行7列表格格，宽度1000%，边框框0，填充00，间距0。输输入文字。（6）用相同方方法制作第二二个导航条。（7）删除图像像indexx_7.jppg，同时设

30、设置该单元格格宽度为3669像素，背背景颜色为#DFDFDDF。（8）删除图像像indexx_8.jppg，同时设设置该单元格格宽度为4881像素，高高度132像像素，背景颜颜色为#DFFDFDF。（9）在该单元元格中插入表表格，6行22列，宽度4420像素，填填充0，间距距2，边框00。合并第一一列单元格。输输入文字。（10）删除图图像indeex_9.jjpg，同时时设置该单元元格宽度为4418像素，背背景图像为“indexx_9.jppg”。（11）在该单单元格中插入入表单，并在在表单中插入入文本框，输输入文字。（12）删除图图像indeex_12.jpg，同同时设置该单单元格宽度为为5

31、82像素素。在其中嵌嵌套一行2列列表格，输入入文字。（13）选中图图像indeex_13.jpg，使使用属性面板板上的矩形热热点工具，制制作热点超链链接。4为网页添加加CSS样式式表a color: #0000000;text-ddecoraation: nonee;a:hoverr color: #FF00000;text-ddecoraation: undeerlinee;form marginn: 0pxx;.navtd borderr-righht: 1ppx sollid #00000000;四、实验要求及及注意事项1从 HYPERLINK ftp:/2100.44.1122.255

32、3 ftp:/2100.44.1122.2553服务器下下载素材。2先建立站点点，再制作网网页。3在Fireeworkss中切图时，先先利用标尺添添加辅助线。4网页制作过过程中，以自自己处理的切切图素材的尺尺寸为准。5设置CSSS时，首先设设置Dreaamweavver的CSSS代码为速速记。实验五 XHHTML语言言网页制作一、实验目的1掌握XHTTML 语法法。2掌握XHTTML 文档档类型声明。3掌握XHTTML 标记记及属性。二、实验内容制作“webqquest/articcle01.html”网页。三、操作步骤1创建“weebquesst”站点。2新建网页，保存为为articcle0

33、1.html。3切换到代码码窗口，从“文本.txxt”中复制文字字，粘贴到中。4按照网页内内容的语义修修改XHTMML代码。惟惟存教育探究学习返回回首页如何构构建高效的 webquuest杨淑莲 华南师范大大学教育技术术研究所一、什什么是 WeebQuesstWebQQuest 是美国的评价、结结论六个基本本模块贯串在在一起，形成成一个完整的的教学体系。二、 WebQuuest 具具体的构建过过程（一）选选择合适的主主题图1选择择学习任务WebQQuest 仅仅是教学学方式中的一一种，才能有助助于学习者发发现问题，并并激活知识储储备。（二）任任务在设计任任务时要结合合以下原则确确定任务：科学性

34、性、知识性：体现教学目目标。趣味性性：引发学习习者探索的积积极性。可操作作性：任务要要具体，一般般要形成一定定的产品。开放性性：任务完成成可以采取不不同的途径，任任务解决没有有固定答案。伸缩性性：可以把任任务分为的学生。（三）评评价WebQQuest 通常采用表现为书书面作业、学学生的作品、创创作的网页或或其他内容。评评价对象起起步发发展中完完成参与讨讨论&nbbsp;&nbbsp;&nbbsp;网上搜搜集资料&nbbsp;&nbbsp;&nbbsp;作品创创作&nbbsp;&nbbsp;&nbbsp;Copyyrightt©y;BEINNG., Beingg Lab. All Rig

35、htts Resservedd版权所有有 惟存教育育实验室实验六 CSSS选择符一、实验目的1掌握CSSS的基本语法法规则。2掌握CSSS的常用选择择符。3掌握在网页页上应用CSSS的方法。4掌握使用DDreamwweaverr定义CSSS的方法。二、实验内容1使用标记定定义“webquuest/aarticlle01.hhtml”网页的逻辑辑结构。2使用CSSS控制“webquuest/aarticlle01.hhtml”网页的样式式。3使用标记定定义“webquuest/aarticlle02.hhtml”网页的逻辑辑结构，并为为该网页链接接外部CSS样式表表。三、操作步骤1创建“weeb

36、quesst”站点。2打开artticle001.htmml，使用标标记定义网页页的逻辑结构构。返回回首页如何构构建高效的 webquuest杨淑莲 华南师范大大学教育技术术研究所图图1选择学学习任务Copyyrightt©y;BEINNG., Beingg Lab. All Rightts Resservedd版权所有有 惟存教育育实验室3使用CSSS控制网页的的表现。* marginn: 0pxx;paddinng: 0ppx;body font: 0.75eem/1.77 宋体;backgrround: #E0EE0E0 uurl(immages/mygrdd.gif);text

37、-aalign: centter;#contaiiner marginn: autto;width: 760ppx;text-aalign: leftt;positiion: rrelatiive;#headerrpaddinng: 200px 0 10px 5px;borderr-botttom: 55px soolid #6666666;h1 font-ssize: 110%;#headerr p.gooback positiion: aabsoluute;right: 10pxx;top: 225px;#contennt paddinng: 300px;h2 font-ssize: 18

38、0%;text-aalign: centter;marginn-botttom: 00.5em;h3 font-ssize: 130%;color: #6600000;h4 font-ssize: 110%;h3, h4 marginn: 0.55em 0;#contennt p text-iindentt: 2emm;#pic float: righht;text-aalign: centter;marginn-botttom: 110px;#pic immg displaay: bllock;ul marginn-leftt: 3emm;table width: 400ppx;margin

39、n: 0.55em auuto;borderr-colllapse:collaapse;td, th paddinng: 5ppx;borderr: 1pxx soliid #0000000;#footerr text-aalign: centter;paddinng: 200px 0ppx;borderr-top: 1px solidd #6666666;#contennt p.aauthorr text-iindentt: 0;text-aalign: centter;a color: #0000000;text-ddecoraation: nonee;a:hoverr color: #0

40、000000;text-ddecoraation:underrline;4使用标记定定义“webquuest/aarticlle02.hhtml”网页的逻辑辑结构，并为为该网页链接接外部CSS样式表表。实验七 CSSS盒模型一、实验目的1深入理解CCSS盒模型型及其属性。2熟练掌握CCSS属性的的定义方法。二、实验内容制作”悠然我思思”网站。三、操作步骤1创建“悠然然我思”站点。2打开inddex.httml，定义义其逻辑结构构。悠悠然我思月光光诗集旖旎信箱箱：moonnlilii.cc版权所有有©y;旖旎 11999 3使用CSSS控制“首页”的样式。新建建CSS样式式表，保存在在s

41、tylee文件夹中，命命名为styyle_hoomepagge.csss，其内容如如下：body font: 0.75eem/1.55 宋体;color: #deee3c1;backgrround: #1344113 uurl(./imagges/bgg_bodyy.jpg);text-aalign: centter;paddinng: 300px 0ppx;marginn: 0pxx;#contaiiner width: 750ppx;marginn: autto;backgrround: url(./immages/bg_coontainner.jppg);text-aalign: lef

42、tt;#headerr heightt: 80ppx;paddinng: 1550px 00px 0ppx 3000px;backgrround: url(./immages/bg_heeader.jpg) no-reepeat left top;font-ssize: 300%;#contennt paddinng: 0ppx 1000px 300px 1000px;#contennt h2 font-ssize: 130%;#contennt p paddinng-botttom: 50px;backgrround: url(./immages/bg_diivide.jpg) no-ree

43、peat centeer botttom;#footerr heightt: 1288px;paddinng-topp: 30ppx;backgrround: url(./immages/bg_foooter.jpg) no-reepeat left bottoom;text-aalign: centter;a color: #deee3c1;text-ddecoraation: nonee;a:hoverr text-ddecoraation: undeerlinee;4定义“zhhenxi.html”网页结构。 永远的夏夏娃珍惜 我曾经那那么 学学会好好爱爱我 作者：旖旎旎（moonnli

44、lii.cc） 下下一首 返回回5使用CSSS定义“zhenxxi.htmml”网页的样式式。新建CSSS样式表，保保存在styyle文件夹夹中，命名为为stylee_zhennxi.csss，其内容容如下：body font: 0.75eem/1.55 宋体;backgrround: url(./immages/bg_zhhenxi.jpg);color: #00FFFFF;text-aalign: centter;paddinng: 200px 0;#contaiiner width: 290ppx;paddingg-leftt: 3600px;margin: autoo;backgrro

45、und: url(./immages/zhenxxi.jpgg) no-repeaat lefft topp;text-allign: left;a color: #c6cc78c;text-ddecoraation: nonee;a:hoverr text-ddecoraation: undeerlinee;.title color: #FFFFFFF;.authorr color: #c6cc78c;6使用相似的的方法，定义义“qinshheng.hhtml”网页的逻辑结构和CSSS样式。四、实验要求及及注意事项1从 HYPERLINK ftp:/2100.44.1122.2553 ftp

46、:/2100.44.1122.2553服务器下下载素材。2认真完成全全部实验内容容。3先建立站点点，再制作网网页。4设置CSSS时，首先设设置Dreaamweavver的CSSS代码为速速记。实验八 CSSS两列浮动动布局一、实验目的1掌握两列布布局网页的典典型逻辑结构构。2熟练掌握CCSS两列浮浮动布局的方方法。二、实验内容制作csszeengardden网站的1633号作品。三、操作步骤1创建1633站点。2打开inddex.httml，定义义其逻辑结构构。ccss Zeen GarrdenTThe Beeauty of CSSS DessignAA demoonstraation of

47、whhat caan be accommplishhed viisuallly thrrough CSS-bbased desiggn. Seelect any sstyle sheett fromm the list to looad itt intoo thiss pagee.DDownlooad thhe sammple htmml fille and csss filleThe RRoad tto EnllighteenmenttLLitterring aa darkk and drearry roaad layy the past reliccs of browsser-sppeci

48、fiic taggs, inncompaatiblee DOMss, andd brokken CSSS suppport.So Whhat iss Thiss Abouut?TThere is cllearlyy a neeed foor CSSS to bbe takken seerioussly byy grapphic aartistts. PartiicipattionGGraphiic arttists only pleasse. BeneffitsWWhy paarticiipate? RequiiremenntsWWe wouuld liike too see as muuch

49、 CSSS1 ass posssible.Selecct a DDesignn:A Walk in thhe Garrden byy SSimon Van HHauwerrmeireensspringg360 byy RRene HHorniggArchiives:neext deesignssVView AAll DeesignssResouurces:VView TThis DDesignns CSSSCCSS Reesourccesxxhtml &; ccss &nbbsp; ccc &nbssp;5508 &nbbsp;aaaa3使用CSSS控制网页的的样式。新建建CSS样式式表，保存

50、在在stylee文件夹中，命命名为styyle.csss，其内容容如下：* paddinng: 0;marginn: 0;body fontt: 0.77em/1.5 Tahhoma, Ariall, Hellveticca, saans-seerif;color: #5666047; backkgrounnd: #FFBFBE55 url(imagees/graass.giif) riight bbottomm fixeed no-repeaat;text-aalign: centter;p marrgin: 1em 00;a collor: #5660447; texxt-deccorat

51、iion: uunderlline;a:hoverr texxt-deccoratiion: nnone;/* conttainerr */#contaiiner widdth: 7760px; marrgin: auto; texxt-aliign: lleft; bacckgrouund: #FBFBEE5 urll(imagges/coontainner_bgg.gif) repeeat-y left top;positiion: rrelatiive;/* headder annd summmary */#headerr heiight: 300pxx; bacckgrouund: #

52、8C97777 url(imagees/heaader_bbg.jpgg) no-repeaat lefft topp;h1, h2text-iindentt: -99999px;#summarry .p11 widtth: 4775px;positiion: aabsoluute; top: 65pxx; leftt: 40ppx; fontt-weigght: bbold; coloor: #FFBFBE55;#summarry .p22positiion: aabsoluute;top: 2245px; leftt: 5300px;color: #5666047;/* conttent

53、*/#contennt width: 445ppx;float: righht;marginn-righht: 500px;displaay: innline; /*修复复IE双边距距bug*/marginn-top: -30ppx; paddding-bbottomm: 40ppx;#contennt h3 heigght: 332px; bordder-boottom: 1px solidd #7D88965;marginn-botttom: 00.8em;#preambble h33 backkgrounnd: urrl(imaages/hh3_preeamblee.gif) no-rr

54、epeatt leftt top;text-iindentt: -99999px;#explannationn h3 backkgrounnd: urrl(imaages/hh3_expplanattion.ggif) nno-reppeat lleft ttop;text-iindentt: -99999px;#particcipatiion h33 backkgrounnd: urrl(imaages/hh3_parrticippationn.gif) no-rrepeatt leftt top;text-iindentt: -99999px;#benefiits h33 backkgro

55、unnd: urrl(imaages/hh3_bennefitss.gif) no-rrepeatt leftt top;text-iindentt: -99999px;#requirrementts h3 backkgrounnd: urrl(imaages/hh3_reqquiremments.gif) no-reepeat left top;text-iindentt: -99999px;/* linkk listt */#linkLiist widtth: 1338px; floaat: leeft; marggin-leeft: 660px;displaay: innline; /*

56、修复IE双双边距bugg*/#linkLiist h33 heigght: 224px;borderr-botttom: 11px soolid #7D89665;marginn:1.5eem 0 00.5em 0; #selectt h3 marginn-top: 0; backkgrounnd: urrl(imaages/hh3_sellect.ggif) nno-reppeat lleft ttop;text-iindentt: -99999px;#archivves h33 backkgrounnd: urrl(imaages/hh3_arcchivess.gif) no-rrepea

57、tt leftt top;text-iindentt: -99999px;#resourrces hh3 backkgrounnd: urrl(imaages/hh3_ressourcees.giff) no-repeaat lefft topp;text-iindentt: -99999px;#linkLiist ull lisst-styyle: nnone;#linkLiist lii marrgin: 0.7emm 0; collor: #8C97777;#linkLiist a fonnt-weiight: bold; collor: #8C97777;#selectt ul lli

58、 paddiing-leeft: 220px; bacckgrouund: uurl(immages/selecct_a_bbg.giff) no-repeaat lefft topp;#selectt a dissplay: blocck;#selectt a.c dissplay: inliine; fonnt-weiight: normaal; texxt-deccoratiion: nnone;/* footter */#footerr clear: bothh; heiight: 130pxx; paddding: 20pxx 50pxx 0 0; texxt-aliign: rri

59、ght; bacckgrouund: #FBFBEE5 urll(imagges/foooter_bg.jppg) noo-repeeat leeft ceenter;四、实验要求及及注意事项1从 HYPERLINK ftp:/2100.44.1122.2553 ftp:/2100.44.1122.2553服务器下下载素材。2认真完成全全部实验内容容。3先建立站点点，再制作网网页。4设置CSSS时，首先设设置Dreaamweavver的CSSS代码为速速记。实验九 CSSS三列浮动动布局一、实验目的1掌握三列布布局网页的典典型逻辑结构构。2熟练掌握CCSS三列浮动布局局的方法。二、实验内容制作

60、csszeengardden网站的的193号作品。三、操作步骤1创建1933站点。2打开inddex.httml，定义义其逻辑结构构。ccss Zeen GarrdenTThe Beeauty of CSSS DessignAA demoonstraation of whhat caan be accommplishhed viisuallly thrrough CSS-bbased desiggn. Seelect any sstyle sheett fromm the list to looad itt intoo thiss pagee.DDownlooad thhe sammple h