quick tips

» Use Dreamweaver for your coding. It color codes the code for easy organization.

» Once you have your site set up in Dreamweaver, make sure you link properly to each file in the directory.

» Be sure to close all your tags properly, for example a p tag needs to exist in between a div tag.

» Remember to validate your code when you're done! Validate Here

Now it's time to code your website! refer here for basic html help before starting.

head

Open up a new document in Dreamweaver. Notice that there is some code already provided in the document. This is the head tag, where hidden data can go. Metadata is important for search engines, such as Google. Good keywords are how people can find your website.

Fill in your own fields for the keywords and author tags.

The title tag is the text that will appear on the top bar in your browser window. It's the name of your website.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<META name="Author" content="Maria Surawska">
<META name="keywords" lang="en-us" content="tea, making tea, tea bags, tea pot, how to, tutorial">
<link rel="stylesheet" href="css/body.css" type="text/css" />
<title>the art of making a fine cup of tea</title>
</head>

html elements

HTML is made up of several elements that get used over and over. They are:
» body tags which encompasses everything outside the head tag that you want to be visible.
» paragraph tags that go around text.
» header tags that serve as headers and subheaders above text.
» break tags, which don't form new paragraphs but create a line break
» image source tags, which allow for images
» a href tags, which are links to other pages
» div tags, which are used to seperate and create divisions or sections on the html document. (used alongside css)

<body>all html goes in between here</body>
<p>text goes here</p>
<h2>largest header</h2> <h6>all the way down to the smallest subheader</h6>
<br /> it's like giving a paragraph of text a return
<img src=“url” alt=“keyword that describes the image”>
<a href="file link">text that you will click on</a>
<div id=“name”> </div>

structure

Here is the structure of my website. These are the div tags that I am using:
» outer-container: Wraps around everything to center it.
» container: Wraps the header, menu, and content.
» header: The image area for the header image.
» menu: The navigation.
» content: Wraps the accordian and positions it.
» accordian: Inside the content, and what allows for the according javascript feature to work.

<div id="outer-container">
<div id="container">

<div id="header"> </div>
<div id="content">
<div id="menu"></div>
<div id="accordion"> </div>
</div> <!--end accordian-->
</div> <!--end content-->
</div> <!--end container-->
</div> <!--end outer container-->

</body>
</html>

navigation menu

My navigation menu is made up of 3 images. When you hover over the image, the text lights up. This is done by creating two sets of images for each menu item, one regular and one with highlighted text.
Dreamweaver has a handy little feature that puts in rollover images for you. It can be found under Insert >> Image Objects >> Rollover Image.
Use that to create your own menu. Below is how the Dreamweaver html code looks like. The rollover image also uses javascript, but Dreamweaver places that in automatically.

<body onload="MM_preloadImages('images/menu1_onclick.gif','images/menu2_onclick.gif', 'images/menu3_onclick.gif')">
---place where rest of the html does--
<div id="menu">
<a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','images/menu1_onclick.gif',1)"><img src="images/menu1.gif" alt="home" name="Image11" width="306" height="38" border="0" id="Image11" /></a><a href="essentials.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','images/menu2_onclick.gif',1)"><img src="images/menu2.gif" alt="the essentials of tea" name="Image12" width="163" height="38" border="0" id="Image12" /></a><a href="facts.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','images/menu3_onclick.gif',1)"><img src="images/menu3.gif" alt="facts and tips" name="Image13" width="331" height="38" border="0" id="Image13" /></a></div>

accordian

Here is what the accordian html looks like. This div works alongside javascript to produce the final outcome. Copy the classes correctly because they are used as part of the CSS and javascript.

<h3 class="toggler atStart">The Basic Steps of Making Tea</h3>
<div class="element atStart">
<p>Below are the basic steps of the tea-making process. To read more about making a great cup of tea, check out the rest of the
website for more detailed information regarding specifics and facts about tea.</p>
</div>