ECT 502

1
ECT 502

• Introduction to FrontPage

2
Lesson 1 Introduction to FP

• Navigate the views, panels, and palettes in your
  software.
• Be able to find help and other resources when you
  need them.

3
Menu Bar
Help
4
Lesson 2

• Create a simple first web page and apply various
  formatting.
• Play with your software to get a sense of what it
  can do.

5
Lesson 2

• Opening a new document
• Use the blank page that appeared when you opened
  the software (new_page_1.html), or use
  FileNewPage or WebNewBlank Page.
• Saving your file
• Type Welcome to my home page, or something like
  that, just to create some content to save. Save
  your file in a folder on your computer. Give the
  file a name and location that you will remember
  later.
• Use FileSave.

6
Lesson 2 Continued

• Creating a simple home page
• Include your name, information about you, your
  job, your family, and your interests. Simply type
  text as you would in a word processor.

7

• Using headings
• HTML includes six levels of predefined heading
  styles. Headings always have extra vertical space
  before and after the line, and are bolded.
  Available headings from largest to smallest are
  Heading 1 through Heading 6. Heading 4 is the
  same size as regular type, but is bolded with
  space before and after.
• First, make sure the cursor is in the paragraph
  you wish to turn into a heading.
• Click the Style button and select a heading style

8

• Changing Text Size
• Use Format/Font and then select a size.
• Or use the font size drop-down box.

9
Lesson 2 Continued

• Making bulleted lists
• Create your list, then highlight the list, then
  click the bullet button on the toolbar.
• Or use Format/Bullets and Numbering , then select
  Picture Bullets or Plain Bullets.

10
Lesson 2 Continued

• Making numbered lists
• Create your list, then highlight the list, then
  click the Numbered List button on the toolbar.
• Or use FormatBullets and Numbering from the menu
  and select Numbers.

11
Lesson 2 Continued

• Changing the background color
• In general, it is a good idea to be cautious when
  adding background colors. Try to maintain high
  contrast between the color of the text and the
  color of the page.
• Use Format Background.
• Click the Background list under the Color
  section. Select a color. The colors of the Text
  may also be changed as well as the Hyperlink, the
  Visited link, and the Active Hyperlink.

12
Viewing your page in a browser

• Save your page again by using FileSave. Preview
  your page in a web browser.
• FrontPage has a built-in preview at the bottom of
  the editing window. This mode does not allow you
  to test links to other files, however. So use
  this technique
• In page view, click the Preview in Browser
  button.
• Or right-click the filename in the site view and
  choose Preview in Browser.

13
Lesson 3 Working with text, layout and links

• Goals
• Make the text look the way you want on your web
  pages
• Insert tables and images on your web pages
• Create links between your web pages

14
Changing the page properties

• The page properties include colors for text,
  links, background color, and page margins.
• Use FormatBackground to change the background
  color.

15
Justifying text

• Click a Justification button.
• Or press CtrlL for left, CtrlE for center, or
  CtrlR for right.

16
Adjusting text colors

• Use Format/Font. Click Color button and choose a
  color.

17
Inserting a Horizontal Line

• Use Insert/Horizontal Line
• After you have inserted a horizontal line, double
  click on the line and you can change some of the
  attributes of the line, including height, width,
  alignment, color, and shading.

18
Creating Links to URLs

• Highlight text, click on Insert Hyperlink button
• Either type in or copy and paste the URL in the
  address field

19
Inserting Images

• Click the Insert Picture From File button .
  Browse to the image, click OK.
• Or use InsertPictureFrom Clip Art. Browse to
  the image, click OK

20
Creating Bookmarks (Anchors)

• Bookmarks are specified locations on a web page
  that can serve as the destination or target of
  a link. They are used in menus to navigate within
  a page, or can be added to links to the page to
  specify a particular spot in the page.
• To insert a bookmark in FrontPage
• Select InsertBookmark and fill in a name

21
Linking to a bookmark within a page

• The whole point of creating a bookmark is that
  you can link to it either from within the same
  page or from another page. You might want to link
  to bookmarks within a page from a menu at the top
  of the page.
• Front Page
• Use InsertHyperlink and select the correct
  bookmark.

22
Linking to e-mail addresses

• An e-mail link on a web page pops up an e-mail
  compose box with the address already in the To
  field.
• First, highlight the text you want to link from.
• FrontPage
• Click on the HyperLink button and select the
  E-mail address button. Fill in the Text to
  display field. Then type your e-mail address
  (e.g., pleonard_at_latech.edu) into the E-mail
  field. FrontPage will add the mailto

23
Adding tables

• Tables consist of rows, columns, and cells. They
  can be used for displaying tabular data, for
  example names and email addresses. They also
  allow careful positioning of elements on a page.
  You can nest tables within tables in order to
  achieve exact placement.
• You can set the color and formatting of
  individual cells or groups of cells.
• FrontPage
• Use TableInsertTable. Choose number of rows and
  columns.

24
Task

• Create a simple one-page web about entitled,
  Pets or Hobbies or My Family and include
  the following
• Your name and other relevant information about
  you
• Information about the topic you chose
• Your webpage should include the following
  formatting items
• A bulleted list
• At least two different levels of text
• A background color
• A table
• Some graphics
• Be ready to share your one-page webpage