web statistics
Your browser version is outdated. We recommend that you update your browser to the latest version.


Need a Google-friendly website?

need help with dreamweaver

What is Dreamweaver?

Lessons in Dreamweaver

What is Dreamweaver?

Dreamweaver is a software programme that is used for web design and development application.  Dreamweaver was developed in 1997 by Macromedia and later in 2005 acquired by Adobe Systems.

In the past when HTML and CSS web languages were not as advanced as today building a Dreamweaver website was time consuming and developers required experience in coding as well as patience as often work was repetitive and mechanical. 

Dreamweaver has been updated to Adobe Dreamweaver CC (Creative Cloud) and has a combined visual design surface called Live View and code editor as well as having many new site management tools.

need help with your website

Updating a Dreamweaver website

Many older websites have been created using Dreamweaver as well as newer websites and over time require updating and amending.  By subscribing to Adobe Dreamweaver Creative Cloud you will be able to either build a website from scratch or update and amend an existing Dreamweaver website.

Learn how to use Dreamweaver

How to access your Dreamweaver website to add new pages and amend existing pages

First steps

After creating an account and choosing a subscription service with Adobe Dreamweaver Creative Cloud you will be able to start building or amending you website.

You will need to start by adding the details of your website and then creating a file on your computer for your local files.

setting up dreamweaver

Getting to know Dreamweaver

Organise your website

Within your Local Files create some site folders to organise the content of your website.

For example

Website Folder – name of your website

Sub-Folders such as:-

Folder 1 – CSS – this is the folder you can use for your Cascading Style Sheets

Folder 2 – Images – this folder you can use to store your website images

Folder 3 JS – this folder you can use to store your javascript files

Folder 4 PDF – this folder you can use to store your PDF’s

Sub-folders of Sub-folders

For example within the Images Folder you could create sub folders for:-

  1. Banners
  2. BG – background images
  3. Icons

Always create two files to start with

1. Main HTML

Right click on the Site folder and click on add New File and create Main.html

All websites that you create will end in .html or .htm – it does not matter which one you use as along as you are consistent with which type you use.  This is where you can build you website pages from.

2. Style Sheets

Click on CSS folder and right click add New File and call it Styles.css

Black + or - is an expand and collapse icon so you can see what is inside a folder or minimise what is inside a folder by clicking on it. 

Drag and Drop – if you want to move items around you can drag and drop

Organise A-Z by Folders – click on Local Files heading

Or by Size / Type / Date modified click on these headings

Refresh button  – by clicking on this it will make sure everything is shown that is in your website

organise your dreamweaver folders

need help with your website

getting to know Dreamweaver icons


When working with Dreamweaver a basic knowledge of HTML code is essential.

HML gives the structure of a web page whereas CSS code gives the web page its appearance.

Basic HTML tags

Tag Description
<html> Defines an HTML document
<body> Defines the document's body
<h1> to <h6> Defines header 1 to header 6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule
<!--> Defines a comment
<ul> Defines unordered list
<a> Defines an anchor tag which normally contains a link
<img> Defines an image
<table> Defines a table of information
<div> Defines a large division of content in an HTML document
<br /> Defines a line break
<link> Defines a link to an external resource such as a CSS stylesheet
<head> Denotes the beginning of the head section of an HTML document
<span>  Denotes a small division of content in another HTML element


Tags always appear twice once at the start and then at the end of an action with the addition of a / at the end

For example:-

<p> Welcome to my website</p>