互联网与网站建设

1《互联网与网站建设》实验指导书聊城大学传媒技术学院2008年8月实验指导书传媒技术学院数字媒体艺术专业2目录实验一简单网页制作............................................3实验二多媒体网页制作.........................................15实验三表格布局网页制作.......................................20实验四Fireworks切图网页制作.................................24实验五XHTML语言网页制作.....................................30实验六CSS选择符.............................................33实验七CSS盒模型.............................................37实验八CSS两列浮动布局.......................................41实验九CSS三列浮动布局.......................................49实验十CSS两列定位布局.......................................57实验十一CSS三列定位布局.....................................61实验十二Ajax框架在网页中的应用..............................67实验十三网页制作综合训练.....................................71实验指导书传媒技术学院数字媒体艺术专业3实验一简单网页制作一、实验目的1．熟悉Dreamweaver软件的操作界面。2．掌握建立本地站点的方法。3．掌握简单网页制作方法。4．掌握超链接的建立方法。5．初步了解表格布局方法。6．初步了解为网页添加CSS样式表的方法。二、实验内容1．创建“文学小屋”站点。2．制作“文学小屋－首页”网页。3．制作“文学小屋－红舞鞋”网页。4．制作“文学小屋－爱的秘密”网页。5．完成网页超链接。6．为网页添加CSS样式表。三、操作步骤1．创建“文学小屋”站点（1）在硬盘根目录下新建文件夹，命名为mysite；（2）打开mysite文件夹，在其中建立子文件夹，命名为images；（3）将所有图片素材复制到images文件夹中；（4）启动Dreamweaver，使用“站点｜新建站点”命令新建“文学小屋”站点，并指定mysite文件夹为“文学小屋”站点的本地根文件夹。2．制作“文学小屋－首页”。（1）使用“文件｜新建”命令新建网页。（2）使用“文件｜保存”命令保存网页，命名为index.html。（3）在文档工具栏上设置网页标题“文学小屋－首页”。实验指导书传媒技术学院数字媒体艺术专业4（4）使用“修改｜页面属性”命令设置网页背景颜色为淡黄色。（5）在网页中插入图片、文字、水平线、表格等对象，并在属性面板上设置对象属性。（6）保存网页，按F12，预览网页。3．制作“文学小屋－红舞鞋”网页。（1）使用“文件｜新建”命令新建网页。（2）使用“文件｜保存”命令保存网页，命名为dance.html。（3）在文档工具栏上设置网页标题“文学小屋－红舞鞋”。（4）插入table1，1行2列，宽度760像素。（5）选中table1，在属性面板上设置其居中对齐。实验指导书传媒技术学院数字媒体艺术专业5（6）光标置于table1的左列单元格中，设置其宽度为200像素。（7）在table1的左、右单元格中分别插入图像。（8）光标置于table1之后，插入table2，1行3列，宽度760像素。（9）选中table2，在属性面板上设置其居中对齐。（10）设置table2左、中、右单元格的宽度分别为150像素，460像素，150像素。（11）在table2的中列单元格中输入文字，并设置文字属性。（12）光标置于table2之后，插入table3，1行1列，宽度760像素。（13）选中table3，在属性面板上设置其居中对齐。（14）光标置于table3的单元格中，设置该单元格的水平对齐方式为右对齐。然后在其中插入图像。实验指导书传媒技术学院数字媒体艺术专业6（16）光标置于table3之后，插入table4，1行1列，宽度760像素。（17）选中table4，在属性面板上设置其居中对齐。（18）光标置于table4的单元格中，设置该单元格的水平对齐方式为居中对齐，并在其中插入文字“返回”。（19）保存网页，按F12，预览网页。4．制作“文学小屋－爱的秘密”网页。（1）使用“文件｜新建”命令新建网页。（2）使用“文件｜保存”命令保存网页，命名为love.html。（3）在文档工具栏上设置网页标题“文学小屋－爱的秘密”。（4）使用“修改｜页面属性”命令设置网页背景图像为lovebg.jpg。（5）插入table1，1行2列，宽度760像素。实验指导书传媒技术学院数字媒体艺术专业7（6）设置table1左列单元格的宽度为110像素。（7）光标置于table1的右列单元格中，设置该单元格的垂直对齐方式为“顶端”。（8）在table1中嵌套表格table2，1行1列，宽度100%，高度80像素。在其中输入文字,并设置文字属性。（9）将光标置于table2之后，插入嵌套表格table3，1行2列，宽度100%。，设置table3的两个单元格的垂直对齐方式为“顶端”。然后在其中插入图像和文字。（10）将光标置于table3之后，插入嵌套表格table4，1行2列，宽度100%。设置table4的两个单元格的垂直对齐方式为“顶端”，右列单元格的水平对齐方式为“右对齐”，然后插入图像和文字。实验指导书传媒技术学院数字媒体艺术专业8（11）将光标置于table4之后，插入嵌套表格table5，1行1列，宽度100%。设置table5的单元格的水平对齐方式为“居中对齐”，在其中输入文字“返回”。（12）保存网页，按F12，预览网页。5．建立超链接（1）建立首页与“红舞鞋”、“爱的秘密”网页之间的超链接；（2）在“首页”上选中“榕树下”网站Logo，建立到“榕树下”网站的超链接；（4）在“首页”上选中“信鸽”图像，建立电子邮件地址链接。实验指导书传媒技术学院数字媒体艺术专业96．为网页添加CSS样式表（1）打开“index.html”文件。（2）单击“CSS”面板上的“新建CSS规则”按钮。（3）在“新建CSS规则”对话框中设置选择器类型为“标签”，标签为“body”，定义在“新建样式表文件”，单击“确定”按钮。（4）将CSS文件保存在style文件夹中，命名为basic.css。实验指导书传媒技术学院数字媒体艺术专业10（5）定义字体为宋体，0.75字体高（em），1.5倍行高。单击“确定”。（6）保存文件，按F12预览，网页文字小而精致，增加了行高。（7）新建CSS规则。设置选择器类型为“高级”，选择器为“a:link”，定义在“basic.css”文件中，单击“确定”按钮。实验指导书传媒技术学院数字媒体艺术专业11（8）定义a:link的样式为，文字黑色，修饰“无”。（9）新建CSS规则。设置选择器类型为“高级”，选择器为“a:visited”，定义在“basic.css”文件中，单击“确定”按钮。（10）定义a:visited的样式为，文字黑色，修饰“无”。（11）新建CSS规则。设置选择器类型为“高级”，选择器为“a:hover”，实验指导书传媒技术学院数字媒体艺术专业12定义在“basic.css”文件中，单击“确定”按钮。（12）定义a:hover的样式为，文字红色，修饰“下划线”。（13）新建CSS规则。设置选择器类型为“高级”，选择器为“a:active”，定义在“basic.css”文件中，单击“确定”按钮。（14）定义a:active的样式为，文字红色，修饰“下划线”。实验指导书传媒技术学院数字媒体艺术专业13（15）保存文件，按F12预览，网页上的超链接黑色，无下划线。当鼠标经过超链接时，文字红色，有下划线。（16）关闭“index.html”和“basic.css”文件。（17）打开“love.html”文件。（18）单击“CSS”面板上的“附加样式表”按钮。（19）为“love.html”文件链接外部样式表“basic.css”。实验指导书传媒技术学院数字媒体艺术专业14（20）保存文件，按F12预览，网页上的文字小而精，增加了行高。网页上的超链接黑色，无下划线。当鼠标经过超链接时，文字红色，有下划线。四、实验要求及注意事项1．从ftp://210.44.122.253服务器下载素材。2．认真完成全部实验内容。3．先建立站点，再制作网页。4．表格布局时，表格的边框、填充、边距全部为0。5．设置CSS时，首先设置Dreamweaver的CSS代码为速记。实验指导书传媒技术学院数字媒体艺术专业15实验二多媒体网页制作一、实验目的掌握在网页中插入各种多媒体元素的方法。二、实验内容1．在网页中嵌入MediaPlayer播放器。2．在网页中嵌入RealPlayer播放器。3．在网页中插入背景音乐。4．在网页中插入flash动画。5．在网页中嵌入图片播放器。6．在网页中嵌入flv播放器。三、操作步骤1．创建“多媒体”站点。（1）在硬盘根目录下新建文件夹，命名为myweb。（2）将images、media、bcastr、vcastr四个文件夹复制到myweb文件夹中，其中images是图片文件夹，media是多媒体文件夹，bcastr是图片播放器文件夹，vcastr是flv播放器文件夹。（3）启动Dreamweaver，使用“站点｜新建站点”命令新建“多媒体”站点，并指定myweb文件夹为“多媒体”站点的本地根文件夹。2．在网页中嵌入MediaPlayer播放器新建网页，保存网页为001..htm。在网页中插入ActiveX，在属性面板上设置ClassID为clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95，宽320像素，高240像素，参数设置如图所示。实验指导书传媒技术学院数字媒体艺术专业163．在网页中嵌入RealPlayer播放器新建网页，保存网页为002.htm。在网页中插入ActiveX，在属性面板上设置ClassID为clsid:CFCDAA03-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）切换到代码窗口，设置XML文件的路径。paramname=movie实验指导书传媒技术学院数字媒体艺术专业17value=bcastr/bcastr4.swf?xml=bcastr/bcastr.xml/embedsrc=bcastr/bcastr4.swf?xml=bcastr/bcastr.xml……（4）打开bcastr.xml文件，在其中设置图片的路径。itemlink/linkimageimages/image1.gif/imagetitle学科建设/title/itemitemlink/linkimageimages/image2.gif/