tag appear to shake to catch a visitor’s attention. Note: What’s that you say? You’d like to read a book on JavaScript? Happy to oblige: JavaScript: The Missing Manual, written by yours truly.
645
chapter
16
Add Flash and Other Multimedia
A
s you learned in previous chapters, you can bring your website to life with interactivity and animation using Cascading Style Sheets (Chapter 4), Spry widgets (Chapter 14), Dreamweaver effects and behaviors (Chapter 15), and images (Chapter 6). But as you’ve probably seen by now, today’s web pages go even further—they blink, sing, and dance with sound, video, and advanced animation. You can create these effects too, but you’ll need some outside help. Programs like Flash (see Figure 16-1) let you create and display complex multimedia presentations, such as slick animations, interactive games, and video tutorials. In this chapter, you’ll learn how to embed these media files in your pages. And you’ll see why Flash, a versatile program that lets you both develop and play back multimedia, provides amazingly fast and smooth web animation, and complex visual interaction.
Flash: An Introduction A few years ago, if you wanted to add smooth animation, slideshows, or other highquality interactive effects to a web page, Flash was the only game in town. Thanks to the Flash plug-in (available in most web browsers), web developers could use the Flash authoring program to make “movies” that played inside the browser, and add programming logic to make those movies respond to visitor feedback—mouse movement, clicks, and keyboard input. However, the JavaScript programming language and the speedy JavaScript engines in modern browsers provide an alternative to many simple forms of animation and interactivity. The Spry widgets, like Spry tabbed panels and the Spry accordion, are good examples of the interactive effects JavaScript offers. 693
Part Four: Building a Website Chapter 17: Introducing Site Management Chapter 18: Testing Your Site Chapter 19: Moving Your Site to the Internet
4
chapter
17
Introducing Site Management
A
s the dull-sounding name site management implies, organizing and tracking your website’s files is one of the least glamorous, most time-consuming, error-prone aspects of being a web designer. On the Web, your site may look beautiful, run smoothly, and appear as a gloriously unified whole, but behind the scenes, it’s nothing more than a collection of various files—HTML pages, images, Cascading Style Sheets, JavaScript code, Flash movies, and so on—that must all work together. The more files you have to keep track of, the more apt you are to misplace one. And a single broken link or missing graphic can interfere with the operation of your entire site, causing personal—even professional—embarrassment. Fortunately, computers excel at tedious organizational tasks. Dreamweaver’s site management features take care of the complexities of dealing with a website’s many files, freeing you to concentrate on the creative aspects of the site. In fact, even if you’re a hand-coding HTML junkie and you turn your nose up at all visual web page editors, you may find Dreamweaver worth its weight in gold just for the features described in this and the next two chapters. Where the first three parts of this book describe how to create, lay out, and embellish your site, this part offers a bird’s-eye view of the production process as you see your site through to completion and, ultimately, put it up on the Internet. To get the most out of Dreamweaver’s site management features, you need to be familiar with some basic principles for organizing web files, as discussed in the next section.
713
chapter
18
Testing Your Site
A
s you’ve no doubt realized by now, building a website involves quite a few steps. At any point in the process, you can easily introduce errors that affect the performance of your pages. Both small mistakes, like typos, and siteshattering errors, like broken links, occur frequently in the web development cycle. Unfortunately, web designers often neglect to develop good procedures for testing their sites. This chapter offers helpful techniques for testing your site, and shows you how Dreamweaver’s wide array of site-testing tools can help.
Site Launch Checklist Don’t wait until you finish your site before developing a thorough strategy for regular testing. By that time, serious design errors may have so completely infested your pages that you may have to start over, or at least spend many hours fixing problems you could have prevented early on. • Preview early and often. The single best way to make sure a page looks and functions the way you want it to is to preview it in as many browsers as possible. For a quick test, click the Live View button in Dreamweaver’s Document toolbar (page 24). This is a great way to quickly check JavaScript components and view complex CSS. However, since Dreamweaver’s built-in browser is WebKit (basically what you find in Apple’s Safari and Google’s Chrome browsers), Live View doesn’t necessarily show you how your page will look in another browser, like Internet Explorer.
745
chapter
19
Moving Your Site to the Internet
B
uilding web pages on your computer is a big accomplishment, but it’s not the whole job. Your beautifully designed and informative site will languish in obscurity unless you move it from your hard drive to a web server.
Fortunately, once your site is ready for prime time, you can put it on a server without ever leaving the comfort of Dreamweaver. The program includes simple commands for transferring files back and forth between the server and your desktop. All you need to do is provide Dreamweaver with the information required to connect to your server.
Adding a Remote Server As you work on your website on your computer, you keep it in a local root folder (see page 725), often called a local site for short. You can think of a local site as a work-inprogress. As you shape your website—whether you build it from scratch or add and modify existing pages—you’ll routinely have partially finished documents sitting on your computer.
775
Part Five: Dreamweaver CS5.5 Power Chapter 20: Snippets and Libraries Chapter 21: Templates Chapter 22: Find and Replace Chapter 23: Customizing Dreamweaver
5
chapter
20
Snippets and Libraries
Y
ou’ve finished the design for your company’s new website. It looks great and your boss is ecstatic. But you’ve really only just begun. You have to build hundreds of pages before you launch the site. And once the site’s online, you’ll need to make endless updates to keep it fresh and inviting. This is where Dreamweaver’s Snippets and Library features come in, streamlining the sometimes tedious work of building and updating web pages. As you create more and more web pages (and more and more websites), you may find yourself crafting the same web page elements over and over again. Many of your pages may share common elements that always stay the same: a copyright notice, a navigation bar, or a logo, for example. And you may find yourself frequently using more complex components, such as a pull-down menu that lists all the countries you ship products to, or a particular design for photos and their captions. Recreating the same page elements time after time is tiresome and—thanks to Dreamweaver—unnecessary. Dreamweaver provides two subtly different tools for reusing common page elements: Snippets and Library items.
Snippets Basics Snippets aren’t fancy or complex, but they sure save time. A snippet is simply a chunk of code you store away and then plunk into your web pages as necessary. The can be as simple as boilerplate legal text, or as complex as HTML, CSS, or JavaScript code (or code from any other programming language you encounter). For example, say you always use the same table design to list product specifications in your company’s catalog. Each time you want to create a similar table, you could go through all the 819
chapter
21
Templates
S
ome web designers handcraft their sites with loving care, changing layouts, colors, fonts, banners, and navigation page by page. But that approach isn’t always practical—or desirable.
Consistency from page to page is a good thing. Web pages that look and act similarly reassure visitors; they can concentrate on each page’s unique content when the navigation bar and left sidebar stay the same. But even more important, a handcrafted approach to web design is often unrealistic when you need to crank out content on a deadline.
That’s where templates come in. Frequently, the underlying design of many website pages is identical (see Figure 21-1). An employee directory at a company site, for instance, may consist of individual pages dedicated to each employee. Each page has the same navigation bar, banner, footer, and layout. Only a few particulars change from page to page, like the employee’s name, photograph, and contact information. This is a perfect case for templates. This chapter shows you how templates can make quick work of building pages where most, if not all, of the pages use repetitive elements.
Template Basics Templates let you build pages that share a similar structure and graphic identity, quickly and without having to worry about accidentally deleting or changing elements. Templates come in very handy when you design a site where other, less Dreamweaver-savvy, individuals will build the individual pages. By using a template, you, the godlike Dreamweaver guru, can limit the areas that these underlings can modify in each page.
839
chapter
22
Find and Replace
Y
ou’ve probably encountered find-and-replace tools in word processing programs and even some graphics software. As its name implies, the command finds a piece of text (webmaster, for example) and replaces it with another piece of text (webmistress). Like Microsoft Word, Dreamweaver can search and replace text in the body of your web pages. But it also offers variations on this feature that enhance your ability to work within the tag-based world of HTML. What’s more, Dreamweaver lets you find and replace text on every page of your site simultaneously, not just the current, open document. In addition, you can remove every appearance of a particular HTML tag, or search and replace text that matches very specific criteria. For example, you can find every instance of the word “Aardvark” that appears within a paragraph styled with the class name animal. These advanced find-and-replace maneuvers are some of the most powerful—and underappreciated—tools in Dreamweaver. If you learn how to use them, you can make changes to your pages in a fraction of the time it would take using other methods.
Tip: You can use Find and Replace feature to search an entire site’s worth of files. This is powerful, but it can also be slow, especially if some folders hold files you don’t want to search—old archives, for example. You can use Dreamweaver’s cloaking feature to hide files from find-and-replace operations. See page 794 for details.
891
chapter
23
Customizing Dreamweaver
W
hether you’re a hard-core HTML jockey who prefers to be knee-deep in Code view, or a visually oriented, drag-and-drop type who never strays from Design view, Dreamweaver lets you work the way you want.
By now, you’re probably already using the Favorites tab on the Insert panel to store your most frequently used objects in one place, as discussed on page 30. But don’t stop there. Dreamweaver gives you the power to add, change, and share keyboard shortcuts—it’s a simple way to tailor the program to your needs. And if that’s not enough of an efficiency boost, you can add features that even Adobe’s engineers never imagined, from simple productivity add-ons like QuickLink (see page 182) to advanced server behaviors that help power a complete e-commerce website. Dreamweaver’s design allows amateur and professional programmers alike to write new features and functions using HTML, JavaScript, and XML (Extensible Markup Language). There are hundreds of these extras, called extensions, for you to explore. Best of all, you can try many of them for free.
Keyboard Shortcuts As you use Dreamweaver, you’ll hit the same keyboard shortcuts and travel to the same palettes and menus time and again; perhaps your site uses a lot of graphics and Flash movies, for example, and you’re constantly using keyboard shortcuts to insert them. You may find that, after the thousandth time, Ctrl+Alt+F (-Option-F) hurts your pinkie and uses too many keys to be truly efficient. On the other hand, the things you do all the time—like inserting text fields into forms or adding rollover images—may not have shortcuts at all, so you’re forced to go to a menu.
907
Part Six: Dynamic Dreamweaver Chapter 24: Getting Started with Dynamic Websites Chapter 25: Adding Dynamic Data to Your Pages Chapter 26: Web Pages that Manipulate Database Records Chapter 27: Advanced Dynamic Site Features Chapter 28: Server-Side XML and XSLT
6
chapter
24
Getting Started with Dynamic Websites
S
o far in this book, you’ve learned to build and maintain websites by using Dreamweaver’s powerful design, coding, and site-management tools. The pages you’ve created use straightforward HTML, which you can immediately preview in a web browser to see a finished design. The web cognoscenti often call these kinds of pages static, since they don’t change once you finish building them (unless you edit them later, of course). For many websites, especially those where you carefully handcraft the design and content on a page-by-page basis, static web pages are the way to go. But imagine landing a contract to build an online catalog of 10,000 products. After the initial excitement disappears (along with your plans for that trip to Hawaii), you realize that even using Dreamweaver’s Template tool (Chapter 21), building 10,000 pages is a lot of work! Fortunately, Dreamweaver offers a better and faster way to deal with this problem. Its dynamic website creation tools let you take advantage of a variety of powerful techniques that would be difficult or impossible with plain old HTML. With Dreamweaver, you can build pages that: • Display listings of products or other items, like your record collection, your company’s staff directory, or your mother’s library of prized recipes. • Search through a database of information and display the results. • Require site login so you can hide particular areas from prying eyes. • Collect and store information from visitors to your site. • Personalize your visitors’ experience: “Hello Dave, it’s been a while since you’ve visited. Did you miss us?—Hal.” 923
chapter
25
Adding Dynamic Data to Your Pages
A
database is different from a mere pile of facts because it can selectively retrieve information. After all, when you visit Amazon.com, you don’t want to see every single book and product they sell. You probably just want to see a list of books on a certain subject or by a particular author, and then view more detail about the books that pique your interest. This chapter shows you how to use Dreamweaver to display database information on your web pages. Because these concepts can be tricky, you may prefer to get some hands-on experience by completing the tutorial on page 998 before reading the rest of this chapter.
Retrieving Information Since databases can contain lots of information, you need a way to find just the data you want to display on a particular web page. Even though your company keeps information about its products, customers, suppliers, and so on in one database, you may want to see only, say, an alphabetical list of your customers. After grabbing that list, you might want to display a particular customer’s contact information, or perhaps the list of products that person bought.
Understanding Recordsets To retrieve specific information from a database, you start by creating what’s called a recordset. A recordset—also called a database query—is a command you send to a database asking for particular information: “Hey Database, show me all the customers listed in the Customers table.” Executing commands like this is the heart of many database operations you’ll ask Dreamweaver to perform 953
chapter
26
Web Pages that Manipulate Database Records
D
isplaying database information on a web page is useful, but you may be more interested in the opposite kind of communication—collecting information from your site’s visitors (see Figure 26-1). Maybe you want them to do something as simple as register with your site. Other times, you may have something more ambitious in mind—like accepting and processing product orders using a full-fledged e-commerce system. Once you have data in a database, you need a way to maintain it—to update and delete information. After all, you’ll change prices, discontinue products, and remove any record of “Harvey the Wise Guy” from your site’s online guestbook at some point. Thankfully, Dreamweaver makes changing this information simple and painless. Note: You may feel more comfortable learning these concepts by doing them. If so, turn to the tutorial on page 1044 before you read the next section.
Adding Data As noted in Chapter 13, the primary way you collect information over the Internet is through an HTML form. Its basic elements—text boxes, radio buttons, pop-up menus, and so on—give you all kinds of ways to collect a wide assortment of data. But to record this information, you either need to write your own program or, more simply, use Dreamweaver’s built-in tools to funnel it into a database. Dreamweaver’s Record Insertion Form Wizard and Insert Record server behavior make adding data a simple process.
1019
chapter
27
Advanced Dynamic Site Features
D
reamweaver’s basic database capabilities are impressive, but there may come a time when you need to dig deeper into the program to build successful web applications. Dreamweaver’s advanced features let you, the mere mortal, do things web-development pros do every day, like password-protect pages, display (or hide) content based on database results, and access information from forms, cookies, and URLs.
Password-Protecting Web Pages Although Dreamweaver lets you create web pages that let others add, edit, and delete records from a database, your e-business wouldn’t last very long if just anyone could remove orders from your online ordering system or view your customers’ credit card information. And certainly your boss wouldn’t be happy if someone got into the staff database and changed his title to Chief Bozo. For these and other reasons, Dreamweaver provides a simple set of tools to lock your pages from prying eyes. Dreamweaver’s User Authentication server behaviors can password-protect any page on your site. With them, you can limit areas of your site to registered users only, let customers review and update their contact information, create maintenance pages accessible only to administrators, or personalize pages with custom messages (“Welcome back, Dave!”).
1067
chapter
28
Server-Side XML and XSLT
X
ML is everywhere. You find it in countless files on your computer, for everything from tracking information in your iTunes music library to providing the structure and options for Dreamweaver’s menus. Webmasters use XML (Extensible Markup Language) to broadcast news feeds and provide product, pricing, and availability information from sites like Amazon.com and eBay using a technology known as web services. As you learned in Chapter 13, Dreamweaver lets you use XML, too, and probably the best use of Dreamweaver’s XML tool is to add news, blog posts, and other information broadcast from other websites to your own. So what exactly is XML? It’s a tag-based language somewhat like HTML. You tag the various parts of a document—headlines, text, names, dates, and so on—in a clear, easy-to-understand way that different computers, operating systems, and programs can understand. Using this common data language, these machines can quickly and easily exchange information. As you learned in Chapter 14, Dreamweaver’s Spry XML Data Set tools let you work with XML on the “client side” of things—where the processing takes place on your or your visitor’s computer. Here’s how Dreamweaver’s Spry Data Set works: When someone visits your XML-powered site, his browser downloads a page embedded with some Spry JavaScript programming and an XML file. Thanks to some fancy JavaScript magic, your visitor can interact with that XML data, giving him a richer browsing experience. For example, if your site includes a table of the top 100 baseball players of all time, with columns for their names, batting averages, ages, leagues, and so on, your visitor can sort these statistics simply by clicking a column’s header (see page 607 for more about this trick).
1101
appendix
a
Getting Help
H
ard as it may be to believe, even a book as voluminous and detailed as this one may not answer all your questions about Dreamweaver. Fortunately, a range of other resources awaits you when a feature’s giving you trouble.
Getting Help from Dreamweaver There’s plenty of assistance built right into Dreamweaver, from beginner tutorials to the Adobe Help system. You can also access Dreamweaver’s electronic help system and online support center from the Help menu. You’ll find details below.
Detailed Assistance Dreamweaver’s Help system uses a separate program, Adobe Help, for Dreamweaver CS5.5’s documentation. Adobe Help also lets you tap into help from Adobe.com (www.adobe.com), as well as from select resources on the Web. The Help program is basically just a modified web browser that searches online documentation. Choose Help➝Dreamweaver Help (or press the F1 key) to launch the Help program and view the Using Dreamweaver CS5.5 documents. It includes a list of categories such as “Creating Pages with CSS” and “Previewing pages,” where you can get more detailed information on various aspects of the program. Note: If you prefer your documentation printed, you can download a PDF of the entire Dreamweaver manual. Choose Help➝Dreamweaver Help (or press the F1 key) to access the online help documents. You’ll find a link in the top right of the program labeled “View Help PDF” that downloads a hefty Adobe Acrobat file.
1125
appendix
b
Dreamweaver CS5.5, Menu by Menu
D
reamweaver CS5.5: The Missing Manual is quite complete; in its pages, you’ll find descriptions of every major Dreamweaver function (and most minor ones). In the interests of completeness, however, here’s a quick reference to every command in every menu—and the answer to the occasional “What does that mean?” mystery.
File Menu The commands in the File menu include basic functions like saving and quitting files, and controlling an open Dreamweaver document: • New. Opens the New Document window, which lets you create a new, blank Dreamweaver document using any of several types of web document, from basic HTML pages to dynamic pages like ASP or PHP files. If you create Dreamweaver page templates, they show up here, too. • Open. Opens the standard Open File dialog box so you can navigate to and open an existing Dreamweaver document. You can set the Show pop-up menu to display only specific types of documents—only HTML pages or style sheets, for example. • Browse in Bridge. Bridge is Adobe’s own file manager. It’s like Windows Explorer or the Mac’s Finder function. Bridge lets you browse, find, and open documents. But since Dreamweaver sports the very useful Files panel (page 29), you already have a way to manage your site files. In addition, Bridge is part of Adobe’s graphics heritage, so it works best with image files—in other words, Photoshop and Illustrator files, not Dreamweaver documents.
1129
index
Index
Symbols 3-pixel bug (IE 6), 431 @ (at symbol) for element attributes (XML), 623 { } (braces) for coding, 444 ! (exclamation point) in expressions, 863 / (forward slash) at end of URLs, 179 for root-relative links, 169 # (hash symbol) for ID names, 357 /// (triple slashes) for temporary addresses, 176
A
(anchor) tags, 8 About pane (Current Selection mode), 332 absolute links, 168, 173 Absolute option (CSS positioning property), 379 absolute positioning (CSS layouts) AP divs, adding background images to, 394 AP divs, adding to pages, 386–389 AP divs, drawing, 389 AP divs, nesting, 394–395 AP element properties, modifying, 391–394 AP Elements panel, 389–391 basics, 378 defined, 348 positioning properties. See positioning properties (CSS) absolute URLs, 722–723 accessibility Accessibility Options window, 237 table, 278 of websites, 237 Access key option (form fields), 525 access keys, 181
access levels, 1068 Accordions (Spry) adding to web pages, 590–592 content, adding/editing, 592–593 defined, 590 formatting, 593–596 accounts (Adobe), setting up, 683 actions Action property (forms), 567 for behaviors, 656–657 navigation. See navigation actions (behaviors) active links, 56, 189 Adobe accounts, setting up, 683 BrowserLab, defined, 33 BrowserLab panel, 750 CSS Advisory site, 423–424 Director, 703 Dreamweaver support page, 1126 Exchange, 684–686, 913–915 Help, 1125 Labs, 581 Advanced server settings (Site Setup window), 937 Advanced Setting options (Site Setup window), 40–41 Ajax, defined, 582 alignment of AP elements, 393–394 of Flash movies, 702 of paragraphs, 101 properties of cells, 284–285 of tables, 281–282 of text with CSS, 145 text align property (CSS), 150 vertical alignment property (CSS), 149 All info tab (Design Notes window), 813
1153
