《互联网与网站建设.docx》由会员分享，可在线阅读，更多相关《互联网与网站建设.docx（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?x
14、ml=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视频文件的路径。./media/01.flv你和我./media/02.flv飞人大赛8制作“岁月留声”网页，并实现歌
15、曲点播。主要步骤：（1）新建网页，保存网页为007.htm。设置网页背景图像，并在网页中插入图像、表格及文字。（2）在网页中插入ActiveX，在属性面板上设置ClassID为clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95，宽320像素，高28像素。为播放器加入id标识player。（3）在网页中插入表格，填写歌曲名称，并设置超链接：偏偏喜欢你后来（4）加入在之间加入javascript，实现歌曲点播。function musicplay(name) if (name=) return; filename = name; player.Cancel() p
16、layer.Open(filename)四、实验要求及注意事项1从ftp:/210.44.122.253服务器下载素材。2认真完成全部实验内容。3先建立站点，再制作网页。4播放器对象的classid从clsid开始填写。实验三 表格布局网页制作一、实验目的1掌握在Fireworks中提取图像、提取尺寸、提取颜色的方法。2掌握使用表格布局网页的方法。二、实验内容制作“北京大学首页”网页。三、操作步骤1新建文件夹，命名为“beida”，在其中创建“images”子文件夹。2启动Fireworks，使用切片工具提取需要的图像，并导出到images文件夹中。需要提取以下图像切片在网页中的作用命名bod
17、y的背景mainbg.gif网站logologo.gif导航条左圆角navleft.gif导航条右圆角navright.gif图片bjdx.gif栏目图片news.gif栏目图片notice.gif栏目图片hot.gif箭头arrow.gif箭头arrow2.gif圆角栏图片1box_top.gif圆角栏图片2box_bg.gif圆角栏图片3box_bottom.gif3 将“bcasrt” 文件夹复制到“beida”文件夹中。4启动Dreamweaver，创建“北京大学”站点，本地目录为“beida”文件夹。5新建网页，保存为index.html。6设置网页标题：北京大学欢迎你。7单击“CS
18、S”面板上的“新建CSS规则”按钮。在“新建CSS规则”对话框中设置选择器类型为“标签”，标签为“body”，定义在“新建样式表文件”，单击“确定”按钮。将CSS文件保存在style文件夹中，命名为basic.css。body的CSS样式定义如图：8插入第一个表格，985像素，居中对齐。其中嵌套表格。310像素宽1行3列280像素宽1行9列660像素宽9继续插入表格，985像素，居中对齐。其中嵌套表格。305像素宽427像素宽460像素宽3行1列190像素宽3行1列180像素宽220像素宽10继续插入表格，985像素，居中对齐。11切换到代码窗口，为导航条表格添加唯一标识。12定义超链接的CS
19、S样式。body font: 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:
20、 1px solid #CCCCCC;.dotline border-bottom: 1px dashed #CCCCCC;13应用类样式（1）将.borderright样式应用于第二个大表格的中间单元格。（2）将.dotline样式应用于新闻列表和通知列表的所有单元格。四、实验要求及注意事项1从ftp:/210.44.122.253服务器下载素材。2先建立站点，再制作网页。3表格布局时，表格的边框、填充、边距全部为0。4网页制作过程中，以自己处理的切图素材的尺寸为准。5设置CSS时，首先设置Dreamweaver的CSS代码为速记。实验四 Fireworks切图网页制作一、实验目的1掌握Fi
21、reworks切图并导出网页的方法。2掌握在Dreamweaver中编辑切图网页的方法。二、实验内容1使用Fireworks切图并导出“清华大学”首页。2使用Fireworks切图并导出单元格背景图。3在Dreamweaver中编辑“清华大学”首页。4为网页添加CSS样式表。三、操作步骤1使用Fireworks切图并导出“清华大学”首页。（1）启动Fireworks，打开“qinghua.png”文件。（2）使用切图工具进行切图。（3）在“优化”面板上设置切片导出格式为“JPEG较高品质”。（4）选中切片3，在属性面板上设置切片导出格式为“GIF最适合256”。（5）选中切片9，在属性面板上设
22、置切片导出格式为“GIF最适合256”。（6）选择“文件HTML设置”命令，做以下设置。（7）选择“文件导出”命令，在“导出”对话框中做以下设置。2使用Fireworks切图并导出单元格背景图。（1）删除切片4，设置视图缩放比例为“200%”，在“学校概况”后面的空白区域做一个小切片。（2）在该切片上右击，选择“导出所选切片”命令。将该切片命名为“bg1”，并保存在“images”文件夹中。（3）用相同方法导出“bg2”。3在Dreamweaver中编辑“清华大学”首页。（1）在Dreamweaver中打开index.html。新建CSS样式，定义在“新建样式表文件”，命名为basic.css
23、。定义body的CSS样式：body font: 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）用相同方法制作第
24、二个导航条。（7）删除图像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列表
25、格，输入文字。（13）选中图像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从ftp:/210.44.122.253服务器下载素材。2先建立站点，再制作网页。3在Fireworks中切图时，先利用标尺添加辅助线。4网页制作过程中，以自己
26、处理的切图素材的尺寸为准。5设置CSS时，首先设置Dreamweaver的CSS代码为速记。实验五 XHTML语言网页制作一、实验目的1掌握XHTML 语法。2掌握XHTML 文档类型声明。3掌握XHTML 标记及属性。二、实验内容制作“webquest/article01.html”网页。三、操作步骤1创建“webquest”站点。2新建网页，保存为article01.html。3切换到代码窗口，从“文本.txt”中复制文字，粘贴到中。4按照网页内容的语义修改XHTML代码。惟存教育探究学习返回首页如何构建高效的 webquest杨淑莲 华南师范大学教育技术研究所一、什么是 WebQuest
27、WebQuest 是美国的评价、结论六个基本模块贯串在一起，形成一个完整的教学体系。二、 WebQuest 具体的构建过程（一）选择合适的主题图1选择学习任务WebQuest 仅仅是教学方式中的一种，才能有助于学习者发现问题，并激活知识储备。（二）任务在设计任务时要结合以下原则确定任务：科学性、知识性：体现教学目标。趣味性：引发学习者探索的积极性。可操作性：任务要具体，一般要形成一定的产品。开放性：任务完成可以采取不同的途径，任务解决没有固定答案。伸缩性：可以把任务分为的学生。（三）评价WebQuest 通常采用表现为书面作业、学生的作品、创作的网页或其他内容。评价对象起步发展中完成参与讨论&
28、nbsp; 网上搜集资料 作品创作 Copyright©BEING, Being Lab. All Rights Reserved版权所有 惟存教育实验室实验六 CSS选择符一、实验目的1掌握CSS的基本语法规则。2掌握CSS的常用选择符。3掌握在网页上应用CSS的方法。4掌握使用Dreamweaver定义CSS的方法。二、实验内容1使用标记定义“webquest/article01.html”网页的逻辑结构。2使用CSS控制“webquest/article01.html”网页的样式。3使用标
29、记定义“webquest/article02.html”网页的逻辑结构，并为该网页链接外部CSS样式表。三、操作步骤1创建“webquest”站点。2打开article01.html，使用标记定义网页的逻辑结构。返回首页如何构建高效的 webquest杨淑莲 华南师范大学教育技术研究所图1选择学习任务Copyright©BEING, Being Lab. All Rights Reserved版权所有 惟存教育实验室3使用CSS控制网页的表现。* margin: 0px;padding: 0px;body font: 0.75em/1.7 宋体;background: #E0E0E0
30、 url(images/mygrd.gif);text-align: center;#container margin: auto;width: 760px;text-align: left;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%;t
31、ext-align: center;margin-bottom: 0.5em;h3 font-size: 130%;color: #660000;h4 font-size: 110%;h3, 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:co
32、llapse;td, th padding: 5px;border: 1px solid #000000;#footer text-align: center;padding: 20px 0px;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使用标记定义“webquest/article02.html”
33、网页的逻辑结构，并为该网页链接外部CSS样式表。实验七 CSS盒模型一、实验目的1深入理解CSS盒模型及其属性。2熟练掌握CSS属性的定义方法。二、实验内容制作”悠然我思”网站。三、操作步骤1创建“悠然我思”站点。2打开index.html，定义其逻辑结构。悠然我思月光诗集旖旎信箱：moonlili.cc版权所有©旖旎 1999 3使用CSS控制“首页”的样式。新建CSS样式表，保存在style文件夹中，命名为style_homepage.css，其内容如下：body font: 0.75em/1.5 宋体;color: #dee3c1;background: #134113 url
34、(./images/bg_body.jpg);text-align: center;padding: 30px 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%;#conte
35、nt padding: 0px 100px 30px 100px;#content h2 font-size: 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-
36、decoration: none;a:hover text-decoration: underline;4定义“zhenxi.html”网页结构。 永远的夏娃珍惜 我曾经那么 学会好好爱我 作者：旖旎（moonlili.cc） 下一首 返回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: 290px;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-decorat
