it looks like
PrincessCrafts.com Computer Scrapbook
pages make wonderful web pages. It's easy, fun and makes your
personal web site look like no one else's. This is a very
short tutorial, but will open your eyes to a whole new world of
computer scrapbooking. But, before we get started...
just want to tell you that you don't have to be a web or computer genius
to use our pages for the web. If you can crop photo's and use a
basic word processor, we can show you how you can put your scrapbook
pages on the web. If even that sounds like too much, when you
get to the end, we'll tell you how we can help make it even
easier. Read and see the special bonus at the end.
Step 1: Choose your pictures
Collect the photos that you wish to show on the
internet. If they're already digital, you're ready to
go. If not, then you will need to scan them in or have someone
do it for you. Just remember that these are for viewing on the
web and not for printing, so small file size means faster loading.
We recommend that you not use anything larger than 300x400 pixels
or 4x5 inches. This will keep your pictures at a very viewable
size without making the files so large that they take forever to
load with a dial-up modem.
JPG or GIF format will work better than BMPs as they are
compressed and make even smaller files. You do drop some
quality this way, but that's not very noticeable on a computer
Step 2: Pick the page you want to make into a
We searched through the extensive PrincessCrafts.com library
of pages and picked one that we thought would go with the photo's we
wanted to place on the internet. We chose this New Years page
(at the right) since the photo's were taken around that time last
With the selection available, we could have done just about
Step 3: Crop the parts
the GIF file for your chosen page and crop out the Header (the top
graphical portion of the page),
Background (the background pattern) and Footer (the bottom graphic), saving each one as it's own file. Why
did we not use the whole page? SPEED! Quite simply, by doing this, we make smaller
and make it faster for the page to load.
Also, since any image used
as a background in a web page gets repeated over and over again until the
page is filled (no matter how long or short it is), we only needed enough
of the page background to form a pattern through the page. The other two parts,
the header and footer, will be used to top the page and close the bottom.
Just remember that any program that you use to
crop digital photo's on will work for this. The original page after
all is a digital photo too.
Be sure and save the pieces as a new file name or you will loose the
original. Use "File Save As..." when you save the
three separate pieces.
Don't worry if you don't fully understand it
all now, we'll show you more in later steps that should clear it all up.
So, let's continue.
|Step 4: Layout the Web Page
We happen to use Microsoft FrontPage to create most of
our web pages, but any "What You See Is What You Get" (WYSIWYG) web program will
work as long as it will form imbedded tables. Don't know what that
is? No problem, we'll explain it more as we go. And, if you
don't have a WYSIWYG program, we'll give you a template that you can edit
in a text editor like NotePad at the end of the tutorial. So, don't
fret the small stuff yet. We'll get you through it, don't worry.
Now, visualize how you want
the page to look (or actually print the original page and place the
photo's on it). The page we chose has a graphic in the upper left
corner, an empty pattern down the page and a banner at the bottom.
This left us with lots of possibilities. We chose to fill the upper
right (next to the graphic) with a framed photo and caption, then zig-zag
the photo's and text down the page (could have been as many photo's as we
wanted) and of course finish with the footer graphic. Very simple
and very easy to create and view on the web! You can do things as
simply or as complex as you wish. It's your page. The purpose
here is to teach the technique and let your creativity apply it to your
|Step 5: Create
the Web Page Scrapbook
If you are creating the page from scratch, here's a couple
of things to consider. First of all, the header, footer and
background you created in the beginning are of finite or set sizes.
When you set up the page properties, specify a set size for the page
that matches the graphics. For instance, our footer properties
showed it to be 758 pixels wide. So, our page is set to a max size of 758
pixels. You must remember that while the background is repeated to
fill in whatever size you choose, the header and footer have limits to how much page
they can cover before becoming blocky or unclear.
Don't use the percentage
function. This allows your page to adjust to the different screen
sizes of those that view your page. Everything might look great at
1024x768, but bigger or smaller may totally distort your layout and
graphics. Since this is a scrapbook page, layout is
everything! Specify the page size in pixels and you'll always know
what it looks like. We recommend between 600 and 768 pixels in page
width. That gives us two advantages. One, it's viewable in even
small screen resolutions and two, when printed, it fits on a single
standard 8 1/2" page width.
The last thing to do on the
page itself is to identify the background image. As Ronco says,
"just set it and forget it." You should now have a page
filled with only the background image. Again, if you don't know
where to set this, there's no problem. While we can't cover all the
programs out there, we can show you where in the HTML code (same on every
page) to specify the information. Even if you are using a text
editor. Just see our instructions text link at the end.
||Step 6: Insert
the tables, art and text
Tables are a must if you want your text
to fill in beside each photo or
artwork. Other wise, any text more than the width left will
wrap around underneath the graphic. To make it work, first
insert a table that spans the entire width of the page and a new row
for each graphic or photo you will be talking about. A couple
of extras don't hurt as you may want to have lots of text
spanning the entire page width in some places. You can always
remove the extras when you are done or leave them invisible at the
Now, in each row that will
contain a graphic or photo... insert another table that has 1 row and two
columns (this is an imbedded table, one inside another). Why not make the whole page one table with two
columns? Simple, if you do that, you will not be able to resize the
columns on each line (row) to fit the photo and leave the rest for text or
|Now it's just a matter of
moving down the page and inserting your text and photo's into the
table rows and columns. As an added bonus to our page, we
cropped and added some of our matching frames to the photo's.
We then just saved the finished framed photo's as another GIF image
and used them on the page.
As we went down the page, we sized each
column to fit the image and filled the corresponding side with a
large text to journal the image. This whole project took less
than an hour from start to finish. It could have taken a lot
less time if I had the page parts broken up before hand.
|Step 7: Add the footer
Last but not least, you will insert the footer graphic into the last
full size, single column row at the bottom. This will make a nice
closing to the page and finish it with a nice professional scrapped
look. Now all you have to do is upload the page to your site and let
everyone know it's there.
The Easy Way: Now, before we get to the
finished page, I'd like to talk to those of you that don't have or have
never used a WYSIWYG web page program. Not that they're hard or
really complicated, it's just that I know of a few people in my own life
that don't have the time or the inclination to learn and use a new
software tool. So it's for those that the next couple of paragraphs
So, what is the easiest way? Ready made templates that you just
add your own pictures to, upload to your site (get instructions for that
from your internet provider) and you're done. What am I talking
about? In this case, we (PrincessCrafts.com) are going to give you a
text file (usable in any webpage program or text editor), that's the
template, along with the graphics for the Header, Background and the
footer; so you can create your own great looking web scrapbook page.
Just download the Zip file link below and Unzip it to your hard
drive. The instructions for use are inside the "Readme.txt"
file inside the zip. We even identify what all the files are in the
template and their sizes so you can create your own custom versions if you
wish. As always, you're in charge with our help.
Here's the Zip file: PrincessCraft
The Finished Page: That's all everyone. The page is
done and everything you need to make your own page that looks just like
ours is in the file above. Want to see what the final page looks
like? Check it out HERE!
Until next time, happy scrappin' everyone!
This template features a one-column content area layout.