Microsoft Office FrontPage 2003 Training

1
Microsoft Office FrontPage 2003 Training
LaSalle Council, BSA presents

• Create a Web site with FrontPage

2
Course contents

• Overview Create a Web site
• Lesson 1 How to plan your content
• Lesson 2 About Web sites and Web servers
• Lesson 3 About FrontPage Web sites
• Lesson 4 How to create a FrontPage Web site
• Lesson 5 Manage a site using different views
• Lesson 6 How to create a Web page

3
Overview Create a Web site with FrontPage

• So you want to create a Web site. That's great
  a Web site can be a powerful and efficient way to
  communicate with people.

This course will teach you how to create a Web
site using FrontPage 2003. It will also teach you
things you should know before creating one.
4
Course goals

• Understand basic concepts like Web sites, Web
  servers, and publishing.
• Understand what a FrontPage Web site is and the
  advantages it provides.
• Decide between the two kinds of FrontPage Web
  sites disk-based and server-based.
• (Continued on next slide)

5
Course goals, contd.

• Create a FrontPage Web site.
• Create Web pages for a site and give them a
  layout, text, pictures, and so on.
• Manage a FrontPage Web site by using different
  views.

6
Lesson 1

• How to plan your content

7
How to plan your content

• When you're planning a Web site, it's important
  to establish the goal of the site first.
• The designer of the site shown here established a
  goal, which was to generate 500,000 in sales
  through online orders.
• After looking at the site, do you agree it was
  designed with this goal in mind?

8
Tips for creating a goal

• Make sure you know who your audience is.
• Make sure the goal is specific and quantitative.
• Keep your goal simpleabout one sentence long.

9
Sketch site structure

• Once your site's goal is defined, sketch out the
  structure of your site beforehand.
• Use a pencil and paper (or a diagramming tool,
  like Microsoft Visio) to draw boxes for pages
  and arrows for links. Remember to keep your goal
  in mind as you do this.

10
Sketch a common layout

• After you've sketched a map of your site, it's
  time to start sketching a common layout for each
  of your pages.
• You could start designing the page layout using
  FrontPage, but we recommend keeping it on paper
  at this point. Pencil and paper can be easier to
  change, as noted before.

11
Things to consider while sketching layout

• Here are some of the things to consider as you
  sketch the layout

• Should each page have a common header and footer?
  
• Should the site have a consistent method of
  navigation?
• Are there any marketing requirements for the
  site? Legal requirements?

12
Sketch a common layout

• Using your sketches as a model, you'll eventually
  use FrontPage to design Web pages in HTML. You
  might use a table for the skeletal structure, or
  layout, of the page.
• Once the layout is defined, you can fill it with
  content. For example, you'll want to add text,
  hyperlinks, pictures, and interactive buttons.

13
Test 1, question 1

• It is beneficial to sketch a map of your Web site
  before you create it because (Pick one answer.)

• It is easier to change a site on paper than it is
  to change it after it has been built.
• It helps to improve your drawing skills every now
  and then.
• Sketching out a map can make it easy to find a
  page when you need to start designing it.

14
Test 1, question 1 Answer

• It is easier to change a site on paper than it is
  to change it after it has been built

Erasing boxes and arrows is a lot easier than
changing or deleting pages that are already built.
15
Test 1, question 2

• Which of the following is an example of a good
  goal for a Web site? (Pick one answer.)

• "To create a site that lets customers order
  products, lets employees access internal and
  confidential documents, and lets vendors submit
  orders."
• "To present our product catalog online, thereby
  saving 10,000 a month in printing and shipping
  costs."
• "The bottom line is that this Web site should
  make my boss and coworkers happy."

16
Test 1, question 2 Answer

• "To present our product catalog online, thereby
  saving 10,000 a month in printing and shipping
  costs.

Yes. This goal is specific, and it is also
quantifiable.
17
Lesson 2

• About Web sites and Web servers

18
About Web sites and Web servers

• A Web site is a group of HTML pages and graphics
  that are interconnected with hyperlinks.
• Web sites can also contain word processor
  documents, multimedia, scripts, and databasesany
  kind of file.

19
Web servers, defined

• A Web site cannot be seen by others unless it is
  published to a Web server.
• A Web server runs software that "serves" HTML
  pages and associated files when requested by a
  client, such as a Web browser.

20
Where to find a Web server

• Where do you find a Web server? That depends on
  how widely available you want your site to be

• For the World Wide Web, find a hosting company.
• For a companys Intranet, see the IT department,
  your manager, or the nearest computer guru.

21
More information about Web servers

• When looking for a hosting company, cost,
  reliability, storage space, customer service, and
  security are good things to compare.
• One additional thing to look for is whether or
  not the hosting company supports FrontPage Server
  Extensions from Microsoft or Microsoft
  SharePoint Services.

22
How to put your site on a server

• To put your site on a Web server, you publish it.
  Publishing generally means copying all of the
  files to a remote location on a server.
• In most cases, the remote location is either an
  HTTP path or an FTP path. The path you use
  depends on what technologies your server
  supports.
• To find out which one your server supports,
  contact your hosting company, or your IT
  department.

23
Web server details

• Once you find a Web server and determine the
  remote location for your site, there are other
  important things to know before you create your
  Web site

• URL
• The correct file name for your home page
• User name and password
• Server restrictions

24
Suggestions for practice

• If you want your site on the World Wide Web,
  search for a hosting company using your favorite
  search engine. Or, go to the Locate a Web
  Presence Provider site.
• If you want your site on your company's intranet,
  contact your IT department, your manager, or the
  nearest computer guru.
• Once you've found a server for your site, make
  sure to get the URL, publishing destination, user
  name, password, and the correct file name of the
  home page. It's also important to know if there's
  a file size limit.

25
Test 2, question 1

• Other people will be able to see your Web site on
  the World Wide Web if (Pick one answer.)

• You do nothing else but create your site on your
  own hard drive.
• It is available on a Web server.
• The site is interesting to look at.

26
Test 2, question 1 Answer

• It is available on a Web server.

You got it. A Web server has special server
software that will make your pages and files
available on the Web.
27
Test 2, question 2

• If you need to set up a Web site on an intranet,
  you should (Pick one answer.)

• Pay a hosting company to host your site inside
  your network.
• Pay a hosting company to host your site outside
  of your network
• Ask someone in the IT department.

28
Test 2, question 2 Answer

• Ask someone in the IT department.

Yes, that's right. The people who maintain your
company's network, typically called the IT
department, are the right people to contact.
Other potential contacts could be your manager,
or the nearest computer guru.
29
Lesson 3

• About FrontPage Web sites

30
About FrontPage Web sites

• FrontPage is a Web site design tool. But its
  also a Web site management tool. You can use it
  to

• Add, rename, delete, or move around files
  (without doing it in Microsoft Windows
  Explorer).
• Fix problems using special reports, like the
  broken hyperlinks report.
• Publish a Web site using FrontPage.
• (Continued on next slide)

31
About FrontPage Web sites, contd.

• The important thing to remember is that these
  management features are not available when
  opening and working on single HTML files. They
  are only available when you open and work on a
  FrontPage Web site.
• What is a FrontPage Web site?

32
What is a FrontPage Web site?

• A FrontPage Web site is a site created in
  FrontPage. It contains Web pages, graphics,
  documents, multimediaalmost any kind of file you
  want.
• A FrontPage Web site also contains hidden folders
  and files that support FrontPage-specific
  functionality. These hidden items are the
  FrontPage metadata for your site.

When you open a FrontPage Web site, the Web Site
tab appears at the top.
33
About FrontPage metadata

• FrontPage metadata is information about your
  FrontPage Web site that makes managing the site
  possible.
• This data is used by FrontPage to do all of the
  great management features we spoke of earlier
  (creating and moving files, running reports,
  publishing, and so on).

34
Two kinds of FrontPage Web sites

• There are two kinds of FrontPage Web sites

• disk-based sites
• server-based sites

35
Disk-based Web sites

• A disk-based Web site is a site you create on
  your local hard drive.
• After you design and work on the site, you can
  later publish it to a remote location like a Web
  server.

36
Server-based Web sites

• A server-based Web site is a site you create and
  work with directly on a Web server.
• As soon as you save your changes, they will be
  seen immediately on the Web.

Note To use a server-based site, your FrontPage
Web site must be on a server running FrontPage
Server Extensions or SharePoint Services.
37
Test 3, question 1

• What is one of the major advantages of using a
  disk-based Web site? (Pick one answer.)

• You can test features like FrontPage hit counters
  if your site is disk-based.
• Web sites that are disk-based are often more
  eye-catching.
• You can edit and test a disk-based site before
  other people see it on the World Wide Web.

38
Test 3, question 1 Answer

• You can edit and test a disk-based site before
  other people see it on the World Wide Web.

Yes, that's it. A disk-based Web site is stored
on your local computer. Since it is stored
locally, you can test most of the site
functionality before it is available to the Web.
39
Test 3, question 2

• A FrontPage Web site (Pick one answer.)

• Consists solely of HTML files and pictures.
• Is a site created in FrontPage that contains
  FrontPage metadata.
• Is a site created in any other product besides
  Microsoft FrontPage.

40
Test 3, question 2 Answer

• Is a site created in FrontPage that contains
  FrontPage metadata.

Yes, that's it. The FrontPage metadata is not
visible while you are working in FrontPage, but
it helps FrontPage manage your site.
41
Lesson 4

• How to create a FrontPage Web site

42
How to create a FrontPage Web site

• So far youve learned how to plan your content,
  where to find a Web server, and the differences
  between disk-based and server-based sites.
• Now it's time to dive in and actually create a
  FrontPage Web site.

43
New task pane

• The place to create a new FrontPage Web site is
  on the New Page or Web Site task pane. This task
  pane offers two ways to create a site

• Click the One page Web site link.
• Click the More Web site templates link.

44
Specify a location

• If you choose to create a site with a template,
  you can choose the template you want on the left
  side of the Web Site Templates dialog box.
• (Continued on next slide.)

45
Specify a location, contd.

• Then, do one of two things

• To create a disk-based site, specify a location
  on your computer. For example C\My Documents\My
  Web Sites\MyWebSite.
• To create a server-based site, specify a location
  on a Web server that is running FrontPage Server
  Extensions or SharePoint Services. For example
  http//MyServer/MyWebSite.

46
Convert a Web site

• If you made a site using another program, you can
  convert it to a FrontPage Web site.
• To convert a Web site made in another program,
  click Open Site on the File menu. After you
  specify the folder you want to convert, FrontPage
  will ask you if you want to add information to
  that folder.

47
Suggestions for practice

• Create a disk-based Web site using a template.
• If you have access to a server running FrontPage
  Server Extensions or SharePoint Services, create
  a server-based site.

Online practice (requires FrontPage 2003)
48
Test 4, question 1

• If you want to create a server-based site, which
  of the following is required? (Pick one answer.)

• A Web server running FrontPage Server Extensions
  or SharePoint Services.
• A Web server that is running the FrontPage
  program.
• A Web server running Microsoft Office.

49
Test 4, question 1 Answer

• A Web server running FrontPage Server Extensions
  or SharePoint Services.

Exactly. If a Web server is running one of these
technologies, you can create a server-based Web
site
50
Test 4, question 2

• If you need to create a disk-based site, which of
  the following would be the correct path to
  specify? (Pick one answer.)

• http//MyServer/MyWebSite
• http//MyServer/MyWebSite/MySubSite
• C\My Documents\My Web Sites\MyWebSite

51
Test 4, question 2 Answer

• Is a site created in FrontPage that contains
  FrontPage metadata.

Yes, that's it. The FrontPage metadata is not
visible while you are working in FrontPage, but
it helps FrontPage manage your site
52
Lesson 4

• Manage a Web site using different views

53
Manage a Web site using different views

• Now that you know how to create a FrontPage Web
  site, you should know about the two kinds of
  views you can use to manage and design the site

• Web site views
• Page views

54
Folders view

• When you open a site and click the Web Site tab,
  the Web site view buttons are displayed at the
  bottom.
• In this illustration, the Folders view is
  selected. This view lets you see the files and
  folders that make up your FrontPage Web site,
  much like Windows Explorer.

55
Remote Web site view

• The Remote Web site view is the place to go when
  you need to publish your Web site.
• The local version of the site will appear on the
  left.
• The remote site will appear on the right.

56
Reports view

• Another powerful view is the Reports view. It
  contains many different diagnostic reports that
  you can run against your site.
• Three of the most helpful troubleshooting reports
  are

• Unlinked files report
• Slow pages report
• Broken hyperlinks report

57
Reports view, contd.

• When you open a page or create a new one, you are
  working in one of the Page views Design, Split,
  Code, and Preview.
• When a page is open, these views are accessed by
  buttons at the bottom, as shown here.

58
Split view

• The Split view splits the view in half. The top
  half displays the HTML code for the page, and the
  bottom half shows the page as it looks in the
  Design view.
• Advantages

• Design accuracy
• Flexibility
• Education

59
Code view

• The Code view displays the HTML code for the
  page. If you are an experienced Web designer, you
  might feel more comfortable in this view.

60
Preview view

• Finally, you can preview your page in the Preview
  view. Preview view lets you see what the page
  will look like when rendered in a browser. Things
  like dashed lines for tables won't appear in this
  view.

61
Suggestions for practice

• Open the Web site you created earlier.
• Click the Web site tab, and then explore the
  various Site views.
• Open a page, and then explore the various Site
  views.

Online practice (requires FrontPage 2003)
62
Test 5, question 1

• Which of the following is not a Page view? (Pick
  one answer.)

• Split view
• Code view
• Normal view

63
Test 5, question 1 Answer

• Normal view

Correct. Normal view was found in previous
versions of FrontPage. And it's a popular view in
Microsoft Office Word and PowerPoint. But in the
current version of FrontPage, this is not one of
the Page views.
64
Test 5, question 2

• What is the primary difference between Web site
  views and Page views? (Pick one answer.)

• You use Web site views only for running site-wide
  reports. You use Page views when you need to work
  on an individual page.
• Web site views let you work with the entire site
  as a whole. Page views are for when you want to
  work with individual pages.
• Web site views let you work on a page in your
  site. But Page views only let you work on
  specific portions of the page.

65
Test 5, question 2 Answer

• Web site views let you work with the entire site
  as a whole. Page views are for when you want to
  work with individual pages.

Correct. That is why the Web site views are
available when clicking the Web site tab. And the
Page views are available when opening a page.
66
Lesson 6

• How to create a Web page

67
How to create a Web page

• You learned how to navigate through the FrontPage
  program by using various views. But what about
  creating and designing Web pages?
• This lesson will cover

• Adding a page layout
• Formatting text
• Inserting hyperlinks and pictures

68
Add a page layout to the page

• The layout of a Web page is the skeletal
  structure of the page. It lets you arrange and
  position text and graphics in a grid-like
  fashion. A popular way to create a layout is to
  use an HTML table.
• The quick and easy way to add a layout is to
  choose a ready-made layout from the Layout Tables
  and Cells task pane

69
Add text and format it

• We won't go into too much detail on how to add
  text to the page.
• However, after your text is on the page, you'll
  want to apply a style to it

• First select some text.
• Then click the Style box.
• And then select a style in the list to apply it.

70
Insert hyperlinks

• It's easy to add hyperlinks to your pages by
  using FrontPage. The illustration here shows you
  how to get started.

• First you select either some text or a picture.
• Then you click the Insert menu.
• And then you click Hyperlink.

71
Insert pictures

• Picture this a page with no pictures. What?
  That's no fun. Nowadays, pictures are pretty
  mandatory in keeping your audience's attention.
• To insert a picture that you have on your
  computer

• Click the Insert menu, point to Picture, and then
  click From File.

72
Preview in a browser

• After you're done filling your layout with text,
  pictures, and hyperlinks, you should always use
  the Preview in Browser command to make sure that
  it looks okay in a Web browser.

73
Suggestions for practice

• Create a new Web page, and give it a layout.
• Add images and text to the page.
• Format text with a style.
• Insert a hyperlink.
• Save the page, and preview it in a Web browser.

Online practice (requires FrontPage 2003)
74
Test 6, question 1

• Which of the following can you use to create a
  layout for a page?

• Tiled background images, frames, or Cascading
  Style Sheet Positioning.
• Tables, frames, or Cascading Style Sheet
  Positioning.
• Guides, tables, or frames.

75
Test 6, question 1 Answer

• Tables, frames, or Cascading Style Sheet
  Positioning.

Correct. You can use any of the these three to
create a layout structure for a Web page. You can
even use them in combination with each other if
you want.
76
Test 6, question 2

• You've got a picture on your computer and you'd
  like to insert it on a Web page. How should you
  do this? (Pick one answer.)

• On the Insert menu, point to Picture, and then
  click From File.
• On the Insert menu, point to Picture, and then
  click New Drawing.
• On the File menu, click Import. Then select the
  picture and click Add File to insert it

77
Test 6, question 2 Answer

• On the Insert menu, point to Picture, and then
  click From File.

Yes, you're right. This is the way to insert a
picture. Something handy to note If the picture
is already in your Web site folder, you can drag
it onto the page from the Folder List.
78
Quick Reference Card

• For a summary of the tasks covered in this
  course, view the Quick Reference Card (requires
  FrontPage 2003 or another Microsoft Office 2003
  program).

79
USING THIS TEMPLATE

• See the notes pane or view the full notes page
  (View menu) for detailed help on this template.