Transcript Tutorial1

XP
Microsoft FrontPage 2002
Tutorial 1 – Introducing FrontPage 2002
New Perspectives on Microsoft
FrontPage 2002 Tutorial 1
1
XP
Chapter Objectives
•
•
•
•
•
•
•
•
Learn about FrontPage
Start and exit from FrontPage
Open and explore a FrontPage Website
Lear about developing a website
Create a FrontPage web site
Enter and format a web page
Save a web page
Test the web page in a browser
New Perspectives on Microsoft
FrontPage 2002 Tutorial 1
2
Learn what FrontPage is
and how it works
XP
• Microsoft FrontPage is a tool to help you develop,
maintain, and publish your Web sites.
• FrontPage lets you:
–
–
–
–
Insert text and graphics
Import and export files
Add, test, and repair hyperlinks
Easily view and manage the entire Web site
• There are even templates included to get you
started.
New Perspectives on Microsoft
FrontPage 2002 Tutorial 1
3
XP
FrontPage creates the HTML code
• While HTML is the language your sites will be
based on, you don't have to know it to create a
great Web site.
• FrontPage uses a graphical interface that allows
anyone with Windows experience to develop Web
pages.
• It creates the HTML code for you and the Web
browser interprets it to display your pages
correctly.
New Perspectives on Microsoft
FrontPage 2002 Tutorial 1
4
XP
FrontPage builds Web sites
• A Web site consists of Web pages, files, and folders as well
as specific FrontPage server extension support files that all
work together so Internet users can view a site correctly.
• Web sites can be disk-based or server-based.
– Disk-based sites can be stored on floppy disks or on a hard drive
– Server-based sites have your files and folders stored on a Web
server.
• These two types of sites are created in an almost identical
way.
New Perspectives on Microsoft
FrontPage 2002 Tutorial 1
5
XP
Start and exit FrontPage
• To start FrontPage, click the Start button, point to Programs,
and select Microsoft FrontPage.
• Click the list arrow on the Open button and select Open Web.
• In the Open Web dialog box, navigate to the directory where
your Web site files are located.
– You will use the Look in list arrow to find the correct
drive
• Click the main folder holding the site's files and then click
the Open button.
• To exit FrontPage, click the Close button in the upper right
corner of the program window.
New Perspectives on Microsoft
FrontPage 2002 Tutorial 1
6
XP
The FrontPage Program window
When you first start FrontPage,
you will see a blank program
window appear, as shown in this
figure.
You can open a new or
existing site from the Task
Pane, or click the list arrow
on the Open button to select
from those options.
New Perspectives on Microsoft
FrontPage 2002 Tutorial 1
7
XP
Use FrontPage Views
• Once you have opened FrontPage, the Views
button bar allows you to use the Folders view,
where you can see all the files in your Web site.
• The Views allow you to see your site from
different perspectives.
• The Folders list shows all the folders and files in
the site.
• The Contents pane shows you the “view” you
have chosen.
New Perspectives on Microsoft
FrontPage 2002 Tutorial 1
8
XP
FrontPage Folders view
This figure shows the FrontPage Folders view. In this view you can click on any
folder in the open Web, and view the contents of that folder in the Contents pane.
New Perspectives on Microsoft
FrontPage 2002 Tutorial 1
9
XP
Open and explore a
FrontPage Web site
• The options on the Views bar give you different ways of
looking at the information in a site and make creating and
maintaining the site easy.
• To open a Web site, use the list arrow on the Open button
and select Open Web.
• You can then can use the dialog box that opens to navigate
to a folder that contains a Web site. Then click the Open
button.
• Double-click on index.htm to switch to Page view for that
Web site.
– The Page view is where you create, edit, and format content
• The title bar indicates which Web page is open.
New Perspectives on Microsoft
FrontPage 2002 Tutorial 1
10
XP
Use Page view
• Click the Page icon in the Objects bar to view your site
in Page view. Page view has three tabs at the bottom of
the window that allow you different views within this
view:
– Normal view lets you easily manipulate your text and graphics
– The HTML tab shows you the code that the browser uses to
translate the page for viewing on the Internet. (You can also
make edits here too if you know HTML)
– The Preview mode mimics a browser so you can see what it
looks like over the Internet.
New Perspectives on Microsoft
FrontPage 2002 Tutorial 1
11
XP
Page view mode
This figure shows an open Web being viewed in Page view,
and it is currently being viewed using the Normal tab.
Switch to HTML or Preview mode
by clicking one of these tabs.
New Perspectives on Microsoft
FrontPage 2002 Tutorial 1
12
XP
Page view HTML mode
This figure shows the page seen in
Normal mode in the previous figure
now being displayed in HTML mode.
New Perspectives on Microsoft
FrontPage 2002 Tutorial 1
13
XP
FrontPage Reports view
The Reports view is where you'll generate reports
to help you analyze and summarize your site.
New Perspectives on Microsoft
FrontPage 2002 Tutorial 1
The Reports view is
shown in this figure.
This view allows you
to examine various
statistics about this
site and makes the
Reporting toolbar
available, from
which you can select
the report you want
to use.
14
XP
FrontPage Navigation view
Navigation view shows your Web site in a hierarchical
diagram, similar to an organization chart.
In this view you can click, drag,
and drop pages to change the
arrangement of the site.
New Perspectives on Microsoft
FrontPage 2002 Tutorial 1
15
XP
FrontPage Hyperlinks view
The Hyperlinks view provides a look at each page and all the hyperlinks to and from it.
You can customize Hyperlinks
view to show page titles
instead of page file names.
New Perspectives on Microsoft
FrontPage 2002 Tutorial 1
16
XP
Other FrontPage views
• FrontPage has several other views that give you a
different way of looking at the files and
information in your Web site:
– The Folders view shows all the folders and files
– The Tasks view shows you a "to do" list that will help
you manage development
• You can create a task list of activities to be done, assign
developers to each task, modify task names, and mark them
completed
New Perspectives on Microsoft
FrontPage 2002 Tutorial 1
17
Learn about the five-part process for
developing a Web site
XP
• Before you begin developing a Web site, some planning
should be done.
• The first step is defining the site's goal and purpose:
– What does you want to achieve?
– What should the site accomplish that other media won't?
– Who is your target audience?
• After you answer these questions, you'll determine and
prepare content for the site by gathering all the relevant
documents and data that might be used.
• The content is the basis of the design. When that has been
defined, you can begin designing.
New Perspectives on Microsoft
FrontPage 2002 Tutorial 1
18
XP
A typical Web development team
Creating a large and
complex Web site for a
corporation may involve a
large number of people,
from different areas of the
company. It is important to
receive feedback from all
members of the team when
designing the site.
New Perspectives on Microsoft
FrontPage 2002 Tutorial 1
19
XP
Create a storyboard and
build the pages
• The overall layout and art should be attractive, inviting,
and easily navigated.
• Once you know the direction of your site, create a
storyboard that shows all the interactions that will become
hyperlinks between your Web site pages.
• Your next step is to build the actual pages.
• The visual appeal must be consistent and the content must
flow.
• It is important to maintain the goals you set out to meet.
New Perspectives on Microsoft
FrontPage 2002 Tutorial 1
20
XP
Test your site thoroughly
• Your last step will be to test everything.
• Verify all of your hyperlinks and spell check all of
your text.
• You should try to view your site in several
browsers. They each may display the site
differently.
New Perspectives on Microsoft
FrontPage 2002 Tutorial 1
21
XP
A Web site storyboard
This figure is an
illustration of a storyboard
for a Web site. You should
always create a storyboard
that details the outline and
hyperlinks for the Web site
before you actually begin
to create it.
New Perspectives on Microsoft
FrontPage 2002 Tutorial 1
22
XP
Create a FrontPage Web site
• Before you start to create Web pages, you should create a Windows
folder to hold everything for your Web.
• To create a Web site:
–
–
–
–
Start FrontPage and make sure you are in Page view
Click File on the menu bar, point to New and click on Web
The New dialog box opens giving you several templates to get you started
Select one and then specify the location of the new Web. Type the path
and filename you want to give it
– Click OK to return to FrontPage
– Select index.htm, which was created from the template that you chose, and
the structure will display in the content frame
– Begin entering information here. This will be your Home Page
New Perspectives on Microsoft
FrontPage 2002 Tutorial 1
23
XP
The Web Site Templates dialog box
When creating a new Web site, you can select
from several templates to get your site off to a
flying start. These templates have several areas
of the page already formatted and all you have
to do is plug in some text and graphics.
New Perspectives on Microsoft
FrontPage 2002 Tutorial 1
24
XP
Create a link bar
• A link bar is a key feature you should include on
your home page.
• The link bar will contain the links your viewers
will use to get to the other pages of your Web site.
• You can create your own or use FrontPage's link
bar feature.
• It's often better to create your own so that you
retain total control over its functions.
New Perspectives on Microsoft
FrontPage 2002 Tutorial 1
25
XP
An example of a link bar
An example of a link bar is shown in this figure. This shows some of the key elements
that are essential to a useful navigation bar and, hence, an easily navigated Web site.
The link bar allows anyone viewing your site to
jump to any page in the site from the home page.
New Perspectives on Microsoft
FrontPage 2002 Tutorial 1
26
XP
Enter and format the text
of a Web page
• Formatting the text of your pages can increase the visual
appeal and bring order to your content.
• To format text, you can use the Format menu, click the
buttons on the Formatting toolbar, or right-click on text or
an object to open the shortcut menus.
• You can use the six preset Heading styles to organize text.
• This gives your reader visual clues about where they are in
the scheme of things.
New Perspectives on Microsoft
FrontPage 2002 Tutorial 1
27
XP
Use alignment and color options
on your Web page
• Alignment of text and objects, as well as font sizes and
styles, can be applied in FrontPage as easily as they are in
the other Microsoft programs.
• Likewise, special characters (like copyright and trademark
symbols) can be added easily.
• Color also can be used effectively in places for emphasis.
• FrontPage provides color options that are "Web safe,“
meaning that they are colors that will be interpreted the
same way by different browsers.
New Perspectives on Microsoft
FrontPage 2002 Tutorial 1
28
XP
Formatting toolbar commands
This figure is a table showing the
formatting options available for
editing a Web site. These buttons
appear on the Formatting
toolbar, and you can access them
on the Format menu as well.
New Perspectives on Microsoft
FrontPage 2002 Tutorial 1
29
XP
A formatted Web page
This figure shows the same page that was seen a few slides ago, but it has now had
some formatting applied to it. The link bar has been centered, and heading styles and
alignment has been applied to the headings.
New Perspectives on Microsoft
FrontPage 2002 Tutorial 1
30
XP
Save a Web page
• Before a new Web page can be viewed on the Internet, or
anywhere else, it must first be saved.
• It is also a good idea to periodically save the page while it
is being developed.
• If you periodically save the page, you will not lose as
much work as you might have lost if the computer crashes,
or some application program crashes the entire system.
• Web pages and Web sites can be saved on servers, or on
local disk drives.
New Perspectives on Microsoft
FrontPage 2002 Tutorial 1
31
XP
Test a Web page in a Web browser
• When you have a page complete in FrontPage, click the
Preview tab and take a look at how it would look in a
browser.
• If it appears how you want it to appear, then view it in your
browser.
• To do this, click the Preview in Browser button on the
Standard toolbar to start your browser.
• The page should look very much like it did in the Preview
in FrontPage.
• If you determine that you need to modify formats or
contents, close the page in your browser, and then reopen it
in FrontPage to make your changes.
New Perspectives on Microsoft
FrontPage 2002 Tutorial 1
32
XP
A Web page viewed in a browser
This figure shows how a Web
page would look if viewed in
Microsoft Internet Explorer.
If you view this page in a
different browser, it may
appear somewhat different. If
possible, you should always
test the Web pages you create
in various browsers to ensure
that it displays the way that
you want it to appear.
New Perspectives on Microsoft
FrontPage 2002 Tutorial 1
33
XP
References
• http://digitalenterprise.org/design/design.html
• Microsoft Tutorial at Microsoft or downloaded to
this site (FpTutorial)
• http://info.med.yale.edu/caim/manual/sites/site_de
sign.html
New Perspectives on Microsoft
FrontPage 2002 Tutorial 1
34