Are you sweating
yet? I know I am because we're 1 lesson away from the
whole reason this tutorial was written -how to code
those darn expanding content boxes! Before we get there
though, we need to slice and code the section referred
to as Box 5 - Login
Bar on our Strategy
Guide. This simple bar contains
the control for new users to login or create a new account.
We'll need to create 3 images as usual for any box (Left,
right and background image) as well as 3 buttons, and
some way to separate those buttons as per the layout.
Let's get at it! Should be simple this time.
10.1 - Our main Strategy Guide
- This lesson covers Box 5:
A. Back to Photopaint
we go! We'll need to slice a left and right edge of
the content box, a background and the buttons. I'll
show you a couple of sneaky tips too to help you save
time and cut back on images. Start off by masking off
the right section of the member login bar.
10.2 - Masked area for the right side of the member
10.3 - Save the image in your image folder as memberbar_right.gif:
instead of wasting time slicing the left side, just
flip the memberbar_right.gif horizontally in Photopaint
by clicking on Image
> Flip Horizontally.
Save the flipped version as memberbar_left.gif.
10.4 - Flip the memberbar_right.gif horizontally and
save it as memberbar_left.gif:
we'll mask off the section of the bar that separates
two buttons from each other. Now here's the beauty of
this! We can use this same image as the 2 spacers we
we can use it as our background image! 3 images we needed
reduced to 1! I'll save this image as memberbar_bg.gif
10.5 - Masked area for the button spacer AND background
of the member login bar:
10.6 - Save the image in your image folder as memberbar_bg.gif:
let's go through the member bar and create our buttons!
10.7 - Masked area for the Lost Password button:
10.8 - Save the image in your image folder as memberbar_but_lpass.gif:
10.9 - Masked area for the Register button:
10.10 - Save the image in your image folder as memberbar_but_register.gif:
10.11 - Masked area for the Login button:
10.12 - Save the image in your image folder as memberbar_but_login.gif:
Groovy! We have
all the images we need to go ahead and code our member
bar. At least this went pretty smoothly this time!
B. Open up Dreamweaver
again and create another table under the Ad Banner table
we created in Lesson
9. This table will hold our member login
bar. We'll only need 2 columns in this one, along with
the usual single row.
10.13 - Create a new table under the Ad Banner table
with the following settings:
10.14 - A new table is created with 1 row and 2 columns:
inside the left cell of the table and insert the memberbar_left.gif
image. Once the image has been inserted, set cell's
width to same width as the image, which is 21 pixels
in this case.
10.15 - Insert memberbar_left.gif into the left cell:
10.16 - Set the left cell's width to 21 pixels:
Now we'll need
to set the right cell's text alignment to the right
so all our images and buttons stay to the right rather
than the default left alignment. Click on the right
cell and then click the Align Right text button.
10.17 - Click inside the right cell of the table:
10.18 - Click the Align Right text button:
from right to left, we can now insert each image as
required. Make a special note that each of image's alignment
will be set to absolute middle (I can already hear Jay
yelling at me about XHTML validation but we'll ignore
his futile screams seeing as this is my tutorial). You
set the alignment by clicking on the image and then
selecting the desired alignment from the dropdown in
the properties box. So let's proceed with the images
10.19 - Insert memberbar_right.gif:
10.20 - Setting the alignment of the memberbar_right.gif
image to Absolute Middle:
10.21 - Insert the memberbar_but_lpass.gif image and
set the alignment:
10.22 - Insert the memberbar_bg.gif image and set the
10.23 - Insert the memberbar_but_register.gif image
and set the alignment:
10.24 - Insert the memberbar_bg.gif image and set the
10.25 - Insert the memberbar_but_login.gif image and
set the alignment:
that all your images are in place and centered and looking
pretty, we need to add the background to finish off
our banner! Just click on the right cell and set the
background to the memberbar_bg.gif image
10.26 - Set the right cell's background to memberbar_bg.gif:
as a final touch, I like to set any buttons to link
to # just so that the button is active. That way when
I preview, I can see where the buttons are. You can
set the URL to # by clicking on the button's image and
setting the Link field on the Properties bar to #.
10.27 - Set the button URLs to # to make the button
it for this one folks! Check out the live sample below
and then we move on to the infamous expanding content
LIVE SAMPLE - You can see
a live sample of what our index.html page looks like
so far HERE!
Feel free to compare your work by viewing my example's
Previous Lesson ]
[ Next Lesson ]