Formatting Pages in FrontPage
|
 |
FrontPage Instructional Videos
Video tutorials to help you get the most out of Microsoft®
FrontPage® software. |
| |
|
 |
Are you still
using Internet Explorer?
Find Out Why
Everyone Is Talking About
Firefox's
Web Browser!!!
Find out why the FREE
Firefox Browser is the
first real threat to IE since Netscape!!! Click on the link
below to get your FREE Firefox
Browser.
|
Download Firefox now to receive: |
|
• |
Tabbed Browsing
Save time by viewing more than one page in a window |
|
• |
Pop-up Blocking
Block annoying pop-up ads |
|
• |
Better Security
Help keep computers safe from malicious spyware |
|
• |
Google Toolbar
Enhanced search box suggests queries as you type |
|
How to make a drop shadow with tables without using large images in
FrontPage
Don't let the size of this article intimidate you...It takes less
than 30 seconds to do this once you understand how it's done!!!
In this tutorial I'd like show you how to add a very simple but
compelling effect with 2 different methods. First, how to make a drop
shadow using tables using just 1 small 1x1 pixel image. Then how to make
a drop shadow using layers with no images. First your going to need a
small 1x1 white .gif image.
You can download it here. Note:
I'm using a white image because that's the background color of this
page. If your page background is black for instance you would use a 1x1
black image. Open a brand new page in FrontPage. Then click table -
insert - table - 2 rows 2 columns. No padding/spacing or borders. Your
table should look like this:
 Note: if
your not familiar with format marks "
 " ,
they are a great way to show you where paragraphs and page breaks end in
design view. You can turn Format Marks on by clicking on View - Toolbars
- Customize - Commands Tab - View - Then drag the "Show All" button to
your toolbar and dock it.
Ok, back to our drop shadow tutorial...I get distracted sometimes with
the overwhelming powerful features the FrontPage 2003 has to
offer...particularly with the wysiwyg (What You See
Is What You Get) mode. Next we are going
to merge the bottom 2 cells to make just 1. This is done by
highlighting the bottom cells, then right click the highlighted area and
select "Merge Cells". You can highlight the cells different ways. One
way is to left click and drag. The other is to hover just on the edge
one the left side until you get a small black arrow the left click:
 So now
your table should look like this:
 Next we are
going to add the drop shadow color...in this case a medium grey
(99,99,99). Right click the bottom cell and choose cell properties -
background color - drop down box - more colors:
 Do the
same thing for the top right cell. Your table should now look like this:
Now I'm going to set the size of my to a fixed size 400 wide.
To fix the size of a table to an absolute size just right click inside
the table and choose table properties - Specify Width - 400 - In Pixels.
Unzip the 1x1white.gif image then put your cursor in the bottom row and
insert the image. The cell will appear to disappear...but it is still
there, it is just rapping the the 1x1 pixel white image...so you can
only see a thin grey line.
Insert the 1x1white image into the top right cell as well. Your table
now looks like this:
Save your page along with the image to the same directory..
Now here is where the "magic" comes in. Switch to code view or html
view in earlier versions of FrontPage.
Your code should look like this:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title></title>
</head>
<body>
<table border="0" cellpadding="0" width="400" bordercolor="#000000"
cellspacing="0">
<tr>
<td> </td>
<td bgcolor="#999999">
<img border="0" src="1x1white.gif" width="1" height="1"></td>
</tr>
<tr>
<td colspan="2" bgcolor="#999999">
<img border="0" src="1x1white.gif" width="1" height="1"></td>
</tr>
</table>
</body>
</html> Next we are going to change the size of how we want the image
displayed.
(Note: whenever using an image of just 1 color is is good practice to
use a small original image size, then display it in larger with the
image border tag. The benefit to this is your visitors are only
downloading a small 1x1 image...You save on bandwidth and they get faster
downloads.) First change the the first img border="0" src="1x1white.gif"
width="5" height="10"
Next change the second img border="0" src="1x1white.gif" width="10"
height="5" Now switch back to design view an place you cursor in the
top right cell. Right Click the cell and choose Cell Properties. Set the
vertical alignment to top. Then set the cell width to 5 in pixels (this
should match the size of your image).
Now put your cursor in the top left cell and a set it's with to 395 in
pixels you can align this cell to top if you wish.
The next step is only necessary if you want a border. With your
cursor still in the the top left cell insert another 1 row 1 column
table into that cell and set the border to 1 black collapsed. If you
want the a background color add one now...I choose a dark red color.
I was going to do a
tutorial on how make drop shadows with layers...but
this 30 second process took well over and hour to right down...so I'm
just out of time for today. Here are some samples with layers, just copy
the source
code and paste it into FrontPage code view to play around with drop
shadows with layers.
Simple Drop Shadow
Complex Drop Shadow
Rounded Corners
Rounded Corners With NO
Images!!!
Layers and CSS are powerful tools...If you want to learn more hop on
over to this website for more advanced stuff. |
