Adobe Dreamweaver CS3 Unleashed- P2 ppsx

used as way of embedding the content of a secondary page within your page within a small scrollable window. It's important to note, however, that the IFrame is deprecated and it should be replaced whenever possible with the much more flexible <div> tag. Frames Menu— Opens the Frameset submenu, which enables you to pick from various options for splitting the Document window into frames. Frames are covered in more detail in Chapter 8, "Working with Frames and Framesets." Form Objects Covered in much more detail in Chapter 9, "Working with HTML Forms," form objects facilitate interactivity between your users and your dynamic web applications. Aside from adding form objects by using the Insert, Form menu, you can visually add form objects from this category. The list of available objects includes Form, Text Field, Hidden Field, Textarea, Checkbox, Radio Button, Radio Group, List/Menu, Jump Menu, Image Field, File Field, Button, Label, Fieldset, and various Spry validation elements including Spry Validation Text Field, Spring Validation Textarea, Spry Validation Checkbox, and Spry Validation Select. Data Objects Throughout the second half of this book, you will become increasingly familiar with data objects. Depending on what server technology you're using, the Data category of the Insert bar will tailor itself to accommodate features and functionality of a specific technology. To prove this point I'll briefly create a sample ASP.NET page. As you can see from Figure 1.22 (before) and Figure 1.23 (ASP.NET site), the Application category looks slightly different before I created the ASP.NET site than afterwards. Figure 1.22. The categories of the Insert bar when you're working with a normal HTML file. [View full size image] Figure 1.23. The categories of the Insert bar when you're working with an ASP.NET file. Also notice the new ASP.NET category. [View full size image] It's also important to notice that depending on the server technology you decide to use, a new category will appear to support development for that particular technology. In my case, because I created a new ASP.NET page, an ASP.NET tab appears, complete with elements that I can use for that technology. Again, server technologies will be covered in much more detail in the second half of the book. Spry Objects The Spry framework is a JavaScript library that provides designers and developers with the capability to build web pages that offer richer experiences to their site's visitors. With Spry, you can use HTML, CSS, and a minimal amount of JavaScript to incorporate and visually work with XML data in your HTML documents. With various "widgets" such as accordions, menu bars, validation elements, effects, and more, it has never been easier to work with disconnected XML data in an HTML-based web page. Although we'll cover the Spry framework in much more detail in Chapter 30, "Introducing the Spry Framework for Ajax," for now, note that the Spry category in the Insert bar outlines various Spry elements, also shown in Figure 1.24, that you may decide to use within your web pages. Figure 1.24. The new Spry objects make it easy to insert and work with XML data visually and interactively. [View full size image] Text Objects As you can see from Figure 1.25, text objects provide a section from the Insert bar from which text can be easily formatted. Figure 1.25. Use text objects when manipulating the look of text within the Document window. [View full size image] Text objects can be broken into the following categories (moving from left to right): Font Weights and Styles— Allows you to add a bold (<b>) or strong (<strong>) tag as well as an italic (<i>) or emphasis (<em>) tag. Paragraph, Blockquote, & Preformatted— Allows you to format blocks of text with the paragraph (<p>) tag, indent text with the blockquote (<blockquote>) tag, or preserve the formatting of content with the preformatted (<pre>) tag. Headings— Provides three heading options (H1, H2, H3) for your text. Lists— Allows you to pick from three types of lists: ordered list (numbered) and unordered list (bulleted) and the required tags within these two types of lists: li (list item). Also shown is the definition list (dl) including tags contained within the definition list including dt (definition title) and dd (dictionary definition). Abbreviations and Acronyms— Assign the abbreviation or acronym tag to text within your page. Characters (BR sub menu)— Select from a group of predefined special characters from this menu. The most obvious are listed (line break, non-breaking space, left and right quote, dash, pound, euro, yen, copyright, registered trademark, and trademark. You can also choose from a character map by selecting the Other Characters option. Doing so launches the Insert Other Characters dialog, which allows you to choose from a map of characters supported on your computer. It's important to note that most text-based formatting features are available from the Property inspector. Like most of the other features within the Insert bar, the Text category provides a simpler, visual method for applying text-based formatting. Favorites As you familiarize yourself with using the various categories of the Insert bar, you'll quickly begin to realize that you're using some objects more than others. When this happens you may want to group some of your favorite objects within the Favorites category, making them quicker and easier to reference. To add an object to the Favorites category of the Insert bar, follow these steps: 1. Switch to the Favorites category of the Insert bar. A message within the category will instruct you to right-click (Control+click) the bar to customize your favorite objects. 2. Right-click (Control+click) the bar, as the instructions indicate, and select Customize Favorites. 3. The Customize Favorite Objects dialog box will appear. 4. Select your favorite objects from the Available Objects section on the left and add them to the Favorite Objects section on the right by clicking the double-arrow button in the center (see Figure 1.26). Figure 1.26. Add your favorite objects from the Available Objects list to the Favorite Objects list. [View full size image] 5. Click OK. Your new favorite objects will now be added to the Favorites category of the Insert bar. If you'd like to remove favorite objects, simply select each favorite from the Favorite objects list in the Customize Favorite Objects dialog and choose the trash can icon. The Property Inspector If you haven't noticed by now, the Property inspector is the horizontal pane located directly underneath the Document window shown in Figure 1.27. Figure 1.27. The Property inspector adjusts its editable properties based on the task at hand. [View full size image] The Property inspector—unlike any other piece of Dreamweaver's user interface—automatically tailors itself to the task at hand. For instance, up to this point I've demonstrated simple "Hello World" examples using both plain text and tables. Although we won't begin to cover the concepts until later chapters, this is the perfect opportunity to discuss the adjustments that the Property inspector will make for each element, and subsequent other elements, that you will work with throughout the book. Tip If the Property inspector is not visible, you can always make it visible by selecting Window, Properties. So far you may have noticed that the Property inspector provides options for editing fonts, colors, indentation, alignments, and so on by placing your cursor within a blank Document window. This is known as a text-based Property inspector. Although we'll be using the Property inspector for a lot of the examples within the book, it's important to note the changes that the Property inspector makes when working with other elements. To demonstrate this, I'll quickly add a table to the Document window by selecting Insert, Table, modifying some of the options from the Insert Table dialog box, and choosing OK. With the Table now within the Document window, try placing your cursor somewhere inside the table. As you'll see, the Property inspector changes to accommodate editable properties for a cell. Now let's try using a feature that you've already learned: the Tag Selector. This time with your cursor inside the table, select the <table> tag from the Tag Selector. Again, as you can see from Figure 1.28, the Property inspector changes, this time to the Table Property inspector. Figure 1.28. Selecting the table tag from the Tag Selector causes the Property inspector to change to the Table Property inspector. [View full size image] The important concept to remember here is that the Property inspector will change to accommodate any selected element. Because there are so many elements to work with in Dreamweaver, the Property inspector can be deceptively tough to figure out—especially if you're working with an element that you're unfamiliar with. Just remember—if you're working with the text, the Property inspector will accommodate text; if you're working with tables, the Property inspector accommodates Tables, and so on. A couple of other elements that are worth mentioning appear within the Property inspector no matter what element is selected. These four elements are also highlighted in Figure 1.28 and are described with more detail next: Element Icon— Every possible HTML element that can be modified within the Property inspector is represented by its own icon. Quick Help— Opens the Dreamweaver help menu with the element you're working with as the indexed topic. Quick Tag Editor— Similar to right-clicking (Control+clicking) a tag within the Tag Selector and choosing Edit Tag, the Quick Tag Editor allows you to quickly format attributes and values for a tag without having to switch to Code view. Disclosure Triangle— If you haven't noticed yet, the Property inspector is divided into two sections by a horizontal line running down the middle. The basic properties (located in the top half) and advanced properties (located in the bottom half) can be collapsed and expanded by selecting this icon. Panels Dreamweaver contains many panels, toolbars, inspectors, and menus to aid in the development of your web pages. Although we've talked about a select few options centralized within and around the Document window, this section focuses on the myriad of other panels that are also at your disposal. Interacting with Panels Dreamweaver includes a library of panels, all organized within panel groups and readily available from the Window menu. Opening a panel and its associated panel group is a matter of choosing the panel you want from the Window menu. For instance, because we'll be talking about the CSS Styles panel shortly, I'll select it from the Window menu. As you can see from Figure 1.29, the panel, along with the AP Elements panel, opens as the CSS panel group, docked above the Files panel group. Figure 1.29. The CSS Styles panel can be opened by selecting CSS Styles from the Window menu. [View full size image] You can also undock panels by dragging them out of their docked state. For instance, if I wanted to make the Design panel group a free-floating panel, I would simply click, hold, and drag from the icon just to the left of the text and within the blue menu bar similar to Figure 1.30. Figure 1.30. Panels can be docked and undocked freely. [View full size image] The reverse is also possible by dragging the panel group back into the list of panels on the right side of the development area. You can also minimize and open panels by selecting the name from the blue menu bar or choosing the small arrow icon next to the name. Every panel supports its own unique functionality. This is made obvious by the small icons located on the bottom right of the panel. Advanced options for every panel are also available from the panel Options menu, easily accessed by selecting the icon located on the far right of the blue menu bar and shown selected in Figure 1.31. Figure 1.31. Every panel features a panel Options menu that includes advanced features related to the specific panel. [View full size image] At the bottom of the panel Options menu, you'll notice six distinct options that are consistent with every panel menu and are also available from the context menu (right-clicking/Control+clicking on the blue menu bar) of the panel. These six options are the following: Help— Opens the Dreamweaver Help index with the selected panel as the selected topic. Group <Panel Name> with— Choose this option if you want to associate a specific panel with a different group. You can also select the New Panel Group option if you want to disassociate a panel with its group and make it free standing. Close <Panel Name>— Choose this option when you want to close a specific panel. You can always reopen it within its panel group by selecting the specific option from the Window menu. Rename Panel Group— Opens the Rename Panel Group dialog box. Choosing this option allows you to customize the name of the panel group. Maximize Panel Group— Expands the panel group so that it consumes the entire vertical area of the panel menu on the right side of the development area. Doing this while docked causes other panels to automatically minimize. Close Panel Group— Closes the panel group. After a panel group has been closed, it must be reopened from the Window menu. The CSS Styles Panel Part of the CSS panel group, the CSS Styles panel allows you to create and work with styles and style sheets. You can make the CSS Styles panel visible or hide it by selecting CSS Styles from the Window menu. The CSS Styles panel will be covered in greater depth in Chapter 6, "Page Formatting Using Cascading Style Sheets." The AP Elements Panel Also part of the CSS panel group, the AP Elements panel allows you to name and change the stacking order and visibility of AP Elements within the Document window after they've been added. You can make the AP Elements panel visible or hide it by selecting AP Elements from the Window menu or by pressing the F2 shortcut key. The AP Elements panel will be covered in greater depth in Chapter 7, "Page Structuring Using Cascading Style Sheets." The Application Panel Group As you begin to build dynamic applications toward the second half of the book, the Application panel group will become your best friend. The Application panel group, which includes the Databases, Bindings, Server Behaviors, and Components panels will be covered extensively in the second half of the book. The Files Panel Part of the Files panel group, and covered with more detail in the next chapter, the Files panel is a centralized repository for managing sites and files within sites. At its most basic level, the Files panel acts similar to your operating system's file explorer in that it allows you to browse your computer, network, and desktop. It also lists FTP and RDS servers, again, covered in more detail in the next chapter. You can make the Files panel visible or hide it by selecting Files from the Window menu or by pressing the F8 key. The Assets Panel Also part of the Files panel group, the Assets panel is an integrated image, color, URL, Flash, Shockwave, movie, script, template, and Library Item management window. From this panel you have various options for managing and working with the features listed previously as well as adding and customizing favorites you use most often. You can make the Assets panel visible or hide it by selecting Assets from the Window menu or by pressing the F11 (Option+F11) key. The Snippets Panel The last panel available within the Files panel group is the Snippets panel. The Snippets panel allows you to create and store scripts, markup, and notes that you use and reuse most frequently while developing web pages. Dreamweaver ships with a set of snippets that include text, navigation, meta (which includes meta tags), JavaScript, header, form, footer, content table, comment, and accessibility snippets. You can make the Snippets panel visible or hide it by selecting Snippets from the Window menu. There are numerous snippets that you can add to your documents. So many, in fact, that I won't attempt to cover them all here. Instead, I'll show you how to easily add a snippet to your page, and then show you how to create your own snippets from code. Adding snippets to your page is as easy as finding a snippet that you like and that relates to the functionality you need, and then simply adding it to the page. To add a snippet to your page, follow these steps: [...]... panel visible or hide it by selecting Timelines from the Window menu or by pressing Alt+F9 (Option+F9) Workspace Layouts Whereas older versions of Dreamweaver allowed Windows users to select from two predefined workspace layouts (coder and designer), Dreamweaver CS3 affords the opportunity to choose from other, more specific window layouts and offers both Windows and Mac users the capability to create your... it's important to note that Dreamweaver supports two development modes: traditional HTML and CSS Out of the box, Dreamweaver defaults to the more feature-rich and standards-compliant CSS mode Although it's certainly advantageous to work in this mode, it's not beneficial to introduce CSS so early in the book To disable CSS formatting temporarily, choose Edit, Preferences (Dreamweaver, Preferences on... all panels or to cascade and tile open Document window instances Help— Access the Dreamweaver, Spry, ColdFusion, and other help windows from this menu Highlights include access to the built-in tutorials, forums, and support center, as well as Activating or Deactivating the program Summary As you've seen in this chapter, Dreamweaver provides numerous panels, windows, inspectors, toolbars, and menus for... with Hyperlinks Working with a Web Page in Code View In the previous chapter, you learned about the many windows, bars, panels, and menus that Dreamweaver includes to aid you in the development of your web pages You learned that the Document window is the heart of Dreamweaver and where most of your creative energy will be focused You also learned that the Document window is surrounded by a myriad of panels... www.dreamweaverunleashed.com You'll want to save the files contained within the Chapter02\Exercises\Beginning\VectaCorp folder in an easy-to-find location I'll place mine in C:\VectaCorp\Chapter02 Creating a New Document In the previous chapter, you learned that the Start Page is a handy window used to open new, existing, or recently accessed documents Although the Start Page will work fine when Dreamweaver. .. within Document Type Definition on W3C servers When you run Dreamweaver' s built-in page validator, the page is validated against the DTD you select here Options within this list include None, HTML 4.01 Transitional, HTML 4.01 Strict, XHTML 1.0 Transitional, XHTML 1.0 Strict, XHTML 1.1, and XHTML Mobile 1.0 Layout CSS— With this new version of Dreamweaver, the product team made a serious push toward integrating... The option launches Dreamweaver' s Help window with the New Document dialog box as the indexed selection Preferences— This option launches the Preferences dialog box with the New Document category selected Use this option to change preferences for creating new documents These options will be covered in Chapter 4, "Defining Preferences." Get More Content— This option launches the Dreamweaver Exchange... with Hyperlinks Working with a Web Page in Code View In the previous chapter, you learned about the many windows, bars, panels, and menus that Dreamweaver includes to aid you in the development of your web pages You learned that the Document window is the heart of Dreamweaver and where most of your creative energy will be focused You also learned that the Document window is surrounded by a myriad of panels... www.dreamweaverunleashed.com You'll want to save the files contained within the Chapter02\Exercises\Beginning\VectaCorp folder in an easy-to-find location I'll place mine in C:\VectaCorp\Chapter02 Creating a New Document In the previous chapter, you learned that the Start Page is a handy window used to open new, existing, or recently accessed documents Although the Start Page will work fine when Dreamweaver. .. within Document Type Definition on W3C servers When you run Dreamweaver' s built-in page validator, the page is validated against the DTD you select here Options within this list include None, HTML 4.01 Transitional, HTML 4.01 Strict, XHTML 1.0 Transitional, XHTML 1.0 Strict, XHTML 1.1, and XHTML Mobile 1.0 Layout CSS— With this new version of Dreamweaver, the product team made a serious push toward integrating . Alt+F9 (Option+F9). Workspace Layouts Whereas older versions of Dreamweaver allowed Windows users to select from two predefined workspace layouts (coder and designer), Dreamweaver CS3 affords the opportunity to choose. windows, bars, panels, and menus that Dreamweaver includes to aid you in the development of your web pages. You learned that the Document window is the heart of Dreamweaver and where most of your. be modified within the Property inspector is represented by its own icon. Quick Help— Opens the Dreamweaver help menu with the element you're working with as the indexed topic. Quick Tag