Using Microsoft's Front Page to Create Your Own Web Site

 

Creating a web site with Microsoft's Front Page is a simple process and can be done in no time.  A web site is a place on the Internet where you can publish one or more web pages that contain graphics (static or animated), links to other web pages and web sites, and information in text format.  Before beginning the actual process of building your web site, it is important to plan the layout of your site.  The easiest way is to draw a tree-like diagram.  The main page of your web site must be named index in order for people to be able to view it upon entering your address (or linking to your main page).  This will serve as an entry point into your site.  Any links to other pages you may build will be placed on index and the secondary pages should also contain links back to index (although this is optional).  There is no limitation to the number of pages you can create or the type of information that can be placed on each page.  Creating a skeletal design is a useful method for determining what you want on every page.  Then, you can go back and fill in the details.  Don't worry about messing up: nothing you do or create is permanent.  You can also re-publish web pages, so going through several designs is possible.  Here are steps for creating a simple web site in Microsoft's Front Page.

 

I.                   CREATING A WEB PAGE

 

1.      Create a new folder on your computer to keep your web files in.  This folder can be named whatever you want, but a useful name would be Web.

2.      Opening Front Page should give you a blank page.  If it does not, click File then New for a blank page.

3.      Immediately you can begin typing text into this page.  You will notice that Front Page looks like a word processing program.  On the toolbar at the top of the program, you will find such tools as center, bold, italicize, etc.  You can use these buttons just as you would in a word processor.

4.      The default background in Front Page is white.  If you don't want this, you can change the background by clicking on Format then Background.  From the menu that pops up, you can change the background color or inserting a background picture.  To change the color of the background or the visited and displayed hyperlinks, simply click the down arrow next to the option you wish to change.  To change the background to display a picture, click browse near the top of the window and choose a picture on your computer by clicking on the file you want then clicking OK.  After you have done this, it would be a good idea to give your web page a title.  Click on the General Tab near the top, left of the window.  In the box labeled Title, you can type in a title for your page that will be displayed in the top bar of Internet Explorer when someone views your web page on the Internet.  After you have completed your work click OK to return to your web page. 

5.      If your text does not show up correctly, or you want a different color or font this can be done from the main toolbar.  To change the color, highlight the text and click on the down arrow next to the A with a color underlining it.  If you want to start typing in a color, simply perform the above step without highlighting any text.  In order to change the font or size, simply click on the down arrow next to the box with text (such as Times New Roman for font type) or the box with a number (for size).  Bulleting can also be performed in Front Page the same way as in a word processor.  Note:  Front Page automatically double spaces text.  If you want a single spacing, each time you go to a new line, you must hold down Shift and then press Enter.

6.      Now would be a good time to save your work.  To do this, simply click File then Save (or click on the small disk icon on the toolbar).  If this is your first page, name it index.  Otherwise, give it a descriptive name that you will remember.  Note: Spaces are not recognized by web browsers, so do not include spaces in the name of the page.  Also, some browsers are case sensitive so be careful about capitalization.

7.      A web page with just text is a fairly boring web page.  Graphics make web pages more interesting and easy to look at.  To insert a graphic click on Insert then Picture then From File.  Now you can choose any picture on your computer to insert into the web page by clicking on the file name and then clicking Insert.  Note: Jpeg (.jpg) and Gif (.gif) files are recognized by web browsers and are used all over the Internet.  These should be the only picture files that you insert.  Additionally, if the file is too big, it may need to be resized in a photo editing program like Paintshop Pro (download time is located by the hour glass in the bottom right corner of Front Page).  If the picture is too big, it can be resized by clicking on it and locating one of the squares in the corners of the picture.  Move the mouse over one of the corner squares until the cursor changes to a double headed arrow.  Click and hold down using the mouse to resize the picture.

8.      Formatting in web pages extremely hard to do, but tables make formatting much easier.  Get to the place on your web page where you want your table and then click Table then Insert then Table.  Now, a window will pop up asking you the number of columns and rows you want in your table.  Enter this information then click OK.  The table is now inserted and ready to have information entered into it.  Each cell in the table can have text or pictures inserted into it (to insert a picture follow the procedure outlined in step 7).  The contents of the cell can also be centered or left/right justified.  If you do not want the borders of your table to be visible, click on the table then click Table then Properties then Table.  In the box beside Border Size use the down arrow to make the size of the border 0.  Now your table borders will not be visible.

9.      Linking to other pages on the Internet or other pages on your web site can be accomplished easily in Front Page.  First, type the text that you want the link to be.  For example, if you want the link to read Visit CNN then type this into the page where you want the link to be located.  Next, highlight the text and click Insert then Hyperlink (or simply click the globe with a chain link on the toolbar).  If you have created a page you wish to link to, simply choose it from the location on your computer (you'll notice a list of folders and files in the center of the pop up window).  Otherwise, in the box near the bottom of the pop up window, type the address of the page you wish to link to (starting after the http://).  When you are finished, click OK.  There is now a hyperlink in your web page.  If you wish to insert an e-mail link (that is people can send you e-mail by clicking on the text) follow the steps above except instead of choosing in a file or typing after the http:// you need to erase the http:// and type mailto:yourid@transy.edu (ex. mailto:jmiller@transy.edu).

10.  There are several ways to preview your work before uploading it to the Internet in Front Page.  The simplest way is to click on the preview tab in the lower left corner of the Front Page window.  This will take you to a preview view inside the program.  In order to return to the editing mode, you must click the normal tab located near the preview tab.  If you want to view your page in Internet Explorer, your work must first be saved, then you can click on File then Preview in Browser.  An Internet Explorer window will appear showing you what your page will look like in a web browser.  To return to Front Page and continue working, simply close the Internet Explorer window.

11.  Down the left-hand side of the Front Page screen, you will see several different view options.  By default, Front Page selects the Page View.  This is where you’ll be doing most of your work.  The Folder View, Navigation View, and Hyperlinks view are also valuable tools in constructing your web page.  The Folder View shows all the folders in which files for your web page are contained; making it easier for you to keep track of what file is where.  The Navigation View shows the navigation structure of your web page and will also allow for some construction.  Finally, the Hyperlinks view shows a hierarchical view of the hyperlinks contained within your web site, showing you what pages link to where. 

 

II.                PUBLISHING YOUR WEB PAGE TO THE INTERNET

1.      Make sure all your work is saved by clicking on File then Save (or simply using the disk icon on the toolbar).

2.      Click File then Publish Web.

3.      Click the Browse button.

4.      Click the Down Arrow near the top of the pop up window then choose your H drive.

5.      Double click the public_html folder then click Open. 

6.      Click OK then click Publish (the first time you do this, it will ask you if you want to create a web, click Yes).

7.      To view your web page, open Internet Explorer and type http://homepages.transy.edu/~yourid as the address (ex. http://homepages.transy.edu/~jmiller ). 

8.      Note:  Each time you make a change to your web page, you must follow these steps for the changes to be viewable on the Internet.

 

 

Microsoft Front Page is a powerful tool for web page construction.  These are just the basics for creating a web page.  The help file is useful in answering any questions that may not appear here, as well as giving basic instruction on some of the more advanced options.