Creating a rotating image banner Activity 7 Procedure Creating AP Elements 1.Start Dreamweaver and select the ‘Hong Kong Scenery’ web site. 2. Create a new HTML document and save it as banner.html. 3. In the ‘Layout’ Insert bar, click the ‘Draw AP Div’ button.

4. Draw an AP Element on the web page. Creating a rotating image banner Activity 7

5. The AP Element is automatically named ‘apDiv1’ with z-index ‘1’. Set its size to 720 × 100 pixels, which has the same resolution as the banner images to be added in step 7. Set the left ‘L’ and top ‘T’ margins to both 8 pixels. Creating a rotating image banner Activity 7

6. Click the ‘Browse’ button to select the background image for ‘apDiv1’. Creating a rotating image banner Activity 7

7. Locate the image banner_cable.jpg from the Learning CD-ROM. Creating a rotating image banner Activity 7

8. The image is set as the background image of ‘apDiv1’ Element. Creating a rotating image banner Activity 7

9. In the CSS Inspector, select the ‘AP Elements’ tab and click the ‘apDiv1’ Element until the closed eye icon is displayed. Creating a rotating image banner Activity 7

10. Draw another AP Element ‘apDiv2’ in the same location as ‘apDiv1’ by clicking the ‘Draw AP Div’ button. Set the size and margins of ‘apDiv2’ Element to be the same as ‘apDiv1’ so that they can overlap with each other. Note that the ‘z-index’ of ‘apDiv2’ is ‘2’, which means it is one layer above ‘apDiv1’. Creating a rotating image banner Activity 7

11. Select the image banner_central.jpg from the Learning CD ROM as the background of the ‘apDiv2’ Element. Creating a rotating image banner Activity 7

12. Repeat steps 10 to 11 to create the third AP element ‘apDiv3’ which overlaps with ‘apDiv1’ and ‘apDiv2’. Select banner_ferry.jpg as its background image. Creating a rotating image banner Activity 7

Animating AP Elements in Timeline 13. Select ‘Window’ → ‘Timelines’ to display the Timeline. With ‘apDiv3’ Element visible, drag it to the Timeline. It will last 15 frames by default. Creating a rotating image banner Activity 7

14. Drag the last frame (which is a keyframe) to Frame 60, so that the animated banner will last for 4 seconds. Creating a rotating image banner Activity 7

15.Drag the Elements ‘apDiv2’ and ‘apDiv1’ to the Timeline and increase the number of frames for each Element to 60. Creating a rotating image banner Activity 7

16. In the Timeline, select Frame 1. In the Tag Inspector, select the ‘Appear/Fade’ behavior. Creating a rotating image banner Activity 7

17.Select the ‘apDiv3’ as the target element and set the duration of the ‘Appear’ effect to ‘0’ millisecond. Creating a rotating image banner Activity 7

18. A mark will be displayed in Frame 1 and the ‘Appear/Fade’ behavior is displayed in the Tag Inspector. Activity 7 Creating a rotating image banner

19. In the Timeline, select Frame 20 and add the following ‘Appear/Fade’ behavior: Element : apDiv3 Effect : Fade Duration : 0 millisecond Element : apDiv2 Effect : Appear Duration : 0 millisecond Activity 7 Creating a rotating image banner

20. In the Timeline, select Frame 40 and add the following ‘Appear/Fade’ behavior: Element : apDiv2 Effect : Fade Duration : 0 millisecond Element : apDiv1 Effect : Appear Duration : 0 millisecond Activity 7 Creating a rotating image banner

21.In the Timeline, select Frame 60 and add the following ‘Appear/Fade’ behavior: Element : apDiv1 Effect : Fade Duration : 0 millisecond Activity 7 Creating a rotating image banner

22.Check both the ‘Autoplay’ and ‘Loop’ check boxes. 23.Save and test the web page in a browser. The images in the banner should rotate one by one. Activity 7 Creating a rotating image banner

22.Check both the ‘Autoplay’ and ‘Loop’ check boxes. 23.Save and test the web page in a browser. The images in the banner should rotate one by one. Activity 7 Creating a rotating image banner