HTML Tutorial using Dreamweaver 1

How to
1. Use the Dreamweaver Web Editor in conjunction with this HTML & CSS Tutorial.
2. Make your First Web Page

Results per page:


Match: any search words all search words

Page Menu

1. Initial Setup of Dreamweaver Web Editor

2 Dreamweaver Creating a New Web Page

Dreamweaver Initial Setup

Examples are from Dreamweaver CS5.5 other versions are similar

A) Define Your Site

It is essential for you to define your site so that dreamweaver knows where to place all the files that you will create in producing a Web Site

  1. Click Site (On the top line menu)
  2. Click New Site (In the drop down menu)
    In the Site Setup Window.
    1. In the Site Name: enter
      My First Web Page

      This name is only used by Dreamweaver, you can use a different name if you like, but this tutorial will refer to My First Web Page

    2. In the Local Site Folder: Click the file Icon on the right & Browse to the folder you created


A Workspaces is a layout of windows that allows you to produce a Web page or Site

Dreamweaver has several different Workspace layouts

  • App Developer
  • App Developer Plus
  • Classic
  • Coder
  • Coder Plus
  • Designer
  • Designer Compact
  • Dual Screen

Select Classic . Once you are familiar with Dreamweaver you can try the alternatives

Dreamweaver can automatically indent code and Create the type of New page you require

  • Setting Up
    • Click Edit > Preferences > Code Format >
      • Indent: Tick then Enter 4 Select Spaces (This gives a very visible code indentation.)
        • As you add lines of or amend your code you can lose the formatting. To re-activate formatting: use Commands > Apply Source Formating
      • New Document Check your settings are set as follows:
        • Default Document: HTML
        • Default extension: .htm (or .html)
        • Default Document Type (DTD): HTML 5
        • Default encoding: Unicode (UTF-8)

Click OK

Dreamweaver Create a New Web Page

Ensure you have set up New Document as above

  • Click File > New > Blank Page Select under Type: HTML & under Layout: <none>

The above creates a document blank that is similar to our lesson

   <meta charset="utf-8">
   <title>Untitled Document</title>