FrontPage 
Creating a New FrontPage Web from scratch

This one or two hour tutorial will take you through creating a FrontPage web from scratch. It will not explore themes, images or pictures,  or navigation view or bars.

When you complete this tutorial, you will have a FrontPage web that has two web pages, a home page, and a new page 1. It will also have shared borders with links in the left border to both of the web pages and one to www.yahoo.com.

Open FrontPage Explorer

In the bottom left hand corner of your screen, Click the Start Button, select Programs, and select Microsoft FrontPage. FrontPage Explorer should open and display a Getting Started window.

Create a new FrontPage Web

1. Getting Started window:  Click the radio button Create new FrontPage Web.
2. New FrontPage Web window: Select Empty Web.
3. New FrontPage Web window: Enter a short name for web like MyWeb (don't use spaces).
4. The window will disappear and you will be in FrontPage Explorer in the Navigation View.
5. In the left menu, click Folders for the Folder view. This view  is very similar to Windows Explorer.

Create a new web page with FrontPage Explorer

1. On the tool bar, click the New Page Button.
2. A new file will appear called default.htm or index.htm.  Do not rename this file as it is the home page of the website.
   WHY: Each web server has a certain file name for the home page of a web usually default.htm or index.htm. Do not change this filename as it will be home page of your web. For example, if you type www.midland-7.org the web server will find the home page for this site based on this filename. This only applies to the home page.

Edit the new web page

1. FrontPage Explorer: Double click on the new file you just created. FrontPage Editor will launch.
2. FrontPage Editor: Click your mouse in the top left corner of the page and type: My Home Page.
3. FrontPage Editor: Go to the File menu, and select Save.

Change the Background Defaults of the web page

Using Internet Explorer, how many times have you seen web pages with gray backgrounds? Well here is how to stop if from happening to your web pages.

1. FrontPage Editor: My Home Page:  Go to the Format menu and select Background.
2. Page Properties window: Change Background from Default to White.
3. Page Properties window: Change Text from Default to Black.
4. Save the file.

About FrontPage Explorer and FrontPage Editor

• FrontPage Explorer is similar to Windows Explorer. FP Explorer maintains the entire web site and takes care of managing all of the links on the web site. For example, if you change the name of a file in FrontPage Explorer, all of the links to that file will change across the entire web site.
• FrontPage Editor is similar to a word processor application, as it only edits one web page at a time. Use FrontPage Editor to edit web pages adding text, tables, pictures and more.
• FrontPage Explorer and FrontPage Editor are two linked applications. If you change something in FrontPage Editor, the information will be updated in FrontPage Explorer.

Shared Borders: What is a Shared Border?

Shared Borders is a wonderful feature in FrontPage. Shared borders act like pseudo frames, but when published to the web are really just tables. Shared borders are far superior to frames because many search engines cannot index websites with frames. Don't ever use frames if you want your web site to be found by the search engines. Below is a table illustrating the shared borders on a web page. The Top and left shared border are set to be the default for the web site, and both top and left shared borders will appear on each and every page on the FrontPage web.

 

Shared Borders: Add Shared Borders to entire web site. (web default)

1. Click on FrontPage Explorer in the task bar.
2. Go to the Tools menu/Shared Borders
3. Select Top and Left

How can I edit the shared border?

Open a web page with shared borders, and simply edit the shared borders. Remember that your changes will be change all borders across the entire FrontPage web.

1. FrontPage Explorer, Folders View: Double click on the file you just created.
   FrontPage automatically adds some navigation bars and text to the two borders.

Edit the top Shared Border

1. Go to the top shared border and select  Home Page and [bar] [bar][bar] and then delete it.
2. Place your mouse cursor in the top shared border box, and in the table menu, select Insert table.
3. Insert Table window: Change to  1 row and 1 column and all Alignment, Border size, cell padding and cell spacing set to 0.
4. Right click on the table in the top shared border, and select Table properties, change the Background color to Silver. Click OK.
5. Place your mouse cursor inside the tabel and type in Top Shared Border.

Edit the left Shared Border

1. Go to the left shared border and select   [bar] [bar][bar] and then delete it.
2. Place your mouse cursor in the left shared border box, and in the table menu, select Insert table.
3. Insert Table window: Change to  1 row and 1 column and all Border size, cell padding and cell spacing set to 0.
4. Insert Table window:  Change Alignment to Left
5. Insert Table window:  Change Table width to 150 pixels wide. Leave the Specify width box checked.
6. Right click on the table in the top shared border, and select Table properties, change the Background color to Silver. Click OK.
7. Place your mouse cursor inside the table and type in Top Shared Border.
8. Save the file.

Admire the web page you just created in your web browser.

1. FrontPage Editor: First save your file.
2. On the tool bar, select the Preview in Browser (magnifying glass icon) about the 5th icon from the left. This will launch your web browser and allow you to view  your web page as the rest of the world would see it.

Hint: After making changes to a web page, be sure to save the web page, and then click to preview in browser. If your web page changes do not show up, click Refresh or Reload on your browser.

Create another web page

Remember how we changed the background of the first web page. The easiest way to create a new web page is to do a SAVE AS.

1. FrontPage Editor: My Home Page: Go to the File menu, and Select Save to ensure all of your changes have been saved.
2. FrontPage Editor: My Home Page: Go to the File menu, and Select Save As.
3. Save As Window: Under URL, type in NewPage1.htm  This will be the new file name and for now you can just save it in the web site's root directory. As your web site grows, you will probably want to save new pages in their own folders.
4. Save As Window: Under Title, type in New Page 1
5. Change the text on the web page from My Home page to My New Page 1.
6. FrontPage Explorer: Switch over to FrontPage Explorer using the task bar (bottom of screen), and you will see that the file NewPage1.htm has been added to the web site.

What is a title?
This is the title that appears at the top of every web browser window and on top of the Frontpage Editor window. This title is also the most important information to a search engine, so make this very descriptive and filled with key search words.

 

Adding hyperlinks to your web site

Now that we have two web pages, we can now link them together.

1. Open Home Page in the FrontPage Editor. (If not open, go to FrontPage Explorer, Folders view and double click on default.htm or index.htm).
2. FrontPage Editor: Put your mouse cursor in the Left Shared Border (inside the table) just after the text, and do a carriage return (Enter or Return).
3. Type in Home Page . Now with your mouse, select the text Home Page .
4. Go to the Insert Menu and select Hyperlink.
5. Create Hyperlink window: From the files and folders window, select default.htm or index.htm and then click Ok.

Now create a hyperlink to the New Page 1.

1. FrontPage Editor, Home Page open: Put your mouse cursor in the Left Shared Border (inside the table) just after the text, and do a carriage return (Enter or Return).
2. Type in New Page 1 . Now with your mouse, select the text New Page 1 .
3. Go to the Insert Menu and select Hyperlink.
4. Create Hyperlink window: From the files and folders window, select newpage1.htm and then click Ok.

Now create a hyperlink to a world wide web site like Yahoo

 

1. FrontPage Editor, Home Page open: Put your mouse cursor in the Left Shared Border (inside the table) just after the text, and do a carriage return (Enter or Return).
2. Type in Yahoo . Now with your mouse, select the text  Yahoo .
3. Go to the Insert Menu and select Hyperlink.
4. Create Hyperlink window: In the URL field, type in http://www.yahoo.com , and then click Ok. Or you can click on the globe icon and browse to the world wide web site, then click OK.

Admire the web site that you just created in your web browser.

1. FrontPage Editor: First save your files.
2. On the tool bar, select the Preview in Browser (magnifying glass icon) about the 5th icon from the left. This will launch your web browser and allow you to view  your web page as the rest of the world would see it.
3. Remember to use the Refresh or Reload button on your web browser if  pages are not updated.

You now have enough skills to start playing around with the web pages.

If you are familiar with a word processor, or with Microsoft products, you can now start formatting your text and more.

• The left pull down menu on the tool bar applies web formats to your paragraphs. Select a paragraph, and try out the different formats out to see what they do.
• The tool bar has bold, italic, underline, left, center, and right alignments, numbered lists, bulleted lists and paragraph indent tools.
• Use the Format menu to apply different formatting, and use the font pull down menu in the toolbar to apply different fonts. Be careful with this, not all browsers support all fonts. Stick with Arial or Times New Roman.

Web Page Design

Here are some things to consider when designing your pages....

• Unlike a word processing application, Web pages stretch and shrink. Go to your web browser and shrink and stretch the browser window to see what happens to web pages.
• Try to design your web pages to be printable on an 8.5 inch by 11 inch portrait orientation. Print out the web page and see what happens.
• Download time: Big file size = a long download time. Twenty seconds is about the most people will put up with waiting for a page to download. All of those themes are graphic intensive and add to the download time.

Return to the Midland Tech Help Homepage