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

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

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

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

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

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

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

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

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

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

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

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

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

Read More