1.  2008 Pearson Education, Inc. All rights reserved. 1 20 Adobe Dreamweaver® CS3

2.  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

3.  2008 Pearson Education, Inc. All rights reserved. 3 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.

4.  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

5.  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

6.  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

7.  2008 Pearson Education, Inc. All rights reserved. 7 Fig. 20.1 | Dreamweaver Start Page.

8.  2008 Pearson Education, Inc. All rights reserved. 8 Fig. 20.2 | Dreamweaver’s editing environment.

9.  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

10.  2008 Pearson Education, Inc. All rights reserved. 10 20.2 Adobe Dreamweaver CS3  Adding text – Type in Document window – Automatically enclosed in 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.  2008 Pearson Education, Inc. All rights reserved. 11 Fig. 20.3 | New Document dialog.

12.  2008 Pearson Education, Inc. All rights reserved. 12 Fig. 20.4 | Page Properties dialog.

13.  2008 Pearson Education, Inc. All rights reserved. 13 Fig. 20.5 | Example of Fig. 4.1 in Dreamweaver.

14.  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

15.  2008 Pearson Education, Inc. All rights reserved. 15 Fig. 20.6 | Document toolbar.

16.  2008 Pearson Education, Inc. All rights reserved. 16 Fig. 20.7 | Code view.

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

18.  2008 Pearson Education, Inc. All rights reserved. 18 Fig. 20.8 | Save As dialog.

19.  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

20.  2008 Pearson Education, Inc. All rights reserved. 20 Fig. 20.9 | Applying heading tags and centering using Dreamweaver.

21.  2008 Pearson Education, Inc. All rights reserved. 21 20.3 Text Styles  Other styles –Text > Style – for formulas and code – for superscript - Exponents  Lists can be created in design mode – for unordered lists – for definition lists - definition term - definition data

22.  2008 Pearson Education, Inc. All rights reserved. 22 Fig. 20.10 | Styling text using code and sup elements.

23.  2008 Pearson Education, Inc. All rights reserved. 23 Fig. 20.11 | List creation in Dreamweaver.

24.  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.

25.  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 element. If you want to insert only a tag into a page, hold Shift while pressing Enter.

26.  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.

27.  2008 Pearson Education, Inc. All rights reserved. 27 Fig. 20.12 | Definition list inserted using the Text menu.

28.  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

29.  2008 Pearson Education, Inc. All rights reserved. 29 Fig. 20.13 | CSS Styles Panel.

30.  2008 Pearson Education, Inc. All rights reserved. 30 Fig. 20.14 | List with styles applied using CSS.

31.  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

32.  2008 Pearson Education, Inc. All rights reserved. 32 Fig. 20.15 | Image source selection in Dreamweaver.

33.  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

34.  2008 Pearson Education, Inc. All rights reserved. 34 Fig. 20.16 | Image properties in the Property Inspector.

35.  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

36.  2008 Pearson Education, Inc. All rights reserved. 36 Fig. 20.17 | Insert Other Characters dialog.

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

38.  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 tag - Width - Height - Align

39.  2008 Pearson Education, Inc. All rights reserved. 39 Fig. 20.18 | Horizontal Rule properties.

40.  2008 Pearson Education, Inc. All rights reserved. 40 Fig. 20.19 | Special characters and hr elements in Dreamweaver.

41.  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

42.  2008 Pearson Education, Inc. All rights reserved. 42 Fig. 20.20 | Insert Table dialog.

43.  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 - tag -Merge button - Alternatively, right-click, Table > Merge Cells

44.  2008 Pearson Education, Inc. All rights reserved. 44 Fig. 20.21 | Table with two rows and two columns.

45.  2008 Pearson Education, Inc. All rights reserved. 45 Fig. 20.22 | Table Property Inspector.

46.  2008 Pearson Education, Inc. All rights reserved. 46 Fig. 20.23 | Split Cell dialog.

47.  2008 Pearson Education, Inc. All rights reserved. 47 Fig. 20.24 | Merging cells in a table.

48.  2008 Pearson Education, Inc. All rights reserved. 48 Fig. 20.25 | Almost completed table.

49.  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

50.  2008 Pearson Education, Inc. All rights reserved. 50 Fig. 20.26 | Forms Insert bar.

51.  2008 Pearson Education, Inc. All rights reserved. 51 Fig. 20.27 | Text field Property Inspector.

52.  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

53.  2008 Pearson Education, Inc. All rights reserved. 53 Fig. 20.28 | List Values dialog box.

54.  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

55.  2008 Pearson Education, Inc. All rights reserved. 55 Fig. 20.29 | Completed form.

56.  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

57.  2008 Pearson Education, Inc. All rights reserved. 57 Fig. 20.30 | Behaviors panel and menu to add behaviors.

58.  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

59.  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

60.  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

61.  2008 Pearson Education, Inc. All rights reserved. 61 Fig. 20.31 | Spry Tools.

62.  2008 Pearson Education, Inc. All rights reserved. 62 Fig. 20.32 | Inserting Spry Validation Text Fields.

63.  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.

64.  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