ptg 252 HOUR 15: Buttons, Buttons, Buttons FIGURE 15.10 The .advancedBox a style is applied to the new but- tons, but they cover each other because the list item style has not been modi- fied yet. 3. Import the images named blueButtonUp.gif and blueButtonOver.gif from the lesson files and save them in a new folder called buttonGraphics. 4. Make a new style and give it the selector name .advancedBox a. In the Font category, set font-family to Arial, Helvetica, sans-serif, font-size to 0.8em, font-weight to bold, and text-transform to uppercase, font-color to white (#FFFFFF). Check the None box under text-decoration to get rid of the line under the text. 5. In the Background category, set background-image to the blueButtonUp.gif image you just imported, and set background-repeat to no-repeat. Because the image is larger than the text and you want it to surround the text, go to the Box category and set padding to 13px on all sides. Click OK to apply the style. 6. In Design view, you can see that the new button background is applied, but the buttons are covering each other (see Figure 15.10). This is because the list items have not yet been styled, and the browser assumes that the list items are the height of the text without the padding. To fix this problem create a new style with the selector name .advancedBox li and set the padding-top and padding-bottom attributes to 13px to match the link style you just created. Click OK to apply the new style, and the buttons no longer overlap. 7. To create a hover-over effect, create a new style with the selector name .advancedBox a:hover. Because the :hover pseudoclass inherits all the From the Library of Lee Bogdanoff ptg Creating Buttons from Scratch Using CSS 253 styling from the main a class, all you need to do is change background-image to blueButtonOver.gif. Click OK, and then save and preview in your browser. Now instead of the background color changing when the mouse hovers over the but- ton, the background image swaps out. And because the background image is part of the a style, the entire image is clickable, not just the text itself. The problem with this technique is that it requires two images to work. This might not seem like a big deal, but if the user is on a slow connection, the page is on a slow server, or if there is something else that slows the system down, the user might experi- ence noticeable lag between hovering over the button and the new background image being loaded. One way around this problem is to preload the images using behaviors, but this requires JavaScript to work properly. Create Text-Free Buttons with Sliding Doors The problem of preloading content has become more prevalent with the emergence of blogs because many blogs have a lot of scripts running at the same time, and it is important to reduce the load on both the network and the computer as much as pos- sible to make things work smoothly. A technique often referred to as sliding doors was developed to enable the designer to use one image file as two different backgrounds. This is done by creating a file that has two versions of the background, either on top of or to the side of one another. The name sliding doors refers to the action of literally sliding the background from one side to the other to display only half of the image at a time (see Figure 15.11). You can use a similar technique to hide text content. As you have seen, the regular method of creating buttons requires there to be text superimposed on the back- ground. If you don’t want the text to appear, the quick answer is to simply swap out the text for an image and use it as a button. But if you do this, the link is not visible if FIGURE 15.11 The name sliding doors refers to the action of sliding the back- ground image so that only half of it is visible depending on how the mouse interacts with the button. From the Library of Lee Bogdanoff ptg 254 HOUR 15: Buttons, Buttons, Buttons FIGURE 15.12 The new button text is wrapped in a <span> tag and the .slider class is applied. the image doesn’t load or the visitor uses a text-only browser. The way to solve this is to push the text out of the way so that only the background image appears. Another reason to use this technique is that designers often want to use custom fonts or font effects in their buttons. To do this and retain full accessibility, they need to hide the regular HTML text first. In this example, you create a button that uses the sliding doors technique and hides the text at the same time. 1. Import the file named slidingButtons.gif into the buttonGraphics folder from the lesson files. Under the three buttons you just created, add a new subheading and call it Sliding Doors Button with Hidden Text. Below it, add a paragraph with the text Button and make it into a hyperlink pointing back to the current page. 2. Make a new class called .slider. Create a span around the new button text using the Toolbox panel (make sure the <span> tags go on the outside of the <a> tags), and apply the .slider class to it using the Quick Tag Selector (see Figure 15.12). 3. Make a new style and give it the selector name .slider a. Because you are going to hide the text you don’t need change any of the Font attributes. In the Background category, set background-image to slidingButtons.gif and background-repeat to no-repeat. From the Library of Lee Bogdanoff ptg Creating Buttons from Scratch Using CSS 255 FIGURE 15.13 After styling, the button appears as it should, but the text is still visible. 4. To create the sliding effect, you need to change the position of the background image and define the visible area within the page. The image has two buttons on it: The top one is for the regular state, and the bottom one is for the :hover state. Set the (x) background-position to 0px and the (y) background- position to 0px. This locks the image in place. 5. To define the visible area of the button, you need to first set the display attrib- ute under the Layout category to Block to create an independent box in which to display the content and then change the size of the box under the Position category. The height of the image is 88px and because you will be displaying half of it at one time, the height attribute should therefore be 44px. To contain the active area of the button to the area of the image, set the width attribute to 92px, which is the width of the image. Click OK to apply the style, and the but- ton appears in Design view, as shown in Figure 15.13. 6. As you can see, the button looks the way it should, but the text is still visible. To hide the text, open the Modify Style dialog for the style, go to the Block cate- gory, and set the text-indent attribute to -9999px (see Figure 15.14). Click OK to save the change. 7. Finally create a new style with the selector name .slider a:hover. Because of the cascade, any pseudoclass inherits all the styling from its parent unless the style is changed. Therefore you need to make changes to only the From the Library of Lee Bogdanoff ptg 256 HOUR 15: Buttons, Buttons, Buttons FIGURE 15.14 Setting the text- indent attribute to -9999px places the text of the button 9999 pixels to the left of the screen, making it invisible to the visitor. Did you Know? background-position attributes, and the rest of the attributes will stay the same. Set (x) background-position to 0px and (y) background-position to -44px. This shifts the background image up 44 pixels, and the bottom half is shown in place of the top half. Click OK, and then save and preview in your browser. Designers frequently use the sliding doors technique to create eye-catching rollovers without load times getting in the way. In this example, the background image only had two versions, but you could have an image with more instances. Likewise, you can place the images next to one another instead of on top of each other and change the (x) background-position value instead. You can find more information and tutorials on how to use the sliding doors tech- nique at the A List Apart website: www.alistapart.com. Summary Buttons are an integral part of a website, both as navigational tools and as design elements. Knowing how to make and when to use different styles of buttons makes your life easier as a designer and your sites easier to navigate for the visitors. Buttons can be anything from simple colored boxes with text inside them to advanced image-based elements with different graphics for each state. The layout and design of the page, and what the designer wants out of it, drive the choice of what kind of button to use. From the Library of Lee Bogdanoff ptg Q&A 257 To simplify the process of creating interactive buttons, Expression Web 3 has a built- in Interactive Buttons function that lets you choose a design and set properties for a wide range of prepackaged buttons. In this hour, you learned how to create and cus- tomize these interactive buttons and insert them into your page. The major benefit of the interactive buttons is that even after inserting them in your page, you can always go back to the Interactive Buttons dialog and change the design and font attributes of the button without creating a new one. This high level of flexibility is great when you design pages on-the-fly and you’re not sure what the end product will look like. The downside of interactive buttons is that they are limited in the button design. If you want to move beyond the designs of the prepackaged interactive buttons, the best way to go is to create CSS buttons instead. The advantages of CSS buttons are that they are text-based and standards-compliant, and a visitor who uses a text-only browser can still see the hyperlinks within the buttons. In this hour, you learned how to create simple box-type buttons with interactive features using CSS. You also learned how to take these buttons to the next level by replacing the solid color back- grounds with images. Finally, you learned how to use the sliding doors technique to use one image as the base for multiple different button states by sliding it in the background to show different versions of the same button image. Q&A Q. I inserted an interactive button in my page, but all I see is a small box with a red X in it. What is wrong? A. When you make an interactive button, Expression Web 3 creates a series of images to correspond to the different button states. If you are seeing a red X, the link to the image or images is broken, probably because you deleted the images accidentally, didn’t save them when you saved the page before closing the application, or moved them to a different folder outside of Expression Web 3. To fix the problem, simply right-click the interactive button in Design view and select Button Properties from the context menu. From here, you can make changes to the button or, if you just want to reestablish the images, simply click OK, and the button shows up as it is supposed to. Q. I created a second copy of the sliding doors button, but it shows up under- neath the first one no matter what I do. Why can’t I make these buttons show up next to each other? A. Although sliding doors buttons can easily be lined up next to one another, the one you made in this example cannot do so without putting each of the From the Library of Lee Bogdanoff ptg 258 HOUR 15: Buttons, Buttons, Buttons buttons in a separate table cell. The reason for this has to do with the hiding of the button text, not the sliding doors function. Workshop The Workshop has quiz questions and exercises to help you put to use what you just learned. If you get stuck, the answers to the quiz questions are in the next section. But try to answer them first. Otherwise you’ll be cheating yourself. Quiz 1. What is the advantage of using Interactive Buttons generated by Expression Web 3? 2. When creating the basic and advanced box buttons, do you need to create sep- arate styles for each of the buttons? Answers 1. The Interactive Buttons created by Expression Web 3 are accompanied by macros that help the application remember its settings. That means you can completely change the look and functionality of the buttons from the Interac- tive Button Properties dialog even after they have been inserted. 2. No, not unless you want to. The idea of using CSS to create box buttons is that you can apply the same styling and background (either color or image) to mul- tiple buttons with one set of styles. That way you can make quick changes to multiple buttons throughout your site by changing only a few styles rather than having to change each individual button separately. You can, however, make individualized buttons with individual backgrounds or styles by wrap- ping each button instance in a <span> tag. Exercise Using the Interactive Buttons feature, create a series of new buttons with different designs and layouts. After inserting them, pick one design you like and change all the buttons to that look by changing their button properties. To give the visitor a visual cue that the button has been pressed before, make styles for the :active and :visited pseudoclasses for all the different CSS buttons you cre- ated. The :active style usually has a bold appearance (bright colors and dark font), whereas the :visited pseudoclass is usually more muted than the other styles. From the Library of Lee Bogdanoff ptg Introduction 259 HOUR 16 Using Behaviors What You’ll Learn in This Hour: . How to apply behaviors to elements in your site . How to edit existing behaviors . How to change the events that trigger behaviors . What the different behaviors in Expression Web 3 are and how they work Introduction Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS) are powerful tools that can take you a long way to making a great website. But for all the virtues of those tools, many tasks are impossible or far too cumbersome to do using them alone. To help simplify some of these tasks, Expression Web 3 comes complete with a set of behaviors to insert into your pages. Behaviors are small pieces of JavaScript that, when inserted, perform actions within the page and give the visitor a more powerful interactive experience. Behaviors: An Introduction The behaviors in Expression Web 3 can be accessed from the Behaviors panel, which when selected from the Panels menu on the toolbar, opens in the lower-right corner of the workspace next to the Apply and Manage Styles panels (see Figure 16.1). When you insert a behavior into your page, you are actually adding a block of JavaScript code to it. JavaScript is a basic script language that enables you to perform many tasks that are not available or are otherwise hard to achieve using HTML and CSS alone. From the Library of Lee Bogdanoff ptg 260 HOUR 16: Using Behaviors FIGURE 16.1 The Behaviors panel docs to the bottom-right panel when it is opened. Boiled down to its basic components, a behavior consists of two elements: an event and an action. An event is an interaction, usually performed by the user, which tells the browser that something happened and asks it to respond by running a script. Events are standardized code segments that, in most cases, describe themselves pretty well. Here are some examples: . onclick—When the object is clicked . ondblclick—When the object is double-clicked . onload—When the object is loaded by the browser . onmousedown—When the mouse button is pressed . onmouseover—When the mouse pointer is over the object When triggered, an event sends a set of predefined arguments to the browser that it passes on to the action. In short, the event describes what needs to happen for the action to trigger. An action is a JavaScript function (tiny program) that executes when the correspon- ding event occurs. The action receives the arguments from the event, and the script performs the programmed task with these arguments. Creating a Swap-Image Behavior The easiest way to understand how a behavior works is to see it in action. So, before you immerse yourself in all the different behaviors available, you apply a simple behavior to an image: 1. Create and open a new HTML page called behaviors.html in Design view. From the Library of Lee Bogdanoff ptg Creating a Swap-Image Behavior 261 FIGURE 16.2 Clicking the Insert button in the Behaviors panel opens a menu with all the available behaviors. FIGURE 16.3 The Swap Image URL is set, and the Preload Images and Restore on Mouseout Event options are checked. 2. From the buttonGraphics folder, drag and drop the blueButtonUp.gif file into the page. Give it the alternative text Behavior button. 3. Click the image to select it, and click the Insert button in the Behaviors panel to open the Behaviors menu (see Figure 16.2). 4. Select the Swap Image behavior from the menu. This opens the Swap Images dialog. 5. In the Swap Images dialog, click the Browse button and select the blueButtonOver.gif image. Click OK and the image location now appears in the Swap Image URL column. Leave Preload Images checked and check Restore on Mouseout Event as well. Click OK to apply the new behavior (see Figure 16.3). From the Library of Lee Bogdanoff [...]... button you created in step 1 controls the menu Save and preview in your browser to test the new behavior Open Browser Window In Hour 5, “Getting Connected with (Hyper)Links: The Cornerstone of the World Wide Web, ” you learned how to make hyperlinks open in a new window The Open Browser Window behavior takes this to a whole new level by letting you create hyperlinks that open in new windows in which you set... particular plug -in installed In this example, you make a button that points to the popular video-sharing website YouTube If a user’s browser does not have the Flash plug -in installed, she cannot view videos on YouTube, so redirect her to the Flash plug -in download site instead From the Library of Lee Bogdanoff The Many Behaviors of Expression Web 3 271 1 Select the button you previously inserted, and... Browser Window behavior to make the thumbnail open a new window that fits that photo exactly 1 Open the eos1.html page and find the detail thumbnail in the third paragraph 2 Right-click the thumbnail, select Hyperlink Properties from the pop-up menu, and click Remove Link in the Edit Hyperlink dialog to remove the original link Click OK 3 With the thumbnail selected, click the Insert button in the Behaviors... CNN as the Choice setting and From the Library of Lee Bogdanoff The Many Behaviors of Expression Web 3 2 73 http://www.cnn.com as the Value setting Click OK to add the item to the jump menu (see Figure 16.17) FIGURE 16.17 The Add Choice dialog appears when you click Add in the Jump Menu dialog and lets you insert new menu items and their corresponding links 3 Add a series of new links to other news sources... understanding JavaScript Looking at JavaScript in more detail is beyond the scope of this book In the upcoming hours, you apply what you learned about behaviors to some of the content in the MyKipple site to create a more interactive experience for the visitor Q&A Q When I click the last button with both an Open Browser Window and a Popup Message action, the new browser window opens behind the main window... up the final set of options in the Open Browser Window dialog By checking and unchecking these boxes, you turn various features of the window on and off Leaving all of them unchecked means you get a stripped window with no navigation or other features (see Figure 16.20) Click OK to apply the new behavior FIGURE 16.20 The Open Browser Window dialog with all the new settings completed After saving and... 16. 23) There you type out your message and click OK to insert it into the page From the Library of Lee Bogdanoff 278 HOUR 16: Using Behaviors FIGURE 16. 23 The Popup Message dialog lets you insert the text you want to display in the warning box When triggered, the Popup Message behavior creates a warning box with the text you inserted, and the visitor has to manually close it to move on (see Figure 16 .24) ... inside a set of tags in Code view and give it a unique ID However, for some reason, Expression Web 3 treats tags differently from all other tags So, when you apply a behavior to a tag, Expression Web 3 inserts it without an event! To make the behavior work properly and show up in the Behaviors panel, you need to manually insert the event ahead of the action in Code view Set Text Set... contain only numbers and letters, no spaces or symbols Name the window image 6 The Window Width and Window Height setting define the physical width and height of the new window The default value is 200px by 200px, which is very small The eos1Detail.jpg image is 600px wide and 600px high, so match these values in your window From the Library of Lee Bogdanoff 276 HOUR 16: Using Behaviors 7 The window’s... Exercise Later in this book, you learn how to use Behaviors to create an interactive menu Here is a preview: Create a table with one row and four columns, and place a new button in each of them Use the different behaviors you learned about in this hour to make the buttons do different things, such as changing the properties of a block of text, creating a new window pointing to your favorite website, or . of creating interactive buttons, Expression Web 3 has a built- in Interactive Buttons function that lets you choose a design and set properties for a wide range of prepackaged buttons. In this. cus- tomize these interactive buttons and insert them into your page. The major benefit of the interactive buttons is that even after inserting them in your page, you can always go back to the Interactive. image. Q&A Q. I inserted an interactive button in my page, but all I see is a small box with a red X in it. What is wrong? A. When you make an interactive button, Expression Web 3 creates a series