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.

Fig 10.1 - Our main Strategy Guide - This lesson covers Box 5:

STEP 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.

Fig 10.2 - Masked area for the right side of the member login bar:

Fig 10.3 - Save the image in your image folder as memberbar_right.gif:

Now instead of wasting time slicing the left side, just flip the memberbar_right.gif horizontally in Photopaint by clicking on Image > Flip > Flip Horizontally. Save the flipped version as memberbar_left.gif.

Fig 10.4 - Flip the memberbar_right.gif horizontally and save it as memberbar_left.gif:

Next 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 need AND we can use it as our background image! 3 images we needed reduced to 1! I'll save this image as memberbar_bg.gif

Fig 10.5 - Masked area for the button spacer AND background of the member login bar:

Fig 10.6 - Save the image in your image folder as memberbar_bg.gif:

Now let's go through the member bar and create our buttons!

Fig 10.7 - Masked area for the Lost Password button:

Fig 10.8 - Save the image in your image folder as memberbar_but_lpass.gif:

Fig 10.9 - Masked area for the Register button:

Fig 10.10 - Save the image in your image folder as memberbar_but_register.gif:

Fig 10.11 - Masked area for the Login button:

Fig 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!

STEP 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.

Fig 10.13 - Create a new table under the Ad Banner table with the following settings:

Fig 10.14 - A new table is created with 1 row and 2 columns:

Click 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.

Fig 10.15 - Insert memberbar_left.gif into the left cell:

Fig 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.

Fig 10.17 - Click inside the right cell of the table:

Fig 10.18 - Click the Align Right text button:

Going 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 shall we?

Fig 10.19 - Insert memberbar_right.gif:

Fig 10.20 - Setting the alignment of the memberbar_right.gif image to Absolute Middle:

Fig 10.21 - Insert the memberbar_but_lpass.gif image and set the alignment:

Fig 10.22 - Insert the memberbar_bg.gif image and set the alignment:

Fig 10.23 - Insert the memberbar_but_register.gif image and set the alignment:

Fig 10.24 - Insert the memberbar_bg.gif image and set the alignment:

Fig 10.25 - Insert the memberbar_but_login.gif image and set the alignment:

Now 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

Fig 10.26 - Set the right cell's background to memberbar_bg.gif:

Just 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 #.

Fig 10.27 - Set the button URLs to # to make the button active:

That's it for this one folks! Check out the live sample below and then we move on to the infamous expanding content boxes!

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 source code.

[ Previous Lesson ] [ Next Lesson ]