Tutorial for Scroll iWeb

Using Apple's iWeb website creation application, you have the ability to apply scroll behavior to the elements on your website. These elements, such as your text and images, can move across the page in the direction you choose and scroll as many times as you prefer. iWeb gives you a tool that allows you to enter the HyperText Markup Language code that animates the desired features on your page. Assign a scroll action to create eye-catching content on your site.


    • 1

      Launch your iWeb application and click an existing page on the left side of the iWeb window that opens. Alternately, click the "Add Page" button in the bottom toolbar, and then click a template style and page type in the dialog that appears. Click the "Choose" button to continue.

    • 2

      Click the "Show Media" button in the toolbar and then select the "Widgets" tab that displays in the left side of the window. Click the "HTML Snippet" widget and drag it to a spot where you want the scroll feature to appear. The HTML Snippet dialog window opens automatically.

    • 3

      Enter "<marquee></marquee>" in the dialog's text box, which is the basic marquee code that makes content scroll on your Web page. Type the text you want to scroll between the tags like so:
      This is your scrolling text.

    • 4

      Add an image to your scrolling feature by entering "<img src=" and then " />" between the marquee tags. Type the image's URL address between the quotation marks like so:
      <img src="http://www.example.com/images/picture.jpg&quot; />

    • 5

      Type "behavior=" in the opening marquee tag and enter "scroll" after the equals sign to specify you want your designated content to scroll. Further, type "direction=" and follow this with "left," "right," "up" or "down" to determine the horizontal or vertical direction of the scroll. For instance:
      <marquee behavior="scroll" direction="left">

    • 6

      Enter "loop=" and type a number to determine the number of times your content scrolls across the page. To illustrate:
      <marquee loop="2">

      If you do not enter a loop attribute and number, the marquee continuously scrolls by default.

    • 7

      Click the "Apply" button in the dialog and then click the "Save" option under the File menu to finish preserving your changes. Your complete code now looks like the following example:
      <marquee behavior="scroll" direction="left" loop="2">
      This is your scrolling text.
      <img src="http://www.example.com/images/picture.jpg&quot; />

Tips & Warnings

  • Get a URL address for your image by uploading it to your Web host account in the same directory where you keep your other website files, and record the file path—for example, http://www.yoursite.com/images/picture.jpg. Alternately, point your browser to a free picture hosting site, such as TinyPic or PostImage.org, and follow the prompts to add your file. Record the Web address that displays at the end of the process.
Related Searches



Related Ads

Check It Out

Prep for Black Friday Checklist [Infographic]