Dw lesson 2

Make a new folder…

0Name your folder “DW_LN_FN”

0 Inside the DW folder, make two more folders:0 Lesson01

0 Images

0 Lesson01 folder should contain:0 Easygreen.rtf

0 Greenstart.html

0 Images folder should contain:0 Banner.jpg

0 Butterfly.gif

Set up Local Site0 Launch Adobe Dreamweaver

0 Choose Site > New Site

Site Name: DW_LN_FN Select the folder icon. Navigate to the DW_LN_FN folder containing the files you copied. Click Select

and Save.

Using the Welcome screen

Select HTML

0 Click File > New

0 Select Blank Page > HTML > 1 Column Fixed, Centered, Header and Footer.

The padlock symbol indicates that the width is

fixed at a set number of pixels.

0 Click Create

0After you’ve created a page, it’s a good practice to save it immediately.

0 Choose File > Save

0 Save as: Greenstart.html

0 Select the Design View.

Type the title: Get a green start with Meridien GreenStart >

Enter

Change the title. Choose File > Save

Inserting Text

0Do you see the Files Panel to your screen right?

0 If not Choose the Design View > Window > File Panel

0Double-click easygreen.rtf

0Although Dreamweaver (DW) can’t open an RTF file, your computer will select a compatible application, such as Word and open the RTF file.

Inserting Text

0With the RTF file open, select all (Ctrl+A) and copy. Don’t close easygreen.rtf.

0 Switch to DW

Place cursor at the beginning paragraph

Highlight everything except the footer > Paste

This is what you should see.

Note, there is not space between paragraphs.

Change to Code View. What’s missing?

Add a beginning paragraph tag. At the beginning of each paragraph.

This is what you should see.

Footer

0 In the footer area, type:

Copyright 2013 Meridien GreenStart, All rights reserved

0 Ctrl+S (Save)

Inserting Images

Double-click “Insert_logo”

Select banner.jpg > OK

In the Property inspector

Alt field, select the text Add logo

here. Type GreenStart

banner

Place cursor at the beginning of first

paragraph. Insert > Image > butterfly.gif

Web standards recommend that the

<empty> attribute be used for decorative graphics.

To float the image, choose fltrt

Save changes. Note: • fltr will float the image to the right• fltlft floats the image to the left