8.2. THE PATTERNS Most of this chapter's patterns fit into the functional groups described earlier. Edit-in-Place is very much a WYSIWYG approach to editing labels and text. Smart Selection and Composite Selection deal with selection mechanics, and One-Off Mode and Spring-Loaded Mode solve problems with mode switching. Edit-in-Place Smart Selection Composite Selection One-Off Mode Spring-Loaded Mode
Constrained Resize, Magnetism, and Guides address precision-related problems that users often face with direct manipulation. All three patterns help a user achieve a specific taskresizing an object correctly in the first case, and moving objects to precise locations in the other two. Constrained Resize Magnetism Guides
Paste Variations addresses a very specific design problem in an application's cut, copy, and paste feature. WYSIWYG editors tend to need it more than other kinds of applications. 79. edit-in-place Figure 8-2. OmniGraffle label edited in place 
8.2.1.1. what Use a small, dynamic text editor to let the user change text "in place": position the editor directly over the original text, rather than using a separate panel or dialog box. 8.2.1.2. use when The builder UI contains text that the user may want to change sometimes. The names of objects, text elements in a graphic layout, labels, and even property values are good candidates. 8.2.1.3. why Making the user go somewhere elsea place far away spatially, or disconnected from the original text, in another windowusually isn't a good idea. The user may not find the editor, for one thing. It also takes time to switch one's attention from one place to another, and the perceived complexity of the interface is increased. That said, an alternative to this pattern is to edit the text in a separate panel, such as a Property Sheet (see Chapter 4) or in a dialog box. You should do this only if Edit-in-Place is too technically difficult, or if the text in question is so long and complex that it deserves specialized editing and formatting toolsfonts, text sizes, the kinds of things you'd find on text editors' toolbars. 8.2.1.4. how When the user clicks or, more typically, double-clicks on the text to be edited, simply replace it with an editable text field containing the string. Anything the user types is then entered into the text field. End the edit session when the user clicks somewhere else. Make sure the text field appears in precisely the same apparent location as the original non-editable string. If it seems to jump when editing starts, it may irritate users. (This situation doesn't seem like a big deal, but it can be.) Also, retain the same typeface as the original text, if you can. In short, make it as WYSIWYG as possible. Usually a border appears around the text when the editor is invoked, indicating to the user that editing has begun. That may not even be necessary, though. Other cues may suffice: a text-entry cursor should appear (often blinking), and if a common user task is to replace the original string entirely, then the whole original string should be automatically selected when the editor appears. 8.2.1.5. examples Figure 8-3. Windows Explorer is where many people see Edit-in-Place for the first time. Explorer isn't an editor, but it establishes a precedent for how one interacts with Edit-in-Place. Explorer differs from most editors because you invoke Edit-in-Place via a "slow" double-click (not always easy to do, and not recommended), whereas most editors use an ordinary single or double click. But the rest is the same. The previous text is automatically selected, a box is drawn around the text, and a blinking text-entry cursor appears. 
Figure 8-4. Flickr isn't an editor either, but it allows users to edit picture titles and descriptions in place. What's interesting about it, from an interaction-design point of view, is how the edit session ends. Most applications end it when the user clicks somewhere else. The Flickr designers decided to make it more explicit: they offer Save and Cancel buttons that appear dynamically along with the text fields. First-time users will have no trouble figuring it out (once they learn they can click on the text in the first place). 
80. smart selection Figure 8-5. Photoshop's magic-wand selection tool selects a red area 
8.2.2.1. what Make the software smart enough to automatically select a coherent group of items, rather than making the user do it. 8.2.2.2. use when The user works with selectable objects of any kindtext, pixels, geometric objects, or even tree items or table cells. The selectable items are organized into coherent visual groups, like words or sentences in a text editor, groups of vector graphics, or pixels of contiguous color in an image. Normally, selection of all the items in one of these groups requires the user to click and drag the mouse pointer with some precision. This isn't always easy. For instance, lassoing all the red pixels might be difficult because they're not contained in a tidy rectangular area. 8.2.2.3. why Not all users are good at fine, precise mouse movements. Also, sometimes circumstances make them hard or impossible for everyone! (Consider a laptop's trackpad, for example.) Once it becomes clear to the software that the user is trying to select a particular group of itemsor when the user intentionally begins a smart selectionthen the software ought to help out the user and select that group automatically. Let computers do what computers are good at, and let humans do what they're good at! 8.2.2.4. how Figure out which UI gesture you ought to use to make a "smart selection." The gesture might be any of the following actions: A double click or double tap A single click while in a particular mode or tool, such as Photoshop's magic wand A single click while a key is held down The act of enlarging the selection out towards the boundaries of a group, as many text editors do
If larger groups contain the smaller groups, consider ways to enlarge the smart selection to the enclosing groups, toolike expanding the selection of a word to the selection of a sentence, and then a whole paragraph. But be careful. When done thoughtlessly, smart selections can be irritating. Imagine the user's frustration when he tries to precisely select a group of pixels, but every time he comes close to a color boundary, the selection "snaps" out to where he didn't want it! The equivalent problem happens in some text editors; see the following example. 8.2.2.5. example Figure 8-6. Word does smart selection on words and lines. These screenshots show the results of a mouse click-and-drag (first), a double click on a word (second), and a triple click on the whole paragraph (third).
Note the inclusion of the trailing space when a whole word is selected. You wanted that space to be selected too, right? No? Well, that's too bad, because you can't not select it if you invoke smart selection via double-click. If you don't want it, you have to click-and-drag over the word yourself, and carefully stop before accidentally including that space.
This kind of behavior causes Word to tread the fine line between being appropriately helpful and being obnoxious. When you design software to make decisions for users, be sure you're correct most of the time, for most users, under most circumstances. 
81. composite selection Figure 8-7. Selecting a Visual Studio composite 
8.2.3.1. what Use different gesturesor mouse clicks in different screen areas, such as the composite's edges versus its insidesto determine whether you should select a composite itself or allow its contained objects to be selected. 8.2.3.2. use when Your graphical editor may contain composite objectsthings that you can move and otherwise manipulate, but happen to contain other objects. This is especially common in drawing programs and GUI builders. 8.2.3.3. why When objects are on canvases, a single click normally selects the object. In this case, you want the user to be able to select child objects (or create new ones) inside the composite, but that means the user has to click on the composite's background. Should it select the composite, or not? The mouse click has two interpretations, reflecting the double roleparent and childthat the composite plays. Obviously one of these interpretations has to win out; the user needs to be able to predict what will happen when he clicks the mouse on the composite's background. Two different kinds of selectionone for composites, and one for "leaf" objects that are not compositessolves the problem (albeit in a brute-force fashion). The two selection modes are similar, but respond differently to mouse events like clicking and dragging. 8.2.3.4. how Visual Studio (Figure 8-7) demonstrates the most common solution to this problem. A user cannot select its group boxes (which are technically not composites, but appear to be anyway) unless she clicks near the edge of the group box. Mouse clicks inside the object operate on the contents; if it's a click-and-drag, a lasso is started, and if it's just a click, the contained object is selected. She also can drag the group box by the edges; she can resize only by the eight selection handles, at the corners and edge centers. This limits direct manipulation, but the mechanism is simple and easily understood once the user knows what's going on. When a composite is selected, draw the draggable edges and resize handles in a recognizable way, like the dotted border in Figure 8-7. The visual cue sets expectations for the user. 8.2.3.5. example Figure 8-8. HTML tables are compositesthey usually contain objects like text, images, or nested tables. So an HTML editor such as Dreamweaver needs to give the user access to both the table as an object, and its contents as objects. Here, the lefthand screenshot shows a click inside the tablesuch a click would select either an image or text. The example on the right shows table selection with a click on the table's edge. 
82. one-off mode Figure 8-9. One-off shape creation in OmniGraffle 
8.2.4.1. what When a mode is turned on, perform the operation once. Then switch back automatically into the default or previous mode. 8.2.4.2. use when In the editor you build, users don't normally repeat or iterate over certain operations, such as object creation. Usually, a user performs the operation only once, and then he immediately wants to do something else, like manipulate the object he just created. 8.2.4.3. why Users will find it annoying to switch into a mode, do one little thing, and then explicitly switch out of that mode again. Doing so often involves clicking on small "hit targets" in palette windows far away from the working canvas, which takes up time and energy. Too much "clickiness" in an interface is a known irritant. Instead, the interface should do that which makes the user's job easier, even if it's not easy to program, or isn't consistent across all the palette items. Several builder programs use one-off modes, so your users likely will be familiar with the idea. Also, modes are tricky. A user can forget which mode is currently active in a program, and take actions that have unintended consequences. When using one-off modes, that's less likely; the user can't get "stuck" in that mode. 8.2.4.4. how The hardest part of implementing One-Off Mode is deciding which operations ought to use it. Object creation typically uses it. Zooming, lassoing, and paint strokes (despite being "objects" in the programming sense) typically don't. Find out which graphical editors your users are most familiar with, and see what those editors do. This is a design decision best made when you really know users' work habits. If they do want to create several similar objects in a row, then having to go to the palette to start each individual object will irritate them. Many applications that use a one-off mode have a "secret" version of the mode that allows multiple operations (thus behaving like a regular mode). You can often invoke it by holding down a key, like Shift, while clicking the mode's button, but it varies across applications. 8.2.4.5. example An example walkthrough might clarify this concept. Consider a drawing tool in which mouse-clicking on the canvas normally selects objects underneath the mouse pointer. The user clicks the "Create rectangle" button on a palette. The UI goes into a special creation mode, indicated by a rectangle cursor. Now clicking on the canvas will place the object and not select anything. The user clicks down on the mouse button, to place the upper-left corner. The user moves the mouse and releases the button to place the lower-right corner. The UI, having noted the click-drag-release and created the rectangle, leaves the rectangle-creation mode and goes back to the default mode, in which clicking means selection. The user now is free to select objects, move them, and resize them without having to go back to the palette to change modes.
83. spring-loaded mode Figure 8-10. The shift key on a keyboard 
8.2.5.1. what Let the user enter a mode by holding down a key or a mouse button. When the user releases it, leave the mode and go back to the previous one. 8.2.5.2. use when You build a graphical editor, or any interface that uses modes extensively. Sometimes a user wants to enter a mode temporarilyhe might need to do something quickly, and then fall back immediately to the mode he was already in. Your users are motivated to learn the interface well; maybe they use it every day. They don't mind learning and memorizing shortcuts to desired functionality. 8.2.5.3. why One of the big problems with modes is that a user can forget what mode he's in. Without an obvious state indicator, like a special mouse cursor, he may take actions believing he's in Mode A when he's really in Mode B. Unintended consequences may result. You can partially solve that problem with One-Off Modes, of course, and also by constant reminders of what mode the user is in (like the mouse cursor). A user won't forget about that spring-loaded mode as long as he's physically holding down a key. But a spring-loaded mode gives you another advantage: convenience. Again, like one-off modes, spring-loaded modes reduce the number of times the user has to go to the palette, click a little button, and go back to work. In this case, no such trip is necessarythe user just holds down a key, does whatever needs doing, and releases the key. Once learned, it takes very little effort. It's conducive to working fast and to a state of flow. The problem with spring-loaded modes is that they're invisible. There's nothing on the interfaceno labels or menu mnemonicsthat announces their presence. The user has to learn them "the hard way," by reading manuals or learning from other people. 8.2.5.4. how The mechanics here are pretty simple: invoke the mode while the user holds down a key. However, as with One-Off Modes, the hard part is choosing which modes deserve a spring-loaded alternative to normal operation. Know your users. What tasks do they do that require very temporary modes? As in all interfaces, make sure that this "secret" keyboard gesture is not the only way to reach the mode in question. Make it an alternative to a palette button, for instance, or something done from the toolbar or menu bar. 8.2.5.5. examples A Shift key is the classic example of a spring-loaded modewhile the key is held down, typed letters come out in uppercase. Release it, and you're back to lowercase. Contrast this key to Caps Lock, which is more like typical graphical-editor modes: press it to turn it on, and press it again to turn it off. Photoshop, Paint Shop Pro, and Fireworks (and probably other drawing programs, too) all offer a spring-loaded mode for the eyedropper tool. Why? Imagine that you are trying to paint one region with the same color as another region: While in the paintbrush mode, hold down the Alt key (or Option, depending on platform). The mode switches to the eyedropper. Click on the color you want. Release the Alt or Option key, and keep painting with the new color.
This is very quick and convenient. Your attention remains focused on the canvas, where you want it, and it's not diverted to the palette. (Incidentally, Photoshop is packed full of spring-loaded modes like these. You can find them in books and quick-reference cards, but you may not find them just by hunting around.) You can find another spring-loaded mode example in list-oriented interfaces, such as Windows Explorer, Mac Finder, and email clients. You can usually invoke multiple selection by holding down the shift or control key, and then selecting objects. Because the "click" gesture is interpreted differentlysingle selection versus multiplethese are two different modes, by definition. If you're used to that, consider what would happen if you had to switch from single to multiple selection via a button on Explorer's toolbar (or Finder's), rather than holding down a key. You'd be going back and forth to that toolbar a lot! If you visited another application for a while, and then came back, could you recall whether you'd left it in single or multiple selection mode? Probably not, and thus you wouldn't immediately know what would happen when you clicked on filenames. You don't know whether the new selection would replace the current selection or be added to it. 84. constrained resize Figure 8-11. Resizing a picture; Word preserves a picture's aspect ratio when corners are dragged 
8.2.6.1. what Supply resize modes with different behavior, such as preserving aspect ratio, for use under special circumstances. 8.2.6.2. use when You build a graphical editor that lets the user resize objects interactively, such as by dragging a corner. But sometimes users want to preserve certain properties, like the object's aspect ratio, for instanceespecially of pictures and formatted textor the position of the object's geometrical center. Normal drag-the-corner interactive resizing makes this task difficult. 8.2.6.3. why Quite simply, this technique can save the user a lot of work. If the UI constrains the resize to work in certain ways, such as by forcing the width and height to remain in the same proportion to each other, then the user can focus on what he really wants it to look like. If the user doesn't have this degree of control over the interface, he might resort to doing the resize by typing numbers into a form. That works, but it's almost never as nice as direct manipulation. It breaks up the user's flow of work and forces him to think numerically instead of visuallysomething not everyone does well. Direct manipulation better supports Incremental Construction (see Chapter 1). 8.2.6.4. how This technique is basically a modified resize mode, so it should behave much like your normal resizeusually by dragging a corner or edge of the object to be resized. How should you differentiate this mode from a normal resize mode? Consider using a modifier key; many applications go into a constrained-resize mode when you hold down the Shift or Function key while dragging a corner. Or, if you think most users are always going to want the constraint, make it the default resize operation. Word does this with pictures and clip art; see Figure 8-11. Thus users don't accidentally end up with vertically or horizontally squished faces in their baby announcements. As the user drags the mouse cursor, a resize box should be drawn to show the new dimensions and/ or position. This box gives the user immediate feedback about what's going to happen; if the user is alert, he can even tell from the resize-box behavior whether or not the resize is constrained. You can constrain a resize in several ways. Here are some possibilities: Retain the object's original aspect ratio (the ratio of width to height). Leave the object's geometric center in the same place, and resize symmetrically around it. Resize by units larger than pixels. For instance, a GUI builder might require that a list box's height be some integral number of text lines. (Probably not a good idea in general, but if that's what you have to work with, the UI should reflect it.) The resize, by default, should "jump" from one size quantum to the next. Similarly, the graphical builder's canvas might use a Snap-to-Grid mechanism; again, the resize should jump between grid squares. Limit the size of the object. Once the user hits the size limit in one dimension or the other, don't let the resize box expand (or contract, as the case may be) any further in that dimension.
Alan Cooper and Robert Reimann describe this technique as "constrained drag."[1] The technique dates back at least to the mid-1990s. [1] About Face 2.0: The Essentials of Interaction Design (Wiley), page 311.
8.2.6.5. examples Figure 8-12. Adobe Illustrator has at least two constrained-resize modes: one for preserving the object's aspect ratio, and one for preserving its geometric center. This figure shows a normal drag-the-corner resize, in its "before" (with grabbable handles), "during," and "after" states. The blue outlines, which change in real time as the user drags the corner, show what the object's new size and position would be, should the user release the drag. 
Figure 8-13. These screenshots show the two constrained-resize modes. When the user holds down the Shift key, the aspect-ratio-preserving mode kicks in. When the user holds down the Alt key instead, the object can be resized freely in both dimensions, but the center stays fixed.. 
85. magnetism Figure 8-14. A Word toolbar "snapped" into place 
8.2.7.1. what Make the objects "magnetic" to the things a user positions them against. When the user drags an object very near one of these things, it should stick. 8.2.7.2. use when The user needs to position objects very precisely, such as next to other objects or against Guides. This often happens in graphic editors, of course, but it's also common in window managers and desktop frameworks, in which a user needs to move windows and palettes, for example. 8.2.7.3. why Magnetism helps compensate for users' lack of perfect dexterity with a mouse. If the user really does want the moved object to end up right against another oneand you need to be sure about thisthen the computer can help by doing it for her. What magnetism does is make the mouse "target zone" effectively bigger than it really is. If the user tries to put one thing precisely next to another thing, the target zone is one pixel wide; beyond that, they either overlap or don't touch, and she has to keep trying to position it exactly right. But a one-pixel target is awfully tiny. If magnetism snaps the object into place when the user gets within, say, four pixels of the edge, then the target zone is two times four (i.e., eight) pixels wide. Much easier! And much faster, too. This device also helps users who do have the dexterity necessary to place objects within one-pixel target zones. Magnetism saves them the time and effort they'd otherwise need to do that, and it makes the application feel more responsive and helpful in general.[2] [2] Martijn van Welie first described this pattern in his online patterns catalog: http://www.welie.com/patterns/gui/magnetism.html.
8.2.7.4. how When the user drags an object close to another object's edge, make it snap to the other object. Likewise, when it's dragged away, keep it there for a few pixels, and then let it move away. Objects that can be "magnetic" might include: Objects of the same type as the one moved, such as windows to windows or shapes to shapes. Canvas edges, margins, and screen edges. Guides and grid linesdevices that exist strictly for the purpose of aligning objects with one another. Easily detectable "hard edges" in picture layers, as seen in Photoshop.
8.2.7.5. examples Figure 8-15. Diagram builders and visual programming environments sometimes use magnetism to help the user link together a diagram. Here, you can use the Simulink application to put together a miniature signal-generator simulation. The user needs to connect the output port of the Sine Wave source to an input port of a multiplexer, shown as a dark vertical bar.
Without magnetism, this task would require the user to position the mouse on a very tiny target, click down on the mouse button, and then drag and release the connection to another very tiny target. However, the source output port actually is bigger than the few pixels shown. And as the user drags the connectionillustrated by a dotted linetoward the multiplexer's input port, the connection "snaps" into the input port as the mouse approaches within ten pixels or so. (Simulink even puts corners into the connection automatically.) In the last frame, the user has released the mouse button, finishing the connection. 
86. guides Figure 8-16. Guides in Visio 
8.2.8.1. what Offer horizontal and vertical reference lines to help users align objects. 8.2.8.2. use when The user needs to position objects so they align with one another precisely, or against page margins. This is most common in vector-based drawing programs, GUI builders, page layout editors, and image editors. 8.2.8.3. why Like Magnetism, guides can compensate for users' lack of perfect dexteritythey help users keep objects aligned. In addition, guides make it easier for a user to see that alignment is pixel-perfect. At low magnification, as in the Visio example above, a user can't see for sure that the two rectangles line up perfectly. But the guide assures that they do. Some implementations of guides move the objects when the guide is moved. This is helpful because the user's original intent was almost certainly to keep those objects aligned to the same line, and by automatically moving the attached objects, the guide spares the user the work of dragging all those objects back to the guide's new location. You shouldn't necessarily use guides as a substitute for traditional alignment tools (e.g., to align selected shapes on their bottom edges, or align selected shapes vertically by center), since those tools are faster for complex alignment tasks. Guides, however, are more true to the spirit of direct manipulation. Finally, guides can communicate layout information between multiple authors of one document. If Amber starts a complex page layout, she might create guides along the margins and gridlines of that layout. Then when she hands it off to Bert to finish filling it in, he can see the guides defining those margins and gridlines. 8.2.8.4. how Guides are reference lines that float "above" the canvasthey aren't part of the document being created, and they shouldn't look like they are. Most guides are brightly colored. Some are red, some are bright blue, and others are lime green; the idea is that they should be visible against whatever is underneath them. They are effectively zero-width, so always draw them a single pixel wide, and don't enlarge them under higher magnification. Let users create guides that are either horizontal or vertical, and let them create as many as they'd like. Many applications provide rulers around canvases, as shown in the Visio example above, and guides often are created by dragging some affordance from the ruler (like those two crossed blue lines in the upper-left corner). Other applications afford guide creation from menu bars or toolbars. Then again, you may want to create them automatically, whenever an alignment task demands itsee the Word and Interface Builder examples in Figures 8-17 and 8-18. Guides should be draggable whenever the user wishes to adjust the layout, so consider letting them be draggable in many different modes, not just one mode. Also consider the ability to lock them down so you can't move them by accident. Some applications, including Visio and Visual Studio, let users glue objects onto guides, so they're semi-permanently stuck; when the guide is moved, the objects move with it. Guides work very well when combined with the Magnetism pattern found in this chapter. When a user moves an object close to the guide, the object snaps to the guide and aligns itself against it. This makes it far easier for a user to align things precisely to the guide. Allow users to show and hide guides on demand, especially in WYSIWYG editors. After all, they're not part of the document itself. Also, they can contribute to visual clutter. 8.2.8.5. examples Figure 8-17. Many GUI builders, including Visual Studio and the Mac Interface Builder, offer guides. In the Interface Builder, dotted blue guides automatically appear as the user drags interface elements around the canvas. The guides, which are "magnetic," actively encourage the user to place the controls so they are aligned with one anotherwhen you see the guides appear, you know that you've aligned it correctly.
In this screenshot, the "street" text field is dragged nearly into alignment with the other text fields and with the "Address:" label. The guides helpfully push it the last few pixels into place. 
Figure 8-18. Photoshop's guides are drawn as thin cyan lines. These are created explicitly by the user (not automatically), and he can position them at precise pixel locations via a dialog boxquite useful in some scenarios. Users can also drag them. As shown in this figure, the guide doesn't have any physical width relative to the image, so it can stay a single pixel wide while the image is magnified. 
Figure 8-19. Word's guides are created automatically. They control the locations of margins and indentations, and when they're moved, they change the way that text fills the page. A Word guide isn't visible until the user drags its affordance along the top ruler. 
87. paste variations Figure 8-20. Paint Shop Pro 
8.2.9.1. what Provide specialized paste functionality in addition to the standard paste operation. 8.2.9.2. use when The user will paste things from the clipboard into the application. But he might intend to do one of several things with it, and each task requires a subtly different paste operationhe might paste it into a different format, for instance, or into a new destination document instead of an existing one. This pattern is rarely used. Only a few applications need it, but it's a viable solution to a tough design problem. 8.2.9.3. why Sometimes there's no getting around it: you have to support two or more paste-related task scenarios, and no amount of cleverness will help you reconcile them into one ultra-smart paste operation. You could pick one as the only way paste is done, which would keep the design simple. But users who perform one of the other tasks will be out of luck. They'll have to do a lot of work by hand to get the pasted content to look right. So you need to present two or more kinds of paste. One will have to be the default, because when the user hits Control-V (or whatever the paste accelerator is on your platform), something reasonable should happenyou can't just put up a menu or a dialog box on Control-V. Doing so will break users' expectations of immediate action. However, you can provide choices in some other way, in addition to the default behavior. 8.2.9.4. how On the Edit menu, show the other paste variations in addition to the default paste operation. Label them with more detail; say exactly what they do. You could put them directly on the Edit menuwhich is probably easiest to useor you could put all the paste operations, including the default, into a cascaded or pull-right menu off of the Edit menu. (Cascaded menus require annoyingly precise mouse motions, however, so use them only if you need to reduce the number of top-level Edit menu items.) 8.2.9.5. examples Figure 8-21. Dreamweaver is a complicated website building program. You can edit a web page either in a WYSIWYG graphic editor, or in a text editor showing the HTML code itself, or both in one split window, as shown here; Dreamweaver keeps the two in sync. In this screenshot, I copied a piece of HTML code to the clipboard, tags and all.
Now what should happen if I just paste that code into the WYSIWYG half of the editor? It's just text, really. It has some pesky angle brackets in it (<h4>), but shouldn't it be copied literally, so you see "<h4>" in the web page? Or should it be interpreted as a level-4 header? Better yet, what if it were a custom tag that Dreamweaver doesn't know about, like <customheader>?
Maybe yes, maybe no. Dreamweaver can't read my mind. So it provides a paste variation: "Paste HTML". If I select that menu item, then Dreamweaver assumes it's code and doesn't show the tags in the web page. If I use the default Paste operation, Dreamweaver treats it as literal text and does show the tags in the web page. 
Figure 8-22. Word's paste variations are so complex that they need to appear in a separate dialog box. Word's Edit menu displays two paste items: Paste, which is the default (and performed by Control-V), and Paste Special, which brings up the dialog box. For the items currently on the clipboardtext with some bold words in itWord lists no fewer than seven destination formats! But as the user tentatively selects each format in that list, she can see a short description of the result. (In the case shown here, the description isn't actually all that helpful, but it could be.) Interestingly, the dialog box also shows the source of the clipboard items. 
|
