Site hosted by Angelfire.com: Build your free website today!

FrontPage II | Creating Tables

 
 

Robotics Art Club Site

In this first lesson, you learned how to use tables in FrontPage to organize your Web layouts. In this first exercise, you'll build on that knowledge to build a complete Web site using the Navigation view.

So that you can focus on the act of building a site, all text and graphics are provided for this exercise, as well as step-by-step instructions. You'll set up your navigation, file structure, and hyperlinks. You'll plan your site and figure out how many sections you need and what they'll be called.

To add color and design, you will use tables to organize the information and place images on your pages. By executing these lessons, you will gain hands-on experience with practically every aspect of creating tables, and reinvestigate some of the basic formatting tools you learned about in Intro to FrontPage.

Please do not deviate from the instructions, as each exercise builds on the previous exercise. At the end of the exercise, you'll be given an optional project in which you can apply what you've learned to your own creative endeavors!

Directions: When going through these exercises, read each step completely before executing the instructions. This will keep you from going down some strange paths. Also, if something does not look right, chances are you opened the wrong dialog box or selected an inappropriate view. Just use the Undo function to get back to where you were!

In this exercise, you're expected to:

Set up the foundation of a complete Web site by creating a new FrontPage Web and each of seven individual pages.
Create a table of contents for the site with FrontPage's drag-and-drop hyperlinking.
Use FrontPage's table tools to create a specific table for the home page.
Import a set of images from the Web into the site structure.
Place and position imported images on the home page.
Perform site maintenance to keep files and file structure organized.
Import various types of text documents into the content of the site.
Create and edit tables for each page of the site and place respective text and images in the appropriate table cells.

 

Exercises are evaluated for technical proficiency and understanding of course content.

 

 

 

The Robotics Project

 

The FrontPage Web you will be building in this exercise is a site for a Robotics Art Club (RAC). Don't know a thing about Robots? You don't need to. This site is based on a long-running artificial intelligence project of mine, and the text and graphics are all set up for you.

For the site, you will set up six sections called ABOUT RAC, IDEAS FOR ROBOTS, MEMBERS EMAIL, LEARNING ROBOTICS, RESOURCES, and SCRAPBOOK.


This is how each page of the assignments should ultimately look.
Click images to full scale.


THE HOME PAGE


THE ABOUT PAGE


THE IDEAS PAGE


THE LEARNING PAGE


THE CONTACTS PAGE


THE RESOURCES PAGE


THE SCRAPBOOK PAGE


 

The Big Set-up
1. Getting Set Up

To get set up for this exercise you need to open a new FrontPage Web, give it a name, and choose the appropriate views.

a. Open FrontPage and create a new Web: File>New>Web. You will be presented with the New dialog box. The One Page Web should already be highlighted in the Web Site Templates Box.

b. Before you click OK, specify the location of the Web under Options by typing C:\My Documents\My Webs\Exercises. Then click OK. If you do not see the vertical gray Views bar on the left, choose View>Views Bar.

c. Remove the new_page_1.htm page by clicking the x in the upper right corner of the page. Do not close the program, just the file. Now click the Navigation icon in the Views Bar on the left and the Toggle Button in the upper left (highlighted). If your screen looks like the following, you are ready to build your Web site:

2. Creating Pages in Navigation View

In FrontPage, as with most computer applications, you can accomplish the same tasks in different ways and from different perspectives.  In this exercise, you will be creating new pages in the Navigation view, which has some advantages over other methods:

 
 
  • It's faster.
  • It's easier to visualize your Web structure in the Navigation view.
  • You can create hyperlinks simply by dragging a file to a page.
  • You are well-positioned to use Shared Borders and Navigation Bars.
 
 

With the exception of Shared Borders and Navigation Bars, which are covered in the next lesson, this exercise will demonstrate these advantages.

a. While in the Navigation view, click the New Page button (top left) six times. Six new pages will appear under the Home Page. For a better view, click the Portrait/Landscape button.

b. Click twice slowly in the first new page and type, in all caps, ABOUT RAC. This will be the title of the page, and as you will see later, these titles will automatically become text hyperlinks.

c. Hit the Tab key to get to the next page. Now entitle the remaining new pages as follows: IDEAS FOR ROBOTS, MEMBERS EMAIL, LEARNING ROBOTICS, RESOURCES and SCRAPBOOK.

3. Drag and Drop Hyperlinking

With the Folder List open and the Page view selected, the following is a quick way to create a table-of-contents, complete with the appropriate hyperlinks:

a. Make sure the Folder List is open, then double click the Home Page icon in the Navigation view. This will open Page view, ready for editing.

b. With the exception of the index.htm file, drag each of the pages into the body of the blank Home Page starting with about_rac.htm. FrontPage automatically creates a hyperlinked table-of-contents using the titles of each page.

c. This is the first time you have actually added any content to a page. While in Page view, with index.htm open, click the Save button. Note: Regardless of whether you save or not, all changes to file names and page titles are automatically saved when you leave the item!

d. Now click the Hyperlinks view to see your linking structure. It should look something like this:

4. Renaming Files

Before completing this section of the exercise, you will need to give your files appropriate names.

a. Switch to the Folders view. The file names and the page titles are presented side by side, which makes it less likely that you will misname your files.

b. Rename each file using the first word in the page title, for example: about.htm.

Note: Although it is not absolutely necessary in FrontPage, it is a long-standing convention to use a short file name with all lower-case characters and no spaces. This will be necessary if you ever move your site to a non-FrontPage Extended server.

c. When you attempt to leave the renamed file, FrontPage will prompt you with a question (see below):

You should click Yes here. But contrary to what you might think, there are situations where you want to break the hyperlink, especially if you are going to rename another file to accept the hyperlink.

In the Folder view, your Web site should look something like the following.

 

Designing the Home Page (with Tables)

In this part of the exercise, you will alter the look and feel of your Home Page by adjusting text formats and placing images into table cells.

1. Basic Text Formatting

The following is a refresher on text formatting that was covered in FrontPage I.

a. If you have not already done so, open the index.htm page. At the top of the page type "Robotics Art Club Directory." Insert Breaks between "Robotics and Art" and "Club and Directory." Make a paragraph break after "Directory" and before "ABOUT RAC."

b. To insert a Break, use Shift Enter. For a new paragraph, just use Enter.

c. Select All and choose Arial from the drop-down Font menu, 8pt from the Font Size menu, and click the Align Left button. Highlight just "Robotics Art Club Directory" and make it 10pt and bold.

2. Positioning With Tables

This step begins to cover the central issue of Lesson 1 -- working with tables. Below Scrapbook, create a table with two rows and two columns by dragging the Insert Table button.

a. Right click the table and choose Table Properties. Change the Border Size to zero, the Specific Width to 100% and the Specific Height to 100%.

Setting the Specific Width to 100% is normal procedure. Setting the Specific Height to 100% is not. It is only useful when the content of your page is smaller vertically than an average browser window. Without a 100% height setting, you can float your content all the way to the bottom of your page regardless of the visitor's window size.

b. Select the left column by moving your cursor to the top of the column. Click when it turns into a solid down arrow . Now, right click either cell and choose Merge. Select the right column. With both cells highlighted, right click either cell and choose Cell Properties. Change the Specific Width to 70%. Since there is only one cell in the left column, in order to access the Cell Properties, right click the cell. Make the left column Specific Width = 30%. Note that altering the Specific Width does not make this cell any smaller than 30% or, in the case of pixels, any smaller than, say, 200 pixels.

Select all the text above the table and drag it into the left cell. Remove any Breaks or Paragraphs above and below the text in the cell as well as any breaks or paragraphs above and below the table. The text should float halfway between the top and the bottom of the cell.

If you cannot see the breaks and paragraph symbols, click the Show All button. The icon for this command looks like the paragraph symbol .

Your work should look like the following:

3. Importing Images

To continue, you will need images for your site. There are many ways to get images onto your Web page. If you have your images for a project all ready to go, either on the Internet or on your hard drive, the following method is quick and easy.

For the purposes of this exercise, you'll download given images. Click here to download a ZIP file containing all of the graphics for the site. Unzip the file and place all of the images in it on your Desktop. Note: When following these instructions, do not confuse Folder List with the Folders icon in the Views Bar.

a. In the Folder List, click the top level of your Web C:\My Documents\My Webs\Exercises. Under File, choose Import. The following will appear:

You can import a file or a folder located on your computer from the Import dialog box. Click Add File and browse to one of the images on your Desktop. Continue the process for the remaining images and click OK to import them to your site.

b. Your images are all set, and you don't need to do anything else for this step, but I'll walk you through the other method of importing so you have it for future use. Sometimes clients will give you a Web URL to a folder of images. You can import them easily by clicking the From Web button. The following will appear:

Just enter the URL given to you in Location, click Next, Next again, then Finish. If everything is working, a group of images should download to your site. If you get an error message, it is usually because you have a minor typing error in your URL. Examine the URL carefully and you will find it. Remember, this step is not used for the exercise, just for your future reference.

4. Finishing up the Home Page

Now you're almost ready to place a logo in the top cell and a picture in the bottom cell. A little adjustment and your Home Page will be complete!

a. Click and drag rac_logo.gif to the top right cell. Click and drag opening_page_picture.jpg to the bottom right cell.

b. The page should be coming together nicely by now -- except one thing. Click on the hyperlinks, and you'll find they return to odd places. To fix this, right click the cell holding the hyperlinks and choose Cell Properties. In the Cell Properties dialog box, place a checkmark for No Wrap.

c. To finish the Home Page, let's change the color of the hyperlinks. Right click anywhere on the page and select Page Properties. Choose the Background tab. Change the Hyperlink Color to Navy (blue). Leave the Visited hyperlink and the Active hyperlink colors as default.

d. Now Save. By now, your Home Page should look like this:

5. Moving Files Around

Moving files around on a Web site can be very dangerous if you are not using FrontPage. The slightest inaccuracy in file names or folder structure can leave your site with broken links and missing pages. While such things aren't life or death, they won't impress your clients, either!

Before leaving this exercise, you need to do a little site maintenance. First, put all those image files where they belong, in the image folder.

a. In the Folders view, select all the image files and drop them into the image folder. At this point, make sure you Save.

Holding down the Control key allows you to select more than one file at a time, just as with any Microsoft product. Please note, however, that this does not work in the Folder List, only in the right panel of the Folder view. Sometimes the terminology can get a little confusing.

b. Now that you have moved all the images, you should check that the image links on the Home Page are still functioning. Double click index.htm to open the Home Page in Page view. Switch to preview mode; the Preview tab is near the bottom center of FrontPage.

c. Click the Refresh button on the top toolbar and check that the images are still there. If they are not there, it is because you did not save.

This is an excellent example of how FrontPage keeps track of your hyperlinks. With other programs, you would have lost the links to the two images on your Home Page.

d. Close the Home Page by clicking the x at the top right of the page window. If there are any other windows open, close them as well.

In the Folder list, double click about.htm. The page will open in Page view. It should be an empty white page. Now you are ready to receive content.

Bringing in the Content

In this section, you will add content to all of your Web pages, and you'll take a look at some other ways of retrieving and adding site contents for future reference since clients often provide content in a variety of file types.

1. Getting Content Via Rich Text

All of the content you need for this site is in rich text format, or RTF. Click here to download a ZIP file containing all of the RTF files for the site. Unzip the file and place all of the RTFs in it on your Desktop. Let's run through the most accurate way to import RTF files:

a. Open your Web browser, go to File>Open, and choose the about.rtf file from your Desktop. and go to http://remo.net/content/ideas.rtf. If you are using Internet Explorer, the RTF file will open automatically. If you are using Netscape, you may be asked to Save to disk or Open. If so, open it!

b. Switch back to FrontPage and open about.htm. Right click in the blank page and choose Paste. FrontPage recognizes that this is an RTF file and sends it through the appropriate translator. Any formatting from the original RTF is retained (though you'll be modifying this later).

c. Save your work.

d. Repeat this process for the remaining pages of the site: ideas.htm, members.htm, resources.htm, learning.htm, and scrapbook.htm.

2. Other Methods of Getting Content

You already have the content you need for the site, but let's take a quick look at the other ways you can get content into your Web pages:

 
 
  • Email: When clients send you content via email, it's usually not formatted at all, and needs to be copied and pasted into your documents by hand. If you get content in an email, choose Normal paragraphs when you paste into a FrontPage document.
  • Microsoft Word: Clients often send content in Word DOC files which can easily be brought into FrontPage. Like RTF files, you can copy and paste them into your documents, and FrontPage will translate them accordingly, keeping all the formatting and even tables!
  • HTML: HTML pages can be imported directly into FrontPage using these steps:
    • In Page view, with the Folder List open, close all open pages.
    • From the File menu, choose Import. At the Import dialog box, choose From Web.
    • In the Import Web Wizard, type (or copy/paste) the URL of the HTML page. Click Next, Next, then Finish.
    • Before this operation is completed, you will be prompted three times. Respond to the prompts and you're all set.
 
 

Designing with Tables

In this step, you will start with the raw text on the about.htm page and make it look like the example about page.

1. Setting up your Table Properties

Before you begin building a table, it is a good idea to draw a quick sketch of how the table should look and how many columns and rows it needs. Do not worry if you change you mind, you can always add or delete columns and rows.

a. In FrontPage, close all Web pages. If the vertical gray Views bar is open, close it by right clicking on it and choosing Hide Views Bar. The only thing that should be open is the Folder List.

b. Double click the about.htm file to open it in the Page view.

c. Click at the top of the page to set the location, then hit the Enter key three times. This will push the text down and out of the way.

d. Again, at the top of the page, create a table with two columns and nine rows, by dragging the Insert Table button (see below).

   
   
   
   
   
   
   
   
   
e. Right click the table and open Table Properties. Make the following changes, then click OK.

Table Properties Changes

What They Do...

Alignment = Center

This makes the entire table center horizontally in the browser window.

Specific Width = 90%

Because the table is centered, reducing the width by 10%, puts 5% of white space on either side.

Cell Padding = 12

This keeps the text from touching the cell edges.

Cell Spacing = 0

With no spacing between cells, they will butt up against each other.

Border Size = 0

This removes the borders so that uncolored cells seem to disappear.


f. Remove the paragraph marks above the table.

2. Placing Content in Cells

Before you adjust the individual cells, put in some content so you can see what it does to the table.

a. In the top right cell, insert the rac_logo.gif by clicking the Insert Picture From File button and opening the images folder where it resides.

b. In the cell below the logo, type | IDEAS | MEMBERS | LEARNING | RESOURCES | SCRAPBOOK | HOME |, and create hyperlinks to each of the appropriate pages. Wait, stop, don't type it! Do the smart thing (ie. the most economical thing) and copy the text from the line above.

The vertical line dividing the sections in the navigation bar is called a pipe -- try a Shift Backslash to type a pipe.

c. Right click the cell with the hyperlinks and select Cell Properties. Choose Horizontal alignment = Center and put a checkmark by No Wrap

d. Select all the text in the hyperlink cell and right click Copy. Go down to the second from the last cell in the right column and right click Paste. (To keep track of what content goes in which cell, look at the finished page at the end of this exercise page. Better yet, print it out.)

e. In the first column, second cell (the cell to the left of the hyperlinks cell), type "ABOUT THE ROBOTICS ART CLUB." Put the text on three lines with Breaks (Shift Enter) between each line. Also, change the font to 10pt, Arial, and click the Bold button.

f. Place your cursor at the top of the left column and click when it turns to a solid down arrow.   Right click in any of the selected cells and choose Cell Properties. Choose "Right" in Horizontal alignment and "Top" in Vertical alignment. This will make the text align to the right and top of all the cells of this column.

You have just learned another valuable lesson. At the top of a column, a solid cursor selects the column. With the solid cursor to the left of a row, you can select the row in a similar manner.

3. Adding Color to Cells, Text, and Hyperlinks

So far the page looks OK, but it still needs a little juice. A little color may help.

a. Alt-click the cell containing ABOUT THE ROBOTICS ART CLUB to select it. Now hold down the Shift key while you click in each cell below -- all except for the last cell. Before you let go of the Shift key, click the two cells holding the hyperlinks.

You have just learned two more valuable things. Selecting a cell with the Alt key and selecting additional cells with the Shift key. Remember these labor-saving tricks -- they will come in handy.

b. Right click any of the selected cells and choose Cell Properties. Change the Background Color to RGB(A0, B0, D0).The background color may already be listed under Document Colors. If not, you will have to create it using the More Colors option.

c. Select the ABOUT THE ROBOTICS ART CLUB text and color it navy blue.

d. Hyperlinks Colors cannot be changed with the above method. Since their colors have to be uniform throughout the page, use the procedure that follows. Right click anywhere on the page and select Page Properties. Choose the Background tab. Now change the Hyperlink Color to navy blue. Leave the Visited hyperlink and the Active hyperlink colors as default.

e. Using what you have just learned, select the five cells between the two hyperlinks cells (not the hyperlinks cells themselves) and change their background color to RGB(FF, FF, CC). This color can be found on the More Colors color wheel. It is the lightest yellow.

Black text on pale yellow is considered the easiest-to-read color combination on a computer screen.

4. Formatting the Text

Return to the text content you pasted in earlier.

a. Select all the text below the table. Change the Font to Arial and the Font Size to 10pt.

b. Now Copy/Paste the section headings in the appropriate pale blue cells and the section of text in the appropriate pale yellow cells. If this is not clear to you, look at the example about page for reference.

c. Select the entire left column and make the text Bold and the color White.

d. Select just the ABOUT THE ROBOTICS ART CLUB text and make it navy blue. Leave the cell below it blank.

5. Cleaning up Loose Ends

Have you noticed anything missing? It's the copyright. Plagiarism is of course a major issue on the Web, so it's important you place a copyright on your work.

a. In the bottom right cell type Copyright © 2005 Robotics Art Club. Make it 8pt Arial and align it right.

To access the copyright symbol, choose Insert>Symbol. This is where all those non-ASCII characters and symbols are located.

b. Select the cell containing ABOUT THE ROBOTICS ART CLUB and the one just below it. Remember, Alt click one and Shift click the other. Right click in either cell and choose Merge Cell. That takes care of the thick navigation bar.

c. To adjust the relative widths of the two columns, select the left column and remove the checkmark from the Specific Width and put a checkmark by the No Wrap. This will make the column only as wide as the longest word grouping. If any of the headings are making the column too wide, put breaks between certain words. (See the finished page above).

d. Select the right column and increase the Specific Width to 80%. You could go as high as 100% because the No Wrap in the left column is going to fix the right column width.

e. Before you are through, right click the Table Properties and check that there is no Specific Height here as well. You do not want to select this option in most cases. When you are finished with a page using tables, check to see if the Specific Heights in your Table Properties and your Cell Properties have changed. Because of the FrontPage option of dragging table borders around, you can easily get settings that you do not want.

Whenever you are in a Cell Properties dialog box, make sure there is no checkmark in the Specific Height. If there is, remove it. When you see unintentional spacing after text, this is a good indication that you have Specific Heights selected somewhere.

f. Save your work. Your ABOUT page should look like this:

g. Now all your content is in place, you've got all the tools you need to create and link up the rest of your RAC Web.

So now go into each of your remaining pages and get them formatted to look like the sample pages linked at the top of this exercise. Try to use as many of the time-saving tips you've learned to make the job go quickly. Do it right, and you'll have all the skills to build your own sites. Which leads us to the optional exercise. . .

Build Your Own Site (Optional)

In building the RAC site, you've created a medium-size site with standard parameters and graphics (about section, resources, photo page, and so on). Congratulations! You're now fully equipped to build a straightforward site using what you know about FrontPage's layout tools. If you've got this far, you've completed the requirements for Lesson One.

As a creative optional exercise, we'd like you to follow the same step-by-step process as above in constructing your own site. The site can be personal or fictional, professional-looking or imaginative. It may even be a freelance project you've got cooking -- so long as it exhibits the same basic structure as the RAC site.

You might even use the basic theme of each RAC page as a "template," varying the content, images, colors and layout. Again, it's not essential to do this part of the exercise, but we wanted to give you the opportunity for personal expression!

 

   

How to Post:

Once you're done, go to the Dropbox for this lesson and enter your site URL, remembering to begin the URL with http:// and checking it before sending the post.

If you have a question before sending your completed exercise for grading, use the Send Mail area to contact your instructor.

I look forward to seeing your work!