|
Your site will need to support PHP.
First, we need to create a "header" page. To do this, create a new page (using notepad, dreamweaver...) and save it as "header.php". Right click the code in the textarea below, select all, copy and paste to the page.
See Screenshot 1
The words in CAPITAL letters you need to edit. As you can see from the code above, your content area will be the last div layer. The div layers placed at the bottom/last are the layers that will be shown on top of the other div layers, so that's why the background image and the layout is placed first.
The background image appears below your layout- this is where your site content goes. So you need to make sure your background image matches the layout and keep it the same width size as your layout. I would make my layout; crop the bottom bit off (same width as layout but tiny height size), and then save that as my background.
You might be able to see the width of the two parts, one if for my menu and the other larger one is where all my content would go.
Next, make a new page for your sidebar menu navigation. Save this either "menu.php" or "sidebar.php" or anything like that. For this page, just add all your main links and list it down. You don't need to add a title or a link to your CSS etc.- JUST your links. Like the example below:
<h1>Links</h1>
<a href="http://yoursite.com/link1.php">Link 1</a><br>
<a href="http://yoursite.com/link2.php">Link 2</a><br>
See Screenshot 2
Remember because we're using divs, you don't need to target areas like in Iframes. Also, you need to write the full URL to your other pages. When you've got all your links on that page, place this code: </div> at the bottom of the page:
Go back to the "header.php" page, and edit the areas in capital letters. Use your paint program to find out the width and positions.
Now make a "footer.php" page. This is optional. If you want "back", "home", "forward" links, this is where you would put them. It makes it easier instead of adding in all your pages. Yes, another PHP include. Copy the code below and edit the capital letters in them:
See Screenshot 3
Finally make your "index.php" page. This would be the first page. So you could use the page as the enter/splash page or go straight into your site. As we're using PHP includes, this would make editing your pages much easier, especially when changing your layout as you just have to edit your CSS page and "header.php" page. So, on your "index.php" page, add the code below:
See Screenshot 4
We're nearly there!
Now this is the hard long part. It's not hard, just very time consuming... if you have a site with lots of pages. You must rename all your pages to PHP if you haven't already. If you saved your pages, for example, leftmenu.htm, rename it to leftmenu.php. Also, you must add the PHP includes in all pages aswell! So add the codes below:
<? include("/home/USER/public_html/header.php"); ?> - Add this on the first line of all pages.
<? include("/home/USER/public_html/footer.php"); ?> - Add this on the last line of all pages. (optional)
You're done! If you have further questions, feel free to ask me via contact form, ask me page or email me. Please link me back. Thank you.
|
|
|
|
|
| |
|
|
 |
Copyright © to Jijy - sugaryparadise.net 06-08. All rights reserved.