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

Links, Set Link, Visited Link Colors

Insert>Table or Select Table Icon

Set Row, Column, Table Width, Border, OK

Click Drag Select Table Contents, Align Center, Add Table Color

Highlight Heading, Change Font & Size

Highlight Word to add Anchor Link to, & add #introduction in Link box #introduction Anchors allow links to jump down to lower sections on the same page

Place Curser in front of the Word then go to, Insert>Named Anchor

Type in the Anchor Name Example: introduction, OK

Highlight New Anchor to see the Name in Properties Below

Add Anchors in Front of Each Section

For Links to Separate Web Pages (example of files in website folder) Introduction file is named index.html

Highlight the Word to Link to & Type the Link Properties Name task.htm

To Link to Separate Pages Highlight Word & Type Link Name conclusion.htm

External Links: Highlight Word & Type the full URL Link Properties

Links: Highlight Word & Type

File>Save As

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

File>Preview in Browser>Edit Browser List

Select Internet Explorer for the Web Browser

File>Preview in Browser>Internet Explorer

See How the Anchors Do Not Show in Preview Mode

View>Design or Design Icon

View>Code (HTML) or Code Icon

View>Code & Design or Split Icon

Insert>Image or Image Icon

Locate the.gif or.jpg File on the Desktop to Place in your Website Be sure you do not pick up the desktop or folder path, or when uploaded to the server your graphics will not be found Correct link: disk.jpg

Image Appears on Your Webpage

Images Can Be Placed Into Tables to Control Spacing

Upload All Files to iDrive Web Server Space website1 index.html goals.htm instructor.htm syllabus.htm grading.htm rules.htm sitemap.htm graphic1.jpg graphic2.gif public_html website2 index.html task.htm process.htm resources.htm evaluation.htm standards.htm conclusion.htm graphic1.jpg graphic2.gif

File Naming Conventions All Lowercase Letters Short Descriptive Names No Spaces No Special Characters Correct File Extensions website1 (Folder Name) index.html (Intro Page) website1 index.html goals.htm instructor.htm syllabus.htm grading.htm rules.htm sitemap.htm graphic1.jpg graphic2.gif

Additional Resources Dreamweaver Tutorials: ial_index.html 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”