Adobe® reamweaver® CS3
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.
Adobe Dreamweaver CS3
Upon starting, Dreamweaver displays the default Start Page, which offers various options, 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 <none> is selected. Click the Create button to open the new document.
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).
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 <Ctrl>-S. The Save As dialog will appear, allowing you to specify a filename, type and location (Fig. 20.8). Create a folder in your C: drive named Dreamweaver sites. Type main into the File name field and select HTML Documents as the file type. Dreamweaver adds an .html filename extension if no extension is specified.
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.
Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.