Embed Size (px)
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. - PowerPoint PPT Presentation
Citation preview
Macromedia DreamweaverMX2004 Tutorial
Launch DreamweaverSelect 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, SetFont, Text, Background Color
Links, SetLink, 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 NameExample: 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 PagesHighlight Word & Type Link Name
conclusion.htm
External Links: Highlight Word & Type the full URL Link Properties
http://www.google.com
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_htmlwebsite2
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: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”
