Adobe Dreamweaver CS3 Unleashed- P2

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:50

Thêm vào BST

Báo xấu

109
lượt xem 28
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Adobe Dreamweaver CS3 Unleashed- P2: The good news is Dreamweaver provides numerous windows, panels, inspectors, and toolbars for streamlining the way you build websites. The bad news, unfortunately, is that Dreamweaver provides numerous windows, panels, inspectors, and toolbars for streamlining the way you build websites. Why so many windows, panels, and so on, Dreamweaver is unprecedented in the feature set it provides, allowing developers complete control when building websites and applications....

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Adobe Dreamweaver CS3 Unleashed- P2

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 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 () or strong () tag as well as an italic () or emphasis () tag. Paragraph, Blockquote, & Preformatted— Allows you to format blocks of text with the paragraph () tag, indent text with the blockquote () tag, or preserve the formatting of content with the preformatted () 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 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 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 — 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:
1. As an example, find the Close Window Button snippet located within the Form Elements category in the Snippets panel. 2. After you've selected it, you should see the snippet code within the panel's Preview pane similar to Figure 1.32. Figure 1.32. The snippet's code will appear within the Snippets panel's Preview pane. [View full size image] 3. Drag the snippet onto the Document window. You can also select the snippet and choose the Insert button located near the bottom-left corner of the Snippets panel. Furthermore, you could also double- click the snippet to insert it wherever your cursor is positioned within the Document window. 4. To preview the functionality, save your work and then select the Preview In Browser option (or press F12/Option+F12) from the Preview/Debug in Browser menu within the Document toolbar. As you can see from Figure 1.33, selecting the button within the browser causes the browser window to attempt to close itself. Figure 1.33. The Close Window Button snippet is a piece of code that causes the browser window to close. [View full size image]
This is a small example of using the Snippets panel, but it clearly demonstrates the possibilities. I encourage you to explore the different snippets because they will greatly improve your development efficiency. You may also want to add to the Snippets panel. For instance, if you write lengthy code that you don't want to replicate every time you need to use it, you can add it as a snippet for easier reference and use. To create a new snippet, follow these steps: 1. As an example, switch to Code view, and then add the following code snippet that causes a table row to change color when the user's mouse rolls over the row: Hello World The code added to the page will resemble lines 9–14 shown in Figure 1.34. Figure 1.34. Add some code to the page within Code view that we can later turn into a snippet. [View full size image]
2. Highlight the code, right-click (Control+click) to access the context menu, and choose Create New Snippet. 3. The Create New Snippet dialog box appears, allowing you to give your snippet a name, description, type, and so on. Fill in the blanks so that your dialog box resembles Figure 1.35. Figure 1.35. Give your new snippet a name, description, and associative type. [View full size image]
4. Click OK. The new snippet will be added to the Snippets panel automatically. Note Snippets are added to the Snippets panel and are placed into the folder where your cursor was last positioned. You can reposition your snippet by dragging it into a new folder or creating a new folder altogether by selecting the New Snippet Folder icon located at the bottom right of the Snippets panel. You can use your new snippet by selecting it and dragging it over to the Document window as much as you want. To view it in the browser, choose Preview In Browser or press F12 (Option+F12). The Tag Inspector Panel Group The Tag Inspector panel group, which includes the Attributes and Behaviors panels, is a handy panel to use for setting various attributes of selected HTML tags and styles. Although the true benefits of this panel set will become more obvious as the book unfolds, you can see the power of the Attributes panel immediately by placing your cursor within the code of your page and then expanding the nodes within the Attributes panel. As Figure 1.36 illustrates, various attributes and their values associated with a selected tag are outlined within the panel. Figure 1.36. The Attributes panel outlines attributes and their values for a selected tag. [View full size image]
You can begin to see that the Attributes panel mirrors functionality in the Property inspector. The obvious difference, however, is that the Attributes panel is a more technical and less visual approach to the attributes of a specific tag. You can also switch between a categorized and list view by selecting the appropriate button located just under the tab itself. You can make the Tag Inspector panel group visible or hide it by selecting Tag Inspector from the Window menu or by pressing F9 (Option+Shift+F9). The Behaviors Panel Also part of the Tag Inspector panel group, the Behaviors panel allows you to work with a myriad of prebuilt JavaScript behaviors. With a single click of the Add (+) button, a list of behaviors are immediately available to your web pages. You can make the Behaviors panel visible or hide it by selecting Behaviors from the Window menu or by pressing Shift+F4. The Behaviors panel will be covered in greater depth in Chapter 10, "Using Dreamweaver Behaviors." The Results Panel As mentioned in an earlier section, the Results panel is a centralized location for performing searches, page validation, browser compatibility checks, checking links, creating site reports, and so on. You can interact with the Results window in one of two ways. You can make the Results window visible or hide it by selecting Results from the Window menu or by pressing F7. Furthermore, the Results panel will automatically appear when using functionality it exposes, such as the FTP log, Find and Replace, and more. The true power of this panel will become evident as the book unfolds. The Reference Panel The Reference panel is a handy set of reference books built directly into a panel. References ranging from a ColdFusion Function, ColdFusion Markup, ASP, ASP.NET, CSS, HTML, JavaScript, JSP, PHP, SQL, XML, XSLT, and Accessibility are all included. You can make the Reference panel visible or hide it by selecting Reference from the Window menu or by pressing Shift+F1.
The History Panel At its most basic functionality, the History panel provides a visual, historical list of steps performed. The panel features a slider that you can use to scroll through steps in the history. In contrast to selecting Edit, Undo or pressing Ctrl+Z, the History panel also allows you to select a specific point in time to return to. Other features include the capability to create commands by highlighting a set of steps, right-clicking (Control+clicking), and choosing Save As Command. Commands are covered in much more detail in Chapter 13, "Enhancing Workflow." You can make the History panel visible or hide it by selecting History from the Window menu. The Frames Panel You can use the Frames panel when working with frames and framesets, covered in more detail in Chapter 8, "Working with Frames and Framesets." You can make the Frames panel visible or hide it by selecting Frames from the Window menu or by pressing Shift+F2. The Code Inspector As you can see from Figure 1.37, the Code Inspector is a detached code window. Figure 1.37. The Code Inspector is a detached code window that mirrors the functionality and look of Code view. [View full size image] The only real difference between the Code Inspector and Code view is that the Code inspector lets you continue working within the Design view, at the same time offering a detached, floating coding environment—perfect for dual monitor environments. You can make the Code Inspector visible or hide it by selecting Code Inspector from the Window menu or by pressing F10 (Option+F10).
The Timelines Panel As you will see in Chapter 16, "Working with the Timeline," the Timelines panel is a frame-based window that facilitates animation and interactivity with objects in the Document window. You can make the Timelines 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 own. Available by choosing one of the three options from the Workspace Layout submenu, you can easily choose from a preconfigured layout style including Coder (Windows only), Designer (Windows only), and Dual (for working in dual monitor setups). Choosing one of these options configures the panels and windows according to the predefined layout. Optionally, you can create your own workspace layout. To create your own workspace layout, follow these steps: 1. Organize windows and panels within Dreamweaver according to how you would like to work. 2. Choose Window, Workspace Layout, Save Current. The Save Workspace Layout dialog appears. 3. Enter a name for your new layout and click OK. The new layout will appear within the Workspace Layout submenu. If you want to delete a workspace layout, choose Window, Workspace Layout, Manage. Select the layout name you want to remove and click Delete. The saved workspace layout will be removed from the list. Of course, you can also rename a layout by choosing the layout and then selecting the Rename button. This launches the Rename Workspace Layout dialog, in which you can rename your layout and then click OK to apply the changes.
The Menu Bar The last development-related component to be covered is arguably the most obvious, the menu bar. Although Dreamweaver offers an assortment of panels, toolbars, and inspectors, the menu bar always remains consistent and never needs to be hidden or made to be visible. Just about every feature we've covered thus far can be inserted, modified, or referenced through the menu bar, with few exceptions. A generic list of menu items is listed next, complete with highlights: Dreamweaver— This Mac only menu, also referred to as the Application menu, contains the About, Keyboard Shortcuts, Preferences, and Quit menu options for Mac users. File— Contains common file-based operations such as New, Open, Close, Save, and Revert. Highlights include the capability to preview your page in the browser, check your page against a validator or target browser, and maintain Design Notes. Edit— Allows you to perform common editing tasks such as undo, redo, cut, copy, paste, and select all. Highlights include the capability to set user preferences for Windows users. View— Anything associated with Document window viewing preferences can be found here, including visual aids; rulers; grid; the Code, Split, and Design views, and head content. Insert— Anything that can be inserted into your document can be found within this menu. Alternatively, you can access these options visually by way of the Insert bar by choosing Window, Insert or pressing Ctrl+F2 (Command+F2). Modify— After you've inserted objects you'll want to have the capability to manipulate them somehow. Although most properties can be changed through panels or the Property inspector, the Modify menu is a much more thorough list of modifiable properties. Text— Manipulate text objects through this menu. Highlights include the capability to check your spelling. Commands— Commands are similar to plug-ins or macros. They are prebuilt components that execute or insert content within the Document window. We'll discuss Commands in much more detail in Chapter 13, "Enhancing Workflow." Site— After you've defined a site, all site-related options can be found within this menu. Highlights include the capability to scan your site for broken links, change links, and even generate site reports. Window— All panels can be opened through the Window menu. Highlights include the capability to hide 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 making development easier. The challenge is now putting everything together that you've learned conceptually about the myriad of panels and windows so that they make sense in practice. In the next chapter, we'll begin the transition by creating a simple web page. As you'll see, the panels, inspectors, and windows will make much more sense after you've started putting the concepts you've learned here into production.
Chapter 2. Building a Web Page IN THIS CHAPTER Creating a New Document Working with Documents in Design View Inserting Time and Date Inserting a Horizontal Rule Working with Images Working 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 contained within user customizable panel groups that facilitate the addition of functionality for your pages, a feature-rich inspector to assist you in the addition of properties for elements within the Document window, and a complete menu bar that structures every Dreamweaver feature into an easy-to-use grouped list of options. Beyond the simplicities of learning the user interface lies creating an actual web page. In this chapter, you'll take the foundation that you gained in the previous chapter and build on it to create a simple web page. Using the many panels, inspectors, and windows that you explored in the previous chapter, you'll create a new page in Design view, work with text within the Document window, add images to your web page, examine linking using hyperlinks, and finally, learn how to work with your web pages in Code view. You can work with the examples in this chapter by downloading the support files from 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 has been opened for the first time, it does little good, if we need to create a new document when document window instances are already open. In such cases, you'll want to use the New Document dialog box. Accessible by selecting File, New, and shown in Figure 2.1, the New Document dialog box enables you to create new documents based on an existing predefined skeleton file, create new documents based on a prebuilt template, and so on. Figure 2.1. The New Document dialog box enables you to open new documents, new