|
Centering and adding a background
To do this tutorial, you will need a Iframe layout previously sliced and notepad (notepad is provided with windows so everyone should have it). If you don't have a sliced layout, I invite you to check out one of my 3 slicing tutorials, one using Paintshop pro, another one using Photoshop and one using Serif Photoplus. Please note that this layout as an Iframe installed since it's the one I used to do the Iframe tutorial. |
| Step 1: The first step of this tutorial will be to add a background. Since we are coding a Iframe layout and that we don't want our pages that shows in the frame to have the same background of the index page, we will create a background image. This way if you want a pattern background you will be able to do it. So open up your paint program and create a new 20x20 image. Now open any sliced image of your layout that you see the background on it, in my case I will take this one: |
 |
| Step 2: With the dropper tool (can be called differently in other paint program) click on the background to get the same color. Flood fill you new 20x20 image with this color. Save the new image as bg.gif where you have all your layout images. Now open up your index page in notepad. Locate the first body tag. Depending wich program you have used to slice your layout you may have some coding in the tag. If so delete them. |
| Step 3: In the body tag you will add a background attribute like this: (the path of your image could be different, it depends where it's located in your files. Mine is in a folder called images. |
| Step 4: Open your index page in a browser, you should now have a background! See my example: Clickie. |
| Step 5: If you wish to have a pattern background, simply open all your layout images in your paint program. If you use Photoshop, simply delete the background and while saving it will be saved as a transparent gif automaticly. If you use Paintshop pro, replace the background with a color you don't have on your layout like this: |
 |
| Step 6: (psp users only) Click on file -> Export-> gift optimizer... In the new window that will pop up, make sure that the option area that match this color is ticked and that the color is the same then the one you have choose to replace your background. Do this for all your images. Now you should have something like this instead of this |
 |
| Step 7: now to create your pattern background, choose yourself a pattern you like. I will use the pattern #056 from Xandorra's place. Open it in your paint program. you could export it as a brush but I prefer, working directly on it. I will recolor the white background of the pattern with the color I had as background previously. |
 |
| Step 8: Choose a darker shade and recolor the black part of the pattern with it. |
 |
| Step 9: Now the tricky part... When you will add your pattern bakcground in the body tag, it will be repeated horizontaly and verticaly... We don't know how it's going to be align! We will do a test, save your pattern as bg.gif in the same folder then your other layout images. Now insert the code in the body tag just like on step 3 if it's not already done. Click on your index page to see what happend... Here is mine: Clickie |
| Step 10: As you can see it's not align properly, we can see the pattern repeating itself... It's not really beautiful! We will fix that now. Return to your paint program and you will crop your image so we have only one pattern! It's a little difficult to explain but I will do my best. Check the top left corner, you see there 1/4 of a flower. As soon as you see the pattern repeating itself cut it, so you don't have the same pixel overlapping. See the pic below as a reference! (the second pic is the part I have cut that I have put together to show you how it aligns when bring together.) |
  |
| Step 11: Now save your new cropped background as bg.gif (it's ok to overwrite the old background). Now you should have a perfect pattern background that aligns perfectly like this: Clickie. |
| Step 12: That layout needs centering though, it looks odd in the top left corner of the page! Let's fix this now... You will have to insert a centering div code just after the opening body tag. You can change the value for the top padding to your liking. If you put a higher value your layout will be moved down from the top of the page. Play with the value untill you like the result. (see the capslock note to help you figure where to put the code). |
| Step 13: You will also have to put a closing div tag just before the closing body tag! (see the notes it capslock to help you locate where to put the code). You should now have a page looking like this: Clickie. |
|
Congratulations, you now have a centered layout and a beautiful background! I invite you to follow the Part 3 of this
tutorial to learn how to add a menu to your layout. Any questions? Click here |