Dreamweaver MX

1
Dreamweaver MX

• Cascading Style Sheets
• Drag drop / Dreamweaver behaviours
• (i.e. CSS, DHTML, JavaScript).
• Forms

2
Cascading Style Sheets

• Permits user-defined formatting of HTML objects
• Styles can be applied to many HTML objects
• Type, Background, Block, Box,Border, List,
  Positioning, plus miscellaneous Browser specific
  styles.
• CSS Style sheet can either be internal (stored in
  the Head part of the HTML document) or External
  (stored as a text file with a .CSS extension.)

3
Step 2 Name Style
Step 1 Click add new style
Step 3 Select This Document Only
Step 4 Define Style and click OK
Creating a Custom internal Style
4
Cascading Style Sheets
Internal CSS Styles
CSS definitions
HEAD
Text formatted in Titlestyle (to pick a
styleselect the text first and click on the
style you want in the CSS panel)
BODY
HTML Page
CSS Style icon
Select View gt Head Content and Dreamweaver
displays icons representing the objects stored in
the HEAD part of the HTML page
5
Cascading Style Sheets
External CSS Styles
When external CSS is used its file name is
displayed in the CSS panel
Attach CSS
Edit style sheet button
6
Cascading Style Sheets
External CSS Styles
Web Site
External CSS files
e.g. HTML page
CSS Style Sheet A
CSS Style Sheet B
More than one Style sheet can be applied to an
HTML page. Also, a Style sheet can be applied to
many pages. i.e. a single change to the style
sheet updates all the pages it is associated with.
7
Cascading Style Sheets
Redefining HTML styles
Step 1Click add style first
Step 3 Pick the tag to redefine
Step 4 Define the style in the dialog box that
appears and click ok
Step 2 Pick Redefine HTML tag
Note If a Browser does not support CSS then the
standard HTML style will be used to display the
object (e.g. text)
8
Drag and Drop

• Dreamweaver provides built-in DHTML to implement
  the dragging and dropping of layers
• You should remember that these behaviours are
  pre-defined JavaScript routines developed by
  Macromedia so they are only found in Dreamweaver.
  i.e. they are not found in other HTML authoring
  tools.
• However the output generated from Dreamweaver 4
  will work in Netscape 4.0 and I.E. 4.0
  without the need for a plugin.

9
Drag and Drop
The layer which is activated
The Target
10
Drag and Drop
Step 2 Select the Drag layer behaviour
Activating the Duck !
Step 1 select the ltBodygt tag to create an
Onload event
Step 3 Pick the layer to drag and define the
Target area i.e. the position of the nest !
Hint move the layer to the target and press Get
Current Position to define the target position
11
Drag and Drop
The advanced features allow the user to call
JavaScript functions (e.g. written by the
developer) or add a single line of
JavaScript (e.g. an alert message)
Or define only part of the layer as the handle
Called at the start of the drag event
The JavaScript function is only called when the
layer is dropped onto the target
12
Forms

• Dreamweaver provides an easy to use point and
  click approach to creating forms (much easier
  than typing in the HTML)
• The object panel provides Forms section

Add button (e.g Submit)
Add Text field (creates Textareas if multiple
line is selected in the property inspector)
Add Form
Add list
Insert File Field (e.g. allows a file from the
local PC to be selected and sent with the form)
Add image object (e.g. can be used to
create submit buttons)
Add radio button
Add check box
Add hidden object
13
Example Form
Forms are always shown in Dreamweaver within RED
DASHED LINEs
14
The rest of the book !

• Chapter 20 is covered next year when you study
  server sided Web development in module
• MIC213 Intermediate Web Techniques
• The remaining chapters should be read as part of
  the self study aspect of the module but are of
  less overall importance and relate to Dreamweaver
  features rather than Web functionality
• Chapter 23 Templates is a useful feature when
  developing large corporate Web sites

15
Tutorial

• Experiment in Dreamweaver
• Using an HTML page you have already created try
  creating some CSS styles (both internal and
  external)
• Explore the CSS selector style
• Create a drop and drag example similar to one
  shown in the lecture (create the required
  graphics in Fireworks)
• Self study Read hours 14 to 18