- Bring On the Art!
- Get Your Files Here
- Define the Chapter 4 Website
- Image File Formats for the Web
- Project 4.1 Prototyping and Designing with Background Images
- Project 4.2 Inserting and Editing Images
- Project 4.3 Floating Images into Position
- Project 4.4 Creating Structured Layouts with Images
- Project 4.5 Styling the Header Area
- Challenge! Create Your Own Design with Photoshop
- Conclusion
This chapter is from the book
This chapter is from the book
This chapter is from the book
Project 4.5 Styling the Header Area
ACA Objective 1.3
ACA Objective 1.5
ACA Objective 4.1
ACA Objective 4.2
ACA Objective 4.3
VIDEO 4.11
Part 1: Styling the Header Area
VIDEO 4.12
Part 2: Styling the Header Area
From the client feedback document you reviewed, you know that the final design needs to feature some of the characters from the comic strip at the top of the page in the header area. That’s going to be a relatively easy task to accomplish since you can use CSS floats and a couple of collage images that the client has provided.
While you’re styling this area, you should tend to some other matters as well. In this project, you’ll insert and float the images into the header area, add links to the home page of the site, and use a web font to style the name of the company.
Inserting and Floating the Header Images
Your client has provided new images that he wants to include at the top of the page to the left and right of the company name. In the following steps, you’ll insert these images into the header area of the page and then place them into position. Keep in mind these techniques apply only to fixed designs for a desktop or laptop computer. We will learn about making the site responsive for mobile devices in a subsequent chapter. One step at a time, grasshopper.
The header area will need some additional room for the images to fit within the container. So let’s do that first.
In the CSS Designer panel, choose the #header selector, and set the height in the Layout category to 136 pixels. You’re now ready to insert the collage images.
Place your cursor in front of the first letter in the first line of text in the header area.
Using the Assets panel, insert the images header-collage-left.png and header-collage-right.png. These images will be floated, so you can just place them side by side. Name the images in the Alt field of the Property inspector. For the header-collage-left.png image, I recommend alternative text of “Our team includes: AI the Alien, Robbie, The Twins, Vladimir, and Ronni.” For the title, I recommend the text “The first half of our team.” You decide on appropriate alternative text and title for the header-collage-right.png image.
Select header-collage-left.png, and assign the float-left class to the image in the Property inspector. The image snaps into place on the left side of the header.
Select header-collage-right.png, and assign the float-right class to the image.
This time the image isn’t positioned properly; it falls outside the header. That’s not good, but more than likely the issue has to do with the clear: both property that is assigned to this rule. Since you don’t want to change the existing float-right class that’s in use in other parts of the design, you need a new rule for this image.
Right-click the .float-right rule in the Selectors area of the CSS Designer panel. Select Duplicate.
Change the name of the rule to .float-right-header.
In the Layout category of the CSS Designer, change the clear value for this rule from clear: both to clear: right. This change allows the image to properly float into place within the header.
Select header-collage-right.png, and assign the float-right-header class to the image. The image snaps into place.
Adding Links in the Header
It’s common—even expected—for a visitor to a website to be able to click the header at the top of the page and go to the site’s home page. You’ll add links to the two images and to the company name to make this possible. Later, when this prototype is converted into a template, the links will be in place and ready to go.
Click the header-collage-left.png image. In the Property inspector Link field, enter the filename of the home page: index.html.
Click the header-collage-right.png image. Also link this image to the index.html home page.
Select the name of the company in the center of the header area on the page. Also link the selected text to the index.html home page.
Removing Default Styles from Text Links
Text links by default have always been shown in blue, underlined text. This obviously won’t work for the design the client is after, so you’ll remove those properties from the <a> tag with a new CSS styling rule.
Place your cursor anywhere within the company name in the header.
Click the + in the Selectors area of the CSS Designer panel. Press the Up Arrow key once so that the new selector name is set as #header-name a. Press Enter/Return to accept the name.
In the Text category, set the text color to black and text-decoration to none. Looking at the CSS you just wrote, you should see the following code block:
#header-name a { color: #000000; text-decoration: none; }
Styling the Company Name with Fonts
The client asked for some “weird- or scary-looking” text for the company name. To get text that goes beyond the common fonts that are standard across browsers, you can use Adobe Edge Web Fonts, which is a free service, to find more interesting fonts to work with. This is a library of fonts that is served by Adobe Typekit and can be freely used on your website. Remember that fonts are covered by copyrights. Only use fonts that you are certain can be freely used on your website. By relying on fonts served from Adobe Edge Web Fonts, you don’t have to worry about this issue.
The company name in this document already has a rule applied to which you can easily add additional properties and values to make the name “weird or scary.”
Select the header-name rule in the Selectors area of the CSS Designer panel.
Set the text color to black (#000000).
Click inside the font-family field. From the menu that appears, select Manage Fonts.
Adobe Edge Fonts are free font packages that will be loaded into the page with a little snippet of JavaScript that is inserted into the <head> of the document. The Manage Fonts dialog you see in Figure 4.36 allows you to choose one of these fonts to use in your page.
Figure 4.36 Adobe Edge Fonts can be selected from this window and loaded into a font library on your computer.
Select the font Amatic-sc or try out another font that you like. Click Done to load the font into your library.
Once you load a font into your library, you can assign the font as a property.
Click inside the font-family field, and select the Amatic-sc font (or whichever font you loaded) for this rule.
Switch to Live view to see the appearance of the text. Adobe Edge Web fonts display properly only in Live view.
Return to Design view. Use the font-size and font-weight settings for this rule to make the text appear the way you like. I recommend trying to keep all text on one line, but this will depend on your screen resolution. For this example, your styling rule might appear as follows:
#header-name { margin-top: 0px; color: #000000; font-family: amatic-sc; font-weight: 700; font-size: 36px; }
)
Styling the Company Tagline
One more job to take care of. You need to style and position the tagline that falls below the company name. Here’s the styling rule that was created to get this done in the video demonstration:
#header-tagline {
margin-bottom: 0px;
color: #1B1B1B;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro",
→"DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-style: italic;
font-size: 14px;
margin-top: -36px;
}
Can you figure out where to apply these settings in the CSS Designer panel?
In this project you’ve taken another step in becoming proficient with Dreamweaver by diving in on your own to insert images and links and apply styling to the header of the page. Another job well done! Do you feel your confidence rising?