GCUDV Project: Wilmette Historic Preservation Commission

Home | Introduction to Writing HTML | Using Dreamweaver | FTP | Style Sheets | Advanced

Using Dreamweaver

Introduction
Viewing Design & Code
Page Properties
Properties dialog box
Placing Content
Creating Links
Adding Images
Setting up a Web Site

 

 

 

 

Introduction

Get aquainted with the top menu bar in Dreamweaver. The following functions listed under each heading will be of use to you in this tutorial.

File: New, Open, Save, Import/Word HTML, Preview in Browser

Edit: Paste, Paste HTML, Find and Replace

View: Code, Deisgn, Visual Aids

Insert: Image, Table, Email Link, Hyperlink, Named Anchor

Modify: Page Properties

Text: Check Spelling

Site: Site Files

 

File

For every new document you start from scratch, you will slect File/ New. You will select Basic Page/ HTML most of the time. The other features you might use are Basic Page / HTML Template & CSS Style Sheets / CSS.

Templates

Dreamweaver make sit easy for you to set up one design and attach multiple page to a template. For instance, the template might contain just the heading image and the main links. The only thing that might change is the body of the document. You would want to create a template and base all subsequent pages off of the template. To add more links to the main links, you only add them in the template and all the subsequent pages can be updated automatically.

To learn how to create Templates in Dreamweaver, please visit the Macromedia DreamweaverMx Template tutorial and the Brad Halstead & Murray Summers Tutorial.

Style Sheets

Style sheets are also very easy to control and create in Dreamweaver, please visit the Macromedia DreamweaverMx CSS Tutorial and the Style Sheets section of this tutorial.

Viewing Design & Code

It can be very useful to view the HTML code and the design simultaneously. You also have the option to just view the code or just view the design.

Choose View/Code and Design

 

Page Properties

The page properties can be set from Modify/Page Properties. Here you can change the title, background, font, and link colors. This is added in the body tag. This is not the same as style sheets but does control the page's main properties like style sheets.

If you are just creating a couple of linked pages, the Page Properties option might be the easiest way for you to control the look of the page.
If you are creating a web site, learn how to work with Cascading Style Sheets in Dreamweaver™.

Properties dialog box

The properties dialog box is located at the bottom of the program and enables you to control the font face, size and color. If you don't see it, you need to click on the arrow next to Properties to expand the tab. From here you can create bold or italiacs, align text, create a link, and create bulleted and number lists. You can use the blockquote indentation to indent text.

Placing Content

You can import Word HTML from File/Import/Word HTML. This is appropriate if you saved a Word™ document out of Microsoft Word as an HTML file.

You can copy and paste text from a word document into Dreamweaver but it will not maintain the formatting applied in the word processing program.

See this Formatting text tutorial.

Creating Links

To create a link,

  1. Type the link text
  2. Highlight the text you want to make a link
  3. In the properties dialog box type the name of the document including the .htm suffix into the link box
  4. Or click on the folder and locate the document you wish to link to.

Adding Images

To add an image, Choose Insert/Image.

The image needs to located in the root of the site. The document does not embed the image but references it within the code.

Insert the image and select it. In the Properties dialog box, you can change the width & height. You can also link the image and change its border properties.

Setting up a Web Site

The folder where you place all your html files becomes the root of the site. Everything that you link to needs to be in the root of the site or on another server.

In Dreamweaver, before you begin creating a site, you need to Define the site.

Choose Site/ Define Site. This section will take you through a series of questions about your site. This tutorial will take you through the steps of defining your site. There is also another quick Definine Your Site tutorial.

Note: When I create web sites, I do not let Dreamweaver automatically put files on the server. We will do this manually in the next step. If you do not know the server information, choose the option to Edit locally, then upload to remote server.

Once you have defined your site, you can do the following:

Next, you will learn how to copy your files off your computer and put them on the internet.