macromedia dreamweaver cs3 tutorial
Download
Skip this Video
Download Presentation
Macromedia Dreamweaver CS3 Tutorial

Loading in 2 Seconds...

play fullscreen
1 / 58

macromedia dreamweaver - PowerPoint PPT Presentation


  • 545 Views
  • Uploaded on

Macromedia Dreamweaver CS3 Tutorial.

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

PowerPoint Slideshow about 'macromedia dreamweaver' - Audrey


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
slide2

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.

check mark when active
Check Mark When Active

Window>Insert

Window>Properties

Window>Files

set the new site definitions
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

font hierarchy setting example
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.

before adding images go to file save as name your page main page is named index html
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
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
Click inside of the top Left Cell, Insert>Image, or use the Image Icon to locate your .jpg or .gif image
for an invisible border select the table edge set border to 0 or match the border fill colors
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
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
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
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.

e mail link type text highlight type in mailto e mailaddress press return key
E-mail Link: Type Text & Highlight, Type in mailto:e-mailaddressPress Return Key

index.html

file save as provide name location
File>Save As, Provide Name & Location

Example

index.html for the main webpage

or

standards.html

can duplicate pages
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.
notice how the browser opens in front to preview what it will look like when uploaded to the server
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

viewing options split code design
Viewing Options: Split Code & Design

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

file save as provide name location53
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
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
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
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
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
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”

ad