Email	Print Reprint
	add to:
	Del.icio.us Digg Google Furl	Slashdot Y! MyWeb Blink

Rank: 3 Resources & References Here are some samples and prior tutorial references. To get the most out of this tutorial, download the sample file most appropriate for you. Place all images in an images/ subdirectory. Graphic Files: Download in .zip format. Graphic Files: Download in .sit format. For background articles, please see: Mastering Dreamweaver, Tutorial 1: Site Setup. Mastering Dreamweaver, Tutorial 2:Inserting Meta Tags, Images and Text. Mastering Dreamweaver, Tutorial 3: Creating a Simple, Dynamic Table Layout

Today the main things we will be exploring are flexible design, nesting tables, and a little code. I'm sure that by now you want to get into more of the "fun" stuff of Dreamweaver, so we'll do a quick rollover as well.

If you've done the last installment, what you ended up with was a centered logo and 3 buttons on the left side of your screen. Let's take a look at it—although it's served its purpose—to show you how to insert a table, merge cells, and center and add links. Today we will begin by using a different table layout.

Let's evaluate what we had; the buttons are right up against the side and our table spans the entire width of the monitor—not very appealing. If we were to add text or images right now they would span the entire page, making reading quite difficult. We could fix this but I'd rather show you how to develop a layout that is both browser friendly and kind to your users' eyes—and have our images stay where we put them as well.

Figure 1: Layout of Previous tutorial

Stretchy Tables

Launch Dreamweaver and open your site. If you are following along from the first tutorial then you have a site defined. If not, simply go to:

1. File > New and make a new page. Or see the first installment of this series to learn how to define and set up your site.
2. Then, click on the Insert Image icon or the menu bar Insert > Table.

Figure 2: Insert Image Dialog

3. Use 2 Rows, 3 Columns, 100% width, and a border of 0.
4. Merge the 3 columns in the first row and insert and center logo.jpg (see "Mastering Dreamweaver Tutorial 3: Site Setup" for more detail).

Figure 3: Merged columns with logo

Now comes the neat part plus a few quirks within Dreamweaver.

5. Place your cursor in the first column on the left and insert the image "20pxtran.gif" (in this weeks download). This is an image that is 20 pixels wide by 1 pixel high, it is simply an invisible placeholder. It will keep the column at 20 pixels no matter the browser size.
6. Align the image to the left. Click the left align icon in the Properties Inspector.
7. We want the column to be 20 pixels wide as well. Look at the Property Inspector (fig. 4). Where the red circle is type in 20 in the Horizontal Space.
8. Repeat steps 5, 6, and 7 for the right side, except right align the image.
9. Place your cursor in the center column. Look at the Property Inspector (fig. 4). Where the red circle is, type in 100% for the Horizontal (Horz).

You may be scratching your head at this time saying, " 20 pixels plus 100% plus 20 pixels doesn't add up." That's because the 100% of the cell is 100% of the available space. You'll see it in action soon.

Figure 4: Property Inspector, horizontal settings

I have refrained from looking at code—until now. I think it is important at this point to see what is going on. Click on the HTML icon on the lower right corner of the document window, or the menu bar, Window > Launcher

Figure 5: HTML source icon

Figure 6: HTML Code

Notice that the first cell width (we are looking at the code for the second row) is 20 pixels high: then in purple you see the image we inserted. The next cell (td) is 100% as we set it and the third cell is 20 pixels and the image again. Great! This is exactly what we want.

I want you to notice something at this point. What you see on the screen in Dreamweaver is not always what you get. Once you enter something in the Property Inspector and click anywhere on your page the changes show up—or do they? Well, not always. Look at the column lines (fig. 7). I highlighted the 20 pixel transparent gif so you could see where the 20 pixel column marker should be, but look how far away the markers are. We will look at this more in a little bit.

Figure 7: Visual irregularity

10. Let's put 2 buttons in to test something. Place your cursor in the center cell of the second row, Insert > Image or use the Insert Image icon and insert psbutton.gif and left align it.
11. Hit the enter key (this puts a space after the button), insert dwbutton.gif, and right align it. Click anywhere on the page, see what happened?

Figure 8: Dreamweaver view

Compare the column lines with the ones in figure 7, but also notice the 20 pixel gif I circled—still not in the right place, but closer. We put the two buttons in just to do a test, they are on opposite sides so you can see the effect of this layout

12. Save. Open your browser and go to File > Open and browse to where your saved file is and open it. Experiment by making the window smaller and see what happens. What you'll notice is that when you make the screen smaller your logo stays centered, the 20 pixel margin remains, the buttons stay where you put them and the only thing that changes is the spacing between the 2 buttons. Because this column is set for 100% of the available space it decreases as the window gets smaller and increases when it is made larger.

Here are 2 screen shots taken at different screen sizes. The first one is my whole monitor window, notice how much space is between the buttons.

Figure 9: Full screen

In this next one you will notice the space between the buttons closing up but you will also notice that you don't see the 20 pixel border after the Dreamweaver button.

Figure 10: Reduced screen size

Hey, I thought this was an expanding site. It is, but now is a good time to 1us what is happening. The logo is 500 pixels wide and the browser window is set to less than that so it will scroll. If you were to scroll to the right you would see that the 20 pixel border is still there. As long as the browser window isn't set to less than 500 pixels your design will appear as you set it. The buttons will remain aligned and your logo centered.

Even though in Dreamweaver the columns looked much larger than the 20 pixels, they actually weren't as you can see in the example. When in doubt, check your code.

Nested Tables

Nesting tables is putting a table into a table. This technique can give you a lot of control over your designs. When you have your design ready, sketch out how it will all fit together. One good way to do this is in Photoshop. If you do your mockups in Photoshop just use the rulers, guides, or the grid to see how you can arrange your content into columns and rows, this will also let you see visually where you may need to nest tables.

We'll need to delete the practice buttons we placed, but this will also cause a problem which we may as well deal with right now because eventually you'll pull your hair out trying to figure it out. If we simply deleted the buttons and then nested our table, the table would be lower in the cell than we'd want. You can place your cursor above the new table and delete the extra space but it won't work. We'll have to look at the code again to see why.

1. Delete both buttons (click on each and delete)
2. Open the HTML Inspector

Figure 11: Extra space code

This is what is left after you deleted the two images. The alignment tags, but the one causing the problem is the <p>&nbsp;</p>. What this code means is: paragraph, nonbreaking space, and end paragraph. What it does is add a paragraph space. Just delete this section of code. Now we are ready to nest our table.

1. Place your cursor in the center cell and insert a table with 1 row and 2 columns at 100%.
2. Insert the psbutton.gif image and align left. Hit the enter key and insert each button.
3. Move the column divider (2 vertical dotted lines) closer to the buttons, I left a small space as a border. To move the column place the cursor over the line, and click and drag it to where you want it.
4. To put color in the second cell of our nested table, click inside of it and look at the Property Inspector. Where the red circle is, click on the drop down arrow. Choose the color you'd like for the cell and click on it. It's that easy to add background color to a cell.

Figure 12: Setting background color of the cell

Figure 13: Adding cell color

Well it's kind of ugly isn't it? But be patient, we'll fix it in the next installment, I promise.

Bottom Navigation

I am personally a firm believer in having text navigation on every page. If you only have image navigation, buttons, or image maps, people browsing without graphics won't be able to navigate. I've read plenty of times that bandwidth isn't as important now as it once was because so many people have cable modems. I suppose I could believe that if I designed only for Americans, only for people in Metropolitan areas, and only for people with unlimited access Internet accounts. Since I obviously don't buy into that bit of propaganda here is how to make text links.

1. I like to put text links in their own table below the main table. This is a personal preference; you put them anywhere you'd like. Insert a table (or nest one if you'd prefer).
2. Type your text that will be your link. Try to use a word or words that tell the user what to expect when they click.
3. Highlight each word and link with any of the methods covered in the previous tutorial.

Figure 14: Text links

Figure 15: Highlight carefully

When you highlight the text for your link be careful to highlight just the letters, it should look like the word Books. If I were to get the spaces before or after or the vertical line that I use to separate the links, it would look like Figure 15, pretty confusing.

Rollover

We will just touch on rollovers today and go more in-depth at a later time. The first thing you need to do is have a rollover image available. I have one for you in the images file called psbuttonover.gif. The effect is a different color of text with a glow.

1. Click on the Photoshop button
2. Open the Behaviors Palette and click on the + sign.

Figure 16: Launcher

Figure 17: Behavior Palette

3. Click on Swap Image, a dialog will come up, click on browse and select the psbuttonover.gif. I check the Preload Images to have the images preload, that way they work as soon as the user rolls over your button. The Restore Image option goes back to your original image once the mouse moves away. Click OK

Figure 18: Swap image dialog

4. Save your image. You can now open your file in your browser and see the effect.

Figure 19: The final rollover results

See you next time when we will make an image map and explore more behaviors.

For the past four years Joyce's passion has been Web design and the tools associated with it.

RELATED ARTICLES Code Signing in Adobe AIR Dr. Dobb's Agile Newsletter 08/08 CUDA 2.0 Released Coverity Intros Software Readiness Manager for Java New Data Center Architecture Proposed		TOP 5 ARTICLES No Top Articles.