Macromedia dreamweaver cs3 tutorial l.jpg
Sponsored Links
This presentation is the property of its rightful owner.
1 / 58

Macromedia Dreamweaver CS3 Tutorial PowerPoint PPT Presentation


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 DreamweaverCS3 Tutorial


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.

images

website1

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


Launch DreamweaverSelect 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/website1/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 check the links just double click on the button again, change the features, Apply, OK.


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-mailaddressPress 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

#august


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 Characters


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)

public_html

website1

index.html

goals.html

instructor.html

syllabus.html

grading.html

rules.html

sitemap.html

website2

index.html

task.html

process.html

resources.html

evaluation.html

standards.html

conclusion.html

images

images

logo.jpg

button.swf

logo.jpg

button.swf


File Naming Conventions Example

website1

index.html

goals.html

instructor.html

syllabus.html

grading.html

rules.html

sitemap.html

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)

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”


  • Login