|
PCC Website Course
Mr. Moegelin
Review FrontPage Toolbar Menu and First Web Page
Lesson 3
"Designing web page
layouts
has a lot to do with tables within tables within tables."
(Unless you're using CSS)
1.
If you haven't already,
create a Web Page Folder labeled My Webs PCC on your USB drive.
Follow directions in
Lesson 2
2. Open Microsoft FrontPage 2000 from the icon on your desktop
or from the list of All Programs and make sure that you have the
tool icons numbered 1, 2, 3, 4
in the picture below on your FrontPage toolbar. If not,
go to Tools on the FrontPage toolbar,
then to "Customize", then to
"Commands", "Table." Scroll
down and drag and drop the tool icons for 3 an
4 onto your
FrontPage tools menu.
Now go
to "Tools", "Customize", "Format" to get the tool icons for number 2
below. Most likely you already
have the "Undo"
and "Redo" icons, number 1, on
your Tool Bar. If not, add them from the Tools
menu as above.
3. Now click on the white
"New Page" icon as shown above to
create a New Page. Immediately save the new page
as david_j1.htm (use all lower case letters) in your
folder labeled My Webs PCC.
4. Create a table on the
davis_j1 page that has 4 rows, 3 columns, alignment center, cell
border 0, cell padding 0, and cell
spacing 0, with a width of 900
pixels like the one shown
directly below.
5. Drag
the borders so that it looks like the table below and is
approximately the same size. In order to
color the table, right
click anywhere in the table and select Table Properties.
Use the drop down menu
for Background and select "More Colors."
The More Colors Menu
will look like the picture below. Select the color shown.
The whole table will look like the the
"Red # Red153, Green 0, Blue 0 shown below.
6. Place the
cursor in the big center cell of your table. Right click and choose
Cell Properties. Select white for the
background
color. Check with me when you reach this point.
7. Now lets add some
borders to the center white cell. Right click in the center
cell and select Cell Properties. Select Style on
the bottom of the dialogue box , Format, Borders, ridge,
Color white, and adjust
the width and cell padding as shown in the
diagram below.
Your web page should
now look like the the one below without the black bordered table in
it and without the tiger pictures.
| |
Table #1
My Web Page |
|
|
|
|
You can change the
background colors of any of the the cells by "right clicking"
inside the cell and selecting cell properties. |
Table #2
This is a 3 x 3 table |
 |
|
Table #3 |
|
You can change the background colors of any
of the the cells by "right clicking" inside the
cell and selecting cell properties. |
|
 |
|
|
Table #3 |
|
| |
You can change the background colors of any
of the the cells by "right clicking" inside the
cell and selecting cell properties. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Make the
footer red #203 |
|
|