How to Make Scrolling Art or Photos in iWeb

Technological savvyness is not required to build an iWeb site. The Apple website builder features drag and drop WYSIWYG (What You See Is What You Get) functionality. All of the images that you add to your iWeb page are static. Use HTML code to turn those static pictures into a moving picture slideshow. Add your own HTML code from scratch, or implement code from third party resources. By adding code from third party resources, more features are available for your slideshow, such as music and other special effects.

Instructions

  1. Scratch HTML Code

    • 1

      Log into your iWeb page.

    • 2

      Upload the photos you want to use into the iWeb administration panel. To do this, click the “Photos” link that is located underneath the “Site Organizer” (left side column). As the photos are uploaded, write down the photo file name (example yourpicture1.jpg) for future reference.

    • 3

      Look underneath the Site Organizer to locate the page you want to add photos to. Click the page to open it for editing.

    • 4

      Click the “Media” button, located on the bottom toolbar. Select “HTML.” This places an HTML editor box onto the iWeb page.

    • 5

      Add the below HTML code inside the HTML editor box. Replace the generic picture file names with your real photo file names (from step two).

      <marquee behavior="scroll" direction="left">
      <img src="yourpicture1.jpg" width =250 height =250> &nbsp; &nbsp; &nbsp; &nbsp;
      <img src="yourpicture2.jpg" width =250 height =250>&nbsp; &nbsp; &nbsp; &nbsp;
      <img src="yourpicture3.jpg" width =250 height =250>&nbsp; &nbsp; &nbsp; &nbsp;
      <img src="yourpicture4.jpg" width =250 height =250>&nbsp; &nbsp; &nbsp; &nbsp;
      <img src="yourpicture5.jpg" width =250 height =250>&nbsp; &nbsp; &nbsp; &nbsp;
      <img src="yourpicture6.jpg" width =250 height =250>&nbsp; &nbsp; &nbsp; &nbsp;
      <img src="yourpicture7.jpg" width =250 height =250>&nbsp; &nbsp; &nbsp; &nbsp;
      <img src="yourpicture8.jpg" width =250 height =250>&nbsp; &nbsp; &nbsp; &nbsp;
      <img src="yourpicture9.jpg" width =250 height =250>&nbsp; &nbsp; &nbsp; &nbsp;
      <img src="yourpicture10.jpg" width =250 height =250>&nbsp; &nbsp; &nbsp; &nbsp;
      </marquee>

    • 6

      Click the “Publish” button to save and publish the slideshow to your page. This button is located on the bottom left hand side of the iWeb window.

    Third Party Resources

    • 1

      Visit a website that allows you to create free HTML slideshows. An example of such sites include Slide, Kizoa and SlideRoll.

    • 2

      Select the option to create a new slideshow. Depending upon the site, new account registration may be required.

    • 3

      Click “Upload” to upload images from your computer's hard drive to the online website.

    • 4

      Customize your slideshow by selecting borders, music, transitions and other special affects. Click “Save” to save your work.

    • 5

      Click “Share” or “Embed” to copy the embed code for the slideshow.

    • 6

      Log into your iWeb page. Click the “Media” button, located on the bottom toolbar. Select “HTML.” This places an HTML editor box onto the iWeb page.

    • 7

      Right-Click inside the HTML editor box. Select “Paste” to paste the slideshow embed code.

    • 8

      Click the “Publish” button to save and publish the slideshow to your page.

Related Searches

References

Related Ads

Check It Out

Geek Vs Geek: The Best Tech of 2014