TopWeb Page Authoring with FrontPage EditorŠ

Step 1: Create a Folder on Your Hard Disk
Step 2: Capturing Images from the Internet
Step 3: Formatting the Background Information
Step 4: Editing and Previewing Information
Step 5: Inserting and Resizing Images
Step 6: Editing Graphics with FrontPage EditorŠ
Step 7: Adding Tables to Your Web Pages
Step 8: Creating Hyperlinks

Step 1: Create a Folder on Your Hard Disk

Create a folder on your hard disk. With this folder, you will mirror what is in this folder to what you will be uploading on your web server. To do this:

1. Click on the icon called "My Computer" that is on your desktop.

2. Click on "C" for your hard drive.

3. Click on "File"

4. Click on "New"

5. Click on "Folder"

6. Name this file anything that you want. Always use lower case letters when naming folders and files.

7. Double click on your new file so that your new file appears in the address window.

8. Create a new folder by repeating steps 3, 4, and 5. Create a new folder for each type of file that you might want to include in your web site. Suggestions are:

• img - image files

• vid - movies, quick time files,

• aud - audio samples such as WAV files

• apps - java applets, active X scripts

• shock - shockwave files

Step 2: Capturing Images from the Internet

Before capturing images from the Internet, you need to consider the following:

• Is this a reliable source? You should research each site that offers graphics for web use and make sure that the images you will be taking from that site is a reliable source. Some sites have created a catalog of images by capturing graphics without the creator or illustrator's permission. This is an infringement of their intellectual property. Never use graphics from sites that do not have clear ownership of that graphic.

• Do you have permission to use this graphic? Many sites welcome the use of their graphics on web sites, but there may be some restrictions as to whom can use this graphic. Usually there is no charge for the use of graphics on non-profit organization sites and only a nominal fee for commercial web sites.

• Does the creator of that graphic want a link back to their site? Read the terms that the owner of the graphic has for the  use of their images. Often the people who created that graphic require that a link back to them is included.

1. Position your mouse arrow on top of the graphic that you have selected.
2. Use the right click button on your mouse and choose "Save Picture As..."

3. Find the folder that you created on your hard drive for your web site and save the image in your graphics folder.

4. Use lower case letters for naming your file. These images should be saved in gif or jpeg format.

To save an image on your hard drive, follow these steps:

Suggested Graphic Sites

Step 3: Formatting the Background Information

This step will show you how to choose background colors for your web page, set the text colors that will be used throughout your web page, and enter information into your web page so that search engines can correctly catalog and describe your web page.

1. Go to "Format"

2. Go to "Background"

3. 

4. There are three tabs that you will use to format the information you will need for your web pages:

• Background

• General

• Custom

Under "Background," you can choose the background image that you want to use for your web pages. You will choose the color of the text, hyperlink, visited hyperlink, and active hyperlink. Be sure that the text colors can be easily read against the background you are using. Under "General," you should type the title for this web page. Each web page that is created should have a unique title.

Under "Custom," you should add the following information as shown in this image.

This information will tell search engines how to catalog and correctly describe the material on your web site.

When you are finished entering in the data, click "OK."

Step 4: Editing and Previewing Information

Now that you have formatted the background elements for your web site, you can begin adding the visible data that visitors will see when they come to your web page.

1. Before adding any new information, be sure that you have saved the information that you have entered so far.
2. Look at the image to the right. At the bottom of this image, you will see three tabs named: Normal, HTML, and Preview.

FrontPage EditorŠ allows you to look at your web page in three kinds of format. Each one has a specific use:

• Normal: this is the format you will use to edit the visible information on your web page. For additional tips on how to add information to this page, here are more resources that you can use:

Welcome to FrontPage
http://www.actden.com/fp/

Microsoft's FrontPage
http://www.microsoft.com/frontpage/

• HTML: Click on this tab to view the Hyper Text Mark-up Language that this WYSIWYG editor is coding your web page in. If you will be writing several web pages and you are the webmaster of your school site, it will be extremely beneficial for you to learn how HTML is written. From time to time, you will need to edit or "tweak" your web page under the HTML tab.

FrontPage EditorŠ is so powerful, though, that there may be times that you will need to edit your web pages using wordpad or notepad.  When you use FrontPage EditorŠ, it is assumed that you are using a web server that has files that will help you execute dynamic commands created by FrontPage EditorŠ for your web page. These resources include image maps, web counters, and databases.

If your web server does not have the files required to successfully execute commands such as image maps and web counters, your information will be unreadable by people visiting your web page. Every time you open your file in FrontPage EditorŠ and it detects HTML coding for image maps and web counters, it will rewrite your files so that it is executeable only with the files that it assumes is loaded on your web server. Check with the people who are maintaining your web server and see if these files are on your web server.

If you are using a web server that does not have the files that will help you execute these dynamic resources, you must edit your web page using wordpad or notepad.  For tips on how to add coding to your web page, here are some suggested resources:

Off Line Resource

HTML for the World Wide Web: 4
by Elizabeth Castro
published by Peachpit Press

 

On Line Resources

Web Developer's Virtual Library
http://www.stars.com/Authoring/

A Beginner's Guide to HTML
http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerP1.html

So, You Want to Make a Web Page
http://junior.apk.net/~jbarta/tutor/makapage/index.html

• Preview: This tab will display your web page as it would appear in a web browser. You are unable to edit your web page under this tab.

There are two ways that you can preveiw your web page. When previewing, you will be unable to edit any data.

1. Use the "Preview" tab found at the bottom of FrontPage EditorŠ page.
2. Choose the icon at the top on the Standard Toolbar to preview this page in an actual browser as seen in the graphic on the right.

Step 5: Inserting and Resizing Images

You should avoid over doing the number of graphics on your web page.  Graphics should be as small as possible and are usually the number one reason why it takes web pages so long to download. According to Emarketer.com, "Pages taking over 20 seconds to load can lose over 50% of visitors."

WebSite Garage at http://www.websitegarage.com recommends that your home page should be under 40K and the other pages on your site should be under 30K. You should keep these recommendations in mind when your begin inserting graphics in your web page.

Follow these steps for inserting images:

1. Position your blinking cursor on your page where you want the image to be inserted.
2. Click on the "Insert Image" icon as seen in the graphic on the right which is found on the Standard Toolbar.
3. Browse through your directory until you find the folder for your web site.
4. Go to your image folder.
5. Choose the image that you want to insert in your web page, by highlighting the name.
6. Click "OK"

Follow these steps for resizing images:

1. Take your mouse and click once on the image that you want to resize. You will see "handle bars" surrounding your image.
2. Grab one of the handle bars and resize the image until it is the size that you want, then let go.

Follow these steps for editing the information about the images:

Some people who will be viewing your web page may have decided not to download any graphics and are only looking at your text information. When you insert an image into your web page, FrontPage EditorŠ automatically adds the name and the size of the image as a text alternative for those people viewing your web page without graphics.

You can edit the information about your image by following these steps:

1. Place your mouse on top of the image and right click the image one time.

2. Drag your arrow down to "Image Properties"

3. Enter the text that you want to appear to describe your image.

Follow these steps for image alignment and border thickness:

You can also add or remove borders from around your image and align your image with the text. At the top of the "Image Properties" box, there are three tabs: "General," "Video," and "Appearance."

1. Select "Appearance"

2. Under "Border Thickness" you can designate the width that you want.

3. Under "Alignment" you can position your graphic on your web page. By choosing an alignment, your text will wrap around an image. If you keep the alignment as "default," the text in your web page will not wrap around the image.

Step 6: Editing Graphics with FrontPage EditorŠ

FrontPage EditorŠ has a handy graphics editor.

Select an image with your mouse by placing your mouse ontop of an image and clicking on that image one time. Notice how handlebars are now surrounding that image and a toolbar becomes visible on the bottom left hand side of your screen:

Using the image toolbar

Explore the functions of the image toolbar by saving this image of the lion in the right hand cell. Next insert this image in your web page and begin exploring the editing icons on the image toolbar.

Creating Imagemaps

The first five icons found on the Image Toolbar have been designed so that you can create clickable hotspots within an image which is called an imagemap. The imagemap that FrontPage EditorŠ creates will be unreadable if the webserver which is hosting your web pages does not have the needed files loaded on the webserver to execute the imagemap. Check with the web server provider to see if the files have been added. Tell them that you are creating web pages with FrontPageŠ and would like to know if they have the files on their web server that will read

More icons on the image toolbar

Read below to find out why this image is not appearing in your browser.
Use this icon to add text to a graphic. Select your graphic, then choose this icon. A text box will appear inside of your graphic. You can use the "Format Toolbar" to choose the font, the color of the font, and the size of the font that you want to put in your image. You can move the text to any place within your graphic. This icon actually creates a small imagemap on your graphic. Because imagemaps require added files to be loaded on your web server in order for them to be read and my web server does not have the files located on it, this image is unreadable. Click "Save" after editing your picture.	Use this icon to create a transparent background for your image. Select your graphic, then click on this icon. Choose the color in the image that you want to become transparent. Once it is transparent, click on "Save."	Use this icon to crop the image. Select the graphic, then click on this crop icon. Handle bars will appear inside of the graphic. When you have enclosed the portion of the graphic that you want, you can either press "Enter" or you can reclick the crop icon. This will remove the excess. Click "Save" after you have finished editing your picture.	The next three icons on the image toolbar will do one of three things: Washout: This is the editing icon that was used to produce the effect on the image above. Black and White: this will turn all of your colors into black and white. Reset: this will restore an image to it's saved version.

And more icons...

These icons will allow you to rotate or flip your image. Select your graphic, then rotate or flip your image. Click "Save" after you have finished editing your picture.	These icons will allow you to brighten or darken your image. If you do no like how your image appears, click on the "Reset" icon to restore your image to the original settings. Click "Save" after you have finished editing your picture.	This icon will add beveled edges to your graphic. Select your graphic, then click on the beveled icon in the image toolbar. Click "Save" after you have finished editing your picture.	This is the "Resample" icon. Whenever you resize your images, either by making them bigger or smaller, you sometimes lose clarity in your image. By clicking on the resample icon after resizing an image, you can add crispness or clarity to your image. WARNING: once you have chosen to resample an image, you cannot reset your image to it's original setting. It is a good idea to save a copy of an image before you begin resizing it.

Step 7: Adding Tables to Your Web Pages
with Table Toolbar

Working with the Table Toolbar:

In the cell above, there are two images of the same table toolbar, but with some minor differences. Some of the icons that appear on the toolbar are not highlighted in one image and are highlighted in another. How to highlight so that the icons are active for your use will be discussed in this table.

Section 1: There are two choices in the first section:

• The first icon helps you draw a table anywhere on your web page. You can select and deselect this option by clicking this icon off and on.
• The second icon will erase cells within a table. It will not erase a table, but only the cells within the table. You can do this by clicking on this icon, then dragging the eraser over a wall of a cell.

Section 2: There are three icons in this section:

• The first icon will insert a row within an existing table.
• The second icon will insert a column within an existing table.
• The third icon will delete highlighted cells within a table.

Section 3: There are two icons in this section:

• The first icon will merge highlighted cells together.
• The second icon will split highlighted cell(s) into rows or columns.

Section 4: There are three icons in this section. These icons determine the postion that data is viewed in a cell. The three choices are:

• aligning data so that it appears at the top of the cell.
• aligning data so that it appears centered in the cell.
• aligning data so that it appears at the bottom of the cell.

Section 5: There are two icons in this section:

• The first icon will distribute highlighted rows evenly.
• ">Section 6: This offers a quick option for the color that you want for each cell or a group of highlighted cells.

Inserting a table within your web page:

There are two ways that you can insert a table within your webpage:

1. You can use this icon that is on the standard toolbar. You can click and drag the number of rows and columns that you want, then release your mouse. FrontPage EditorŠ will automatically set your table width to 90% of your page. You will need to use this icon to insert a table that is nestled within another table.

2. You can use this icon that is on the table toolbar and draw on your web page where you want a table to be inserted. A small table will appear on your web page, which can be resized.

Resizing your table:

There are two ways that you can resize your table:

1. Position your mouse over a cell or table wall until you see a double-ended arrow, then click and drag the wall to the width or heighth that you want.

2. Place your mouse anywhere inside of your table, then right click on your mouse one time. An information box will appear. Highlight "Table Properties," then click once.

One of the sections in the "Table Properties" box will give you the option for setting the size of your table.

It is recommended to use the percent option rather than the pixel option when sizing your table. By using the percent setting, your table will expand and contract depending on the size of the screen that is viewing your web page.

 

Setting table properties:

One of the sections found on the "Table Properties" box, is the layout which has five options:

1. Alignment: use this to choose where you want your table positioned on your web page: right, left, center or default.

2. Float: If you choose the default option, the text on your web page will not wrap around the table. By choosing right or left, the text on your web page will wrap around your table.

3. Border Size: This determines the width of the line that can surround your table.

4. Cell Padding: This determines how much space separates the information in the cell from the cell wall.

5. Cell Spacing: This determines how much space separates each cell.

 

In the "Table Properties" box, you can customize the background of your table or you can customize the background of each cell if you had chosen "Cell Properties."

1. Under "Custom Background" you can either insert an image or choose the background color for your table. If you do not choose anything under this heading, the background image or color of your web page will appear.
2. Under "Custom Colors," you can choose the color of the border that surrounds your table. If you choose the light and dark border colors, you can create a 3-D effect to the border.

 

Selecting rows and columns:

To format your cells or to change the properties of rows and columns, you will need to know how to select or highlight cells. There are two ways that you can select cells in a table:

1. You can select one or more columns and rows by positioning your mouse on the edge of the cell and when the mouse arrow becomes a solid black arrow, you can click and drag the arrow to highlight your selected cells.
2. You can position your mouse inside of a cell, then click and drag your mouse over the cells you want to select.

Step 8: Creating Hyperlinks

A hyperlink in your web page will take visitors to different web pages on your web server or anywhere in the World Wide Web. You can hyperlink either images or text to another file on your web server, to a web page on the World Wide Web, or to an e-mail address.

Creating a hyperlink:

To create a hyperlink you should:

1. Highlight the text or select an image on your web page

2. Click on this icon found in the standard toolbar then follow these directions:

3. An information box called "Create Hyperlink"   will appear on your screen. At the bottom you will see the options you can use for creating your hyperlink.

 

4. Click on the icon with the world to link the text or graphic to a web site on the World Wide Web. By clicking on this icon, you will execute your browser. Find the web page that you want to link to, then return to FrontPage EditorŠ. You should see the last web page that you browsed to, in the URL window of the "Create Hyperlink" information box.
5. Click on the icon with the folder to link the text or graphic to a web page or graphic that is on your hard drive. Before linking a web page or graphic to another web page or graphic, you should make sure that this file or graphic that you are linking to is located within your web site folder.
6. Click on the icon with the envelope to link the text or graphic to an e-mail address. When you click on this icon, you will be prompted to enter an e-mail address of someone such as yourname@webserver.com

Editing or removing hyperlinks:

To remove a hyperlink from an image or text, select or highlight the hyperlink you want to edit and go to "Hyperlinks Properties." You must remove any information that is appearing in the URL window found in the "Hyperlink Properties." There are two ways that you can open the window called "Hyperlink Properties" which is where you can edit or remove hyperlinks on your web page:

1. Place your mouse on top of the hyperlink you want to edit, then right click on the hyperlink and select "Hyperlink Properties."
2. Place your blinking cursor anywhere within the hyperlink or select the graphic that you want to edit, then click on the hyperlink icon on the standard toolbar.