Microsoft FrontPage 2002

1
Microsoft FrontPage 2002

• Tutorial 2 Creating Web Pages With Multimedia,
  Special Effects, and Hyperlinks

2
Change the background color of a Web page

• By default, the background color of all Web pages
  is white.
  
• Most text and graphics display best on a white
  background, but there is little visual interest
  to that.
  
• You can use any of the standard colors or the
  Web-safe colors available in the More Colors
  palette.
  
• It is important to emphasize that you select one
  that coordinates well with the text color you
  have selected.
  
• If, after making edits, you find that none of the
  colors work, you can always change back to the
  white background.

3
Change the background color

• To apply a background color, click the Format
  menu and then click Background to open the Page
  Properties dialog box.
  
• In the dialog box, select the Background tab.
• Click the Background list arrow in the Colors
  section to display the Standard Colors chart.
  
• Click a color to apply it to the Web page.
• Click OK to return to the page and see how it
  looks.
  
• If the color you chose is too dark, the text will
  be hard to read and you will have to repeat the
  process until you find a color that works

4
The Background tab of the Page Properties dialog
box
This figure shows the background colors palette
displayed. You can choose one of the standard
colors shown, or click the More Colors button to
select a custom color.
5
A Web page with a blue background
The blue color that was selected in the previous
figure has now been selected and applied to the
Web page.
Note that this dark blue background and the black
text do not go well together. You should either
choose a different background color, or change
the text color.
6
Apply a theme to a Web site

• When a solid background color isn't what you want
  on a Web page, you can try one of the FrontPage
  Themes.
  
• Themes are coordinated design elements and color
  schemes that can be applied to a single page in
  your Web site or to all of them.
  
• If you don't find a theme that meets your needs,
  you can modify existing ones or create your own.

7
Apply a theme

• To apply a theme, click Format on the menu bar
  and select Theme.
  
• In the Themes dialog box, you will find a list of
  all the available themes.
  
• Scroll through them and click on any theme to see
  a preview of the theme in the Sample of Theme
  box.
  
• Some of the themes may not be installed and may
  require Microsoft Office installation CD to be
  inserted

8
The Themes dialog box
When you click on a theme name in the left hand
pane, you will see a preview of that theme in the
right hand pane. You can change any aspect of the
theme by clicking the Modify button at the bottom
of the dialog box.
9
Finish applying the theme

• You can apply a theme to all pages or just
  selected pages.
  
• Once you've selected a theme, click OK and then
  click Yes. A message appears indicating that
  applying the theme will change the way your Web
  page(s) appear.
• All the elements in your Web page(s) will change
  to the elements specified in the theme.

10
A Web page with a theme applied
This Web page has had a theme applied to it.
This theme includes a background, pre-formatted
horizontal lines, and colors assigned to the
pages hyperlinks.
11
Insert a picture on a Web page

• Web pages need more than text and navigation bars
  to be interesting.
  
• Logos, graphics, and photographs can all work
  together to make your site attractive and
  inviting to the user.
  
• The two most widely used file formats for
  graphics are GIF and JPEG
  
• GIF files are small and load fast
• JPEG files are usually larger than GIF, but are
  best-suited for photographs
  
• Most browsers will support both of these formats
  
  
• When you save a Web page in which you have
  inserted a picture, you must be sure to save the
  picture to the Web site's images folder.

12
Add a picture

• To add a picture to your Web page, click in the
  page where you want the picture to be placed.
  
• Click the Insert Picture From File button on the
  Standard toolbar.
  
• In the Picture dialog box, click the Look in list
  arrow to locate the picture and double-click it
  to insert it on your page.

13
A Web page with a graphic
This figure shows a graphic inserted on a Web
page.
14
Use sound files in Web pages

• Just like a theme can add interest to your Web
  site, so can a sound file.
  
• Sound files come in two formats WAV or MIDI. WAV
  files provide higher quality sound, but MIDI
  files are smaller.
  
• You (and the Web page user) must have a computer
  equipped with a sound card and speakers to take
  advantage of this.

15
Add sound to a Web page

• To add a sound file to a page
• Click the File menu, and then select Properties
• On the General tab, click the Browse button in
  the Background sound section
  
• Click the Look in list arrow to browse for the
  sound file
  
• Double-click the file to select it
• You can specify that the sound play forever in
  the Loop section or use the Loop text box to
  specify how many times the sound will play. Click
  OK
• You can test the sound file on the Preview tab.
• Make sure the sound file is saved in the Web
  site's images folder.
  

16
Sound file considerations

• While sound files can add interest to a Web page,
  they also have disadvantages.
  
• One disadvantage is that they take longer to
  download than page text and most images.
  
• The viewer can lose interest in the page if it
  takes too long to load.
  
• Also, the overuse of sound clips can cause some
  people to become irritated at the constant sound
  and leave before viewing the whole page.

17
Insert a marquee on a Web page

• A marquee is an eye-catching graphic that you can
  add to a Web page.
  
• It's actually a text box that displays a
  scrolling message that you create.
  
• You can use existing text for the marquee or add
  new text.
  
• Marquees should be used sparingly because they
  can easily overpower a page and distract the Web
  page viewer.

18
Add a marquee

• To add a marquee
• Select the text for the scrolling message or
  click on the page in the area you want the
  marquee text to appear
  
• Click the Web Component button on the Standard
  toolbar to open the Insert Web Component dialog
  box
  
• Click on Dynamic Effects in the Component type
  list, and then click Marquee in the Choose an
  effect list
  
• Click the Finish button, and the Marquee
  Properties dialog box will open
  
• Click OK to activate the marquee
• You can apply formats and other characteristics
  to the marquee using options in this dialog box.
  
• You can test the marquee by first saving the
  page, then changing to Preview page view.

19
The Marquee Properties dialog box
You can create and customize the marquee in this
dialog box. There are many options that can be
set, including the direction the marquee will
run, the timing of each run, the color of the
text and the background, etc.
20
Import an existing Web page into a Web site

• The ability to import existing Web pages into a
  Web site can save you the time and effort of
  re-keying information that's already keyed in and
  in the proper HTML format.
• To import a Web page, be sure the Web site you
  want to import to is open in the Folders view.
  
• Click the File menu and then click Import.
• In the Import dialog box, click the Add File
  button to open the Add File to Import List dialog
  box.
  
• Use the Look in list arrow to navigate to the
  HTML file and double-click it.
  
• You will then return to the Import dialog box
  where the file's path will display.

21
Import additional pages

• You can repeat the process from the previous
  slide with the Add File button to include
  multiple files.
  
• Click the OK button to import the selected
  file(s) into the open Web site.
  
• The new HTML file will display as a page in the
  Contents pane.
  
• Once the page is part of the Web site, you can
  double-click it to open it in Page view and
  modify it like other pages.

22
Open an imported page

• The imported Web page can be opened by
  double-clicking on the file name in the Contents
  pane.
  
• The imported file will have the default white
  background.
  
• If other files already in the Web site have a
  theme applied, you should apply the same theme to
  the imported file for continuity.

23
View imported pages in Folders view
This figure illustrates the Folders view with an
imported Web page, along with the previously
existing index.htm page.
24
Insert the contents of a file in a Web page

• Entering several paragraphs of text or tables of
  data to a Web page takes time.
  
• But, if the text or data already exist in another
  file format, such as Word, Excel, or Access, you
  can easily import it into the page.
  
• FrontPage will automatically convert it to HTML
  once it's included on the page.

25
Import text

• To import text
• Open the Web page where the text will be included
  and position your pointer to where you want the
  data inserted
  
• Open the Select File dialog box
• Use the Look in list arrow to navigate to the
  file you want to insert
  
• FrontPage will only display HTML pages by
  default, so you will have to change the Files of
  type list box to All Files, or their specific
  file type
• Find the file in the dialog box and double-click
  it
  
• The contents of the file will be added to your
  Web page.
  
• When you double click the file to add it to the
  Web page, the file will be opened and its
  contents converted automatically to HTML.
  

26
A Word file imported into a Web page
An example of an imported file in Web page format
is shown in this figure.
27
Create bookmarks and hyperlink to them on a Web
page

• Bookmarks on a page will help users easily
  navigate through large chunks of text without
  using the scroll bar.
  
• A bookmark is a named location within the text,
  which becomes the target for a hyperlink
  
• You can place a table of contents at the top of a
  Web page and then insert a hyperlink for each
  entry to its location in the body of text.
  
• The user can then click the contents entry and
  jump directly to the topic.
  
• At the end of the topic, you can place a
  hyperlink that takes the user back to the
  contents.
  
• You need to create your bookmarks first (each one
  must have a unique name) and then create the
  hyperlinks to each bookmark.

28
Create a bookmark

• To create a bookmark, select the text you want to
  become a bookmark and click the Insert menu.
  
• Select Bookmark from the menu to open the
  Bookmark dialog box.
  
• The text that you selected is automatically used
  as the bookmark name. You can change this name if
  you like.
  
• Click the OK button.
• The text you selected as the bookmark will now be
  underlined with a dashed line.

29
The Bookmark dialog box
This figure shows the text that was selected in
the document and the Bookmark dialog box. The
selected text will display as the suggested name
for the bookmark. You can accept it or you can
enter a different name to identify that bookmark.
30
A page with bookmarks inserted
This figure shows a page that has had bookmarks
inserted into it. Note the bookmarks appear with
a dashed underline beneath them.
31
Create a hyperlink for a bookmark

• To insert a hyperlink to the bookmark, select the
  text to use for the bookmark and click the Insert
  Hyperlink button on the Standard toolbar.
  
• Click the Place in This Document button on the
  Link bar to display a list of bookmarks in the
  Web page.
  
• Select the bookmark to be the target of the
  hyperlink and then click the OK button.
  

32
Create and test hyperlinks to other Web pages

• Select the hyperlink's location on the current
  Web page and then specify the target Web page.
  
• You should also create return hyperlinks from
  each page you linked to from the index.htm page
  
• On all the other pages, you should add a Home
  hyperlink to allow the viewer to instantly return
  to the home page
  
• You should test all your hyperlinks in a
  browser.
  
• Click the Preview in Browser button on the
  Standard toolbar and the browser will open the
  selected Web page.
  
• Click the hyperlinks to ensure they jump to the
  correct target.

33
Create a hyperlink

• To create hyperlinks to Web pages
• Select the text that will be the link
• Click the Insert Hyperlink button on the Standard
  toolbar
  
• When the Insert Hyperlink dialog box opens
• Click the Existing File or Web Page button
• Locate the file name in the file list
• Click the OK button

34
Create an e-mail hyperlink

• An e-mail hyperlink allows users to click the
  link to easily send a message to the address
  embedded in the link.
  
• FrontPage recognizes e-mail addresses when you
  enter them on a page and automatically changes
  them to hyperlinks
  
• You simply enter a mailto or select an object,
  like a mailbox graphic, and the link is
  automatically set.
  
• To create an e-mail link, open the page where you
  want to add the e-mail link, click where you want
  the link to be positioned, and type in the full
  address, such as jane.smith_at_xyzcompany.com.
• When you press the spacebar, FrontPage will
  change the text into a hyperlink.
  
• Click the Preview in Browser button so you can
  test the address in Internet Explorer.

35
A mailto hyperlink in a Web page
In this figure a mailto address has been entered
into a Web page. Notice that the text
automatically appears in a different format then
the rest of the text on the page.
When you point to the e-mail address in the Web
page, the status bar also shows the address to
which mail will be sent.