Making a Web Page with Microsoft FrontPage 2000
Download
Report
Transcript Making a Web Page with Microsoft FrontPage 2000
FrontPage 2002
Level I (Intro & Training)
With
Alex Conger – President of Webmajik.com
FrontPage Topics Covered
FrontPage 2002/Introduction to FrontPage
2002
What is FrontPage 2002?
Creating new Pages
Page Properties
The FrontPage 2002 Interface
FrontPage 2002 workspace
Changing Windows
Creating new Pages
Page Properties
Toolbars
The Standard Toolbar
Adding text
Editing text
Creating Bulleted lists
Images
Working with images
Adding images
Using Jpg files
Using Gif files
Links
Using Hyperlinks
Using Email Links
Tables and Cells
Working with Tables
Working with Cells
Productivity
Working With Web Pages
Using text and Graphics
Linking Pages
Publishing
Publishing a Site
Part One:
How FrontPage Works
When you create a new Web in
FrontPage, it makes folders/directories
and starts the structure for your Web
site.
Graphics are saved in the images folder.
The index.htm file is the home page.
Selecting a View
–
You can look at a FrontPage Web site in several different
views.
Page: Edit a web page
Folders: organize files and folders
Reports: analyze your web and manage its contents
Navigation: design the web site’s structure
Hyperlinks: view hyperlinks to and from any page
Task: create and manage tasks
Selecting a Mode
–
–
–
Double click the index.htm file in a Web to view
a home page.
You are now in Page View.
Click on the HTML tab at the bottom of the screen to
view the HTML source code that creates the web page.
Click on Preview tab. This option allows you to view
your web pages as if they were displayed in web
browser.
Click the Normal tab to return to Normal Mode which
allows you to edit the web page.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="Content-Language" content="en-us">
<title>Home Page</title>
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
</head>
<body>
</body>
</html>
Front Page Toolbars
Title bar
Menu bar
Standard bar
Formatting bar
FrontPage is a Microsoft product with Toolbars
that look similar to Microsoft Word and
other Microsoft programs.
Part Two:
Setting Up a Simple Page
It is easy, as long as you follow a few
basic steps.
Create a FrontPage Web
1.
Open FrontPage
2.
3.
Choose File > New >
Page or Web.
Select Empty Web from the window
that appears on the right of the screen.
4.
5.
In the Web Site
Templates window
select:
One Page Web.
Click in the Specify the location of the new web
box and type the name of the folder for your page:
C:My Documents\MyWebs\yournameweb
Note: You can save your Web folders anywhere
you want by clicking Browse and selecting the
new location.
6.
Click OK and FrontPage will create a new empty web site.
7.
Click on Folders in the
Views pane
You can see the folders created for your web.
The images folder is where FrontPage can save the graphics
for your pages.
The index.htm file is your first page.
The index.html page is the home page for your Web site.
It will open first when your Web folder is on a Web server
and people go to the Web address (URL).
8.
Double click on index.htm to open the blank page.
Give Your Page a Title
Set Page Properties
1.
Go to File > Properties
2.
Select the General tab
3.
Type the title of your
page in the title box.
The title will become the bookmark title and will
show at the top of the browser page.
Set Colors & Background
Select the
Background tab
Select an image
for background or
pick a color.
Pick colors for
text
Pick colors for
hyperlinks.
Use a background
from another
page.
You can select all the colors and the background separately.
OR
Select a Theme
Click Format > Theme to select from
themes like the example below.
Apply the Theme to:
• All pages or
•Selected page(s)
This is a quick way to
start a Web page with
coordinated colors
and background.
Save the Page
After setting up page properties:
Click the Save button on the Standard toolbar.
Remember to save your page frequently as you work.
To quickly access Page Properties to make changes:
• Right click on the page and select
Page Properties
Part Three:
Creating the Content
What do you want to show and tell?
Create Text
You can type directly into Front Page.
or
Use any Word processor or text
editor to create content:
Microsoft Word
Notepad
Save the document, and in
FrontPage select Insert > File and
open your document.
or
Use CTRL + C to copy and
CTRL + V to paste the text into
FrontPage Editor.
Format Text
Font types
Heading
Font size
& Paragraph
styles
Bold &
Alignment
Italics
Indent
Font color
Bullets
Numbered Lists
The safest fonts to use for Web pages are
Arial and Times New Roman.
Toolbar Features
Check
spelling
Insert a
component Create a
table
Copy & paste a
format style
Undo
Save the file & click on Preview
to see how the page will look
on the Web.
Insert an
image
Create a hyperlink to
another Web site or
a specific Web page
Insert Images
1. Place the cursor where you want the
image
2. On the menu, click Insert > Picture >
From File.
3. Find the image
file and click
Insert.
4. To insert Clip Art
in your page,
click on Insert >
Picture > Clip Art
Adjusting Images
3.
Click on the picture in your Web
page to select it.
Black boxes appear at the
edges.
4.
You can reposition or resize the
picture right on the page
5.
Right click on a picture &
choose Picture Properties to
open the Picture Properties
window for more options for
adjusting images.
Picture Properties - General
FrontPage accepts many
different types of graphic
files but Web browsers can
use 2 types:
gif & jpeg
FrontPage converts image
file types automatically for
you when the page is
saved.
Here you can manually
select the type you prefer
for a picture.
Picture Properties - Appearance
Click on the Appearance tab for
the following:
Set Text Wrapping
& Alignment
Put a border around an
image
Change the size of an
image.
When you adjust picture size
manually in the Web page,
these numbers will
automatically change.
Saving Your Page w/ Images
When you select a picture by clicking on it in your page,
an expanded Picture Toolbar appears.
Thumbnail
Rotate &
Flip
Contrast &
Crop
Brightness
Make transparent
After adjusting an image, it is very important to Resample
the image. FrontPage reduces the file size and resaves
your image. (If you choose not to , you will have a small
image that could be 2 megs)
Embedding Images Part 1
When you save a page for
the first time after
adjusting and resampling
images, the Save
Embedded Files window
appears.
1. Click on Change
Folder
2. Select the images
folder
Embedding Images Part 2
FrontPage should
remember to save all
your page’s embedded
images in the images
folder from now on
when you work on this
Web page
How to save images
from the web
1. Find the image that you
like.
2. Right click on the
image.
3. Click on Save Image
As..
4. Navigate to a folder on
your computer.
5. Rename the image if
needed and Save.
Insert a horizontal line
• Place the cursor where you want the line.
• Go to Insert > Horizontal Line.
• The horizontal line is a nice way to separate
parts of your web page.
3 Ways to select a background graphic
Find a graphic saved
on your hard drive.
or
Look for a graphic on
the Web. Type the
URL (Web address)
here:
or
Search for a
background
graphic in Clip Art.
Click on OK
Part Four:
Creating Links
Make connections to
target areas on your
pages, other Web sites,
and email addresses.
Make Web Links
Create a Text Link
1. Type the text to identify what the link is and
highlight it.
2. Click on the Link icon
on the Toolbar.
3. Select Existing
File or Web Page
4. Locate the path to
the file or copy the
URL of your link.
4. Click OK.
Save the file and click on
Preview to test the link.
Create Email Links
1. Type the name of the person or the email address in
the Web page and select it (highlight).
2. Click on the Link icon
3. Select Email Address
and type the email
address.
FrontPage adds the
mailto: part of the
address automatically.
3. Click
When
theOK
link is clicked
on the Web page, an email
message box will pop up.
on the Toolbar.
Set Internal Links - Targets
Create a Target/Bookmark
1. Place your cursor where you want the
link to go to.
2. On the Insert menu, Click Bookmark.
3. Give the bookmark a name.
4. Click OK.
Create an Internal Link
5. Go to the text for your link
and highlight it.
6. Click on the Link icon.
7. Select Place in This Document
8. Click on the drop down menu
for Bookmarks and select in
the list.
9. Click OK.
Part Five:
Inserting Tables
Tables can help control the alignment of
images and text on a Web page.
Set up a Table
Place the cursor where you want the table
and click on Table
on the toolbar.
1.
2.
3.
4.
5.
6.
7.
Select the number of rows
and columns.
Right click inside the table
and select Table Properties.
Select Layout Alignment.
Set Cell spacing & padding
Choose a border width or 0
for no border.
Set table width (how much
of the page it will cover).
Select a color or image for
Table background if desired.
width.
Change Cell Properties
You can change the settings for all the Table, a Row, or
an individual Cell.
1. Put the cursor inside the Table,
Cell, or Row you want to
change and right click.
2. Select Table properties.
3. Click on the correct tab – Table,
Row, Cell and make the
changes
You can select a background
color for individual cells.
Part Six:
Special Features
FrontPage has many additional features
to help make creating Web pages easier
Templates
When you click on File > New > Page or Web,
you can select from a variety of FrontPage Page
Templates or Web Site Templates
Components
Click on Insert >
Component to see a
list of advanced
items to add to
your pages.
In Conclusion…
I think you will agree that although
FrontPage is not the only editing tool
available, it is a fast and easy way to
add and manage web content.
Alex Conger
For Phone Support: (208) 870-4332
Toll Free: 1-866-441-8018