Transcript FrontPage 2000 Foundation

About This Course ...
FrontPage 2000 Foundations
Course Pre-Qualifications
• This course assumes that you are familiar with
using a Web browser and are able to ‘surf the
Web’
• Familiarity with Internet concepts such as HTML
and FTP would be an advantage but are not
strictly necessary
What This Course Includes
• Creation of fast loading, professional looking
Web sites
• Formatting techniques
• Tables, graphics and multimedia
• Frames
• Graphic hyperlink image maps
• Web site registration and search engine
promotion techniques
• Web administration
What This Course Does Not Include
• Installation
• Fill-in form design and CGI
scripting
• Programming or Java
• Use of some of the FrontPage
Server Extensions
Objectives
• By the end of this course you should be able to:
– Use FrontPage effectively
– Produce professional looking Web sites
– Optimize a Web site to load fast and you will also learn about
site management techniques
An Introduction to FrontPage
and the Internet
FrontPage 2000 Foundations
What is the Internet?
• The Internet is a worldwide collection of networks
that are all connected together
• Most people think of the World Wide Wide (WWW)
as the Internet but in fact this is just a part of the
Internet in total. The Internet also includes File
Transfer protocol (FTP) sites, email, newsgroups
and much more
• The big advantage of the WWW is that it is
graphical and interactive
What is HTML?
• HTML (Hyper Text Markup Language) is the code
that is used to produce Web pages
• By using FrontPage you do not need to learn
HTML, but a knowledge of HTML basics is very
useful should you want to manually modify some
of the code behind your Web pages
What is FrontPage?
• A Web site authoring program which allows you
to create and manage entire Web sites
• There are a number of different FrontPage Views
to help you create and maintain your web sites
Review Questions
Creating a First Web Site
FrontPage 2000 Foundations
Creating a One Page Web
• Creates a new web containing a
single, blank page
Entering Text into Your New Web Page
• You may enter text directly into FrontPage, in
much the say way you would enter information
into a word-processor
Basic Text Formatting
• Very similar to using Microsoft Word formatting
techniques
Can you guess what each
icon illustrated does? If
not move the mouse
cursor over each icon, and
after a short delay, a
popup will tell you what
each icon does!
Creating a New Web Page
• New pages
may be added
to your Web
at any time!
Switching between open
pages within your Web
• Press Ctrl+F6
Ctrl+F6
Page 1
Page 3
Ctrl+ F6
Page 2
Ctrl+ F6
Simple Text Hyperlinking
• A text hyperlink is text that when clicked on
within a Web Browser (such as Microsoft Internet
Explorer or Netscape Navigator) will
automatically jump to a different, specified
location
• This may be a different part of the same page, or
to a different page within the Web site you are
viewing, or indeed to a totally different Web site
• It can also be used to link to files that you can
download from the Internet to your local hard
disk
Previewing your Web Pages
• Clicking on the Preview tab (located along the bottom of the
FrontPage window) allows you to get an idea of what the
page will look like when published on the Web
• You can also click on the “Preview in Browser” button
which will load up your installed Web browser and display
the file!
• Always check your pages in a browser preview prior to
posting new pages to your Web site
Examining the HTML code
behind a Web page
• You can
easily learn
HTML by
viewing the
code
behind your
pages!
Creating Web Folders (Sub-directories)
• In the same way that you would use folders on a
hard disk to divide up file into relevant groups,
you can use folders in your Web site structure
• By default you would normally store all your
graphics files within a FrontPage folder called
images
Review Questions
Basic Formatting Techniques
FrontPage 2000 Foundations
Opening a Web within
FrontPage
• Select the web
you wish to
open and click
on the OK
button
Modifying the Background Color
Adding a Background Picture
• Use with care!
– Can slow page
loading
– Can make text
un-readable
– Check at
different screen
resolutions
Modifying Default Text
and Hyperlink Colors
• Take care!
– Avoid
conflicts
with
background
colors
• Includes
– Text,
Hyperlink,
Visited
Hyperlinks
& Active
Hyperlinks
Horizontal Lines
• Double click on a
horizontal line to
modify it!
Applying Themes
Review Questions
Manipulating Tables
Within FrontPage
FrontPage 2000 Foundations
Inserting a Table
• Use the drop down
menus or icons tools,
as required
Modifying Table Properties
Modifying Cell Properties
Review Questions
FrontPage - Graphics & Multimedia
FrontPage 2000 Foundations
Inserting Clip Art
• A picture is worth a thousand words ...
Picture File Types File Size & Loading Speeds
• You can use either GIF or JPG picture files
• Experiment with file types and formats to produce
the smallest possible file sizes for fastest loading
of the Web page
• Consider using
interleaved GIF files!
Background Sounds
• Don’t use large sound files as they will reduce
the speed of your page loading
• Choose a single, multiple loop or continuous
play
• BEWARE of copyright regulations!
Video Clips
• Use small files
• Beware of
copyright issues
• Load “on open”
or in response to
mouse clicking
Review Questions
Hyperlinking, Bookmarks & Image
Maps
FrontPage 2000 Foundations
Text HyperLinks to Other Pages
Create or Edit
Hyperlink Icon
Bookmark Links
• You can add a bookmark to any
item contained on a Web page
• One page can contain as many
different bookmarks as you
require
– This bookmark system is often used to
allow you to create a Table of Contents
at the top of a page, and when you
click on a bookmark hyperlink you are
automatically moved to this bookmark
Using Picture HyperLinks
• When you click on
the graphic in a
browser you will
move to the
hyperlinked address
Creating Image Map HyperLinks
• This picture is a single GIF file which can be
repeated at the top or bottom of each page a
image mapped to different URLs
Email HyperLinks
• Easy to setup
• Easy for
visitors to
email you
Review Questions
Introducing FrontPage
“Components”
Hover Buttons
• A Java applet which can slow page loading
Adding a Scrolling Marquee
Adding Page Transitions
• Events include:
–
–
–
–
Page entry
Page exit
Site entry
Site exit
• Many browsers will not
understand these
effects!
Creating Animations - DHTML
• Animation effects for text and graphics
• Not all Browsers will display the effects!
Review Questions
FrontPage and Frames
FrontPage 2000 Foundations
Using Frames
• You can use frames to divide a Web screen, as
viewed by a Web browser, into a number of
separate areas, each of which displays
information from a separate web page
– This is very different to dividing up the screen using tables,
where all the information displayed comes from a single Web
page
The Frame Set
The Frame
Set page
In this case 3 separate pages are
loaded by the frame set page
The 3 pages are loaded into the
frame set and displayed within the
Web browser
Creating a Frame Set
• Allows you
to easily
create and
customize
a framed
site
Viewing the Frame Page HTML
<frameset rows="64,*">
<frame name="banner" scrolling="no" noresize
target="contents">
<frameset cols="150,*">
<frame name="contents" target="main">
<frame name="main">
</frameset>
The <noframes> Tag
<noframes>
<body>
<p>This page uses frames, but your browser
doesn't support them.</p>
</body>
</noframes>
Review Questions
Managing Your Web
FrontPage 2000 Foundations
Why Manage a Web Site?
• Web sites can evolve and rapidly take
on a life of their own if not managed
properly
• Pages can be added, deleted or
renamed and you need to make sure all
your hyperlinks still work!
• You may edit the contents of existing
pages, maybe change the graphic files
that are used, resulting in many files on
your Web server not being required any
more!
Deleting a Web
or Pages Within a Web
• If you wish to delete a page within a Web site that
you have create within FrontPage, you must do
this within FrontPage
– The same applies to deleting an entire Web (which is an
irreversible process)
Proofing Your Entire Web Site
Using Site-Wide Text
‘Search and Replace’
Recalculating & Verifying Hyperlinks
FrontPage Tasks
• You can add a list of tasks to individual Web
pages that will remind you to improve or modify
the page at a later date
Review Questions
Good Site Design,
Publishing & Publicizing
FrontPage 2000 Foundations
Plan Your Site
•
•
•
•
Design in easy site navigation
Design for growth
Make your site address portable
Don't produce blind ally pages!
Publishing Your Web Site
• Two types of server setup are in
common use
• Either your company owns and
operates it’s own server
• Or you can rent space on a server
owned by a separate, specialist
Internet Server company, in which
case you would use an FTP
program to copy your files to this
computer
Factors Affecting the Speed
of Your Web Site
• Things to consider ...
–
–
–
–
–
–
–
Server bandwidth
Graphics file sizes
Resolution and number of colors
GIF Vs. JPG file
Specify the physical shape and size of your graphic files
Use both low and high resolution versions of graphics files
What if people view your pages with the graphics loading
turned off?
Using Relevant Text
• If you wish the search engines
to list your Web site before
other Web sites then you
should give a lot of thought
about how you construct your
Web pages and what words
you use on the pages
• Do NOT try spaming the
search engines!
Listing Your Web With Search Engines
• Most people will find your Web site
by browsing the Internet using a
Search Engine
• To be visible to a search engine you
need to register your site with the
search engines
• Some search engines may eventually
find you by accident (by following
links to your site from another site)
Meta Tags
Meta tags can be
inserted into the top
of your Web pages
and are used by
many search engines
to determine what
keywords are to be
used for a site along
with a site title and
description. Use
these tags with care
and avoid spam!
Review Questions