Intro to Dreamweaver

Web DesignSection 7-1

Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials

Objectives

The Student will: have a basic understanding of

Dreamweaver have a basic understanding of the

features that are common to most web authoring software programs.

know how to create common HTML or XHTML elements using Dreamweaver rather than writing code

Dreamweaver

We will look at a few features of Dreamweaver (and other web authoring software): Different Views Adding Text Creating Links Adding Images

Dreamweaver Views Like most Web Authoring Software

Dreamweaver provides different views of the web page: Design view - This is typically the

default view, which is a blank screen on which you type, paste, or insert content. This is very similar to a word processor screen.

Code view - Allows you to view and work directly with the HTML code.

Split - Both of the above views are displayed simultaneously in separate windows.

Creating Headings and Subheadings

In Design View, Dreamweaver is very similar to word processing software. You use the format menu to set fonts, styles, and even heading levels. Default is a

paragraph <p>

Inserting Links Add links to the web

page using Insert | Hyperlink

Two ways to insert a link:1. Select text first and then

Insert | Hyperlink2. Insert | Hyperlink and then

enter the text

Inserting Links Each item on a page has properties.

You can add links in the properties panel.

This is the properties tab for an image:

Add a link here

Inserting Links

If you want the link to open the page in a new window find Target set it to _blank

Adding Images You add an image to a document by

selecting Insert|Image A dialog box will appear, prompting you

for the location of the image. After you have inserted the image

into your webpage, you can edit its attributes in a Properties panel. For example, you can change the

image's height and width, put a border around it, make it into a link, and add alternate text for users who can't see the image.

Summary

Dreamweaver is a web authoring program

In Design view Dreamweaver works much the same a word processing program

Dreamweaver will generate both HMTL and CSS code

Rest of Today

Download the instructions for Homework 7-1

Complete the assignment and show me the result.