|
Top Border Tutorial
To see the printer friendly
version of this tutorial, click
HERE
I'm not using many
screenshots for this tutorial because you should have the hang of it now ;)
For this you'll need a
web set that contains a vertical border. If you haven't got one, you can use
these four tiles to practice with.
Remember, if you use
these tiles, you must state on the page that they are © Shell and a link to
Shells Designs must also be put on the page.
   
Create a new page in
your group.
TABLE 1
Click on the Add Table
Icon
Set the Rows and
Columns to 1
Set the Padding to 20
and the Spacing to 0
Set the Border to 0
Copy and paste the URL
of your tile into the background box
Click Insert Table
Click in the middle of
the table and as far over to the right as you can then press the backspace key to remove the space that is automatically
added, then go to the html. Type in width=100% after where it says cell
padding=20
Un-tick the Html box
**********
TABLE 2
Click inside the table.
Click on the add table
icon again.
Set the Rows and
Columns to 1
Set the padding to 5
and
spacing to 0
Set the border to 0
Copy and the paste the
URL of your second tile into the background box and click Insert table.
Click in the middle of
the table and as far over to the right as you can then press the backspace key to remove the space that is automatically
added, then go to the html. Type in width=95% after where it says cell
padding=5
Un-tick the Html box
**********
TABLE 3
Click in the second
table.
Click on the add table
icon again.
Set the Rows and
Columns to 1
Set the padding to 10
and
spacing to 0
Set the border to 0
Copy and the paste the
URL of your third tile into the background box and click Insert table.
Click in the middle of
the table and as far over to the right as you can then press the backspace key to remove the space that is automatically
added, then go to the html. Type in width=100% after where it says cell
padding=10
Un-tick the Html box
**********
TABLE 4
Click in the third
table.
Click on the add table
icon again.
Set the Rows and
Columns to 1
Set the padding to 5
and
spacing to 0
Set the border to 0
Copy and the paste the
URL of your second tile into the background box and click Insert table.
Click in the middle of
the table and as far over to the right as you can then press the backspace key to remove the space that is automatically
added, then go to the html. Type in width=100% after where it says cell
padding=5
Un-tick the Html box
**********
TABLE 5
Click in the fourth
table.
Click on the add table
icon again.
Set the Rows and
Columns to 1
Set the padding to 0
and
spacing to 0
Set the border to 0
Copy and the paste the
URL of your top tile into the background box and click Insert table.
Click in the middle of
the table and as far over to the right as you can then press the backspace key to remove the space that is automatically
added, then go to the html. Type in width=100% after where it says cell
padding=0
Un-tick the Html box
**********
TABLE 6 - TOP BORDER
Click in the fifth
table.
Click on the add table
icon again.
Set the Rows and
Columns to 1
Set the padding to 0
and
spacing to 0
Set the border to 0
Copy and the paste the
URL of your top border tile into the background box and click Insert table.
Click in the middle of
the table and as far over to the right as you can then press the backspace key to remove the space that is automatically
added, then go to the html. Type in width=100% after where it says cell
padding=0
Now we have to add the
height of your top tile to the HTML.
If you're using my
tiles the height is 133
Remember, we don't put
the % after the height number.
Under the 6th table you
will see <TD>
Put your cursor right
after the D and press the space bar then type height=133 (or whatever height
your top border tile is)
Un-tick the Html box
Add your content to the
page under the top border and you're done :o)
NOTE: If your second
table is left aligned, just put your cursor at the bottom of the table (in page
edit) and keeping the button pressed drag it over to the top of the table then
click on the centre align icon.
Click
here to see my example
|