Web designers, web producers, and webmasters rely on one program above all others to design, build, and manage professional websites: Adobe Dreamweaver. It provides the tools you need to create everything from simple HTML pages to database-driven PHP pages. But what makes Dreamweaver so versatile is also what makes it difficult to learn. This bestselling guide offers you with clear, jargon-free explanations to help you master this sophisticated program — and bring stunning, contemporary websites to life.

Written by veteran Dreamweaver teacher and author David McFarland, Dreamweaver CS5: The Missing Manual takes you through site creation step-by-step, from building your very first page to launching a template-driven, fully interactive site. You’ll hone your skills with the help of hands-on, guided tutorials throughout the book.

• Learn how to control the appearance of your web pages with CSS, from basic to advanced techniques
• Design dynamic, database-driven websites, from blogs to product catalogs, and from shopping carts to newsletter signup forms
• Add interactivity to your website with ready-to-use JavaScript programs from Adobe’s Spry Framework
• Effortlessly control the many helper files that power your website and manage thousands of pages
• Examine web page components and Dreamweaver’s capabilities with the book’s “live examples”

Add Spry Tabbed Panels to Web Pages

Some website visitors are loath to scroll; if they don’t see what they want when a page first loads, they move on. Because of this, some web designers divide long passages of information into multiple pages so that each page presents small, easy-to-digest chunks. Of course, that means building several pages instead of just one, and forces visitors to click through (and wait for) a series of pages. Spry Tabbed Panels provides an alternative (see Figure 13-1). Instead of creating one long page, or several smaller pages, you can organize information into separate tabbed panels. That way, your content is always front and center, and your visitors can easily access different sections by clicking a tab above each panel.

Adding a Tabbed Panel

You can place Spry tabbed panels anywhere on a web page. But since the tabs form a single row at the top of the group of panels, you need enough horizontal space to accommodate all the tabs. Unless you have only a couple of tabs with one-word text labels, you should place the tabbed panels in a fairly wide space, such as the main column of a web page, or across the entire width of the page. Just follow these steps:

Figure 13-1. Organize your page’s content into easily accessible panels with the Spry Tabbed Panels widget. Clicking a tab opens a new panel’s worth of information without the browser having to load a new web page.

1. In the document window, click where you wish to insert the panels. For example, inside a div tag.

2. Choose Insert > Spry > Spry Tabbed Panels, or, on the Insert panel’s Spry category, click one of the Spry Tabbed Panel’s buttons (see Figure 13-2).

You can find all the Spry goodies on the Insert panel’s Spry category (Figure 13-2, left); you’ll also find several Spry widgets (including tabbed panels) listed under the Layout category (Figure 13-2, right), and other Spry buttons grouped under other tabs (form validation Spry widgets appear under the Forms tab, for example).

Figure 13-2. In the Insert panel, you can identify a Spry icon by the starburst in the button’s lower-right corner. It’s even easier to distinguish them from other buttons if, from the Insert Panel’s category menu, you choose Color Icons–this changes the drab gray starburst to a bright orange.

After you insert a tabbed panel, you see two tabs and two panels on the page (Figure 13-3); in addition, a blue tab appears above the panels indicating the Spry widget. The blue tab appears only in Dreamweaver’s Design view, not in a guest’s web browser. It gives you an easy way to select the Spry widget and access its properties in the Property inspector.

Note: When you save a page after inserting a Spry Tabbed Panel, Dreamweaver notifies you that it has added two files to the site: a CSS file (SpryTabbedPanels.css) for formatting the panel group, and a JavaScript file (SpryTabbedPanels.js) to make the panels appear and disappear when visitors click the tabs. Dreamweaver saves both files in the SpryAssets folder in your site’s root folder. Make sure you upload this folder when you move your site onto your web server.

3. In the Property inspector, name the panel group (Figure 13-3).

This step is optional. Dreamweaver provides a generic name (TabbedPanels1, for example) for the group of panels. You don’t really have to change this name; it never appears in a browser window. But if you ever take the plunge into manually modifying your Spry widgets in Code view, you may want to change the Spry panel group’s name to something more descriptive. If you create a group of tabbed panels to house information about a product, for example, you might name the panel group productPanels. A descriptive name helps you identify code related to the panel group if you work in Code view to enhance or change the functionality of the panels.

Figure 13-3. Normally, when a browser downloads a page containing Spry panels, it highlights the first tab and panel. However, if you’d rather open another panel when the page loads, select the relevant tab’s name in the Property inspector’s “Default panel” menu.

4. Add additional panels.

If two panels aren’t enough for your needs, use the Property inspector to add more. Above the list of tab names, click the + button (see Figure 13-3) to add a new panel. To remove a panel, in the same list, click the name of a tab, and then click the minus (-) button. You can also reorder the panels by selecting a tab from the list, and then clicking the up or down arrow button. The up arrow moves a panel to the left, while the down arrow moves a panel to the right.

Note: A Spry widget’s properties appear in the Property inspector only when you select the widget. To do so, click the blue tab above the elements inside the widget.

Dreamweaver : Dreamweaver CS5: The Missing Manual Reviews

Customer Reviews

Average Customer Review

 (23 customer reviews)

23 Reviews

5 star:		(17)
4 star:		(4)
3 star:		(1)
2 star:		(1)
1 star:		(0)

32 of 32 people found the following review helpful: Would pick this over Dummies any day!!, August 26, 2010 By  A. J. Abadsafian “pilot” (California, USA) – See all my reviews    This review is from: Dreamweaver CS5: The Missing Manual (Paperback) I did not buy this book through amazon, although i wish I would have with the markdown in price. It is a great deal compared to the I paid (8-26-10) at B&N. Early on, I was in need of a great, solid, easy to read book that would introduce me into the Dreamweaver world. Being an amateur and having little to no knowledge at all of CSS, HTML, XML, etc., I found this book a great, GREAT tool to help me get on my way to website building and managing. Though in reality, it teaches you a lot more than just those simple desires. The Missing Manual comes in with the expectation that you are an advanced beginner or intermediate at operating a computer and you DO NOT need to have any prior knowledge of computer coding or tech terms to understand the material. It teaches you as you go along without veering from the objective of that chapter. It is really fascinating how the material covered in the book is so clearly explained with examples and links that supplement the content… Read more Help other customers find the most helpful reviews  Was this review helpful to you?  >Report abuse | Permalink  Comments (2) 33 of 34 people found the following review helpful: Great Book, But Typo/Errata Ridden, December 4, 2010 By  Darwin Jay – See all my reviews Amazon Verified Purchase(What’s this?) This review is from: Dreamweaver CS5: The Missing Manual (Paperback) 1st off I have to say that I am surprised @ the overwhelming praise that people have given this book, being that you are sure to find loads of typos, mismatched diagrams, and (at times) disjointed procedures in some of the tutorials. Did these people even read the majority of this book as I have been doing for the past month? Or are they just professionals that need a snippet of information? I’ll be honest here. I have about 40 pages to go until I finish it, but have become so completely frustrated with a particular example, and the fact that I’ve been submitting Errata on this book to the point where I feel the author should pay me for being a freelance editor (check out the errata and “unconfirmed errata”. My name’s there.) that I had to come out and say something. Don’t get me wrong. Overall this is a good book for newbies like myself. I am a self teaching aspiring web designer (totally new to DW let alone DW 5) that has read about 7 books on html, css, php5 & Mysql, and… Read more Help other customers find the most helpful reviews  Was this review helpful to you?  >Report abuse | Permalink  Comments (3) 41 of 44 people found the following review helpful: A Diamond Of A Dreamweaver Reference/Learning Tool, July 7, 2010 By  Daniel McKinnon (Tewksbury, MA USA) – See all my reviews       This review is from: Dreamweaver CS5: The Missing Manual (Paperback) At over 1000 pages and 27 chapters, ‘Dreamweaver CS5: The Missing Manual’ by David McFarland is one of the rare books that I can EASILY give a Highest Possible Recommendation for. It has been known for quite some time that Dreamweaver is THE #1 resource for creating a professional web site in the most efficient way possible and with the fewest steps so that you can get your site created with netters surfing to it in the shortest amount of time. Now learn how to use Dreamweaver as efficiently as possible and get a peek at all the newest features in CS5!! The material contained within is simply staggering: Basics, CSS, Forms, Flash, Automation, Database connectivity, and server-side XML and XSLT, it’s all here!! The Missing Manual is my favorite line of books because of the logical separation of content, the writing, and the design. My only gripe with this book would be the lack of color which could have easily been put in for only a small amount more added… Read more Help other customers find the most helpful reviews  Was this review helpful to you?  >Report abuse | Permalink  Comments (2)

Share your thoughts with other customers:

› See all 23 customer reviews…