| |
 |
|
| |
| A
"Nested Table" is a table inside another
table. The reason you need to make nested tables
in to create spacing for where your images go and
where your body copy goes. Also "Nested Tables"
work well for creating graphical elements on a web
page that download faster then a graphic of its
same nature. Here is a Quick tutorial on how to
create a "Nested Table" that has a border
of one color and a body color of another. |
| |
|
1) |
Create a table that
is 1 row, 1 column, Width 300, Border 0, Cell Padding
2 (the cell padding is important), Cell Spacing
0 |
2) |
Change the color of
the background. (Click in the table and go to the
"Properties" dialog box and change the
Bg to the color you would like it.) |
| 3) |
Click inside the table
and select the "Insert Table" button  |
4) |
Create this table
with the following properties. 1 Row, 1 Column,
Width 100%, Border 0, Cell spacing 0 and most important
Cell Padding back to 0. |
5) |
Select the cell you
just created and change it's background color. (Click
the cell and go to the "Properties" dialog
box and change the Bg to the color you would like. |
| |
| To
increase the size of the border you will need to
select the first table and change the cell padding.
This is how you do that. |
| |
|
|
1) |
Click inside your
"Nested Table." |
|
2) |
Go to "Modify",
"Table", "Select Table" |
|
3)
|
Once the table is
selected hit your right arrow key on your key board.
(This will place you inside the first table you
have created. |
|
4) |
Go to "Modify",
"Table", "Select Table" |
|
5) |
Now go to your "Properties"
dialog box and change the cell padding to the size
you would like. |
|
|
|
 |
#ONE
Create a home page using PhotoShop, Illustrator,
FreeHand, or Fireworks.
Due 02+10+03
#TWO
Adding Rollovers and Buttons
Due 02+26+03
#THREE
(midterm)
Create pages that correlate with your buttons and
upload them using FTP.
Due 03+17+03
#FOUR
We had to skip this one.
Due 04+02+03
#FIVE
Create a flash into for your web site with a skip
button and add it to your site.
Download PDF here
Due 04+21+03
#SIX
(final)
Create a final web site to display your art and
things that interest you. 5 Pages minimum and a
Flash intro.
Due 05+12+03 |
|
|
 |
|
|
Creating
a "Shim"
| 1) |
Open PhotoShop. |
| 2) |
"File" New. |
| 3)
|
Create that new file
at 1 pixel by 1 pixel, resolution 72, RGB, and a
transparent Background color. |
| 4) |
Save that file as
a .GIF in your images directory. |
Creating
the Table
| 1) |
Select
"Insert Table" Button |
2) |
Create a table that
is 3 Rows, 3 Columns, Width 300 PIXELS, Border 0,
Cell Padding 0, Cell Spacing 0. |
3) |
Click OK Your table
should look like this. |
| |
|
4) |
Merge the top 3 cells.
(Click on the top right cell and drag to the top
left cell. Then go to Modify, Table, Merge Cells.)
Your table should now look like this. |
|
|
5) |
Merge your bottom
3 cells. Your table should look like this. |
|
|
6) |
Change the color of
the background on the top cell. (select the cell
you are going to change. Go to the "Properties"
dialog box and change the Bg to the color you would
like.) Your table should look like this. |
|
|
7)
|
Change the bottom,
right and left cell to that same color. Your table
should look like this. |
|
|
| 8) |
Click in the top cell
and click the "Insert Image" button.  |
9) |
Insert the "Shim.gif"
we created. |
10) |
Place your cursor
in the top cell and go to the "Properties"
dialog box and change the H to 1. |
| 11) |
Click in the bottom
cell and click the "Insert Image" button.
|
12) |
Insert the "Shim.gif"
we created. |
13) |
Place your cursor
in the bottom cell and go to the "Properties"
dialog box and change the H to 1. |
| 14) |
Click in the left
cell and click the "Insert Image" button.
|
15) |
Insert the "Shim.gif"
we created. |
16) |
Place your cursor
in the left cell and go to the "Properties"
dialog box and change the W to 1. |
| 17) |
Click in the right
cell and click the "Insert Image" button.
|
18) |
Insert the "Shim.gif"
we created. |
19) |
Place your cursor
in the right cell and go to the "Properties"
dialog box and change the W to 1. |
20)
|
Click out side your
table and it should look like this. |
|
|
21) |
Now select the center
cell and change it's color in the "Properties"
dialog box. |
What we have just done is
create a table border and changed the inside of the table.
This table that we have just created can have a different
sized border. The way we control the size of the border
is through the size of the "Shim" we use. If
you would like a 10 pixel border on your table then you
will need to change the size of the shim when you are
inserting it.
Once you insert the "Shim" you go to the "Properties"
dialog box and change it's proportions to 10 pixels by
10 pixels. This will in turn change the border of your
table.
Things to remember. When insert a "Shim" it
is invisible so you can stretch it to any size you want.
This is okay for this image only because it is invisible
and there will be no distortion of it.
Also if you are inserting a "Shim" to your table
and your table is a set size, like in this exercise it
was 300 pixels wide, Then you have to subtract the size
of the shim from the table.
For example. If you have a table that is 300 pixels wide
and you insert a shim on the left side that is 10 pixels
wide and a shim on the right side that is 10 pixels wide
then the inside area of the table is now 300 -10 -10 =
280. This is important if you are creating an image to
go inside this table. You would then want to create an
image that is 280 pixels wide so it can touch both sides
of your table. |
|
|
|
|
|
