| As the title of this chapter suggests, I'm going to deconstruct what I think are the most important components of the Dreamweaver interface. I won't point out every crazy detail of each panel at this point, but I will certainly cover them in other chapters, especially in some of the projects where it'll make more sense to do so. Properties Inspector The Properties Inspector is one of the most important panels inside of Dreamweaver. It provides information about different items within your HTML document, which cannot be found anywhere else within the interface. You might have heard that this panel is context sensitive, or at least that's what most authors or teachers end up calling it. That means it literally changes its appearance by providing detailed information about the item selected. For example, if you select a cell in a table it would offer options for background color, dimensions, horizontal, and vertical alignment, and so on. If I then select an image in the document, it would change to give me feedback on the dimension of the image, an option to hyperlink it, image mapping, and so. Therefore, I don't call it context sensitive, I call it Dreamweaver's little well in information. You, of course, can come up with your own nickname. The capability to display various options for different items inside of Dreamweaver is what makes the Properties Inspector so powerful and convenient; it's many panels all rolled up into one. There is no way to offer screen shots or pictures of each characteristic of this panel. However, as you begin to develop and work more and more with the product, you'll see all that the Properties Inspector has to offer. Refer to Figures 2.3, 2.4 and 2.5 to get a feel about how the Properties Inspector will behave. It's also a good idea to experiment a bit yourself, insert a table, an image, and even a Flash button, and then select these different elements and watch the Properties Inspector change. Figure 2.3. The Properties Inspector with nothing selected in the document provides typing options such as the typeface and font size.
Figure 2.4. The Properties Inspector with a table selected offers feedback and options for the table such as dimensions and background color.
Figure 2.5. The Properties Inspector with an image selected provides information on the image's dimensions, file size, and path to where the file is located.
NOTE Please visit the companion Web site at http://www.dreamweavermxunleashed.com and find a QuickTime movie further explaining the use of the Properties Inspector.
The Insert Panel If there were a second-most important panel in the Dreamweaver interface, perhaps the Insert panel would claim the honors. The Insert panel is now properly named, previous versions of Dreamweaver referred to it as the Objects panel. Essentially, it is the same thing with a new name and position on the screen. The Insert panel is docked (Windows) or located at the top of the window (Mac), as opposed to being displayed vertically as in previous versions. Refer to Figure 2.6 to see the Insert Panel. Figure 2.6. Notice the Insert panel has a horizontal placement at the top of the document.
With a click of the mouse, the Insert panel enables you to insert any item into your Dreamweaver document. To clear up any confusion, there is redundancy within Dreamweaver regarding this panel. Most of the options in the Insert panel can also be found under the Insert menu. In Figure 2.6 notice the Insert panel has several tabs, each offering additional objects under that topic. Each topic has several icons, which depending on how long you've been using Dreamweaver, may mean nothing to you. So, if you are new to Dreamweaver may I suggest a tip to make working with this panel a bit more user friendly. Under the Dreamweaver menu on the Mac, or under the File menu on Windows, choose Preferences. This will open the Preferences dialog box as displayed in Figure 2.7. Be sure to have the General tab selected. Notice toward the bottom portion of the dialog is a drop-down menu for appearance choices for the Insert panel. In the drop-down choose Icons and Text. Then, choose OK. Notice the Insert panel increases in size, but it also offers the name of the object to the right of the icon. This makes it easier for individuals not too familiar with this panel. However, as time goes by and your proficiency with Dreamweaver increases, you might want to set the style back to Icons Only to save space. Figure 2.7. The Preferences dialog box offers a series of options to cater the functionality of Dreamweaver to suit your needs.
Here's a list that provides a breakdown of each object for each tab in the Insert panel. You might find this to be a useful resource when you're stumped and can't figure out what a particular object is. Common Objects The objects under the common tab of the Insert Panel allow you to perform common tasks in Dreamweaver with a single click of the mouse. Hyperlink This object provides a dialog box, which contains options for creating hyperlinks within your HTML document. The dialog box also offers options for targets. Email This option also launches a dialog box. The dialog box provides two text fields, one to type some text to be hyperlinked, and the other to type the actual link. Named Anchor The Named Anchor object enables you to create HTML anchors. These anchors generally act as reference points for hyperlinks to link to an exact location on the page. Table To use this option you must be in the standard mode. The Table object will open a dialog providing options for how many rows and columns you want your table to be, as well as options for table width, border size, cell spacing, and cell padding. These tables are best used for simple linear designs and layouts. Layer As with the Table object, this option is only available in the standard view. Layers offer more freedom than regular HTML tables. Layers, like everything else in HTML, have certain advantages and disadvantages, which will be covered in more detail in Chapter 11, "Layers in Dreamweaver." Image This option enables you to insert an image into your document. That's it, nothing fancy, nothing special. Image Placeholder New to Dreamweaver MX is the option of inserting a placeholder image. This can be handy if you have to start laying out a page when all the graphics haven't been designed yet. This object does nothing more than insert an empty image tag with specified dimensions. Fireworks HTML If you ever create graphics or Web content in Fireworks, and you create a button, image map, or whatever within Fireworks, to preserve the functionality of that Fireworks document, you must export the HTML code along with the graphics. After doing that, the best way to get that Fireworks content into Dreamweaver is to use the insert Fireworks HTML object. With this object all you have to do is source the HTML document created by Fireworks, and all the functionality of the artwork is preserved in Dreamweaver. This topic is covered in greater detail in Chapter 15, "Integration with Complementing Programs." Flash This object enables you to insert .swf files created by any application capable of creating an .swf file, including Macromedia Flash, and Adobe Livemotion. This object works in much the same way as the insert image object. Rollover Image Easily create JavaScript rollovers without any coding. Simply choose an up-and-over state in the Rollover image dialog box. Remember this uses JavaScript, so avoid spacing and special characters in your naming conventions. Navigation Bar If you are disappointed by the limitations of the insert rollover object, the navigation bar might be the answer to your prayer. Create up to four states per button and create as many buttons as you would like all using an Up, Over, Down, and Over While Down states. You can position the navigation bar horizontally or vertically. You can only have one navigation bar per document. Horizontal Rule This object inserts a horizontal rule. Horizontal rules are used to divide content in HTML documents. Insert Date This object will open a dialog box providing options for day, date, and time formatting. There is also an option for automatically updating every time you save a document. This object is good for creating sections of your Web site that read "This page was last updated on _____." Insert Tabular Data This is the solution if you ever need to import a table from a database or a spreadsheet to your Web site. Rapidly create tables based on tabular data from applications such as Excel, Access, File Maker Pro, and the list goes on. Comment Insert comment enables you to place comments within your HTML code. This can come in handy for HTML programmers. Tag Chooser This is another new feature for Dreamweaver MX. It enables you to pick tags from any of the Markup or server-side languages. This chooser seems to provide solid information on HTML, ASP.NET, and ColdFusion, but lacks depth in the other categories. Layout Objects The layout objects really have only two options, which can be grayed out if in the standard view. The options are layout table and layout cell, as shown in Figure 2.8. They're pretty self-explanatory, however, to see these options in action please refer to Chapter 5, "Creating Tables." Figure 2.8. The Layout tab of the Insert panel offers options to help you design the layout of your document.
Text Objects Text Objects provides an area on the Insert panel to format text. The majority of these options are also available through the Properties Inspector when typing inside of Dreamweaver. The most interesting feature, as displayed in Figure 2.9, is the new Font Tag Editor. The Font Tag Editor is best used when hand coding in Dreamweaver, it allows single-click access to commonly typed tags and attributes. Instead of having to type tag attributes you can select them from the Font Tag Editor in a GUI interface. Figure 2.9. The Text Objects in the Insert panel contain objects for modifying text.
Table Objects Table Objects, much like Text Objects, provides single-click access to commonly typed tags when hand coding in Dreamweaver. All but the Table Object are grayed out in the design view as displayed in Figure 2.10. Figure 2.10. Notice all but the table objects are grayed when in the WYSIWYG design view.
Frame Objects You'll notice in Figure 2.11 the Frame Objects offer single-click access for creating any one of the predefined framesets. Dreamweaver is in no way limited to those framesets, but they can offer a great place to start. New in Dreamweaver MX are options for inserting tags for creating frames when hand coding, including the newly popular iFrames. I discuss framesets in further detail in Chapter 7, "Framesets." Figure 2.11. The Frame objects offer options for creating predefined frameset configurations, with a single click of the mouse.
Form Objects As Figure 2.12 suggests, there are many objects you can use when creating forms. All these objects in some way can add functionality to an HTML form. Again, to avoid repeating myself, I'm not going discuss all the options that appear in this chapter, I do however use them all in Chapter 6, "HTML Forms." Figure 2.12. The Form objects in the Insert panel contain objects used to build HTML forms.
Template Objects These objects offer options for creating, editing, and working with templates inside of Dreamweaver. This will not be the last time I say this, but I cover templates in Chapter 8, "Dreamweaver Templates," so I don't want to discuss all the options here. However, if you refer to Figure 2.13, the first button in the top-left corner allows you to create a template by simply clicking the button. The template objects are new to Dreamweaver MX. Figure 2.13. The Template objects in the Insert Panel contain objects for creating templates in Dreamweaver.
Character Objects As you will see in Figure 2.14, the characters object provides you with options for creating special characters within Dreamweaver. The main reason this can be so important is because HTML cannot render many special characters you use on a regular basis. For example, HTML has no idea what © means. However, if you write in the HTML code ©, a Web browser will render the copyright character on the screen. So, all the special characters listed here when pressed, will type some special tag in the HTML document. So, when you view it in a Web browser, the end user will see the character you intended them to see it. Figure 2.14. The Character Objects in the Insert panel contain characters that require special HTML code for a browser to render.
Also, notice in Figure 2.14 that there are characters called Line-Break and Non-Breaking Space. These characters are used constantly in Web development. Line-Break is exactly that. Have you ever typed something in Dreamweaver and wondered why when you hit the Return (Mac) or Enter (Windows) key your cursor moved down two lines instead of one? That's because you are really inserting a paragraph <p> tag into the HTML, which creates a paragraph break, never allowing you to get text to advance to the line underneath the current one. That's where Line-Break comes in. To insert a soft return or to advance the text line to the line directly beneath the current one, simply insert a line break. The line break will not give you a paragraph space. The keyboard shortcuts for line breaks are Shift+Return (Mac) or Shift+Enter (Windows). Media Objects The Media Objects tab enables you to insert different multimedia files into your HTML documents. These media files can produce more engaging, interactive Web sites. As you can see in Figure 2.15 the Media tab contains eight different objects. Flash This Flash object is essentially the exact same object found in the Common objects. Why does Macromedia do this? So you buy books from people like me or possibly some training videos, it makes the world go around. Flash Button Well, if you need to create a quick Flash button, this might do the trick. My advice to you is this, don't use them. I know it might seem harsh, but here are my reasons. If you're not using Flash anywhere else within your Web site, why start requiring the end user to have a plug-in to view one silly button? Every other Dreamweaver developer knows what these buttons look like, so you look kind of lame using them in professional work. If you're a new user, or working on a personal project, they are a-okay with me. In fact, you can even download more styles off the Dreamweaver Exchange. Of course, all this is my opinion, which you might not agree with, you might love these buttons and there is nothing wrong with that. Flash Text This is a similar option to the Flash button object. This also enables you to create Flash text inside of Dreamweaver. An advantage of Flash text is that it is vector-based, which offers smoother, crisper lines. The disadvantage is the same as the Flash button object. If you're not already using Flash within your HTML document, don't start by using just this Flash text. You will be requiring a plug-in just to view text. The best bet in that situation is to create text in Fireworks and save it as a .gif. Shockwave The Shockwave object will enable you to insert files created in Macromedia Director and any other application capable of exporting a Shockwave file. The functionality of this object behaves much like the insert Flash object. Applet This object enables you to insert Java applets, which are small programs written in Java. This object also behaves much like the insert Flash object. We have an entire chapter dedicated to inserting Java applets in this book. Param New to Dreamweaver MX is the capability to insert a parameter tag using the Insert Panel. This tag is used by Netscape to handle plug-ins. Active X You can also easily add the Object tag by clicking the Active X button. This is typically required by Microsoft's Internet Explorer when dealing with media. Plug-in The Plug-in object is best for inserting other types of media that don't have specific buttons. Technologies such as QuickTime are commonly inserted using the plug-in object. Note that with the plug-in object, this will not write the necessary Active X controls for QuickTime to work properly in Internet Explorer 6. I discuss this in greater detail in Chapter 13, "Adding Video and Audio." Figure 2.15. The Media Objects in the Insert Panel contain items for inserting plug-in type style media.
Head Objects The Head objects can play a crucial role in your Web site; from marketing to functionality. I like to think of it as the smart section of an HTML document; after all it is the head! Anyway, the Head objects enable you to create refreshes or meta tags. As shown in Figure 2.16, there are six different Head objects. Meta Meta tags can be used for a variety of different reasons. Typically, Meta tags consist of information about the document or add functionality to the document. Keywords Keywords are also meta tags, however, the keywords are typically picked up by the search engine's spiders. If you create a site and never register or submit it to any search engine or Web directory, you might still get a listing. The reason for that is because search engines run programs called spiders, which gather meta information from different Web sites. However, Internet searching has kind of turned into a professional sports arena. Have you ever noticed how you can't go to a ball game without visiting complexes named after big companies: Coors Field, Staples Center, United Center, and so on. To get the best visibility and listings on the Internet, you're going to have to pay for it. Description After you're lucky enough, or broke, and your URL gets a listing, what are the end users going to see? Well, you decide. The description you type will show up underneath your hyperlink in the results page of the search, as shown in Figure 2.17. Keep your descriptions short, but make them interesting. Often times the description determines whether the user clicks your link. Figure 2.17. Notice the description of the Web site located underneath the hyperlink when a search is performed with a search engine or Web directory.
Refresh The refresh object is a meta tag as well. This option will either refresh the current page, or refresh to a different page. Why would you do such a thing? Let's say you have a page displaying baseball scores, the catch is the scores are live, but it will display the current score on the load of the document. So, to get updates the end user will have to click the Reload or Refresh button on his browser. You can do this for him by placing a refresh tag in the document. The refresh object has options for how many seconds to wait before refreshing and what page to refresh to. Or, if you created some new pages on your Web site to replace some old ones, but you named them differently. Well, if you have a listing in a search engine, they'll have the link to your old page. All you have to do is place a refresh command in the linked document to have the page refresh to the new page just a few seconds after the page has been downloaded. Base You can change the directory of files with the base object when using relative addressing. Relative addressing is covered in greater detail in Chapter 4, "Dreamweaver Essentials." You can even link your files to a different Web site, all using this one command. There is also an option for changing the target for the linked documents. Link Even though there are a variety of reasons to use the link object, it is most commonly used with Cascading Style Sheets. It is used to point to a link between the current page and another page or file. Figure 2.16. The Head objects in the Insert Panel offer options for placing information within the head portion of an HTML document.
Script Objects The Script tab contains three objects, which are pictured in Figure 2.18. These objects are designed to add functionality within the Web page by the use of JavaScript and VBScript. Now unfortunately, you'll have to master one of these scripting languages to find these objects useful. There are some practical applications we can create without a great deal of knowledge of these scripting languages. Refer to Chapter 19, "Behaviors," to get more detailed information. Figure 2.18. The Script Objects in the Insert Panel offers the ability to place scripts in your HTML documents.
Application Objects The objects will only matter to you if you plan to do Web application development. These objects replace the Live objects in UltraDev 4. These objects enable you to quickly insert common tasks handled by a middleware as well as common page structures. As displayed in Figure 2.19, you can see that the Application Tab houses 10 different objects. Recordset When creating database-driven Web sites, like everything else on the Web, speed is key. Taking all the information out of the database when a user requests information is a time consuming, daunting, unrealistic, and unnecessary task, therefore, you can extract information out of certain tables to make the data more manageable. Recordsets are often referred to as database queries. Repeated Region This object is similar to that of the Repeat Region behavior found in the server behaviors panel. This object enables you to repeat the contents of a table. A good example of this is a results page from a search. See Chapter 31, "Adding Shopping Cart Functionality," for more detailed information. Dynamic Table This object allows you to insert a table populated with dynamic content. It can speed up the process of binding data to a static table. Recordset Navigation With the Recordset Navigation bar you can browse through the different records within a query. Dreamweaver will automatically place first, next, previous, and last buttons on your document, either in the form of text or images, with show if behaviors already applied to them. For more information on the Show If and Recordset Navigation bars, please refer to Chapter 28, "Working with Dynamic Data." Recordset Statistics The Recordset Statistics object enables your end user to have an indication as to what record they are viewing. For example, if they were looking at records 10 through 15 of 30 records within the Recordset, by using the Recorset Statistics object, they would see text displaying "Records 10 to 15 of 30." Master-Detail Page Set The object enables you to create a master-detail page relationship without any previously established content on a page. After using this object, it's very easy to modify the appearance of the page that gets created for you. For detailed information on master and detail pages, see Chapter 31. Record Insertion Form The Recordset Insertion Form creates a form document with all the necessary functionality to insert a record into an existing table with the database. Go to http://www.dreamweavermxunleashed.com for a QuickTime video explaining this object. Also refer to Chapter 27, "SQL Primer," for more information. Record Update Form Again this object is much like its cousin the Recordset Insertion Form object. The differences between the two are this: The Insertion Form object will write data to a specified table within the database. The Update Form does the same, but instead of creating a new record, you write over an existing one, thus updating it. Figure 2.19. The Application Objects in the Insert Panel are used for Web application development.
Middleware Tab You will get an additional tab if your are creating dynamic Web sites (database-driven). The middleware you are using will determine if you get an ASP, PHP, ColdFusion, JSP, or ASP.NET tab. Each of these tabs will add functionality to the middleware you are working with. As you can see in Figure 2.20, I have a PHP tab active when creating PHP pages. Figure 2.20. If I start off by creating a PHP page, I automatically get the PHP objects in the Insert Panel.
Site Window/Site Panel This is one of the interface elements inside of Dreamweaver that really differs between the Macintosh and Windows operating systems. This might make some Mac users jealous, but hey Mac users have Steve Jobs. With all kidding aside, the site window or panel is a key component of the Dreamweaver MX interface. In Figure 2.21 you'll see the site window on the Mac, and in Figure 2.22 you'll see the site panel in Windows. Remember, the site panel in Windows can be undocked and treated like a free-floating window, just like it is by default on the Mac. I think this window/panel is so important because this is where all the files are organized and, if needed, even linked. This is also where you manage your site to get and put files. There are a lot of features to review in this panel, and we'll look at them all in Chapter 3, "Dreamweaver MX Site Management." Figure 2.21. The site window is how you can view your site files on the Mac.
Figure 2.22. The site panel in Windows can be expanded or collapsed. The expanded view offers an easier look when managing your site.
Interacting with Panels The way you interact with panels in Dreamweaver MX is a bit different from what you might expect. You see, Adobe and Macromedia have been tangled in lawsuits for copyright infringement. Each company, as of this writing, have each won some lawsuits. I'm telling you this because one of the lawsuits that Adobe won, or you could say that Macromedia lost, has to do with the dockable panels. The change to the panels in the new version of Dreamweaver is simply a method for offering the same functionality, but in a way that isn't on par with the Adobe way. I think they made this change a few nights before the release of the product. Here's how they work: -
If you attempt to click and drag one of the panel tabs to a different location you get a dialog box alerting that if you want to move the panel, you must contextual click and choose Group name of panel With, as shown in Figure 2.23. Figure 2.23. Notice the dialog box when you try to drag and drop a panel into another panel set.
-
In the contextual menu, you will get options for placing the panel with other panel groups, creating a new panel group, renaming a panel group, maximize the panel, and close the panel. The panel groups do, however, make up for any inconveniences you find with new panel docking behaviors. The beauty of these new panel sets is the workflow enhancements. If a panel set is in your way simply click the arrow in the right corner of the panel and collapse it instead of closing it. After working with Dreamweaver's new enhancements, I can't image developing without them. Assets Panel The Assets panel made its debut in Dreamweaver 4. It's a tremendous organizational tool, which enables you to manage your assets. As you add different content and media to your HTML documents keeping tabs on all your stuff can turn out to be a job in itself. Luckily, with Assets panel you can see all the content that you've used so far in your site, and you can even mark commonly used ones as favorites for even speedier file management. The Assets panel contains all your images, links, colors, Flash files, Shockwave files, Movies, Scripts, templates, and library items all in one central location. Figure 2.24 displays all the different components of the Assets panel. The Assets Panel on the Mac is grouped with the File panel set. The strange thing is there is nothing else grouped within that set, so the Assets panel may look like its named "Files." Just a small oversight on behalf of the Dreamweaver development team. Figure 2.24. The Assets panel is where all the assets in the site are stored. It offers quick access to files.
To add an asset to the Favorite portion of the panel, simply have the asset highlighted within the panel and in the submenu in the top-left corner choose Add to Favorites. Design Panel Set The design panel set contains three panels by default. It Contains the CSS Styles panel, HTML Styles, and the Behaviors panel. Each of these panel features will be deconstructed and used in projects in the upcoming chapters. Code Panel Set The Code panel is a great resource when you're writing code inside of Dreamweaver. The Reference panel includes the O'Reilly HTML and CSS reference as well as references on JSP and ASP by Wrox. There are also references on the UsableNet Accessibility standards, Sitespring project site reference, and a great ColdFusion reference. These can come in handy when you need specific information about a particular tag, for example, what it means, and how it works. The Snippets panel is an area where you can store scripts or "snippets" of code. This can be ideal in situations where you need to repeat content in different pages, but you don't necessarily want to create a library item or template. We use the snippets panel in Chapter 22, "ASP/ASP.NET." The Tag Inspector offers a visual representation of the code that you or Dreamweaver is writing. What's nice is that it lays the code out in a file tree format, enabling you to expand or collapse any tag to show or hide specific information. This panel is split in two, the top displaying what I call the code tree, and the bottom displaying the details as shown in Figure 2.25 Figure 2.25. The tag inspector is divided into two portions, the code tree and the bottom details.
Application Panel Again, the Application panel is specifically for Web application development. In Figure 2.26, you'll notice that the Application panel has four tabs. The Database tab enables you to set connection between Dreamweaver and the database. Your choices are creating a connection based on a DSN and a custom string. We'll look at each of those connections in Chapter 17, "Web Application Preparation." Figure 2.26. The Dreamweaver MX document window is the centerpiece of the Dreamweaver interface.
The bindings tab enables you to query the database or create a Recordset. After creating a Recordset, you'll see database information in the body of this panel. Typically, Recordsets contain data bindings, which reflect different columns of the table you are querying. Server Behaviors are server-side scripts, which add functionality to your page. These scripts generally work in conjunction with whatever data bindings you have created. There is great deal of detail about the data bindings and the server behaviors in Chapter 28. The Components panel can add functionality to your site when developing Web applications. This topic is covered in detail in Chapter 31, " Adding Shopping Cart Functionality." Answer Panel The Answers panel behaves as a dock of current and helpful information. If you're looking to see if there are any updates to Dreamweaver, or if you need to go through a tutorial, the Answer panel is your answer so to speak. |
