Creating Cool Web Sites with HTML, XHTML, and CSS apr phần 8 ppsx

557386 Ch12.qxd 4/2/04 10:16 AM Page 276 Ł 276 Creating Cool Web Sites with HTML, XHTML, and CSS I don’t know about you, but Figure 12-9 gives me a bit of a headache! The good news is that you have a couple of different ways to address the overlapping container problem. The fastest solution is to simply restore the background color so that you can’t see the text of the second paragraph, which the following example accomplishes: When the preceding code replaces the previous tag and style attributes, the result is as shown in Figure 12-10. You can see this is considerably easier on the eye. Figure 12-10: Specifying a background color hides the overlapping text problem. It’s not a completely satisfying solution, however, because you still face the issue of the miss- ing text. In this particular example, the best solution is to use the float: left CSS attribute. Experiment with it yourself and find what works best for you. Relative positioning Absolute positioning is absolute only within the parent container, and most DHTML designers prefer relative positioning, which they consider part of the normal flow of the document for layout. In the example in the preceding section, switching from absolute to relative solves the overlap problem, but in a somewhat inelegant manner (leaving a big empty space to the right of the purple box), as follows: Figure 12-11 shows the result of replacing the existing tag style attribute with the values shown in the preceding code. 557386 Ch12.qxd 4/2/04 10:16 AM Page 277 277 Ł Chapter 12: Advanced Cascading Style Sheets Figure 12-11: Relative positioning makes the container part of the regular document flow. In this case, float: left produces a more attractive result. So what’s the point? To see why the positioning of elements can prove so useful, I need to change the perspective a bit. Instead of merely providing you with a tool to create big containers of information, relative positioning can actually become your best friend when you want to exert fine control over the positioning of inline elements. The vertical-align CSS attribute enables you to change the relative location of an element, such as the trademark symbol, in a line of text. Relative positioning offers far greater control over inline positioning, and that’s its greatest value, as the following example shows: <style type=”text/css”> .tm { position: relative; top: -2.2em; left: -2em; font: 8pt bold; border: 1px red groove; padding: 1px; background-color: #009; color: white; } </style> </head> <body> This book has been brought to you by J. Wiley & Sons, Inc. <a href=”trademark-info.html” target=”new” class=”tm”>tm</A>— formerly Hungry Minds, Inc., formerly IDG Books, Inc. Here I create a new class, .tm, that creates a small blue box with white tm lettering inside that’s actually a hyperlink to the trademark information on the site. By using the top and left attributes, I can carefully tune exactly where the box appears on the layout, pixel by pixel. 557386 Ch12.qxd 4/2/04 10:16 AM Page 278 Ł 278 Creating Cool Web Sites with HTML, XHTML, and CSS Ł A figure illustrating this example appears on the book’s Web site at http:// on the www.intuitive.com/coolsites/ . web Fixed positioning You have one more possible positioning value, fixed. This position is essentially the same as absolute positioning with one spiffy difference: Fixed containers don’t scroll as the rest of the page scrolls. Fixed positioning offers another way to get around the hidden text problem: Simply let the user scroll to reveal the otherwise hidden text. Probably not the most user-friendly solution, but it works! Here’s a nifty fixed header example that shows up on this book’s Web site (at http://www. intuitive.com/coolsites/ , in Chapter 12). Ł Before you jump up and try this fixed position example on your computer, I give caution you fair warning: Windows browsers don’t support fixed positioning in my tests. overflow, and it offers three possible values: hidden, visible, and scroll hidden or scroll clip If not, the material is hidden. Now for the bad news: overflow or clip as the CSS clip attribute as rect(top, right, bottom, left), but Microsoft clip rect(top, left, width, height) . I encourage you to experiment with a combination of size, overflow, and clip values to see Clipping Containers The capability to size and position containers with a high degree of precision is useful, but if the contents are larger than the container parameters, browsers ignore the specified dimensions. Two CSS attributes offer control over what happens if the contents of a container are larger than the size that you specify for the container itself. The first is . For to work, you must define a clipping region, using the CSS attribute. You define the clipping region as a rectangle. Think of it as a stencil cutout superimposed atop the region, with its top left and bottom right vertices defined. If the material can be seen through the cutout, it’s displayed. Very few of the browsers available as of this writing support either specification defines them. Worse, the Cascading Style Sheet 2.0 specification defines the rectangular region associated with the Internet Explorer, in its flaky implementation of , expects a rectangular definition of whether you obtain results that are a reasonable solution for your specific design needs! 557386 Ch12.qxd 4/2/04 10:16 AM Page 279 279 Ł Chapter 12: Advanced Cascading Style Sheets Here’s how fixed positioning looks in HTML: ADVENTURE II. THE RED-HEADED LEAGUE Hide Containers with the Visibility: Attribute Examples in preceding sections demonstrate how you can assign containers a wide variety of layout attributes and can even make them float above other containers by setting position changes. Something that you may find remarkable is that every container also has a visibility: attribute—one that controls whether its contents appear on-screen or remain hidden to the viewer. The following example shows how this visibility attribute works: 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. “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.” “I think that I had better go, Holmes.” “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.” Figure 12-12 shows the results. 557386 Ch12.qxd 4/2/04 10:16 AM Page 280 Ł Ł 280 Creating Cool Web Sites with HTML, XHTML, and CSS Figure 12-12: You still must allocate space even for hidden containers. The most important thing to notice about Figure 12-12 is that the paragraph of information that’s hidden still has its space allocated in the layout of the page. To work with the visibility: of a container, you specify a unique ID (in this case, “holmes1”). To go further, you must jump into the world of JavaScript . . . Controlling visibility with JavaScript The visibility: attribute isn’t of much use unless you can make it visible on demand. To accomplish any event-based scripting on a Web page requires JavaScript, the official scripting language of HTML 4.0 and CSS 2.0. x-ref For a refresher on JavaScript, flip back to Chapter 11. The Web browser uses a document object model (DOM), and every container and element on the page is accessible through an appropriate reference to that element in the DOM. Ł To learn more about document object models, surf over to http://www.w3.org/ on the DOM/ . web To switch the value of the visibility: attribute from hidden to visible, reference the paragraph by ID through the circuitous route of the DOM itself, as follows: document.all.holmes1.style.visibility=”visible”; I’d better explain. 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 specify 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. “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.” “I think that I had better go, Holmes.” “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.” 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 to tie a JavaScript event to a container, as in the following example: “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.” The interesting thing about using 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 possible 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 : 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 buttons of the last paragraph as your inspiration for this approach: <body> 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. <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 “I think that I had better go, Holmes.” “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.” </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. [...]... 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... Chapter 13: Site Development with Weblogs Figure 13-5: The Movable Type administrative interface Figure 13-6: Editing 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... 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... 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... 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...Ł 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... your Web pages In Chapter 13, you will learn about weblog, a different and increasingly popular way to manage your Web site Site Development with Weblogs Ł In This Chapter Understanding weblogs? Ł chapter 13 Creating a weblog Getting a handle on RSS Ensuring valid RSS feeds O f the many trends to hit the Web in the last few years, few have had more impact on the daily experience of Web surfers than weblogs,... basic challenge of installation and configuration, followed by a typically similar interface for dayto-day use Chapter 13: Site Development with Weblogs Figure 13-1: TokyoTim’s Blogger site: http://tokyotim.blogspot.com/ Figure 13-2: Thug #4’s TypePad site: http://david.typepad.com/ Ł 295 Ł 296 Creating Cool Web Sites with HTML, XHTML, and CSS The key capability of weblogs is how much they let you... 14px;” onclick=”document.all.blue.style.zIndex=100;”> . 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 pixel by pixel. 557 386 Ch12.qxd 4/2/04 10:16 AM Page 2 78 Ł 2 78 Creating Cool Web Sites with HTML, XHTML, and CSS Ł A figure illustrating this example appears on the book’s Web site at http://

Creating Cool Web Sites with HTML, XHTML, and CSS apr phần 8 ppsx

Thông tin tài liệu

Từ khóa liên quan

Mục lục

Part II: Rockin' Page Design Strategies

Chapter 12: Advanced Cascading Style Sheets

Container Positioning

Relative positioning

So what's the point?

Fixed positioning

Hide Containers with the Visibility: Attribute

Controlling visibility with JavaScript

The display: attribute controls visibility and flow

Stacking: Using z-indexes for a 3D page

Using JavaScript to change z-index values

Summary

Chapter 13: Site Development with Weblogs

What Is a Weblog?

Working with a Weblog

Installing a weblog

Configuring a weblog

Adding a weblog entry

The World of RSS

Creating Valid XML / RSS Feeds

Validating an RSS feed

Exploring further

Summary

Part III: Expanding Your Page into a Web Site

Chapter 14: Web Sites versus Web Pages

Working with Subdirectories

The subdirectory structure of AnswerSquad

An even bigger site: Intuitive.com

Protecting Web Sites and Directories

Server-Side Includes

Useful server-side include options

config

Tài liệu cùng người dùng

Tài liệu liên quan