2004 prentice hall, inc. all rights reserved. 1 chapter 19 – macromedia dreamweaver mx 2004...

2004 Prentice Hall, Inc. All rights reserved.

1

Chapter 19 – Macromedia Dreamweaver MX 2004

Outline19.1 Introduction19.2 Macromedia Dreamweaver MX 200419.3 Text Styles19.4 Images and Links19.5 Symbols and Lines19.6 Tables19.7 Forms19.8 Scripting in Dreamweaver19.9 Site Management19.10 Web Resources


2

Objectives

• In this tutorial, you will learn:– To be able to use Dreamweaver MX 2004 effectively.

– To develop Web pages in a visual environment.

– To insert images and links into Web pages.

– To use Dreamweaver to create advanced XHTML elements such as tables and forms.

– To be able to insert scripts into Dreamweaver pages.

– To be able to use Dreamweaver’s site-management capabilities.


3

19.1 Introduction

• Designing successful sites is a huge job– Constantly require updates and maintenance

– Must be visually appealing

– New tools designed to help build and maintain sites• Not complete replacements for understanding XHTML code

– Dreamweaver MX 2004 is one popular tool


4

19.2 Macromedia Dreamweaver 2004 MX

• Workspace Setup– Design vs. code view

• Start page– Offers helpful options

– Create new HTML document

• WYSIWYG– What you see is what you get

– Displays XHTML as browser would


5

19.2 Macromedia Dreamweaver 2004 MXFig. 19.1 Dreamweaver editing environment.Insert menuHyperlinkTableImageMediaTemplatesTag chooser Insert bar

Document toolbar

Panels

Tag selector

FontText sizeText styleText color

Text alignment

Property Inspector

Document window

Files panel


6


• Creating new document– File > New

– Categories• Basic page

• Dynamic page

• Template page

• Other

• CSS Style Sheets

• Framesets

• Page Designs (CSS)

• Page Designs

• Page Designs (Accessible)


7


• Creating new document, cont.– Make document XHTML compliant checkbox– Create button

8


• Adding text– Type in Document window

– Automatically enclosed in tag

• Changing page title– Right-click in Document window– Select Page Properties

• Title/Encoding

– File > Preview in browser


9

19.2 Macromedia Dreamweaver 2004 MXFig. 19.2 Page Properties dialog.

Category listPage font

Text Size

Text colorBackground color

Background image


10

19.2 Macromedia Dreamweaver 2004 MXFig. 19.3 Example of Fig 4.1 in Dreamweaver.


11


• Code View– Document toolbar

– Code is colored• Customizable by Edit > Preferences > Code Coloring


12

19.2 Macromedia Dreamweaver 2004 MXFig. 19.4 Document toolbar.

File name

Code view

Code and Design view

Design view

Page Title

File managementView in browser

Refresh design view

View options


13

19.2 Macromedia Dreamweaver 2004 MXFig. 19.5 Code view.


14


• Saving your work– File > Save

– Create new folder– File name field– HTML Documents file type


15

19.2 Macromedia Dreamweaver 2004 MXFig. 19.6 Save As dialog.


16

19.3 Text Styles

• Possible to apply styles to text in design view– Similar to using word processor

– Highlight portion of text

– Select style or formatting to apply• Header tags

• List tags

• Alignment tags (center, left, right, justified)

– Changes reflected in code view

2004 Prentice Hall, Inc.All rights reserved.

Outline17

Styles sample(1 of 1)

1 <?xml version="1.0" encoding="iso-8859-1"?>

2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://

3 www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

4 <head>

5 <html xmlns="http://www.w3.org/1999/xhtml">

6 <head>

7 <title>Untitled Document</title>

8 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

9 </head>

10 <body>

11 <h1 align="center">Level 1 Header</h1>






17 </body>

18 </html>


18

19.3 Text StylesFig. 19.7 Applying header tags and centering using Dreamweaver.

19

19.3 Text Styles

• Other styles– Text > Style

– <code> for formulas and code– for superscript

• Exponents

• Lists can be created in design mode– <ul> for unordered lists– <dl> for definition lists

• <dt> definition term• <dd> definition data


20

19.3 Text StylesFig. 19.8 List creation in Dreamweaver.

2004 Prentice Hall, Inc.All rights reserved.

Outline21

Definition list (1 of 1)

1 <dl>

2 <dt>FTP</dt>

3 <dd>File Transfer Protocol</dd>

4 <dt>GIF</dt>

5 <dd>Graphics Interchange Format</dd>

6 <dt>XHTML</dt>

7 <dd>HyperText Markup Language</dd>

8 <dt>PNG</dt>

9 <dd>Portable Network Graphics</dd>

10 </dl>


22

19.3 Text StylesFig. 19.9 Definition list inserted using the Text menu.


23

19.4 Images and Links

• Inserting images– Insert > Image or Image button on Insert bar– Select Image Source dialog

• Browse to desired image

• URL generated by Dreamweaver


24

19.4 Images and LinksFig. 19.10 Image source selection in Dreamweaver.


25

19.4 Images and Links

• Adding links– Highlight text or image

– Enter destination URL into Link field of Property inspector

• Other properties available to change– Height– Width– Alignment


26

19.4 Images and LinksFig. 19.11 Image properties in the Property inspector.

Width Height Image source

Image name(for scripting)

Hyperlink

Align


27

19.5 Symbols and Lines

• Special symbols– Possible to add characters not on keyboard– Insert > HTML > Special Characters > Other…

• Insert Other Character dialog

– Useful for equations or characters not part of English alphabet


28

19.5 Symbols and LinesFig. 19.12 Insert Other Characters dialog.

29

19.5 Symbols and Lines

• Representing an equation– Use special characters for any symbols– Insert > HTML > Horizontal Rule

• Adds an <hr> tag• Width

• Height

• Align


30

19.5 Symbols and LinesFig. 19.13 Using the Insert menu to alter the Insert bar’s appearance.

Insert menu Horizontal rule


31

19.5 Symbols and LinesFig. 19.14 Horizontal rule properties.

Width Height

Percent or pixels Alignment


32

19.5 Symbols and LinesFig. 19.15 Special characters and hr elements in Dreamweaver.


33

19.6 Tables

• Creating tables– Often confusing process

– Possible to create graphically in Dreamweaver– Insert > Table

• Specify rows, columns and appearance


34

19.6 TablesFig. 19.16 Insert Table dialog.

RowsTable width

Cell padding

Header options

Columns

Border thickness

Cell spacing

Accessibility options

35

19.6 Tables

• Manipulating tables– Drag borders to resize

– Change background or border color

– Delete, split, merge cells• Tag selector

• <td> tag• Merge button• Alternatively, right-click, Table > Merge Cells


36

19.6 TablesFig. 19.17 Table with two rows and two columns.

Tag selector


37

19.6 TablesFig. 19.18 Table Property inspector.

Background colorMerge cellsSplit cells Alignment Border color

Fig. 19.19 Split Cell dialog.


38

19.6 TablesFig. 19.20 Table Property inspector.


39

19.6 TablesFig. 19.21 Almost completed table.


40

19.7 Forms

• Forms in Dreamweaver– Represented by dotted line

• Anything inside lines belongs to that form

– Insert > Form or Forms on Insert bar

• Form elements– Insert bar

– Property inspector


41

19.7 FormsFig. 19.22 Forms Insert bar.

Text field

Form Hidden field

Textarea

Checkbox

Radio button

Radio group

List/Menu

Jump menu

Image field

File field

Button

Label

Field set


42

19.7 FormsFig. 19.23 Text field Property inspector.

Width

Name and id Maximum characters

Text field type

Initial value


43

19.7 Forms

• Form elements, cont.– Textareas

• Scrollable text fields• Numlines

• Wrap

– List/Menu• Drop-down selection menu• List Values

• Items and values• Initially selected property


44

19.7 FormsFig. 19.24 List Values dialog box.

Name and id

List Values

Item Label Item Value


45

19.7 Forms

• Creating a feedback form– Text fields

– List/Value menu

– Textarea

– Radio group• Radio buttons

– Buttons– action and method fields


46

19.7 FormsFig. 19.25 Completed form.


47

19.8 Scripting in Dreamweaver

• Adding JavaScript to a Web page– Window > Behaviors

• Select element

• Click + button

• Select action

• Editing events– Select element

– Change event or action in Behaviors window


48

19.8 Scripting in DreamweaverFig. 19.26 Behaviors panel and add behaviors menu.

Event Action

Add behaviorRemove behavior

Behaviors tab


49

19.8 Scripting in Dreamweaver

• Other supported languages– ASP

– ColdFusion

– PHP

– JSP

– Also found in Window menu


50

19.9 Site Management

• Dreamweaver site management tools– Window > Files

– Manage Sites dialog• Create new site

• Manage existing site

– Site Definition Wizard

– Assets panel