Body font size 76 font family helveticaarialsans

This preview shows page 254 - 258 out of 337 pages.

body { font-size: 76%; font-family: "Helvetica","Arial",sans-serif; } body * { font-size: 1em; } a { font-weight: bold; text-decoration: none; } header nav { font-family: "Lucida Grande","Helvetica","Arial",sans-serif; } header nav a { text-decoration: none; font-weight: bold; } article {
CHAPTER 12 PUTTING IT ALL TOGETHER 237 line-height: 1.8em; } article p { margin: 1em 0; } h1 { font-family: "Georgia","Times New Roman",sans-serif; font: 2.4em normal; } h2 { font-family: "Georgia","Times New Roman",sans-serif; font: 1.8em normal; margin-top: 1em; } h3 { font-family: "Georgia","Times New Roman",sans-serif; font: 1.4em normal; margin-top: 1em; } #imagegallery li { list-style-type: none; } textarea { font-family: "Helvetica","Arial",sans-serif; } Now the template has color, layout, and typography styles applied. Each of the CSS files—color.css, layout.css, and typography.css—resides in the styles folder along with the basic.css style sheet.
CHAPTER 12 PUTTING IT ALL TOGETHER 238 Markup Your template looks good. Your style sheets are working well. Now you can start to build the pages of the site. Begin with the home page, index.html. It contains a single introductory paragraph within the <article> element: <p id="intro"> Welcome to the official website of Jay Skript and the Domsters. Here, you can <a href="about.html" title="About">learn more about the band</a>, view <a href="photos.html" title="Photos">photos of the band</a>, find out about <a href="live.html" title="Tour Date">tour dates</a> and <a href="contact.html" title="Contact">get in touch with the band</a>. </p> Here’s the home page: This paragraph has been marked up with an id of "intro" . You might use this to style the introduction in a special way. You can also use it as a hook for some DOM scripting. JavaScript Before you start adding enhancements with the DOM, you should think about how you are going to manage your JavaScript files. When your site requires a lot of long complicated scripts, it’s generally a good idea to separate your files, as we've done elsewhere in the book. However, this site is fairly simple, and the JavaScript code is short. To reduce the number of requests, you’ll put all your code into one file called global.js. This will also make it easier to minify when you’re finished. Start by creating global.js in your scripts folder. Now you’ll add a few common functions you’ll be using throughout the site.
CHAPTER 12 PUTTING IT ALL TOGETHER 239 You’ll definitely be using the addLoadEvent function (from Chapter 6). You will need this whenever you write a function that should be executed when the document is fully loaded. function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } The insertAfter function (from Chapter 7) will also come in handy. It’s a useful corollary to the insertBefore method. function insertAfter(newElement,targetElement) { var parent = targetElement.parentNode; if (parent.lastChild == targetElement) { parent.appendChild(newElement); } else { parent.insertBefore(newElement,targetElement.nextSibling); } } You may also need the addClass function (from Chapter 9).

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture