Join Jim Babbage for an in-depth discussion in this video Adding a master page and its subpages, part of Fireworks CS4: Rapid Prototyping.
In the last movie we built the basic structure for our wireframe. In this movie we are going to be converting that structure to a master page, creating some new pages based on the master page and making a couple of other additions to the master page as we go. So, you can work with the file you had worked with in the previous movie, if you had saved it or if you would like to start with our sample you can work with that one, we have got it on screen right now. Now, creating a master page actually is a pretty easy step. All we've got to do is go to our Pages panel and right-click or Ctrl+Click on the Mac and choose Set As Master Page and it's done.
Just like that, we have converted this into essentially a template for the rest of the design. Now, one of the things I might want to do with this is change the name. I am going to double-click inside Page 1 here and change this to Common. Now you will notice that the moniker "master page" stays with that page. You can't remove or delete that little component there. That's always going to be there to identify this as the master page. Now, creating our additional pages based on their structure, again, a pretty straightforward thing. All we've got to do is go down to the New Page icon down here and click five times and that gives us, well, I just expand my Master to and my Pages panel a little bit, Common page and 5 Pages all based on the original master page.
So, pretty straightforward process and they all look exactly the same. Each one of them we can customize and we will be doing that for great deal of these. But we are going to add in a couple more things into our master page before we go much further. I am going to switch back to this and if you open up and take a look at the finished wireframe, there were couple of other elements inside the header that aren't in our current wireframe and that was a little Shopping Cart icon and that button should become a member of the website. And also down at the bottom of our design, we have got this footer area, but there is nothing in it. So, we are going to be adding a couple of things in here. We are going to add them to the master page.
So, we are going to switch over to our Common Library and we are going to work with a couple of existing symbols in here. So, I am going to go to our 2D Objects and we are looking for here is the Shopping Cart. And I am just going to move through these guys. Look for my Shopping Cart icon. You'll see quite a few different little 2-dimensional symbols that we can work with and there is our Shopping Cart icon. It's 2DStyled_19, a very descriptive name, if I have ever heard one and we are going to bring this guy into our header area.
So, before I drag it over though, let's just double check and see where we are our the Layers panel. Currently, we are still in footer area for our Wireframe. So, we are going to lock that layer, we are going to reopen or unlock the header layer and just make sure we can see all of our stuff there. And now we are going to drag in that shopping cart. And then we just drag-and-drop and in it goes, just like that. Right away when you see this, the first thing you think of is e-commerce and shopping cart. So, it's perfect for our wireframe. So, there is that fellow dropped in and we can also rename that if we want.
Double-click in the Layers panel and just call it cart button, here we go. And the other element I want to add in here is that join button. Now again, Common Library gives us a lot of things to work with here. So, I am going to go back up and collapse down that 2D Objects and we are going to go and take a look. We have got a quite a few different form elements that we can pull from. So, I am going to go into my HTML form elements and what I am looking for really is just a button, something nice and simple there it is, Button(win) and then you also have a Mac version of the button as well.
So, you can pick whichever one you want, but for our purposes here, it's just to put something on there to indicate some interactivity and that Windows version of the button will be just fine. So, I will just drag that and pop it on the screen as well and there we go. I can line that up directly with a shopping cart and I think what I will do as well here is make sure I have got a fairly even amount of space between my button here and the edge of my header area. So, I will just reposition that, like so, maybe make it a little bit lower, there we go. Run it along the baseline of the text and again our Smart Guides are coming into play, so I can center things up quite nicely, there we are.
Okay, so now I have got my other two elements in place. One of the other things I want to do with this master page before I go any further is I want to establish the actual navigation that I am going to use for this wireframe. Right now these are all just graphics. They aren't really going to do anything for us and we have got several pages. None of them are really going to link to anything else. So, take a look over here in our Pages panel again,. I will just collapse down a few things and we have got Page 1, all the way down to Page 5. Not with particularly descriptive at the moment, so what we are going to do with these first is we are going to rename these.
So, we have a good idea of what the content is going to be. So, I am going to click on Page 1 and I am just going to call it about. And Page 2, I am going to call this products. Page 3 is going to be custom orders. I will just use custom for the time being. Page 4 is contact and Page 5 is recipes. So, now we have a good indication of what the content is going to be on these sub-pages once we start customizing them.
I will switch back over to the master page. Now, I am going to add in my interactivity. Now, the idea behind adding these elements into the master page to begin with is that they are going to be visible on every single page in the design. So, not only are the elements going to be visible but any interactive components that we put in here, hot spots or slices, will also become available for all the other pages. So, we are creating an interactive document. So, let's start with the About Us group here. I am just going to select it and I am going to right-click. You can Ctrl-click on the Mac and choose Insert Hotspot.
That will give me a hotspot for the particular button and as soon as I create a hotspot down in the Properties Inspector you will see I now have the option here to set up links. So, I am going to click on the link box and I am going to choose about.htm. Now I am picking this again, just a reminder about the way this list works, above the dividing line is a history of links that might have been selected previously. Down below are the actual links for this particular document. In order for the links to work, make sure you grab the links from the actual area below the divider line.
So, there is our first one and then I am going to repeat the process. Right-click, Insert Hotspot and this link is going to go to products. Right-click again on the next one, Insert Hotspot again and this one is going to go custom and we just keep repeating that process till we are done with all five buttons, here we go. So, now if I click on these guys, you can see that inside the Property Inspector the links change to match our pages. Now, the interactivity will work and we can preview but we are not going to really see much of a difference because we don't have any content on those.
There is nothing that's specific to those pages that I have incorporated yet. We are going to add in a couple of more hotspots as well here. I will grab the Shopping Cart, I am going to right click again, Insert Hotspot and also for our button as well, we will Insert Hotspot there. Now, we don't have pages for these yet, but we will get to those later on. All right, so we have got our header elements all in place, we are going to scroll down at the bottom here and in the footer I want to add in some common elements here as well. And again, this is an area where you might put contact information, we are going to add in a little bit of information in that sense and also links that will eventually become navigation links.
So, I am going to go over to my Layers panel and we will lock down the header and collapse it, so we can see my other elements. There is my footer. I am going to unlock that. Okay, we are going to add in some text. So, I am going to use the Type tool and I am going to set a value here of about 12 points for now and we will deselect the Bold option here and set the color to Black, here we go.
So, all we are going put in here is a little bit of copyright information, so Copyright Bliss No. 5. And I am still center-aligned on my text, so I am going to change that alignment option. I am going to grab my Pointer tool and just reposition my copyright about 10 pixels in, there we go and I am going to add in one other bit in here on the other side and that's going to be my main navigation as a sort of a sub-area here.
So, I am going to create a new text box and we are going to put in here, add a space, Products, Custom Orders, Contact Us and Recipes. Okay, so there is our main links that are there and just grab my Pointer tool, and I think they are still a bit large, so I am going to change my size for both of these footer elements.
I am going to Shift+Click to select both of these and make them about 11 pixels, there we go. And one other thing I will do in here is just to make these separate a bit better., I am just going to add in a pipe symbol. These are the vertical dividers, so we will break things up a little bit better. Remember this is just the wireframe, so these visual elements are probably going to change, but it just gives us a way to sort of see what's going on. Okay and I think I will add one more little bit with my footer.
So, I will go to my copyright, I'll press the Return key and I'll just type in Contact info, just so that I know what's going to be going into that place. Okay, so we have got all of our common elements for our master page in place, and if I take a look at my other pages you will see that those elements are right there. There is my footer information, header information up top. So, it has really simplified the process of managing these assets. In the next movie, we are going to look at using some other tools to customize the pages.
- Using screen-sharing applications for review and feedback on prototypes
- Emulating a Spry accordion panel with the Grid auto shape
- Storyboarding wireframes to make them more realistic
- Adding navigation and design variations to elicit comments
- Building multi-page mockups and adding interactivity
- Inserting rollover states in prototypes
- Using Flex skins in final mockup sets