Join Sue Jenkins for an in-depth discussion in this video Building and styling the footer, part of Designing Web Sites from Photoshop to Dreamweaver.
Looking again at the footer for our web mockup, we can see that the content at the bottom of the layout is divided into three columns of information. The best way for us to recreate this in our web site, in Dreamweaver, is to use div tags that are absolutely positioned relative to the containing div tag with the id of footer. Let's head over to Dreamweaver so we can create those styles. I've already taken the time to plug in all of the content that will go in our footer into the three div containers that are there at the bottom.
The footer nav, the contact, and the network divs will be absolutely positioned inside that parent container. We just need to now create the styles for them. We will start with the first one, the navigation. So I will select that here, footnav. We need it to be a specific width, and you can check your measurements inside your Photoshop layout. I want this one to float to the left of the other two, so we'll do a Clear and a Float: left.
For the Padding we will give it 10 pixels on the left, and its Position needs to be absolute. Let's click OK. We have the first one in place. For the second one, for the contact, select that here, we need to make sure that that's the appropriate size. In this case, it's 340 pixels. And then the Positioning, again, absolute. And its Left Position is relative to that first container, so we need to bump it over 360 pixels.
So now we have got two in place. Let's do that third one for the network. This network Box will be 190 pixels wide, its Position will be absolute, and its Left Position will be 750 pixels. Let's click OK. Now everything is in place, and we just have to add some styles. So I have added heading 1s above each of the little sections there.
We will start by creating a style for footer heading 1, the compound style. Now, I don't want this style to just before the footnav; I want this to span across all of the heading 1s in the entire footer, so I just modified the selector name. I would like them to display in Century Gothic. We will make it 14 pixels, with the Font-weight bold. I would like a specific Color, 7ac1b7. And I can apply this while I am working, to see how it's looking.
Let's do a Text-transform so everything is uppercase. And it's difficult to see on that purple background. We will get rid of that in just a second. Let's also modify the Margin, 0 all around, and then we will edit the Top and Bottom. The Top can be 5 pixels, the Bottom can also be 5 pixels, and click OK. So that parent container is our footer. I will go all the way up to find it and remove the background-color. So now those headings look good.
Let's also create a style for paragraph text in the footer. I am just going to change that here to a p, and we will 0 out the margins so that there isn't any extra spacing anywhere. That will take care of some formatting issues for us. Now, I do have these little images over here, and I would like to add a little bit of space between all of them. So I will create a general style for all linked images in the footwork in that section. That gives them a little bit of padding on the right.
How about 4 pixels? And then the last thing we can do is create some footer links. I've got links here, links here. Now, I would like these to be links for anywhere in the footer. I'll use a special selector type here, but I am going to modify it. After the a, I will put a period and then type in the name of the container. So this is for any link in the footer container. Here we can specify the color. We can turn that underline off, and we can set the Font-weight to normal. In case there was any bold applied anywhere else, that will strip it down.
I can Duplicate this, but instead of link, I can call this one visited. And I am just going to leave those attributes exactly the same, so they are identical, and then Duplicate again to create a hover state. And for this, make sure you select that before you modify it, I will change the color like so. Sometimes when you create links you have to hand-apply the style to them, so I'll double-click here. And in the class area just make sure that the style that you just created is selected. So all these look like they are good to go, but you may have to hand-apply those on your own at some point.
For instance, like this one, Class is None, if we want it to have the same styling, just hand-apply it like so. The building portion of our web site master page is nearly complete. To preview your progress so far, save your work, launch the page in a browser window, or click the Live View button at the top of the screen, so you can track your progress. And if you need to cross-check your work, take a look at the code in the file, in your Files panel called 6.buildfooter.html.
- Setting up the Photoshop and Dreamweaver workspaces
- Planning a site and defining site goals
- Mocking up the layout and navigation
- Deciding on fonts and colors
- Styling the header, main content, sidebar, and footer
- Optimizing web graphics
- Building page structure with divs
- Building menus
- Adding metadata and externalizing CSS
- Creating templates with editable regions
- Creating template-based pages and adding content
- Inserting form fields
- Adding SEO, metadata, and accessibility markup
- Testing, validating, and publishing projects