Dreamweaver DIV/ CSS Layout

Now it is time to complete the Dreamweaver DIV/ CSS Layout. Using the same principles that we used to create the header area with its associated div tag and css style, let us now create the menu area, the content area and the footer area.

• Click the ‘Code’ or ‘Split’ buttons to see the HTML code create thus far.

• Click after the header div tag ends (so that the next div tag is inserted after the header div).

Create a menu div tag and style (the same way you created the header div and style.

• Insert > Layout objects > Div tag
• Enter ‘menu’ against ID
• Click the  ‘New CSS Rule’ button
• Make sure that the style rule will be defined in ”style.css’
• Click the OK button
• Enter the following properties:

• Click the ‘OK’ button to save the CSS Rule definition for #menu in style.css
• Click the ‘OK’ button to save the ‘menu’ Div tag
• The web page and code will look like this. The menu div is created and styled. The text “Content for  id “menu” Goes Here” is automatically inserted by Dreamweaver (though you may not be able to see it because of the black background of the menu area). Select and delete this text.

Click after the menu close tag in the Code view

Now let us create the content area:

• Insert > Layout objects > Div tag
• Enter ‘content’ against ID
• Click the  ‘New CSS Rule’ button
• Make sure that the style rule will be defined in ”style.css’
• Click the OK button
• Enter the following properties:

• Click the OK button to store the style and then click the OK button to store the div tag.
• Save the template and the associated CSS [File > Save all Related Files].

Finally let us create the footer area:

• Insert > Layout objects > Div tag
• Enter ‘footer’ against ID
• Click the  ‘New CSS Rule’ button
• Make sure that the style rule will be defined in ”style.css’
• Click the OK button
• Enter the following properties:
  • Background > Background color: #000
  • Box > Width: 100% , Height: 30 px
• Click OK and OK
• Select and delete the text “Content for id “footer” Goes Here”
• Save all related files

Now the basic layout of the webpage is ready.

Read More

CSS Layout – Dreaweaver CS5

Before we actually get into designing the layout, it is helpful to understand what’s involved in designing  a CSS layout using Dreamweaver CS5. A webpage is created using HTML code. Dreamweaver allows you to create the webpage without actually writing HTML code as Dreamweaver writes the HTML code for you. HTML is made up of various ‘tags’.
It was not too long ago when web pages were designed using tables [Insert > Table], however this is no longer a good practice. Now it is best to design CSS based webpage layouts.
There are 2 parts to a CSS based website layout:

1. Div (short for division) tags divides the content into individual sections.
2. CSS (short for Cascading Style Sheet) styles the div tags.

Divs can be of 2 types:

• Class
• ID

The difference between ‘Class’ and ‘ID’ is that a class can be used multiple times in a page while an ID can only be used once.

• The style for a class will begin with a dot ‘.’
• The style for an ID will begin with a hash ‘#’

Keeping in mind the website layout that we have planned we will need to create at least 4 divs – header, menu, content and footer. The content for each of these areas will reside within the respective div tag.
We will also create a CSS and specify the properties for each of the div tags by defining styles of the same names ie. header, menu, content and footer.
The style sheet can reside within the HTML page or external to the HTML page but linked to it. It is advisable to create an external style sheet so that changes can be made to this one file which will reflect on all the linked pages.

Read More

Dreamweaver Website Layout

Now let’s get ready to create the Dreamweaver website layout. A website layout usually consists of a header area, menu bar, content area and a footer area.

• The header area consists of the logo and masthead.

• The menu bar consists of the main menu items with links to the various pages.  This allows the visitor to navigate through the site.

• The content area is where the main content of the page will appear.

• The footer area will have the copyright information and may repeat the links that appear in the main menu area.

The layout that we created in the Fireworks CS5 tutorial looks like this:

We will now recreate this layout in Dreamweaver.

Read More

Dreamweaver CS5 Template

Once we have defined our site it is time to create a Dreamweaver CS5 template. This template will form the basis for all our website pages and will contain our main layout and design elements. Once this template is created the website pages can be created from it and the the page specific content can then be added in. To create a Dreamweaver CS5 template, click ‘File’ on the main menu, then click ‘New…’.
In the ‘New Document’ window that opens:

• Select ‘Blank Template’
• then ‘HTML template’
• Layout: <none>
  Dreamweaver comes with various prebuilt templates which you can take a look at and see if it suits your need. You can then customize them to suit your unique requirement. For this tutorial we will start with a blank template so we choose <none> underLayout.
• then click the the ‘Create’ button.

You will get the following screen:

This is a split screen view of your template file. The left shows the HTML code and the right shows how the page will look.
Click the ‘Design’ button at the top, to get into the Design View.

If you need to see the HTML code at any point you can click on the ‘Code’ or ‘Split’ button.
Save the file [ 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’

Read More

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!

Read More

Testing the Website in the Browser

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.

Read More

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.

Read More

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.

Read More

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.

Read More

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.

Read More

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.

Read More

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:

Read More

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.
  

Read More