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

Page 1

Page 2

Page 3

Ctrl+ F6

Ctrl+F6

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