Web Design-Lecture3-QN-2003

Web Design

Enhancing a Website

Web Design-Lecture3-QN-2003

Third Lecture

Adding navigation bars to web pagesApplying graphical themePreviewing & testing of a web sitePreparing website for publication

Web Design-Lecture3-QN-2003

Navigation Structure

Create new One Page Web in FrontPage, save it into a folder e.g. Lecture3Click Navigation icon on the Views barYou will see Navigation bar and a box with “Home Page” written on itClick that box

Web Design-Lecture3-QN-2003

Create Navigation Structure (1)

Click New Page icon on the standard toolbarPress Tab key once, and the highlight (blue) will move to the new pageType a name, for example: “About Us”, and press Enter

Web Design-Lecture3-QN-2003

Create Navigation Structure (2)

Click the Home Page againHold 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

Web Design-Lecture3-QN-2003

Viewing Navigation Structure

Double-click the Home PageYou’ll see how the page’s names in the Folder List view have already changed according to what you have typed

Web Design-Lecture3-QN-2003

Import File to index.htm

In the Navigation view, double-click index.htmInsert FileBrowse and find a previously made file, e.g. your previous lecture practice fileSave the file, the Save Embedded File dialog box will come outYou may want to change folder location of the embedded files before saving

Web Design-Lecture3-QN-2003

Enhancing Appearance - Hyperlinks

Double-click index.htm and press Ctrl+End to go to the bottom of pageDrag the page “about_us.htm” from folder list view to the bottom of the pageDo the same thing for other pagesYou’ll see hyperlinks at the bottom of index.htm

Web Design-Lecture3-QN-2003

Enhancing Appearance – Navigation Bar

Let’s undo the last 4 actionsGo to Navigation view and click Format Shared BordersHorizontal 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.

Web Design-Lecture3-QN-2003

Testing Navigation Bar

Click any links by holding down Ctrl buttonLeft navigation bar: all pages have itTop navigation bar: all pages have it except Home Page

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 BarDouble click: Navigation Bar properties dialog boxClick “Child level” and clear the check boxes for “Home page” and “Parent page”Now the Home Page also has top navigation bar

Web Design-Lecture3-QN-2003

Customizing Navigation Bar (2)

Double click left Navigation Bar: Navigation Bar properties dialog boxClick “Same level” and check the check box for “Home page” Now the Home Page does not have left navigation bar

Web Design-Lecture3-QN-2003

Applying a Theme

Click index.htm, then click Format ThemeChoose the theme you like, e.g. BlendsMake sure “All pages” is selectedDeselect “Active graphics” before clicking OKA question will pop up, just click Yes. We haven’t done much manual formatting, so there’s no need to worry

Web Design-Lecture3-QN-2003

Modifying a Theme (1)

Click Navigation tab and choose index.htmClick Format Theme, in the dialog box make sure that “All pages” is selectedClick Modify, when asked what to modify click GraphicsLet’s try modifying the bannerClick “Banner” in the Item listOn the Picture tab, click Browse

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 themeSince the default theme is read only, you’ll have to save it to different theme

Web Design-Lecture3-QN-2003

Previewing your Website

File Preview in BrowserSelect browserFrontPage will launch the browser and let you preview your website

Web Design-Lecture3-QN-2003

Preparing your Web for Publishing

Firstly, you may want to:Organize filesPutting all image files into one folder called “images”

Generating a Site SummaryAll filesSlow pagesBroken hyperlinksFunctioning hyperlinks

Spelling Checking

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”