![Page 1: 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](https://reader036.vdocuments.site/reader036/viewer/2022062423/56649f1d5503460f94c34b30/html5/thumbnails/1.jpg)
Creating a rotating image banner
Activity 7
Procedure
Creating AP Elements1. 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 .
![Page 2: 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](https://reader036.vdocuments.site/reader036/viewer/2022062423/56649f1d5503460f94c34b30/html5/thumbnails/2.jpg)
4. Draw an AP Element on the web page.
Creating a rotating image banner
Activity 7
![Page 3: 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](https://reader036.vdocuments.site/reader036/viewer/2022062423/56649f1d5503460f94c34b30/html5/thumbnails/3.jpg)
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
![Page 4: 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](https://reader036.vdocuments.site/reader036/viewer/2022062423/56649f1d5503460f94c34b30/html5/thumbnails/4.jpg)
6. Click the ‘Browse’ button to select the background image for ‘apDiv1’.
Creating a rotating image banner
Activity 7
![Page 5: 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](https://reader036.vdocuments.site/reader036/viewer/2022062423/56649f1d5503460f94c34b30/html5/thumbnails/5.jpg)
7. Locate the image banner_cable.jpg from the Learning CD-ROM.
Creating a rotating image banner
Activity 7
![Page 6: 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](https://reader036.vdocuments.site/reader036/viewer/2022062423/56649f1d5503460f94c34b30/html5/thumbnails/6.jpg)
8. The image is set as the background image of ‘apDiv1’ Element.
Creating a rotating image banner
Activity 7
![Page 7: 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](https://reader036.vdocuments.site/reader036/viewer/2022062423/56649f1d5503460f94c34b30/html5/thumbnails/7.jpg)
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
![Page 8: 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](https://reader036.vdocuments.site/reader036/viewer/2022062423/56649f1d5503460f94c34b30/html5/thumbnails/8.jpg)
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
![Page 9: 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](https://reader036.vdocuments.site/reader036/viewer/2022062423/56649f1d5503460f94c34b30/html5/thumbnails/9.jpg)
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
![Page 10: 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](https://reader036.vdocuments.site/reader036/viewer/2022062423/56649f1d5503460f94c34b30/html5/thumbnails/10.jpg)
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
![Page 11: 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](https://reader036.vdocuments.site/reader036/viewer/2022062423/56649f1d5503460f94c34b30/html5/thumbnails/11.jpg)
Animating AP Elements in Timeline13. 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
![Page 12: 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](https://reader036.vdocuments.site/reader036/viewer/2022062423/56649f1d5503460f94c34b30/html5/thumbnails/12.jpg)
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
![Page 13: 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](https://reader036.vdocuments.site/reader036/viewer/2022062423/56649f1d5503460f94c34b30/html5/thumbnails/13.jpg)
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
![Page 14: 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](https://reader036.vdocuments.site/reader036/viewer/2022062423/56649f1d5503460f94c34b30/html5/thumbnails/14.jpg)
16. In the Timeline, select Frame 1. In the Tag Inspector, select the ‘Appear/Fade’ behavior.
Creating a rotating image banner
Activity 7
![Page 15: 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](https://reader036.vdocuments.site/reader036/viewer/2022062423/56649f1d5503460f94c34b30/html5/thumbnails/15.jpg)
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
![Page 16: 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](https://reader036.vdocuments.site/reader036/viewer/2022062423/56649f1d5503460f94c34b30/html5/thumbnails/16.jpg)
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
![Page 17: 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](https://reader036.vdocuments.site/reader036/viewer/2022062423/56649f1d5503460f94c34b30/html5/thumbnails/17.jpg)
19. In the Timeline, select Frame 20 and add the following ‘Appear/Fade’ behavior:
Element : apDiv3Effect : FadeDuration : 0 millisecondElement : apDiv2Effect : AppearDuration : 0 millisecond
Activity 7
Creating a rotating image banner
![Page 18: 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](https://reader036.vdocuments.site/reader036/viewer/2022062423/56649f1d5503460f94c34b30/html5/thumbnails/18.jpg)
20. In the Timeline, select Frame 40 and add the following ‘Appear/Fade’ behavior:
Element : apDiv2Effect : FadeDuration : 0 millisecondElement : apDiv1Effect : AppearDuration : 0 millisecond
Activity 7
Creating a rotating image banner
![Page 19: 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](https://reader036.vdocuments.site/reader036/viewer/2022062423/56649f1d5503460f94c34b30/html5/thumbnails/19.jpg)
21. In the Timeline, select Frame 60 and add the following ‘Appear/Fade’ behavior:
Element : apDiv1Effect : FadeDuration : 0 millisecond
Activity 7
Creating a rotating image banner
![Page 20: 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](https://reader036.vdocuments.site/reader036/viewer/2022062423/56649f1d5503460f94c34b30/html5/thumbnails/20.jpg)
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
![Page 21: 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](https://reader036.vdocuments.site/reader036/viewer/2022062423/56649f1d5503460f94c34b30/html5/thumbnails/21.jpg)
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