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!

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.

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.

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.

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.

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.

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:

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.
  

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 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]