Web Design

1
Web Design

• Enhancing a Website

2
Third Lecture

• Adding navigation bars to web pages
• Applying graphical theme
• Previewing testing of a web site
• Preparing website for publication

3
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
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
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
Viewing Navigation Structure

• Double-click the Home Page
• Youll see how the pages names in the Folder
  List view have already changed according to what
  you have typed

7
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
Enhancing Appearance - Hyperlinks

• Double-click index.htm and press CtrlEnd 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
• Youll see hyperlinks at the bottom of index.htm

9
Enhancing Appearance Navigation Bar

• Lets 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
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
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
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
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
  havent done much manual formatting, so theres
  no need to worry

14
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
• Lets try modifying the banner
• Click Banner in the Item list
• On the Picture tab, click Browse

15
Modifying a Theme (2)

• Find a suitable .gif file for banner (if its 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, youll have
  to save it to different theme

16
Previewing your Website

• File ? Preview in Browser
• Select browser
• FrontPage will launch the browser and let you
  preview your website

17
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
Read more...

• An explanation of this lecture http//www.cs.ui.ac
  .id/kuliah/webdesign/ ? see the link Details on
  Lecture 3