dw lesson 2
TRANSCRIPT
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