Basic MS FrontPage

1
Basic MS FrontPage
2
Getting started

• Web page is a single HTML file (document)
• Web is a folder (directory) HTML file(s)

3
Selecting a blank page
4
First HTML document working view

• FP provides 3 different views for a working
  document
• Normal WYSIWYG Editing
• HTML HTML code editing
• Preview output preview

5
First HTML page source view

• FP provides 3 different views for a working
  document
• Normal WYSIWYG Editing
• HTML HTML code editing
• Preview output preview

6
Basic content

• In the Normal view, you can enter and format text
  in a manner similar to a word processor
• text fonts/colors/size
• text style formatting
• (bold, italics, etc.)
• bulleted/numbered lists
• headings (h1-h6)
• Etc.

7
Saving Your File
8
Saved HTML file in Front Page
9
HTML Code View of the Document
10
Setting Page Properties
11
Setting Page Properties(Page Title)
12
Setting Page Properties(Page Title)
13
Setting Page Properties(Default Background,
Text, or Link Colors)
14
Setting Page Properties(Default Document Styles,
e.g., Font or Parag. Styling, etc.)
15
Setting Page Properties(Default Document Font
Styling)
16
Setting Page Properties(Default Document Font
Styling)
17
Setting Page Properties(Default Document Font
Styling)
18
Changing a Heading Style
19
Adding a List (Bulleted or Numbered)
20
Adding a List (Bulleted or Numbered)
21
Adding a Hyperlink
First select the text associated with the link
22
Adding a Hyperlink
Type the URL in the Address box of the Insert
Hyperlink Dialog box.
23
Adding a Hyperlink
24
Adding a Hyperlink(to another page on the same
computer)
In the Insert Hyperlink Dialog, browse to the
location of the page to which you are creating
the link.
25
Adding a Hyperlink(to another page on the same
computer)
In the Insert Hyperlink Dialog, browse to the
location of the page to which you are creating
the link.
26
Adding a Hyperlink(to another page on the same
computer)
Important the relative position of files and
folders must be preserved when these pages and
folders are uploaded to the server. Otherwise,
relative URLs will not work.
Note that our document is stored in My
Documents/hci201 folder while the linked page is
in My Documents/MyOtherPages folder. The
relative path ../MyOtherPages/my_other_page.html
means go up one level (this is the ../ in
the address) to parent folder My Documents,
then go into the subfolder of My Documents
called MyOtherPages, and finally, select the
file my_other_page.html.
27
Adding a Hyperlink
28
Adding an Image
Place cursor where you want the image and the use
the Insert menu.
29
Adding an Image
30
Adding an Image
By selecting and dragging the dots on the
perimeter, the image can be resized.
31
Adding an Image
Right-click on the image and select properties.
The properties dialog box allows you to set
alignment, horizontal or vertical spacing (from
surrounding text) and borders.
32
Working with Tables
You can use the Table menu or the table icon on
the tool bar to insert a table. The specified
table is inserted at the current location of the
cursor.
33
Working with Tables
34
Working with Tables
In each table cell, you can type in text, insert
images, or put in any other element that can
normally be used in a page. You can also resize
the rows or columns by selecting the
corresponding border lines and dragging.
35
Working with Tables
While cursor is inside the table, select the
table properties item from the Table menu.
Note selecting Cell instead of Table will
allow you to modify only the properties of the
current cell.
36
Working with Tables
The dialog box provides control over cell-padding
to cell-spacing height or width borders
background colors table alignment etc.
37
Working with Tables
38
Working with Tables(Changing Cell Properties)
Select the cells you want to modify and then
select Cell Properties from the Table Menu.
39
Working with Tables
Cell Properties dialog box provides control over
hor. Or vert. alignment in the cell, background
colors row or column spanning etc.
40
Working with Tables
41
View the Saved File in a Browser