Dreamweaver CS3 Tutorial: CSS Layout Based Website

Before you Begin Project 2:

1. If you are a beginner make sure you go through steps 1- 10 of the Dreamweaver CS3 Tutorial before attempting this project.
   
2. Download the project files. (DWCS3_CSS Template.rar (276 KB)-- If you are unable to download this means you need to follow me first and after that you have to send me a request mail after that i will approve you.)( Template Preview  )
3. Make a copy of the ‘images’ folder in a folder entitled “DWCS3_CSS Template”.

Define site, create template and external css file:

1. Define a site “DWCS3_CSS Template” specifying the new folder you made as the root directory.
2. File > New
3. In the window that opens: Select Blank template > HTML Template > None
4. Save the template. Name it template_css. It will get saved as a .dwt file in a new ‘Templates’ folder.
5. In the CSS Panel > click the ‘New css Rule’ icon
6. Selector type = tag, Tag  = body, define in = New style sheet file, file name = styles, click “save” button.
7. In the CSS rule definition window:
1. Select “Box”, For margin and padding enter “0”
2. Select  “Block”, For Text Align enter = center
3. Click the styles.css tab at the top of the document window and save the styles.css file
8. Click the ‘template_css.dwt’ tab at the top of the document window to get back into the template file. You will have to save the stylesheet and template files everytime you make a change (when the * symbol appears)

The header:

1. Insert > Layout Object > Div Tag
2. In the “Insert Div Tag” window that opens:
1. ID = header
2. Click “New css style”
3. In the “New CSS Rule” window that opens Selector = #header will already be inserted and define in = styles.css will already be selected. Click the Ok button.
4. In the “CSS rule definition” window that opens
1. Click “Box”. Click “Box”. Enter Width = 780 pixels.
2. Padding = 0, Margin = Auto.
5. Click ok button. Click ok button.
6. You will see ‘Content for id "header" Goes Here’ in a dotted box appearing in the document window. This is the header div. You can check how it will look in the browser by clicking File > preview in Browser > select browser name. You should do this regularly throughout the process of building the layout so that you know as soon as something is not looking ok. You should also check in both IE and Firefox to ensure it is working fine in both the browsers.
7. In the css panel you will see 2 styles – body and #header.
8. Let’s specify the default font in the body tag. Right click “body” in the css panel. Select the “Edit” option. The css rule definition window will open.
1. Select “Type”.
2. Specify Font = ‘Arial, Helvetica, sans-serif’.
3. Size = 12 pixels
4. Click “OK”.

Logo and Search Div:

1. Delete ‘Content for id "header" Goes Here’, keep your cursor inside the div.

1.  Insert > Layout objects > div tag.
2. ID = logo
3. Click “New style sheet” button, selector=#logo, click ok.
4. Block > Text Align = left
5. Box > Width = 50%
6. Box > Float = Left
7. Box > Padding/ Margin = 0
8. Click OK . Click Ok.
1. “Content for id "logo" Goes Here” will appear in the document window. And a new style #logo will appear in the css panel.
2. Go into the code view (click the “Code” button at the top of the document window or select View > Code)
3. Place your cursor after the div id="logo" closing tag i.e. After “
   Content for  id "logo" Goes Here
   ”
4. Go back to design view (click the “Design” button or View > Design)
1.  Insert > Layout objects > div tag.
2. ID = search
3. Click “New style sheet” button, selector= #search, click ok.
4. Block > Text Align = right
5. Box > Width = 50%
6. Box > Float = right
7. Box > Padding/ Margin = 0
8. Click OK . Click Ok.
5. Delete “Content for id "logo" Goes Here” and insert the logo image. Insert > Image > browse and select logo.gif from the images folder.
6. 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.
1. Insert > Form> Form
2. Click inside the red dashed outline that appears
3. Insert Form > Text Field
4. Insert Form > Button
5. Click on the button that appears and rename it in the Properties panel. Value = Search.

Menu Bar Div:

1. Go into the code view. Click the after 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 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 tag.
2. Now let's add the yellow menu bar.
1. Insert > layout objects > div tag. Name the div ID= menu.
2. Create the #menu css style with the following properties:
3. Box > Width = 780 pixels, Clear = both, Padding = 5 pixels, Margin = Top = 0, Left = auto, Right = auto, Bottom = 1
4. 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.
5. Block > Text align = left
6. Click Ok
7. 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

1. Insert > layout objects > div tag. Name the div ID= menu.
2. Create the #content css style with the following properties:
3. Box > Width = 780 pixels, Height = 300 pixels, Clear = both, Padding = 5 pixels, Margin > Top = 0, Left = auto, Right = auto, Bottom = 0
4. Block > Text align = left
5. Border > top/ bottom> solid> 1 pixel > pick green color from the leaf in the logo.

Footer Div:

1.  Similarly create a “footer” div tag and css style with:
1. Type > Size= 10 pixels
2. Click OK
3. Replace the default text that appears with “Copyright 2011 | Abhinav Pathak"

H1 and Menu Link Styles:

1. Click the “New css rule” icon in the css panel. Redefine the H1 tag. Select ‘Tag’, Type Tag = H1, give the font size = 20 pixels and pick the green color from the leaf for the font color.
2. Similarly let’s create a style for the menu links. Create a new css style called “#menu a”.
   Type >
1. Font color = black (pick from the color picker)
2. Decoration = none
3. Weight = bold

Editable Region:

1. Delete ‘Content for id "content" Goes Here’ and Insert > Template objects > editable Region (See Step 7 in Dreamweaver Tutorial CS3). Name the editable region “content”
2. Your template is almost ready. We will use it to make the pages and then come back to link the menu items.

Create the web pages:

1. File > New > Page from Template > DWCS3_CSS Template > template_css> click create > Save as “index.html”
2. Change the title of the page to “Welcome”.
3. Insert the image of the mother and child. Type the heading text and the remaining content. Right align the picture. Apply the Heading 1 tag (format dropdown  in Properties panel) to the heading.
4. Make 3 copies of the index.html file in the ‘Files’ Panel. Change the page title, heading and content to reflect ‘services’, ‘about us’ and ‘contact us’. Save them with similar names.

Link the menu items:

1. Go into the template file and link the menu items (See Step 9 in Dreamweaver tutorial CS3) to the appropriate pages.
2. Check your pages in the browser to make sure everything looks ok and that the links are working fine.

Now your site is ready Congratulations!