New Perspectives on Microsoft Office FrontPage 2003 Tutorial 2 - PowerPoint PPT Presentation


PPT – New Perspectives on Microsoft Office FrontPage 2003 Tutorial 2 PowerPoint presentation | free to view - id: c678-MjhhN


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation

New Perspectives on Microsoft Office FrontPage 2003 Tutorial 2


Microsoft Office FrontPage 2003. Tutorial 2 Working with Graphics. and Hyperlinks ... Microsoft Office FrontPage 2003 Tutorial 2. 12. XP. Import an existing ... – PowerPoint PPT presentation

Number of Views:2393
Avg rating:3.0/5.0
Slides: 32
Provided by: course167


Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: New Perspectives on Microsoft Office FrontPage 2003 Tutorial 2

Microsoft Office FrontPage 2003
  • Tutorial 2 Working with Graphics and Hyperlinks

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
  • 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.

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 Formatting 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
  • 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

The Background tab of the Page Properties dialog
A Web page with a yellow background
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 three most widely used file formats for
    graphics are GIF, JPEG, and PNG
  • GIF files are small and load fast
  • JPEG files are usually larger than GIF, but are
    best-suited for photographs
  • PNG was created as a license-free alternative to
  • 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.

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.

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
  • 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.

The Marquee Properties dialog box
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.

A Web page with a graphic
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
  • 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.

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.

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

View imported pages in Folders view
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.

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
  • 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

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, select the text to
    format as a mailto, and click the Insert
    Hyperlink button on the Standard toolbar.
  • In the Insert Hyperlink dialog box, click the
    E-mail Address button on the Link to bar.
  • Type the target e-mail address in the E-mail
    address text box.
  • If desired, type an optional subject in the
    Subject text box .
  • Click the OK button.

A mailto hyperlink in a Web page
Creating an Image Map
  • Click the picture in which to create the hotspot
    to select it.
  • Click the button for the desired hotspot shape on
    the Pictures toolbar.
  • Click and hold down the mouse button while you
    drag the pointer to specify the desired size of
    the hotspot on the picture, and then release the
    mouse button. The Insert Hyperlink dialog box
  • Click the button on the Link to bar to specify
    the target of the hyperlink, and then specify the
    target of the hyperlink on the page that opens.
  • Click the OK button.

Creating a Hotspot
Highlighting Hotspots in a Picture
  • Click the picture that contains the hotspot(s) to
    select it.
  • Click the Highlight Hotspots button on the
    Pictures toolbar.
  • Click the Highlight Hotspots button again to turn
    off the highlights.

Creating a Thumbnail Picture
  • A thumbnail picture is a small picture that
    contains a hyperlink to a larger version of the
    same picture, or to any other target, such as a
    Web page.
  • If necessary, insert the full-size picture into
    the Web page in the desired location.
  • Select the picture.
  • Click the Auto Thumbnail button on the Pictures

Creating a Thumbnail Picture
Adding Text on a Picture
  • Click the picture to select it.
  • Click the Text button on the Pictures toolbar to
    open a text box on top of the selected picture.
    If necessary, click the OK button to convert the
    picture to a GIF file.
  • Type the desired text. If necessary, press the
    Enter key to start a new line, and format the
    text as desired.
  • Click anywhere in the Web page to close the text

Text Added on Thumbnail Picture
Creating an Interactive Button
  • An interactive button is a button that displays
    special effects to change its appearance
    depending on how the user interacts with it.
  • Click the location in the Web page to insert the
    interactive button.
  • Click Insert on the menu bar, and then click
    Interactive Button. The Interactive Buttons
    dialog box opens.
  • On the Button tab, select the type of button you
    want to create. Select the default text in the
    Text box, and then type the text that you want to
    appear on the button. Finally, click the Browse
    button to select the target of the hyperlink.

Creating an Interactive Button
  • If desired, click the Text tab to change the
    default font, font style, font size, font color,
    and alignment of the button.
  • If desired, click the Image tab to change the
    buttons size, characteristics, background color,
    or transparency.
  • Click the OK button.

Interactive Buttons Dialog Box
Applying a Page Transition
  • A page transition is an animated effect that you
    can apply to one or more Web pages in a Web site.
  • With the desired page open in Design view, click
    Format on the menu bar, and then click Page
    Transition to open the Page Transitions dialog
  • If necessary, click the Event list arrow, and
    then select the desired event.
  • Enter a value (in seconds) in the Duration
    (seconds) text box.
  • Click the desired transition effect.
  • Click the OK button.

Page Transitions Dialog Box