![Page 1: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/1.jpg)
2008 Pearson Education, Inc. All rights reserved.
1
2020
Adobe Dreamweaver®
CS3
![Page 2: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/2.jpg)
2008 Pearson Education, Inc. All rights reserved.
2
We must select the illusion which appeals to our temperament, and embrace it with passion, if we want to be happy.
—Cyril Connolly
The symbolic view of things is a consequence of long absorption in images. Is sign language the real language of Paradise?
—Hugo Ball
What you see is what you get (WYSIWYG).—Anonymous
All human knowledge takes the form of interpretation.
—Walter Benjamin
![Page 3: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/3.jpg)
2008 Pearson Education, Inc. All rights reserved.
3
OBJECTIVESIn this chapter you will learn: To use Dreamweaver CS3 effectively. To develop web pages in a visual
environment. To insert images and links into web pages. To create XHTML elements such as tables
and forms. To insert scripts into Dreamweaver pages. To use the Spry framework to create
richer, more dynamic web applications. To use Dreamweaver’s site-management
capabilities.
![Page 4: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/4.jpg)
2008 Pearson Education, Inc. All rights reserved.
4
20.1 Introduction
20.2 Adobe Dreamweaver CS3
20.3 Text Styles
20.4 Images and Links
20.5 Symbols and Lines
20.6 Tables
20.7 Forms
20.8 Scripting in Dreamweaver
20.9 Dreamweaver’s Spry Framework for Creating Dynamic Websites and Working with Ajax
20.10 Site Management
![Page 5: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/5.jpg)
2008 Pearson Education, Inc. All rights reserved.
5
20.1 Introduction
HTML editors assist in creating visually appealing websites
– Insert and edit text
– Create more complex XHTML elements, such as tables, forms and frames
Adobe Dreamweaver CS3 is a popular HTML editor
![Page 6: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/6.jpg)
2008 Pearson Education, Inc. All rights reserved.
6
20.2 Adobe Dreamweaver CS3
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
![Page 7: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/7.jpg)
2008 Pearson Education, Inc. All rights reserved.
7
Fig. 20.1 | Dreamweaver Start Page.
![Page 8: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/8.jpg)
2008 Pearson Education, Inc. All rights reserved.
8
Fig. 20.2 | Dreamweaver’s editing environment.
![Page 9: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/9.jpg)
2008 Pearson Education, Inc. All rights reserved.
9
20.2 Adobe Dreamweaver CS3
Creating a new document– File > New... or
– Select HTML under the Create New heading of the Start Page
– Select Blank Page tab, then HTML from the Page Type: list
– Set DocType to XHMTL 1.0 Strict to make XHTML compliant code
– Select the Create button
![Page 10: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/10.jpg)
2008 Pearson Education, Inc. All rights reserved.
10
20.2 Adobe Dreamweaver CS3
Adding text– Type in Document window
– Automatically enclosed in <p> tag
Changing page title– Right-click in Document window or select the Page
Properties button the Property Inspector
– Select Page Properties- Title/Encoding
– File > Preview in browser
![Page 11: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/11.jpg)
2008 Pearson Education, Inc. All rights reserved.
11
Fig. 20.3 | New Document dialog.
![Page 12: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/12.jpg)
2008 Pearson Education, Inc. All rights reserved.
12
Fig. 20.4 | Page Properties dialog.
![Page 13: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/13.jpg)
2008 Pearson Education, Inc. All rights reserved.
13
Fig. 20.5 | Example of Fig. 4.1 in Dreamweaver.
![Page 14: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/14.jpg)
2008 Pearson Education, Inc. All rights reserved.
14
20.2 Adobe Dreamweaver CS3
Code View– Document toolbar
– Code is colored
- Customizable by Edit > Preferences > Code Coloring
![Page 15: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/15.jpg)
2008 Pearson Education, Inc. All rights reserved.
15
Fig. 20.6 | Document toolbar.
![Page 16: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/16.jpg)
2008 Pearson Education, Inc. All rights reserved.
16
Fig. 20.7 | Code view.
![Page 17: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/17.jpg)
2008 Pearson Education, Inc. All rights reserved.
17
20.2 Dreamweaver Adobe CS3
Saving your work– File > Save
– Create new folder
– File name field
– HTML Documents file type (file extension .html)
![Page 18: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/18.jpg)
2008 Pearson Education, Inc. All rights reserved.
18
Fig. 20.8 | Save As dialog.
![Page 19: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/19.jpg)
2008 Pearson Education, Inc. All rights reserved.
19
20.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
![Page 20: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/20.jpg)
2008 Pearson Education, Inc. All rights reserved.
20
Fig. 20.9 | Applying heading tags and centering using Dreamweaver.
![Page 21: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/21.jpg)
2008 Pearson Education, Inc. All rights reserved.
21
20.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
![Page 22: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/22.jpg)
2008 Pearson Education, Inc. All rights reserved.
22
Fig. 20.10 | Styling text using code and sup elements.
![Page 23: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/23.jpg)
2008 Pearson Education, Inc. All rights reserved.
23
Fig. 20.11 | List creation in Dreamweaver.
![Page 24: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/24.jpg)
2008 Pearson Education, Inc. All rights reserved.
24
Software Engineering Observation 20.1
Dreamweaver uses text-manipulation techniques that sometimes produce inefficient code. Make sure to check the code often to know exactly the kind of XHTML Dreamweaver is producing. Thorough knowledge of a page and what XHTML elements are present is necessary for advanced scripting.
![Page 25: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/25.jpg)
2008 Pearson Education, Inc. All rights reserved.
25
Look-and-Feel Observation 20.1
When you press Enter after typing text in Design view, Dreamweaver encloses that text in a new paragraph <p> element. If you want to insert only a <br /> tag into a page, hold Shift while pressing Enter.
![Page 26: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/26.jpg)
2008 Pearson Education, Inc. All rights reserved.
26
Look-and-Feel Observation 20.2
You can manipulate the properties of almost any element displayed in the Dreamweaver window by right clicking an element and selecting its properties from the menu that pops up.
![Page 27: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/27.jpg)
2008 Pearson Education, Inc. All rights reserved.
27
Fig. 20.12 | Definition list inserted using the Text menu.
![Page 28: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/28.jpg)
2008 Pearson Education, Inc. All rights reserved.
28
20.3 Text Styles
The CSS Styles panel designates new styling for tags selections such as an unordered list or ordered list
New CSS Rule... Dialog defines style elements
![Page 29: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/29.jpg)
2008 Pearson Education, Inc. All rights reserved.
29
Fig. 20.13 | CSS Styles Panel.
![Page 30: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/30.jpg)
2008 Pearson Education, Inc. All rights reserved.
30
Fig. 20.14 | List with styles applied using CSS.
![Page 31: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/31.jpg)
2008 Pearson Education, Inc. All rights reserved.
31
20.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
![Page 32: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/32.jpg)
2008 Pearson Education, Inc. All rights reserved.
32
Fig. 20.15 | Image source selection in Dreamweaver.
![Page 33: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/33.jpg)
2008 Pearson Education, Inc. All rights reserved.
33
20.4 Text 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
![Page 34: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/34.jpg)
2008 Pearson Education, Inc. All rights reserved.
34
Fig. 20.16 | Image properties in the Property Inspector.
![Page 35: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/35.jpg)
2008 Pearson Education, Inc. All rights reserved.
35
20.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
![Page 36: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/36.jpg)
2008 Pearson Education, Inc. All rights reserved.
36
Fig. 20.17 | Insert Other Characters dialog.
![Page 37: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/37.jpg)
2008 Pearson Education, Inc. All rights reserved.
37
Software Engineering Observation 20.2
When you insert a local image into an unsaved document, Dreamweaver sets an absolute path, such as file:///C|/Dreamweaver sites/camel.gif. Saving the document sets the image source to a relative path, starting at the folder in which the document is saved (e.g., camel.gif).
![Page 38: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/38.jpg)
2008 Pearson Education, Inc. All rights reserved.
38
20.5 Symbols and Lines
Representing an equation– Use special characters for any symbols– Insert > HTML > Horizontal Rule
- Adds an <hr> tag- Width
- Height
- Align
![Page 39: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/39.jpg)
2008 Pearson Education, Inc. All rights reserved.
39
Fig. 20.18 | Horizontal Rule properties.
![Page 40: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/40.jpg)
2008 Pearson Education, Inc. All rights reserved.
40
Fig. 20.19 | Special characters and hr elements in Dreamweaver.
![Page 41: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/41.jpg)
2008 Pearson Education, Inc. All rights reserved.
41
20.6 Tables
Creating tables– Often confusing process
– Possible to create graphically in Dreamweaver– Insert > Table
- Specify rows, columns and appearance
![Page 42: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/42.jpg)
2008 Pearson Education, Inc. All rights reserved.
42
Fig. 20.20 | Insert Table dialog.
![Page 43: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/43.jpg)
2008 Pearson Education, Inc. All rights reserved.
43
20.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
![Page 44: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/44.jpg)
2008 Pearson Education, Inc. All rights reserved.
44
Fig. 20.21 | Table with two rows and two columns.
![Page 45: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/45.jpg)
2008 Pearson Education, Inc. All rights reserved.
45
Fig. 20.22 | Table Property Inspector.
![Page 46: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/46.jpg)
2008 Pearson Education, Inc. All rights reserved.
46
Fig. 20.23 | Split Cell dialog.
![Page 47: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/47.jpg)
2008 Pearson Education, Inc. All rights reserved.
47
Fig. 20.24 | Merging cells in a table.
![Page 48: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/48.jpg)
2008 Pearson Education, Inc. All rights reserved.
48
Fig. 20.25 | Almost completed table.
![Page 49: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/49.jpg)
2008 Pearson Education, Inc. All rights reserved.
49
20.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
![Page 50: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/50.jpg)
2008 Pearson Education, Inc. All rights reserved.
50
Fig. 20.26 | Forms Insert bar.
![Page 51: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/51.jpg)
2008 Pearson Education, Inc. All rights reserved.
51
Fig. 20.27 | Text field Property Inspector.
![Page 52: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/52.jpg)
2008 Pearson Education, Inc. All rights reserved.
52
20.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
![Page 53: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/53.jpg)
2008 Pearson Education, Inc. All rights reserved.
53
Fig. 20.28 | List Values dialog box.
![Page 54: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/54.jpg)
2008 Pearson Education, Inc. All rights reserved.
54
20.7 Forms
Creating a feedback form– Text fields
– List/Value menu
– Textarea
– Radio group- Radio buttons
– Buttons
– action and method fields
![Page 55: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/55.jpg)
2008 Pearson Education, Inc. All rights reserved.
55
Fig. 20.29 | Completed form.
![Page 56: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/56.jpg)
2008 Pearson Education, Inc. All rights reserved.
56
20.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
![Page 57: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/57.jpg)
2008 Pearson Education, Inc. All rights reserved.
57
Fig. 20.30 | Behaviors panel and menu to add behaviors.
![Page 58: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/58.jpg)
2008 Pearson Education, Inc. All rights reserved.
58
20.8 Scripting in Dreamweaver
Other supported languages– ASP.NET
– JSF
– PHP
– Also found in Window menu
![Page 59: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/59.jpg)
2008 Pearson Education, Inc. All rights reserved.
59
20.9 Dreamweaver’s Spry Framework for Creating Dynamic Websites and Working with Ajax
Many toolkits available that provide prebuilt controls to enhance web applications
– Dreamweaver’s new Spry Framework Develop dynamic and robust web pages Only need basic knowledge of HTML, CSS and JavaScript Framework includes
– JavaScript library with prebuilt, but customizable, widgets - Textarea- Textfield - Menu Bar
– Effects - Grow- Shrink- Fade - Highlight
– Ajax capabilities
![Page 60: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/60.jpg)
2008 Pearson Education, Inc. All rights reserved.
60
20.9 Dreamweaver’s Spry Framework for Creating Dynamic Websites and Working with Ajax Use Ajax and the Spry framework to check for
errors in any given field – Real-time error checking
– Server receives information on a field by field basis
– Corrections can be made instantly
– Reduces amount of information sent back-and-forth between client and server
![Page 61: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/61.jpg)
2008 Pearson Education, Inc. All rights reserved.
61
Fig. 20.31 | Spry Tools.
![Page 62: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/62.jpg)
2008 Pearson Education, Inc. All rights reserved.
62
Fig. 20.32 | Inserting Spry Validation Text Fields.
![Page 63: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/63.jpg)
2008 Pearson Education, Inc. All rights reserved.
63
Fig. 20.33 | Using a Spry Text Field to validate data before continuing to fill out a form.
![Page 64: 2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3](https://reader036.vdocuments.us/reader036/viewer/2022062309/56649f175503460f94c2d39f/html5/thumbnails/64.jpg)
2008 Pearson Education, Inc. All rights reserved.
64
20.10 Site Management
Dreamweaver site management tools– Window > Files
– Manage Sites dialog- Create new site
- Manage existing site
– Site Definition Wizard
– Assets panel