FrontPage 2002 taught by: Alan B. Weaver email: [email protected]

FrontPage 2002

taught by:

Alan B. Weaver

email: [email protected]

Frontpage2002.ppt Page 2© 2004 Alan B. Weaver – [email protected]

FrontPage 2002

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.

2002 is quite similar to 2000, however, you have the menu bar on the right which is self explanatory. Web enabled, click on any of these to begin a task.

To start a new web, click on New Empty Web


Creating a Web

Click on the One page web 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).

If drive is not already created, it will create it for you.

Type in the address for the website in the indicated box.

You will get a prompt shownbelow right as folders are being created.


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


Folders - 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 put each “section” into a separate folder.

Note how “subfolders” are utilized, you can have multiple levels of folders. To create folders, click on Folder View at the left.

To begin creating (or editing a previously created page) your website, double click here (or on page you wish to edit). This function is very similar to Windows Explorer.


Folders - 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.

Each file needs to be distinctively named.


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


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.

Note: Explorer and Editor are in one window. The toolbars (or windows) on the left can be narrowed down by clicking on the vertical separating pipes.


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 don’t 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 aren’t 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!


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. If border size is a 0, the table structure (lines) will not appear in the browser.


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.

It is recommended for professional design appearances that the table be conservatively executed. Otherwise, the website has an amateurish effect which may be undesirable.


Sample View of Tables

Normal ViewAs you can see, there are lines in here now. We can do other things to right align the numbers, apply backgrounds, etc.

Note the red wavy underline which finds typos or words not in dictionary.

There are three different views in FrontPage - we usually work in Normal, HTML shows the hypertext mark up language code, Preview shows how it looks in browser


Preview Tab

PreviewSee how the gridlines do not appear 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 review.


Tables 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 can be cumbersome and inaccurate. An example of multiple tables is shown at right. Lines remain in this table to show positioning, etc.


Toolbars

Clicking on View allows you to see different toolbars to work with your website.


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

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 don’t have to recreate or re-input information. This can be a major time saver. However, make sure you set up the template correctly with beta testing if you have links in it.


Links (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 – go to page 19.


Creating 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 different 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.


Creating 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


Creating 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.

After shape is drawn, the insert hyperlink dialogue box appears

Creates “hot” spot


Links – troubleshooting

• 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.

Sometimes the links may not work properly. You could have any of these below problems:

Open files are at the top of this section.

Sometimes an open file is also displayed in the lower section…this often is the better choice to place link.


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!

Note: This program used to come packaged with FrontPage 98 and 2000. This is a program that allows you to create GIFs, edit JPGs (photos) and do some design work. There are other similar programs that can be used. The course will have a brief review of Photoshop.


Working with Image Composer

To create a new shape, click here

Selects the color for your box, click on “create” when done

Allows you to create “text boxes” - note, you can only do one line at a time and hit the space bar at end (otherwise it “truncates”

Creates special effects! This image has 4

components - the background box, the box behind home page, the text box, and the oval shape

Clicking on here will give you this tool so you can create a shape.


Insertion of 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 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.


Importing 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 don’t 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


Importing 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 now appear in the explorer window of FrontPage. 3

4

5

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.


Creating New Pages

If the window appearing at right doesn’t 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 we can use the formatting, information, etc. from that page without affecting the source document. 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.


Creating New Pages from Templates

Various page templates exist as you can see from this window. A small thumbnail preview is shown below right on this dialog box.

Click on OK to make this choice.


Forms

• 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 (won’t 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.


Feedback 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.

Right click inside the form section to set properties as to where it will be sent (your email address)


Other Components of Feedback Form

Time limitations in this course 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)


Types of Fields

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).

2. 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.

3. Text Box (at right) allows data entry of specific information as name, address.

4. Text area box allows more information to be put in such as comments. (can be resized)

5. Check box – allows user to check off information.

6. Push Button – necessary to transmit the information.

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.

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.

6

4

32

1

5

3


Confirmation Forms

• Confirmation forms allow the viewer to see what they’ve 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. It is case sensitive! Again, remember, no spaces in these field names.

E-mail: [UserEmail] Telephone: [Phone]FAX: [Fax]


Confirmation 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.


Confirmation 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 you’ve just created.

• When the form is filled out, the user will get a message showing what has been filled out.


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 (or icon indicated at left). For the first time, you will have to indicate the specific website. Type in the ISP # or correct web address.

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. When updates are done, pages deleted, you will receive prompts which require an answer.


Photos - 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 you’re 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 2.0 is available in Walmart for about $55. Not as powerful, it is an excellent package. 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)


Pictures – creating thumbnails

Sometimes a picture can be too large for a website…both 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)

1. Right click in the picture. Left click on the prompt for the Auto Thumbnail.

2. 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:1. When saving the web page, you will see that a new file for the

smaller image is created…it 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.


Pictures – creating thumbnails

Special notes (continued)

2. Don’t 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.


Corel Photo House

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

This program is relatively simple to use and quite straightforward. Some quick tips to get photos down to under 25K:

There are other choices here so that you can change appearance, improve contrast or brightness. Click on tabs going down or on side.


Microsoft Photo Editor

This is another simple program that can be figured out fairly quickly. Again, you can crop, cut, enlarge, and do special effects.

It does not have the sophistication of a photo editing program, but is quite useful for simple retouches.


Photoshop - 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 don’t 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 don’t 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.


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.

Photoshop - Creating a Button


Photoshop - 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 memory…if their size is too large, they will take a very long time to download if someone has dial-up.


FrontPage - 98, 2000, 2002, 2003

• 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 you’re 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.

• Many texts on the software will provide detailed information on the enhancements over the previous version.

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:


Final Notes

• Website hosts that I’ve worked with are indicated on the other handout. Experience has been good. However, I cannot guarantee the success you will have with these companies.

• If you’re 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 normal website.

• Any further questions - email me! I’ll 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

Documents

FrontPage 2002 taught by: Alan B. Weaver email: [email protected]