1. Web Design-Lecture3-QN-2003 Web Design Enhancing a Website

2. Web Design-Lecture3-QN-2003 Third Lecture Adding navigation bars to web pages Applying graphical theme Previewing & testing of a web site Preparing website for publication

3. Web Design-Lecture3-QN-2003 Navigation Structure Create new One Page Web in FrontPage, save it into a folder e.g. Lecture3 Click Navigation icon on the Views bar You will see Navigation bar and a box with “Home Page” written on it Click that box

4. Web Design-Lecture3-QN-2003 Create Navigation Structure (1) Click New Page icon on the standard toolbar Press Tab key once, and the highlight (blue) will move to the new page Type a name, for example: “About Us”, and press Enter

5. Web Design-Lecture3-QN-2003 Create Navigation Structure (2) Click the Home Page again Hold down Ctrl key and press N three times (Ctrl + N replaces New Page button) Press Tab key to move the highlight to a new page, and then type a name, then press Enter. Do the same thing to the other new pages

6. Web Design-Lecture3-QN-2003 Viewing Navigation Structure Double-click the Home Page You’ll see how the page’s names in the Folder List view have already changed according to what you have typed

7. Web Design-Lecture3-QN-2003 Import File to index.htm In the Navigation view, double-click index.htm Insert  File Browse and find a previously made file, e.g. your previous lecture practice file Save the file, the Save Embedded File dialog box will come out You may want to change folder location of the embedded files before saving

8. Web Design-Lecture3-QN-2003 Enhancing Appearance - Hyperlinks Double-click index.htm and press Ctrl+End to go to the bottom of page Drag the page “about_us.htm” from folder list view to the bottom of the page Do the same thing for other pages You’ll see hyperlinks at the bottom of index.htm

9. Web Design-Lecture3-QN-2003 Enhancing Appearance – Navigation Bar Let’s undo the last 4 actions Go to Navigation view and click Format  Shared Borders Horizontal shared border: select the Top check box and select the Include navigation buttons check box just below it. Vertical shared border: select the Left check box and select the Include navigation buttons check box below it.

10. Web Design-Lecture3-QN-2003 Testing Navigation Bar Click any links by holding down Ctrl button Left navigation bar: all pages have it Top navigation bar: all pages have it except Home Page

11. Web Design-Lecture3-QN-2003 Customizing Navigation Bar (1) See the sign: “Edit the properties for this Link Bar to display hyperlinks here” on the top Navigation Bar Double click: Navigation Bar properties dialog box Click “Child level” and clear the check boxes for “Home page” and “Parent page” Now the Home Page also has top navigation bar

12. Web Design-Lecture3-QN-2003 Customizing Navigation Bar (2) Double click left Navigation Bar: Navigation Bar properties dialog box Click “Same level” and check the check box for “Home page” Now the Home Page does not have left navigation bar

13. Web Design-Lecture3-QN-2003 Applying a Theme Click index.htm, then click Format  Theme Choose the theme you like, e.g. Blends Make sure “All pages” is selected Deselect “Active graphics” before clicking OK A question will pop up, just click Yes. We haven’t done much manual formatting, so there’s no need to worry

14. Web Design-Lecture3-QN-2003 Modifying a Theme (1) Click Navigation tab and choose index.htm Click Format  Theme, in the dialog box make sure that “All pages” is selected Click Modify, when asked what to modify click Graphics Let’s try modifying the banner Click “Banner” in the Item list On the Picture tab, click Browse

15. Web Design-Lecture3-QN-2003 Modifying a Theme (2) Find a suitable.gif file for banner (if it’s a.jpg then it will be automatically converted to.gif) After clicking OK, FrontPage will ask about saving the file to the theme Since the default theme is read only, you’ll have to save it to different theme

16. Web Design-Lecture3-QN-2003 Previewing your Website File  Preview in Browser Select browser FrontPage will launch the browser and let you preview your website

17. Web Design-Lecture3-QN-2003 Preparing your Web for Publishing Firstly, you may want to: Organize files Putting all image files into one folder called “images” Generating a Site Summary All files Slow pages Broken hyperlinks Functioning hyperlinks Spelling Checking

18. Web Design-Lecture3-QN-2003 Read more... An explanation of this lecture http://www.cs.ui.ac.id/kuliah/webdesign/  see the link “Details on Lecture 3”