Layout Making for Slackers (Part Two: Frontpage)
Requirments: Paint Shop Pro (7 is the version used here)
Microsoft Frontpage
I am sure this could be adapted to photoshop and other types of imageslicers and
other WYSIWYG web editors. (What You See Is What You Get)
Step One:
Open the page you created in paint shop pro in frontpage.
1.1 
Figure 1.1 Shows the index2.html page we created opened in frontpage.
Step Two: Create Your Inline Frame
Here, order isn't really important...just remember that you do all steps.
2.1
2.2
2.3
2.4
Figure 2.1: Click on the table cell where your
frame will go so the black squares are along the edges. Then goto Insert>>Inline
Frame. Stretch the new frame to the edges as far as you can without other cells
breaking their format (ie when you stretch too far, you'll see a line spacing
inbetween slices.)
Figure 2.2 Now, goto the opposite edge where the scroll bar is and right click
on the edge of the frame and click inline frame properties in the menu. If the
option isn't there then you aren't clicking on the frame.
Figure 2.3 You will get a properties window. Here you can rename the frame, I
always rename mine 'main'. Also it is important here that you click the check
off the box that is beside show border. The frame borders are ugly...we don't
want them. hehe.
Figure 2.4 You can either make a new page for the frame or use an existing one.
I always make a new one.
Step Three
New page properties
3.1
3.2
3.3
3.4
3.5
3.6
Figure 3.1 Open the new page in a new window. Right click on the white that is
in frame and choose the command.
Figure 3.2 In the new window, right click to access the page properties
Figure 3.3 Change the page title
Figure 3.4 Background properties. You can use a picture or a solid color -shrug-
Figure 3.5 Type a little on the page to establish font attributes. You will want
to use this page to create all your other pages, simply because you don't have
to worry about having to redo a background and fonts and stuff.
Figure 3.6 Name the file, remembering that the inline frame needs to point to
this page first.
Step Four
Hyperlinking Slices
4.1
4.2
4.3
Figure 4.1 Right click on the cell
that you want to hyperlink.
Figure 4.2 Type in the address that you want the link to point to. In this case,
home should point to main.html. Remember, you don't have to type out the entire
www.domain.com/main.html. As long
as the page is in the upmost folder it will go right to it, or if the page is in
a folder/main.html, that is all you have to type. The same can go for doing the
image sources. This is always easiest cause if you decide to change hosts, you
don't have to go in and change all your links.
Figure 4.3 Target where the link goes. In this case, we want it to goto the main
frame. And its easiest if you go ahead and make the main your page default, so
that after you do the first link, you don't have to worry about doing the
target. Unless of course the link needs to open in a new window, then you need
to change the target from the default.
Extra Things
Well you are pretty much home free, but there are a few things you need to look
at to make it better looking ^^
x.1
x.2
Figure x.1 See the white space around the frame borders? Thats icky. We don't
want that. So I always make the cell the same color or background image as I'm
using on the frame itself. So right click on the white space and click cell
properties.
Figure x.2 I want to use a background picture.
Centering the entire layout
I always like to center the layout, but you can't hightlight the entre
layout in WYSIWYG veiw. So I need to goto the html view (bottom right hand
corner, near the start button) and once in this veiw, type < center > beside the
top body tag and < / center > before the < / body > tag at the bottom, leave out
the spaces though.
Spacing in Frontpage
When you press the enter key in frontpage, its going to double space. To
space to the next line, you need to hold down shift while you hit the enter key.
The End I think. If there is anything that you are unsure of, feel free to send
me an email and I'll try to help you out as best I can.
kitty.popstar@gmail.com