O B J E C T I V E S 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.
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
20.1 Introduction 831 O
u tl
in e
20.1 Introduction This chapter presents Adobe’s Dreamweaver CS3, perhaps the most popular visual HTML editor. A fully functional, 30–day trial version of Dreamweaver is available for download at www.adobe.com/cfusion/tdrc/index.cfm?product=dreamweaver. Please download and install the software before studying this chapter.
Using Dreamweaver, you can easily perform many of the tasks you learned in previous chapters. You can insert and edit text, as well as create more complex XHTML elements, such as tables, forms, frames and much more. In addition, this latest version of Dream- weaver now enables you to develop Ajax applications with Adobe’s Spry framework.
20.2 Adobe Dreamweaver CS3 Upon starting, Dreamweaver displays the default Start Page, which offers various op- tions, such as Open a Recent Item, Create New and Create from Samples (Fig. 20.1). For example, you can click the HTML option under the Create New heading to open a blank page in the default viewing mode (Fig. 20.2). Dreamweaver is a WYSIWYG (What You See Is What You Get) editor. Unlike editors that simply display XHTML code, Dream- weaver renders XHTML elements much as a browser would, using the WYSIWYG screen. This functionality enables you to design your web pages as they will appear on the web.
We will now recreate the book’s first XHTML example (Fig. 4.1) using Dream- weaver. To see a more detailed list of options for creating new files, create a new document by selecting New… from the File menu. In the New Document dialog, select the Blank page tab from the leftmost column, and HTML from the Page Type: list (Fig. 20.3). By default, Dreamweaver’s DocType (in the lower-right corner) is set to XHMTL 1.0 Transi- tional. Select the drop-down DocType menu and select XHTML 1.0 Strict—this will cause Dreamweaver to generate XHTML-compliant code. In the Layout: list, make sure
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 Spry Framework for Creating Ajax Applications
20.10 Site Management 20.11 Wrap-Up 20.12 Web Resources
Summary | Terminology | Self-Review Exercises | Answers to Self-Review Exercises | Exercises
832 Chapter 20 Adobe® Dreamweaver® CS3
Fig. 20.1 | Dreamweaver Start Page.
Fig. 20.2 | Dreamweaver editing environment.
Font
Text Size
Text Style
Text alignment
Property Inspector
Document window
Files panel
Hyperlink
Table
Images
Media
Templates
Tag Chooser
Insert bar
Document toolbar
Panels
Tag selector Text color
Document window
20.2 Adobe Dreamweaver CS3 833
Type
Welcome to XHTML!
in the Document window. Dreamweaver automatically places this text in the body element. Note that XHTML tags are not currently visible. We will switch to an alternate view in a moment to see the code that Dreamweaver generates. Now, to insert a title as we did in Fig. 4.1, right click in the Document window and select Page Properties… from the pop- up menu to view the Page Properties dialog (Fig. 20.4).
Fig. 20.3 | New Document dialog.
Fig. 20.4 | Page Properties dialog.
Background image
Text color
Background color
Page font
Font Size
Category list
834 Chapter 20 Adobe® Dreamweaver® CS3
The Category list lets the user select a set of properties to view. Select Title/Encoding from the Category list and enter Internet and WWW How to Program into the Title field. Clicking OK inserts a title element with the corresponding title text inside the head ele- ment of your XHTML code. [Note: You can also create a title by entering text directly into the Document title box (Fig. 20.6).] You now have a representation of the code in Fig. 4.1 in the WYSIWYG display (Fig. 20.5).
Though you have been editing using the WYSIWYG display, remember that you are still programming in XHTML. To view or edit the XHTML that Dreamweaver gener- ated, you must switch from Design view, the mode you are currently working in, to Code view. To do so, click the Code button in the Document toolbar (Fig. 20.6). Note that Dreamweaver automatically color-codes XHTML to make viewing easier (Fig. 20.7). The tag names, attribute values and page text are all displayed in different colors. The code- coloring scheme can be accessed (and modified) by selecting Preferences… from the Edit menu and clicking Code Coloring in the Category list.
To save your file, click Save in the File menu or press
Fig. 20.5 | Example of Fig. 4.1 in Dreamweaver.
Fig. 20.6 | Document toolbar.
Code view Design view Document title
File managementCode and design view
View in browser
Refresh Design view
View optionsFile name
Validate markup
Check browser compatibility
20.3 Text Styles 835
To view your page in a browser, press F12 or select Preview in Browser from the File menu. Note that the File menu option provides several browsers in which to view your code—more browsers can be added with the Edit Browser List… option. Your page should appear identical to the one in Fig. 4.1.
20.3 Text Styles In Dreamweaver, we can alter text properties with the Text menu or the Property Inspec- tor (Fig. 20.2). Using these tools, we can quickly apply heading tags (
, , etc.), list
Fig. 20.7 | Code view.
Fig. 20.8 | Save As dialog.
836 Chapter 20 Adobe® Dreamweaver® CS3
tags (
- ,
- ) and the definition data (
- ). Figure 20.12 shows the formatting produced by a definition list and the code Dreamweaver uses to produce it.
To apply the definition list as shown, select Definition List from the List submenu of the Text menu. In the Document window, type the first term you want to define. When you press Enter, Dreamweaver changes the style to match that of a definition. Pressing Enter again lets you enter another defined term. The bold style of the defined terms is applied by clicking the Bold button in the Property Inspector, which applies the strong
element.
Fig. 20.11 | List creation in Dreamweaver.
1 3 4
5 6Untitled Document 7 8 910
- 11
- FTP 12
- File Transfer Protocol
- GIF 14
- Graphics Interchange Format 15
- XHTML 16
- Extensible HyperText Markup Language 17
- PNG 18
- Portable Network Graphics 19
Fig. 20.12 | Definition list inserted using the Text menu. (Part 1 of 2.)
Ordered listUnordered list
20.3 Text Styles 839
Creating Style Sheets Dreamweaver provides powerful tools to integrate CSS easily into existing code. Type
Deitel Textbooks Internet & World Wide Web How to Program, 4/e Java How to Program, 7/e Visual Basic 2005 How to Program, 3/e C# For Programmers, 2/e
into the WYSIWYG display. Make the last four lines into unordered list elements using the method described above.
Select CSS Styles from the Window menu, or press
-F11 . The CSS Styles panel will appear on the right-hand side of the page (Fig. 20.13). Now, click the New CSS Rule icon (Fig. 20.13) to open the New CSS Rule dialog. Next to the Selector Type: prompt, select the Tag option. This designates your style selections to the particular tag selected in the Tag: prompt. Enter ul into this menu’s text box, or select it from the drop-down list. Next to the Define in: field, select the This document only radio button to create an embedded style sheet. The (New Style Sheet File) option generates an external style sheet.13
Fig. 20.12 | Definition list inserted using the Text menu. (Part 2 of 2.)
Bold Italic
840 Chapter 20 Adobe® Dreamweaver® CS3
Click OK to open the CSS Rule definition dialog. Type should already be selected in the Category menu. Next to the Decoration: field, check the underline box. Now select Background from the Category list, and enter #66ffff into the Background color: field. Click OK to exit the dialog and return to the Design view. The text within the
- and
Fig. 20.13 | CSS Styles panel.
Fig. 20.14 | List with styles applied using CSS.
New CSS Rule iconAttach Style Sheet icon
20.4 Images and Links 841
Now click the New CSS Rule icon to bring up the dialog again. This time, select Class under Selector Type:, and next to Name: enter special. In the CSS Rule definition dialog, select x-large from the Size: menu. Click OK to return to Style view, and highlight the word Deitel. Then right click the text and select CSS styles from the menu that appears. In the new menu, click special to apply the new class to the selected text. Your page should now appear as in Fig. 20.14.
Select the All option under the CSS Styles tab of the CSS Styles panel. There should now be a
- ) and several other tags used for styling text. Text can also be aligned left, right or centered, resized, indented and colored.
Create a new document, switch back to Design view and type the text, as shown in the screen capture of Fig. 20.9, into the Document window. Drag the mouse to highlight one line at a time and select the corresponding heading tag from the Format pull-down menu in the Property Inspector. Then, highlight all the text by pressing
As you can see, Dreamweaver is prone to produce somewhat inefficient code. In this case, for example, using Cascading Style Sheets (CSS) to center the text would have been more efficient. At the end of this section, we discuss how to integrate CSS into your web page without having to edit the XHTML in Code view.
1 3 4
5 610 11 12 13 14 15 16 17
Fig. 20.9 | Applying heading tags and centering using Dreamweaver.
Level 1 Heading
Level 2 Heading
Level 3 Heading
Level 4 Heading
Level 5 Heading
Level 6 Heading
20.3 Text Styles 837
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. 20.1
Dreamweaver is capable of much more extensive text formatting, such as creating mathematical formulas. For example, type
e = mc2
into a new WYSIWYG window, then highlight the text. You can now change the format- ting of the equation by selecting Style from the Text menu, and selecting Code. The Code option applies a code element to the highlighted text, which designates formulas or com- puter code. Many other useful text-formatting options are located in the Text menu, as well. Click the Code button in the Document toolbar to view the code, and find the 2 in the equation. Surround the 2 with a … tag. The … tag formats the enclosed text as a superscript. Notice that after typing , Dreamweaver automat- ically completes a matching end tag () after you have entered the </ characters. Click the Design button in the Document toolbar to view the fully formatted text (Fig. 20.10).
The formula can be further emphasized by selecting a Color… attribute from the Text menu. You can also access most of the elements in the Text menu (though not the color attribute) by right clicking highlighted text.
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
tag into a page, hold Shift while pressing Enter*.* 20.1
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. 20.2
Fig. 20.10 | Styling text using code and sup elements.
838 Chapter 20 Adobe® Dreamweaver® CS3
The Property Inspector is also useful for creating lists. Try entering the contents of a shopping list, as shown in Fig. 20.11, and applying the Unordered List style to the list elements. Apply an h2 element to the title of the list.
Select List from the Text menu for more list-related tags, such as the definition list (
- ). There are two list elements in a definition list—the defined term (