Dreamweaver CS4 Tutorial with photos

Dreamweaver CS4 Tutorial


This entry is part 1 of 19 in the series Dreamweaver CS4 Tutorials


In this Dreamweaver CS4 Tutorial you will learn how to create a basic website using Dreamweaver CS4.

It is a common practice to design the look of your website using an image editor first. I use Fireworks CS4 for designing my layouts. You might want to go through the Fireworks CS4 Tutorial before you start on Dreamweaver CS4. Any images you need for your website will have to be created and optimized for the web using Fireworks.




The see a demo of the site we will create in Dreamweaver CS4 click here.

Download the files so you can compare it with yours in case you get stuck along the way. All the images required for this tutorial are also available within the ‘images’ folder.
Once you have all your required images ready you are ready to start working on your website.

The first step is to create a folder in your computer and a sub folder within it called “images”. You can copy the images you will use in your website into this folder.

Once you have your project folder ready you can open Dreamweaver CS4 and start developing your site.

Steps to creating a site in Dreamweaver CS4

Step 1: Define a site
Step 2: Create a template
Step 3. Design your template page
Step 4: Design your css style sheet
Step 5: Insert Editable Regions
Step 6: Create the pages of your site using the template
Step 7: Link all the pages together
Step 8: Create a form
Step 9: Check your site in the browser
Step 10: Upload your site and make it live


.
.

http://bestwebdesignz.com/tips/dreamweaver/dreamweaver-cs4-tutorial/

Define a New Site in Dreamweaver CS4


The first step to creating a site in Dreamweaver CS4 is to Define a New Site. The object is to recreate the environment of your remote server (where you will ultimately host or make your site live for the world to see) on your computer (where you will actually work on your site).

To define a site in Dreamweaver CS4:

• Open Dreamweaver CS4
  
• Click on “Dreamweaver Site” under the “Create New” Section of the screen that is displayed.
  
• 
  
  
  
• In the ‘Site Definition’ screen that shows up, give your site a name. In this case I have given it the name “BusinessSite”. Click the “Next” button.
  
• 
  
  
• Select that you do not want to use any server technology. Click ‘Next’.
  
  
•  Select that you want to edit local copies on your machine and upload to server when ready. Select (or create and select) the folder where you want to save your files. Click ‘Next’.
  
• 
  
  
• Select ‘None’ from the ‘How do you connect to the remote server’ drop down. Click ‘Next’.
  
• 
  
  
• Review your site definition settings. Click ‘Done’.
  
• You will see the new site defined in the ‘Files Panel’. All the files you create will be stored here and can be easily accessed from here. Also all links to pages and images etc. will be relative to the folder defined in the site.
  
• 
  
  

.
.
.

http://bestwebdesignz.com/tips/dreamweaver/define-a-new-site-in-dreamweaver-cs4/

Create a template in Dreamweaver CS4


Creating a template in Dreamweaver CS4 will form the basis of your website. It will give your site a consistent look and make it easy to manage.

Using the layout you designed in Fireworks as a basis we will recreate it in Dreamweaver as html files.

• From the Dreamweaver Menu select File > New
  
• Select ‘Blank Template’ > Template Type: ‘HTML Template’ > Layout: ‘none’
  
• 
  
• You will get a blank document. Save it [ File> Save].
  
• You will get a message that the template does not have any editable regions. This is ok. Give it a name. I have given it the name ‘template’.
  
• 
  
  
• If you look in your Files panel you will see that your template has been saved as template.dwt within a new folder entitled ‘Templates’
  
• 
  
  

http://bestwebdesignz.com/tips/dreamweaver/create-a-template-in-dreamweaver-cs4/

Design your template in Dreamweaver CS4


We will now design the template in Dreamweaver CS4.
The layout we designed in Fireworks CS4 is shown below:



We will need to recreate this layout in Dreamweaver. Some portions will need to remain images e.g. gradient backgrounds, rounded edges, special fonts like those used in the menu and the logo. These images have already been created, sliced and exported from Fireworks as web optimized images and are available for use within the ‘images’ folder.

To design the layout within the template file:

• Select Insert > Layout Objects > Div Tag
  
  
• In the screen that opens up type the name ‘header’ against ID. We are creating the header area with the gradient background and the logo.
  
• 
  
  
• Click the ‘New CSS Rule’ button.
  
• In the ‘New CSS Rule’ screen that appears, #header will already be typed in. Select the ‘New Style Sheet File’ from the ‘Rule Definition’ drop down menu. Click OK.
  
• 
  
  
• Give the stylesheet name ‘styles’. Click ‘Save’.
  

http://bestwebdesignz.com/tips/dreamweaver/design-your-template-in-dreamweaver-cs4/

Design the CSS Style Sheet in Dreamweaver CS4


Now it is time to specify the styles for your header div tag.

• In the screen that opens. Select ‘Background’. Browse the header background image.
  
• 
  
  
• Select ‘Box’. For the Width, type ’100′ and select ‘%’ from the drop down. For the Height type ’94′ and select ‘px’ from the drop down. Click ok.
  
• 
  
  
• You will come back to the ‘Insert Div tag’ screen. Click OK.
  
• In your template page you will see the ‘header’ div displayed with the background image and the height/width specified in the css style sheet.
  
• 
  
  

You will see that there is a white margin around the ‘header’ div. This is because html pages have a default margin/ padding. To remove this we will give new properties to the ‘body’ tag within the css stylesheet. To do this:

• Bring up the ‘CSS Styles’ panel [Window > CSS Styles]
  
• Click the ‘New CSS Rule’ icon at the bottom.
  
• 
  
  
• Choose the following:
  - Selector type: Tag
  - Selector Name: body
  - Rule Definition: styles.css
  Click OK
  
• 
  
  
• In the CSS Rule Definition screen that opens, select Box and type ’0′ for both Padding and Margin. Click OK.
  
• 
  
  
• You will see that the header is now sticking to the top, left and right of the screen in template.dwt. The deafault margin and padding has been removed.
  

http://bestwebdesignz.com/tips/dreamweaver/design-the-css-style-sheet-in-dreamweaver-cs4/

6.
Insert Images in Dreamweaver CS4

Now it is time to insert the logo image into the header div using Dreamweaver CS4.

• Select and delete the default text that is inserted by Dreamweaver when creating a div ‘Content for id “header” Goes Here’.
  
• Insert > Image > browse and select the logo image.
  
• In the screen that appears, enter alternate text describing the image. e.g. BusinessSite Logo. Click OK.
  
• 
  
  
• You will see the logo image appearing within the ‘header’ div.
  
• 
  
  

We have now completed the header portion of the template.



http://bestwebdesignz.com/tips/dreamweaver/insert-images-in-dreamweaver-cs4/

Content in Dreamweaver CS4


Now let us create the content area and a space for the submenu area on the left.

We will create a div for these 2 areas combined called ‘middle’ and then individual divs for the submenu area called ‘submenu’ and the content area called ‘content’ within the larger ‘middle’ div.

The ‘middle’ div:

• Place the cursor after the ‘menu’ div
  
• Insert > Layout objects > Div Tag > ID: middle
  
• Click the ‘New CSS Rule’ button > Click OK
  
• CSS Rule Definition for # middle:
  
  
  
  • Box > Width: 100%
    
  • Click OK
    
  
  
  
• Insert Div Tag screen > Click OK
  

The ‘submenu’ div:

•  Delete the default text in the ‘middle’ div “Content for id “middle” Goes Here”
  
• Make sure your cursor is still within the ‘middle’ div tag.
  
• Insert a div called ‘submenu’
  
• In the Rule definition for #submenu specify the following:
  
  
  
  • Box > Width: 25%
    
  • Box > Float: left
    
  
  
  

The ‘content’ div

• Position the cursor after the ‘submenu’ div.
  
• Make sure your cursor is still within the ‘middle’ div tag.
  
• Insert a div called ‘content’
  
• In the Rule definition for #content specify the following:
  
  
  
  • Box > Width: 75%
    
  • Box > Float: left
    
  
  
  

The ‘submenu’ and ‘content’ divs will appear side by side.



We will work on the submenu area later. The content in the content area will differ from page to page so we will make this a Dreamweaver Editable Region in the next step.

You will notice that the default font used is Times New Roman which does not look very nice on the web.
We can change this default font by editing the redefined ‘body’ tag within our styles.css stylesheet.

• Open the CSS Panel [Window > CSS Styles]
  
• Select the ‘body’ style and right click > Select ‘Edit’
  
• 
  
  
  
• In the ‘CSS Rule Definition for body’ screen select ‘Type’ and specify the font-family ‘Arial, Helvetica, sans serif’ and the font-size 14 px. Click OK.
  
• 
  
  

You will see that the fonts change for all the text on th page.



The ‘footer’ div

Now let us complete the basic layout by creating the footer area as well.

• Make sure your cursor is right after the ‘middle’ div
  
• Create a new div called footer
  
• Give the #footer style rule the following properties:
  
  
  
  • Box > Width: 100%
    
  • Box > Height: 33 px
    
  • Box > Clear: both
    
  • Block > Text align: Right
    
  • Background> Background-image: footer-bg.jpg
    
  • Type > Color: #FFF
    
  • Click OK
    
    
  
  
  
• In the document window you will see the ‘footer’ area with the background image and other properties specified in the stylesheet.
  
  
• Replace the default footer div text ‘Content for id “footer” Goes Here’ with ‘© 2009 Company Name. All Rights Reserved.’
  
  

Your basic layout template is ready.


Save your template and styles.css stylesheet. [File > Save All]

.


http://bestwebdesignz.com/tips/dreamweaver/content-in-dreamweaver-cs4/

9.
Insert Editable Regions in the Dreamweaver Template


Now it is time to insert editable regions into the Dreamweaver template. Since the content area will differ from page to page we will make this area an editable region.
Select and delete ‘Content for id “content” Goes Here’ from within the ‘content’ div.

While the cursor is still within the ‘content’ div:

• Insert > Template Objects > Editable Region
  
• 
  
  
• Give the New Editable Region a name like ‘content’
  
• 
  
  
• The editable region will be hightlighted within the template
   
  
• Save the template
  

http://bestwebdesignz.com/tips/dreamweaver/insert-editable-regions-in-the-dreamweaver-template/

10.
Dreamweaver CS4 Template Based Web Pages


Now that our Dreamweaver template is ready in we can create the pages of our website easily.
Let us begin with the Home Page. The home page file is usually named index.html. Your remote hosting server will recognize this file as the home page and display it when your domain name is called up.
To create a page from the template:

• File > New
  
• Page From Template > BusinessSite > template
  
  
• Click the ‘Create’ button
  
• Save the file, naming it index.html
  
  
• Type in your home page content into the ‘content’ editable region.
  
• Replace the default text ‘Untitled Document’ in the title area with appropriate text for your page title e.g. BusinessSite Home Page. This is what will appear in the top blue bar of your browser.
  
  
• Once you are done, you can view how your page will look in a browser. To do this go to File> Preview in Browser > Choose the browser you want.
  
  

http://bestwebdesignz.com/tips/dreamweaver/dreamweaver-cs4-template-based-web-pages/

11. Formatting Headings in Dreamweaver CS4


Next we will need to format the headings and subheadings within the content.
To do this, go back into the Dreamweaver document window and select the heading text.
Apply the Heading 1 tag to it by selecting Format > Paragraph format > Heading 1.

Similarly for the subheadings, select the subheading text and apply the Heading 2 tag to it [Format > Paragraph format > Heading 2].

Styling our Headings and Subheadings
Now let us style the Heading 1 and Heading 2 tags to match the look we created in our layout.
To do this we will need to create a new style rule for the tags H1 and H2 in our styles.css file.
We can do this from the ‘Properties’ Panel as well by clicking on the “Edit Rule” button.

In the ‘New CSS Rule’ Screen that opens up select the follwing:

• Selector Type: Tag
  
• Selector Name: h1
  
• Rule Definition: styles.css
  
• Click OK
  

In the CSS Rule Definition for h1 screen give the following properties:

• Type > Font-size: 18 px
  
• Type > Color: #D6130A
  
• Click OK
  

Similarly define the style for the H2 tag. You page will not look like this:




http://bestwebdesignz.com/tips/dreamweaver/formatting-headings-in-dreamweaver-cs4/

12.Formatting Images in Dreamweaver CS4


Now we need to insert the image into the content. To align it as designed in our layout follow these steps:

• Click at the beginning of the 2nd paragraph
  
• Insert > Image > browse and select picture.jpg
  
• The picture will get inserted at the beginning of the 2nd paragraph.
  
• Select the picture and select ‘Right’ from the ‘Align’ drop down in the ‘Properties’ Panel
  

• The picture will now align to the right and all the text will wrap around it neatly.
  

• If we don’t want the text to touch the image we can give some horizontal spacing. To do this, select the image and enter the value ’10′ next to ‘H Space’ in the Properties Panel.
  

• Preview the page in the browser and save all the files. We have now completed creating our home page.
  

http://bestwebdesignz.com/tips/dreamweaver/formatting-images-in-dreamweaver-cs4/

13.
Linking pages in Dreamweaver CS4


Now create the remaining 3 pages and link them up in Dreamweaver CS4.
Create the following pages: about-us.html, services.html and contact-us.html the same way you created the index.html page. Insert the appropriate content, images, title tag, headings and subheadings for each. You will see all your pages in your ‘Files’ Panel [Window > Files].

Linking the pages:
When we click on the menu buttons at the top of the page we want the appropriate page to be displayed. Since the menu is in all the pages we have kept this in the template and when we update it here all the pages will be updated.
To link the pages from the menu:

• Open the template file (template.dwt). You can open it from the ‘Files’ panel – you will find it in the ‘Templates’ folder.
  
• To link the ‘Home’ menu button, select the ‘Home’ image and link it to ‘index.html’ within the ‘Properties’ Panel.
  
• Click on the folder icon next to ‘Link’, then browse and select index.html.
  
• Enter the value ’0′ into the ‘Border’ field.
  

• Similarly link the About Us, Services and Contact Us menu buttons to the appropriate pages.
  
• When you are done, save the template.
  
• You will get a message asking if you want to update the template files. Click the ‘Update’ button.
  
  
• Save your pages in case they we open while the template was updated.
  
• Now when you preview your pages (e.g. index.html) in your browser and click on the menu buttons the appropriate pages will open up.
  

http://bestwebdesignz.com/tips/dreamweaver/linking-pages-in-dreamweaver-cs4/

14.
Forms in Dreamweaver CS4

Let us create a form in the contact us page.
To do this:

• Open contact-us.html
  
• Insert > Form > Form
  
• You will see a red outline within your page. This is the ‘form’ tag. All your form fields must be placed within this tag.
  
• Insert Form > Text field
  
• In the screen that opens up type ‘Name’ in the label field. Click OK
  
  
• Similarly create a field for ‘Email’ as well.
  
• Also create a field for ‘Message’. This will need to be a text area [Insert > Form > Text Area].
  
• Finally create a button [Insert > Form > Button]
  
  
• With this you have created the HTML required for the form. However, to make the form work and send you an email you will need to use a php or asp script depending on your web server. You can also use a free email form service.
  

http://bestwebdesignz.com/tips/dreamweaver/forms-in-dreamweaver-cs4/

15.
Dreamweaver CS4 Form Validation Tutorial


In this Dreamweaver CS4 Form Validation Tutorial we will learn how to validate a form in Dreamweaver CS4.
The form we will validate is shown below:

Step 1: Select the form tag
You can do this by clicking anywhere in the form and selecting the <form> tag when it shows at the bottom of the document window. The entire form will grey out to show that it is selected.

Step 2: Open the Behavior Inspector
Open the Behavior Inspector (Window > Behaviors)

Step 3: Add the Validate Form Behavior
Click the “Add Behavior” icon (+ icon) and select “Validate Form”

Step 4: Specify the validation requirements for each form field
In the “Validate Form” Panel that opens select each field and specify the validation required.

In the example below I have given the following validation requirements:
name – Required, Anything
email – Required, Email Address
phone – Required, Number

Step 5: Click OK and check in the browser
Click OK when you are done with the validations.
Save your page and preview in the browser. Test by trying to submit the form without the required values. You should get an error message like the one shown below:




http://bestwebdesignz.com/tips/dreamweaver/dreamweaver-cs4-form-validation-tutorial/

16.
Tables in Dreamweaver CS4


Another way of designing layouts in Dreamweaver CS4 is by using tables. We will use this method to create the submenu area within the template.

• Open template.dwt
  
• Delete ‘Content for id “submenu” Goes Here’ from the ‘submenu’ div
  
• With the cursor still within the ‘submenu’ div insert a table [Insert > Table] with 3 Rows, 1 Column, Width of 201 pixels, border thickness – 0,  Cell padding – 0 and Cell Spacing -0. Click OK.
  
• You will see a table appear in the ‘submenu’ div.
  
• Select the table [Right click within the table > Select Table] and align it ‘Center’ in the ‘Properties’ Panel.
  
• Click within the top row of the table and insert the image ‘submenu-top-bg.jpg’
  
• Click within the bottom row of the table and insert the image ‘submenu-btm-bg.jpg’
  

To give the background image to the middle:

• Click within the middle row
  
• From the Properties panel, select <New CSS Rule> and click the ‘Edit Rule’ button
  
• Create a ‘class’ style called ‘.sub-bg’ within ‘styles.css’
  
  
• In the ‘CSS Rule Definition’ screen choose ‘submenu-bg.jpg’ as the background image and select ‘repeat-y’ from the ‘Background-repeat’ options.
  
  
• We also don’t want the submenu text within the middle row to stick to the edges so let’s give a padding of 10 pixels within the same style. Click OK.
  
  
• Type in the submenu items
  
  
• You can create new pages and create links to them from this submenu area or you can but textual content that will display on all the pages here.
  
• Save the template and update all the pages.
  
• Preview your pages in the browser and test all the links.
  

http://bestwebdesignz.com/tips/dreamweaver/tables-in-dreamweaver-cs4/

Now that you have completed the site, thoroughly check it in the browser. Use File > Preview in Browser and select the various browsers. Check the site in at least Internet Explorer and Mozilla Firefox.
Sometimes it will look a bit different in different browsers. Check to make sure everything is working fine. Test the menu links to see if the right pages are being called up.
You might also decide to make some layout improvements. In this case, the submenu and content area is sticking to the menu area as this does not look good. Also the content is touching the footer area. Let us add some space between the ‘menu’ and ‘middle’ div. To do this:

• Open the CSS styles panel [Window > CSS Styles]
  
• Select the #menu style
  
• Right click and select ‘Edit style’
  
• Box > Margin > Bottom : 20 px
  
  

Similarly edit the #footer style and add a Top margin of 20 px [Box > Margin > Top: 20 px]
Save all files to make sure your styles.css file is saved and check your site in the browser. The added space makes it look much better.
You might also find that the content is touching the edge of the browser on the right. We can add some space by reducing the width of the ‘middle’ div to 95% from 100%.
Edit the #middle style and change the width to 95%

Check your site again in the browser to make sure everything is working fine.
We have now completed the site.





http://bestwebdesignz.com/tips/dreamweaver/testing-the-website-in-the-browser/

18.
Upload your site with Dreamweaver CS4


Now you are ready to use Dreamweaver CS4 to upload your site and make it live to the world.
You will need a web hosting server and a domain name.
I use Hostgator to host my websites.
When you sign up with a hosting company like Hostgator they will send you FTP details with which you can connect to the remote hosting server and upload your files.
To upload your files using Dreamweaver CS4:

• Click on the ‘Expand to show local and remote sites’ icon in the ‘Files’ panel.
  
  
• A new screen will open with your files on the left site. These are the files stored on your local computer.
  
• Now click on the ‘Connects to remote host’ icon.
  
  
• Select ‘FTP’ from the options
  
  
• Enter your FTP details and click the ‘Test Connection’ button
  
  
• You will get the message that Dreamweaver connected to your Web server successfully.
  
  
• Click Next
  
• Select ‘No, do not enable check in and check out’
  
  
• Review your details on the final screen and click ‘Done’.
  
• You will be taken back to the Expanded ‘Files’ Panel again.
  
• Click the ‘Connects to Remote host icon’ again.
  
• This time Dreamweaver will connect to the remote host and display any files that are on the remote host on the left.
  
• To copy the files from your local computer to the remote host, simply select them in the right panel and click the ‘Put Files’ icon
  
  
• Put all the files on the remote server (you don’t need to put the template file).
  
• A copy of all the files will be seen on the right panel.
  
• When complete check your domain name from your browser e.g www.sitename.com
  
• Your site will be live to the world
  
• Congratulations!
  

http://bestwebdesignz.com/tips/dreamweaver/upload-your-site-with-dreamweaver-cs4/

19.
How to validate your Contact PHP form in Dreamweaver CS4


If you are wondering how to validate your contact PHP form in dreamweaver, follow the simple steps below:
Open your contacts.html in Dreamweaver CS4, while you see the contact form as below:

Click on the Name box as seen above, now look out for Windows in the main menu of your dreamweaver and under that you will find Behaviors, click on that as shown below:

Once you click on the Behaviors sub menu, you will be able to see the Behaviors table on the right side of your screen as shown below:

Now click on the “+” sign as circled in red in the above image.
Once you click on the “+”  sign you will see a drop down menu, now click on Validate form  as shown below:

Once you click on Validate Form, you will find a Validate Form screen flashing in the center of your screen as shown below:

Here you can define each field, by either checking the required value, for Name you can check the Anything checkbox, for email, you can click the Email address checkbox and for Phone you can click the Number checkbox and if you want all the information compulsorily, you can check the required value check box for all etc., Click the OK button, you’r done!
That’s it, you now know how to validate your contact PHP form in Dreamweaver CS4.



http://bestwebdesignz.com/tips/dreamweaver/how-to-validate-your-contact-php-form-in-dreamweaver-cs4/