Join Sue Jenkins for an in-depth discussion in this video Styling the footer, part of Designing Web Sites from Photoshop to Dreamweaver.
For our footer, our main concern is to keep the content organized and easy for visitors to access. Here we have three important sections of information that need to be separated while still being visually in sync with the rest of the layout. Now, we've already added headers to each of the three sections, and that's a visually unifying effect, but there's still a little bit of pizzazz missing. So what we'll do is we'll add some little yellow bullets to the Have a Look Around section and then we'll drop in the actual logo icons for the social media files listed under Follow Us.
We can use the Ellipse tool to create the shapes, and if you want to create a precisely sized shape here--I'm zooming in--you can use the Info panel up. I would recommend a 10 pixel in diameter. I'm holding down my Shift key to constrain the shape to make sure it's exactly 10 pixels. And then I can hold down my Alt or Option key and drag a copy off, and I'll do that again, so I have three bullets. If I want to make sure that they are distributed, I can click and then Shift+click to distribute them evenly, and they were.
Then I can have all three selected and drag a copy off like I'd just done. Try to make sure that they're roughly the same distance from the type. We'll zoom back outm like so. So that already looks so much better. It's like a clear idea. We know what those are. Those are links. We'll go and click on them. And then to drop in our social media icons, we'll do File > Place. All the graphics are there for you in the appropriate exercise folder. So I created a little icon of a cupcake, and that would link people back to the web site. And because we're dropping it in, it becomes a Smart Object when you place a file.
So just hit Enter or Return to accept it and then drag it into place. We'll repeat the process for each of the remaining icons. And the order is totally up to you here. I think I did Facebook and then Twitter and then the RSS. So let's place that one. Hitting Enter or Return to accept the placement. And we've got one more to go, like so. Now that type layer behind there, I do not need anymore, so I'll select it and hide that or I can throw it away. And then my icons themselves, I would like to have them evenly spaced, properly aligned. Maybe align them by their tops and then make sure that their distributed evenly, horizontally along their left edges, like so.
And then I can eyeball it or I can even drag a guide in to see if the tops are in alignment with the type, and they are. So that looks really good. As you can see, when you take the right colors, the right fonts, and photographs and graphics and organize them in a logical way, your whole web site can take shape. Paying attention to the details like only using rounded-edge shapes instead of hard edge-shapes or showing how the navigation bar will look when visitors interact with it, can really help you pull everything you designed together in a meaningful and visually interesting way.
- 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