2008 pearson education, inc. all rights reserved. 1 20 adobe dreamweaver® cs3

2008 Pearson Education, Inc. All rights reserved.

1

2020

Adobe Dreamweaver®

CS3


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


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.


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


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


6


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


7

Fig. 20.1 | Dreamweaver Start Page.


8

Fig. 20.2 | Dreamweaver’s editing environment.


9


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


10


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


11

Fig. 20.3 | New Document dialog.


12

Fig. 20.4 | Page Properties dialog.


13

Fig. 20.5 | Example of Fig. 4.1 in Dreamweaver.


14


Code View– Document toolbar

– Code is colored

- Customizable by Edit > Preferences > Code Coloring


15

Fig. 20.6 | Document toolbar.


16

Fig. 20.7 | Code view.


17

20.2 Dreamweaver Adobe CS3

Saving your work– File > Save

– Create new folder

– File name field

– HTML Documents file type (file extension .html)


18

Fig. 20.8 | Save As dialog.


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


20

Fig. 20.9 | Applying heading tags and centering using Dreamweaver.


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


22

Fig. 20.10 | Styling text using code and sup elements.


23

Fig. 20.11 | List creation in Dreamweaver.


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.


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.


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.


27

Fig. 20.12 | Definition list inserted using the Text menu.


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


29

Fig. 20.13 | CSS Styles Panel.


30

Fig. 20.14 | List with styles applied using CSS.


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


32

Fig. 20.15 | Image source selection in Dreamweaver.


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


34

Fig. 20.16 | Image properties in the Property Inspector.


35


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


36

Fig. 20.17 | Insert Other Characters dialog.


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).


38


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

- Adds an <hr> tag- Width

- Height

- Align


39

Fig. 20.18 | Horizontal Rule properties.


40

Fig. 20.19 | Special characters and hr elements in Dreamweaver.


41

20.6 Tables

Creating tables– Often confusing process

– Possible to create graphically in Dreamweaver– Insert > Table

- Specify rows, columns and appearance


42

Fig. 20.20 | Insert Table dialog.


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


44

Fig. 20.21 | Table with two rows and two columns.


45

Fig. 20.22 | Table Property Inspector.


46

Fig. 20.23 | Split Cell dialog.


47

Fig. 20.24 | Merging cells in a table.


48

Fig. 20.25 | Almost completed table.


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


50

Fig. 20.26 | Forms Insert bar.


51

Fig. 20.27 | Text field Property Inspector.


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


53

Fig. 20.28 | List Values dialog box.


54

20.7 Forms

Creating a feedback form– Text fields

– List/Value menu

– Textarea

– Radio group- Radio buttons

– Buttons

– action and method fields


55

Fig. 20.29 | Completed form.


56


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


57

Fig. 20.30 | Behaviors panel and menu to add behaviors.


58


Other supported languages– ASP.NET

– JSF

– PHP

– Also found in Window menu


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


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


61

Fig. 20.31 | Spry Tools.


62

Fig. 20.32 | Inserting Spry Validation Text Fields.


63

Fig. 20.33 | Using a Spry Text Field to validate data before continuing to fill out a form.


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