Title: FrontPage 2003
1FrontPage 2003
- taught by
- Alan B. Weaver
- email info_at_big-pic.net
2FrontPage 2003
When you open the program, this is the initial
screen. You have a blank page (named
new_page_1.htm) where you can work on one page or
on a website. 2003 is quite similar to 2002.
Web enabled, click on any of these items to begin
a task. To start a new web, click on Create a
new page or site
3Creating a Web
Click on the One page web site to create your
site. There are wizards or templates that can
be used - remember these are not original
designs. 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 or
in My Web). Make sure you select one page Web
site. Type in the address for the website in the
indicated box. A prompt will appear on the
screen showing that the website is being
created.
4The first view of your website
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. Note default.htm
can also be the home page.
The folder list is the initial view. FrontPage
creates the images and private folders. To open
up the index page, double click on the file name,
either in the left or right column.
5Folder View
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
6Folders - Organizing the Site
It is very important to stay organized. What
starts out as a five page site can easily turn
into a site with over 100 files in it. You need
to know where things are located. It is a good
idea to use folders to organize your web pages.
Multiple levels of folders can be used. To
create folders, click on the icon shown.
To begin creating (or editing a previously
created page) your website, double click on the
file name (or on page you wish to edit). This
function is very similar to Windows Explorer.
7Folders - Organizing the Site
The example at the left shows how the folders are
organized, with folders within folders. If you
are doing a site which is graphically oriented,
it is recommended that you have subfolders for
the image files and another one for the text
files. Files and folders need to be
distinctively named. It is not recommended that
spaces be used in folder or file names. Older
browsers cannot recognize these web pages and
will get errors. Use an underscore (_) to
separate two words. Also, do not use capital
letters as they may cause problems in some
browsers.
8File 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. You may wish to keep all
information relevant to this page or topic in one
folder. Images that are shared by many web pages
should be kept in an images folder.
9Front Page Editor
Close out the task pane to give yourself more
work area.
For editing purposes, this allows you to see the
paragraph marks and returns. Note to return
to the next line and take up less vertical space,
create a soft return (hold the SHIFT ENTER
key together.
Begin typing as if in a word processing program.
There are symbols located in the formatting
toolbar which allow you to create fonts, enlarge,
change justification, add numbers, bullets,
indent.
Note Explorer and Editor are in one window.
The toolbars (or windows) on the left can be
narrowed down by clicking on the vertical pipes.
10Design 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!
11Tables
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.
If the border size is 0, the table structure
(lines) will not appear in the browser.
12Table 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. It is recommended for
professional design appearances that the table be
conservatively executed. Otherwise, the website
has a cartoon-like or undesirable amateurish
effect. Cell padding and spacing give
breathing room to text in a table so that text
in adjacent columns dont touch.
13Sample View of Tables
Normal ViewAs you can see, there are lines in
the table at top. The lower one has no lines but
a dotted line appears. Alignment, fonts, colored
background to separate cells or backgrounds can
be applied to the table.
There are four different views in FrontPage
website is created in Design. Split shows the
design at top and the HTML code at bottom. Code
shows the HTML in the document. Preview shows
how it looks in browser
14Preview Tab
PreviewGridlines appear in the table at top, but
not in the bottom.
The preview tab shows you what site will look
like up on the WWW. You can also click on File,
Preview to review. Note that each browser views
a website differently. Netscape, Mozilla, and IE
convert the code in different ways.
15Code
The Code view shows the HTML section of the
website. You may need to use this section on
occasion to add special coding to the website
that cannot be done in FrontPage. New feature
in 2003 rows all have line numbers.
16Split
While editing a webpage, you can directly see
where you are working in the code section. New
feature in 2003 showing the two on one
screen. The tabs for design and code have been
renamed from the earlier versions but are still
the same.
17Tables inside tables
- Tables can be layered inside each other. This
method allows you to position text, images, links
more accurately. - When putting a table inside a table, insert the
table from the menu. Drawing a table inside
another table may cause problems. An example of
multiple tables is shown at right. Lines remain
in this table to show positioning, etc.
18Toolbars
Clicking on View, Toolbars allows you to see
different toolbars to work with your website.
DHTML allows the user to either swap a picture
or to allow the text to change color when mouse
is over the text. Pictures works with images so
that hyperlinks can be inserted, image
cropped/recolored, etc. Drawing and WordArt
toolbars are similar to Word/PowerPoint. They
may not view correctly in older versions of some
browsers.
19Saving a New Page (or save as)
A current file may be saved as a new file by
using save as. This screen also shows up when
saving a new page. Make sure you put it in the
correct folder
Give the page a title and a distinct file name.
As this page exists, you can change the title.
The title is what appears in the menu bar when on
the web.
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. This can be a major time saver.
However, make sure you set up the template
correctly and carefully test if there are links
in it.
20Links (aka Hyperlinks)
- 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. - From an image see page 22.
21Creating links (bookmarks) in a web page
- Sometimes you may wish to insert links on a
lengthy page wherein the reader can go to
different sections or chapters on it. - To do this, you need to create a Bookmark.
There are two methods - Click before the text or image you wish to put
the bookmark. Click on Insert, Bookmark. Type
in the name of what you wish to call it. - Select or highlight the text where you wish to
put the bookmark. Either click on Insert,
Bookmark or use the keyboard shortcut CTRL G.
You will get the name automatically this way. - To insert a link to a bookmarked section,
highlight the text (or select the image) the
viewer is to click on. Click on Insert,
Hyperlink, and click on the Bookmark notation
in the upper right corner.
22Creating a link on an image
- Once the image is in the document, create the
link as follows - Right click on the image and left click on
Hyperlink. This will take you to the hyperlink
dialog box (previous page) - Or, click on the image and click on Insert
Hyperlink - Or, click on the image and press CTRL K
23Creating a link on an image with a hotspot
- Once the image is in the document, create the
hotspot as follows - Click on the image you should get the picture
toolbar. - Click on the rectangle, circle, or polygon shape
to draw the hot spot. After the hot spot is
created, it will prompt you where you want to
insert the link. - This allows you have multiple links on an image,
this can work with a map or a large image where
you wish the viewer to make several choices to
link to.
24Links troubleshooting
Sometimes the links may not work properly. You
could have any of these below problems
- Website not found this means you are linking to
a non-existent web page. - Make sure you are linking to an existing web page
(.htm) and not a folder. - Web pages are found on your computer, but not
others. It means you are linking to files on the
hard drive and not the world wide web. Redo the
hyperlinks. Sometimes when you click on an open
file the link may not work close the file out or
click in the lower section so that link works
correctly.
25Inserting an Image
As the internet is graphically oriented, you may
wish to have images on your website. There are
two different ways to insert the image. 1. You
can click on the file and drag it into the page
you wish to insert it. 2. Or, click on Insert,
Picture, From File. Note it is necessary to
refresh FrontPage Explorer as it does not
always show the images 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.
26Importing File
When you create a website, the files involved,
from forms to pages, to graphics need to be
within the main folder of the website. However,
you dont need to recreate existing documents.
Copies of the files can be inserted by using the
Import feature. Before you import, click on the
folder you wish to import files to first. Follow
the below steps. 1. Click on File, Import.
Dialog box at left appears. You have three
choices to add a file (any existing file you
have), an entire folder, or from a website. 2.
A folder is displayed where you can make
selections. Hold down the Control key while
selecting to make multiple selections. The two
files in blue have been selected. Click on the
Open button
1
2
27Importing File
3. If all your file selections to import are
made, click on the OK Button. This will import
the files to the appropriate folder you had
selected. 4. If you have additional files to
import from other folders, click on the Add File
button again to make further selections. There
is no limit to the number of files you can
import. 5. Files will appear in the explorer
pane.
4
3
Important Note When files are imported into a
website, they will show up in the Folder List.
However, if you are creating files in any other
program they may not show up. To see them, click
on View, Refresh, or press the F5 key. Files
will then appear.
Alternate Method Copy the file(s) from explorer
and paste them in the appropriate FrontPage
folder.
28Creating New Pages
If the window appearing at right doesnt appear
on your screen, click on File, New Page. (or
click on the icon under File.) If you want a new
blank page, click on Blank Page Often, we may
wish to duplicate a page we can do that by
choosing New from existing page. This way the
formatting, information, etc. from that page can
be used without having to recreate it. This can
be done by utilizing File, Save As. Last, but
not least, there are some templates which are
very useful to work with, response forms, etc.
29Creating New Pages from Templates
Click on More page templatesto get the window
as shown at left. Click on the desired page to
open it as a blank page which can be filled in.
30Forms
- They can be created from a template or manually.
Either way works well. - A form requires considerable planning you need
to know what information needs to be captured.
It is often best to have information in specific
fields, such as first and last names, city,
state, zip separate fields. - You can make fields required to be filled in
(wont transmit if form is not complete) by going
to properties. This is good if you are doing
e-commerce or need to capture specific
information. Try to make the document user
friendly by not making it difficult to fill out.
You may wish to boldface or change the color for
required fields and have instructions at the top
or bottom of the form. - Testing of the form is critical as you want to
make sure that the form works correctly and that
the data received is understandable. Have
someone who is not familiar with the website do
the testing. - Information transmitted through these pages is
not secure. By using a secure server (website is
prefixed by https instead http), private
information such as social security numbers,
credit cards etc. are encrypted in the
transmission process.
31Feedback Forms
Comments are included in here and you can change
this form to suit your requirements. (to remove,
click on the text and press delete key. After the
form is created, right click inside the form
section to set properties as to where it will be
sent (your email address)
32Form Page Wizard
The template allows you to create a form and
shows a very simple form step-by-step. Working
with the menus, you can type in the prompt or
question that you want to appear as shown in the
window at far right.
33Form Page Wizard
There are choices that can be made in the wizard
that allow drop-down menu, check boxes, radio
buttons, or a list. Drop-down menus allow
multiple choices. This would not be a good idea
for the credit card list as indicated at far
right.
34Form Page Wizard
The final window allows another item to be added
to form. Click on finish when complete.
Sample form is shown at right.
35Other Components of Feedback Form
Time limitations in this course may prevent
discussion of all this information. 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 If there is considerable
information being posted, you can put this
information into an Access or Excel file.
You can have a confirmation page if someone
responds to site. A good customer service
tool. Specify the file name, you can use a
template to create one. You can also put in
specific fields into the page so that you can
merge information such as names, etc.
Allows you to specify specific data to be saved.
(see first dialog box at left)
36Types of Fields
There are several types of fields you can set up.
They are briefly discussed here. You can also
create your own custom form by using Insert, Form
on the men bar.
1
- Option Button - this allows the user to click on
different choices. The selections made will be
transmitted in the email to the recipient
(demonstrated in class). - Drop Down box user can make selection by click
on list. Multiple selections can be used. This
is great for lists such as states, cities, etc. - Text Box (at right) allows data entry of specific
information as name, address. - Text area box allows more information to be put
in such as comments. (can be resized) - Check box allows user to check off information.
- Push Button necessary to transmit the
information.
3
2
4
3
5
6
37Confirmation Forms
- Confirmation forms allow the viewer to see what
theyve transmitted to the webmaster. This can
be on any page with additional commentary, links,
images, etc. - First, create a blank page. You may wish to have
the names of the fields at the left typed out and
the fields displayed at right so the user knows
what they filled out. You may wish to use a
two-column table to do this. The information
will appear as follows - What appears on the right is the field. It must
be named EXACTLY as you named the fields in the
previous section. Again, remember, no spaces in
these field names.
E-mail UserEmail Telephone
PhoneFAX Fax
38Confirmation Forms
- To merge with the field and display it, click on
Insert, Web Component - Click on Advanced Controls and choose
confirmation field from the right side. - You will get a prompt (below right) asking for
the name of the form field. Make sure it is
correctly named. Remember, do not use spaces in
these names. - Also, you cannot have two fields with the same
name on the form. - Note to speed up this process, it is best to
use the copy and paste technique and to rename
each field.
39Confirmation Forms
- Now, the pages need to be linked together. Go to
the original form created. Right click in the
form section, going to Form Properties and click
on the options tab. - Click on Confirmation Page, and browse to find
the page that youve just created. - When the form is filled out, the user will get a
message showing what has been filled out.
40Publishing the Site
1. Save all documents in front page editor and
close out 2. Make sure you are connected to
WWW. 3. Click on File, Publish (or icon
indicated). For the first time, you will have to
indicate the specific website. Type in the ISP
or correct web address. 4. 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.
41Publishing the Site
- You will be prompted to provide ID and password.
When updates are done with either revised pages
or pages deleted, you will receive prompts asking
if you wish to delete the file or not. - If you are a bit forgetful, you may wish to have
FrontPage remember your password!
42Publishing the Site
The pane at left shows the current website on
your hard drive. The pane at right shows what is
on the server. Click on Publish Web site to
update the site.
Status in lower left shows that the website was
successfully published (or updated). You can
view the site by clicking on View your Remote
Web site
43Photos - JPGs
- It is best to keep the photos as small as
possible - less than 25K if possible. You can get
good results with images of 10K. The goal is to
get the page to download in 30 seconds or less. - 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 over
500. Photoshop Elements 4.0 is available in
discount stores for less than 100. Not as
powerful, it is nonetheless excellent. Some
photo editing programs are included with a
scanner. - To obtain digital images, there are three ways
1) digital camera (ranging in price from 30 -
1,000 2) scanner (good to have, costs are
very reasonable now) 3) having photos developed
and returned on disk - Kodak, Mystic, Clark,
York, your local store (CVS, Walmart, Walgreens)
44Pictures creating thumbnails
Sometimes a picture can be too large for a
websiteboth in memory (which takes too long to
download) as well as in size. FrontPage has this
wonderful feature allowing you to create a
thumbnail picture (smaller size in memory as well
as physically for the website)
- Right click in the picture. Left click on the
prompt for the Auto Thumbnail. - A smaller image appears on the screen. There is
a link on the image which allows the viewer to
see a larger image of the page. The link is to
the image file, not a web page. - Special notes
- When saving the web page, you will see that a new
file for the smaller image is createdit has the
word small after the original file name. (good
idea to stick with this naming convention). See
diagram at left. To keep your website files
organized, you may wish to change the folder so
that it will be stored with the larger sized
image. Click on the Change Folder to select
the correct folder.
45Pictures creating thumbnails
- Special notes (continued)
- Dont like the size of the thumbnail? You can
change the default sizes (width or height) by
clicking on Tools, Page Options. Select the
tab for Auto Thumbnail and you can have a
standard size for all your thumbnails. It will
also allow you to remove the bright blue border
that may appear on your images. Features such
as the beveled edge ARE not recommended.
46Corel 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.
47Microsoft Photo Editor
This is another basic program that is user
friendly. The user can crop, cut, enlarge, and
do special effects. It does not have the
sophistication of a photo editing program, but is
acceptable for simple retouches.
48Photoshop - Creating a Button
- Graphic buttons are a great way to put in some
visual pizzazz in a website. These instructions
are based on Photoshop 7.0. The instructions
herein should work with other versions. If you
wish to purchase the program and you are a
student, an excellent source is campustech.com.
Go to their website and you will find a toll-free
as well as an on-line catalog. - Open Photoshop
- Select a background color in the toolbar.
- Click on File, New and set defaults as shown at
right. As you dont want the button to betoo
large, choose a size that is appropriate (it
canbe resized on the web page but it is best
toset it up at the proper size when creating
it). - If you dont like the color in it, recolor by
changing the foreground color. Click on the
paint bucket tool. Click inside the shape and
it will be recolored.
49Photoshop - Creating a Button
Note these screens are from Photoshop 7.0
1. Click in here to choose a new color
2. Click in here to get the paint bucket. If it
is not there, click and hold down and make the
choice from the drop down menu.
3. Click in the object or layer that you wish to
recolor and it will be changed.
4. When creating a text box for the website that
you will be using for links, it is best to create
the LONGEST one first to make sure they are sized
properly. (of course you can put text on several
lines such as Home
Page After clicking on the T, insert mouse in
area and draw a rectangle. Choose font size and
style on above menu. Insert the text that you
wish in the text box.
50Photoshop - Adding text to the button
The example shown above consists of two layers,
the text and the green background. When a
Photoshop document is saved, it has .PSD
extension which is useless for a website. You
may wish to keep the original files (which are
memory hogs) so that you can edit. (click on
File, Save to do this) However, to make them work
on the website, they need to be saved as .JPG
files. To create a .JPG file for the Internet,
click on File, Save for Web
Click on the selection that you prefer.it shows
different qualities and sizes of files. Give
the file a specific file name. Note the .jpg
file will consist of ONLY one layer and cannot be
modified. The .psd file CAN be modified. The
psd file is 30.5 kb and the .jpg file is 2.05 kb.
Try to keep your images as small as possible in
memoryif their size is too large, they will take
a very long time to download if someone has
dial-up.
51FrontPage - 98, 2000, 2002, 2003
FrontPage 98, 2000, 2002 are no longer made by
Microsoft. (you may be able to find it on a shelf
at a store or through Ebay). It has been
replaced by 2003. There are differences between
all of the packages. These differences include
- 2000/2002/2003 - Only one window editor and
explorer are 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. Tables have many new features in
2003. - Click and drag capabilities you can now click
on a jpg or gif image in the explorer and drag it
over into the editor. (98 requires you to use the
menu bar). - 2000 allows 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) - 2000 More features with photos you can make
them transparent, bevel them, make them black and
white, as well as overlap them. - 2000 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. - 2003 has many enhancements to the publishing
process, tables (which are much more
sophisticated).
52Final Notes
- Website hosts that Ive worked with are indicated
on the other handout. Experience has been good.
However, success cannot be guaranteed. - If youre working with FrontPage, make sure you
choose the right hosting package! Prices can
start at 99/year for a bare bones site. Domain
name registration is about 25 per year now, some
places do this at a discount. You should not
have to pay more than 30/month for a website
unless you are storing considerable files online.
- Any further questions - email the instructor at
info_at_big-pic.net! Instructor will be happy to
answer an occasional question (or two) but please
remember that the instructor is not a help desk.
Additional training as well as consultation if
needed can be provided (for a fee, of course).
With practice, you can learn much of this on your
own. - Alan Weaver