# Foundation Fireworks CS4- P10

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:30

0
52
lượt xem
5

## Foundation Fireworks CS4- P10

Mô tả tài liệu
Download Vui lòng tải xuống để xem tài liệu đầy đủ

Foundation Fireworks CS4- P10: The chapters in this book are divided into three parts: “Part 1: Learning Fireworks,” “Part 2: Using Fireworks,” and “Part 3: Fireworks in Action.” In this first part, we start by introducing you to the Fireworks application where it lives within the Creative Suite, what makes it unique, and why you would use it. You’ll be introduced to the bitmap and vector tools and learn how to export your artwork to the Web.

Chủ đề:

Bình luận(0)

Lưu

## Nội dung Text: Foundation Fireworks CS4- P10

1. 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; } 249
2. 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; } 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. 250
3. 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. 251
4. 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 252
5. 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. 253
6. Chapter 14 WEB SITE CASE STUDY #3: E-COMMERCE Earlier in this book, you learned that Fireworks is unique because of its strengths as a prototyping tool. In this case study, we’re going to showcase that strength as we cre- ate a prototype for a fictitious T-shirt store and related checkout pages common on most e-commerce sites. Along the way, you’ll also get an in-depth view of Fireworks’ abilities as a graphic design workhorse as you learn how to create a wide range of custom graphics for this faux store. Checking out with shared layers and pages This glimpse into the world of designing for e-commerce is made possible by the fictional T-shirt company Boxtees. Boxtees approaches you, the designer, to create a new logo, a fresh visual design, and some new pages for their online store that will better market their shirts and get customers through the checkout process easier. With this as the backdrop, we’ll show you step by step how to create a simple, yet attractive logo with vector shapes and text. We’ll also demonstrate how to draw a stylized T-shirt graphic with the Pen tool that is modular, making for easy and effi- cient mass production. And what is an e-commerce site without buttons? We’ll reveal a quick-and-easy way to create a custom-made button to match the site’s visual design instead of depending on those ugly default browser buttons. 255
8. WEB SITE CASE STUDY #3: E-COMMErCE Figure 14-1. The base layout of the Boxtees T-shirt store prototype 257
17. ChApTEr 14 Now we’re ready to populate the product listings. Boxtees sells one basic T-shirt, but it comes in six different colors. We’ll list each color T-shirt out as a separate “product,” named for the color of the shirt. The shirt is the showcase piece here, but we also need to leave room for price, available sizes, a size selection drop-down menu, a quantity field, and a button. Using symbols for efficient workflow All the product information is the same for each T-shirt. Once we get the first set of product informa- tion placed exactly where we want it, we can convert that group of objects into a symbol. In Fireworks, you can use symbols much the same way a developer uses “includes.” Developers embrace a common methodology called D.r.Y.—Don’t repeat Yourself. If you have to repeat yourself, you are not working efficiently. Symbols are a perfect way to prevent repetitive actions. Symbols should be used when you have an element (or group of elements) that is repeated multiple times on a page or across a network of pages. To convert an object to a symbol, select the object/group and then select Modify ➤ Symbol ➤ Convert to Symbol. The symbol can then be named and an instance is placed in a 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. Now if we want to change the price from $16 to$20, we can make the change in the sym- bol, and every instance on the page and throughout the document will be automatically updated. This is much easier and faster than changing the price of the T-shirt in six (or more) different locations. To edit a symbol that you’ve already created, just double-click the element, and the element will appear on its own subcanvas. In the top-left corner of the canvas, you’ll see what looks like a file path from the page to the symbol you’re currently editing. When you’re finished editing, just click the page name, and the symbol subcanvas will close, returning you to the main page canvas. Double-clicking the subcanvas will also allow you to exit editing mode. In this prototype, there are potentially several items that could be converted to use as a symbol, but we’ve used this efficiency technique on three elements—the product information listing and the text/ logo design on each T-shirt. As mentioned before, any element that will be used in multiple places is a candidate for converting into a symbol. Now that we have created symbols for some of our page elements, we’re ready to propagate the Store page by placing an instance of the product information symbol next to each T-shirt, making sure to use our guide lines to align everything neatly. Lastly, each T-shirt graphic should be changed to the correct color. All we have to do is select the T-shirt shape with the Subselection tool and change the fill color to the desired hue. The semitransparent shadow layer should be intact, creating a nice effect on each T-shirt graphic. Figure 14-14 shows the Store page with T-shirt images, product names, product information, and cart actions. 266