This chapter is from the book
This chapter is from the book
This chapter is from the book
Laying Out the Main Content Area
It's time to get down to the real meat of our page—the content area. In your builds directory, there's a page you can check your work thus far with—index_3.html. We need to re-create the overall gradient and shadowed side columns. Let's begin with the gradient that runs across the main content and right sidebar area. This background gradient needs to begin where the horizontal navigation ends—no matter where on the vertical axis that happens. If we place it on the container that holds the entire page, we can't anticipate text size changes (which affect the vertical point the navigation ends). Since the overall sizing of the columns is fluid, we can't simply create one graphic that includes the imagery in the right column. We need a seamless, repeating background image across the top of the main page area. Then we can add the other page details. That means we need to add another wrapper div around the three columns to contain them all.
In your graphics editor, slice from, but not including, the light lavender single-pixel line—remember we placed that line on the header—to the area where the gradient ends and becomes a solid color. Once again, you're saving page weight by using CSS to place the overall background color and putting the gradient on as a background image. Since it's so subtle, how do we know where the gradient changes to a solid color? More super scientific methods!
Our method is to eyeball it. In our graphics program, we put a guide where we think the transition is, and sample the color on both sides of the guide. If the color number is the same, we move the guide up a bit to find the highest place we can place the guide where the color still matches on both sides. If the color number is different, we move it down a bit until it matches. The color we sampled, about 465 pixels down in our comp, was #403E8A. We'll slice down to that guide, and since it is a gradient, we'll export it as a jpg with the name main_back.jpg.
Modifying the Columns
- In the CSS, delete the background colors from both sidebar1 and sidebar2 so that they are transparent. Also delete the background color from the overall #container since all the divs it contains now have their own background colors.
In Code view of the XHTML document, highlight both columns as well as the mainContent div and the clearing element.
Be sure the clearing element is included in the new div. That's what makes the new container aware of where the floats inside end.- On the Common pane of the Insert bar, choose Insert Div Tag.
- In the dialog, choose "Wrap around selection" and give the ID the name of outer_wrap.
Click New CSS Style and choose to add the style to the threeColLiqHdr.css style sheet. Click OK.
If you create a new rule with your focus in the CSS document from the Related Files toolbar, you might come across a confusing drop-down list when choosing where to define your rule. The name of your style sheet (most likely where you want to place it) won't be included in the list. Instead, you'll have a choice of (This document only), (New style sheet file), and dtss.css. Choosing (This document only) will actually place the rule in your external file. Dreamweaver is giving you this confusing choice because your focus actually is in the page in which you want to place the rule.- Go to the Background pane and navigate to the image we just created setting the Background-repeat to repeat on the x axis (horizontally).
Set the Background-color to the color the gradient ended on—#403e8a.
This lets us have any amount of content in the portion of our page containing the mainContent div and side columns. If the page is extremely short, it will end, still showing the image, before the background color starts. If the page is very long, it will continue on seamlessly with the solid background color. Users can't tell where the image ends and the color, created with CSS, begins.
Dealing with Margins
In most browsers (IE is an exception), and as shown in Figure 4.25, there's an odd space where the overall body background color shows through right below the horizontal menu. This is a perfect example of one version of margin collapse.
)
Figure 4.25 With and without the background color. You can see how well our CSS background blends at the bottom—it looks like one graphic!
As we discussed in Chapter 2, margin collapse occurs when two margins touch. One margin, the smaller of the two, will disappear (or collapse), allowing the larger margin to take precedence. For example, when you have a heading followed by a paragraph element, the margin that is larger will be rendered—the margins are not added together. If a margin on the first or last element is not contained by its div, it can create a space between divs. It appears to push the div away from the adjacent div. Believe it or not, this is correct behavior—it's not a bug. But in this case, it's unsightly.
When two vertical margins meet, and the margined elements have no padding or borders specified, the largest margin takes precedence over the smaller. When both margins are the same size, the space rendered is the size of one of the margins—not the two added together. This is why you can zero the top margin of an element, yet still have space between elements.
There are three basic ways to prevent margin collapse, and the page design determines the best method to use. Contain the margin using a border or padding on the parent div. Or simply remove that margin from the element altogether and create the space using padding on the div itself.
In our case, we're dealing with the top margin of the h1 that is protruding above the mainContent div. We can either get rid of the top margin on the h1, leaving only the bottom margin; add the padding-top property to the mainContent div (or the outer_wrap container div); or add a border to either of those divs.
Our design doesn't lend itself to a border (though it's possible at times to use a border that is the same color as the background it sits on). Due to different defaults on headings, and the different way IE interacts with margins, we'll need to use an IECC to make them appear even if we choose to use padding (which is how the layouts come by default). Thus we're opting to zero the top margin of the h1 in the main content area and the h3 in the right sidebar. We're not worrying about the left sidebar as it will be a menu list shortly and all our list defaults have already been equalized with zero values. We'll create a simple class selector that removes the top margin of anything we place it on.
Create a new selector named .no_top
You, of course, can name it anything you like. This name just helps us remember what it's for.
- Give it the property of margin and a value of 0.
Place your cursor into the h1 element in the main content area. Either right click the <h1> on the tag selector or use the HTML area of the Property inspector to attach the .no_top class.
The gap below the top navigation immediately closes. The h1 seems a little high. We'll place the padding on the #mainContent div that contains it.
Figure 4.26 The h1 is now sitting right under the menu bar.
Select <mainContent> on the tag selector and in the Properties pane of the CSS Styles panel, add the padding-top property. Give it a value of 30px.
Yes, you remember correctly. The padding alone would have gotten rid of the margin collapse. But we also have the issue of the way IE treats margins. We're leveling things here. That means we need to remove the top padding for the #mainContent in the IECC.
Go to Source Code in your related documents toolbar. In the head of your document (yes, in the code), remove the margin-top on the main content div.
The area you're looking for looks like this. The highlighted portion is what you need to remove.
#mainContent { zoom: 1; padding-top: 15px; }- Repeat the same process in the right side column. First, add the .no_top class to the h3.
Add the space back in by changing the padding on the #sidebar2 div. Place 40px on the top and leave 15px on the bottom.
We didn't want to give the bottom as much space as the top, but we still like to leave a little breathing room there in case it's the longest.
- Again, remove the padding in the IECC in the head of your document. Go ahead and remove both the #sidebar1 and #sidebar2 selectors. We won't be using either.
)
Planning the Background Placement
In the fixed-width layout chapter, we looked at a simple method to use one graphic and create the effect of two or three full-length columns called faux columns. Of course, it's easy to create faux columns when you know the exact pixel dimensions. But in a liquid layout, you can't anticipate the screen size of your user, and guessing at the column width isn't going to work. We're just out of luck, aren't we? Think again. Not only is it possible, once you understand the principles, it's really not difficult.
If you'd like to create three equal length columns within a liquid, percentage-based layout, it's quite doable as well! Please refer to Zoe Gillenwater's free article at Community MX—Creating Liquid Faux Columns, http://www.communitymx.com/abstract.cfm?cid=AFC58.
Let's analyze the comp. We've got a full-length column on the left column and two background images to place: the triangles and the drop-shadowed column top on the right. We can't slice the drop-shadowed area and triangles as one image since the width of the column is flexible. We've already placed a background on the outer_wrap div. That leaves the sidebar1, sidebar2, and mainContent divs with no backgrounds yet declared. It's quite obvious that the triangles in the right corner can only go on the sidebar2 div since the mainContent div is margined away from that area. That means the mainContent div gets the drop-shadowed column separator that creates the right column.
Remember, only one background per customer please—errr—per element, that is. At least till CSS3 is in full swing. Probably about the time we have grandchildren. (Okay, that's not so far away, but still!) For now, we have to come up with other creative methods to create the styling we need.
That leaves the left column. It needs to appear to go the full-length of the page. When we created the fixed-width, full-length faux column, we found we can't use the actual side column div itself. That div quits displaying its background when the content within it ends. We can't force it to go down to the footer (and no, adding a whole lot of <br> elements doesn't count). We can't use the #container like we did with the fixed faux columns. That's not due to the technique (it will work flawlessly on the container); that's due to our design. If we placed the liquid faux column on the container, the gradient background we just placed in the main area would sit on top of it, covering it up.
If you have an element (child) nested inside another element (parent), and they both have background images, the element that comes later in the flow (child) will cover the earlier (parent container). Children are contained in, and essentially sit on top of, their parents. Thus, the child's background image will cover the parent's.
The Illusion of a Column
We'll begin placing the backgrounds with the full-length left column. Since we've determined we can't place the background image on either the container or the left side column itself, what's left to use? Well, nothing. At least nothing we currently have. We'll have to create another hook to hang it on.
Creating the Div
Place another div right inside the #outer_wrap div. Yes, in code view. Using code hinting. By now, you can do it! Name it #inner_wrap.
Figure 4.27 Dreamweaver makes it easy to type your element tags in Code view.
Move down toward the bottom of your page. Place your cursor between the close of the #mainContent and #outer_wrap divs. Type the </ and Dreamweaver will automatically fill in the rest of the tag.
Notice the #mainContent closing tag is commented. This would be a good time to comment both the inner and outer wrap divs we've created. It's easy to lose track when you have a more complex page.
Figure 4.28 Place the close of the div between the two that exist already.
Place closing comments in the code for each of the closing divs. Ours looks like this:
Figure 4.29 Nicely commented closing div tags.
We now have a div directly inside the div that holds the three columns. Without any width, margin, or padding properties added to form it, it is 100% of the width of its parent.
We want to create the proper width for the #sidebar1 div since that's crucial for the next steps.
Place your cursor into the #sidebar1 div. Change the width value in the CSS Styles panel from 22% to 20%.
In some designs we'd also want to adjust the left margin of the main content area since the margining is what creates the space between them. In this case, we'll leave it as is—our designer envisioned a good bit of "white space."
)
)
)
Creating the Graphic
We've created a column that is 20% of the width of the container it's in. Here's the first part of the technique that makes this effect work. The graphic used for it will not come from our designer's comp. It's much too small. We want to use a graphic as wide as we believe a browser viewport will be. For ease of demonstration, we'll use 2,000 pixels. Your mileage may vary. We will use a max-width later to constrain our design for usability/readability reasons, so we're safe with this number.
In the source directory for this chapter, open the liquid_left.psd. This file has the look of the left column of the main comp, but is created in the dimensions we need for our technique.
)
Figure 4.30 The column on this 2,000px wide graphic is 400px, or 20% of the overall width.
Our overall graphic is 2,000 pixels wide. When creating your own column using this technique, just remember that it's simple math that decides the pixel width of the column area. Our column has a 20% width. Our column in the graphics program must be the same percentage width. So 2,000px x .2 = 400px. 400px is 20% of our 2,000px wide graphic. (Now you understand why an even number like 2,000 is so nice to work with!) We typically create a 10-15px tall graphic.
If the technique for your column is more complex, creating a nice, 200px tall graphic might be easier. Then crop or slice it to be only 10-15px tall.
You probably noticed our graphic is transparent for the other 1600 pixels. As we mentioned earlier, since the div we'll place this graphic on is inside the div with the gradient, its background image will render on top of the gradient background. If we left a color on the rest of this graphic, it would completely cover the gradient. We exported the graphic as a gif to keep the transparency. It's called liquid_left.gif and is in the images directory of your site.
It's also possible to use a non-transparent graphic with the color of the column and the color of the remaining portion of the page all in one graphic. In our case, the gradient makes that impossible since it needs to repeat on the x axis (horizontally) and the column must repeat on the y axis (vertically). But if your design has no gradient, that's the best way to do it.
Creating the CSS
Now that we have our graphic, let's take a look at the CSS.
- Create a CSS rule for the #inner_wrap div.
In the Background Category, navigate to the graphic for the left column—liquid_left.gif. Set the Background-repeat to repeat-y. Click Apply (not OK).
Notice how the 400px wide column is, well, 400px wide. This is because by default, a background image is applied from the top, left of the element you're placing it on, unless otherwise positioned. Let's fix that now.
Figure 4.31 Oh my, this doesn't really have the look we wanted, does it?
We still want our background graphic to start at the top of our element, so we'll set the value of the Background-position (Y) to 0. But here's the part to pay extra attention to—the Background-position (X). This is the final step that creates our special CSS effect. The setting for the Background-position (X) needs to equal the percentage of both our left column and the column on our graphic. As you probably recall, that was 20%. Set that position and click OK.
Due to Dreamweaver's limited workspace, this is one of those times where previewing in a browser is helpful. View your page in a standards-compliant browser. Make the window wider and then narrower.
If you completed this step successfully, your column is resizing automatically based on the width of your viewport. How cool is that? Think of the possibilities!
)
)
Figure 4.32 No matter the width of the page, the left side column is still 20% and extends to the bottom of the window.
The Right Column
Remember to turn off any layers with text sitting on top of a graphic you're slicing. You'll add the text within Dreamweaver.
Moving back into your image editor, slice each of the other two areas as tightly as you can. For the right side drop shadow, slice from the lighter column area to the other side of the shadowed area, staying as close as you can. Vertically, slice until the area where the color becomes solid and the shadow ends. Export the triangles as side2_back.jpg and the right column shadow as maincontent_back.jpg. These are now named for the column they'll be attached to, which makes it easier if you have to come back to the site later.
)
Figure 4.33 Notice slices 16 and 17 in our Photoshop comp.
Back in Dreamweaver we'll add these to our page on the div for which they were just named. We'll position them properly and set a min-height on the right side column. This keeps the graphic from ending abruptly if there is too little content in the side column.
Select <#sidebar2> on the tag selector. Click the Edit Rule icon. In the Background Category, Background-image, navigate to the side2_back.jpg. Set it to Background-repeat no-repeat. Set the Background-position (X) to right. Set Background-repeat (Y) to top. Click OK.
Remember that if we don't explicitly set the background's position, it would be positioned at the top left of the div. We'll move to the min-height now. You may have noticed that there is no way to add min-height using the CSS Rules dialog. We'll have to move to the CSS panel (or, dare we suggest, the code).
In the Properties pane, and with the right sidebar still selected, type min-height into the property. Give it a value of 145px.
145px is just slightly taller than our graphic, assuring us that it will show in its entirety.
There are properties like min- and max-width, and min- and max-height that are not available in the CSS rules dialog. Those properties are not supported in IE6. The dialog was updated in Dreamweaver CS4 so that the property names are written correctly, but no new properties were added.Continue in the same way with the main content div. Add the background graphic called maincontent_back.jpg, set it to no-repeat and position it at the top, right of the element. Click OK.
The code should look like this:
#sidebar2 { float: right; width: 23%; padding: 40px 0 15px; background: url(images/side2_back.jpg) no-repeat right top; min-height: 145px; } #mainContent { margin: 0 24% 0 23.5%; padding-top: 30px; background: url(images/maincontent_back.jpg) no-repeat right top; }Min-height works in all current browsers, including Internet Explorer 7. But it isn't supported in IE6 or below. In those browsers, we can imitate the same behavior using the height property. IE will expand a box to contain its content, so if the column has more content, it will simply grow longer. If it has less, it will remain at the height given. We only want to do this for IE6 and lower, though, so we'll need to use an Internet Explorer Conditional Comment within the head of our document:
<!--[if lte IE 6]> <style type="text/css"> #sidebar2 { height: 145px; } </style> <![endif]--> Refer to previous chapters for more information about Internet Explorer Conditional Comments.
Figure 4.34 Viewed in Live View, it's looking like columns—but their content spills out!
)
Tweaking the Right Column
Now is the time for all good designers to come to the aid of their columns. Though we graphically have our nice drop-shadowed, columned look, the measurements aren't exactly right. Viewing the designer's vision in Photoshop, we see that the alignment of the left column (sidebar1) is the same as the navigation and header above it—40 pixels from the left. The right column appears to have about 30 pixels on the right side.
With percentage-based layouts, we never want to add padding to the actual column itself. Instead, we want to use margin or padding on the elements within the columns. Remember, the actual width of an element is the width value plus the padding and border. If we add 40px of padding to the left column, currently set at 20%, our actual width would be 20% + 40px—a number we can't be sure of at all! Thus, margining the middle mainContent div away from the column is risky at best.
If you choose to set actual pixel values for the side columns, instead of allowing them to be fluid like the center, you could place the padding on the columns themselves. It would be quite easy then to calculate the amount of margin needed on the mainContent div. Our designer has asked that the columns remain fluid like the rest of the design.
Let's start on the right column, since it's simpler, then we'll move over to left column, changing the paragraphs to a list and positioning them properly. We've already measured in Photoshop and seen that, in the right column, the approximate space we want from the right side is 30px.
In your style sheet, you'll find a grouped list of selectors:
#sidebar1 p, #sidebar1 h3, #sidebar2 p, #sidebar2 h3 {
margin-left: 10px;
margin-right: 10px;
}
Since we want differing margin values, we'll separate the right and left sidebar selectors into two rules and only make the change in the sidebar2 values.
Turn on the CSS Layout Outlines from the Visual Aids toolbar.
Note that the shadow separating mainContent from sidebar2 is actually contained in the mainContent div.
Figure 4.35 Use the Visual Aids menu on the Documents toolbar to view CSS Layout Outlines.
Place your cursor into the right sidebar. On the Rules pane of the CSS Styles panel, right-click the grouped rule and choose Go to Code.
The focus is now moved to the grouped rule in the CSS document. We'll separate it into two separate grouped rules: one with the two #sidebar1 rules and the other with the two #sidebar2 rules.
- Copy the entire grouped rule. Paste it right below the first. On the first rule, remove the #sidebar2 p, #sidebar2 h3. Do not forget to delete the comma that follows the #sidebar1 p selector.
- On the rule you pasted, do the opposite. Delete the #sidebar1 p, #sidebar h3 selectors (along with that extra comma).
On the #sidebar2 grouping, leave the left margin as it is, and give the right margin a 30px value.
#sidebar1 p, #sidebar1 h3 { margin-left: 10px; margin-right: 10px; } #sidebar2 p, #sidebar2 h3 { margin-left: 10px; margin-right: 30px; }When previewed, you'll see that we haven't changed the actual width of sidebar2. We've simply decreased the line length.
The mainContent div's content is still too far to the right. We'll adjust that next.
)
)
Figure 4.36 The right column is in the right place but the main content area's spacing is still off.
Styling the mainContent Area
Our columns will be looking perfect when we make a simple adjustment to the mainContent div. The shadow creating the right column is contained within the mainContent div so, unfortunately, using more right margin actually makes the right column itself appear wider. (Feel free to experiment with that to see how it looks.)
You may have thought that using padding would add to our overall box width, which could be dangerous. And if the main content div had been given a width, you'd be correct. In our case, the main content's width is created by carving out the margins on each side. Thus, the padding doesn't add anything to the width. The IECC in the head of the document shows a zoom:1 declaration for the #mainContent div. That gives IE the hasLayout trigger it needs to render properly without any dimensions.
Instead we can use padding, which leaves our graphic where it is, and moves the content within the div away from the right edge. Since the designer has given a rather wide margin to the text in mainContent, we'll use about 100px of right padding and see if that achieves the desired result.
Place your focus into the #mainContent and in the Properties pane of the CSS Styles panel, add the padding-right property. Give it a value of 100px.
#mainContent { margin: 0 24% 0 23.5%; background: url(images/content_back.jpg) no-repeat right top; padding-top: 30px; padding-right: 100px; }While this is really starting to come together, it would be nice to see the dark text in the proper color, wouldn't it? Since all the paragraph text is white except the footer, an efficient way to handle this is to add it to the grouped selector we created for the p. #mainContent ul, #mainContent ol. When we move to the footer later, we'll simply assign a different color value there.
Place your cursor into the text. This will select the grouped rule. In the Properties pane of the CSS Styles panel, add the property color with the value #FFF (white).
Now that's more like it!
)
Figure 4.37 Our columns and text now match our comp nicely.
Creating the Left-hand Navigation
With our columns all set, it's time to work on the left column menu. If you need a fresh start, builds > index_4.html will help you see where you might have gotten off course. We have a challenge with this vertical menu in that the little marker by the menu item, that indicates which page the user is on, is all the way against the left side of the column. Let's first create the list itself (refer back to the horizontal list instructions if you don't remember how to create a list).
Remove all content in the sidebar1 div and replace it with an unordered list of links using the link names given in the Photoshop comp.
Remember that since we want to use the same current page indicator trick we used on the horizontal menu, each list item needs a unique ID:
<ul> <li id="visiting"><a href="#">Visiting the Area</a></li> <li id="moving"><a href="#">Moving to the Area</a></li> <li id="maplocator"><a href="#">Interactive Maplocator</a> </li> <li id="directory"><a href="#">Business Directory</a></li> </ul>
Since we removed the heading and paragraph elements from sidebar1, we don't need the selectors for them.
- Using the All pane of the CSS Styles panel, remove the #sidebar1 p and #sidebar1 h3 selectors from the CSS document.
Create a descendant selector for the ul in the left side div and increase the text size slightly since the menu text in the comp is larger than a normal list:
#sidebar1 ul { font-size: 105%; }If we hadn't already zeroed the list defaults, we would do that here. Our ul element selector has already taken care of that for us.
Most of the time, we'd create the space on the left of the menu with a left margin on the ul itself. However, with this design, we want to be able to add the visual indicator all the way on the left side of the page, so we can't move the entire list over. We have two other elements to choose from, though. We can either move the list item itself, or the link within it. Before we give you the answer, think about which one you would put it on—and why...
Okay, time's up! If you chose to put the padding on the link within the list item, you made the same choice we did. If you chose the list item itself, you're not wrong: remember, there are many ways to do the same thing with CSS. But we chose the link because, when we add the CSS to create the page indicator, it will not only add the graphic on the left, it will also change the color of the link. Since we'd have to create a selector to change the link color, using it to add the graphic as well is more efficient than creating another set of rules. For this reason, we'll put the padding on the link element.
If the list marker needs to change on hover, you'll be happy you put the list marker on the anchor. IE6 and earlier doesn't support the hover pseudo-class on anything but anchors.
)
Figure 4.38 We've got the list sitting right up against the left side of our page.
Styling the Menu Links
Ready to style the links? You've got a pretty good idea by now how to set the properties needed. We'll give you the name of the selector and the declarations you need. If you have to poke around a bit to find them, that's okay. You'll remember them better that way.
Create a descendant selector for the links: #sidebar1 li a. Set the display to block, the color to white, remove the underlines, and set the padding to 5px for the top and bottom and 40px on the left to match the alignment of the elements above.
#sidebar1 li a { display: block; padding: 5px 0 5px 40px; text-decoration: none; } We could have written our selector as #sidebar1 a (leaving out the li portion of the cascade). It would have selected the links within the list items. It would have also selected any other link that might be put in that column later, or in other pages in the site that use the same layout. So being specific here can be helpful down the road.We set the display to block just as we did in the horizontal navigation, since we want the entire link to be clickable. We've added a bit of padding for space around our button and placed the 40px of padding on the left for alignment with the other elements on the page.
If you look at Internet Explorer now, you'll see that there's a great deal of space between each menu item. Don't panic. IE will need some tweaking in this area due to hasLayout issues (discussed in Chapter 2 and related to dimension). Ignore it for now. We'll add the zoom:1 fix at the end of the chapter.If you look in Live View, you'll see that the alignment of the top of the ul is a bit high. You'll probably remember we zeroed the first element on the other two columns and put the padding on the div itself to avoid margin collapse. We've already zeroed the top margin with the ul element selector. We'll add padding to the top of the div.
Give the #sidebar1 a top padding of 30px to move the elements within down:
#sidebar1 { float: left; width: 20%; padding: 30px 0; }
)
Figure 4.39 We're getting there. We've created space and removed underlines.
Placing the Page Indicator on the Vertical Menu
We'll indicate what page the user is on the same way we did before: by placing an ID on each link.
First we need the arrow graphic. We'll use the arrow.gif file we used for the unordered list in our main content area.
- Create a descendant selector for the link as if the body class indicates we're on the page for the first link, Visiting the area: .visiting #visiting a
Put arrow.gif as the Background-image set not to repeat. Leave it positioned to the left and vertical center. Set the color to #FF9F00.
.visiting #visiting a { background: url(images/arrow.gif) no-repeat left center; color: #FF9F00; } If you place the graphical indicator on the vertical center of the list item's link, if the user's text is large and it wraps to the next line, the graphic will be centered on both lines. You can also align it to the top for your own designs.Place the .visiting class for the vertical side menu on the body element by typing it into the code. We've already placed the .living class there for the horizontal menu. Add the new class, separated by a space.
<body class="living visiting">
You can put more than one class on an element if you separate them with a space. This can be very useful at times.
Create all the other descendant selectors for the vertical menu. Follow the same pattern we just used:
.visiting #visiting a, .moving #moving a, .maplocator #maplocator a, .directory #directory a { background: url(images/arrow.gif) no-repeat left center; color: #FF9F00; }Finally, use the same orange color for the vertical menu hover state as used on the headings and page indicator.
Remember again, whenever we define a hover state, we also want to define the active and focus so that users with alternative methods of navigating your site can also see where their focus is.
#sidebar1 li a:hover, #sidebar1 li a:active, #sidebar1 li a:focus { color: #FF9F00; } Notice how when viewing in Live View, you have an orange hover state in the left side bar and deep blue on the horizontal navigation. That's the beauty of descendent selectors.
Figure 4.40 And there she is—our side bar menu!
We'll do a quick code cleanup and some formatting before we move to the badge image in the right column.
Since you've been typing in Code view a bit, you may want to be sure your (X)HTML source code is neat and easy to read. With your Source Code selected in the Related files toolbar, select Commands > Apply Source Formatting from the program menu.
Your (X)HTML code is now cleaned up and nicely indented.
It's time for one more cleanup of our CSS document. You know what to do at this point. Start from the All pane of your CSS Styles panel.
We moved the #outer_wrap and #inner_wrap to just below the header styles. Our reasoning is that these divs wrap the area that holds the three columns. That comes after the header, thus we placed them there in the same order as the flow of the page.
We also moved all the new left side menu styles up to the sidebar1 section. If you have any confusion from this past portion, you may check your work in the builds directory using the index_5.html file.
Dreamweaver lets you choose your CSS code formatting. Go to Preferences > Code Format > Advanced Formatting and click the CSS button. CSS Format Options are available for you to create the style you like to work with. If you receive a CSS page that is not using this format, use the same Apply Source Formatting command we just used on the (X)HTML to your CSS page. It will be placed in the format you've set in your preferences.
)
Adding the Badge Image
The last element to place in the right column is the Walking Tour badge. Obviously, we could do as we have been doing and simply slice this image in an image editor and export it. But we're going to do something slightly different this time. (If you don't have access to Photoshop, please export the badge from the graphics editor of your choice.)
Open the design in Photoshop, locate the Walking Tour layer group and open it in the Layers panel. Ctrl-click on the icon for Layer 1 in the layer group to select the area of the badge image. Select the Walking Tour layer group in the Layers panel and choose Edit > Copy Merged.
Photoshop creates a merged (flattened) image containing all of the elements within the layer group's active selection area and places it on the clipboard.
In Dreamweaver, place the cursor at the end of the text in the last paragraph and tap the Enter key to create a new paragraph. Choose Edit > Paste.
Dreamweaver recognizes that the content on the Clipboard is not text, but rather an image and opens the built-in Fireworks optimization dialog. We can now set the optimization level for the image.
Click the small window pane icon divided into four sections in the lower right of the dialog.
The 4-up view lets us compare different compression settings side-by-side. You'll notice that the GIF 256 has a smaller compression size, but the gradient background doesn't look as nice. Comparatively, the default JPG compression of 80% looks good.
One advantage of optimizing images from Photoshop by pasting within Dreamweaver is that Dreamweaver uses the "headless Fireworks" optimization engine. Since Fireworks creates smaller file sizes, this makes our page weight even lighter.Click on the page that has the 80% optimization to make it active, and click OK. Name the image walking_badge.jpg and place it in the images folder for the site.
Dreamweaver prompts you for alternative text for the image just as it did when we placed the logo earlier.
Figure 4.41 Fireworks optimization within Dreamweaver.
Enter text that is descriptive of the image such as "Take the walking tour" and click OK.
Of course anytime that we are dealing with a website, there is always the chance that the client will change their mind about an image or piece of text. Changing text is easy since it is part of the HTML, but with images, we're forced to go back to the original image file—whose name and location we hope we remember—and then make the requested change, re-exporting and potentially placing the file in the layout again.
With the new Photoshop integration, Dreamweaver takes the guesswork out of the process. Compare the badge image on the page to the Photoshop comp. Do you notice any difference? In the Photoshop comp the badge image has a drop shadow that is missing in the image on the page. Unfortunately when we used the automatic pixel selection for the layer in Photoshop, it did not select the pixels that make up the drop shadow effect.
Let's correct that now. Notice in the Property inspector that there are two Photoshop (or, if the image came from Fireworks, Fireworks) icons. The one in the bottom row of the inspector identifies the path to the original Photoshop file that was used to create the image.
If you have closed the original Photoshop or Fireworks image, Dreamweaver launches the application and opens the file. However, Dreamweaver has no way of indicating to the other application what the selection area or slice was that was used to create the image, so you'll need to manually reselect it. We're crossing our fingers that future versions of the applications might bring us this functionality.Click the icon in the Edit section of the inspector.
Dreamweaver opens the original file in either Photoshop or Fireworks, depending upon the original file type.
If you want to re-optimize the image, you can select the image and click the Optimize icon in the Edit section of the inspector. This reopens the optimization window, but the source image for the new optimization is the original Photoshop or Fireworks image in its entirety. You'll have to use the slice tool in the optimization dialog to re-slice the desired section of the graphic and this can be difficult. A better bet is to delete the image from the page and start over.- Back in Photoshop, click Layer 1 in the Layers panel in the walking tour layer group. Be sure nothing is selected in your Photoshop comp by choosing Select > Deselect. Choose Layer > New Layer Based Slice. Choose Edit > Copy.
Back in Dreamweaver, choose Edit > Paste again.
This time Dreamweaver simply updates the graphic without taking us through the optimization dialog. In other words, Dreamweaver assumes that we would like to use the same optimization on the image that we applied before.
)
It's also possible to drag an entire PSD out of Bridge (choose File > Browse in Bridge) and drop it into a Dreamweaver layout. Just remember that you'll be placing a flattened version of the entire file into Dreamweaver. But this can be quite handy if the image is a photograph or simple image that you need in its entirety on your page.
If you're thinking to yourself that we could have used the copy/paste technique during the creation of the page logo or background images, you're right! But since this is a book about CSS and Dreamweaver, we didn't want too many of our exercises to require you to use Photoshop.