Macromedia Dreamweaver CS3 Tutorial - PowerPoint PPT Presentation

Macromedia dreamweaver cs3 tutorial l.jpg
1 / 58

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.

Download Presentation

Macromedia Dreamweaver CS3 Tutorial

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript

Macromedia dreamweaver cs3 tutorial l.jpg

Macromedia DreamweaverCS3 Tutorial

Slide2 l.jpg

Create a folder on your computer called website1 to hold all of your web pages. 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.jpgNotice how the forward slash in the link represents the location of a new folder.



All folders, web pages, and graphic names must be lowercase, no spaces, and no special characters for ease of linking later.

Launch dreamweaver select html l.jpg

Launch DreamweaverSelect HTML

New page appears l.jpg

New Page Appears

Or select file new l.jpg

Or Select File>New

Select html create l.jpg

Select HTML, Create

Page size settings l.jpg

Page Size Settings

Check mark when active l.jpg

Check Mark When Active




Window insert palette l.jpg

Window>Insert Palette

Window properties palette l.jpg

Window>Properties Palette

Window files palette l.jpg

Window>Files Palette

From the files palette link select manage sites l.jpg

From the Files Palette Link: Select Manage Sites

Select the new site button l.jpg

Select The New Site Button

Set the new site definitions l.jpg

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:

5. OK, Done Buttons





The file structure you created l.jpg

The File Structure You Created

Begin creating the index html main webpage l.jpg

Begin Creating the index.html main webpage

Modify page properties l.jpg

Modify>Page Properties

Appearance set font text background color l.jpg

Appearance, SetFont, Text, Background Color

Links set link visited link colors l.jpg

Links, Set Link, Visited Link Colors

Insert tables to hold content in the desired locations l.jpg

Insert Tables to Hold Content in the Desired Locations

Insert table set rows columns width border ok l.jpg

Insert>Table: Set Rows, Columns, Width, Border, OK

Select font properties click the curser on the page type in text l.jpg

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

Font hierarchy setting example l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

Place your logo graphic image inside of the website1, images folder

  • logo.jpg (Photo type of images)

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

Slide27 l.jpg

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 l.jpg

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

Provide an alternate text name for viewers using auditory readers ok l.jpg

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

Select the table cell set the bg background brdr border color l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

Repeat to Add All Buttons

If you need to edit the button after has been created or to check the links just double click on the button again, change the features, Apply, OK.

Horizontal vertical cell alignment l.jpg

Horizontal & Vertical Cell Alignment

External links type text highlight type the link url website address press return key l.jpg

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 l.jpg

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 l.jpg

E-mail Link: Type Text & Highlight, Type in mailto:e-mailaddressPress Return Key


Optional anchors are used to jump down on a long page of text l.jpg

Optional: Anchors Are Used to Jump Down on a Long Page of Text

Highlight word in the link box type in name l.jpg

Highlight Word, In the Link Box Type in #name


Highlight text to link to insert named anchor l.jpg

Highlight Text to link to, Insert>Named Anchor

Type in exact name match example august ok l.jpg

Type in Exact Name Match, Example: august, OK

Notice the yellow anchor this will not show when posted l.jpg

Notice the Yellow Anchor,This Will Not Show When Posted

File save as provide name location l.jpg

File>Save As, Provide Name & Location


index.html for the main webpage



Can duplicate pages l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

Optional: File>Preview in Browser>Edit Browser List

For selecting primary secondary browser choices l.jpg

For Selecting Primary & Secondary Browser Choices

Viewing options html code l.jpg

Viewing Options: HTML Code

Viewing options split code design l.jpg

Viewing Options: Split Code & Design

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

Viewing options design for creating editing web pages l.jpg

Viewing Options: DesignFor Creating & Editing Web Pages

File save as provide name location53 l.jpg

File>Save As, Provide Name & Location


index.html for the main webpage



New folder website1 save web pages inside of the folder l.jpg

New Folder: website1 (save web pages inside of the folder)






Reminder: Lowercase, No Spaces, No Special Characters

Example of files in your website1 folder l.jpg

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 l.jpg

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
























File naming conventions example l.jpg

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)




Additional resources l.jpg

Additional Resources

Dreamweaver Tutorials:

Internet Search:

Great Resource Book:

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

  • Login