2008 pearson education, inc. all rights reserved. 1 20 adobe dreamweaver® cs3
TRANSCRIPT
2008 Pearson Education, Inc. All rights reserved.
1
2020
Adobe Dreamweaver®
CS3
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
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.
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
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
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
2008 Pearson Education, Inc. All rights reserved.
7
Fig. 20.1 | Dreamweaver Start Page.
2008 Pearson Education, Inc. All rights reserved.
8
Fig. 20.2 | Dreamweaver’s editing environment.
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
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
2008 Pearson Education, Inc. All rights reserved.
11
Fig. 20.3 | New Document dialog.
2008 Pearson Education, Inc. All rights reserved.
12
Fig. 20.4 | Page Properties dialog.
2008 Pearson Education, Inc. All rights reserved.
13
Fig. 20.5 | Example of Fig. 4.1 in Dreamweaver.
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
2008 Pearson Education, Inc. All rights reserved.
15
Fig. 20.6 | Document toolbar.
2008 Pearson Education, Inc. All rights reserved.
16
Fig. 20.7 | Code view.
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)
2008 Pearson Education, Inc. All rights reserved.
18
Fig. 20.8 | Save As dialog.
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
2008 Pearson Education, Inc. All rights reserved.
20
Fig. 20.9 | Applying heading tags and centering using Dreamweaver.
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
2008 Pearson Education, Inc. All rights reserved.
22
Fig. 20.10 | Styling text using code and sup elements.
2008 Pearson Education, Inc. All rights reserved.
23
Fig. 20.11 | List creation in Dreamweaver.
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.
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.
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.
2008 Pearson Education, Inc. All rights reserved.
27
Fig. 20.12 | Definition list inserted using the Text menu.
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
2008 Pearson Education, Inc. All rights reserved.
29
Fig. 20.13 | CSS Styles Panel.
2008 Pearson Education, Inc. All rights reserved.
30
Fig. 20.14 | List with styles applied using CSS.
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
2008 Pearson Education, Inc. All rights reserved.
32
Fig. 20.15 | Image source selection in Dreamweaver.
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
2008 Pearson Education, Inc. All rights reserved.
34
Fig. 20.16 | Image properties in the Property Inspector.
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
2008 Pearson Education, Inc. All rights reserved.
36
Fig. 20.17 | Insert Other Characters dialog.
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).
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
2008 Pearson Education, Inc. All rights reserved.
39
Fig. 20.18 | Horizontal Rule properties.
2008 Pearson Education, Inc. All rights reserved.
40
Fig. 20.19 | Special characters and hr elements in Dreamweaver.
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
2008 Pearson Education, Inc. All rights reserved.
42
Fig. 20.20 | Insert Table dialog.
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
2008 Pearson Education, Inc. All rights reserved.
44
Fig. 20.21 | Table with two rows and two columns.
2008 Pearson Education, Inc. All rights reserved.
45
Fig. 20.22 | Table Property Inspector.
2008 Pearson Education, Inc. All rights reserved.
46
Fig. 20.23 | Split Cell dialog.
2008 Pearson Education, Inc. All rights reserved.
47
Fig. 20.24 | Merging cells in a table.
2008 Pearson Education, Inc. All rights reserved.
48
Fig. 20.25 | Almost completed table.
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
2008 Pearson Education, Inc. All rights reserved.
50
Fig. 20.26 | Forms Insert bar.
2008 Pearson Education, Inc. All rights reserved.
51
Fig. 20.27 | Text field Property Inspector.
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
2008 Pearson Education, Inc. All rights reserved.
53
Fig. 20.28 | List Values dialog box.
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
2008 Pearson Education, Inc. All rights reserved.
55
Fig. 20.29 | Completed form.
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
2008 Pearson Education, Inc. All rights reserved.
57
Fig. 20.30 | Behaviors panel and menu to add behaviors.
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
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
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
2008 Pearson Education, Inc. All rights reserved.
61
Fig. 20.31 | Spry Tools.
2008 Pearson Education, Inc. All rights reserved.
62
Fig. 20.32 | Inserting Spry Validation Text Fields.
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.
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