Tip:
Highlight text to annotate it
X
In this video I'm going to show you how to use, to create a wireframe using Pencil. Pencil
is free and it works on both, Mac and PC, and it's a nice way to draw a quick sketch
of what your website should look like. And I'll typically do a quick sketch of it, at
least one of the top level, and one representative lower level page. I'm going to start by creating
a new page. I'm going to call it index. I usually call it what I'm going to call, and
I'm going to do it as a Web Page - long. 900 pixels long. And I'm going to hit apply. And
that gives me something that is about the size of my web page. Then I draw boxes on
my page to represent where my div tags are going to go. So I'm usually going to put a
box for he header. And usually, and you can do this up here on the top. We can get the
size up here. So we can type in 960 and 150 is OK. Sometimes I go a little narrower. And
we'll make it actually a little bit narrower. 130, that's about what I like for a header.
Now usually I like to actually set the lines on these to none, but the color I like to
make, like a light grey. So that that just shows me where my different divs are. And
I usually work from the back forward. So I'm going to put in, this is going to be a really
simple layout. I'm going to have a navigation box. This is going to represent where my navigation
would go. And again I'm going to set it to 0 and color to grey. And I might move it up
just a little bit. I'm using the, no it doesn't all work with the arrows. So I can use these
arrows up here to adjust slightly. and I'm leaving 2 pixels between them. It's a 165,
and we'll make it out an even 4. 50 and I think I'm good with that. OK, so now I'm going
to put in another box and this is going to be for my main content. I usually start by
dragging it out and then I can tweak it a little bit to get it positioned where I want.
And have it exactly the size that I want. And I'll usually go back and forth between
using the arrows and tweaking it here on the width. And again i would set the line to zero.
Set the color to light grey. And if i want to I keep going with the footer. I'm not going
to do that right now. But I could. I do want to put this one a little closer to the top.
And so that gives me basically where the div tags will be for my sites. So then I would
have a container represented by the outside, a header, an aside or nav bar, and a main
content. OK, so next I'm going to start building on top of this, and again wireframes should
be all grey scale. So I'll use labels to represent my text and I can change whatever font I want
to use. Usually I'm using something that's web friendly - a sans serif font. And I'll
make this fairly large. And we'll just say Meri's bouviers. You'll make yours on whatever
you'd like, so I'm saying I'm going to do a 5 page site. Now, your site for your final
project needs to be 5 pages and you should wireframe each of those pages. So I'm going
to put wherever my logo would go. It should be right here. I'm going to represent hyperlinks,
which would be here. If I knew what I wanted to call them, we could have history - Bouviers
I used to have, Eli. I probably want to lock that in place. I don't know if I can lock
it or not. I'd like to be able to. I don't think I can. But I can drag my
links in here. I've got Nessie, History, I could have pictures. and I want you to use
real names for your links because you're representing your site and this is where you're going to
build it off of this. And so you should have real navigation. So pictures and videos. So
that would represent my site. And so this would be my front page. So you may also want
to have a home link. Though typically this will also link to home. OK, so this would be my home
page. And so my home page would probably would want to have a big picture with some text
underneath it. And for text I typically just use lines to represent text. And the horizontal
line is nice because easy to line up, usually the left edge will align. Right edge is typically
not because it's representing a paragraph. And here we're just trying to get a feel of
what the page is going to look like, which is why we're representing everything. We don't
want to get into the actual pictures because they actually distract what you're looking
at for the design. So I'm not going to make you watch me do a full five-page site. But
you can see I've set up my initial page and then I can do a new page, actually I don't
want to do that. I can duplicate my page, give it a new title, so I would have Eli.
And so here, for Eli, I could re-arrange things a bit. I would probably have multiple pictures here. I might have them
in various places. I could adjust where my text was going to be. And on these interior
pages I would probably want to have bread crumbs. If it was a big site, I definitely
would. So we could just put in this Eli. And I can layout each page to represent what's
going to go on it. And this is important because typically what you would do is you would plan
out your pages like this and then you would have your customer sign off that they're happy
with it. So when you're done. You're going to end up with, and again you can duplicate
your pages because then we would have Nessie, History, and you can go in and change these.
And then you would change each page appropriately so that it had a slightly different layout.
But lots of components would stay the same and this center area here is what would change.
Now, to share this with me you want to make sure that you are frequently saving. And I'm
going to save this as web project. And I'm just going to drop this one on my desktop.
And you can hand that in or, what I would prefer is that you actually print everything,
I want all pages. But what I really want is to actually save this to pdf. OK, so here
what I want to do is save it to pdf. This is how I do it on a Mac, it's slightly different
on a PC. And we'll go ahead and save that. And then on my desktop, I should have my pdf.
There we go. And you'll see that it has multiple pages. And what I actually want you to do
is go ahead and upload this, or in this case I'm going to save mine into Dreamweaver. And
so I'm going to have to go, while I'm not in Dreamweaver I'm going to have to go to
my Documents, and into my website. So this is for web115. So this is project 14. And
I'm going to drag my web project pdf right into 14. Then I can link to it from the index
page in Dreamweaver. So I can open up 14. I will do it the correct way. We're going
to keep it real simple. I'm not going to put in all the information I want you to put in
here. "plan for final", body, and you'll notice if I just refresh it here, webproject.pdf,
then I can put in equals webproject.pdf. "Final Project Plan". And you should, that's really all you need
on this. That's just in case you go to the index page because when we. This is just in
case anybody ends up here. It's just sort of safety thing. I'm going to go ahead and
save and upload that. But for your index page, where you have your "Planning our final project
using pencil", instead of, that should be 14 not 15, that should be 14 webproject.pdf.
And I'll upload that. And if I go out and check meri, HTML & CSS, oh, it didn't upload.
You always got to test those. So, make sure we specifically upload that and then try this
again. And there we go. So this is how I want to see yours handed in. I'd like it uploaded
to your website. Put a link to it. Now, you notice that I did create an index page for
14, so that if I were to, or anybody was to just go to that folder, you just get a link
to it. So this is how you need to create your final project plan. And you should have at
least 5 pages and use as many of the things that you've learned in this class as actually
makes sense. At least try to use things from at least 10 different chapters. And I think
that should give you a good minimum place to start from.