Dreamweaver 8实现滚动图片文字

Dreamweaver 8实现滚动图片文字 电脑编程技巧与维护 Dreamweaver8实现滚动图片文字 赵丽华,卢旭英.肖凯 (西安通信学院,西安710106) 摘要:结合在日常使用经验,介绍了利用Dreamweaver8实现网页上文字和图片的 滚动技巧,通过使用这些技巧 可以制作样式丰富的网页. 关键词:Dreamweaver8;滚动;图片;文字 TheImplementationofRollingTextandPicturesbyDreamweaver8 ZHAOLihua,LUXuying,XIAOKai (Xi'anCommunicationsInstitute,Xi'an710106) Abstract:VsingDreamweaver8implementationoftherollingpicturesandtextareintroduce dinthispaperbycombining withdailyVsingexperience.ThevariousfineWebpagescanbemadebyusingtheseskills. Keywords:Dreamweaver8;Rolling;Pictures;Text Dreamweaver8是美国Macromedia公司开发的集网页制作 和网站管理于一身的所见即所得的网页编辑器,具有强大的编 辑功能,能够方便地实现对网页创作的灵感,使 设计 领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计 者不必编 写大量的HTML代码就能够实现特效.平常在网页上看到的公 告板的滚动文字,最新的焦点新闻图片滚动,产品的宣传等都 可以利用Dreamweaver8轻松实现,旨在对以上技巧进行说明. 1留白滚动字幕和图片 在网页中出现一些滚动字幕或滚动图片会使网页增效不 少.下面主要介绍一下有关滚动特效的代码: <marqueebehavior=scrolldirection=upwidth=180height= 130scrollamount=lscrolldelay=90onmouseover=this.stop() onmouseout=this.start()>滚动 内容 财务内部控制制度的内容财务内部控制制度的内容人员招聘与配置的内容项目成本控制的内容消防安全演练内容 (文字或图片)</mar- quee> 各参数详解 (1)<marquee>…</marquee>移动属性的设置,这种移动 不仅仅局限于文字,也可以应用于图片,表格等等. (2)direction.表示滚动的方向,默认为从右向左: +—+一.可选的值有right,down,up.滚动方向分别为:right 表示一,up表示T,down表示i. (3)width和height,表示滚动区域的大小,width是宽 度,height是高度.特别是在做垂直滚动的时候,一定要设 height的值 (4)onMouseOut=start0……鼠标移出状态滚动. onMouseOver=-stop0…….鼠标经过时停止滚动. (5)scrollAmount.它表示速度,值越大速度越快.如果 没有它,默认为6,建议设为1~3比较好. 默认为90,值 (6)scroHDelay,这也是用来控制速度的, 越大,速度越慢.通常scrollDelay是不需要设置的. (7)behavior,用它来控制属性,默认为scroll(循环滚 动),可选的值有ahemate(交替滚动),slide(幻灯片效果,指 的是滚动一次,然后停止滚动). (8)onmouseover表示鼠标经过的动作(this.stop0表示 i与l《i\?iiiii两与纛i 滚动停止),onmouseout表示鼠标离开时的动作(this.start0 表示滚动继续),还可以根据需要设置点击链接其他内容. 以上技巧可以实现文字和图片上下左右滚动,但是滚动 时是全部内容显示完毕,显示区域空白后再循环显示,因此 这种显示方法多见于文字以公告的形式使用. 2无缝滚动图片 经常看到的许多产品,新闻等图片的显示都是不留空白 的,如果要实现这种效果可以采用如下方法:一个设定宽度 mo,里面放demo1和 并且隐藏超出它宽度的内容的容器de demo2,demol是滚动内容,demo2为demoI的直接克隆,通过 不断改变demol的scrollTop或者scrollLefi达到滚动的目的, 当滚动至demo1与demo2的交界处时直接跳回初始位置,因 为demol与demo2一样,所以分不出跳动的瞬间,从而达到 "无缝"滚动的目的.以下以向左和向上滚动为例. 2.1向左滚动代码 <divid=demostyle=''overflow:hidden;height:170;width:700; background:#214984;color:榭艄.><tablealign=leftcell- padding--0cellspace--0border=0><tr><tdid=demolvalign=top> <!一定义图片时注意左右滚动的图片需要连续排列一> <imgsrc="图1.jpg"/><imgsrc="图2.jpg"><imgsrc=" 图3.jpg"/></a></td> <tdid=demo2valign=top></td></tr></table> </div> <script> Varspeed=30 demo2.innerHTML=demo1.innerHTM_L functionMarquee0{ if(demo2.offsetWidth-demo.scrollLefl<--O) demo.scroBLeft-=demo1.OffsetWidth else{ demo.scrollLefc++(下转到94页) 作者简介:赵丽华(1975一),女,硕士,讲师,研究方向:智 能信息处理与网络安全. 收稿日期:2011-O1—18 电脑编程技巧与维护 2.2.3后台管理模块 管理员用户登录该系统后,可以管理系统信息,站内信 息,课程表信息, 评价 LEC评价法下载LEC评价法下载评价量规免费下载学院评价表文档下载学院评价表文档下载 信息等.其中系统设置包括基本设置, 学期设置,院系设置,教师设置,班级设置,学生设置,课 程设置,登录日志和数据维护;站内信息包括系统信息,写 信息,发件箱和收件箱;课程表操作包括设置学生课程表和 教师课程表;评价信息包括学生评价指标设置,教师指标设 置,指标等级设置,评价成绩分析和评价结果查询等;还可 以从这里更换用户. 2.2.4系统测试 为了测试和验证系统各模块的功能及性能,对系统各主 要功能模块进行了运行与测试分析.结果表明,系统的功能 模块均达到预期的设计目标. 3结语 网上评教具有其他评教方式所不可替代的方便性,客观 性,及时眭,在许多院校中逐渐作为最重要和最公正的评教 方式.设计并开发的课堂教学质量评价系统能解决某些院校 手工评教的不足,使得院校教学管理人员能够通过这套系统 来检测院校的教学状况,并有针对性地采取相应 措施 《全国民用建筑工程设计技术措施》规划•建筑•景观全国民用建筑工程设计技术措施》规划•建筑•景观软件质量保证措施下载工地伤害及预防措施下载关于贯彻落实的具体措施 ,切实 提高课堂教学质量. 参考文献 [1]郭海滨.某高校教师教学质量评估系统的研究与设计【D. 北京:北京邮电大学,2007. [2]程艳芳.网上教师教学质量评估系统【D】.山西太原:太 原理工大学,2006. 【3]陈志华,罗俊,王连红.基于现代网络技术的高校课堂教 学质量评估系统的设计与实现[J].广州:广东技术师范 学院,2007,(7):162—165. (上接第74页) } } VarMyMar=-seflnterval(Marquee,speed) demo.onmouseover=-function0{clearlnterval(MyMar)} demo.onmouseout=function(){MyMar=setlnterval (Marquee,speed)} </script> 2.2向上滚动代码 <divid=demostyle="overflow:hidden;height:764px;width: 235px;background--color:white;color:#ffffff;border——width:lpx lpxlpxlpx;border-style:dotteddotteddotteddotted;border-col- or:blackblackblackblack;"align=center> <divid--demol> <!一定义图片时注意上下滚动的图片需要换行排列 ---- > <imgsrc="图片1jpg"> <imgsrc="图片2"> <imgsrc="图片3"> </div> <divid=demo2></DIV> </div> <script> vflrspeed=30 demo2.innerHTML=demo1.innerHTML functionMarquee0{ if(demo2.offsetTop—demo.scrollTop<=0) demo.scrollTop-=demo1.offsetHeight else{ demo.scrollTop++ } } varMyMar=setlnterval(Marquee,speed) demo.onmouseover=-function0fclearlnterval(MyMar)1 demo.onmouseout=funcfion(){MyMar=setlnterval(Mar— quee,speed)) </script> 2_3代码中几点说明 (1)innerHTML:设置或获取位于对象起始和结束标签内的 H.lML. (2)scrollHeight:获取对象的滚动高度. (3)scrollLefl:设置或获取位于对象左边界和窗口中目前可 见内容的最左端之间的距离. (4)scrollTop:设置或获取位于对象最顶端和窗口中可见内 容的最顶端之问的距离. (5)scrollWidth:获取对象的滚动宽度. (6)offsetHeight:获取对象相对于版面或由父坐标offset— Parent属性指定的父坐标的高度. (7)offsetLefl:获取对象相对于版面或由offsetParent属性 指定的父坐标的计算左侧位置. (8)offsetTop:获取对象相对于版面或由offsetTop属性指 定的父坐标的计算顶端位置. (9)offsetWidth:获取对象相对于版面或由父坐标offsetPar— ent属性指定的父坐标的宽度. 在这里注意定义图片时左右滚动的图片需要连续排列, 上下滚动的图片需要换行排列.Demo的border—width,bor— der-style,border-color等属性可以用默认的也可以自行定义个 性化的边框.向右和向下滚动的代码可根据以上2种方法说 明进行调整实现. 3结语 Dreamweaver8是在网页设计与制作领域中用户最多,应 用最广,功能最强大的软件.通过介绍可以采用简单代码轻 松实现在网页上的滚动字幕和图片,进而丰富网页的样式, 制作出精美,新颖的网页. 参考文献 【1]周纯玉,詹劫.利用Photoshop+Dreamweaver制作网页的方 法与技巧『J】.电脑知识与技术,2010,(1). [2]张影.Dreamweaver使用技巧[J].电脑学习,2009, (4).