FrontPage技巧：[8]如何制作网页滚动图片

在网页里面我们经常看到一些滚动的图片，有些是左右滚动的，有些是上下滚动的，这是怎么制作出来的呢？滚动字幕在软件里面可以直接制作，那么滚动图片怎样来制作呢？其实也很简单，用一些代码就可以实现。

制作前准备：

  • 01

    打开Frontpage软件，新建一个常规文档，单击菜单栏“插入”——Web组件。

  • 02

    在打开的“插入Web组件”对话框中选择“动态效果”——字幕，单击完成。

  • 03

    在字幕属性对话框中输入文字“滚动图片”，单击确定。

向右循环滚动图片：

  • 01

    选定滚动字幕框架，把文档有设计模式转换到代码模式，在“marquee”后面输入“scrollAmount=1 scrollDelay=1 direction=right width=600 height=250”。

  • 02

    用代码 “<IMG src="图片1地址" width=180 border=0> <IMG src="图片2地址" width=180 border=0> <IMG src="图片3地址" width=180 border=0> <IMG src="图片4地址" width=180 border=0> <DIV></DIV> ”替换“滚动图片”。

  • 03

    在代码<marquee>前面输入“<CENTER>”，然后在</marquee>后面输入“</CENTER>”。

    向左循环滚动图片：

    • 01

      向左滚动只需要把向右滚动代码中的“direction=right”改为“direction=left”即可。

    向上循环滚动图片：

    • 01

      向上滚动首先要把向右滚动代码中的“direction=right”改为“direction=up”，把“width=600”该为“width=170”。

    • 02

      在<marquee>和</marquee>之间输入代码 “<DIV align=center><IMG src="图片网址1" width=300 border=0></DIV> <DIV align=center><IMG src="图片网址2" width=300 border=0></DIV> <DIV align=center><IMG src="图片网址3" width=300 border=0></DIV> <DIV align=center><IMG src="图片网址4" width=300 border=0></DIV>”

      向下循环滚动图片：

      • 01

        向下滚动只需要把向上滚动代码中的“direction=up”改为“direction=down”即可。

        代码解析：

        • 01

          <marquee></marquee>：用来控制文字滚动。 “direction=”用来控制方向“上（up）下（down）左（left）右（right）” “scrollamount=”用来控制速度。 “crolldelay=”用来控制延时。 “width=”代表宽度。 “height=”代表高度。 <DIV></DIV>：代表一行。

        赞 (0)

        相关推荐

        • FrontPage技巧：[6]制作网页滚动字幕

          在一些个人网站上经常看到一些滚动字幕,这种文字的动态效果是怎样制作出来的呢?其实很简单,这里我们就来一起学习一下滚动字幕的制作. 制作前准备: 01 打开网页,点击菜单栏上面的"插入&quo ...

        • Dreamweaver8如何制作网页滚动文字

          教大家如何Dreamweaver8制作网页中的滚动文字. 操作方法 01 打开Dreamweaver 8,新建HTML. 02 选择插入,标签. 03 选择HTML标签,拉动滚动条选择marquee插 ...

        • 小技巧-如何保存为网页长图片

          大家在上网的时候可能会遇到网页截图的需求,无论是利用QQ还是别的截图软件都能够方便的截图.但有的时候却又出现新问题:如果想把整个网页保存为一张长图片应该怎么弄呢,难不成要一张张截图后再后期拼装起来?今 ...

        • 网页动态Banner制作：[1]制作动态Banner图片

          对于各位网页设计者特别是初学者而言,对于网页中Banner部分动态效果的制作一定感觉很好奇,那么这么唯美的动态Banner效果是怎么制作出来的呢?今天小编就与大家一起分享一下动态Banner的制作方法 ...

        • Dreamweaver如何制作网页并添加背景图片

          对于初学者制作网页,一般选择用Dreamweaver软件,在这里我来简单介绍一下如何新建网页并给网页添加背景图片 操作方法 01 打开Dreamweaver软件如下图所示 02 点击红色箭头所指的连接 ...

        • 使用Pages(页面)面板制作网页

          下面通过一个具体的实例来说明Pages(页面)面板的实际作用,具体操作步骤如下. 1.新建一个Fireworks文件. 2.在弹出的[新建文档]对话框中设置画布的宽度为932像素.高度为538像素,背 ...

        • 用word制作网页教程（word文档怎么做页面）

          用word制作网页教程（word文档怎么做页面）

          信息化急速发展的现代社会也是网页流量迅速发展的时代,那么你们知道如何制作网页吗?其实用Word文档就可以制作,下面一起来看看如何用Word文档制作网页吧!我们在视图中把Word文档改为Web版式,具体 ...

        • 如何制作网页

          网页三剑客,顾名思义,是一套强大的网页编辑工具,最初是由Macromedia公司开发出来的.  Dreamweaver与Flash.Firework 并称为 Macromedia的网页制作三剑客,由于 ...

        • 怎样制作网页 计划？

          操作方法 01 一.确定网站主题网站主题就是你建立的网站所要包含的主要内容,一个网站必须要有一个明确的主题.特别是对于个人网站,你不可能像综合网站那样做得内容大而全,包罗万象.你没有这个能力,也没这个 ...