《Dreamweaver 8 & ASP动态网站开发基础与实例》-王爱民-电子教案 chapter 4

,第4章 Dreamweaver8.0实例制作 本章主要介绍了Dreamweaver8.0经常使用到的六个实例。即轮换图特效、图象链接特效、状态栏文本显示、图片滚动播放特效、公告栏的设置和鼠标特效。通过本章的介绍，读者可以对Dreamweaver8.0的强大功能有一个认识。 在这里，我们仅仅介绍了六个精彩的例子，希望读者能够多多练习，熟练地使用Dreamweaver的其他功能，达到熟练使用该软件的目的。,第四章 Dreamweaver8.0实例制作 4.1 实例一:轮换图 4.2 实例二：设置图象链接 4.3 实例三:设置状态栏文本 4.4 实例四:图片的滚动 4.5 实例五：公告栏的设置 4.6 实例六: 鼠标特效 4.7 小结 4.8思考与练习,4.1 实例一:轮换图 实例特效：本例制作的是一个轮换图的效果，这是利用两副图像轮换显示产生的效果。本例的效果是当鼠标经过设置好的图片时，会自动切换到另一张已经设定好的图片。并且如果在该图片上单击鼠标就可以链接到指定的页面。 实际上本实例是使用“鼠标经过图像”命令来完成“鼠标开门”特效的。本实例会增强页面的动态效果。,操作步骤: 步骤1:打开实例素材页面 在Dreamweaver8.0中打开本书附带的光盘：路径为asp/zxdc/index.asp,如图4-1所示：,图4-1 在线调查主界面zxdc.asp,步骤2：插入鼠标经过图象 在文档中的表格左侧的单元格中单击，将光标定位于此单元格，执行插入图象对象鼠标经过图象命令弹出插入鼠标经过图象 。如图4-2所示：,步骤3：设置插入鼠标经过图象对话框 原始图象： 指鼠标未移动到图象上时所显示的图象。 单击右侧的“浏览”按钮，选择一幅图象，也可以在原始图象域中输入原始图象的路径和文件名，如选本本书附带的光盘：路径为asp/zxdc/bysj.gif文件。 鼠标经过图象： 指鼠标移动到图象上时所要显示的图象。单击右侧的“浏览”按钮，选择一幅图象，也可以在鼠标经过图象域中输入替换图象的,图4-2 插入鼠标经过图象,路径和文件名，如选本书附带的光盘里的文件：路径为asp/zxdc/55.gif文件。 替换文本：鼠标移动到图象上时显示的提示文本，例如输入“我的大学”。 按下时，前往的URL：在图象上单击鼠标时链接的页面。（此页面可以是Internet网址也可以是本地文件，例如输入：www.aynu.edu.cn. 。设置完成后单击确定按钮，如图4-3所示：,图4-3设置“插入鼠标经过图象”,步骤4：效果预览 保存文档，按F12键预览制作的效果。,4.2 实例二：设置图象链接 实例特效：在Dreamweaver8.0中可以为图形或图形中某一区域设置默认超链接。当站点访问者单击该图形时，WEB浏览器会显示超链接的目的地。本例的效果是当鼠标单击设置好的图片时，则会自动链接到另一张已经设定好的图片。,操作步骤: 步骤1: 打开实例素材页面 在Dreamweaver8.0中打开本书附带的光盘：路径为asp/zxdc/index.asp,如下图4-4在线调查主界面zxdc.asp所示：,步骤2：显示属性面板 选择要设置链接的图象，执行窗口属性命令显示属性面板。,步骤3：设置图象链接 在属性面板中单击链接文本域右侧的浏览文件文件夹图标弹出选择文件对话框，如图4-5所示： 图4-5设置图象链接,步骤4：选择链接文件 在出现的选择文件对话框中选择要链接的文件/asp/asp/zxdc/ss.gif，然后单击确定按钮，在属性面板中的链接文本域中会出现选择的链接文件名，如图4-6所示：,图4-6选择链接文件,步骤5：设置图象替换文本 在该属性面板的替代下拉列表框中输入要显示的替换文本Active Server Pages(ASP),如图4-7所示: 图4-7设置图象替换文本,步骤6：效果预览 保存文档，按F12键预览制作的效果 4.3 实例三:设置状态栏文本 实例特效：本例的效果是利用行为面板来设置状态栏文本，设置成功后，就可以在状态栏显示想让读者看到的信息。增强网站的动态效果。,操作步骤 步骤1: 打开实例素材页面 在Dreamweaver8.0中打开本书附带的光盘：路径为asp/bbs/d-tou.asp,如下图4-8校园BBS主界面所示：,步骤2:显示行为面板 在所示页面上的图象上单击，选中这幅图象，然后执行窗口行为命令，出现行为面板，如下图4-9显示行为面板所示：,步骤3：添加行为 在行为面板中单击“+”按钮，从弹出的菜单中选择设置文本设置状态栏文本项，弹出设置状态栏文本对话框，如下图4-10添加行为所示：,步骤4：设置状态栏文本 在弹出的设置状态栏文本对话框的消息域中输入要显示的文字“欢迎来到BBS论坛！”，然后单击“确定”按钮。如下图4-11设置状态栏文本所示：,步骤5：效果预览 保存文档，按F12键预览制作的效果。,4.4 实例四:图片的滚动 实例特效：本例的效果是实现图片的水平滚动效果，即我们常说的图片走马灯效果。该效果是通过具体的设计代码实现的。该特效能增强网站的动态效果，使网站更加美观，被普遍地应用于网页设计中。,操作步骤 步骤1: 打开实例素材页面 在Dreamweaver8.0中打开本书附带的光盘：路径为asp/index.asp,如图4-12所示：,图4-12 系统主界面index.asp,步骤2:插入图片的具体设计代码 ,步骤3：效果预览 保存文档，按F12键预览制作的效果，如下图4-13预览特效所示。,4.5 实例五：公告栏的设置 实例特效：公告栏在网站建设中是个很常见的功能模块。本例的效果是实现公告栏里的信息循环滚动播放效果。通过信息的滚动，读者可以浏览所有信息，如果见到感兴趣的信息，可以将鼠标停在上面，则该滚动会暂时停止，此时，若单击则会链接到该信息的具体内容；若松开鼠标，则公告栏里的信息会继续滚动。该效果是通过具体的设计代码实现的。 该特效能增强网站的动态效果，使网站更加美观，并且很方便地把重要的实时信息显示出来，故被普遍地应用于网页设计中。 操作步骤：,步骤1: 打开实例素材页面 在Dreamweaver8.0中打开本书附带的光盘：路径为asp/index.asp,如下图4-14系统主界面index.asp所示：,步骤2：添加链接数据库代码 步骤3：具体实现代码： =本站公告= , “ target=“_blank“ , 步骤4：效果预览 保存文档，按F12键预览制作的效果,4.6 实例六: 鼠标特效 实例特效: 鼠标特效在网页制作中是很常见的。本例的效果是利用具体的代码实现鼠标移动时，会有一群五颜六色的小点跟随着鼠标，就像星星一样，使页面看起来更加美观。该特效能增强网站的动态效果，使网站更加美观，被普遍地应用于网页设计中。,图4-15留言版的主界面,具体操作步骤如下: 步骤1: 打开实例素材页面 在Dreamweaver8.0中打开本书附带的光盘：路径为asp/lyb/index.asp,如图4-15所示： 步骤2:将如下代码放入编辑界面中: , if (!document.layers&&!document.all) event=“test“,function showtip2(current,e,text) if (document.all&&document.readyState=“complete“) document.all.tooltip2.innerHTML=''+text+'' document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10 document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10 document.all.tooltip2.style.visibility=“visible“ ,else if (document.layers) document.tooltip2.document.nstip.document.write(''+text+'') document.tooltip2.document.nstip.document.close() document.tooltip2.document.nstip.left=0 currentscroll=setInterval(“scrolltip()“,100) document.tooltip2.left=e.pageX+10 document.tooltip2.top=e.pageY+10 document.tooltip2.visibility=“show“ ,function hidetip2() if (document.all) document.all.tooltip2.style.visibility=“hidden“ else if (document.layers) clearInterval(currentscroll) document.tooltip2.visibility=“hidden“ function scrolltip() if (document.tooltip2.document.nstip.left=-document.tooltip2.document.nstip.document.width) document.tooltip2.document.nstip.left-=5 else document.tooltip2.document.nstip.left=150 ,function www_helpor_net_Layerfx(www_helpor_net_left,www_helpor_net_top,www_helpor_net_fnx,www_helpor_net_fny,www_helpor_net_div,www_helpor_net_bilder,www_helpor_net_loop,www_helpor_net_to,www_helpor_net_cnt,www_helpor_net_step) if (document.layers)|(document.all) with (Math) www_helpor_net_nextx= eval(www_helpor_net_fnx) with (Math) www_helpor_net_nexty= eval(www_helpor_net_fny) www_helpor_net_cnt=(www_helpor_net_loop ,if (document.layers) eval(www_helpor_net_div+“.top=“+(www_helpor_net_nexty+www_helpor_net_top) eval(www_helpor_net_div+“.left=“+(www_helpor_net_nextx+www_helpor_net_left) if (document.all) eval(“www_helpor_net_div=www_helpor_net_div.replace(/.layers/gi, '.all')“); eval(www_helpor_net_div+“.style.pixelTop=“+(www_helpor_ne