Join Steve Harris for an in-depth discussion in this video Creating the header and the footer (Updated), part of Designing a Portfolio Website with Muse (2012).
The header area of your Muse site is one of the most important features of your website. It needs to be both interesting, an simple for users to understand. The photo area of your site is also important. It's a great place to include contact information, or social media links. Let's get started building the header an footer areas of our Red 30 website. To start let's have a look at the site changes or site property changes I've made in the news file. If we go to file and site properties, you can see that I've left our page width and minimum height with the default values.
I made sure that sticky footer was turned off. We're going to have enough content on each page that I'm not worried about footer sitting at the bottom of the browser window. Lastly, I've made sure that we had 12 columns. This'll just help me kind of split up content, and make sure everything is aligned properly. That's it. Let's click OK. Next, I dragged our header guide down so that we had a little bit more space at the top of the page. So that we could place all these elements up above that header guide. I also dragged the bottom of Browser Guide down a little bit, just to create a little bit of padding on the bottom of the page so that I could add some text below into a footer.
Now let's drop back to our Plan View and go into our Blank Master Slide. We need to make sure to include all of our header elements on our Master Page as we want them to be consistent through all pages on the website. Just going to zoom out a little bit here. Next what we're going to do is draw the wooden background for our header. If I click the rectangle tool and draw large rectangle at the top of my site. You can see that when I hit the right edge of the site I get this red line appearing, and it kind of snaps to the right edge.
That means that this background is going to repeat throughout the whole website. And I just want to make sure that it also has snapped to the left side, there. So, now any graphic I place in this box is going to repeat across the header no matter what the browser resolution is. I'll turn off the stroke and I'm going to change the fill. And I'll set the fill as our wood image. Now this image is just a stock photo that I downloaded. I didn't even really modify it ahead of time because I knew it would tile well because it's a pretty consitent grain throughout.
Let's just change hte fitting to tile and there you go. We've got a nice wood, header background. Next thing I'm going to do is drop in our logo. I've prepared the logo ahead of time in Photoshop. So let's go file, place and click our Logo_Red30.png. When we place this into our site, we can see that it floats nicely above the wood background. This is because I saved the logo file with transparency. Next what we're going to do is draw an orange bar underneath this wood. I'd like to just cap it off on the bottom so it has something to kind of sit on.
First I'll take the rectangle tool and I'll draw a box below the header graphic. Once I've got my rectangle in place I'm going to fill it with the orange color I've used in my logo. If I click the Fill drop down, unfortunately the fill box covers my logo, so I'm going to temporarily move the logo out of the way... Now, I'm going to make sure to click off the logo because I don't want to fill that with the orange color. I'm going to click back on the rectangle. First, I'm going to remove the stroke, and next I'll click the fill drop down, choose the sample tool, and select the orange color.
There you go. You can see it's filled into the rectangular box that I've placed below the header. Let's move our logo back up into place, and finally we'll add our tag line. If we select our text tool and draw a text box in the top right-hand corner of the site, we can type in our tag line, which is 'A Creative Consultancy'. Now let's just select this text, change our font, which is lobster Change the color to white, and scale the text a little bit bigger. Lastly, I'm just going to make sure that the tag line is aligned to the right.
I want to make sure it always sits on the right hand side of the site. That looks good. In order to add footer elements to our site, we need to make sure that a footer options box is checked. So if we click on our text tool and draw a text box. I'm just going to copy and paste in some of the text we used on our original design. This copyright red 30 creative design will work well. Let's copy this, and paste it into our new site. Now that we have that in the site, we need to make sure that the footer box is checked. And this will allow us to place this in the footer without having it actually scroll the page vertically longer. So when we click this, we'll move it down to the bottom of the site. And we can arrange it as we see fit.
That looks good. By using full width elements containing unique tiled graphics and textures we've built a really strong header for our website. Next we'll begin adding our navigation system by using the automatic navigation widget in Muse. You can finish building your footer by including any text or social media icons you'd like to see.
- Planning the site with a wireframe
- Creating master pages
- Building and placing graphics from Photoshop, Illustrator, or InDesign
- Creating buttons and button states
- Adding a header, footer, and navigation widget
- Creating a slideshow
- Setting up a contact form
- Publishing to a third-party hosting solution
- Tracking site traffic with Google Analytics
Skill Level Intermediate
Q: This course was updated on 7/24/2013. What changed?
A: We added new movies on mobile and tablet layouts, the new sticky footer, working with a content management system (CMS), the Layers panel, and the Scroll Motion effect, which allows for parallax scrolling.