Course Web Site Development:
Build a Basic Website:
Adding Content

Front Page 2002 makes editing your web page quick and easy.  Here are the basic operations you can use to create and edit your web page.


Opening your Website

Before you can begin working on your website, you need to open it for editing.  Follow these steps each time you launch FrontPage in order to open your site.

  1. Click on File in the top left menu bar.
    2.
  2. Click on Open Web.  The following window will appear.





  1. If you are using a Beast account:
    • Click on the small black triangle next to the Look in scrolling list (in the example above, the text "Recent" is directly to the left of this triangle).
    • Find your website folder.  This may be located anywhere, though 99% of the time it is under your My Documents folder.
    • Once you have found it, click once on this folder (so that it is highlighted) and click the Open button.
  2. If you are using an Intrasun or Facweb account:
    • Click on the icon labeled Web Folders.
    • Find you website from the resulting list.  Click once on it and then click the Open button.

Your website will then begin to open.  Use the directions provided on the remainder of this page to add content to your site.

 

 

Creating a New Web Page

FrontPage makes it easy to add a new page into your website.  Follow the following steps to get started.

  1. Click on File in the top left menu bar.
  2. Highlight New and then Page.  A menu similar to the following will appear.

  1. FrontPage has a number of built-in page layouts that you may wish to use.  Clicking once on any of these layouts with  result in a small preview image being displayed in the area labeled Preview.  Also note that you may create general and frames pages using this menu (simply select the appropriate category from the tabs at the top of the screen).
  2. When you have selected your page, click the OK button.  The page will be created and you may add content to it at this time.  Make sure to save the page when you are finished!

 

 

Opening, Closing, and Saving Existing Web Pages

These operations are very simple and very similar to the way you open documents in a word processor program.  Opening will load and open a selected web page file.  Use the "save" operation to save the changes and modifications you made to the web page.  Then you can "close" the web page file when you are finished working on it.

To Open a Web Page File:

After you have opened your web, it is easy to quickly access the files.
  1. Click on File in the top left menu bar.
  2. Drag the mouse pointer down and click on Open.
  3. Now all the files in the web folder you opened will appear in a window.  
    Select the desired web page file, and then click on Open to open the file.

There is another way in which you can open a file.

  1. Select Page from the toolbar on the left side of the screen.
  2. The web site and all the files in the folder will be displayed on the left side of the screen.
  3. Select the file you wish to open and double click on the file to open it 

 

To Save the Changes Made to a Web Page:

After you are done adding and modifying the web page, you will wish to save the changes.  Here is how to save a web page:

  1. Click on File in the top left menu bar.
  2. Drag the mouse pointer down and click on Save As...
  3. A window will appear with the files in the web folder you are working on.
  4. In the file name box, type the name you wish to save the web page as, and then click Save.
  5. If the file has been opened before and already has the name you wish to save it as, you can just click Save in the File menu at the top of the screen.

 

To Close a Web Page File:

When you are done working on a web page, you will wish to close the file.

  1. Click on File in the top left menu bar.
  2. Drag the mouse pointer down and click on Close.
  3. If you have not saved the changes, you will be asked if you wish to do so before it closes.  If you wish to discard the changes you made, click No, otherwise, click yes to Save the changes.

There is also an even quicker way to close the file:

  1. Just locate the x in the top right of your open file.  It is located just above the scroll bar on the right.
  2. Click on the x to close the window.

 

 

Using Text in Your Web Page

Front Page 2002 makes creating text on your web page as easy as typing in a word processor.  To type text, simply place the cursor where you wish to begin typing, and type away.  Type just like you were using Microsoft Word.  One of the differences you will notice is between a word processor and Front Page is the carriage return.  The Enter key will actually create a new paragraph, and will skip the cursor down two lines instead of one.  If you just want to go to the next line, press Shift-Enter.

To Change the Font Face Size and Attributes:

  1. Highlight the words or paragraphs you wish to modify then pick an operation from those listed below:
    • To change the font size, go to the pull down menu area in the text attributes toolbar.  Click the third box from the left, and drag the menu down to the size you desire.
    • To change the font type face, go to the same text menu area, but click on the box second from the left.  Select the font you wish to use.
    • You can also underline, bold, and italicize the type you have selected.  You can do this in a similar manner to that in a word processor.  Just click on any of the three buttons (B, I, or U) for these functions in the text attributes toolbar.
    • You can change the color of the font and the background color of the font.  Once again, highlight the words you wish to modify, and click on the icon of the letter with a color bar under it.  This icon allows for changing the font color.  The pen with the bar of color underneath it is for changing the font background color.  After clicking on one of color icon, select the color you wish to use.
    • You can also change the alignment of the words and paragraphs.  You can center, right justify, and left justify the words.  To the right of the bold, italicize, and underline icons, are the three icons for the text alignment.  Just click on the icon for the alignment you wish to implement on the text.
  2. There are more advanced operations you can perform on the text.  To see them all, go to Format in the top menu bar, drag down and click on Font.  This window contains all the text options available

 

 

Importing Images and Pictures Into Your Web Page

You can incorporate any pictures that you have on your hard drive or floppy disks in your web page.  To accomplish this, walk through the following steps.
  1. Click on Insert on the top menu bar and drag the mouse pointer down to Picture.  Then click the mouse on From File.  
  2. Now a window of your web folder will appear.  In the bottom right of the window is a icon of a folder and magnifying glass.  Click this icon to open the search window.
  3. In the search window, go to where the desired picture is located on the hard drive.  After you find the picture, click on it once and then click on the OK button.

Now the picture that you have selected will appear on your web page.  The picture has also been imported to your web folder, and can be seen under your Folder List.

 

 

Modifying Pictures and Images on Your Web Page

After you have inserted an image, you will probably want to modify it.  You can change the size of the image, location, and other properties.  When you click on a picture or image, a picture toolbar appears at the bottom of the screen.  This toolbar gives you access to several techniques for modifying the picture.

Adjusting the Size of the Picture:

You can adjust the size of the picture that you have inserted into the web page.  It is quick and easy to resize a picture.  Just follow these two steps:

  1. Click on the picture you wish to resize.
  2. Notice the small black boxes that appear on the corners and in the middle of the edges.  Click and hold the button down on these boxes.
  3. Now drag the boxes towards the inside of the picture to decrease size, and outwards to increase size.

To adjust the size of a picture with more precision, follow these three steps:

  1. Right click on the image and choose Picture Properties.  A window like the following will appear.

  1. If it is not clicked already, click on the Appearance tab.
  2. Place a checkmark in the box labeled Specify Size and adjust the image width and height in the text boxes provided
  3. Click the OK button when you have finished.

 

Creating a Thumbnail of a Picture:

You can use FrontPage to create a thumbnail, which is a small version of a picture that ayour user can click on in order to see the full-size picture.  A thumbnail is useful when you have a large picture that might take a long time to download.  Rather than forcing the site visitor to download a large picture, you can provide a thumbnail, allowing the visitor to choose whether to view the full-size version.

  1. Click on the image that you wish to create a thumbnail for.
  2. Click on the icon third from the left in the picture toolbar.  This icon is the auto-thumbnail button.  A copy of the toolbar is displayed below.

The picture is now smaller, and if you click on it, the picture will link you to a page with the full size version.  The picture will be the only item on the new page, and you can click back on you browser to return to the original page.

You can also see more advanced options available in the picture's properties menu.  This menu can be found by clicking on the picture, then going to the Format menu in the main toolbar and selecting properties

 

 

Creating Links to Other Web Pages

One of the most popular features of the World Wide Web is its ability to connect directly to other web pages anywhere in the world.  These constructs are called hyperlinks.  A hyperlink is divided into two parts - the link itself and the link anchor.  A link anchor is pretty much anything that a link will "stick" to.  For example, both text and pictures can act as link anchors.  To learn how to create the different types of hyperlinks, follow the directions outlined below.

To Create a Text Hyperlink:

  1. Highlight the words (a.k.a. link "anchor") that you wish to create a hyperlink with.
  2. Now you must go to the Create Hyperlink menu.  The Create Hyperlink menu can be reached using three different methods.  First is the icon on the menu at the top of the page.  Click on the icon with the world globe with a chain link on it.  You can also find the hyperlink shortcut in the Insert menu, or when you right click on the highlighted text.  All three techniques will bring you to the same hyperlink menu, which is displayed below.

  1. In the create hyperlink menu, click the mouse on the URL text box.  Insert the web address of the web page you wish to create a link to.  After the complete address is typed, click on OK.  If the page you wish to link to is one you created in the same web folder, you can simply selected it from the list and click OK.

To Create an Image Hyperlink:

  1. Click on the image you wish to create a hyperlink with
  2. Go to the Create Hyperlink menu.
  3. Select the address or page you wish to create a link to and click OK.

To create a link to an Email address:

You can also create a hyperlink that will open a window for sending email.  To create the link to an email address:

  1. Select the words/image that you wish to create a link with.
  2. Go to the Create Hyperlink menu.
  3. In the menu, click on the envelope icon to the right of the URL text box.
  4. Type the email address in the pop-up box and click OK.
  5. Click the OK button in the Create Hyperlink menu to insert the link

 

When you are ready to publish you page, click here.