Foundation Fireworks CS4- P10

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 introducingyou to the Fireworks application where it lives within the Creative Suite, what makes itunique, and why you would use it. You’ll be introduced to the bitmap and vector tools andlearn how to export your artwork to the Web.
Nội dung trích xuất từ tài liệu:
Foundation Fireworks CS4- P10 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;} 249ChapTEr 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 WEB SITE CaSE STUDY #2: CSS SprITESExtreme 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 valueDefining 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. 251ChapTEr 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 ...