Let's build the guts of your website.

1. Let's make the first page.

1.1. 1. Create a new html document. Name it index.htm.

1.2. 2. Create another new document. Name it layout.css.

1.3. 3. Create another new document, name it styles.css

1.4. 4. Add 4 - 5 div containters [<div id="name"></div>] to hold your header, main menu or navigation, the main content area, a footer if you want one, a sidebar if you want one.

1.5. 5. Give each of the div tags an id that makes sense for the content it will hold. [ie the header div might look like <div id="header"> </div>].

1.5.1. A. In one of the containers build a menu of links to the pages in the site. This will be the main navigation that will be used throughout the site. Link each item in the menu to a page with a corresponding name [even though the pages don't exist yet]. Remember naming conventions: lowercase, no spaces please. Add style definitions for your menu links in styles.css.

1.5.2. B. Let's customize the look and feel of the page:: Play around with the colors, background colors, header, logo, fonts, positioning by changing the definitions of the ids in the external style sheet [layout.css] until the page looks just right.

1.5.3. C. Once you have completed A & B, then you're ready to move to "Let's Make some more pages"

1.6. 6. In layout.css create a listing for each of the ids that you created example: #header { } . Be sure to save layout.css when you are done.

2. Let's make some more pages.

2.1. 1. Open the first page you created with the finished menu and design and create a new copy of it by going to File --> "Save As". Give your new page a name that corresponds to one of the link names that you created in your menu. Repeat this process [File --> Save As --> Name file according to the next link in your men] until you have created a page for each item in your menu.

2.2. 2. Open each page and give each its own title in the head [displays on the blue bar at the top of the browser window], and in the body [maybe near the top of your page near your logo or something like that].

2.3. 3. Once you are finished with 2 & 3, save all of your pages and open your first page [index.htm] in your browser. Now test each link by clicking on them and navigating through the pages of your site. If there are any links that do not work, write down which ones and compare the file name and location of the pages to the link path and file name in your code.

3. Let's add stuff to the pages.

3.1. In this step we will begin to add meaningful content [like text, images, or other media and links] to each of our pages. We'll pick up here next week.