index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- #BeginTemplate "mini-country.dwt" -->

<head>
<!-- #BeginEditable "doctitle" -->
<title>Mini Country Template</title>
<!-- #EndEditable -->

<!-- #BeginEditable "headsecion" -->
<meta content="Description of Your Site Goes Here." name="description" />
<meta content="keywords for your site here separate with commas" name="keywords" />
<!-- #EndEditable -->

<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<meta content="en-us" http-equiv="Content-Language" />
<meta content="General" name="rating" />
<meta content="no" http-equiv="imagetoolbar" />
<meta content="Copyright � 2008, Your Name All Rights Reserved" name="copyright" />

<style type="text/css" media="all">

<!--
@import url('mini-country.css');
-->
</style>
</head>

<body>

<!-- Begin Page Container -->
<div id="outerWrapper">

<!-- Begin Page Masthead -->
	<div id="header">
	</div>
<!-- End Page Masthead -->

<!-- Begin Top Navigation -->
	<div class="ubercolortabs">
		<ul>
			<li><a href="#" style="margin-left: 12px"><span>Home</span></a></li>
			<li><a href="#"><span>Contact Us</span></a></li>
			<li class="selected"><a href="#"><span>Link 1</span></a></li>
			<li><a href="#"><span>Link 2</span></a></li>
			<li><a href="#"><span>Link 3</span></a></li>
			<li><a href="#"><span>Link 4</span></a></li>
			<li><a href="#"><span>Site Map</span></a></li>
		</ul>
	</div>
	<div class="ubercolordivider">
	</div>
<!-- End Top Navigation -->

<!-- Begin Content Wrapper -->
	<div id="contentWrapper">
	
<!-- Begin Main Content -->
		<div id="content">
		<!-- #BeginEditable "content" -->

<h1>Mini Country Template</h1>
<p>The Mini Country Template was created using Eric Meyer's CSS Sculptor for Expression Web. It is a fluid layout which will resize to 800x600 with no horizontal scroll. No maximum width has been included in the style rules. The top mini border is called from the style sheet and is the body background image with the background color specified as #FADDA.</p>
<h2>Masthead </h2>
<p><img alt="Description of image goes here." src="images/sample-image.png" width="132" height="214" class="imglft" />The font used to create the site logo is Balthazar in color #663D1F. The logo is called as the background for the header. The logo was created using The Logo Creator and the file is include in the download. However, you will not be able to edit it without the program. If you want to use a fancy or unusual font for your site logo, create a transparent image. You can also specify a font family, font size for the #header style rules and use plain text for the site name. You can request the name be changed and if I have the time, I will be happy to do it for you.</p>
<p>The image used with the masthead is 560 pixels wide x 75 pixels high. If you change the height of the logo image you will need to adjust the style sheet rule. </p>
<h2>Menu</h2>
<p>The menu, <a title="Uber Round Color Tabs from Dynamic Drive." href="http://www.dynamicdrive.com/style/csslibrary/item/uber_round_color_tabs/">Uber Round Color Tabs</a>, is from Dynamic Drive. This menu probably would not work well by itself for a large site. as you can only add so many tabs before the menu falls apart. Transparent gifs are used to create the rounded look and you change the  color by changing the color value. </p>
<h2>CSS</h2>
<p>All styling for the presentation of the site is within an external style sheet. Changes in colors, font families and sizes should be made within the style sheet and NOT added as part of the html code. Be sure to view the site in more than one browser and at more than one resolution if you make changes.</p>
<h2>Images</h2>
<p><img alt="Description of image goes here." src="images/sample-image2.png" width="132" height="203" class="imgrgt" />The top background image is one of the mini borders from <a title="The Inspiration Gallery." href="http://www.theinspirationgallery.com/">The Inspiration Gallery</a>. The credit MUST remain if you use it and make sure you read the Terms of Use. </p>
<p>The images used on this page are examples only. All images should be resized within an graphics program and NOT by changing the size from within the html code. A class has been applied to the image to float it left or right.  Both images have a 1 pixel black border applied using a graphics program. </p>
<h2>Lists</h2>
<p>The bullets used as part of the content unordered lists are added via the style sheet rules. You can change to a different image of your choice but may have to adjust the margins and padding. </p>
<ul>
	<li>Main item</li>
	<li>Main Item </li>
	<li>Main Item<ul>
		<li>Sub Item</li>
		<li>Sub Item</li>
	</ul>
	</li>
</ul>
<h2>General Information</h2>
<p>Remember, if you are located in another country to change the language statement. Both the style sheet and XHTML code validate. </p>
<p>You are welcome to use the template for any of your projects, however, the link back to my site MUST remain. ENJOY! </p>
<p> </p>

		<!-- #EndEditable -->
		
		</div>
<!-- End Main Content -->

		</div>
<!-- End Content Wrapper -->

<!-- Begin Page Footer -->
	<div id="footer">
		<p>Your Name | <a href="mailto:yourname@yourdomain.com">yourname@your-domain.com </a></p>
		<p>Copyright 2010| All Rights Reserved</p>
		<p>Template Design: <a title="Expression Web Tutorials & Templates." href="http://www.expression-web-tutorials.com/">Expression Web Tutorials & Templates</a></p>
		<p>Background Header Image: <a title="The Inspiration Gallery." href="http://www.theinspirationgallery.com/">The Inspiration Gallery</a></p>
	</div>
<!-- End Page Footer -->

	
</div>
<!-- End Page Container -->


</body>

<!-- #EndTemplate -->

</html>