Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 44 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
44
Dung lượng
1,87 MB
Nội dung
557386 Ch12.qxd 4/2/04 10:16 AM Page 281 281 Ł Chapter 12: Advanced Cascading Style Sheets You’re already familiar with the idea that a series of nested containers surrounds a given element on your Web page, right? Simply imagine that you now want a method of referring uniquely to any of the elements in any of the containers, and you see that this dot notation (that is, separating elements with a period) makes sense. In fact, by using a unique ID value, all you really have in the preceding line is the following: document.all.holmes1 This line refers uniquely to the container (paragraph) that you designate as holmes1 on the Web page. After you initially specify a unique element, you can access a wide variety of different attributes of that container by further utilizing the dot notation. To get to visibility:, you must use the .style element and then specify the exact name of the attribute that you want. Conceptually, it’s as follows: unique container descriptor.style.visibility After you specify the visibility: attribute of the style of the holmes1 paragraph, you can change its value by using a simple assignment statement in JavaScript, as follows: document.all.holmes1.style.visibility = “visible”; I hope that makes a bit more sense. Ł If you can’t get the examples in this session to work, perhaps your Web browser is tip using an older document model. If that’s the case, try using document.holmes. visibility = “visible”; instead. JavaScript is all eventbased, so to test this snippet of code, I’m going to associate the reas- signment of visible to a simple event that occurs on all Web pages: onload. After you spec- ify this event in the <body> tag of a page, onload enables you to easily specify JavaScript to execute as soon as the Web browser receives every element of the page from the network. Inline JavaScript looks a little bit different from inline CSS because you don’t have a single attribute that you always use, style. Instead, you list the desired event, with the associated JavaScript code on the right-hand side of the statement. The <body> tag of your page may look like this: <body onload=”document.all.holmes1.style.visibility=’visible’;”> By convention, many people write JavaScript events in mixed upper- and lower- note case letters, although to ensure that your page remains fully XHTML compliant, Ł JavaScript events should be all lowercase. 557386 Ch12.qxd 4/2/04 10:16 AM Page 282 Ł 282 Creating Cool Web Sites with HTML, XHTML, and CSS Following is a complete listing of the source for Figure 12-13: <body onload=”document.all.holmes1.style.visibility=’visible’;”> As he spoke there was the sharp sound of horses’ hoofs and grating wheels against the curb, followed by a sharp pull at the bell. Holmes whistled. <p style=”visibility: hidden;” id=”holmes1”> “A pair, by the sound,” said he. “Yes,” he continued, glancing out of the window. “A nice little brougham and a pair of beauties. A hundred and fifty guineas apiece. There’s money in this case, Watson, if there is nothing else.” </p> <p> “I think that I had better go, Holmes.” </p><p> “Not a bit, Doctor. Stay where you are. I am lost without my Boswell. And this promises to be interesting. It would be a pity to miss it.”</p> If you view this example in a Web browser, you may expect the hidden paragraph to appear along with the other paragraphs of material. Figure 12-13: JavaScript materializes the otherwise invisible paragraph. This example isn’t too scintillating, but what if you add the following two hypertext reference links to this page? They both associate with the onmouseover event, which triggers whenever the user moves the cursor over the highlighted text. <a href=”#” onmouseover=”document.all.holmes1.style.visibility=’visible’;”> make it visible</a> | <a href=”#” onmouseover=”document.all.holmes1.style.visibility=’hidden’;”> hide it</a> 557386 Ch12.qxd 4/2/04 10:16 AM Page 283 283 Ł Chapter 12: Advanced Cascading Style Sheets Now you can start to see where CSS plus JavaScript can really give you a tremendous amount of power! In this example, moving your cursor over the link hide it sets the visibility: of the holmes1 element to hidden, hiding the paragraph of text. Move your cursor over make it visible and the visibility: of holmes1 is set to visible, revealing the paragraph again. Ł The href=”#” is a common trick for a null hypertext reference that you tie to a note JavaScript event. If you click it, you go to the same Web page, effectively making it an empty reference. You can also use <span> to tie a JavaScript event to a container, as in the following example: “Not a bit, Doctor. <span onmouseover=”document.all.holmes1.style.visibility=’visible’;”>Stay where you are.</span> I am lost without my Boswell. And this promises to be interesting. <span onmouseover =”document.all.holmes1.style.visibility=’hidden’;”> It would be a pity to miss it.”</span> The interesting thing about using <span> is that the enabled text appears completely identical to the surrounding text. Go back to Figure 12-13 and look closely at the two sentences shown in the preceding example: Stay where you are. and It would be a pity to miss it. You can see no visible indicator that they’re turbocharged, capable of hiding or displaying a paragraph of the text on the user’s whim! The display: attribute controls visibility and flow Although the visibility: attribute is definitely valuable, it has one characteristic that makes it less than the ideal layout element: The browser allocates space for the invisible element even if it never appears on-screen. You can see that in Figure 12-12. CSS offers a second style attribute that enables you to simultaneously control the visibility and whether the space for the element is allocated: display:. According to the CSS 2.0 specification, the display: attribute offers a whole group of possi- ble values, as enumerated in Table 12-2. Table 12-2: Possible Values for Display Value Explanation inline Container with no break before or after. block Container with a forced line break above and below. list-item Element that creates both a box and list-item box (indented). Continued 557386 Ch12.qxd 4/2/04 10:16 AM Page 284 Ł 284 Creating Cool Web Sites with HTML, XHTML, and CSS Table 12-2: Continued Value Explanation run-in Element that you can insert into the subsequent container. compact Element that you can place adjacent to the subsequent container. marker Used for pseudocontainer references. inline-table Inline table container (not possible in regular HTML; regular tables are always block elements). table Table container. table-cell Table data-cell container. table-row Table data-row container. table-row-group Table data-row group container. table-column Table column container. table-column-group Table column group container. table-header-group Table header group container. table-footer-group Table footer group container. table-caption Table caption container. none Invisible container that gets no allocation for layout and flow. The only values that need interest you are none, block, and inline. The attribute display: none sets the visibility: of the element to hidden and frees up any allocated space for the container in the page layout. The other two possibilities, block and inline, illustrate the same distinction that differentiates <div> and <span>: The former forces a blank line above and below, whereas the latter displays no break from the surrounding material. Here’s how you can use display: none with the <span> buttons of the last paragraph as your inspiration for this approach: <body> <p> As he spoke there was the sharp sound of horses’ hoofs and grating wheels against the curb, followed by a sharp pull at the bell. Holmes whistled. </p> <div id=”holmes1” style=”display: none; font-style: italic;”> “A pair, by the sound,” said he. “Yes,” he continued, glancing out of the window. “A nice little brougham and a pair of beauties. A hundred and fifty guineas apiece. There’s money in this case, Watson, if there is nothing else.” </div> 557386 Ch12.qxd 4/2/04 10:17 AM Page 285 285 Ł Chapter 12: Advanced Cascading Style Sheets <p> “I think that I had better go, Holmes.” </p><p> “Not a bit, Doctor. <span onmouseover=”document.all.holmes1.style.display=’block’;”> Stay where you are.</span> I am lost without my Boswell. And this promises to be interesting. <span onmouseover=”document.all.holmes1.style.display=’none’;”> It would be a pity to miss it.”</span> </p> </body> This example is particularly interesting to experiment with on your own computer, but Figures 12-14 and 12-15 show how the page initially loads and how the page looks after I move my cursor over the sentence Stay where you are. Figure 12-14: The default layout with the <div> block hidden from view. Notice how no space or other indication in Figure 12-14 hints at anything lurking beneath the surface on this Web page; then take a look at Figure 12-15. Figure 12-15: The mouse is over the magic phrase, so the hidden paragraph emerges. 557386 Ch12.qxd 4/2/04 10:17 AM Page 286 Ł 286 Creating Cool Web Sites with HTML, XHTML, and CSS In this case, the JavaScript is different because I’m working with a different CSS attribute. Instead of visibility: hidden and visibility: visible, the settings are display: none and display: block. Inline elements use display: inline instead. Here’s how you can use display: inline to make acronyms automatically spell themselves out if someone puts the cursor over the acronym: <span onmouseover=”document.all.css.style.display=’inline’;” onmouseout=”document.all.css.style.display=’none’;”> CSS</span> <span id=”css” style=”display: none;”> (Cascading Style Sheets)</span> Type this small code snippet in and try it yourself; you’re sure to like the results! Notice the addition of a second JavaScript event: onmouseout triggers after the cursor moves out of the container. In essence, I set display to inline if the cursor is over the abbreviation CSS and reset it to none after the cursor moves out. Stacking: Using z-indexes for a 3D page I know it may have been years ago, but do you remember your high school geometry class? In the class, you undoubtedly learned about the three primary axes or dimensions of our physical space. Other dimensions exist, notably time (duration), that also affect physical space, but fortunately, I’m going to just look at the three core dimensions: height, width, and depth. Imagine that each container on a Web page has its own depth value and that, the deeper the element, the lower that depth value. A depth of zero is on the bottom, and a depth of 100 is on the topmost layer. If you have three layers, the depth values (which are known as z-index values in DHTML) may be z=0 for the bottom, z=1 for the middle, and z=2 for the topmost layer. The attribute z-index easily translates this concept into CSS nomenclature. The z-index attribute accepts a single integer value from zero to 100, with higher values positioned above lower values on the Web page. Here’s an example: <div style=”position: absolute; z-index: 0; background-color: blue; width: 250; height: 100; top: 105px; left: 14px;”></div> <div style=”position: absolute; z-index: 1; background-color: red; width: 200; height: 150; 557386 Ch12.qxd 4/2/04 10:17 AM Page 287 287 Ł Chapter 12: Advanced Cascading Style Sheets top: 80px; left: 40px;”></div> <div style=”position: absolute; z-index: 2; background-color: green; width: 100; height: 325; top: 10px; left: 90px;”></div> Figure 12-16 shows the result, which, on your computer screen, is quite attractive, particu- larly if you remember that each colored box is actually a full dynamic HTML container and can hold graphics, hypertext links, or whatever else you want. Figure 12-16: Three boxes, neatly stacked atop each other. Using JavaScript to change z-index values You can initially set z-index values within the CSS, but to dynamically change them, you must jump into JavaScript again. The onclick JavaScript event triggers the associated script after the cursor moves into the element and the user clicks the mouse button, as the following example demonstrates: <div id=”blue” style=”position: absolute; z-index: 2; background-color: blue; width: 250; height: 100; top: 105px; left: 14px;” onclick=”document.all.blue.style.zIndex=100;”> </div> <div id=”red” style=”position: absolute; z-index: 1; background-color: red; width: 200; Continued 557386 Ch12.qxd 4/2/04 10:17 AM Page 288 Ł 288 Creating Cool Web Sites with HTML, XHTML, and CSS Continued height: 150; top: 80px; left: 40px;” onclick=”document.all.red.style.zIndex=100;”></div> <div id=”green” style=”position: absolute; z-index: 0; background-color: green; width: 100; height: 325; top: 10px; left: 90px;” onclick=”document.all.green.style.zIndex=100;”></div> This change appears to achieve the result that you want. You create layers that you can click to bring to the foreground. If you try actually changing the z-index of the different layers in your browser, however, you quickly find that, after you move all three to the z-index of 100, they can’t move farther towards the top—so nothing changes. One solution to this problem is to make each layer move the other layers back to their original settings as it rises, so that each onclick looks more like the following example: onclick=”document.all.green.style.zIndex=100; document.all.blue.style.zIndex=2; document.all.red.style.zIndex=1;” This solution works (sort of), but although each layer that you click does indeed jump to the front after you click it, your browser loses the relative z-index values of the other two layers after they automatically reset to their original values. A more sophisticated approach to this situation makes the requested layer’s z-index increment by one and the z-index of the other layers decrement by one, as follows: onclick=”document.all.green.style.zIndex += 1; document.all.blue.style.zIndex -= 1; document.all.red.style.zIndex -= 1;” Ł Here I’m using a convenient JavaScript shorthand: The += is an increment, so a+=1 tip is exactly the same as a = a + 1; it’s just more succinct. This solves the problem, but now a new problem appears. You don’t want any layers to ever have a z-index of less than zero, because that’s an illegal value. If you blindly subtract from a zIndex, you could easily end up with a negative number. Another level of JavaScript sophistication can constrain the decrement statements so that the script checks for a zero value before deciding to subtract one, as in the following examples: onclick=”document.all.blue.style.zIndex += 1; if (document.all.green.style.zIndex > 0) { document.all.green.style.zIndex -= 1; } if (document.all.red.style.zIndex > 0) { document.all.red.style.zIndex -= 1; }” 557386 Ch12.qxd 4/2/04 10:17 AM Page 289 289 Ł Chapter 12: Advanced Cascading Style Sheets In addition to ensuring that nothing is ever less than zero, you must also be sure that nothing is ever greater than 100, the maximum z-index value that you can have, as the following example shows: onclick=”if (document.all.blue.style.zIndex < 100 { document.all.blue.style.zIndex += 1; } if (document.all.green.style.zIndex > 0) { document.all.green.style.zIndex -= 1; } if (document.all.red.style.zIndex > 0) { document.all.red.style.zIndex -= 1; } To understand what’s wrong with this seemingly reasonable solution, open this example from the book’s Web site ( http://www.intuitive.com/coolsites/) and click the red layer a half-dozen times, then click the blue layer. The result that you want is for the blue layer to move to the front after you click, but it doesn’t work. Clicking the red layer a half-dozen times increments its z-index each time, resulting in a red z-index of 7 (after starting out at z-index: 1, remember). Clicking blue then sets its z-index to 1 (after starting at 2 but decrementing to zero because of the clicks on red) and decrements the red layer from 7 to 6. Four more clicks on the blue region are necessary before the blue layer correctly moves to the top. The complete solution is actually to write a sophisticated JavaScript function that checks the value of the other layers and ensures that the layer that you want increments sufficiently to move to the front. Subsequently clicking that layer doesn’t result in any change in z-index values. Ł Netscape Navigator includes a built-in method (a fancy name for a subroutine) to accomplish what you want: moveAbove(id). However, it requires that you use the note Netscape <layer> approach to layers rather than the more standard CSS <div> tags, as shown here. A JavaScript function implementing the moveAbove concept might look like this: <script language=”JavaScript”> function moveAboveIt(id1, id2) { id1o = eval(“document.all.”+id1+”.style”); id2o = eval(“document.all.”+id2+”.style”); if (id1o.zIndex > id2o.zIndex) { return 1; // already above, nothing to do } if (id2o.zIndex == 100) { id2o.zIndex -= 1; } id1o.zIndex = id2o.zIndex + 1; return 1; } </script> 557386 Ch12.qxd 4/2/04 10:17 AM Page 290 Ł 290 Creating Cool Web Sites with HTML, XHTML, and CSS This example represents quite a lot of JavaScript, but it’s really rather straightforward: If id1 already has a higher z-index value than id2, the function has nothing to do and exits directly. If id2 is already at 100, id1 can’t be one higher, so id2 must decrement by one, which you do by using the -=1 shortcut. Finally, id1’s z-index is set so that it’s one higher than id2’s z-index. Meaning margin margin-left margin-right margin-top margin-bottom padding padding-left Specifies left padding setting only padding-right Specifies right padding setting only padding-top Specifies top padding setting only padding-bottom Specifies bottom padding setting only border include border-left, border-right, border-top, or border- bottom). width height float position top left overflow clip) clip overflow attribute visibility display zindex Table 12-3: CSS Styles Covered in This Chapter Tag Specifies spacing between container contents and surrounding material Specifies left margin setting only Specifies right margin setting only Specifies top margin setting only Specifies bottom margin setting only Specifies spacing between container contents and container edge Specifies color, style, and size of container border element (other values Specifies container width Specifies container height Specifies container’s relationship container to surrounding material Specifies container’s position on page. Specifies position of container’s top relative to its parent container Specifies position container left side relative to its parent container Determines what Web browser does with content that doesn’t fit in con- tainer (must define a clipping region with Defines a clipping region to use with Indicates whether container is visible or not Controls container visibility and flow in page layout Specifies container’s relative z-index value [...]... or two files, and others that are entire Web sites: $ ls -F Graphics/ apps/ library.shtml limpet/ Continued Ł 312 Creating Cool Web Sites with HTML, XHTML, and CSS Continued articles/ bio.shtml blog/ cgi-lib.pl cgi-local/ clanpb.shtml consulting.shtml contact.shtml coolsites/ coolweb/ custer/ dhtml/ directions/ ebay/ errordoc-404.shtml errordoc-500.shtml favicon.ico footer .html games .html globalsoftware/... contact.shtml covers/ faq.shtml foot .html head .html index.shtml insidepeek .html ip.shtml join-peek.cgi learnmore.shtml library.shtml listrules.shtml mailform.cgi mailman-help.shtml members.shtml press/ pressroom.shtml privacy.shtml samples.shtml signup.shtml subscribe-cancel-thanks.shtml subscribe-thanks.shtml thanks-peek.shtml thanks.cgi thanks.shtml In the previous listing, the -F flag to the ls command... tyu24 Graphics/ Previous/ author.shtml bottomslice .html browsex .html buyit.shtml chap19.shtml coming-soon.shtml dickens .html download.shtml exchange/ exchange-cgi .html exchange .html exchange.zip exchange2.zip fget .html fget.zip fget2.zip hello.cgi index.shtml links.shtml middleslice .html netiq .html printers .html reviews.shtml samples.shtml template .html toc.shtml topslice .html I basically duplicate the... Protecting your Web sites and directories with passwords Working with server-side includes N ow that you’ve learned the nuts and bolts of HTML and CSS Web page ele ments, it’s time to expand your horizons and explore how to structure and organize a Web site comprised of many different Web pages Web sites and Web pages are not the same thing, as you’ve probably noticed if you’ve built a site with more than... Creating Cool Web Sites with HTML, XHTML, and CSS Ł on the web You have more to learn about htaccess and password files, including how to create an encrypted password entry and add it to the existing file I have a helpful note addressing this topic on this book’s companion Web site at http://www intuitive.com/coolsites/ Server-Side Includes Step back from security issues for a moment and consider Web. .. site Ł 294 Creating Cool Web Sites with HTML, XHTML, and CSS What Is a Weblog? Imagine a system that automatically does the following: • Creates new Web pages that are visually consistent with the existing site • Links all pages together • Organizes content based on the entry date and user-defined categories • Offers readers alternative methods of keeping track of what’s new • Works within a Web browser... specific areas of the site from unauthorized viewing Ł 314 Creating Cool Web Sites with HTML, XHTML, and CSS If your Web hosting provider is running the Apache Web server (and most do), odds are excellent that you can create password-protected areas on your Web site—or even protect the entire site itself—without a single line of CGI code! Ł note Other Web server software programs also include various levels... holds the content pages) Ł 310 Creating Cool Web Sites with HTML, XHTML, and CSS Besides enabling you to separate sets of files into more manageable chunks, subdirectories also make it easier to implement directory-specific security (which I discuss in the section “Protecting Web Sites and Directories”) and create beta (test) sites Subdirectories benefit even the smallest Web site Consider a site I recently... templates in Movable Type Ł 299 Ł 300 Creating Cool Web Sites with HTML, XHTML, and CSS To edit a specific template, click on its name and something similar to Figure 13-7 is displayed Figure 13-7: Viewing the CSS within Movable Type If you’re looking at Figure 13-7 and thinking that it looks a bit tedious, well, it is Bloggers who opt to really fine-tune their layout and site presentation end up spending... working in the depths of your Web server, or you need to contract with someone to install the application for you When I installed Movable Type on my server, I followed the detailed installation instructions from SixApart, and it took me a few hours to get everything installed correctly Ł 2 98 Creating Cool Web Sites with HTML, XHTML, and CSS Ł tip You can contract directly with SixApart to have one of . red; width: 200; Continued 557 386 Ch12.qxd 4/2/04 10:17 AM Page 288 Ł 288 Creating Cool Web Sites with HTML, XHTML, and CSS Continued height: 150; top: 80 px; left: 40px;” onclick=”document.all.red.style.zIndex=100;”></div>. emerges. 557 386 Ch12.qxd 4/2/04 10:17 AM Page 286 Ł 286 Creating Cool Web Sites with HTML, XHTML, and CSS In this case, the JavaScript is different because I’m working with a different CSS attribute from SixApart, and it took me a few hours to get everything installed correctly. 557 386 Ch13.qxd 4/2/04 9:56 AM Page 2 98 Ł 2 98 Creating Cool Web Sites with HTML, XHTML, and CSS Ł You can