This is the detailed explanation on how to make use of the graphic design created by StrangeBanana. If you know a lot about HTML and CSS you will probably be able to figure out what to do just by looking at the HTML and CSS code on the generator page. If not, you will need to read this page. If you have no experience with HTML and CSS you will probably not be able to use the design.
The stylesheet in the HTML-head is what does most of the work. If you want to use the design on more than one page, you should move the stylesheet to an external file, and link to it from the individual HTML-pages. The HTML-pages should contain four main areas: A logo-area, a breadcrumb trail (for showing the position in the website), a menu consisting of individual menuitems, and a content area. Each of these elements are a <DIV> element with an id ("logo", "trail", "menu", and "content") except for the menuitems which are links with a class ("menuitem").
Below is a more detailed explanation of what to do.
First, you need to get a design, and copy the stylesheet which was created by StrangeBanana:
</style>in the file. Select everything between these tags (excluding the actual tags) and copy it (this is the actual stylesheet (also known as css) generated by StrangeBanana).
</head>tags of every one of your HTML-pages:
<link href="stylesheet.css" type="text/css" rel="stylesheet">
Now your webpages know they should use the stylesheet created by StrangeBanana. However, to make your logo, menu and menuitems, and other parts of the page follow the design specified in the stylesheet, you need to create a few extra tags and maybe clean up your HTML a bit.
If the above is hard to understand, you should take a lot at the HTML of the StrangeBanana Generator page, and notice how the DIV-tags (with class attributes) enclose smaller or larger parts of the page content. For another example you can look at any other page in the StrangeBanana website.
When finished, your HTML code should have a structure something like this:
<head> <link href="stylesheet.css" type="text/css" rel="stylesheet"> </head> <body> <div id="logo">The name of your website</div> <div id="trail"> <a href="home.aspx">Home</a> > <a href="something.html">Something else</a> > <a href="here.html">Here</a> </div> <div id="menu"> <a class="menuitem" href="about.html">These are links in the menu</a> <a class="menuitem" href="contact.html">Contact us</a> <a class="menuitem" href="products.html">Products</a> </div> <div id="content"> Here goes the main content.. </div>
If you are creating new webpages from scratch you can use the above code as a template.
If there are some elements you don't want on your website (for example if you don't need a breadcrumb trail or a menu), you can simply leave out these elements in the HTML code. In that case you should also delete the corresponding rules in the stylesheet, although the page will still work if you don't.
The HTML version used for the page is XHTML 1.0. If you want, you can change it to HTML 4.01 or any other version of HTML.
If you want to, you can link from your site to this site, to tell that you used StrangeBanana:
StrangeBanana helped create this site
In that case, download the image and place it with your HTML-files - usually that can be done by right-clicking the image and selecting "Save image as..", and copy this code (containing the link) into your webpage's code:
<a href="http://www.strangebanana.com" title="StrangeBanana creates random graphic webpage designs"> <img src="logomini.png" alt="StrangeBanana" style="vertical-align: middle"/> StrangeBanana</a> helped create this site