Dreamweaver CS3 Tutorial: DIV/ CSS/ Tableless 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.zip, 32 KB) 3. Make a copy of the images folder in a folder entitled dwcs3_css. Define site, create template and external css file: 1. Define a site dwcs3_css 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: a. Select Box, For margin and padding enter 0 b. Select Block, For Text Align enter = center c. 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: a. ID = header b. 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 a. Click Box. Click Box. Enter Width = 780 pixels. b. 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. Lets 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. a. Select Type. b. Specify Font = Arial, Helvetica, sans-serif. c. Size = 12 pixels d. Click OK. Logo and Search Div: 1. Delete Content for id "header" Goes Here, keep your cursor inside the div. a. Insert > Layout objects > div tag.

b. ID = logo c. Click New style sheet button, selector=#logo, click ok. d. Block > Text Align = left e. Box > Width = 50% f. Box > Float = Left

g. Box > Padding/ Margin = 0 h. Click OK . Click Ok.

2. Content for id "logo" Goes Here will appear in the document window. And a new style #logo will appear in the css panel. 3. Go into the code view (click the Code button at the top of the document window or select View > Code) 4. Place your cursor after the div id="logo" closing tag i.e. After <div id="logo">Content for id "logo" Goes Here</div> 5. Go back to design view (click the Design button or View > Design) a. Insert > Layout objects > div tag.

b. ID = search c. Click New style sheet button, selector= #search, click ok. d. Block > Text Align = right e. Box > Width = 50% f. Box > Float = right

g. Box > Padding/ Margin = 0 h. Click OK . Click Ok. 6. Delete Content for id "logo" Goes Here and insert the logo image. Insert > Image > browse and select logo.gif from the images folder. 7. 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. a. Insert > Form> Form b. Click inside the red dashed outline that appears c. Insert Form > Text Field d. Insert Form > Button e. 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 <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. Name the div ID= menu. b. Create the #menu css style with the following properties: c. Box > Width = 780 pixels, Clear = both, Padding = 5 pixels, Margin = Top = 0, Left = auto, Right = auto, Bottom = 1 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. Click Ok

g. 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. Name the div ID= menu. b. Create the #content css style with the following properties: c. Box > Width = 780 pixels, Height = 300 pixels, Clear = both, Padding = 5 pixels, Margin > Top = 0, Left = auto, Right = auto, Bottom = 0 d. Block > Text align = left e. 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: a. Type > Size= 10 pixels b. Click OK c. Replace the default text that appears with Copyright 2007 site name.com 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 lets create a style for the menu links. Create a new css style called #menu a. Type > a. Font color = black (pick from the color picker) b. Decoration = none c. Weight = bold Editable Region: 1. Delete Content for id "content" Goes Here and Insert > Template objects > editable Region. 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_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 to the appropriate pages. 2. Check your pages in the browser to make sure everything looks ok and that the links are working fine. You are ready to upload your site and make it live. Congratulations! In order to make you website live you will need to sign up with a hosting server. I recommend Hostgator which I use to host this site. You can also customize various professionally designed CSS website templates for a great look.

Dreamweaver CS3 Spry (AJAX) Tutorial An exciting new feature in Dreamweaver CS3 is the easy insersion of AJAX components called Spry. View Demo If you are a beginner you might be interested in the Dreamweaver CS3 Tutorial. 1. To insert a Spry object simply go to Insert > Spry > 2. Select the option of choice

3. Customize the Spry object in the Properties Panel 4. When you save the page Dreamweaver will automatically add some javascript and css files in a folder called "SpryAssets" within your site. These will also need to be uploaded to your hosting server when you make the page live.

5. To change the colors you will need to edit the relevant css style in the relevant css stylesheet.

Try out the Spry Menu Bar (which you can use for your menu - horizontal or vertical), Tabbed Panel, Accordian and Collapsible Panel for some cool functionality in your website. Spry Menu Bar

To get the Spry Properties, select the blue highlighted name of the spry (see image above) and check the Properties Panel, then customise the Spry properties.

Click the + and - signs to add and delete menu items at each level (1st box has main menu items, 2nd box as submenu items etc.) Spry Tabbed Panels

Spry Accordian

Spry Collapsible Panel

Check out the result in your browser - it is really cool!!