Dreamweaver CS4 - Download Downloadable software for installation or back-up ** Requires applicable license serial number in order to activate **

You will need DomaiName, this is one of the best in the world;

• 
• 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.
  
• 
  

Creating a template in Dreamweaver  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’
  

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’.
  

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.

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

• 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.

Let us now work on the menu area. To do this, let us create a new div called ‘menu’ with the accompanying css rule.

We first need to point the cursor immeadiatetly after the ‘header’ div. We can do this in 2 ways:

1. The first way is in the design view:

• Select the ‘header’ div by clicking anywhere inside the header area and clicking on the ‘div#header’ tag that appears at the bottom of the screen.
  
• The header tag area will get highlighted. Click the ‘right arrow’ key of your keyboard to move the cursor immediately after the ‘header’ div.

2. The second way is in the Code View:

• Click on the ‘Code View’ button.
  
• Find the code for the ‘header’ div and place your cursor right after the closing div </div> tag.
  

Once you have place your cursor in the right spot, insert a div named menu.

• Insert Layout Objects > Div Tag
• ID: menu
• Click ‘New CSS Rule’ button
  • Selector Type: ID
  • Selector Name: #menu
  • Rule Definition: styles.css
  • Click OK.
• In the ‘CSS Rule Definition for #menu’ screen give the following properties:
  • Background> Background- image:  images/menu-bg.jpg
  • Box > Width: 100%
  • Box > Height: 32px
  • Click OK
• Insert Div Tag screen > Click OK.
• You will see the menu area with the background image and width/ height specified appearing in template.dwt.
• Delete the default content inserted within the ‘menu’ div and insert the 4 menu images – Home, About Us, Services, Contact Us. The menu div is now complete. We will link the menu images later after we create all the required html pages.
  

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]

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

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.
  

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:

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.

In this Dreamweaver  Form Validation Tutorial we will learn how to validate a form in Dreamweaver

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:

Another way of designing layouts in Dreamweaver  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.

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.

To upload your files using Dreamweaver

• 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!