Exploring FrontPage 2003

1
Exploring FrontPage 2003
Prerequisites Windows XP Robert Grauer and
Maryann Barber
Committed to Shaping the Next Generation
of IT Experts.
2
Objectives

• Use FrontPage to
• Create a web page
• Open a web page
• Rename a web page
• Define HTML - View and modify source code
• Format text and paragraphs - Add visual elements
  to a page
• Add hyperlinks that reference Internal and
  External Links

3
Objectives (continued)

• Create a web page using
• Templates
• Themes
• Layout Tables
• Add active elements to a web page
• Understand FrontPage Views
• Print a website from Navigation View
• Publish the website to floppy disk

4
Case Study The Better Signs Company

• The opening case study focuses on the
  creation of a website for the Better Signs
  company. College roommates, Jane Olsen and Beth
  Reilly, started the company with a goal of
  raising enough money to send their business
  school entrepreneurship team to national
  competition. They have realized that a website
  will help promote their cause, and sell their
  goods. Students will create a website for the
  Better Sign Company by completing a series of
  three exercises.

5
Introduction to FrontPage

• FrontPage is a website creation and management
  software that
• Creates HTML (Hypertext Markup Language)
• Allows a user to format documents in a manner
  similar to a web processor
• Provides different views for accomplishing
  different tasks

6
Introduction to FrontPage (continued)

• Allows a user to add active elements, such as
  marquees, to his or her web page
• Helps a user publish his or her website to a
  server
• Helps a user to manage and maintain his or her
  published website

7
Hypertext Markup Language

• HTML consists of tags that are placed around
  plain text.
• The browser follows the instruction of the tags
• lt and gt symbols are used to enclose the tags
• Tags can be viewed in Code View

8
Hypertext Markup Language (continued)

• Users may enter or modify HTML Tags in Code View
• Some tags come in pairs
• An Opening Tag
• A Closing Tag
• Some tags do not need to be closed.
• Closing Tags are denoted by a slash, i.e., lt/bgt

9
Hypertext Markup Language

• FrontPage allows a user to view, enter or modify
  code in Code View

• FrontPage allows a user in Code View to
• View code
• Enter code
• Modify code

HTML Code is color coded
Code View Button
10
Hypertext Markup Language (continued)

• Examples of HTML Tags
• ltbgtThis is bold textlt/bgt
• lth1gt This is a level one headinglt/h1gt
• ltulgtThis begins a list
• ltligtThis is an item in the list lt/ligt
• ltligtThis is another itemlt/ligt
• lt/ulgtThis ends the list
• ltpgt The tag at the end of a line indicating the
  next line will begin a new paragraph

11
FrontPage Toolbars
Standard Toolbar
Formatting Toolbar

• There are many similarities to other Office
  Application Toolbars
• There are subtle differences between the
  FrontPage Toolbars and other Office Application
  Toolbars

12
Hyperlinks

• The power of the web is in the ability to jump
  from one page or site to another page or site
• This ability comes in the form of hyperlinks

From Here
To Here
With one Mouse click
13
Hyperlinks (continued)

• The code behind a hyperlink
• Internal link - lta href faq.htm gtClick here
  to go the FAQ pagelt/agt
• External Link - lta href http//www.google.com
  gtClick here to go to Googlelt/agt

14
Themes

• Create consistency in style
• Speed up page design
• Can be customized
• Can be created from scratch

15
Hands On Exercise 1

• Introduction to HTML - Objective
• To use FrontPage to
• Create a simple home page
• Insert a marquee
• Use formatting commands.
• Input File None
• Output File None

16
Hands On Exercise 1 (continued)

• In this exercise
• Create a one page web using the One Page Website
  Command from the Task Pane
• Create a bulleted list
• Use the align Left, Center, and Bold Buttons on
  the Formatting Toolbar

17
Hands On Exercise 1 (continued)

• Create hyperlinks using the Insert Menu
• Test hyperlinks
• In Design View - Links can be tested by
  holding down Ctrl and clicking the link
• Preview web page
• Click File
• Preview in Browser
• Choose from the browsers
• installed on the computer
• Choose from the choices of resolution
• Insert a Horizontal Rule - Horizontal rules can
  be used
• To add space in a web page
• As a section divider
• As a graphical element

18
Hands On Exercise 1 (continued)

• Format the web page using the Standard
  Toolbar and the Format Menu
• Bold
• Clicking the Bold Button on the Formatting
  Toolbar
• Click Format, Font, Font Style, then Bold
• Insert a Marquee using the
  Web Component Button
• Click Insert, then Web Component,
• Select Marquee
• Enter Text
• and change properties, if necessary

19
Hands On Exercise 1 (continued)

• View and modify the HTML code - Click the Code
  Button
• Add a theme using the Format Menu
• Click Format, then Theme to open the Theme Task
  Pane
• Select a Theme

20
Hands On Exercise 1 (continued)

• Completed exercise viewed in Internet Explorer

21
FrontPage Templates

• Templates simplify and speed up page creation by
  providing
• Page settings
• Page formats
• Page elements
• Templates utilize multi-columned tables for
  layout
• Users can define their own templates
• Additional templates are available for download
  from Microsoft.com

22
FrontPage Templates

• To apply a template
• Choose the Layout Tables and Cells Task Pane
• Choose the Table Layout desired

23
The Photo Gallery

• Uses thumbnail images to display pictures on a
  web
• Several layouts to choose from
• Thumbnail images save downloading time
• Pictures can be edited within the Photo Gallery

24
The Photo Gallery (continued)

• To use the Photo Gallery
• Click Insert
• Click Web Component
• Select Photo Gallery
• Select Layout
• Click Finish
• Insert images

25
Hands-On Exercise 2

• Templates, Interactive Buttons, and the Photo
  Gallery - Objective
• Create a web page using a FrontPage Template
• Add a Photo Gallery
• Add an Interactive Button.
• Input File
• Web page from Exercise 1
• File from Prentice Hall Grauer series website
• Output File Completed web page

26
Hands On Exercise 2 (continued)

• In this exercise
• Open Templates
• Apply Templates
• Modify a Template
• Use the Header, Body
• Footer, and Left Layout
• Set the Page Title
• Click Save
• Click Change Title Button
• Enter Title

27
Hands On Exercise 2 (continued)

• Download photos for the web page - Go to
  www,prenhall.com/grauer
• Create the Photo Gallery
• Click Insert, Picture and New Photo Gallery
• Choose the layout desired
• Click the Picture Tab
• Click the Add Button
• Add pictures

28
Hands On Exercise 2 (continued)

• Insert an Interactive Button
• Click Insert, Interactive Button
• Choose the Button Style
• Click OK
• To link the button
• Right click the button
• Select Hyperlink from the
• Shortcut Menu

29
Hands On Exercise 2 (continued)

• Check the Hyperlinks by either
• Switching to Hyperlink View to verify hyperlinks
• Click Ctrl click in Design View

Hyperlinks button
30
Designing a Corporate Website

• Page Design Basics -
• Plan before beginning
• Top Down Design
• Define the overall website Develop the overall
  structure first
• Break it down into smaller, more manageable
  pieces - Develop individual pages.

31
Page Design

• FrontPage provides Shared Borders that are used
  to display banners and link bars.
• Shared borders add consistency - They can be
  shared among all pages in a site.
• The Corporate Presence Wizard includes Shared
  Borders automatically

32
Publishing a Website

• The Publish Web Command allows a user to publish
  a web page to a web server.
• A user cannot simply copy his or her files to a
  server
• A user may also publish a web page to
• A floppy drive
• A hard drive
• Jump drive (space permitting)

33
Hands On Exercise 3

• Designing a Corporate Website - Objective
• Use a FrontPage Web Wizard to create a simple
  website.
• Input File Web page from Exercise 2
• Output File Published website

34
Hands On Exercise 3 (continued)

• In this exercise
• Use the New Task Pane to display the Website
  Templates Dialog Box
• Use the Corporate Presence Wizard Icon to begin
  the wizard

35
Hands On Exercise 3

• Use the Corporate Presence Wizard to
• Select pages for the website
• Setup a Feedback Form
• Setup a Table of Contents
• Define navigation

36
Hands On Exercise 3 (continued)

• Work with Task View
• Click View
• Click Task View
• This view allows a user to create a to do list
• Tasks may be prioritized and sorted
• Edit the Page Banner
• Page Banners can display
• Pictures
• Text
• Double click on a page banner to bring up the
  Page Banner Properties Dialog Box

37
Hands On Exercise 3 (continued)

• Work in Navigation View
• Click View,
• Click Navigation
• or
• Click the Navigation Button at the bottom of the
  page
• Navigation View presents a Hierarchical View of
  the website
• A user may move pages around (from one level to
  another) and all links will be updated.
• Rename pages in Navigation View and all related
  links will be updated

38
Hands On Exercise 3 (continued)

• Modify page content
• Add product information
• Insert graphics
• Insert graphics using the Clip Art Task Pane
• Right-click an image
• Select Auto Thumbnail to make the image a
  thumbnail

39
Hands On Exercise 3

• Publish the website
• Click File
• Click Publish Website
• Click Remote Website Properties
• Enter location where site is to be stored
• Click OK
• Click the Publish Website Button
• Keep in mind when publishing a site to a web
  server
• Changes can be made locally
• Republish the changed pages

40
Summary

• Lessons learned in this chapter
• About HTML
• Created a one page website
• Added, modified and formatted text in a website
• Created hyperlinks to both Internal and External
  sites
• Inserted a marquee into a website

41
Summary (continued)

• Used Templates and Themes
• Used the Photo Gallery Feature
• Inserted Interactive Buttons
• Worked in different FrontPage Views
• Used a Web Wizard
• Published a website

42
End-of-chapter Exercises

• Multiple Choice
• Practice Exercises
• Exercise 1 Create Your Own Website
• Exercise 2 View FrontPage Reports
• Exercise 3 Insert a Time Stamp and E-mail Link
• Exercise 4 Create a Page Transition
• Exercise 5 Create and Test a Hotspot

43
End-of-chapter Exercises (continued)

• Mini Cases
• Designer Home Pages
• Employment Opportunities
• Forms in HTML Documents
• Publishing Your Web Page
• Add Your Home Page to the Yahoo Catalog
• Experiment with the Photo Gallery

44
Questions?