FrontPage 98

1
FrontPage 98

• Staples High School
• taught by
• Alan B. Weaver
• email alanbweaver_at_hotmail.com

2
FrontPage 98
To open an existing site, click here To create a
new site, click here
3
Creating a Web
One page web allows you to keep adding pages.
There are wizards or templates that can be used
- remember these are not originals - others use
them. If you are creating a new site, you need
to specify the name of it, and also indicate the
drive it is located on (C - hard drive). If
drive is not already created, it will create it
for you.
4
Initial Set Up
Click here to go to folder view. This is the
most efficient way of viewing your site, it shows
it by folder
5
Folder View
The index.htm page is the home page. For
example, if someone clicks on www.mynewweb.com,
the index page is what will appear. All web
pages have unique addresses.
To create new folders or pages, click here.
Choose New, then page or folder. You can also
click on New Page indicate just below File
6
Folders - Organizing the Site
It is very important to stay organized. What you
may think is a simple five page site can easily
turn into a site with over 200 files in it and
you need to know where things are located! It is
a good idea to put each section into a separate
folder. Note how subfolders are utilized, you
can have multiple levels of folders
To begin creating (or editing a previously
created page) your website, double click here (or
on page you wish to edit)
7
File Components of Website

• Web Pages are .htm or .html extensions. Remember
  all websites are written in HTML (hypertext
  mark-up language). FrontPage is a program that
  allows user to work in a WYSIWYG (what you see is
  what you get) environment, making it fairly easy
  for user to work.
• Images - they can come in many different types,
  these are the three basics
• JPG - this is the most compressed version, has a
  couple of million colors
• GIF - limited to 252 colors, it is used to create
  buttons or simple images for site
• BMP - bit map - takes up a lot of memory, can
  create images in Paint (this program is found in
  accessories). Image can be converted into a GIF
  file when opened in Image Composer (this is part
  of FrontPage program)
• For example, if you have a page with 3 pictures
  and 7 GIFs, this means there are 11 files for
  this one page. Keep all information that is
  specific for this page in one folder. If you
  have pictures/GIFs that are shared between
  pages, keep them in an images folder.

8
Front Page Editor
Begin typing as if in a word processing program.
There are symbols located in this bar which allow
you to create fonts, enlarge, change
justification, add numbers, bullets, indent.
For editing purposes, this allows you to see the
paragraph marks and returns.
9
Design Tips

• Use a sans serif font (like what is shown here)
  to work with, it shows better on monitor.
• Keep images small (in memory and size) so that
  they dont clutter or overpower the site. It
  also allows for quicker downloads.
• Multiple fonts can be used, etc. However, try
  not to make site look like a ransom note!
  Remember, less is more!
• Tables can simplify your life. This is just
  trial and error - some information is indicated
  on next page.
• Try not to underline the text on your site,
  people will think they are links when they arent
  and could become frustrated.
• Test (which means all links) your site before
  publishing. There is nothing worse than having
  links that go to incorrect pages, worse yet to no
  place at all, resulting in an error message!

10
Tables
You can either draw or insert a table. Insert
table allows you to set up of rows/columns,
alignment, and border size, padding, and spacing.
By having zeroes (as shown here), the table will
not show up when previewed in browser)
11
Table Properties
By right clicking in the table you can see the
table properties wherein defaults can be
changed for column width, colors applied to
borders, etc. Below is indicated how
properties were changed and result is shown on
next page (sorry for black white image!)
12
Sample View of Tables
As you can see, there are lines in here now and
column width has changed.
There are three different views in FrontPage - we
usually work in Normal, HTML shows the code,
Preview shows how it looks in browser
13
Preview Tab
See how no gridlines show in this section. Table
gridlines appear here
The preview tab shows you what site will look
like up on the WWW - in Netscape or Explorer.
You can also click on File, Preview to see how it
will look.
14
Toolbars
Clicking on View allows you to see different
toolbars to work with your website.
15
Saving a New Page (or save as)
A currently existing page can be made into a new
page by using save as. This screen also shows
up when saving a new page. Make sure you put it
in the correct folder
Again, give the page a title and a distinct name.

You can also create a template - that is a
blank form that can be filled in each time so
that you dont have to recreate or re-input
information
16
Creating a Link from Text

• You can create links to any location within your
  site or even to another website. As mentioned,
  we want to keep the visitors on our site and not
  have them go shopping at Amazon or looking at the
  scores for the latest football game! A link can
  go from text or from an image.
• From Text - 1. first select the text and
  highlight it. 2. Click on Insert, Hyperlink (or
  press CTRL-K). Open pages are indicated at the
  top, just double click on it to select where the
  link will go to. If you click once, click the OK
  button. The result on your page will show text in
  a default bright blue text with an underscore.
  This means there is a link.

17
Creating a link - from an image

• Once the image is in the document, you can link
  in two different ways.
• You can select the image (when it is selected,
  there will be little boxes in the corner and
  follow procedures indicated on previous page).
  This will result in a blue border showing up.
  (personally I find it ugly)
• You can create a hot spot. Click on the box
  (or oval) on the toolbar and draw it over the
  entire image. After the hot spot is created, it
  will prompt you where you want the link to go to.

Creates hot spot
After shape is drawn, the dialogue box appears
18
Image Composer
A gif - this is a little button on a website
that has a hot spot applied to it so it will
link to another page. Double clicking on one of
these in FP editor allows you to create a new
image. Only one image can be worked on at a time.
This program allows you to create GIFs. By
clicking on the shape box here, you can create
your own image. Again, a lot of this program is
just trial and error i.e. experimentation. When
saving the file, make sure it goes into the
correct folder!
19
Working with Image Composer
Clicking on here will give you this tool so you
can create a shape.
This image has 4 components - the background box,
the box behind home page, the text box, and the
oval shape
20
Saving File
Make sure you have selected the correct folder!
Give it a filename you will remember.
When there are multiple components (as the
previous page shows), you will get this prompt.
Click ok
21
Insertion of Image
GIF has now been inserted on site. A hot spot
can be created and put in here so that this page
can link back to homepage! Note it is necessary
to refresh FrontPage Explorer as it will not
show the images you have just saved. To refresh,
either click on View, Refresh or press F5 key.
If there are a lot of images and you wish to
remain organized, you may consider a separate
folder for separate categories of images, i.e.
photos, navigation buttons, etc.
22
Creating New Pages
There are many different types of forms you can
create. Select from your choice here!
23
Feedback Forms
Comments are included in here and you can change
this form to suit your requirements. Right click
inside the form section to set properties as to
where it will be sent (your email address)
24
Other Components of Feedback Form
Time limitations in this course prevent
discussion of all this information. A very brief
summary is indicated below
This allows you to save information up on your
WWW site in addition to receiving emails. A good
way to have backup
You can have a confirmation page if someone
responds to site. A good customer service tool.
Allows you to only include certain fields or
specific data from the responder.
25
Publishing the Site
1. Save all documents in front page editor and
close out 2. Make sure you have dialed up to the
ISP 3. Click on primary folder (otherwise only
part of site may publish) 4. Click on File,
Publish 5. If you only have one site, it will
only show one location, however, if you have
multiple sites, make sure you choose correct
location. Choose box indicated for publish
changed pages only.
6. You will be prompted to provide ID and
password. There may be prompts to ask if you
want to replace pages, say yes or yes to all
26
Photos - JPGs

• It is best to keep the photos as small files -
  less than 25K if possible. The goal is to get the
  page to download in 30 seconds or less. Also, 6
  or less photos per page is a good guideline.
• If youre using thumbnails and click through to
  larger photos of higher quality, you can use
  two versions, a low-resolution, low DPI (low
  memory) thumbnail and a larger file with higher
  resolution and DPI.
• There are many programs out there to edit and
  touch up photos. Adobe Photoshop is probably the
  most powerful program available. It is expensive
  and complicated. Corel has a very simple
  package, Adobe also has a simpler, less frills
  version. There are also some very simple
  packages available for less than 50. In fact,
  some programs are included with a scanner.
• To obtain digital images, there are three ways
  1) digital camera (Sony Mavica has low
  resolution but uses a floppy disk and is very
  easy to use 2) scanner (good to have, costs are
  very reasonable now) 3) having photos developed
  and returned on disk - Kodak, Mystic, practically
  all processors now.

27
Corel Photo House
This program is relatively simple to use and
quite straightforward. Some quick tips to get
photos down to under 25K
1. Crop picture 2. Reduce DPI to 75 - works in
most cases (remember this is for the www, not a
fancy brochure 3. Reduce size of photo to a
manageable size - 2 wide is usually
sufficient. 4. When saving, reduce quality
There are other choices here so that you can
change appearance, improve contrast or
brightness. Click on tabs going down or on side.

28
Final Notes

• A provider that Ive worked with is pick.net.
  Theyre reasonably small so Ive gotten some very
  good customer service from them. However, if you
  have a problem, dont blame the messenger! (I
  dont get any commissions from them.) Their
  website is www.pick.net. They will register your
  domain name as well as provide you with IDs and
  passwords fairly quickly. Customer service is
  fairly quick (usually within two hours they will
  reply with an email).
• If youre working with FrontPage, make sure you
  choose the right package! Prices are about
  20/month for a site, with discounts for one year
  pre-paid.
• Domain name registration is about 79 for two
  years.
• Any further questions - email me! Ill be happy
  to answer an occasional question (or two) but
  please remember that I make my living by
  creating/designing websites and am not a help
  desk. I can provide one-on-one training as well
  as consultation if needed (for a fee, of course).
  With practice, you can learn much of this on
  your own.
• Alan Weaver

29
FrontPage 98 vs. 2000
FrontPage 98 is no longer available (you may be
able to find it on a shelf at a store or as older
stock mail order). It has been replaced by 2000.
Any of the skills you use in 98 can be used in
2000. There are some minor differences between
the two packages. These differences include

• Only one window editor and explorer are now
  combined. It makes things a bit easier in not
  having to go back and forth between windows but
  it also means the workspace is now a bit smaller.
• Click and drag capabilities you can now click
  on a jpg or gif image in the explorer and drag it
  over into the editor.
• Ability to have more than one website open at a
  time. (if youre disorganized, it can make life
  miserable for you but it allows you to look at
  different sites at the same time)
• More features with photos you can make them
  transparent, bevel them, make them black and
  white, as well as overlap them.
• If a word is misspelled, it will put a red
  underline underneath typo (as Word does). Other
  similarities to word include the paintbrush
  wherein formatting (font, color, boldface, etc.)
  can be applied.