Creating the HTML file is the last step in this tutorial. In this file, the images that you saved in Step 1 and the CSS file you created in Step 2 are used in the HTML file.
Click New – File… option from the main menu.
The New Document dialog box appears. Retain the default selection of Blank Page, Page Type: HTML, and Layout:<none>. These selections specify that Dreamweaver will generate a blank HTML page with no layout.
Click the Attach CSS file: link in the lower right hand corner of the New Document dialog box to attach the CSS file you created earlier in this tutorial, style.css.
The Attach External Style Sheet dialog box appears. Type the location of style.css in File/URL text field. Here, we have typed D:/Tableless_Site/css/style.css.
Click the OK button.
The New Document dialog box becomes the active window again. Click the Create button.
This creates a basic HTML file with some default values and the link to the style sheet you associated earlier in this step.
Now, the HTML file needs to be saved as index.html. Click New – Save optionfrom the main menu.
The Save As dialog box appears. Type index in the File name: text field.
Click the Save button. The index.html file gets saved in the project folder, D:/Tableless_Site.
Edit the various parts of the index.html file so that it reflects what is shown on the site.
You should begin by re-naming the default title to Beaver Cheese Secrets.com. You do so by typing Beaver Cheese Secrets.com within <title> tags of the file.
The references to all the div styles you created in the style.css file are added within the opening and closing body tags.
Type the following code within the body tags.
<div id="container">
</div>
The remaining div should be declared one by one within the container tag. The div tags should be added in the sequence in which you want them to appear. Therefore, the header tag should be added first, followed by menu, search, menumiddle, mainContent, and footer.
Please note all the tags described below should be enclosed within <div id="container"> tags.
To add the header div within the container div tags, type:
<div id="header">
<img src="/images/header.jpg" width="647" height="200" /></h1>
</div>
The above code adds the header image header.jpg, using the style specified in the header div.
You now add menu div along with all the menu items by typing:
<div id="menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ORDER NOW</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</div>
The above code adds a menu with three menu items. The style of the above code is controlled by menu, menu ul, menu li, and menu a divs.
Add the search div by typing:
<div id="search" align="center">
<br />
<br />
Search BeaverCheeseSecrets.com:
<br />
<input type="text" value="" />
<input type="submit" value="Search" />
</div>
The above code adds the Search area with a text field and the Submit button. The text, Search BeaverCheeseSecrets.com: will appear as is. The style of the above code is set by search div.
Add the second-level menu by typing:
<div id="menumiddle">
<ul>
<li><a href="#">Cheeses</a></li>
<li><a href="#">Benefits</a></li>
<li><a href="#">Order</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
The above code adds the menumiddle area with four menu options. The style of the above code is controlled by menumiddle, menumiddle ul, menumiddle li, and menumiddle a divs.
Add the main content by typing:
<div id="mainContent">
<br />
<br />
<br />
<p>Deep within the Andes Mountains, somewhere between Argentina and Peru, there once thrived an ancient culture that held many secrets to health. The fact that these secrets even existed would never had been known had there not been a mysterious warehouse fire on the edge of a Patagonian city.</p>
<p>As the firefighters dug through the rubble looking for the cause of the fire, a small metal box was discovered. The box had been beaten and dented and a combination lock was hanging from a broken hinge. Thinking that perhaps the box contained money, a fireman picked up the box and flipped back the lid. Inside lied a small piece of paper, tattered at the edges with calligraphy handwriting.</p>
<p>The fireman picked up the small piece of yellowed paper and dropped the metal box. He noticed a small drawing of what appeared to be a beaver. Beneath the drawing was a list and then a paragraph of instructions. The writing was not Spanish and it certainly was not English. He was quite sure that it was Chinese, but couldn't be certain.</p>
<p>Thinking that this must surely be worth something on eBay, he looked around to see if anyone was watching him and he slipped the page into his pocket.</p>
<p>That night, he called his brother who was a farmer and who had some dealings with the large beavers that lived in the rivers of Patagonia. His brother took the paper and held it up to the light. He examined it and turned it at every which angle. We should take this down to that history professor at the community college, he said.</p>
</div>
The main content is added using the mainContent div and also paragraphs of text. In the above code, each paragraph of Web content is prefixed with the <p> tag and suffixed with the </p> tag. This ensures spacing between the each paragraph of text.
Add the footer using the following code:
<div id="footer">
<img src="/images/footer.jpg" width="647" height="40"/>
</div>
The above code supports the styling specified using the footer div. The footer image along with width and height is set using the <img> tag.
After adding the footer div, save the file again using the File – Save menu.
Once, you have finished creating the index.html, it is a good programming practice to check the markup of your CSS and HTML files using the File – Validate – Markup menu. This menu checks that all the tags declarations in the CSS are syntactically correct and their corresponding references in the HTML file is also correct.
| < Prev |
|---|
