This chapter is from the book
This chapter is from the book
This chapter is from the book
Creating the Header
In this chapter, we will be using Photoshop as the basis for our comp. If you prefer to use Adobe Fireworks, that's fine—simply substitute Fireworks for each of our references to Photoshop. We're also not going to give true step-by-step instructions for the tasks you need to complete in your graphics program, since we can't know what software you're using, and it's beyond the scope of the book. If you prefer not to complete the graphics-related tasks, you can always use the files you've downloaded from the book's web site. They can be found in the images directory for the site.
)
Figure 4.5 Opening a Photoshop file with Fireworks gives you a dialog box with many options.
Open the comp from the source folder in either Photoshop or Fireworks. Since the logo is created using the Minion Pro font, and this is not a common font, we'll slice and export the entire logo area. Create a slice around the little box image and the words in the logo. Export it into the images directory of your site as a transparent gif matted to white. We named ours logo.gif, but feel free to use any naming convention you commonly use.
With each version of the Creative Suite, Fireworks and Photoshop understand each other a little better. We find that these days, there's very little Fireworks can't render from Photoshop. Feel free to use Fireworks if you're more comfortable slicing and exporting there.
We also need to slice the triangles on the right side of the header in the comp. Slice them as close as you can to the left side and export as a transparent gif (or png) matted to white. Name the file logo_background.gif.
Inserting the Background Image
In Dreamweaver, select the XHTML file and click in the header div. Click <div#header> in the tag selector so that the CSS panel shows the properties of the header and not the header h1, and click the pencil icon at the bottom of the CSS styles panel to edit the header.
If you look at the Box category, you'll notice that there is 10px of padding on the right and left sides of the header in this starter layout. We're not going to need this padding.
Though there are many ways to edit CSS within Dreamweaver, we find that using the CSS dialog is simplest when dealing with background images.Delete the values in the padding fields. In the Background pane, change the Background-color: to #FFF.
A quick way to get rid of margin or padding values that vary is to click the "Same for all" checkbox, then delete the top value. All values will be removed.- Click Browse and navigate to the logo_background graphic you just exported. Click Choose.
Select no-repeat in the Background-repeat drop-down list. Click Apply.
Notice that our graphic is showing in the header, but it's on the left. This is because, unless we position it otherwise, a graphic always positions itself from the top left of the element it's placed on. Let's move ours to the right.
Figure 4.6 Backgrounds on elements begin by default at the top left.
In the Background-position (X), choose right. In the Background-position (Y), choose top for the positioning. Our code looks like this:
#header { background: #FFF url(images/logo_background.gif) no-repeat right top; } If you prefer to use shorthand, as we do, the white background can be written as #FFF. Color shorthand uses the first (r), third (g) and fifth (b) digit of the color, as long as they're identical to the second, fourth, and sixth. So, for instance, #FF0066 is written as #F06, #CC3333 is written as #C33, and #000000 is written as #000.Back in Design view, notice that the word Header (as an h1 element) is sitting boldly on the left, with only a tiny bit of the background image we just placed within apparent on the right. Don't worry—the header simply has no idea that graphic is there, or how large it is, since it's a background image. The amount of graphic showing depends on the amount of content in the header, and we're about to replace that content as well. Though it's going to get ugly for a minute, we'll be fixed up in no time.
With your cursor in the header div, right-click the <h1> on the tag selector and choose Remove Tag. The word Header will become highlighted. Simply hit the Delete or Backspace key to remove it completely.
With no content in the header div, this will remove all but the smallest trace of the background image for the moment.
Since we won't be using any h1s in the header within our site, go ahead and delete the #header h1 rule.
We also keep our preferences set to write shorthand for all other properties as well. This means that rather than having four property/value pairs for the background, we have one declaration as seen in step 4.- Switch to the All pane of the CSS Styles panel, right-click the rule for the h1, and choose Delete.
)
Inserting the Logo
Making graphics as small as possible keeps the page weight light, so we sliced right around the logo. In the original Photoshop comp, the logo sits 20px from the top and 40px from the left so we'll position it in the same place in Dreamweaver. (If you sliced your logo differently, you'll need to adjust your values so that the alignment of the logo matches the navigation and sidebar below it).
Place your cursor into the header and, on the Common tab of the Insert bar, click the image icon. Navigate to your logo.gif and click Choose.
The Image Tag Accessibility Attributes dialog will appear, where you can give your image an alt attribute and, if necessary, a long description.
The alt attribute is not only an important accessibility resource for screen readers and those navigating with images turned off, but it is also a required attribute when writing your document in XHTML.Fill in the descriptive text for your image (exactly what it says in the graphic) and click OK.
Most users expect to click the logo to link back to the home page. This is a good reason not to place the logo into the header as a background image. A CSS background image has no alt attribute, so a non-visual user agent would not even know it existed; background images are best left for decorative, unimportant graphics.
With the logo image selected, use the Property inspector to link it to your site's index page (or the URL where your index page will eventually reside).
Viewing in Design view with the image deselected, you'll see we now have a lovely blue border around the image. Dreamweaver (and some browsers) use this border to indicate a link. But it spoils our design. We can quickly remove that blue indicator, as well as the blue around any images we may link later.
Placing a hash mark or octothorpe into the Link field will cause it to render as if it were a link. If you don't know what your exact link location will be, it's easy to use this trick to get the rendering you need.Add the following code to the end of your CSS document:
a img { border: none; }
Our image is 114 pixels tall—yours may vary based upon how you sliced it. The header area as designed is about 175 pixels tall. Go ahead and give some thought to how we should best make up for that discrepancy so that the header is held open the full height to show the entire background image. And you can't use a height on the div, that's cheating. We'll wait for a moment till you decide...
If your idea was to use a top margin to position the image properly, give yourself a gold star. If you developed the thought a little more and decided you could use a descendant selector as opposed to a class on the image itself, you get even more credit. Kudos to you! That's exactly what we decided.
Since there are no other images directly in the XHTML in our header div we can write a selector that targets only the logo image within that header.
Click the New CSS Rule icon at the bottom of the CSS Styles panel, or type directly into the CSS document, and create a rule called #header img.
If you type directly into the CSS document, you'll see that Dreamweaver begins to auto-complete quite quickly after you start typing the first couple of letters of each property. Simply hitting Enter will then complete the property so that you can type the value.In the Box category of the CSS Rule Definition dialog, use these values for the margins:
- top: 30px
- right: 0
- bottom: 30px
- left: 40px
The height of the image (as supplied), plus the 30 pixel top and bottom margins, gives us the height we need for our header. We've also moved it away from the left edge of our page. This holds the header div open and shows the whole background image as designed.
)
Figure 4.7 The header now looks just like the comp we were given.