Tutorial by Deborah Miller of Theme In Design

FrontPage is a great HTML editor. With some knowledge of  FrontPage and a good graphics program you can create some nice page layouts in FrontPage. 

For this tutorial I'm going to show you how to slice the image below and put it into a table in FrontPage for creating a single web page or web template.

The image below was made in Paint Shop Pro 6. I used tubes and my imagination to create the image. The image does not mean anything special. I was just playing and thought it was neat, plus the colors of blue and  purple in various shades are some of my favorite colors.

 

 

Paint Shop Pro

The image above has been sliced into 6 sections and each piece inserted into a table cell. 
The table I made in FrontPage to hold this image was "2 Rows, 3 Columns".

Open Paint Shop Pro and create your image. The image above is 600x203. I started with a blank image. I then used the "Flood Fill" tool and filled the image with a background. I then added tubes to create my graphic. Since the image is 600 pixels wide, it would be a large graphic to put on a web page and could be slow to load. So I sliced it up into 6 sections. You can do more, but 6 makes some nice smaller images of the original one.

The hard part in slicing up an image is getting all the edges even, so they will line up perfect when you  insert then into your table. With some help from the "Selection" tool in Paint Shop Pro and a calculator this can be done fairly easy.

With the image you created in front of you, double click on the selection tool in Paint Shop Pro.

You will see a box come up that looks like the one below.

To create six smaller images from your original image, you will need to divide 600 times 3. This gives you a number of 200.  With this in mind, we now can start making our first image slice.

The far "Left' of your image should be "0" because that is the outer edge. The "Right" side should be set at 200, because this is the number you came up with when you divided by 3. The "Top" should be set to "0" because this is the top left corner. The "Bottom" should be set at 100, this is half of 200. Now click ok. you will see some dotted lines on your image. Go to "Edit -Copy" and then paste as a New Image.

Now optimize and save this image in a folder on your computer with a simple name. I named my first selection "Fantasy1".

Now lets create your second image. Your first image had a right edged of 200, to make things even, we need to make the "Left" side of the image 200. Now your "Right" side should be 400.
Why, because 200+200=400 The top should still stay at "0" and the "Bottom" should stay at "100". These numbers are still your outer edges. Now click OK, and go to "Edit -Copy- Paste" and save.
 I saved this one as "Fantasy2".

For your third image on the top, the left should be "400" and the far right should be 600. The 600 represents the far right edge of your original image. Now click OK, and go to "Edit -Copy- Paste" and save. I saved this one as "Fantasy3". We now have 3 smaller images for the top 3 table cells on your web page in FrontPage.