Macromedia dreamweaver CS3 tutorial

Example of the webpage Link: syllabus.htmlInside of the website1 folder create a folder called images to hold your graphics.. Example of the Image Link: images/logo.jpg Notice how the fo

Macromedia Dreamweaver

CS3 Tutorial

Create a folder on your computer called website1 to hold all of your web pages Example of the webpage Link: syllabus.html

Inside of the website1 folder create a folder called images to hold your graphics.

Example of the Image Link: images/logo.jpg

Notice how the forward slash in the link represents the location of a new folder.

website1 images

Launch Dreamweaver

Select HTML

New Page Appears

Or Select File>New

Select HTML, Create

Page Size Settings

Check Mark When Active

Window>Insert Window>Properties Window>Files

Window>Insert Palette

Window>Properties Palette

Window>Files Palette

From the Files Palette Link:

Select Manage Sites

Select The New Site Button

Set the New Site Definitions

1 Name Your Webpage

2 Click on the Folder Icon & Locate the website1 folder

3 Click on the Folder Icon & Locate the images folder inside of the website1 folder

4 Add HTTP URL Address: http://studentaccess.emporia edu/~yourlastname/website 1/index.html

5 OK, Done Buttons

1

2

3

4

The File Structure You Created

Begin Creating the index.html

main webpage

Modify>Page Properties

Appearance, SetFont, Text, Background Color

Links, Set Link, Visited Link

Colors

Insert Tables to Hold Content in the

Desired Locations

Insert>Table: Set Rows, Columns,

Width, Border, OK

Select Font Properties, click the curser on the page, type in text

Font Hierarchy Setting Example

Title = Heading 1 size, Ariel font, left align, bold style.

Subtitles = Paragraph size, Ariel font, left align, bold style.

Body = Paragraph size, Ariel font, left align, normal style.

Drag Adjust Column Widths, or Select Cells & Merge or Split

Before Adding Images go to

File>Save As & name your page (main page is named index.html)

Remember to use all

lowercase letters, no spaces or special

characters

Place your logo graphic

image inside of the website1,

images folder

• logo.jpg (Photo type of images)

• logo.gif (Line art, or transparent areas)

Click inside of the top Left Cell,

Insert>Image, or use the Image

Icon to locate your jpg or gif image

Navigate to the website1 images folder, select the file, & Choose

button

Provide an Alternate Text name for viewers using auditory readers, OK

Select the Table/Cell, set the Bg Background, Brdr Border Color

For an Invisible Border, select the table

edge, Set Border to 0, or match the

border & fill colors

Click Inside of the First Cell to add a

Flash Navigation Button, select

Insert>Media>Flash Button

Button Settings: Set Style, Text,

Font, Link, Size, Apply, OK

Remember when

uploading your

website to the server

to add your swf Flash

buttons you created

Repeat to Add All Buttons

If you need to edit the button after has been created or to

Horizontal & Vertical Cell Alignment

External Links: Type Text &

Highlight, Type the Link URL

website address, Press Return Key

Internal Links: Type Text &

Highlight, Type in the webpage

name & Press Return Key

E-mail Link: Type Text & Highlight,

Type in mailto:e-mailaddress

Press Return Key

index.html

Optional: Anchors Are Used to

Jump Down on a Long Page of Text

Highlight Word, In the Link

Box Type in #name

Highlight Text to link to, Insert>Named Anchor

Type in Exact Name Match,

Example: august, OK

Notice the Yellow Anchor,This Will Not Show When Posted

File>Save As, Provide Name

& Location

Example

index.html for the main

webpage or

standards.html

Can Duplicate Pages

• Once the index.html page is set up as desired with the logo, header, and

navigation buttons it can serve as a

template for creating other new pages.

• Just be sure to save each new page with new name.

File>Preview in Browser>Select the desired browser

Notice How the Browser Opens in Front To Preview What it Will Look Like When Uploaded to the Server

When Finished Viewing Browser Red Button Close

Optional: File>Preview in Browser>Edit Browser List

For Selecting Primary & Secondary

Browser Choices

Viewing Options: HTML Code

Viewing Options:

Split Code & Design

You Can Highlight Areas in Design Mode & See It in Code

Viewing Options: DesignFor Creating & Editing Web Pages

File>Save As, Provide Name

& Location

Example

index.html for the main

webpage or

standards.html

New Folder: website1 (save web

pages inside of the folder)

website1 website2 website3 website4 website5

Reminder: Lowercase,

No Spaces,

No Special

Example of Files in Your

website1 folder

Must Have a Main Page Named

index.html

Your page names may be different from this example & will be

an exact name match

to your navigation buttons

Upload All Files to your Server Space such as iDrive Web (ESU)

File Naming Conventions Example

All Lowercase Letters

Short Descriptive Names

No Spaces

No Special Characters

Names Exact Match to

Navigation Buttons

Correct File Extensions

website1 (Folder Name)

index.html (main page)

website1

index.html goals.html instructor.html syllabus.html grading.html rules.html sitemap.html images

logo.jpg button.swf

Additional Resources

Dreamweaver Tutorials:

http://www.macromedia.com/

Internet Search: http://www.google.com

Great Resource Book:

“Teach Yourself Visually The Fast and Easy Way to Learn Dreamweaver”