Sprite Based Images and Maintinance

Using a sprite instead of individual images for every single section of our page that requires an image saves space and is much more economical when it comes to loading. Normally if we wanted an image for our anchor tags we would need a different image for every single state of the anchor.

  1. Load your image in the anchor tags within the CSS document.
    a {
        background-image:url(images/on.gif);
        }
  2. Then within that same anchor tag, make them the same width and height as the our image, but keep in mind that you cant put a width and height on inline objects like anchor tags so we need to add a “display:block” or in this case “display:inline-block”.
    “a {
       background-image:url(images/on.gif);
    background-repeat:no-repeat;
    display:inline-block;
    width:60px;
    height:100px;
    text-indent:-99999em;

        }
  3. Finally you swap the image for other images, like when you hover the mouse over the anchor and when you click on the it for example.
    a:hover {
        background-image:url(images/over.gif);
        }
    a:active {
        background-image:url(images/click.gif);
        }

So when it comes to using a single sprite for the anchors, just follow those 3 steps but have the anchor tags rollover between the different section of that one sprite image:

  1. Load your image in the anchor tags within the CSS document.
    a {
        background-image:url(images/item.png);
        }
  2. Then within that same anchor tag restrict the position, width and height so that it only displays the section of the sprite you need.
    “a {
       background-image:url(images/item.png);
       display:block;
    background-repeat:no-repeat;
    width:150px;
    height:50px;
    line-height:50px;
    text-align:center;
    background-position:0 0;

        }
  3. Finally you can use the rest of your sprite image for something else like when you hover the mouse over the anchor and when you click on the it for example.
    a:hover {
        background-position:0 -50px;
        }
        
    #a:active {
        background-position:0 -100px;
        }

You can convert your sprites to URI’s with a free online URI generator.

To make a printable section on your site you need to do 4 things:

  1. First get a “print.css” style sheet from http://alistapart.com/article/goingtoprint.
    /**************************************************************
       AUTHOR:  Pat Heard (fullahead.org)
       DATE:    2006.09.12
       PURPOSE: Styles the page for print.  Techniques adopted from
                http://www.alistapart.com/articles/goingtoprint/
     **************************************************************/body {
        font: 400 12pt verdana, arial, sans-serif;
        color: #000;
        background-color: #FFF;
    }h1 {
      margin-top: 30px;
      font-size: 18pt;
      border-bottom: 1px solid #999;
    }h2 {
      font-size: 16pt;
    }h3 {
      font-size: 14pt;
    }h4, h5, h6 {
      font-size: 12pt;
    }acronym {
      border: 0;
    }a {
      color: #00F;
    }/* Prints the URL after a link in CSS2 supporting browsers */
    a:link:after,
    a:visited:after {
       content: ” (” attr(href) “) “;
       font-size: 90%;
    }

    /* Don’t display these elements since they’re not useful on paper */
    #header,
    #menu,
    .footer {
      display: none;
    }

    #content {
      width: auto;
      margin: 0 8%;
      padding: 0;
    }

  2. Then separate your screen style sheet from your print style sheet by writing media=”screen” in your site styles and media=”print” in your print styles
    <!– SITE STYLES –>
    <link href=”css/screen.css” rel=”stylesheet” type=”text/css” media=”screen”/>
    <!– PRINT STYLES –>
    <link rel=”stylesheet” type=”text/css” href=”css/print.css” media=”print” />
  3. Thirdly create ether print buttons or print anchor tags for the user to click on.
    <!– PRINT BUTTONS –>
     
      <!– INPUT FROM A FORM –>
      <input type=”button” value=”print” />
     
      <!– BUTTON TAG –>
      <button>I can print from here</button>
     
      <!– ANCHOR TAG –>
      <a href=”#”><img src=”print.jpg” alt=”” /></a>
  4. Finally target your java script by adding an “onclick” commands to your buttons and anchors.
    “<!– PRINT BUTTONS –><!– INPUT FROM A FORM –>
    <input onclick=”window.print();” type=”button” value=”print” /><!– BUTTON TAG –>
    <button onclick=”window.print();”>I can print from here</button><!– ANCHOR TAG –>
    <a onclick=”window.print();” href=”#”><img src=”print.jpg” alt=”” /></a>”

Here is an example of how the print works on my Coffee Site.

Make a hide and reveal slider in 6 steps:

  1. First get jQuery from https://jquery.com/download/ and put it in your JS folder
  2. Then get the twenty twenty jQuery Plugin from http://zurb.com/playground/twentytwenty.
  3. Thirdly get the jquery.twentytwenty.js, jquery.event.move.js, and twentytwenty.css files from the folder you just download and place them in their respective CSS and JS folders.
  4. Next plug in your jQury and Twenty Twenty plugins into the Head of your HTML document, just above the site styles.“<!– jQUERY –>
    >script src=”js/jquery-1.11.3.min.js”></script>

    <!– TWENTY TWENTY –>
    >script src=”js/jquery.twentytwenty.js”></script>
    >script src=”js/jquery.event.move.js”></script>
    >link rel=”stylesheet” type=”text/css” href=”css/twentytwenty.css”>”

  5. Next link two images that you want to hide and reveal in the body of your HTML document, just make sure that they are both the same size.
    “<section class=”col23 fl”>
    >div class=”reveal”>
    >img src=”img/reveal-1a.jpg” alt=””/>
    >img src=”img/reveal-1b.jpg” alt=””/>
    >/div>
    </section>”
  6. Finally get the hookup script from the twenty twenty site and put it between two script tags () bellow the twenty twenty css link in the head of your document.
    “>script>
    $(window).load(function() {
    $(“.revealo”).twentytwenty();
    });
    >/script>

We often need to do maintenance and fixing broken links in our sites. Normally we need to do this manually but if you have Dreamweaver you can follow 7 simple steps:

  1. Open your HTML file in Dreamweaver and go to your Dreamweaver preferences by going up to Dreamweaver in the Drop Down Menu and selecting Preferences (Command + U). Then in the “Code Rewrite” check off all the options and press apply.
  2. Then go to commands in your Drop Down Menu and click on Clean up HTML.
  3. Then to remove the widths click “Command + F “to get your find and replace broken images.
    find_replace
  4. Manually remove bad code like incorrect image links.
  5. update old content like the doctype (from X-html to <!doctype html>), metas (from <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> to <meta charset=”utf-8″ />) and the title.
  6. move any styles on the HTML page to it’s own stylesheet by highlighting the styles and clicking on the “Move or Convert CSS” icon on the right hand side of Dreamweaver and select “Move CSS”. You will then be promoted to name your new CSS file and what folder to place it in.
  7. Update your file structure and move your files in the correct folders.
  8. Check the spelling in your document.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s