|
The second free layout! Well, this example does give a slightly wrong impression, because layouts like this one with a fixed width should really only be used if your layout is heavily image-based and doesn't stretch well, and I didn't bother making a ton of images just for an example of a free layout, so I just slapped a banner on there and the rest is completely up to you (meaning that IF you're too lazy/practical to make some graphics for your site or can't for some reason, DO NOT use this layout as it's more annoying and loads slower than the other one).
How to edit this layout, for users with limited HTML knowledge
- By default, the layout will have borders around the menus and content, but not the header. You can take all borders off by taking the border:1px solid #000000; off td; replace the border:0px; on #header with border-bottom:0px; to add a border around the banner. All those border-direction:0px; are there to make the borders single. If you want them double, just remove those commands. Then, of course, you can move the border from td (which affects all table cells) to just the menus and/or content if you want.
- To put in background colors, type background-color:#FFFFFF; (change the color at will), and for background images, use background-image:url(filename of background image);. To add one background image to the whole thing, put the background image on #layout.
- Do not edit the overall width of the layout, since it's designed to fit into 800*600 resolution. If you make a menu wider, make the content or other menu narrower. Make sure the menus and content's width always adds up to 740.
- Removing a menu is slightly more complicated in this layout than the other one. First, delete the table cell the menu is in. Second, put the colspan of #header to two (if you removed both menus for some reason, remove the colspan altogether). Third, increase #content's width so that when combined, the remaining menu and the content's width will add up to 740.
- The banner is 100 pixels high by default, and anything up to 745 pixels in width. Do not make the banner any wider than that (it can be shorter), but you can do whatever you want with the height. If you do that, change #header's height accordingly.
- To make the menus appear the same on every page, cut them out and put into separate files called, for example, leftmenu.txt and rightmenu.txt. Replace them with <!--#include file="leftmenu.txt" --> and <!--#include file="rightmenu.txt" -->. Save the pages (not the menus) with the .shtml extension. Make sure that your host supports SSI. Edit leftmenu.txt and rightmenu.txt when you want to edit the menus.
- It is better to cut and paste everything between the <style> and </style> tags (not including the tags themselves) into a separate file called something like stylesheet.css and then externally link to it by replacing the <style> tags with <link href="stylesheet.css" rel="stylesheet" type="text/css">. Then the stylesheet will also be the same on every page and making a new style will be a breeze.
- If you're going to link back, please visit the Link to Me section to find the most fitting button for your color scheme.
The rest is self-explanatory for anybody who:
- knows hex color codes or has some reference for the colors
- has basic understanding of the format of HTML and CSS
- knows English
- has some common sense.
If you fit those requirements, you'll be fine. If not, you can check out my HTML guide for the first two. If you have problems with the latter two, you shouldn't be trying to use my layout anyway.
|
