By Richard Rost 1/2/2007
This is the full text listing of one of our handbooks. There is a lot more to this handbook. The full-color screen shots have been removed for this page. This text is simply provided so that the search engines will index the course contents. This is so any customer searching for a topic can find what class it's covered in. If you are interested in more about information about our courses, click here for our complete course listing. For details on how to purchase a handbook, visit our handbooks page.
Microsoft FrontPage 103
Course Handbook Supplement
By Richard Rost
PO Box 1308, Amherst NY 14226 USA
First Printing 7/27/2004
Copyright 2004 by Amicron Computing
All Rights Reserved
Welcome to the 599CD Microsoft FrontPage 103 Handbook. This course follows FrontPage 102.
This handbook is designed to be a supplement to the full 599CD video course for FrontPage 103. We recommend you use this handbook to follow along with the class videos. This handbook is not meant as a stand-alone study guide.
We do recommend that you watch the course videos one time through, paying attention to the lessons covered. Follow along with the course videos using this guide. Take notes on the pages where needed. Then, watch the videos a second time, practicing the examples yourself on your computer.
Table of Contents
Table of Contents 2
Lesson 1. Table Basics 4
Lesson 2. Table Properties 17
Lesson 3. More Table Properties 24
Lesson 4. Table Tricks 31
Lesson 5. Page Layout with Tables 45
Lesson 6. Review 55
Welcome to Microsoft FrontPage 103, brought to you by MyOnlineLearningPartner.com and 599CD.com. I am your instructor, Richard Rost.
Objectives for today’s class:
In this class we will be using Microsoft FrontPage XP and Windows XP, however this course is valid for any version of Windows, you should have no problems following this course if you are using FrontPage 2000 or 2003. FrontPage 98 users should upgrade to at least XP.
Lesson 1. Table Basics
In this lesson we are going to begin by looking at some table basics. What is a table? A table is an object used for presenting data in columns and rows. It can also be used for page layout.
Columns run vertically in a table.
Rows run horizontally.
The place where a column and row intersect is called a cell.
Open the Web from our last class.
Let’s begin by creating a basic price list. Open up your products.htm file from the last class.
Insert some blank lines in front of the little picture of the computer. Just click in front of it and hit ENTER a few times. Now click on the Insert Table button from the toolbar.
Drag your mouse 3 columns across by 3 columns down and click.
Notice, FrontPage inserts a table for us.
Let’s make the first row a header row with descriptions for what data is to come below. Type in the following, using the TAB key to move between cells.
Now type in some product details. Notice if you type more information into a cell, the text will wrap around.
If you’re at the bottom-right-most cell and hit TAB, a new row will be added for you.
You can highlight text, and even entire cells, as normal – just by clicking and dragging over it. Use your normal text toolbar to manipulate fonts and such. I’ll set all of the text in my table to Arial, 10pt.
You can highlight an entire row by clicking in the left margin. The same thing works for columns (click above the column). You can now bold the text, change the text color, and manipulate the text as we’ve learned in previous classes.
You can use the highlighter pen to change the background color of the cells. That’s one way to do it. I’ll show you another way later.
You can adjust the horizontal alignment of the text in a column by highlighting the column and clicking on the align buttons on the toolbar.
Notice how the table is set to be 100% of the width of the page. If I resize the page, notice how the table is resized to fit the page.
You can resize the columns by clicking on the border between two columns and dragging it.
To insert a column or row, just click where you want the row/column inserted, right-click, and select Insert Rows (or columns).
A blank row will be inserted before the row you’re currently on.
To delete that row, highlight it, right-click on it, and select Delete Cells.
Next, turn on the Tables toolbar by clicking on View > Toolbars > Tables.
The Tables toolbar appears.
Dock this toolbar at the bottom of the window by dragging it’s title bar to the bottom of the window.
Notice the buttons on the tables toolbar to Insert Rows, Insert Columns, and Delete Cells.
Notice how the product name and price are aligned vertically in the middle of the cell. You can select them and click on the Align Top button to move them to the top of the cell.
Do the same thing for the entire table. Now, let’s look at Table AutoFormat. Click on Tables > Table AutoFormat.
Select a format that you like. I’ll pick Classic 4 and then click OK.
Notice the format we selected has been applied.
Save your work and preview it in your browser.
Lesson 2. Table Properties
Begin by opening your contact page contact.htm. Delete the existing “email the president” message. Insert a table for email addresses of company contacts. Click on Table > Insert > Table.
The Insert Table window appears. Set the Rows to 4 and Columns to 4. Click OK.
Your table is inserted.
Let’s edit the table’s properties. Right-click on the table and select Table Properties.
Specify Width indicates the horizontal size of the table. You can specify a number of pixels (a fixed number of dots across the screen) or the percentage of the entire window size. Set the width to 50 percent of the window size. Click Apply. Notice the table (which you can see behind the Table Properties window – just move it over) is resized.
Click OK. Notice if you resize your window, the table resizes itself to always stay at 50 percent of the window width.
Go back to Table Properties. Pixels are simply dots across the screen. Most people have 800, 1024, or 1280 pixels across their screen horizontally, but it depends on whatever video resolution people have set up in Windows. People with larger monitors usually select a larger video resolution. This is why percentages are nice to resize tables with, however if you want to fix the table at a specific size, you can use pixels. Set your table size now to 400 pixels and click OK.
If I resize the window now, the table stays the same. It does not shrink or grow.
Put some data in the table. Notice how the cells inside the table will resize themselves to fit the data inside. We’ll see how this works in a minute.
Right-click on one of the cells and go to Cell Properties.
Notice the width of each cell is set to 25 percent of the width of the entire table. Click OK. You can resize your cells as you wish, using the technique we learned earlier (drag the border lines). Notice once you do, the width of each cell is now set to a fixed pixel width.
Take a moment now to highlight your entire table, set the font to Arial, 10 pt, bold. Make the header row background light yellow.
Notice you can also resize the table itself by dragging it’s right edge.
The Autofit to Contents button will make all of the columns exactly wide enough to fit the data inside them.
Lesson 3. More Table Properties
Go to Table Properties. Increase the Cell Padding to 3. Move the properties window over, and click Apply to see your changes on the table. Notice the extra padding (space) between the cell border and the text inside the cell.
Set Cell Padding back to 0. Now, set Cell Spacing up to 3. Hit Apply. Notice the changes.
Put Cell Spacing back to 0. Set the Border up to 3. Hit Apply. Notice the changes.
Check the “Show both cells and table borders” box. Now hit Apply.
Now, set the border to 3, the cell padding to 3, and the cell spacing to 3. Notice the larger borders, more space between the border and the text, and more spacing between the border lines themselves.
Set the border color to dark blue. Hit apply.
Set the border color back to automatic. Set the light border to light blue, and the dark border to dark blue. Hit apply. Notice the effects.
Set the light and dark borders back to automatic. Put the border color at light gray. Set the cell padding to 2 and the spacing to 0. You can set the table’s background color. Set it to light green.
Let’s delete the phone number column (to save space for this lesson). Highlight it and select Delete Cells.
Go to Table Properties. Set the Alignment to Center.
Notice how the table is now centered in the window.
Go back to table properties. Set the alignment back to default, which means the browser sets the alignment (most browsers will use left align). Notice how you can’t type anything to the right of the table in the empty white space. Normally text will not wrap around a table.
Go to table properties. Set the Float property to Left.
Notice how you can now type in text to the right side of the table (the table floats on the left side of the text).
Now, highlight all of your cells and click on the Distribute Columns Evenly button. Notice how the size of all three columns is set exactly the same. You don’t need to highlight all of the columns, you can select just two or more cells to distribute the space between them evenly.
Go back to table properties. Turn off the “show both cell and table borders” check box. I like the way this looks better.
Lesson 4. Table Tricks
Create a brand new page. Copy your specials page, and paste it. Rename it as schedule.htm. Open it up to edit it. Change the header as shown. Delete all of the text and graphics on the page.
Keyboard Shortcut Trick: place your cursor just before the first text on the page (after the links bar and horizontal line) and then press SHIFT-CTRL-END to select everything on the page from that spot down to the end. Hit DELETE on your keyboard to delete everything.
Insert a 4x3 table using the toolbar.
Set up your header row with class, date, and time. Set the font and background color.
Put some data in the table as shown.
We’re going to merge together the three cells that have the same data in them (Computer Basics). Select them, and then click on Merge Cells.
Notice that all three cells have been merged into one.
The data from the three cells is concatenated (added together) but that’s OK. Just delete the duplicate text.
Do the same thing for Microsoft Word 1.
You can set the background color to set the classes apart.
Set the table to Arial, 10pt. Resize the date and time columns, and then select them both. Click on Distribute Columns Evenly and notice how it makes them both the same size. Then, right-align the text in those columns.
Click in the “Computer Basics” cell and the click on the Split Cells button.
The Split Cells dialog appears. Select “Split into columns” and set it for 2 columns. Click OK.
Notice how that one cell is split into two cells, vertically. You can add text to that new cell now.
There’s an easier way to make some of these changes using freehand table drawing techniques with the pencil and the eraser. Undo the last couple of steps to get rid of the new cell we created. Click on the “Draw Table” pencil.
Now, drag a line (draw with the pencil) where you want the new cell border to be.
Notice the new cell.
You can also create more cells inside of those. Click and drag at your leisure to experiment with more drawing techniques.
You can use the Eraser tool to remove cell borders. Click on the Eraser tool.
Click and drag over the lines to erase them. When finished, turn the eraser or pencil tool back off by clicking on it again.
Delete the text “Computer Basics” and insert a 2x2 table inside of that cell.
Notice how you now have a “nested” table.
Undo that. Now insert a 2x1 table in the same place.
Right click on the table and open it’s table properties. Set the border size to 0 and give it a light gray background color.
Undo that. You can also turn the borders off using the Borders button on the toolbar. Use that button now to turn the borders off.
You can use Split table to break a table into two. Click just before “Microsoft Word 1” and click on Table > Split Table.
Now, notice how there is a blank line between your rows – creating two tables.
Now, close the schedule page, and add some descriptive text with a hyperlink from the Products & Services page to your Schedule page.
While we’re here, let’s edit the product table. Delete the text from the following cells as shown (highlight text, press delete):
Delete the Price column.
Insert a 3x2 nested table inside the first description cell.
Enter in the text as shown. Adjust the font to Arial, 10pt. Set the borders to 0 (off). You can now see what is possible with nested tables:
Using the pencil tool, draw a line in the header row where the “Price” header should go.
Type in the header…
Note that you can copy and paste entire rows easily. Highlight the first data row and copy it with CTRL-C.
Now, click before the “New” on the next line down, and paste with CTRL-V.
Now you’ve got the entire row pasted, and you can more easily edit this one than to re-create all of those steps by making the nested table. I’m a big fan of saving time like this. Change some prices and delete the other row, and you’re as good as gold.
Lesson 5. Page Layout with Tables
You should sit down and determine what you want your ideal page to look like. I want my logo or banner at the top of the page, followed by a links bar. Then I want three columns – two narrow vertical banners with the “page contents” in the middle. A footer bar should be at the bottom of the page. Make a rough sketch to this effect.
Notice how you can visualize the page as broken into tables with rows and columns…
Start with a blank, new page. Begin by inserting a 4x1 (4 rows, 1 column) table.
Right-click and go to table properties. Set the alignment to center, turn the borders off – set them to zero width, and the width to 350 pixels. Normally, for a real web page, you would want a width of at least 600 pixels, but for class, since I have a small window to work with on the video display, I’ll set it smaller.
Notice your table.
Save this page as new-index.htm. Let’s include our links bar that we already have into this page. Click on Insert > Web Component. Remember this from FP102? Include the links.htm page here.
It’s a little wide for this page. That’s OK. Save this page. Open up the links.htm page. Change “Products & Services” to just “Products.” Notice the change in the new-index page.
Let’s create a brand new page for the header. Click on Insert > Picture > WordArt.
The WordArt application loads. Select one of the styles you like.
Type in your header text. Change the font if you want and click OK.
The WordArt is now inserted into your document. You’ll also notice the WordArt toolbar has appeared. We cover WordArt in detail in our Microsoft Word classes.
You can resize your WordArt image just like any other graphics using the corners. Save your work. Call this page new-header.htm. Now, reopen the new-index.htm file and include this page into this one.
Create a blank new page again for our footer. For now our footer page can just be a basic copyright notice. Save it as new-footer.htm.
Now, include that footer page into our main page.
Now, in the blank row where our page content is going to be, let’s insert a 1x2 table (1 row, 2 columns).
Resize the cells as shown, and turn the borders off. Type in your Welcome message (or copy and paste it from our existing home page).
You can resize and edit the text accordingly.
Now, we have room over in the right column for advertisements, buttons, announcements, or anything else you’d like to have there. For now, let’s just put a picture there. Let’s copy the picture from our home page as well. Paste it into this cell.
Remember in FP101 how we clicked on the “Position Absolutely” button to place the photo wherever we wanted it on the page. Now we no longer need that feature, because the table will handle the layout (in fact, I actually prefer NOT using position absolutely for reasons which I’ll discuss in a future class). Turn that feature off now. Right-align that picture in the cell.
Save your work. Preview it in your browser.
Let’s add some color. Highlight the row (cell) with the links bar in it. Right-click and select Cell Properties.
Let’s pick a background color for this cell – how about a light blue.
The table is a little squished. Right-click on the outside table (somewhere, for example, in the header row) and go to Table Properties. Set the cell padding to 3 or 4.
Preview in your browser again…
Lesson 6. Review
Review of topics covered in today’s class.
Tell us what you think. Log on to www.599cd.com/Survey and take a short survey about this course.
Take your skills check quiz at www.599cd.com/Test. If you pass, you can print out a Certificate of Completion.
What’s next? Visit www.599cd.com/FrontPage for our complete list of Microsoft FrontPage courses.
Need Help? Visit www.599cd.com/TechHelp for Microsoft FrontPage assistance.
Make sure you’re on our Mailing List. Go to www.599cd.com/MailingList for details.
Contact Us. If you have any questions, go to www.599cd.com/Contact for information on how you can contact us by phone, email, or live online chat.
This course, handbook, videos, and other materials are copyright 2002, 2003, 2004 by Amicron Computing. All rights reserved. No portion of this course, handbook, videos, or other course materials may be reproduced, copied, edited, or otherwise distributed without the express written permission of Amicron Computing. Amicron Computing shall not be held liable for any errors or omissions in this document.
This document may not be used as part of a training course without express, written permission from Amicron Computing and the purchase of an Instructional License. For details, contact:
PO Box 1308
Amherst NY 14226 USA
You may want to read these articles from the 599CD News: