Macromedia dreamweaver mx2004 tutorial
Download
1 / 51

macromedia dreamweaver - PowerPoint PPT Presentation


  • 262 Views
  • Updated On :

Macromedia Dreamweaver MX2004 Tutorial. Launch Dreamweaver Select HTML. New Page Appears. Or Select File>New. Select HTML, Create. Window>Insert & Properties, Files Have a Check Mark When Active. Modify>Page Properties. Appearance, Set Font, Text, Background Color.

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' - jaden


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 mx2004 tutorial

Macromedia DreamweaverMX2004 Tutorial


Launch dreamweaver select html
Launch DreamweaverSelect HTML







Appearance set font text background color
Appearance, Set ActiveFont, Text, Background Color



Click the curser on the page select alignment type in text
Click the Curser on the Page, Select Alignment, Type in Text Active

Window> Properties

Center Alignment Button


Highlight text select ariel font
Highlight Text, Select Ariel Font Active

Window> Properties

Font Pop-up Menu


Highlight text select the title format size
Highlight Text, & Select the Title ActiveFormat Size

Window> Properties

Pop-up Format for Title Heading Size: Example 2



Set row column table width border ok
Set Row, Column, Table Width, Border, OK Table Icon

Title Example:

1 Row

2 Columns


Adjust column widths
Adjust Column Widths Table Icon

Drag Table Column Line Left or Right to Adjust the Width


Before adding graphic images go to file save as name your file
Before Adding Graphic Images go to File>Save As>name your file

Remember to use all lowercase letters, no spaces or special characters


Click in the left cell insert image or use the image icon locate gif or jpg file
Click in the Left Cell, Insert>Image, or use the Image Icon, Locate .gif or .jpg File

Window>Insert Menu

To Insert Logo or Graphic in a Header




To make border invisible select table set border to 0
To Make Border Invisible, Select Table, Set Border to 0 Locate

Select Edge of Table

Window> Properties Menu





Button settings style text font link size apply ok
Button Settings: Style, Text, Font, Link, Size, Apply, OK Button

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 Button

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.


Example of completed title navigation buttons
Example of Completed Title & Navigation Buttons Button

You May Have Different Titles For Your Navigation Buttons


External links type text highlight type in link url press return key
External Links: Type Text & Highlight, Type in Link URL & Press Return Key

http://www.google.com




To add a graphic add a table adjust the column width
To Add a Graphic, Add a Table, & Adjust the Column Width Press Return Key

Example:

1 Row

2 Columns


Click in the left cell select insert image or image icon
Click in the Left Cell, Select Insert>Image or Image Icon Press Return Key

Locate Graphic Image:

.gif

.jpg

Choose


Click in the right cell add your text
Click in the Right Cell & Add Your Text Press Return Key

May Need to Adjust Column Width

Adjust Font to Ariel






Notice the yellow anchor this will not show when posted
Notice the Yellow Anchor, Press Return KeyThis Will Not Show When Posted


File save as provide name location
File>Save As, Provide Name & Location Press Return Key

Example

index.html

or

standards.htm





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 html code
Viewing Options: HTML Code Will Look Like When Uploaded to the Server


Viewing options split code design
Viewing Options: Split Code & Design Will Look Like When Uploaded to the Server

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


Viewing options design for creating editing webpages
Viewing Options: Design Will Look Like When Uploaded to the ServerFor Creating & Editing Webpages


File save as provide name location1
File>Save As, Provide Name & Location Will Look Like When Uploaded to the Server

Example

index.html

or

standards.htm


New folder website1 save webpage files inside of the folder
New Folder: website1 (save webpage files inside of the folder)

website1

website2

website3

website4

website5

Reminder: Lowercase No Spaces


Example of files in your website1 folder
Example of Files in Your folder)website1 folder

Must Have a Main Page Named index.html

Your page names may be different from this example & will be an exact match to your navigation buttons


Upload all files to idrive web server space
Upload folder)All Files to iDrive Web Server Space

public_html

website1

index.html

goals.htm

instructor.htm

syllabus.htm

grading.htm

rules.htm

sitemap.htm

graphic1.jpg

graphic2.gif

website2

index.html

task.htm

process.htm

resources.htm

evaluation.htm

standards.htm

conclusion.htm

graphic1.jpg

graphic2.gif


File naming conventions example
File Naming Conventions Example folder)

website1

index.html

goals.htm

instructor.htm

syllabus.htm

grading.htm

rules.htm

sitemap.htm

graphic1.jpg

graphic2.gif

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


Additional resources
Additional Resources folder)

Dreamweaver Tutorials:

http://www.macromedia.com/support/dreamweaver/tutorial_index.html

http://www.macromedia.com/support/documentation/en/dreamweaver/index.html#tutorials

or you may be able to find other free online tutorials

Great Resource Book:

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


ad