|
How to add a menu
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: Well installing the menu will be easy, first thing is to find in which cell is located the menu. Have a look at the image below, where your can see where I decided to put the menu. |
 |
| Step 2: Go in the folder where all your layout images are saved and find out which image is your menu image. Below you will see the content of my image folder and I have circle in red my menu image. What's important here is to remember the name of the image, mine is called tut_05. |
 |
| Step 3: Let's open your index page in notepad. Now I won't explain what is a cell and the codes since I have already done it in the part 1 of this tutorial (installing the Iframe). Find the cell that contains the menu image. In my case I have to find the one having the tut_05 image. |
| Step 4: What's important here is to note the width and the height of the image, mine is 350x49. To be able to add the menu in the cell we will have to remove what's in it right? But if we remove the image we will get a ugly whole in our layout with nothing in it. The solution to fix this is to replace our image with a background for the cell. To do this you will add a background attribute in the opening td tag. Now let's remove the image and let's see what happend Clickie. |
| Step 5: That's ugly is in it? The Iframe as moved down and all the layout is screwed up! First step is to set a width and a height to the cell. The width and the height are those you wrote down earlier in this tutorial. So add them like I just done in the example below and see what I got now: Clickie. |
| Step 6: Well at least everything is back to is original place but the cell as no background! To fix this add the background like in the example below. Put the code in the td tag. So see what I have now: Clickie. (the path and the image name should be the same then the image that was in the cell previously). |
| Step 7: Everything is back to normal now! Basicly we removed the content of the cell to be able to add our menu. Let's add the menu now. Between the 2 td tag add a link to your home page like in my example below. See what we got now: Clickie. Notice the target="frame" in the link, this is the name of my frame. If you want your page to open in the frame and not in a new page, don't forget to add it! |
| Step 8: Add as much links as you need on your website. Of course the font and link color are not matching the layout! If you want to fix this, I invite you to check out this site, it will help you create a stylesheet (CSS) to customize your layout!. Also note that if you have a link that you want to open in a new window you will have to change the target="frame" to target="_blank". |
|
Congratulations, you now have created your menu! I invite you to follow the Part 4 of this
tutorial to learn how to add some more pages to your website. Any questions? Click here |