Dreamweaver Directions

DW

Getting StartedTablesAdding Images and ColorAdding TextAdding LinksCreating a Rollover

DW

Open Dreamweaver

Select HTML

• Select HTML• Layout none• Click Create

File Organization

• A home page is always called index.html• images folder inside Project files folder• index.html page file inside Project files folder

DW

Creating Tables

DW

Tables

• Find tabs at the top of your window• Common tab• Select the table icon: it looks like a little grid

DW

• Select the number of:• Rows • Columns• Table width 700-1000 pixels• Boarder 0• Cell pad 0• Cell space 0• Header none• Click ok

DW

DW

In PROPERTIES INSPECTOR- at bottom of windowYou can enter a number for the width & height for each table cell

Adding Images and Color

DW

Add color to a whole cell

Click inside cellClk <td> tag (cell tag) in the Properties InspectorEnter either 6-digit color code -Or clk on Bg to get color menu

DW

.

Adding Background Color

• Page Properties in properties inspector • Go to Bg-type 6-digit color code

or click in little box next to Bg for color menu

DW

Background Color - more

• Click Page Properties in the Properties Inspector < APPEARANCE

• Click Background Color box

• Either insert a 6-digit color code

• Or click Background color box and select from swatches

DW8

Adding Images

DW

Common tabTree iconImage

Select Image Source

• Open your images folder• Select the image you want

DW

Adding Text

DW

DW

• Click inside table cell• Type some words• Select the <td> tag

Choose Font

• In properties inspector (window < properties)• Font: choose font style• Arial, Times, Courier, Georgia, Veranda, etc.

DW

Choose Font Format

• In properties inspector• Format: choose either paragraph,

heading 1, heading 2, etc.

DW

Choose Font Size

DW

In properties inspector (window < properties)Size: choose font size

Choose Font Color

• Select grey unmarked box to change font color

DW

Bold, Italic & Align Font

• Bold, Italic• Left, Center, Right, All Justify• Bullets and Numbering

DW

Align Font (will also align images)

• Horizontal alignment• Vertical alignment

DW

Creating Links

DW

Click link icon• Select a word or words• Click on the link icon in the common insert bar

DW

Fill in Hyperlink information• Text: selected text • Link: this is where you will type the page URL• Target: _blank opens the linked page in a new window

DW

Check your link

• Click once away from the selected text to deselect it• The link text should be blue• And underlined in blue

DW

Change Link Color

In properties inspectorGo to page properties

DW

Category: Click linksLink color: select from swatchesRollover links: choose colorUnderline Style: chooseClick ok

Creating a Rollover

DW

Inserting a Rollover Image

• In the common insert bar at the top of the window• Go to image (tree icon)• Rollover image

DW

Inserting a Rollover Image

• In the insert rollover image dialogue box

• Click browse

DW

• Go to your images folder

Select your image• Original Image: browse and choose• Rollover image: browse and choose• Alternate text: what the image is• Ok

DW

DW

Preview your rolloverClick on the Preview in Browser icon (little world)Click preview in browser

DW

Check your rolloverIn your browser windowrollover image should change as cursor hovers over image