第一学期《教学软件设计与开发》-教育与传媒技术实验教学中心-聊城.doc

《互联网与网站建设》 实验指导书 聊城大学传媒技术学院 2008年8月 目录 实验一 简单网页制作 3 实验二 多媒体网页制作 15 实验三 表格布局网页制作 20 实验四 Fireworks切图网页制作 24 实验五 XHTML语言网页制作 30 实验六 CSS选择符 33 实验七 CSS盒模型 37 实验八 CSS两列浮动布局 41 实验九 CSS三列浮动布局 49 实验十 CSS两列定位布局 57 实验十一 CSS三列定位布局 61 实验十二 Ajax框架在网页中的应用 67 实验十三 网页制作综合训练 71 实验一 简单网页制作 一、实验目的 1．熟悉软件的界面掌握建立站点链接链接53服务器下载素材。 2．认真完成全部实验内容。 3．先建立站点，再制作网页。 4．表格布局时，表格的边框、填充、边距全部为0。 5．设置CSS时，首先设置Dreamweaver的CSS代码为速记。 实验二 多媒体网页制作 一、实验目的 掌握在网页中插入各种多媒体元素的方法。 二、实验内容 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，使用“站点｜新建站点”命令新建“多媒体”站点，并指定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像素，参数设置如图所示。 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文件的路径。 param name=movie value=bcastr/bcastr4.swf?xml=bcastr/bcastr.xml / embed src=bcastr/bcastr4.swf?xml=bcastr/bcastr.xml…… （4）打开bcastr.xml文件，在其中设置图片的路径。 item link/link imageimages/image1.gif/image title学科建设/title /item item link/link imageimages/image2.gif/image title人才培养/title /item item link/link imageimages/image3.gif/image title校园环境/title /item 7．在网页中嵌入flv播放器。 （1）新建网页，保存网页为006.htm。在网页中插入图片播放器vcastr/vcastr3.swf。 （2）在属性面板上设置播放器宽550像素，高400像素。 （3）设置参数如下： （4）打开vcastr.xml文件，在其中设置flv视频文件的路径。 channel item source../media/01.flv/source title你和我/title /item item source../media/02