Things You'll Need:
- GIMP (free download for Windows, OS X, Linux)
- Notepad (or other text editor)
- HTML skills (see our other articles for help with the basics)
-
Step 1
Open GIMP by clicking on the icon once you have downloaded and installed the program from the website (see Resources). Select "File" and "New" before clicking "Template" drop down menu. Select the From Template box and from the drop-down menu that appears, click the "800x600" pixel option. Other options are available for you to try in the future, but this is good for general use in a practice web design session. Click "OK."
-
Step 2
Press "Crtl" and "b" at the same time on your keyboard if a window labeled "Toolbox" in the top margin does not pop up. Two-fifths of the way down the window are two squares that overlap. The one in the front is the foreground color, the other is the background color. Click on each box separately and select the color from the "Change Color" window that will pop up. In the Change Color Window, click your mouse on the large square that has the colors fading from one to another. Hue, saturation, red, green and blue levels can be adjusted with the sliding bars at the right once you have your selection. Click "OK" to keep the selection and close this window. Change the other (background) color by clicking the box behind the one you clicked earlier on the Toolbox, two-fifths of the way down.
-
Step 3
Click on the "Blend Tool" icon on the toolbox. If unsure which icon this is, hover over the icons with your mouse to find the correct icon. It should look like a box that has gray fade to white. The non-toolbox window we will refer to as the "canvas" even though it probably says "Untitled" and "800x600" somewhere in its top margin. Click on the canvas at the top left hand corner and drag the mouse to the bottom right of the screen to fill it with the selected color in a gradient. If no gradient is desired, simply select the "Bucket Fill Tool" and click on the canvas to fill with a solid color.
-
Step 4
Click File at the top of the canvas and, from the drop down menu, select New. When the "Create a New Image" window pops up, change the values for "Width" and "Height" so they are reduced by 20 pixels each to 780 pixels wide and 580 pixels high. Select "Edit" and then "Copy" from the drop down menu. Switch to the first canvas and select "Edit" and then "Paste" to paste the smaller image on the original. It will auto-center when pasted. Go back to the new (blank) canvas and close it. Click "File" and from the drop down menu, select "Save As." Make up a name for your work and save it.
-
Step 5
The web page is done unless you wish to slice the image to use it in HTML (see the next section).
-
Step 1
Create the top (header) of the web page. Click the "Rectangle Select Tool" in the Tool Box. Click the canvas in the extreme top left corner and drag to select the top 20 pixels in height and the entire width (800 pixels). You can tell how many pixels you have selected in the rectangle by looking at the bottom of the canvas window to see the dimensions (in pixels) next to the word "Rectangle." Select "Image" and from the drop down menu, select "Crop to Selection." Select "Save As" and make up the name "top.jpeg" that reflects that the file is the top of your web page. Close the page.
-
Step 2
Create the middle of the web page. Open the file in GIMP that you named and saved in step four. Choose the "Rectangle Select Tool" again and select an area in the middle section of the canvas that spans the entire width but is only one pixel high. Crop to this selection and save the file under the name "middle.jpeg" that reflects that the file is the pattern for the body of the web page.
-
Step 3
Create the bottom of the web page the same way you did the top of the web page by selecting a 20 pixel high box that spans the width of the screen at the very bottom of the page. Save this file as "bottom.jpeg."
-
Step 4
Make the web page the same width as your image in GIMP (a width of 800 pixels). Type in <body background="middle.jpeg"> in the HTML after you open the <content> section of the page.
-
Step 5
At the top, right after you open the body tag, add <img src="top.jpeg" Width="600" height="800"> to your HTML code. Do the same thing lower in the code, just before you add the </body> with the same code as entered at the top of the page except that it reads <img src="bottom.jpeg" Width="600" height="800"> in the code.
-
Step 6
Write the rest of the code as you normally would in HTML for your text and graphics.
