Download source
files here. Now that we have set up and exported
our navbar, lets get started in Dreamweaver. Define your new
site if you have not done so already.
1. With your site all set up in Dreamweaver
add a new web page. Name it whatever you like.
2. Set the page margins to zero with
CSS and HTML. Here is the code for CSS: Place it right after
your last meta tag.
Then go to the main menu and select
Modify> Page Properties. Set the margins to "0".
While your here set the background color to #DDDDDD and click
OK.
The reason for both HTML and CSS margins
is to be compatible for both IE and Netscape.
3. Insert a new table in our page. Use
the following settings.
4. Lets add our background tile. Select
our table we just created. Go to the Properties inspector.
See the line called "Bg Image" on the image below?
Click on the little yellow folder on the other side if it
to browse to our background tile image. This will place our
tile image under the table rather then in it.
Remember when I had you create the tile
image as a jpeg but we had our navbar as a gif? Well, I discovered
this by accident... This is
my little secret to getting bg images to work in a table cell
in Netscape. I don't know if it is a bug or made by design
(probably bug). This technique has always worked for me. It
will (of course) work in IE. I still don't fully understand
it, so If some knows why this is please tell me. (Also, if
I am completely wrong on this I am all ears).
I think this is why some people ask,
"How do I get Netscape to show a bg image in my table
cell?" Or they say, "I have done this before and
it worked but it don't work anymore. What Happened?"
The answer is use a jpeg.
5. Now we insert our navbar. Click the
mouse inside the table so that the cursor is inside of it
blinking. Then, from the main menu select Insert> Interactive
Images> Fireworks HTML. Browse to the HTML file we exported
from Fireworks and then click OK.
Hit F12 on your keyboard to view the
page. Go ahead and resize the browser. You now have an expandable
navbar.
Final page should look like this. Simple
Slice Navbar
End of tutorial.
Return to the
main tutorials page.
|
