Tự học HTML và CSS trong 1 giờ - part 44 pot

ptg LISTING 13.6 Continued #nav { border-bottom: 1px solid lime; } #main { margin-left: 11.5em; margin-right: 11.5em; border: 0px solid lime; margin-bottom: 1.5em; margin-top: 1.5em; } #nav a:hover, #footer a:hover { color: lime; } #sidebar0 { position: absolute; left: 2em; top: 3em; width: 9em; text-align: right; } If that was hard to follow, don’t feel bad; the difficulty was intentional. CSS rules are easily obfuscated if you’re not careful. Most style sheets grow organically as piecemeal additions are made; discipline is necessary to keep the style sheet readable. The style sheet in Listing 13.7 is really the same style sheet as in Listing 13.6. Both are valid style sheets and both produce the same results when applied to the web page, but the second one is easier to understand. Comments make clearer what each section of the style sheet does, indentation and whitespace are used effectively, and the order is much easier to follow. LISTING 13.7 A Better-Organized Style Sheet /* default styles for the page */ body { background-color: white; color: #333333; font-family: Verdana, sans-serif; margin: 0; padding: 0; } a:link { color: #DD8800; text-decoration: none; } a:visited { color: #CC8866; text-decoration: none; } a:hover { color: lime; } /* layout superstructure */ #layout { padding: 1em; } /* top navigation bar */ #nav { position: fixed; top: 0px; left: 0px; color: white; width: 100%; padding-top: 3px; padding-bottom: 3px; background-color: #333333; text-align: center; text-transform: lowercase; } border-bottom: 1px solid lime; } #nav .section, #nav .shead, #nav .sitem, #nav h1 { display: inline; } #nav .section 406 LESSON 13: Advanced CSS: Page Layout in CSS Download from www.wowebook.com ptg LISTING 13.7 Continued { font-size: 90%; } #nav .shead, #nav .sitem { padding-left: 1em; padding-right: 1em; } #nav h1 { font-size: 1em; background-color: #333333; color: white; } #nav a:hover, #footer a:hover { color: lime; } #nav a:link, #nav a:visited, #footer a:link, #footer a:visited { text-decoration: none; color: #CCCCCC; } /* main content section */ #main { margin-left: 11.5em; margin-right: 11.5em; margin-bottom: 1.5em; margin-top: 1.5em; border: 0px solid lime; } /* two sidebars, absolutely positioned */ #sidebar1 { position: absolute; right: 2em; top: 3em; width: 9em; } #sidebar0 { position: absolute; left: 2em; top: 3em; width: 9em; text-align: right; } #sidebar0 .section, #sidebar1 .section { font-size: smaller; border: 0px solid lime; text-transform: lowercase; margin-bottom: 1em; } Sitewide Style Sheets The style sheet given in Listing 13.7 was created to be used on the entire site, not just on one page. Linking to an external style sheet is an easy way for you to apply style sheets over your entire set. You just use the <link> tag on every page, with the href attribute set to the location of your site-wide style sheet. A sitewide style sheet can be used to enforce a consistent appearance on the website, even if you have multiple web developers working on different parts of the same site. Additional styles can be added in embedded style sheets or in additional linked CSS files that are created for each department or business unit. For example, each department at a school may use the school’s global style sheet for design elements common to the entire site, and individual departmental style sheets for that department’s unique color, layout, and font choices. The Role of CSS in Web Design 407 13 Download from www.wowebook.com ptg Summary Tables have long been used in web design to lay out a web page. However, this misuse of <table> markup introduces a plethora of complications, from accessibility concerns to complexity problems. Using CSS for layout can clean up your HTML code and produce flexible designs that can be updated easily to new styles. Laying out a page with CSS starts with adding sections to the HTML, using <div>s with ID selectors. These are then arranged in vertical columns, through the use of either posi- tioning rules or the float property. With CSS layouts, it’s not difficult to reorder and reshape the page simply by changing the style sheet. Workshop The workshop contains a Q&A section, quiz questions, and activities to help reinforce what you’ve learned in this lesson. If you get stuck, the answers to the quiz can be found after the questions. Q&A Q Is it ever okay to use tables for layout? A Never, ever, ever! Well, almost. CSS layouts generally are more efficient and ver- satile than <table>-based code, but if you are careful to test your layout tables in a browser such as Lynx to make sure that the site is usable without tables, you can probably get away with it. Tables aren’t awful for laying out a page, and CSS can be tricky when you’re dealing with grid-based designs. In general, though, you’re better off using CSS whenever you can. Q Which are better measurements for layouts, pixels or percentages? A Some web designers, especially those from a print background or who have picky clients to please, swear by pixels. With some patience, you can get close to pixel- perfect designs in CSS. Other designers like percentage measurements, which scale with the size of the text window. There’s no clear-cut advantage to any approach, however; all have their pros and cons. You can experiment with a variety of mea- surement types, and don’t be afraid to mix and match them sensibly on your site— for example, designating column widths in percentages but also setting pixel-based min-width and max-width values. 408 LESSON 13: Advanced CSS: Page Layout in CSS Download from www.wowebook.com ptg Q Are there problems with using ems for layout? A Only if you’re not careful. The biggest problems result from setting margins, padding, or positioning properties based on em values, and then changing the font size of those values. For example, you might overlook the effects of the font-size rule buried in these declarations: #sidebar { right: 1em; top: 1em; text-align: right; color: white; font-family: Verdana, sans-serif; font-size: 50%; } This won’t actually be located 1 em in each direction from the corner of its con- taining block; it will be 0.5 em from the right and 0.5 em from the top. If you are going to change the font size within a section that uses ems for dimensions or placement, set the font-size rules on the contents of the box, as done in this chap- ter’s style sheets with #sidebar h3 { } and #sidebar ol { } rules. You could also add an extra <div> inside the sidebar and set the font-size rule on that <div>. Quiz 1. Which property tells the text to start flowing normally again, after a floated col- umn? 2. How do you designate the containing block for an absolutely positioned element? 3. What kind of rules would you write to change an ordered list of navigation links into a horizontal navigation bar? Quiz Answers 1. The clear property can be used after floated columns—for example, if you want a footer to reach across the entire browser window below the floated columns. 2. You set the containing block by changing the position property, usually to a value of relative (with no offset properties designated). 3. Listing 13.7 has an example of a style sheet with rules to do that, using the dis- play property. Workshop 409 13 Download from www.wowebook.com ptg Exercises n What kind of layouts can you create with CSS? Choose your favorite sites—either your own or some you enjoy using—and duplicate their layout styles with CSS. Existing sites make good models for doing your own practice, but keep in mind that unless you get permission, you shouldn’t just steal someone else’s code. Start with the visual appearance as you see it on the screen, and draw out boxes on paper as guidelines showing you where various columns are located. Use that as your model to write the HTML and CSS for building a similar layout. n Try both of the techniques described in this lesson—using absolutely positioned content and using floating columns. Start with one version and convert it over to the other. Find a style of page that looks right to you, and the CSS code that you think is easiest to understand, apply, and modify consistently. 410 LESSON 13: Advanced CSS: Page Layout in CSS Download from www.wowebook.com ptg LESSON 14 Introducing JavaScript JavaScript is a scripting language that’s used to turn web pages into applications. Like Cascading Style Sheets (CSS), JavaScript can be incor- porated into web pages in a number of ways. JavaScript is used to manip- ulate the contents of a web page or to allow users to interact with web pages without reloading the page. This is the first of three lessons in a row on JavaScript. In this lesson, I explain how JavaScript works and how to use it in your pages. In the next lesson, “Using JavaScript in Your Pages,” I walk you through some real- world examples, and then in the following lesson, “Using JavaScript Libraries,” I introduce some third-party libraries that you can use to make your life as a JavaScript programmer much easier. In this lesson, you learn about the basics of JavaScript by exploring the following topics: n What JavaScript is n Why you would want to use JavaScript n The <script> tag n An overview of the JavaScript language n The browser as a programming environment n Using JavaScript to handle browser events Download from www.wowebook.com ptg Why Would You Want to Use JavaScript? JavaScript was initially introduced with Netscape Navigator 2.0 in 1996. Prior to the introduction of JavaScript, the browser was an application that presented documents gen- erated by a server or stored in files. With JavaScript, the browser became a platform that could run programs. With JavaScript, these programs are included as part of web pages. JavaScript is useful because it’s deeply integrated with the browser. This integration allows programmers to manipulate various aspects of the browser behavior, as well as objects included on an Hypertext Markup Language (HTML) page. JavaScript uses what’s referred to as an event-driven model of execution. When you embed JavaScript code in a web page, it isn’t run until the event it’s associated with is triggered. The types of events that can call JavaScript include loading the page, leaving the page, interacting with a form element in some way, or clicking a link. Plenty of other events are available, too. Many of these events are utilized in what most users would consider to be annoying ways. For example, many sites open an additional window containing an advertisement when you navigate to one of their pages. This is accomplished using JavaScript and the page load event. Other sites open additional windows when you leave them; this is also accomplished using JavaScript triggered by an event. Less annoying applications include validating forms before they are submitted, or displaying extra infor- mation on a page when a user clicks a link without requiring a full page refresh. 412 LESSON 14: Introducing JavaScript This introduction will by necessity be briskly paced. There are many books written about JavaScript. The goal of these lessons is to introduce you to JavaScript, enable you to get started accom- plishing tasks, and hopefully kindle your interest to dig into the language more deeply. JavaScript enables you to manipulate web pages without sending a request back to the server or to send a request to the server to retrieve information without leaving the page that the user is on. Using these capabilities, you can change the contents of a page, change the style of elements on a page, validate user input before a user submits a form, and modify the behavior of the browser—all by using scripts embedded within your web pages. Let’s look at some of the advantages of using JavaScript to enhance your web pages. Ease of Use JavaScript is a real programming language and is regularly used to build large, complex applications, including some you’ve probably seen, like Google Maps. At the same time, compared to many other programming languages, it’s easy to get started with JavaScript. NOTE Download from www.wowebook.com ptg You can add useful behavior to a web page with just a little bit of JavaScript added to the onclick attribute of a link or to a script tag at the top of an HTML document. And as you’ll learn in Lesson 16, “Using JavaScript Libraries,” JavaScript libraries make it easy to add functionality to web pages using just a few lines of code. The point is, don’t be intimidated by JavaScript. You can start accomplishing things almost immediately. Increasing Server Efficiency One of the main advantages of JavaScript is that it can provide user feedback instantly. Instead of requiring users to submit a form to see if their input was valid, you can let them know in real time. Not only can this improve user experience, but it can also make life easier for your server, by preventing unnecessary form processing. In other cases, you can use advanced JavaScript applications along with programs on the server to update parts of a page rather than reloading the entire thing. Suppose that you’ve created a form that people use to enter their billing details into your online ordering system. When this form is submitted, your server-side script first needs to validate the informa- tion provided and make sure that all the appropriate fields have been filled out correctly. It needs to check that a name and address have been entered, that a billing method has been selected, that credit card details have been submitted—and the list goes on. But what happens when the script on the server discovers that some information is miss- ing? You need to alert the visitors that there are problems with the submission and ask them to edit the details and resubmit the completed form. This process involves sending the form back to the browser, having the visitor resubmit it with the right information, revalidating it, and repeating the process until everything is correct. This process can be resource-intensive on the server side and could potentially discourage users from com- pleting their order. By adding validation and checking procedures to the web browser with JavaScript, you can reduce the number of transactions because many errors will be caught before forms are ever submitted to the server. And because the web server doesn’t need to perform as many validations of its own, fewer server hardware and processor resources are required to process form submissions. The side benefit is that users will find your application more responsive because the trip back to the server isn’t required for validation. Integration with the Browser JavaScript enables you to manipulate objects on the page such as links, images, and form elements. You can also use JavaScript to control the browser itself by changing the size of the browser window, moving the browser window around the screen, and activating or deactivating elements of the interface. Technologies like Flash can provide an interactive interface, but they are not integrated into the browser in the same way that JavaScript is. Why Would You Want to Use JavaScript? 413 14 Download from www.wowebook.com ptg The <script> Tag The <script> tag is used to include a JavaScript script in a web page in much the same way that the <style> tag is use to add a style sheet to a page. The contents of the <script> tag are expected to be JavaScript source code. There are a couple of other ways to use JavaScript in your pages, too, but the <script> tag is a good place to start. For the best results across all browsers, you should include the type attribute in the script tag, which specifies the type of content that the tag contains. For JavaScript, use text/javascript. HTML5 uses text/javascript as the default value for the type attribute, but for earlier HTML versions of HTML it was required. The Structure of a JavaScript Script When you include any JavaScript code in an HTML document (apart from using the <script> tag), you should also follow a few other conventions: n HTML standards prior to HTML5 required that the <script> tag be placed between the <head> and </head> tags at the start of your document, not inside the <body> tag. Most of the time, putting your <script> tags inside the <head> tag is the right thing to do, but there are some cases where it makes sense to place them elsewhere, which I’ll discuss later. n Unlike HTML, which uses the <!— comment tag —>, comments inside JavaScript code use the // symbol at the start of a line. Any line of JavaScript code that starts with these characters will be treated as a comment and ignored. Taking these three points into consideration, here’s how the <script> tag is normally used: <html> <head> <title>Test script</title> <script language=”JavaScript”> // Your JavaScript code goes here </script> </head> <body> Your Web contentgoes here </body> </html> 414 LESSON 14: Introducing JavaScript Download from www.wowebook.com ptg The src Attribute Besides the language attribute, the <script> tag can also include an src attribute, which allows a JavaScript script stored in a separate file to be included as part of the current web page. This feature enables you to share JavaScript code across an entire website, just as you can share a single style sheet among many pages. When used this way, the <script> tag takes the following form: <script type=”text/javascript” src=”http://www.example.com/script.js”> The src attribute will accept any valid URL, on the same server or on another. Naming your JavaScript files with the extension .js is customary. When you’re loading external scripts in this way, always place the <script> tag inside the <head> tag. The JavaScript Language When JavaScript is included in a page, the browser executes that JavaScript as soon as it is read. Here’s a simple page that includes a script, and the output is included in Figure 14.1: Input ▼ <!DOCTYPE html> <html> <head> <title>A Simple JavaScript Example</title> </head> <body> <p>Printed before JavaScript is run.</p> <p> <script type=”text/javascript”> document.write(“Printed by JavaScript.”); </script> </p> <p>Printed after JavaScript is run.</p> </body> </html> The JavaScript Language 415 14 Download from www.wowebook.com . ptg LISTING 13 .6 Continued #nav { border-bottom: 1px solid lime; } #main { margin-left: 11 .5em; margin-right: 11 .5em; border: 0px solid lime; margin-bottom: 1. 5em; margin-top: 1. 5em; } #nav. #footer a:visited { text-decoration: none; color: #CCCCCC; } /* main content section */ #main { margin-left: 11 .5em; margin-right: 11 .5em; margin-bottom: 1. 5em; margin-top: 1. 5em; border: 0px solid. Continued { font-size: 90%; } #nav .shead, #nav .sitem { padding-left: 1em; padding-right: 1em; } #nav h1 { font-size: 1em; background-color: #333333; color: white; } #nav a:hover, #footer a:hover {