Upload
bonnie-richard
View
223
Download
2
Embed Size (px)
Citation preview
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
2004 Prentice Hall, Inc. All rights reserved.
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.
2004 Prentice Hall, Inc. All rights reserved.
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
2004 Prentice Hall, Inc. All rights reserved.
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
2004 Prentice Hall, Inc. All rights reserved.
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
2004 Prentice Hall, Inc. All rights reserved.
6
19.2 Macromedia Dreamweaver 2004 MX
• 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)
2004 Prentice Hall, Inc. All rights reserved.
7
19.2 Macromedia Dreamweaver 2004 MX
• Creating new document, cont.– Make document XHTML compliant checkbox– Create button
2004 Prentice Hall, Inc. All rights reserved.
8
19.2 Macromedia Dreamweaver 2004 MX
• Adding text– Type in Document window
– Automatically enclosed in <p> tag
• Changing page title– Right-click in Document window– Select Page Properties
• Title/Encoding
– File > Preview in browser
2004 Prentice Hall, Inc. All rights reserved.
9
19.2 Macromedia Dreamweaver 2004 MXFig. 19.2 Page Properties dialog.
Category listPage font
Text Size
Text colorBackground color
Background image
2004 Prentice Hall, Inc. All rights reserved.
10
19.2 Macromedia Dreamweaver 2004 MXFig. 19.3 Example of Fig 4.1 in Dreamweaver.
2004 Prentice Hall, Inc. All rights reserved.
11
19.2 Macromedia Dreamweaver 2004 MX
• Code View– Document toolbar
– Code is colored• Customizable by Edit > Preferences > Code Coloring
2004 Prentice Hall, Inc. All rights reserved.
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
2004 Prentice Hall, Inc. All rights reserved.
13
19.2 Macromedia Dreamweaver 2004 MXFig. 19.5 Code view.
2004 Prentice Hall, Inc. All rights reserved.
14
19.2 Macromedia Dreamweaver 2004 MX
• Saving your work– File > Save
– Create new folder– File name field– HTML Documents file type
2004 Prentice Hall, Inc. All rights reserved.
15
19.2 Macromedia Dreamweaver 2004 MXFig. 19.6 Save As dialog.
2004 Prentice Hall, Inc. All rights reserved.
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>
12 <h2 align="center">Level 2 Header</h2>
13 <h3 align="center">Level 3 Header</h3>
14 <h4 align="center">Level 4 Header</h4>
15 <h5 align="center">Level 5 Header</h5>
16 <h6 align="center">Level 6 Header</h6>
17 </body>
18 </html>
2004 Prentice Hall, Inc. All rights reserved.
18
19.3 Text StylesFig. 19.7 Applying header tags and centering using Dreamweaver.
2004 Prentice Hall, Inc. All rights reserved.
19
19.3 Text Styles
• Other styles– Text > Style
– <code> for formulas and code– <sup> for superscript
• Exponents
• Lists can be created in design mode– <ul> for unordered lists– <dl> for definition lists
• <dt> definition term• <dd> definition data
2004 Prentice Hall, Inc. All rights reserved.
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><strong>FTP</strong></dt>
3 <dd>File Transfer Protocol</dd>
4 <dt><strong>GIF</strong></dt>
5 <dd>Graphics Interchange Format</dd>
6 <dt><strong>XHTML</strong></dt>
7 <dd>HyperText Markup Language</dd>
8 <dt><strong>PNG</strong></dt>
9 <dd>Portable Network Graphics</dd>
10 </dl>
2004 Prentice Hall, Inc. All rights reserved.
22
19.3 Text StylesFig. 19.9 Definition list inserted using the Text menu.
2004 Prentice Hall, Inc. All rights reserved.
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
2004 Prentice Hall, Inc. All rights reserved.
24
19.4 Images and LinksFig. 19.10 Image source selection in Dreamweaver.
2004 Prentice Hall, Inc. All rights reserved.
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
2004 Prentice Hall, Inc. All rights reserved.
26
19.4 Images and LinksFig. 19.11 Image properties in the Property inspector.
Width Height Image source
Image name(for scripting)
Hyperlink
Align
2004 Prentice Hall, Inc. All rights reserved.
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
2004 Prentice Hall, Inc. All rights reserved.
28
19.5 Symbols and LinesFig. 19.12 Insert Other Characters dialog.
2004 Prentice Hall, Inc. All rights reserved.
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
2004 Prentice Hall, Inc. All rights reserved.
30
19.5 Symbols and LinesFig. 19.13 Using the Insert menu to alter the Insert bar’s appearance.
Insert menu Horizontal rule
2004 Prentice Hall, Inc. All rights reserved.
31
19.5 Symbols and LinesFig. 19.14 Horizontal rule properties.
Width Height
Percent or pixels Alignment
2004 Prentice Hall, Inc. All rights reserved.
32
19.5 Symbols and LinesFig. 19.15 Special characters and hr elements in Dreamweaver.
2004 Prentice Hall, Inc. All rights reserved.
33
19.6 Tables
• Creating tables– Often confusing process
– Possible to create graphically in Dreamweaver– Insert > Table
• Specify rows, columns and appearance
2004 Prentice Hall, Inc. All rights reserved.
34
19.6 TablesFig. 19.16 Insert Table dialog.
RowsTable width
Cell padding
Header options
Columns
Border thickness
Cell spacing
Accessibility options
2004 Prentice Hall, Inc. All rights reserved.
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
2004 Prentice Hall, Inc. All rights reserved.
36
19.6 TablesFig. 19.17 Table with two rows and two columns.
Tag selector
2004 Prentice Hall, Inc. All rights reserved.
37
19.6 TablesFig. 19.18 Table Property inspector.
Background colorMerge cellsSplit cells Alignment Border color
Fig. 19.19 Split Cell dialog.
2004 Prentice Hall, Inc. All rights reserved.
38
19.6 TablesFig. 19.20 Table Property inspector.
2004 Prentice Hall, Inc. All rights reserved.
39
19.6 TablesFig. 19.21 Almost completed table.
2004 Prentice Hall, Inc. All rights reserved.
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
2004 Prentice Hall, Inc. All rights reserved.
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
2004 Prentice Hall, Inc. All rights reserved.
42
19.7 FormsFig. 19.23 Text field Property inspector.
Width
Name and id Maximum characters
Text field type
Initial value
2004 Prentice Hall, Inc. All rights reserved.
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
2004 Prentice Hall, Inc. All rights reserved.
44
19.7 FormsFig. 19.24 List Values dialog box.
Name and id
List Values
Item Label Item Value
2004 Prentice Hall, Inc. All rights reserved.
45
19.7 Forms
• Creating a feedback form– Text fields
– List/Value menu
– Textarea
– Radio group• Radio buttons
– Buttons– action and method fields
2004 Prentice Hall, Inc. All rights reserved.
46
19.7 FormsFig. 19.25 Completed form.
2004 Prentice Hall, Inc. All rights reserved.
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
2004 Prentice Hall, Inc. All rights reserved.
48
19.8 Scripting in DreamweaverFig. 19.26 Behaviors panel and add behaviors menu.
Event Action
Add behaviorRemove behavior
Behaviors tab
2004 Prentice Hall, Inc. All rights reserved.
49
19.8 Scripting in Dreamweaver
• Other supported languages– ASP
– ColdFusion
– PHP
– JSP
– Also found in Window menu
2004 Prentice Hall, Inc. All rights reserved.
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