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.
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!