1 / 23

Tutorial 4

Tutorial 4. Prepared by Wang Shiyu. Advanced Web page design. Note: For testing the effects (or functions) taught in this tutorial, you must create a web site first (see slides 19-25 in tutorial 3). Otherwise, some of the effects introduced in this tutorial can not be implemented correctly.

tanisha-gilliam
Download Presentation

Tutorial 4

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Tutorial 4 Prepared by Wang Shiyu

  2. Advanced Web page design • Note: For testing the effects (or functions) taught in this tutorial, you must create a web site first (see slides 19-25 in tutorial 3). Otherwise, some of the effects introduced in this tutorial can not be implemented correctly

  3. Page banner Navigation bar Shared border Adding theme, page banner, and navigation bar theme

  4. Add theme • Menu->format->theme • It is more like a page template (see slide5) • Without adding page banner, navigation bar et al, the effect of the defined theme can not be seen by designer (see slide 6)

  5. Define these components’ style

  6. A page with theme, but without other components (e.g., page banner)

  7. Add shared borders • Define shared borders for page banner and navigation bar • Menu->format-> shared borders • In shared border, FrontPage creates page banner and navigation bar automatically (see slide 9-10)

  8. Modify the property of page banner Picture Appear with picture

  9. Modify the property of navigation bar

  10. A page with theme, shared border, page banner, and navigation bar

  11. Insert page banner, navigation bar by hand • Page banner and navigation bar can also be added into shared borders by hand. • Insert page banner • Menu->insert->page banner • Insert navigation bar • Menu->Insert->web component (see slide 13-16)

  12. Insert navigation bar by hand

  13. Insert navigation bar by hand Use a style base on the theme of pages Can also use other style (see slide 16)

  14. Add other navigation bar (bar with custom links) define the style of the bar Define the layout for the bar

  15. Add other navigation bar (bar with custom links) Text displayed in bar Add some page to which the link bar will link

  16. Add other navigation bar (bar with custom links) bar with custom links

  17. Add photo gallery • Menu->insert->web component

  18. Add photo gallery

  19. Add photo gallery

  20. View photo gallery effect in IE

More Related