1. 1 Web Design ITM 2010 Tutorial 3 Prepared by Wang Shiyu

2. 2 Add Marquee In office 2000

3. 3 Add Marquee In office XP

4. 4 Marquee Properties The size for the marquee

5. 5 Dynamic HTML (DHTML) Add DHTML effect

6. 6 DHTML effect Option event: Click, double click, mouse over, page load. Different events will have different properties All the events will be function within the blue bar.

7. 7 Format Page transition

8. 8 Format

9. 9 Other source There are some web sites that supply DHTML code for page transition. http://www.dynamicdrive.com/dynamicindex3/document2.htm http://www.dynamicdrive.com/

10. 10 Other source Copy this Click this

11. 11 Other source Copy the previous Script between here

12. 12 Insert Hover Buttons Hover Buttons A hover button contains a hyperlink to another page or file. However, when a site visitor clicks or points to a hover button, the button can also glow, display a custom picture, or play a sound effect. You can also use a picture for a hover button or for the hover effect on a hover button.

13. 13 Hover Buttons In office 2000 In office XP (see the picture in slide 3)

14. 14 Other effects can be selected here Hover Buttons Introduced in next slide

15. 15 Hover Buttons

16. 16 Note If you want to view the effect of hover button in the preview tab, you must save the page first

17. 17 Add advert In office 2000 In office XP (see the picture in slide 3)

18. 18 3 sec may be better pace, experiment to find what’s best for your particular images. Only unique link for every image. FREE to use JPEG and GIF image Add advert

19. 19 Create Web Site For office 2000: –File->new->web For office XP( following picture is printed from office xp)

20. 20 Create Web Site

21. 21 Create Web Site Displays the selected folder The structure of your web site Navigation pane

22. 22 Add new page

23. 23 Add navigation toolbar

24. 24 Create Navigation view drag

25. 25 Navigation view Provide a visual representation of our web structure Automatically create navigation bars on all your web pages, which –Link the pages in your web site together –Will appear in the shared borders of your web pages Shared border: when you view the pages in FrontPage or a browser, the navigation bars appear consistently in the same areas (called shared borders) on all the pages. These shared borders are updated automatically whenever you add, move, rename, or delete pages in your web structure