Macromedia Dreamweaver MX2004 Instructional exercise.


22 views
Uploaded on:
Category: Product / Service
Description
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.
Transcripts
Slide 1

Macromedia Dreamweaver MX2004 Tutorial

Slide 2

Launch Dreamweaver Select HTML

Slide 3

New Page Appears

Slide 4

Or Select File>New

Slide 5

Select HTML, Create

Slide 6

Window>Insert & Properties, Files Have a Check Mark When Active

Slide 7

Modify>Page Properties

Slide 8

Appearance, Set Font, Text, Background Color

Slide 9

Links, Set Link, Visited Link Colors

Slide 10

Click the Curser on the Page, Select Alignment, Type in Text Window> Properties Center Alignment Button

Slide 11

Highlight Text, Select Ariel Font Window> Properties Font Pop-up Menu

Slide 12

Highlight Text, & Select the Title Format Size Window> Properties Pop-up Format for Title Heading Size: Example 2

Slide 13

Or to Create a Title With a Graphic: Insert>Table or Select Table Icon

Slide 14

Set Row, Column, Table Width, Border, OK Title Example: 1 Row 2 Columns

Slide 15

Adjust Column Widths Drag Table Column Line Left or Right to Adjust the Width

Slide 16

Before Adding Graphic Images go to File>Save As>name your record Remember to utilize every lowercase letter, no spaces or extraordinary characters

Slide 17

Click in the Left Cell, Insert>Image, or utilize the Image Icon, Locate .gif or .jpg File Window>Insert Menu To Insert Logo or Graphic in a Header

Slide 18

Click in the Right Cell & Type to Add the Title

Slide 19

Select the Table, Select BG to Add a Background Color Window> Properties Menu

Slide 20

To Make Border Invisible, Select Table, Set Border to 0 Select Edge of Table Window> Properties Menu

Slide 21

To Add Navigation Table, Insert>Table or Table Icon 1 Row 7 Columns Maximum

Slide 22

Click Inside of the First Cell to Add a Flash Navigation Button

Slide 23

Insert>Media>Flash Button

Slide 24

Button Settings: Style, Text, Font, Link, Size, Apply, OK Remember while transferring your site to the server to include your .swf Flash catches you made

Slide 25

Repeat to Add All Buttons If you have to alter the catch after has been made or to check the connections simply double tap on the catch once more, change the elements, Apply, OK.

Slide 26

Example of Completed Title & Navigation Buttons You May Have Different Titles For Your Navigation Buttons

Slide 27

External Links: Type Text & Highlight, Type in Link URL & Press Return Key http://www.google.com

Slide 28

Internal Links: Type Text & Highlight, Type in Link URL & Press Return Key index.html

Slide 29

E-Mail Links: Type Text & Highlight, Type in Link URL & Press Return Key mailto:hollandj@emporia.edu

Slide 30

To Add a Graphic, Add a Table, & Adjust the Column Width Example: 1 Row 2 Columns

Slide 31

Click in the Left Cell, Select Insert>Image or Image Icon Locate Graphic Image: .gif .jpg Choose

Slide 32

Click in the Right Cell & Add Your Text May Need to Adjust Column Width Adjust Font to Ariel

Slide 33

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

Slide 34

Highlight Word, In the Link Box Type in #name #august

Slide 35

Highlight Text to Link To, Insert>Named Anchor

Slide 36

Type in Exact Name Match, Example: august, OK

Slide 37

Notice the Yellow Anchor, This Will Not Show When Posted

Slide 38

File>Save As, Provide Name & Location Example index.html or standards.htm

Slide 39

File>Preview in Browser>Edit Browser List

Slide 40

Select Internet Explorer Primary, Netscape Secondary

Slide 41

File>Preview in Browser>Internet Explorer

Slide 42

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

Slide 43

Viewing Options: HTML Code

Slide 44

Viewing Options: Split Code & Design You Can Highlight Areas in Design Mode & See It in Code

Slide 45

Viewing Options: Design For Creating & Editing Webpages

Slide 46

File>Save As, Provide Name & Location Example index.html or standards.htm

Slide 47

New Folder: website1 (spare page records within the envelope) website1 website2 website3 website4 website5 Reminder: Lowercase No Spaces

Slide 48

Example of Files in Your website1 organizer Must Have a Main Page Named index.html Your page names might be not quite the same as this case & will be a correct match to your route catches

Slide 49

Upload 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

Slide 50

File Naming Conventions Example 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

Slide 51

Additional Resources Dreamweaver Tutorials: http://www.macromedia.com/bolster/dreamweaver/tutorial_index.html http://www.macromedia.com/bolster/documentation/en/dreamweaver/index.html#tutorials or you might have the capacity to discover other free online instructional exercises Great Resource Book: "Show Yourself Visually The Fast and Easy Way to Learn Dreamweaver MX2004"

Recommended
View more...