FrontPage

1
FrontPage

• For a 30-day trial, that allows you to use it
  over the internet
• http//www.runaware.com/microsoft/frontpage2003/

Liz Stacey
2
Table of Contents

• Basic webpage design
• Organizing your page
• Designing your page
• Images
• FrontPage
• Sources of help

3
Basic Webpage Design

• Keep it simple
• (KISS, simple straight)
• (KILL,large legible)
• Easy to Read
• Fonts
• Color/background
• Avoid green/red combinations.
• Avoid text over images.
• Left justified
• Patience
• Mistakes are learning tools.
• Help is readily available.

4
Organizing Your Page

• Visit other websites
• What did you like?
• Was it easy to follow?
• Was it well organized?
• What didnt you like?

5
Organizing Your Page

• Map out a rough design
• Save time
• Prevent mistakes
• Assist with links

Heading or Banner using a table for ease in
alignments
logo
Menu with links
Display linked page
6
Organizing Your Page

• Create one folder
• All webpages for your site
• All images, html files, etc.

7
Creating your Folders for WT in Explorer

• Create a folder for your site Under WT
• Create folders for
• images
• assign1
• assign2
• .
• .
• assign10
• exercise1
• .
• .
• exercise10
• Copy your wt.jpg and your two picture files to
  images under WT

8
FrontPage
9
Different Views

• View Code and Design

10
Create a Three Frame Window

• Choose New from File Menu
• Choose In the New Page section on the Taskbar,
  click More Page templates
• Click the Fames Pages tab, then Choose Banner and
  Contents, then OK

11
Split Frame Window

• Select the Banner Frame (top)
• Choose Frame Split Frame into columns

12
Split Frame Window

• Resize, like Excel

13
File Save

• Choose File Save.Under WT\index

14
Frame Naming

• With the Correct Frame Selected (click in the
  frame to select it, then right-mouse, under
  properties)
• Name Frame
• logo.htm
• id.htm
• menu.htm
• main.htm

15
id frame Selected (Click on it)

• Table insert

16
id frame Selected (Click on it)

• Resize Frame width

17
Images

• Use jpeg format for faster transfer.
• MUST be saved in Images folder and inserted from
  folder.
• Edit image size to fit layer. Image size does
  not change to fit in layer as a background.

18
Logo Frame wt.jpg Image

• Select Logo Frame
• Insert image via Insert menu or Common Toolbar

19
Preview in Browser (File Preview in
Browseriexplore or F12)
20
Menu Frame Table Properties

• Create a 22 row, 2 column table
• Merge cells for Assignments Exercise titles
• Add 10 Assign 1 10
• Add 10 Exercise 1 10
• Properties Assign 110
• Link assign1/assign1.ppt
• Link assign2/assign2.htm exercises
• Target main

21
Main Frame Image

• Insert your Face Front Picture
• In picture properties
• Center Picture

22
Events and Event handlers

• Events that cause javascript code to be executed
• onmouseover
• onmouseout
• Rollover example Events for an Image Object

lthtmlgt lt!-- code the event in the image tag
directly poor because not all browsers support
events in img tag --gt ltheadgt lt/headgt ltbodygt ltdiv
align"center"gt ltimg src"images/harrison_ford.jpg
" width"240" height"350" name
photo onmouseover "document.photo.src
'images/harrison_ford_rollover.jpg'" onMouseout"
document.photo.src'images/harrison_ford.jpg'" al
t "Harrison Picture"gt lt/divgtlt/bodygt lt/htmlgt
the event handler sends a single line of code to
the browser the code is enclosed within
quotes statement must end with a semicolon
23
Events and Event handlers

• Events that cause javascript code to be executed
• onmouseover
• onmouseout
• Rollover example Events coded for an anchor tag

lthtmlgt lt!-- code the event in an anchor tag
better because not all browsers support events in
img tag --gt ltheadgt lt\headgt ltbodygt ltdiv align
"center"gt lta href "" onMouseOver
"document.photo.src 'images/harrison_ford_rollov
er.jpg'" onMouseOut"document.photo.src'images/h
arrison_ford.jpg'"gt ltimg src"images/harrison_for
d.jpg" width"240" height"350" name photo alt
"Harrison Picture"gt lt/agt lt/divgt lt/bodygt lt/htmlgt
24
Events and Event handlers