20 Adobe Dreamweaver® CS3

What you see is what you get (WYSIWYG). 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

OBJECTIVES In 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.

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

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

20.2 Adobe Dreamweaver CS3 Workspace Setup Start page WYSIWYG 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

Fig. 20.1 | Dreamweaver Start Page.

Fig. 20.2 | Dreamweaver’s editing environment.

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

20.2 Adobe Dreamweaver CS3 Adding text Changing page title 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

Fig. 20.3 | New Document dialog.

Fig. 20.4 | Page Properties dialog.

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

20.2 Adobe Dreamweaver CS3 Code View Code is colored Document toolbar Code is colored Customizable by Edit > Preferences > Code Coloring

Fig. 20.6 | Document toolbar.

Fig. 20.7 | Code view.

20.2 Dreamweaver Adobe CS3 Saving your work Create new folder File > Save Create new folder File name field HTML Documents file type (file extension .html)

Fig. 20.8 | Save As dialog.

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

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

20.3 Text Styles Other styles Lists can be created in design mode <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

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

Fig. 20.11 | List creation in Dreamweaver.

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.

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.

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.

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

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

Fig. 20.13 | CSS Styles Panel.

Fig. 20.14 | List with styles applied using CSS.

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

Fig. 20.15 | Image source selection in Dreamweaver.

20.4 Text and Links Adding links Other properties available to change Highlight text or image Enter destination URL into Link field of Property inspector Other properties available to change Height Width Alignment

Fig. 20.16 | Image properties in the Property Inspector.

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

Fig. 20.17 | Insert Other Characters dialog.

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

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

Fig. 20.18 | Horizontal Rule properties.

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

20.6 Tables Creating tables Often confusing process Possible to create graphically in Dreamweaver Insert > Table Specify rows, columns and appearance

Fig. 20.20 | Insert Table dialog.

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

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

Fig. 20.22 | Table Property Inspector.

Fig. 20.23 | Split Cell dialog.

Fig. 20.24 | Merging cells in a table.

Fig. 20.25 | Almost completed table.

20.7 Forms Forms in Dreamweaver Form elements Represented by dotted line Anything inside lines belongs to that form Insert > Form or Forms on Insert bar Form elements Insert bar Property inspector

Fig. 20.26 | Forms Insert bar.

Fig. 20.27 | Text field Property Inspector.

20.7 Forms Form elements, cont. Textareas List/Menu Scrollable text fields Numlines Wrap List/Menu Drop-down selection menu List Values Items and values Initially selected property

Fig. 20.28 | List Values dialog box.

20.7 Forms Creating a feedback form Text fields List/Value menu Textarea Radio group Radio buttons Buttons action and method fields

Fig. 20.29 | Completed form.

20.8 Scripting in Dreamweaver Adding JavaScript to a Web page Window > Behaviors Select element Click + button Select action Editing events Change event or action in Behaviors window

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

20.8 Scripting in Dreamweaver Other supported languages ASP.NET JSF PHP Also found in Window menu

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

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

Fig. 20.31 | Spry Tools.

Fig. 20.32 | Inserting Spry Validation Text Fields.

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

20.10 Site Management Dreamweaver site management tools Window > Files Manage Sites dialog Create new site Manage existing site Site Definition Wizard Assets panel