Skip to Navigation | Skip to Content

MAT 165 - Web Design 2: Tools and Techniques

Menu

Class Schedule

Week 1 (8/24)

Topics

  • Overview/Introduction to the Class and Syllabus
  • Introduction to the Web and a little Internet History
  • Self publishing
  • Introduction to blogging for the class
  • Setting up your own blog (on Blogger or WordPress or Tumblr)

Links and Resources

About Blogs and Blogging

  1. Blogs in Plain English

Blogger

  1. Blogger
  2. Blogger Getting Started Guide From Google
  3. How to Create a Blog on Blogger (YouTube Video)
  4. Blogger Buzz

Wordpress Tutorials

  1. WordPress.com
  2. Getting Started on WordPress
  3. Learn Wordpress.com

Tumblr and Tumblr Help and Tutorials

History of the Internet

  1. The History of the Internet in a Nutshell (article)
  2. History of the Internet (short animated film)
  3. http://www.computerhistory.org/internet_history/ (Online exhibit/article from the Computer History Museum)
  4. The Birth of the World Wide Web (video from the Computer History Museum)

Other Links and Resources

Exercise #1: Blogging for the class (blog setup and first post Due 8/31)

Set up your own class blog at blogger.com or wordpress.com or tumblr.com and e-mail me the address (URL) of the blog you create. You'll use this blog to respond to the blog topics listed on the class blogs page. Responding to one of the first two blog topics listed, write your first post to your blog.

After the first week and your first post, this blog becomes an ongoing exercise in the class without specific due dates. Updates to the class blogs page will occur weekly with new blog topics. Pick and choose those topics that interest you and write about them in the class blog that you setup. Each blog topic will be assigned a point value (generally from 10 to 40 possible points). You will have the opportunity to respond in writing to the blog topics in your own course blog, and will earn points based on the quality of your postings. Your blog will count for 10% (100 points) of your course grade. You do not need to write about each topic listed, but can choose those topics that interest you to ultimately earn full credit for the blogging assignment (100 points). In general, it will likely take 3-4 blog postings to earn full credit, but this depends on the point-value of the blog topics you choose. Although, after the first week, there are not any specific blogging due dates, do not wait until the end of the semester to get this done. It is recommended that you make at least one post every 3-4 weeks to keep up with this class blogging assignment.

In addition to writing in your own blog, you are encouraged to read the blog postings of your classmates and leave comments on posts that you like or found useful. Leaving such comments demonstrates "class participation" in the class. Each students' blog address will be linked to in the "Student Blog Roll" on the right side of the class blogs page or you may wish to set up an RSS feed to aggregate the student blogs into one place.

LAB /HOMEWORK / ONLINE

  • Set up your blog and e-mail me the address (URL)
  • Make your first post to the blog
  • Get the book (optional/recommended) and begin play/experimentation
  • Review HTML and CSS Basics at HTML Dog and/or W3 Schools

> Go to Top

Week 2 (8/31)

TOPICS

  • Web basics
  • Review of HTML and CSS
  • Basic HTML Tags
  • Hard-coding web pages with HTML
  • Coding Color
  • HTML vs. CSS for formatting
  • CSS Selectors, Properties, and Values
  • Styling with CSS
  • Coding Tables and Images
  • Hand-Coding and the Code View within Dreamweaver
  • Working with Emmet

Links and Resources

Exercise #2: <I AM IN HTML> (Due 9/7)

Hand-code a web page using HTML and CSS that provides a brief introduction to who you are, such as a biographical description of yourself, your careers goals/major, your educational background, your interest in the course, things you enjoy, your hobbies, your pets, and/or any other information that you'd like to share (the content can be whatever you like and as long as you like). While you can use any text/code editor that you wish, you are encouraged to explore the code view within Dreamweaver (but remove any code that DW may add automatically, so that you hand-code the whole page).

At minimum, your HTML page should include:

  • A page title with your name and "Exercise 2"
  • A header (<h1>) with your name
  • Some form of narrative about yourself within paragraph (<p>) and/or <div> tags
  • Sub-heads to divide up the content (<h2> or <h3> as needed)
  • An ordered (<ol>) or unordered (<ul>) list (<li>) of your favorite web sites with links (<a>) to the sites
  • At least three CSS rules/style definitions (one using a tag selector, one using a class selector, and one using an id selector)
  • Comments in the code

With CSS, play around with the formatting of your page. At minimum, select a background color (or image) for your page, use differing font styles for your headers as compared to the body text, and customize the link styles/colors. Remember that modern web design emphasizes semantic markup using HTML for structure and CSS for presentation/formatting. So, avoid using presentational HTML code such as <font> tags and other deprecated or non-semantic elements.

Beyond what is listed above, you're welcome to explore inserting images and/or using other HTML elements, HTML5 structural tags (<header>, <section>, etc.) or CSS styles.

Create a root folder/directory called "exercise2". Save the file as "index.htm" within your "exercise2" folder (if you use images, make sure to put these in the "exercise2" folder as well). Using FTP, upload your "exercise2" folder and file(s) into your "Lastname_Firstname" folder on the MAT server. See Publishing Instructions and FTP Info for the MAT Server for detailed FTP instructions and a video tutorial (or bring the file(s) to class next week when we will review FTP to the MAT server).

LAB / HOMEWORK / ONLINE

  • Finish Exercise #2 (due 9/7)
  • Bring a poem, quote, or song lyrics (~5 - 25 lines) to the next class
  • Review/Refresh HTML and CSS Basics at HTML Dog and/or W3 Schools
  • Review Chapter 7 - HTML: Under the Hood of Dreamweaver CC: The Missing Manual (recommended)
  • Blog Away (ongoing as per Exercise #1)

> Go to Top

Week 3 (9/7)

TOPICS

  • Introduction to Working with Dreamweaver
  • Defining a site and connecting to the server via FTP
  • WYSIWYG
  • The Dreamweaver Environment
  • Page properties
  • Working with text/typography
  • Web Typography
  • Formatting text
  • HTML for Structure, CSS for Formatting
  • Working with CSS
  • Line breaks and paragraphs
  • Special Characters
  • Absolute and relative links

Links and Resources

Exercise #3: Hyper poem (Due 9/21)

Select a poem (or quotes or song lyrics) and use Dreamweaver to creatively format your poem and add hyper-links.

Using HTML for structure and CSS for presentation, try to make the formatting of your page(s) thematically consistent with the poem. You may wish to manipulate the background properties (such as background color and margins); use line breaks, paragraph breaks and/or other tags for block-level breaks.

Focus on creating excellent typographic design. Explore the CSS Designer Panel in DW and play with the font family (and explore the use of web fonts), color, size, line height and other formatting; use special characters when appropriate; and explore differing alignment options.

Explore creating a "hyper" poem using absolute links (to external sources) or relative links (to other pages you create or with named anchors or ids for within-the-page links). You must have at least two links on the page.

Insert at least two images into the design either as a backgrounds or within the main content (or both). Be sure to appropriately crop, size, and optimize your image(s) for the web (as per the lectures coming up in Week #4).

Create a root folder/directory called "exercise3". Save the file as "index.html" within your "exercise3" folder (if you use images, make sure to put these in the "exercise3" folder as well). Using FTP, upload your file(s) into the "exercise3" folder within your "Lastname_Firstname" folder on the MAT server. See Publishing Instructions and FTP Info for the MAT Server for detailed FTP instructions and a video tutorial.

LAB / HOMEWORK / ONLINE

> Go to Top

Week 4 (9/14)

TOPICS

  • Hyper Poem Exercise Continued
  • CSS and Typography
  • Applying CSS in Dreamweaver
  • Absolute and Relative Links
  • Review of Photoshop for Creating Web Graphics
  • Sizing and Cropping Images in Photoshop
  • Optimizing Images for the Web
  • Formats for Optimizing Web Graphics
  • Working with Images in Dreamweaver
  • Integrating images and text
  • Image maps
  • Images as buttons
  • Background images

Links and Resources

LAB / HOMEWORK / ONLINE

> Go to Top

Week 5 (9/21)

TOPICS

  • Midterm Project | "Client" Interview/Survey
  • Anatomy of a Website
  • Understanding Information Architecture
  • Creating a Color Palette
  • Working with Images in Dreamweaver (continued)
  • Creating and Optimzing Graphics in Photoshop
  • Photoshop Integration and Smart Objects
  • Background Images
  • CSS properties for controlling background imagery
  • CSS Image Replacement Techniques

Midterm Project - iPoint Advisors Website - design a logo graphic and Create a style tile (Part 1, DUE by 10/5)

Many designers conduct formal or informal creative investigations, "mood boards," or "style tiles" to explore colors, typography, imagery, layout possibilities and more around a united theme/idea/concept. These creative investigations are the birthplace and playground for design ideas that will ultimately inform your final design.

You are required to conduct your own creative investigations to explore color and typography (and optionally textures, photos, and more). Start by creating an appropriate and limited color palette for your project. Then, explore potential typographic solutions (such as header, subhead, and body text relationships).

For your project, you are required to create the following imagery in Photoshop, Illustrator, or Fireworks: 1) a logo or banner for the company that will server as the site identifer and 2) image-based rollover buttons for the navigational menu items that link to each page. Your logo/banner can be a simple logotype or word mark. Or, it can be a combination mark (words and symbol/icon) or emblem. Ultimately, you will use CSS sprites your menu graphics (see part 3), but initially you can focus on the look and feel of these graphics.

You are encouraged to also create page titles/header graphics (page identifiers) for each site section, background imagery, and/or branding-related graphics or photographs as a appropriate to your concept.

With consideration to the graphics required in the project, design a "Style Tile" that showcases your logo design, color palette, and typography choices (and optionally textures, branding graphics, background imagery, and more).

Document your style tile by creating a JPEG, PNG, or PDF document and post it to your "midterm" folder in your Lastname_Firstname folder on the MAT server.

For ideas and inspiration about such style tiles and the related graphics you need to create, visit Style Tiles (a visual web design process) and the Elements of Design showcase on buttons, navigation menus, and typographic headers.

Visit the projects page for full information about the iPoint Advisors project and details on all six parts/steps.

Links and Resources

LAB / HOMEWORK / ONLINE

  • Finish Exercise #3 (due 9/28)
  • Create a color palette and work on your logo and style tile for the iPoint Advisors project (due 10/5)
  • Da Blog (ongoing)
  • Watch the video tutorials below about Designing a Graphical User Interface (GUI) Using Photoshop: From Sketch to Finished Comp
  1. Graphic Development Using Photoshop - iPoint Logo (15:34)
  2. Graphic Development Using Photoshop - Menu Buttons (16:15)
  3. Graphic Development Using Photoshop - Interface, Part 1 (17:23)
  4. Graphic Development Using Photoshop - Interface, Part 2 (21:58)
  5. Graphic Development Using Photoshop - Interface, Part 3 (29:21)

> Go to Top

Week 6 (9/28)

TOPICS

  • Review Exercise #3
  • Midterm Project | "Client" Interview/Survey
  • Anatomy of a Website
  • Understanding Information Architecture
  • Creating and Optimzing Graphics in Photoshop (continued)
  • Creating Your Color Palette
  • Working on your Style Tile
  • Understanding the CSS Box Model
  • Block and Inline Boxes
  • CSS for Positioning and Layout
  • Understanding Document Flow - Static, Relative, Absolute, and Fixed Positioning Techniques
  • Working with AP Divs
  • CSS Layouts with Absolute Positioning

Midterm Project - iPoint Advisors Website - design a logo graphic and Create a style tile (Part 1, DUE by 10/5)

Design a "Style Tile" that showcases your logo design, color palette, and typography choices (and optionally textures, branding graphics, background imagery, and more).

Document your style tile by creating a JPEG, PNG, or PDF document and post it to your "midterm" folder in your Lastname_Firstname folder on the MAT server.

Visit the projects page for full information about the iPoint Advisors project.

Links and Resources

LAB / HOMEWORK / ONLINE

> Go to Top

Week 7 (10/5)

TOPICS

  • Review Style Tiles
  • CSS Positioning and Layout (continued)
  • Review of the CSS Box Model
  • Page Layout Strategies
  • Layout with Absolute Positioning
  • Working with Floats
  • Float-based CSS Layouts
  • CSS Layout Tips and Tricks

Exercise #4: CSS Box Layouts Challenge (Due 10/19)

Solutions and video tutorials be available for each layout after the exercise is due.

In this technically-oriented exercise, you will explore using CSS for positioning and layout to create five unique layout examples based on the wireframe/template images and code provided. You are challenged to make your layouts exactly mimic the wireframe images and dimensions provided by using CSS styles that you write/create in Dreamweaver. If you wish, you can download the wireframe images and place them into your page as a tracing image within Dreamweaver (Modify > Page Properties > Tracing Image). Unless otherwise indicated, you can achieve each layout using any CSS rules that you feel are most appropriate, but you should strive to create clean, efficient, well-structured code. You may need to use a combination of margins, positioning (relative, absolute, or fixed), and floats (left, right, and clearing floats) to achieve your layouts and over the course of creating all the example layouts, it is expected that you explore the range of these techniques. You may not change the order of the HTML tags in the starter code provided (ie, you can't move Box 5 to the top of the code in front of Box 1). However, you can add HTML code to the document if you wish, such as "container" or "wrapper" div tags. Optionally, you can explore adding additional content (text, images, backgrounds, colors) to the boxes as long as you maintain the layout indicated by the wireframe/template images.

This video tutorial provides an overview of the exercise and gives you the solution to the first layout. To figure out the additional solutions, you may wish/need to review the tutorials that cover the CSS Box Model and CSS for Positioning, Working with AP Divs, and Working with Floats.

This zipped folder contains all of the starter/template files you'll need. Or, you can download and/or view each of them individually below:

  1. HTML Starter Code (you'll use this same starting code for each example)
  2. Wireframe/Template Images

Create a root folder/directory called "exercise4" and save each example layout you create into this folder using the naming convention of "layout1.html", "layout2.html", etc. Create an "index.html" page within your root directory that has links to each of your five solutions (the index page will link to "layout1.html", "layout2.html", etc). Using FTP, upload your file(s) into the "exercise4" folder within your "Lastname_Firstname" folder on the MAT server. See Publishing Instructions and FTP Info for the MAT Server for detailed FTP instructions and a video tutorial.

Midterm Project - iPoint Advisors Website - Refine your style tile or create a design comp (Part 2, due 10/26)

There are different ways to approach a web design. Traditionally, designers would create a design comp that would demonstrate the total look and feel of a given web page (usually a template page). The comp, usually designed in Photoshop or Illustrator, is an image that can be shared with the client to represent a pixel-perfect rendition of what the website would look like once produced in HTML and CSS. After the client approved the comp, production and programming would begin. However, in the era of responsive design, fixed-sized comps have less relevance for some designers, who prefer to 'design in the browser' or use a 'rapid-prototyping' methodology. These designers create a refined style tile or style guide to define the look and feel of a site, including such elements as logo graphics, image choices, texture or background graphics, buton graphics ( such as 'call to action' buttons or navigation menu graphics), typography, color, and more. However, unlike a comp, these elements aren't necessarily arranged to represent a given page design, but rather to represent the overalll style of the site on any page (or size).

For part two of the iPoint project, choose a workflow that you think will work best for you and either create a 'design comp' or a 'refined style tile + wireframe' to define the visual look and feel and structure for your iPoint project.

Document your reflined style tile or design comp by creating a JPEG, PNG, or PDF document and post it to your "midterm" folder in your Lastname_Firstname folder on the MAT server.

Visit the projects page for full information about the iPoint Advisors project.

Links and Resources

LAB / HOMEWORK / ONLINE

> Go to Top

Week 8 (10/12)

TOPICS

  • Review of Floats and Float/Column-Based Layouts
  • Creating Navigational and Call to Action Buttons with CSS
  • Creating Navigation Menus with Lists and CSS
  • CSS Rollovers
  • CSS Image Replacement Technique
  • CSS Sprites

Midterm Project - iPoint Advisors Website - Refine your style tile or create a design comp (Part 2, due 10/26)

For part two of the iPoint project, choose a workflow that you think will work best for you and either create a 'design comp' or a 'refined style tile + wireframe' to define the visual look and feel and structure for your iPoint project.

Midterm Project - ipoinT Advisors Website: Page layout, PAGE formatting, and NAV MENU DESIGN USING EXTERNAL CSS (PART 3)

Once you have a design comp or style tile to use to guide your page layout and formatting choices, in the third part of the iPoint project, you will structure your pages using HTML markup and layout and format your pages using CSS. You are required to style and format the layout, navigation menu, text, images, and other page elements using an external Cascading Style Sheet (CSS) and a CSS Reset.

Visit the projects page for full information about the iPoint Advisors project.

Links and Resources

LAB / HOMEWORK / ONLINE

> Go to Top

Week 9 (10/19) - NO CLASS THIS WEEK

I will be at the Adobe Max Conference this week. We will not meet in class on 10/19. Our next meeting is on 10/26. However, you may wish to review these online video tutorials.

ONLINE TOPICS

  • Implementing a CSS Layout - Start to Finish (PSD to HTML/CSS)

Online Video Tutorials

Designing a Graphical User Interface (GUI) Using Photoshop: From Sketch to Finished Comp
Note: These graphic development videos were posted earlier, but I include them again here as they complement the videos below and demonstrate the full process of going from a sketch/wireframe, to a PSD comp, to a finished HTML/CSS site.

  1. Graphic Development Using Photoshop - iPoint Logo (15:34)
  2. Graphic Development Using Photoshop - Menu Buttons (16:15)
  3. Graphic Development Using Photoshop - Interface, Part 1 (17:23)
  4. Graphic Development Using Photoshop - Interface, Part 2 (21:58)
  5. Graphic Development Using Photoshop - Interface, Part 3 (29:21)

Implementing a CSS Layout - PSD to HTML/CSS - Example 2

  1. PSD to HTML/CSS - Part 1 - SetUp, Site Defintion, External Styles (4:19)
  2. PSD to HTML/CSS - Part 2 - HTML Markup, Structuring Content (17:34)
  3. PSD to HTML/CSS - Part 3 - Sizing and Centering Using Containers (4:45)
  4. PSD to HTML/CSS - Part 4 - Slicing and Background Graphics (11:29)
  5. PSD to HTML/CSS - Part 5 - Logo/Image Replacment (11:09)
  6. PSD to HTML/CSS - Part 6 - Menu Using Sprites (31:32)
  7. PSD to HTML/CSS - Part 7 - Content Layout with Floats, Margin (17:12)
  8. PSD to HTML/CSS - Part 8 - Page ID, Body ID (20:35)
  9. PSD to HTML/CSS - Part 9 - Branding Images (22:01)
  10. PSD to HTML/CSS - Part 10 - Branding Text (34:48)
  11. PSD to HTML/CSS - Part 11 - Shadows (14:14)
  12. PSD to HTML/CSS - Part 12 - Text Styling (23:09)
  13. PSD to HTML/CSS - Part 13 - Footer (12:26)

> Go to Top

Week 10 (10/26)

TOPICS

  • Review 'design comp' or 'refined style tile' for iPoint project
  • Introduction to Responsive Design
  • Responsive Design Techniques
  • Media Queries
  • Responsive Images
  • Fluid Layouts
  • Responsive Navigation
  • Implementing a CSS Layout - Start to Finish (PSD to HTML/CSS)

Midterm Project - ipoinT Advisors Website: Responsive design and mobile optimizatIOn (PART 4)

In the fourth part of the iPoint project, you are required to optimize your site using responsive design principles so that it looks good and functions well on both desktop and mobile screens. Using media queries, you will reconsider your CSS and structure so that the presentation of your site adapts to varying screen sizes. At minimum, you are required to create break points to optimze the site for delivery at 320 - 480px in size (mobile) and 960 - 1280px in size (desktop) but are encouraged (optionally) to consider breakpoints and optimizations for tablet and widescreen sizes as well. Include the following meta data in the <head> of your document:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Visit the projects page for full information about the iPoint Advisors project.

Links and Resources

Responsive Design

Media Queries

LAB / HOMEWORK / ONLINE

> Go to Top

Week 11 (11/2)

TOPICS

  • Implementing a CSS Layout - Start to Finish (PSD to HTML/CSS)
  • Slicing Graphics in Photoshop
  • Generating Image Assets in Photoshop
  • Semantic HTML for Content and Structure
  • CSS for Layout and Presentation
  • Working with External Stylesheets and CSS Reset
  • CSS Layout Tips and Tricks
  • CSS Formatting
  • Responsive Web Design (continued)
  • Responsive Images
  • Responsive Navigation

Links and Resources

Generating Image Assets in Photoshop

Responsive Navigation

LAB / HOMEWORK / ONLINE

> Go to Top

Week 12 (11/9)

TOPICS

  • Implementing a CSS Layout (continued)
  • Responsive Web Design (continued)
  • Responsive Images
  • Responsive Navigation
  • Using an ID or a class on the body tag to create page-specific CSS
  • Efficiency and Automation
  • Working with Templates
  • Defining Editable and Non-Editable Regions
  • Using Templates for Site-Wide Changes
  • Page validation, Checking Pages for Potential Bugs or Errors
  • Lab for Midterm Project

Midterm Project - ipoinT Advisors Website: define and use a template for the site (PART 5)

In the fifth part of the iPoint project, you are required to refine and finalize your page design and code (including adding all links, alt tags, etc.) and then save it as a template. Define the appropriate editable regions of your template. Create your content pages based on the template (using "New Page from Template"). Insert the content appropriate for each page and format the text using your external Cascading Style Sheet (CSS).

Refine, DEBUG, and UPLOAD VIA FTP (PART 6)

In the last part of the iPoint project, you need to populate each page with content and design/customize it as needed, put on the finishing touches, test your site for consistency and proper functionality, correcting any errors that you spot, and ultimately upload the site to the MAT servers via FTP. Upload your files into the "midterm" folder within your "Lastname_Firstname" folder on the MAT server. See Publishing Instructions and FTP Info for the MAT Server for detailed FTP instructions and a video tutorial.

Visit the projects page for full information about the iPoint Advisors project and details on all parts/steps.

Links and Resources

LAB / HOMEWORK / ONLINE

> Go to Top

Week 13 (11/16)

TOPICS

  • FTP Help and Troubleshooting
  • Web, Graphic, and Multimedia Design Principles
  • Review of iPoint Advisors Websites
  • A return to web graphics
  • Compositing and designing web pages with Photoshop and/or Fireworks
  • Slicing and optimizing images using Photoshop and/or Fireworks
  • Rollover graphics and animation using Photoshop/Dreamweaver
  • Using Behaviors/JavaScript within Dreamweaver to enable remote rollovers

optional - Exercise #5: Composite Homepage / Graphical User Interface Using Photoshop SLICES, SAVE FOR WEB FEATURES, and DW Behaviors (Due by 11/30 for Extra credit)

Using Photoshop, design and produce a graphical user interface that will serve as a homepage/ index of your work in the class. In other words, use Photoshop to create a graphical webpage that links to all the work you've created (or will create) for the class.

You can choose the size for your interface, but I recommend not exceeding 1280px in width or 600px in height. Design your page in Photoshop using multiple images (composite together at least two images) and the type/typography tools. Be sure to include a textured, graphical background and rollover button links (implemented in Dreamweaver) to each of the 6 class exercises, the midterm project, and the final project. Using slices and the "Save for Web" feature, create and optimize all of your image files and create your HTML file (using "Save As Type: HTML and Images").

Edit your page in Dreamweaver to add the RollOver image effects (using the swap image behavior) and to add any additional styles you wish (centering, background colors, etc.).

Create a root folder/directory called "exercise5". Save the homepage file that you create as "index.html" within your "exercise5" folder (and place all images within this "exercise5" folder as well). Using FTP, upload your files into the "exercise5" folder within your "Lastname_Firstname" folder on the MAT server. Once you upload the file, make sure that the links to your class exercises and projects work on your page. You can visit the Index of Student work to obtain the correct file paths to these exercises and projects. See Publishing Instructions and FTP Info for the MAT Server for detailed FTP instructions and a video tutorial.

Download Sample/Starter File (e5.zip)

Links and Resources

LAB / HOMEWORK / ONLINE

> Go to Top

Week 14 (11/23) - THANKSGIVING HOLIDAY

TOPICS

  • Eat and nap
  • Don't come to class

> Go to Top

Week 15 (11/30)

TOPICS

  • Working with JavaScript within Dreamweaver
  • Using Behaviors (Thumbnails, Popup Windows +)
  • Showing and Hiding AP Divs
  • Working with jQuery UI Tools and Widgets (CC)
  • Animation on the Web (with CSS3, jQuery, and Flash)
  • A look at jQuery/Javascript for enhanced interactivity and animation
  • Overview of jQuery
  • Getting and setting HTML and CSS attributes with jQuery
  • jQuery and Animation
  • A look at jQuery Plugins
  • Scripting a jQuery Slideshow

Exercise #6: WEB Animation (Due 12/7)

Explore web animation techninques and interactive programming by creating a simple and short "animated slideshow" using jQuery or CSS3.

Animate the transitions between a few images (such as by animating the 'opacity' or 'alpha transparency' to create a crossfade effect or by animating the x, y or top, left coordinates of images to create movement). Consider enabling some form of interactive control of the slideshow for the user (such as the ability to progress, or stop and start the slideshow). You may use and customize the jQuery and/or CSS3 demos/samples provided in the tutorials or find and customize a jQuery plugin for slideshows or carousels. It is preferred that you use your own photos for the slideshow, but can explore the techniques using this .zip file with the images from the demos.

Using FTP, upload your file(s) into an "exercise6" folder within within your "Lastname_Firstname" folder on the MAT server. Make sure your slideshow hmtl page is named (or renamed to) "index.html" and that you upload any dependent files (such as images, css, or js files). See Publishing Instructions and FTP Info for the MAT Server for detailed FTP instructions and a video tutorial.

Links and Resources

jQuery

jQuery Plugins

CSS3 Animation

LAB / HOMEWORK / ONLINE

> Go to Top

Week 16 (12/7)

TOPICS

  • CSS3 and Animation on the Web (continued)
  • @Keyframe Animations and CSS Transitions
  • Trigger animations upon scrolling with jQuery (download code)
  • Domain registration
  • Finding a Web host
  • Accessibility and SEO
  • Meta tags
  • Lab for final project

Links and Resources

Creating a CSS Drop Menu (enhanced with jQuery)

  1. CSS Drop Menu - Introduction (3:28)
  2. CSS Drop Menu - The HTML (8:32)
  3. CSS Drop Menu - The CSS (32:04)
  4. CSS Drop Menu - jQuery Enhancements (14:22)

CSS3 Animation

Domain Registration

Web Hosting

Search Engine Optimization/Marketing

HTML5 and CSS3

Web Design Trends

LAB / HOMEWORK / ONLINE

> Go to Top

Extended Office Hours During Finals Week

TUESDAY (12/12)

Office hours from 1:30 pm - 3:00 p.m. in 4610

> Go to Top

Finals Week (12/14) - 10:00 - 11:50 a.m.

TOPICS

  • Present Final Project

 

Complete the anonymous course evaluation survey.

> Go to Top