How to Create a Tableless Website Using Dreamweaver CS3 or Higher
This seatwork and guide should make it easy for you to learn how to apply css in creating a tableless website layout.
The end result of this seatwork will look like this:

Setting up your project
Let us start from scratch by setting up your project. 1. By now you should have already defined your site for WebDev1. 2. Create a folder under the root folder (web) and call it “tableless”. 3. Create a folder inside the tableless folder and call it “images”. Copy the image files provided into the folder. The image files are: a. Logo.gif b. Mother_baby.jpg 4. Create a folder called "css" under the root folder. The css folder is where you will later save your css file. 5. Make sure you are in the tableless folder; create the blank pages of for your site. They are: c. Index.htm d. Services.htm e. Aboutus.htm f. Contactus.htm
Create template and external css 1. Let’s start with creating a new template. You have two options. a. File > New > Blank Page > HTML template > none > create

b. File > New >Blank Template > HTML template > create

2. Save the template. Name it template_css. It will get saved as a .dwt file in a new "Templates" folder that will create itself. 3. Edit the title to “Sitename”.

4. In the css panel click the NEW CSS RULE icon. In the window do these: c. Selector type = tag d. Tag = body e. Define in = new style sheet file f. OK

g. This will open the Save Style Sheet File As window. i. Click on the CSS folder to enter it ii. Name your file “styles” iii. Click SAVE

5. In the CSS RULE DEFINITION window: h. Block > Text Align > center i. Box iv. Padding = 0 (same for all) v. Margin top = 0 vi. Margin left = auto vii. Margin bottom = 0 viii. Margin right = auto

6. Ok. Ok. 7. Go to File > Save all. This will save the two files that are currently open: “template_css.dwt” and “styles.css”. Every time you edit a file the * symbol will appear.
The Header 1. Insert > Layout Object >DivTag 2. In the INSERT DIV TAG window: a. ID = header

b. Click NEW CSS STYLE 3. In the “New CSS Rule” window that opens: c. Selector type = advanced d. Selector = #header e. Define in = styles.css f. OK.

4. In the CSS RULE DEFINITION window: g. Box i. Width = 780 px ii. Padding = 0 (same for all) iii. Margin top = 0 iv. Margin left = auto v. Margin bottom = 0 vi. Margin right = auto

h. Ok. Ok. 5. You will see ‘Content for id "header" Goes Here’ in a dotted box appearing in the document window. This is the header div. 6. Look at the css panel on the right and you will see 2 styles: body and #header.

7. Let’s specify the default font in the body tag. Double-click on BODY. This will allow you to edit the body tag. i. Select “Type”. j. Specify Font = ‘Arial, Helvetica, sans-serif’. k. Size = 12 pixels l. Click “OK”.

Logo and Search DIV 1. Delete the words ‘Content for id "header" Goes Here’ and keep your cursor inside the div. a. Insert > Layout objects > div tag b. ID = logo c. Click NEW CSS STYLE button 1. Selector type = advanced 2. Selector = #logo 3. Define in styles.css 4. OK. 2. In the CSS RULE DEFINITION window: d. Block > Text align = left e. Box i. Width = 50% ii. Float = left iii. Padding = 0 iv. Margins = 0

3. Ok. Ok. 4. “Content for id "logo" Goes Here” will appear in the document window. And a new style #logo will appear in the css panel. 5. Go into the code view (click the “Code” button at the top of the document window or select View > Code). Place your cursor after the div id="logo" closing tag i.e. After “<div id="logo">Content for id "logo" Goes Here</div>” 6. Go back to design view (click the “Design” button or View > Design) f. Insert > Layout objects > div tag g. ID = search h. Click NEW CSS RULE button, selector =#search, click OK. 7. In the CSS RULE DEFINITION window: i. Block>Text align = right j. Box i. Width = 50% ii. Float = right iii. Padding = 0 iv. Margins = 0 a. Ok. Ok. 8. Delete “Content for id "logo" Goes Here” and insert the logo image. There are 2 ways to do this. k. Insert > Image > browse and select logo.gif from the tableless > images folder l. Drag and drop image from images folder into the logo div. 9. To make sure you don’t make a mistake here, go to split view and we will insert the elements in the code view. Delete “Content for id "search" Goes Here” and insert the search code here. For now you can simple enter a form tag, a text field and a button. Please note that the search will not actually work until it is programmed to do so. You can use one of the free search options such as Google search for your future projects. m. Insert > Form > Form > ok

n. Do not move your cursor. Go to Insert > Form > Text field > ok

o. Insert > Form > Button > ok

p. Click on the button that appears and rename it in the Properties panel. Value = Search.

Menu Bar Div 1. Still in split or code view, go to the end of the closing header div tag. To do so you can click anywhere within the header div tag (eg. select the logo image in the design view before going into the code view) and then click the <div#header> that appears at the bottom of the code view window. The entire header div code will be highlighted. Then you can easily click after the closing </div> tag. 2. Now, let’s add the yellow menu bar. a. Insert > Layout objects > div tag b. ID = menu c. Click NEW CSS STYLE button: 1. Selector type = advanced 2. Selector = #menu 3. Define in = styles.css 4. OK. 3. In the CSS RULE DEFINITION window: d. Background > Background color > Click the triangle on the gray box to get the color palette and the ink dropper. Move the cursor to the flower in the logo and pick the yellow color. e. Block >Text align = left f. Box i. Width = 780 px ii. Clear = both iii. Padding = 5 (same for all) iv. Margin top = 0 v. Margin right = auto vi. Margin bottom = 1 vii. Margin left = auto g. Ok 4. Delete the default text that appears in the menu and type in the menu text “Home | Services | About Us | Contact Us”
Content DIV 1. Similarly create another div and css style entitled “content” below this div a. Insert > Layout objects > div tag b. ID = content c. Click NEW CSS Style button: i. Selector type = advanced ii. Selector = #content iii. Define in = styles.css iv. OK. 2. In the CSS RULE DEFINITION window: d. Block > Text align = left e. Box i. Width = 780 px ii. Height = 300 px iii. Clear = both iv. Padding = 5 v. Margin top = 0 vi. Margin left = auto vii. Margin bottom = 0 viii. Margin right = auto f. Border v. Style top = solid vi. Style bottom = solid vii. Width top = 1 px viii. Width bottom = 1 px ix. Color top = pick green color from the leaf in the logo x. Color bottom = pick green color from the leaf in the logo

g. Ok. Ok.
Footer Div 1. Similarly create a “footer” div tag and css style entitled “footer” below this div a. Insert > Layout objects > div tag b. ID = footer c. Click NEW CSS RULE button, selector = #footer, click OK. 2. In the CSS RULE DEFINITION window: d. Type > Font-size = 10 px e. OK 3. Replace the default text that appears with “Copyright 2011 sitename.com”
H1 and Menu link styles 1. Click the “New css rule” icon in the css panel and redefine the H1 tag. a. Selector type = tag b. Tag = scroll down to H1 c. Define in = styles.css d. Ok

e. This will open the CSS rule definition, in Type: i. Font size = 20 pixels ii. Color = pick the green color from the leaf for the font color.

iii. Ok. 2. Similarly let’s create a style for the menu links. f. Click on NEW CSS RULE button iv. Selector type = advanced v. Selector = #menu a (that is a space, not an underscore) vi. Define in = styles.css vii. Ok

g. In the CSS RULE DEFINITION window, go to Type: viii. Font-weight = bold ix. Text-decoration = none x. Color = black (pick from color picker) h. In case, it creates a visible div on your design view, delete the box, but do not delete the ID in the style sheet.
Editable Region 1. Delete ‘Content for id "content" Goes Here’ 2. Insert > Template Objects > Editable Region. Rename the editable region “content” 3. Your template is almost ready. We will use it to make the pages and then come back to link the menu items.
Link the Menu Items 1. Link the menu items to the appropriate pages by highlighting the word and creating the hyperlink. 2. Check your pages in the browser to make sure everything look ok and that the links are working fine.
Applying the template to your pages 1. Open index.htm 2. Go to Modify > Templates > Apply templates to page. 3. Select the template tableless_css.

4. Insert the image of the mother and child.

5. Type the word “Welcome” on the first line and change the format to Heading 1. 6. In the second line type the following text content: a. Type the heading text and the remaining content. b. I am (state your name) of (section) in Webdev1 and I am submitting this CSS seatwork on (date and time). c. Second and third paragraphs will be two paragraphs of lorem ipsum text. 7. Click on the image and change the alignment to RIGHT. 8. Save. 9. Open the remaining pages and apply the same as above except for the content, and heading 1. 10. Change the titles to Sitename Services, About Sitename, and Contact Sitename respectively. 11. Apply three paragraphs of lorem ipsum text ONLY to the pages: d. Aboutus.htm e. Contactus.htm f. Services.htm 12. Do not unthinkingly repeat ALL the content of the homepage as it has special instructions. 13. Save all.
You are now ready to upload your website.