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