Introduction to Dreamweaver MX

1
Introduction to Dreamweaver MX

• COM344

2
Dreamweaver

• Web Authoring tool
• Site management tool
• Site import
• Update control
• Multiuser control
• Version MX in M2 and M4
• Get a free copy via the university

3
Dreamweaver Pros and Cons

• Advantages
• Reduces the likelihood of making errors while
  creating pages
• Disadvantages
• It can not be easily used by main stream computer
  users without some training
• Allows for the development of complex sites,
  hence complex code which user may not understand
  if required to edit without Dreamweaver support

4
Design Layout
5
Code
6
Code and Design
7
Page Properties
8
Modifying Objects
9
Property Inspector
10
Insert Bar
Hyperlink
Image placeholder
Flash
Layer
Named Anchor
Date
Comment
Nav Bar
Tag chooser
Rollover
Tabular Data
Table
image
Email link
Fireworks
Horizontal rule
11
Two Types of Table

• Standard - for holding data
• Layout - for page design
• Select View menu choose Table View and then
  either standard or layout

12
Inserting a Standard Table

• Select Insert Table button on the insert bar
• Choose Insert - Table from the menus
• Use the keyboard shortcut CtrlAltT

13
Attributes

• ROWS
• Columns
• Width and height
• Border
• Cell Padding
• Cell - Spacing

• Number of horizontal rows
• Number of vertical columns
• percentage or pixels
• Width of border around each cell and the entire
  table
• Space between a cells border and its contents
• The number of pixels between each cell.

14
Change Cell Row Properties
15
Changing Entire Table Properties
Widths clear column widths, convert to pixels,
convert to
Heights clear row heights, convert to pixels,
convert to
16
Merging/splitting cells
17
Tutorial

• Create a basic Homepage using dreamweaver
• Re-create the following page using dreamweaver
• http//osiris.sunderland.ac.uk/com344/htmltut.html