|
Last week we got the ideas that we sketched out
on paper into the world of pixels. In other words, we made our
pages in Photoshop. At this point, I am assuming that you are
really happy with what you have (if that's possible) and we can
now move on to step 3.
Step 3:
Now we want to really start planning how we are going to lay
this page out in HTML or in your WYSIWYG. The site I am showing
you is template based for the most part. What I mean is that I
put the pages together, so that they could be and are useful for
every page of my site. This isn't always possible, or necessary,
but for simplicity we will assume that this is how we are going
to set our site up. If you did not set your site up this way, no
big deal, you will just have to do this step for every page.
Look in the upper right hand corner of my page
at
http://www.jlswebsource.com and you will see an image. This
is the only image that changes from page to page (other than
images in the actual content). I set this up by making several
images the same size and putting each of them on a layer. Then
when I wanted to change the image I just turned off all the
layers I didn't want and left the one that I did. Let's not get
ahead of ourselves though. First things first...
We need to use some guides in order to plan out
our site. Since web pages use tables to line up complex layouts,
we want to make our guides reflect this. Plan out how you are
going to do this in advance. How you ask? Well, I use that paper
stuff that comes from trees. But I use graph paper for this
step. What I do, is I make all the guides on the page in
Photoshop. At the same time I am drawing out the layout on a
piece of graph paper, thinking in terms of tables, nested tables
etc... I usually do this about 3 times until I get it just
right. It doesn't have to be pretty, just make it an outline of
your page and what graphics go where. The reason you want to do
this is that not only does it make coding pages about a million
times faster, but it also let's you see what areas you can
eliminate as graphics and replace with background colors in HTML
code. Take a look at the next few pics.
Image 1:
This is a screen shot of my navigation. You can see that there
are a bunch of guides running through it. I am going to break
this up in to pieces so that I can make a JavaScript rollover
for each "button" I have include another layer in Photoshop of
each rollover state, so I can easily switch back and forth
later. The entire navigation will be part of a single table
cell, that has another table nested inside. Each "button" will
occupy its own cell in this table.
Image 2:
This is a shot of the left side of the image/ web page. Most of
this is just blank space that is a hex color of #003366. I will
use HTML to make this portion. It will be individual cells in
the page table. The uppermost part is part of the header
portion. I included it so you could see where I was on the page.
Image 3:
Here is a shot of the header and that image I was talking about
at the beginning of the article. I am going to break this into
two pieces and make two table cells to hold them. When I go from
one page to the next, only the right image will need to be
loaded. The main header portion will be cached already.
Bandwidth is vital!
Ok, I think you can see where I am going. Play around with this
and do you best to make it work well. Next week we are going to
start measuring sections of the page, and we will also start
talking about slicing the image up. You may want to play with
your slice tools in both Photoshop and Image Ready this week to
prepare yourself. Also make yourself familiar with the measuring
tool and the Info palette. |