Chapter 10 - Creating A Templete (Graphics)
Creating A Template
Now it is time to actually start building your web page. During the next few chapters, I will be using my web page, ZimmerTech, as an example. I will be using Paint Shop Pro (PSP) 7, a text editor (AceHTML), AceFTP, Putty, and Mozilla (Netscape). Before you start building your site on the computer, I recommend designing it on paper first. Here is what my site looked like on paper.
When you draw it on paper, use pencil, and always jot down ideas as you go. Also, figure out how big each object will be - it will make it a lot easier later on. Now open up Paint Shop Pro (PSP).
There are a few ways you can start building your web page. First, you could layout the whole page in PSP, then use the Image Slicer to cut it up. The second option is to create a bunch of seperate images, then manually place them in the page. I will show you how to do the first method. If you do not have Paint Shop Pro (PSP), you can use Photoshop and Image Ready to do the same thing. Now create a new canvas, 700 by 700 pixels. You can make it a different size, but I recommend this because it makes the page viewable in all resolutions. Now set your grids to 100 pixels. Your canvas should now look like this.
Now you need to set guides to show where all of your images should be. Under the View menu, make sure that “grid”, “guides”, and “rulers” is selected. Now click just above the ruler, when the cursor turns to a crosshair. Still holding the mouse button, drag down to set your guide. This is what the cursor should look like.
If you cannot see the guides, go to View | Change Grid and Guide Properties, and then at the bottom, set the color of the guides, and check the box marked “set color of all current guides”. Use the ruler to make sure everything is the correct size. If you need to move the guides after you placed them, click on the tabs along the ruler that look like this (drag them off the canvas to delete).
Here is what my screen looks like now. I have finished adding all of my guides, and I know where I need to put each object. If you like, you can add text boxes in each area to describe what is going to be there.
Now you need to start adding things to the canvas. Make sure to put each one on a new layer, so if you don’t like it, you can easily delete each part at a time. Leave the blank space blank, we will get rid of it later. Here is what it now looks like.
The next step is to use PSP’s Image Slicer to cut up the image, and output the HTML code. Go to File | Export | Image Slicer. Now use the slicer tool to cut up the image. Click and drag up or sideways to create a line. Keep slicing until every object has its own cell. Use the x and y coordinates to make each cell precise. This is what mine looks like.
Next, click on each of the buttons using the arrow, and add links to each document. Also, click on Optimize Cell to optimize each cell. Make sure to save your settings (Save Settings)in case you mess up. Now click save as, and enter what you want the name of your HTML file to be. Click close, and you are done! The next step is to add content to your layout.
< Previous Page | Index | Next Page > |