To get the ball rolling, here are some tips to help you start customizing BlueTranquility2 for your new web site. Note that the following line numbers were specified by DreamWeaver 8 and may be different if you use a different web design editor.
On lines 11-15 of the HTML files, place your name, web page editor (e.g. Macromedia Dreamweaver 8, Microsoft Frontpage 8.0), copyright statement, web site description, and search engine keywords in the appropriate areas. On line 16 of the HTML files, change this to reflect the title of each page in your web site that will appear on the browser's title area.
On lines 30-32 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 86-93 of the main stylesheet. Note that you can remove lines 75-84 of the main stylesheet once you have your ad banners in place. If you don't plan on using any ad banners, you can remove lines 30-32 from the HTML files and lines 75-93 from the main stylesheet.
On lines 33 and 34 of the HTML files, change these to reflect the name and subtitle/motto of your web site. Note that the width of these areas are predefined in the main stylesheet (lines 100 and 108) 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 45 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"). On line 70 of the HTML files, change this to the appropriate year or years and your name or company name.
On lines 41-45 of the HTML files, the top-most menu button is the only one that uses the "topgap" class to compensate for the Peek-a-boo IE6 bug (the remaining menu buttons use the "btmgap" class). 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 main stylesheet for the navigation menu. Just compare these lines among each of the HTML files and you should be able to see the pattern.
You can specifiy either left-justified or right-justified preview images so content text will wrap around them like so. Use either the "previewL" class (lines 223-229 in the main stylesheet) or the "previewR" class (lines 231-237 in the main stylesheet) respectively. Keep in mind that you will need enough text to wrap around the preview image up to the maximum resolution you think viewers will be looking at your web site with, otherwise the image will float over the bottom border of the content box it's contained in.
The only other 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 39-41 of the main 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.