Lynda.COM Create an Interactive Homepage Marquee with jQuery and Dreamweaver

Author:
Chris Converse

Duration:
01h 34m

Released on:
5/26/2011

Exercise files:
Yes


In Create an Interactive Homepage Marquee with jQuery and Dreamweaver, author Chris Converse builds a visually rich, interactive marquee in order to aggregate and display content on a web site homepage. This course covers preparing artwork in Photoshop and Illustrator, creating HTML and CSS layouts, and dynamically generating marquee elements with the open-source JavaScript framework jQuery. Tutorials on animating between content panels are also included. Exercise files accompany the course.
Topics include:

    Linking the HTML and CSS layouts
    Preparing images with the Slice tool and Smart Objects
    Adding CSS rules for the captions and navigation
    Producing the photo lineup
    Creating the navigation links based on the HTML
    Setting click events for the navigation
    Animating between photos
    Initializing the gallery on page load




Introduction
Previewing the project across browsers and devices           03m 07s
Using the exercise files           01m 08s

1. Creating Project Folders
Creating and linking HTML and CSS files           02m 27s

2. Preparing Web Graphics
Using the Slice tool in Photoshop           02m 14s
Adding appearances and slices in Illustrator           03m 00s
Using Smart Objects in Photoshop           02m 32s
Creating navigation states with Photoshop clipping groups           02m 57s

3. Creating a Layout in HTML and CSS
Creating the HTML for the container           05m 10s
Adding in sample content for layout previewing           05m 17s
Adding CSS rules for the container           04m 52s
Adding CSS rules for captions           04m 55s
Adding CSS rules for navigation           05m 55s

4. Dynamically Generating Marquee Elements
Separating data from the container           07m 19s
Adding jQuery, the preload plug-in, and the custom JavaScript file           03m 36s
Searching all the photos in the data region           04m 45s
Generating the photo lineup           06m 04s
Creating the navigation links based on the HTML           03m 51s
Setting the click events for the navigation           06m 34s

5. Creating Animations Between Marquee Panels
Calculating and animating between photos           05m 21s
Animating the caption based on the amount of content           06m 02s

6. Initializing the Marquee on Page Load
Setting the marquee state based on first panel data in the HTML           06m 31s

7. Where to Go From Here
Initializing the gallery on page load           01m 21s