This chapter is from the book
This chapter is from the book
This chapter is from the book
Paragraphs, Headings, and Lists
Let's begin by dealing with our basic typography styling. Looking at the page with the overall serif font is making our eyes burn! If you need to check your work, or simply want to start in this section, you can use the index_1.html file in the builds directory.
Sometimes, it helps to size and visualize the headings if we change the text to match the comp.
Change the text in the <h1> in the mainContent div to say "Visiting the Area." Change the text in the <h3> in sidebar2 to say "Area Highlights."
Because sidebar1 will contain our navigation, we won't worry about that heading for now.
Since our designer gave all the headings a normal weight and orange color, we can create a font-weight selector for the entire group of headings. The sizing will have to be changed separately.
Place your cursor into one of the headings. On the CSS area of the Property inspector, choose Targeted Rule <New CSS Rule>. Click Edit Rule. (Or create a new CSS rule by clicking the New CSS Rule icon at the bottom of the CSS Styles panel.)
The New CSS Rule dialog appears auto-filled with the path to your element.
Choose Compound Selector Type. In the Selector Name input, type in h1, h2, h3, h4 and click OK.
This will create a grouped selector where we can place the color and weight.
In the Type Category, choose #FF9F00 for the color and set the font-weight to normal. Click OK.
h1, h2, h3, h4 { color: #FF9F00; font-weight: normal; }
We'll similarly define the font-family and line-height for the paragraphs in our page as well as the lists in the main content area. We're keeping the lists in the main content area separate because our horizontal and vertical menus will be lists as well and we want these properties to be specific and not cascade to the menus.
Open the New CSS Rule dialog. Choose Compound selector and type in the grouped selector, p, #mainContent ul, #mainContent ol. In the Type Category, set the font-family to the font group starting with Arial. Set the line-height to 1.5 and select multiple from the list. Click OK.
This gives us a nice sans-serif font with a bit more breathing room for p elements anywhere in the document and list items in the main content area only.
Figure 4.8 Comparing our headings to the comp.
)
We'll turn our attention the header sizing now. Comparing our comp to our page, we see the h1 in the main content area and h3 in the sidebar are smaller than the designer envisioned. We'll adjust those now by creating simple element selectors for h1-h4 level headings.
Place your cursor into the h1 element in the mainContent div. On the CSS area of the Property inspector, you'll see the grouped selector you made for the headings showing in the Targeted Rule select. Change that to <New CSS Rule>. In the Size input you'll see 80%. Type 225% into the text field and press Enter.
The New CSS Rule dialog will open showing the full path to the element—#container #mainContent h1 in the Selector Name input. We don't really need to be that specific here.
Though you can get as specific as you like with your selectors, we find that keeping the specificity as low as you can when creating them gives you much more freedom to override selectors later in the game.Click Less Specific twice so that only h1 is showing. Click OK.
A new rule is created for the h1 element with the larger font-size.
Repeat the process for the h2 and h3 selectors. Give the h2 a font-size of 175% and the h3 a font-size of 150%.
Since there is no h4 element in the page, you will have to create that one using the CSS Styles panel or directly in the CSS document using the Related Files toolbar.
Create a rule for the h4 and give it a font-size of 135%.
Your new rules should be at the bottom of your CSS document and look like this:
h1 { font-size: 225%; } h2 { font-size: 175%; } h3 { font-size: 150%; } h4 { font-size: 135%; } If the sizes of your headings are consistent within the various divs, writing a simple type selector works nicely. If you want the size of the side column's h3 to be different than an h3 within your mainContent area, using a descendant selector works better.
Resetting and Styling the Lists
Lists, left to their defaults, show a good deal of difference in styling from browser to browser. You may have found their spacing odd and hard to control. This is because some browsers use padding and others use margin to indent the list. The easiest way to level the playing field is to create an element selector that zeros the list defaults. Then, place the margin or padding values we need for various lists, including menus.
In the comp at the middle bottom of the mainContent area, there are two links styled with the same little triangle indicator graphic as we see on the vertical navigation. In times like these, we need to find out what our graphic designer had in mind. Does she want a specific link style? Or is she indicating that all the unordered lists should have this indicator instead of a regular bullet? After discussion, we found that all unordered lists should be styled with the graphic instead of a bullet.
This means we're safe to remove the bullet from all lists in our site since the menus won't need bullets either. Let's place an unordered list into the middle of the main content area of our page.
Place your cursor about halfway through the text below the h2 level heading. Hit Enter twice to break the paragraph as well as create a new one. Arrow up into the empty space. Type some text.
If you're looking at Source Code in Code and Design view, you'll see you're in a paragraph.
On the HTML area of the Property inspector, choose the Unordered List icon (top row, first of the four at the right).
Figure 4.9 The Unordered List icon in the HTML area of the Property inspector.
You'll see an indentation and bullet appear in front of your text.
Hit Enter and create two more list items. Make one or two of them links as well.
Many times, especially when dealing with legacy code, designers create something that appears to be a list with a fancy bullet by using a two-column table. They place the bullet image in the left column, the text in the right column, and each so-called list item is in its own row. We created a demo that contrasts this common technique with the proper, semantic method that you should be using. You'll find it in the listDemo folder in your source files for this chapter.
Let's build a properly formatted list with decorative bullets. First, we'll create a selector that will zero the list defaults sitewide.
Create a new CSS Rule for the ul element. (You know how to do this by now!) In the Box Category, give it a 0 margin and 0 padding value. In the List Category, choose none in the List style type selector.
We notice the list is now even with the edge of the paragraph on the left. There is no indentation at all. There are also no list markers. Viewing the CSS in the Related files toolbar, we see:
ul { margin: 0; padding: 0; list-style: none; }Now it's simply a matter of adding the list graphic.
)
Creating a Background Image from Photoshop
Obviously, we could create the arrow graphic as we have been doing—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 or use the arrow.gif in the images directory.) In fact, this is a technique you can use to import background images from Photoshop into Dreamweaver—and take advantage of Fireworks' capability to create smaller file sizes.
Open the design in Photoshop, and Alt+click on the arrow on the left menu.
This will find the layer for you in Photoshop.
Select Layer > New Layer Based Slice from the Photoshop menu.
Photoshop creates a slice directly over the tiny arrow icon.
Choose Edit > Copy from the Photoshop menu.
If you've somehow deselected your slice, choose the Slice Select Tool from the Tools bar and click onto the slice just created before copying.
In Dreamweaver, place the cursor anywhere in the page. Choose Edit > Paste.
Dreamweaver recognizes that the content on the clipboard is not text but an image, and opens the built-in Fireworks optimization dialog. We can now set the optimization level for the image.
Clicking the icon in the bottom right of the optimization dialog will allow you to see the 2-up and 4-up views and compare different compression settings side-by-side—just like exporting from Fireworks.- Choose to optimize the image as a gif and click OK. Name the image arrow.gif and save it into the images folder of the site.
The Image Description (Alt text) accessibilty dialog will open. This is one of the rare instances where we don't need to type anything inside. Click OK.
When you copy/paste an image into Dreamweaver, destined to be a background image, there's no need to input the alt attribute.Delete the image from the page.
The image is now available to us in the images directory, we didn't have to zoom in close to slice it properly and we got the added advantage of a smaller file using headless Fireworks. Groovy!
Adding the Graphic to the List
Now that we have the arrow imported, there are two ways we can use it as a list marker. The first, you can experiment with on your own. Yes, you can place a graphic as a list marker using CSS and the list-style-image property. The problem is, you have no control over placement with that method. Instead, we'll use a much more reliable way—using the background image property and a little padding to keep the text away from the image.
Create a new CSS rule called #mainContent li.
By now, you should know this has to be a compound selector.
In the Background category, Background image, navigate to the arrow.gif in the images directory. Set the Background repeat to no-repeat and choose left for Background position (X) and center for Background position (Y). Click Apply.
We've positioned the background image so it will remain nicely centered on the text vertically. However, if we had lists that might have several lines of text, this could look awkward. In that case, we might want to set it to the top, or a couple pixels from the top (to get the proper alignment with the image we're using). Viewing the page, we can see we have a graphic there, but our text is overlapping it!
In the Box category, set the left padding to 15px. Click OK.
Don't be alarmed at the odd coloring. We'll attend to that in a bit. For now, we can see that the placement of our image is working just swell.
#mainContent li { background: url(images/arrow.gif) no-repeat left center; padding-left: 15px; }
)
Figure 4.10 The Unordered List icon in the HTML area of the Property inspector.
Just a Quick Sweep!
Though it's fine to leave the rules at the bottom of the page, or to move them at the end of the build, we're kinda weird about staying organized (lest we lose control in a large style sheet). This would be a great time to switch your CSS Styles panel into All mode and move things around a bit. We're using our preferred method (discussed earlier).
- Ctrl-click all element selectors and drag them up so they begin directly after the body element. We included the an img rule as well as the grouped selector that includes the p element in the rules we moved.
- Move the mainContent and header descendant selectors under their respective divs.
The index_2.html file in the builds directory will allow you to check your work before moving to the next section.
)
Figure 4.11 The rules in their original state and in their organized state.