Introduction to Dreamweaver MX 2004

1
Introduction to Dreamweaver MX 2004

• Jon Agnone
• agnone_at_u.washington.edu

2
What is Dreamweaver?

• Dreamweaver is the most powerful and professional
  looking web-design program available.

3
Why use Dreamweaver?

• Quality appearance of pages
• Ability to easily control text/image placement
• Easy integration of Flash and other webpage
  enhancements
• Works with all browsers

4
What we will cover today

• Understanding Dreamweaver Terminology Panels
• Preparing to create a web page
• How to create a basic web page
• How to upload your website to the UW server via
  FTP

5
Understanding Dreamweaver Terminology

• Dreamweaver uses three primary point click
  views layout, standard and expanded. The
  differences between these three views are
  explained below in more detail.
• In layout mode you use layout cells and tables to
  lay out your page before adding content.
• In standard mode youll want to do most of your
  table inputting and editing. It is a good idea to
  initially use layout mode to design the
  parameters of your page, then use standard mode
  to add content.
• Expanded mode temporarily adds cell padding and
  spacing to all tables in a document and increases
  the tables borders to make editing easier.

6
Views
7
Understanding Dreamweaver Terminology

• Dreamweaver also allows the user to change
  between viewing only the formatted page, only the
  code, or both.
• This can be useful for beginners who want to see
  how the code is generated, and for more advanced
  users who wish to modify the code.

8
Design Modes
9
Understanding Dreamweaver Panels

• Insert Bar
• The most commonly used tools are displayed here
  by group
• This can be changed to tabs for easier access
• Property Inspector
• Dynamic tool that changes depending on what task
  you are trying to accomplish
• Where the most commonly used formatting functions
  are accessed
• Files Panel
• Organizes site files and assets

10
Understanding Dreamweaver Panels
Insert Bar
Document Toolbar
Panel Group
Document Window
Files Panel
Tag Selector
Property Inspector
11
Preparing to create a web page

• Conceptualize and organize first
• Think about how you wish to structure each
  individual page as well as your website
• For example, frames or not?
• Place all necessary text, images and other files
  into separate folders
• Creating a page is easier if you have already
  gathered the necessary documents and images that
  will be a part of your page.
• Site Setup
• Dreamweaver works best if you do this, though new
  version seems less persistent.
• Easily organizes your site
• Can setup multiple sites

12
Creating a Basic Page

• Use layout view to partition space
• Insert pictures and text (example)
• Hot Spots
• Roll-over images and tabs
• Flash objects
• Embed links in pictures and text as necessary
• Relative vs. Absolute links
• Page preview (f12)
• Lets work through an example where we create a
  VERY basic page.

13
Important conventions to note

• Naming files
• Importance of Index files
• References to a URL go to index if unspecified
• References to folders default to index
• Lower case only (index.html)
• No spaces in names use underscores if you need
  space (test_page.html)
• Note the difference between .html .htm when
  creating links

14
Useful things to know

• Examining Code
• Choose View Source in browser window
• Right click on link and choose Open in New
  Window
• Borrowing content/color schemes
• Right click -gt Save as / Save Image As /
  Save Target As
• Web colors are noted with numbers, need to find
  these on page if you want to copy colors
  precisely and match content to it
• Search source code for the color tag bgcolor
• For example, UW purple is "663399"

15
Introduction to Dreamweaver MX 2004

• Jon Agnone
• agnone_at_u.washington.edu