Table of Contents | Previous Next |
2.5 Other design techniques using the CSS style2.5.1 Changing the cursor shape with CSSIt is sometimes useful to alter the browser's environment. For example, you may want to change the browser's cursor when the mouse passes over a given element. To change the shape of a cursor with CSS is easy: all you need is to define the style attribute with the cursor keyword. The following are the 16 frequently used cursor shapes defined in CSS1: cursor:auto cursor:n-resize cursor:crossbar cursor:se-resize cursor:default cursor:sw-resize cursor:hand cursor:s-resize cursor:move cursor:w-resize cursor:e-resize cursor:text cursor:ne-resize cursor:wait cursor:nw-resize cursor:help Consider the following example page ex02-21.htm: Example: ex02-21.htm - Changing Cursor Shape With CSS 1: <?xml version="1.0" encoding="UTF-8"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 5: <head><title>Changing Cursor Shape ex02-21.htm</title></head> 6: <body style="font-family:arial;font-size:18pt;background:#eeeeee"> 7: 8: <div style="font-size:24pt;font-weight:bold;color:#00aa00; 9: text-align:center"><br /> 10: Move the mouse over the words <br />to see the cursor change<br /><br /> 11: 12: <table style="font-size:18pt;font-family:arial;color:#000000"> 13: <tr> 14: <td style="width:200px"><span style="cursor:auto">Auto</span></td> 15: <td><span style="cursor:crosshair">Crosshair</span></td></tr> 16: <tr> 17: <td><span style="cursor:default">Default</span></td> 18: <td><span style="cursor:hand">Hand</span></td></tr> 19: <tr> 20: <td><span style="cursor:move">Move</span></td> 21: <td><span style="cursor:e-resize">e-resize</span></td></tr> 22: <tr> 23: <td><span style="cursor:ne-resize">ne-resize</span></td> 24: <td><span style="cursor:nw-resize">nw-resize</span></td></tr> 25: <tr> 26: <td><span style="cursor:n-resize">n-resize</span></td> 27: <td><span style="cursor:se-resize">se-resize</span></td></tr> 28: <tr> 29: <td><span style="cursor:sw-resize">sw-resize</span></td> 30: <td><span style="cursor:s-resize">s-resize</span></td></tr> 31: <tr> 32: <td><span style="cursor:w-resize">w-resize</span></td> 33: <td><span style="cursor:text">text</span></td></tr> 34: <tr> 35: <td><span style="cursor:wait">wait</span></td> 36: <td><span style="cursor:help">help</span></td></tr> 37: </table> 38: </div> 39: </body> 40: </html> The 16 frequently used cursor shapes are defined in lines 1436. The cursor shape is defined by the keyword cursor followed by its attribute. For example, line 35 defines a "wait" cursor and it changes to an hourglass when the mouse passes over the word "wait." This page has the screen shot shown in Fig. 2.22. Figure 2.22. ex02-21.htm2.5.2 Displaying XML pages with CSSExtensible Markup Language (XML) is a meta programming language that can be used to create a data format for structured document interchange. How to display an XML page on the Web is a big issue a whole book or more could be written on this subject alone. We will cover XML and XSLT in more detail in Chapter 5. Consider the following example ex02-22.xml: Example: ex02-22.xml - Display XML Document With CSS 1: <?xml version="1.0"?> 2: <?xml-stylesheet type="text/css" href="ex02-22.css" ?> 3: 4: <page> 5: <contents> 6: <myPar>Display XML Document with CSS.</myPar> 7: <myPar>www.pwt-ex.com</myPar> 8: </contents> 9: </page> This is a simple XML page with one root element, <page>. Inside this page element, there will be a content element <contents> and one child element called myPar. By defining the XML style sheet in line 2 <?xml-stylesheet type="text/css" href="ex02-22.css" ?> the external CSS file ex02-22.css will be called to display the XML page. The style file is shown below: Example: ex02-22.css - External CSS File For ex02-22.xml 1: myPar 2: { 3: display: inline; 4: display: block; 5: margin-left: 40pt; 6: font-family:arial; 7: font-size: 22pt; 8: font-weight: bold; 9: color: #000088; 10: 11: margin-bottom: 30pt; 12: text-align: left; 13: line-height: 30px; 14: text-indent: 0px; 15: } This program will work on all the latest browsers including IE6+, NS6+, and Opera 6+. A screen shot of this program working in IE and NS is shown in Figs 2.23 and 2.24 respectively. Figure 2.23. Display XML page with IEFigure 2.24. Display XML page with NS2.5.3 Generating a text background with scriptsThe power of scripting languages has become extremely important in the development of Web technologies. It adds programming capabilities to Web pages. In fact, scripts are indispensable tools for almost all Web programmers. In this book, we have chapters dedicated to Web programming with scripts. Even at this premature stage, we would like to show you how a simple script can be used to enhance the features of your Web pages. The next example ex02-23.htm uses a very simple script function to generate a repeated text background on the page. Example: ex02-23.htm - Generating A Text Background 1: <?xml version="1.0" encoding="UTF-8"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 5: <head> 6: <title>Generating a Text Background ex02-24.htm </title> 7: </head> 8: <script> 9: function display_string() 10: { 11: for (ii=0;ii<500;ii++) 12: { 13: document.write("P r a c t i c a l W e b T e c h n o l o g i e s ") 14: 15: } 16: } 17: 18: </script> 19: 20: <body style="background:#000088;color:#ffff00;font-weight:bold"> 21: <script>display_string()</script> 22: <div style="position:absolute;left:100px;top:100px; 23: font-size:150pt;color:#ff0000">PWT</div> 24: </body> 25: </html> To define a script, the <script> element is used. This Web page contains two <script> elements: the first one in lines 818 defines a script (or JavaScript) with one function, display_string(). This function has a for-loop which will execute the following statements 500 times (see lines 1115): document.write("P r a c t i c a l W e b T e c h n o l o g i e s ") This statement outputs the text between the quotation marks to the Web page. The space between each character would allow the browser to have a line break at any point. You can use the non-breaking space symbol as illustrated in line 13 to add more space so that the text is more readable. The second <script> element in line 21 executes the defined function display_string() and therefore a background text is created. A screen shot of this page is shown in Fig. 2.25. Figure 2.25. ex02-23.htm |
Table of Contents | Previous Next |