Foundation Fireworks CS4- P10 pptx

249 WEB SITE CASE STUDY #2: CSS SPRITES #nav li { text-indent: -9999px; } #nav a { margin: 0 20px 0 0; background: url(nav.png); width: 100px; height: 28px; display: block; float: left; } #nav #nav- work a { background-position: 0 0; } #nav #nav- work a:active, #nav #nav- work a:focus, #nav #nav- work a.selected { background-position: 0 -56px; } #nav #nav- work a:hover { background-position: 0 -28px; } #nav #nav- learn a { background-position: -100px 0; } #nav #nav- learn a:active, #nav #nav- learn a:focus, #nav #nav- learn a.selected { background-position: -100px -56px; } #nav #nav- learn a:hover { background-position: -100px -28px; } #nav #nav- info a { background-position: -200px 0; } #nav #nav- info a:active, #nav #nav- info a:focus, #nav #nav- info a.selected { background-position: -200px -56px; } 250 CHAPTER 13 #nav #nav- info a:hover { background-position: -200px -28px; } #nav #nav- contact a { background-position: -300px 0; } #nav #nav- contact a:active, #nav #nav- contact a:focus, #nav #nav- contact a.selected { background-position: -300px -56px; } #nav #nav- contact a:hover { background-position: -300px -28px; } </style> At first glance it seems like there’s a lot going on with this CSS, but if you look closely you can see that a large portion of the code repeats for all four navigation buttons and their individual display state scenarios. We’ll go over the code blocks to explain exactly what’s happening. List reset Plain and simple, the following code is just a reset of the margin, padding, and list style so that the unordered list doesn’t have any indentations or bullet symbols. #nav,#nav li { margin: 0; padding: 0; list-style: none; } Figure 13-6 shows what the reset unordered list looks like in a browser. Figure 13‑6. The unordered list reset with no bullets or indentation. 251 WEB SITE CASE STUDY #2: CSS SPRITES Extreme negative text indent In the next code block, we set the text indent to an extreme negative value on all list items inside the unordered list so that there’s virtually no chance that the HTML text will display over the top of the background image. #nav li { text-indent: -9999px; } Figure 13-7 shows what the navigation would look like if we didn’t set the text indent to a negative value. Figure 13‑7. Text indent set to its default value Defining the dimensions The next code block is where we call nav.png and set it as the background image for all of the anchor tags within the unordered list. #nav a { margin: 0 20px 0 0; background: url(nav.png); width: 100px; height: 28px; display: block; float: left; } We also define the width and height, which will act as our viewport to the background bitmap. We’ve set the display element to block so that the entire dimensions of the 100 ✕ 28 px navigation item is clickable in all browsers. The float element is set to left so that the navigation items flow horizon- tally across the page, and we’ve added a 20- px margin to the right, which will make the navigation feel less cramped. Figure 13-8 shows the progress so far. Now all we need to do is position nav.png for the appropriate navigation items and display scenarios. 252 CHAPTER 13 Figure 13‑8. The navigation items all set to the same value Sliding the background into position In the next code block, we start by showing the CSS for the third navigation item so we can better illustrate exactly how we tell the CSS to slide the background image. #nav #nav- info a { background-position: -200px 0; } The values for the background- position prop- erty are telling the browser to move the back- ground image 200 px to the left and 0 px down. A positive number in the first position slides the image right, while a negative number slides the image left. Likewise, a positive number in the second position slides the image down, while a negative number slides it up. Figure 13-9 is a visual representation of the background image moving from its starting position in the upper left or 0 0 position to the -200px 0 position, and then to hover position at -200px -28px. The following bit of code takes care of the active, focus, and selected states by sliding the nav.png image 200 px to the left and 56 px up: Figure 13‑9. Background- position coordinates 253 WEB SITE CASE STUDY #2: CSS SPRITES #nav #nav- info a:active, #nav #nav- info a:focus, #nav #nav- info a.selected { background-position: -200px -56px; } We then place the hover section after the active, focus, and selected sections because we want the hover to retain its effect even when a nav item may be in the active position. In other words, we’d like visual feedback for the hover scenario regardless of the original state of the item. #nav #nav- info a:hover { background-position: -200px -28px; } It’s amazing what a little CSS can do. Figure 13-10 shows the exact same unordered list as in Figure 13-5, only this time CSS is being applied to replace the anchor tags with background images. When the user moves his or her mouse over the items, or uses the Tab key in some browsers, the CSS instantly slides the nav.png image to the appropriate viewing state. There are no delays or HTTP requests back to the server to load a new image, as everything is loaded into cache from the nav.png image. Figure 13‑10. Our plain unordered list is now all grown up and handsome. Summary Fireworks CS4’s pages feature works incredibly well for setting up sprite images within your existing design files. By using CSS sprites for the multiple navigation display states in our example, the final working web site will send fewer image requests to the server. This will in turn make all of the pages load and interact with mouse movements as fast as possible for all users, no matter what type of Internet connection they may have. So, a user viewing this page via a dial- up modem will have the exact same experience as another user across the globe viewing it through a corporate OC3. [...]... vs other tools, 3 Fireworks bitmap tools, in Tools panel, 32–33 Fireworks commands, default, 178–182 Fireworks developer box, streamlining workflow with, 204–207 Fireworks Developer Center, web site address, 223 Fireworks events detecting change of selection, 210–211 Extending Fireworks documentation for list of, 211 responding to, 210–211 responding to in ActionScript 3, 214–215 Fireworks Exchange,... Mundada’s Lorem Ipsum panel on, 161 Fireworks extensions, 175–187 Fireworks object model, learning, 221–222 Fireworks panel/Flash panel, 190 Fireworks to XAML Exporter panel, 189 Fireworks workflow, defining, 191–199 Fisheye Paths command, in Alter Paths section, 66 FLA file format, 190 Flash building a functional UI in, 199–204 creating ActionScript 3 panels in, 212–214 Fireworks integration with, 28–29... 149–152 modifying nine-slice scaling in, 152 Flex SDI See Adobe Flex framework Flex skin, 147 creating new in Fireworks, 144 exported artwork in Windows Explorer, 147 exporting, 147 Layers panel, 145 Folder Browser dialog, launching, 168 Foundation Fireworks CS4 See also Fireworks welcome to, 3 foundation terminology, 190 Frames panel See States panel Freeform and Reshape Area tools, in Vector tools section... opening a file, 26 support in Fireworks, 12–13 Illustrator (AI) file, importing, 28 image adjustment/effects tools, 41–44 image optimization choosing the right file type, 78 dithering images, 81 in Fireworks, 77–84 side-by-side comparison for, 84 image-slicing tools, included in Fireworks, 4 Import as a single flattened bitmap option, in Import Fireworks Document dialog, 29 Import Fireworks Document dialog... Extending Fireworks documentation, 221 for list of Fireworks events, 211 Extension Manager default locations for, 185 using, 185–187 extensions See also command extensions; command panel extensions; Fireworks extensions additional resources for, 184 disabling, 186 finding online, 182–184 installing new, 186 other types of, 177 types of, 176–182 uninstalling, 187 ExternalInterface object, registering Fireworks. .. using, 214–215 extreme negative text indent, 251 Extrude Paths command, in Alter Paths section, 65 F FDT (Fireworks Developer Toolbox), converting JSF to AS using, 205–207 file conversion, in Vector File Options dialog, 27 file optimization tools, in Fireworks, 75–76 file types, available for use in Fireworks, 78–79 filler text, generating quickly, 161 Fillet Points command, in Edit Points section, 70... file storage locations, 193 current user file storage locations, 193 Commands menu, commands stored in, 193–194 Common Library, 266 creation of, 9 community web sites, devoted to Fireworks, 184 compression and color settings, in Fireworks, 79 Confirmation page building, 271 example of finished, 271 content container, designing for master page, 158 content management system (CMS) choices of, 242 integrating... organizing objects and layers for, 258 Dodge and Burn tools, 42–43 Drawing tools, in Fireworks, 38–41 DrawRect, authoring in Flex Builder, 216 Draw Rect.as file, after conversion to ActionScript variable, 206–207 Draw Rect.jsf, updated with CreateRectangle function, 199–202 INDEX Draw Rect panel, updating, 207 Dreamweaver, and Fireworks, 4 Dreamweaver library file (.lbi) option, in Export drop-down, 89 Drop... page Building all the graphics in Fireworks Before we get into building individual pages for our ­ ake-­ elieve online ­ -­ hirt store, we need to m b Ts take some time to create some graphics to give the site some distinctiveness and character We’ll walk through how to create a logo, a ­ -­ hirt image, and a button This is a good opportunity to showcase Ts the power of Fireworks as a graphics creation... document library or in the Common Library for use in other projects, if desired A document library is a storage area within a Fireworks file that can contain objects or groups of objects The Common Library, as you may recall, is a library of graphics that can be used within any Fireworks file Instead of duplicating that group of static elements, we can place multiple instances of that symbol on the page . this feature in Fireworks CS3. Pages allows you to be super efficient in creating prototypes by holding all the pages of your design in one file, rather than creating a separate Fireworks file. storage area within a Fireworks file that can contain objects or groups of objects. The Common Library, as you may recall, is a library of graphics that can be used within any Fireworks file. Instead. tabular format. Making the Checkout page We’ve mentioned that Fireworks is a powerful prototyping tool. One of the things that makes Fireworks so useful for creating prototypes and wireframes is