To get the ball rolling, here are some tips to help you start customizing BlueTranquility for you and your new website (if you are already adept at web design then you can probably figure the following information out on your own just by looking at the markup language of the HTML files and the stylesheet). Feel free to email me if you have any questions about this template that aren't answered on this page. Note that the following line numbers were specified by DreamWeaver MX 2004 and may be different if you use a different web design editor.
On lines 8-12 of the HTML files, place your name, web page editor
(e.g. Macromedia Studio MX, Microsoft Frontpage 5.0), copyright statement, website description and search
engine keywords in the appropriate areas.
On line 13 of the HTML files, change this to reflect the name of your website that will appear on the browser's title area.
On lines 20-22 of the HTML files, replace these with an anchor tag for any 468x60 ad banner, which will be controlled by appropriate margins, borders, and floating properties on lines 73-79 of the stylesheet. Note that you can remove lines 62-70 of the stylesheet once you have your ad banners in place. If you don't plan on using any ad banners, you can remove lines 20-22 from the HMTL files and lines 62-79 from the stylesheet.
On lines 23 and 24 of the HTML files, change these to reflect the name of your web page and the subtitle of your web page. Note that the width of these areas are predefined in the stylesheet (lines 86 and 94) so that the ad banner won't cause this text to word wrap (much, depending on the browser), and you may need to adjust these widths depending on the length of your page title and subtitle.
On line 36 of the HTML files, change this to reflect your email address and a predefined subject message (if you do not want a predefined subject message then remove the part that reads "?subject=Enter Subject Line Here"). Note that this may be on a different line if you already made changes to the HTML files.
On line 60 of the HTML files, change this to the appropriate year or years and your name or company name. Note that again, this line may be different if you already made changes to the HTML files.
On lines 32-36 of the HTML files (if you haven't made any changes yet), the top-most menu button is the only one that does not have a "margin-top" property so that the side bar is aligned with the content area to its right. Also, the menu button that remains highlighted uses the "span" property while the other menu buttons use an anchor tag that's predefined in the stylesheet for the navigation menu. Just compare these lines among each of the HTML files and you should be able to see the pattern.
The only thing worth mentioning is there is a special class selector called "noheight" for your paragraph tags when you have floating images and you want the paragraph that word-wraps around them to look identical on all of the supported browsers. This class selector is on lines 37-39 of the stylesheet, and the reason I didn't make it a global selector is because it would cause a weird bug on unordered lists (it would cause pieces of the list to disappear every now and then when you use a mouse wheel to scroll past it in IE...weird). The rest of the template should be pretty straight-forward, but if you need help understanding CSS properties in general then first check out these CSS Tutorials.