CLASS SCHEDULE

  

Week 1 (1/24)

TOPICS

  • Introduction to the class
  • Introduction to Multimedia and the World WIde Web
  • Self publishing
  • Introduction to blogging for the class
  • Setting up your own blog

RESOURCES

LAb/Homework

  • Set up your blog and e-mail me the address (URL)
  • Make your first post to the blog
  • Get the Book and begin play/experimentation

Week 2 (1/31)

TOPICS

  • Web basics
  • Introduction to HTML and XHTML
  • Basic HTML Tags
  • Hard-coding web pages with HTML
  • Coding Color
  • Coding Tables and Images
  • Using a WYSIWYG: Introduction to Dreamweaver for creating and editing Web pages

RESOURCES

Exercise #1: <I AM IN HTML>

Hard-code a web page using HTML that provides a brief introduction to who you are, including a biographical description of yourself, your careers goals/major, your interest in the course, and/or any other information that you'd like to provide. At minimum, your HTML page should include:

  • A page title
  • A header with your name
  • Some form of narrative biographical information about yourself
  • An ordered or unordered list of your favorite web sites with links to the sites
  • A hot link with your e-mail address

Remember to play around with the formatting and select a background color, font face, and font and link colors for your page. You're welcome to explore coding tables, inserting images, inserting horizontal rules, etc., but it's not required.

Save the file using your last name plus "e1", and then use the extension ".htm" (i.e. clevelande1.htm). Put it in the Exercise 1 folder on the shared drive.

LAb/Homework

Week 3 (2/7)

TOPICS

  • Introduction to Working with Dreamweaver
  • WYSIWYG
  • The Dreamweaver Environment
  • Page properties
  • Working with text/typography
  • Formatting text
  • HTML Formatting vs. CSS Formatting
  • Line breaks and paragraphs
  • Special Characters
  • Absolute and relative links
  • Working with tables

Exercise #2: HYPER POEM

Use Dreamweaver to creatively format your poem and add hyper-links.

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 and/or paragraph breaks; play with the font face, color, size, and 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 for within-the-page links). You must have at least one link on the page.

You may insert images and work with tables if you wish, but it is not necessary.

Create a folder with your name + e2 (i.e. clevelande2) and save all of your html and dependent files in it.

LAb/Homework

Week 4 (2/14)

TOPICS

  • Review of Photoshop for Creating Web Graphics
  • Optimizing Images for the Web
  • Formats for Optimizing Web Graphics
  • Working with Images in Dreamweaver
  • Integrating images and text
  • Image maps
  • Images as buttons
  • Images as backgrounds
  • Rollover buttons

Midterm Project - ipoinT Advisors Webbsite: Design the NaV menu & gRAPHICS (Part 1)

You will create a website for the fictional company, iPoint Advisors, using this textual content. You will begin by creating graphics and image-based rollover buttons for the navigational menu (Part 1), then you will layout your pages using HTML Tables (Part 2), and finally style and format the text using Cascading Style Sheets or CSS (Part 3).

You will have the opportunity to ask the "client" (me) questions about the project to guide your creative development and understand the communication goals and objectives for the site. This client survey may be useful to that end.

The website should have the following sections/pages: profile, services, staff bios, client list, and contact (you are free to change the names/labels for these pages if you wish).

You are required to create the following imagery in Photoshop or Illustrator: a simple text-based logo/banner for the company that will serve as the site identifier; page titles/headers (page identifiers); and image-based rollover buttons for the navigational menu linking to each page.

Create a root folder with the following naming convention: your last name + p1. My folder would be called "clevelandp1" for example. Save all of your work (including your imagery) in this folder.

RESOURCES

LAb/Homework

Week 5 (2/21)

CLASS CANCELED THIS WEEK

  • Class is canceled this week as I will be in San Francisco for a conference. We will reconvene next week (2/28).

Homework

  • Work on iPoint Advisors graphics

Week 6 (2/28)

TOPICS

  • Review of Graphics and Rollover Images
  • Tables and table-based layouts
  • Table properties
  • Pixel-based vs. percentage-based tables
  • Nesting tables
  • Rounded corners in tables

Midterm Project - ipoinT Advisors Website: Page Layout USiNG Tables (Part 2)

In the second part of the iPoint project (see above for general info and info on part 1), you are required to layout your pages using HTML tables. Decide whether you want your pages to expand and contract to fit varying screen sizes or whether you want to use a fixed size table. It is likely that you will need to create separate cells for your logo/site identifier, navigational menu, page titles, and body copy, but you should strive to have the simplest table-based layout possible that meets your needs. Once you setup the table layout, insert all of your images and content and enable your links for each of your pages.

RESOURCES

LAb/Homework

  • Finish iPoint Advisors graphics, begin layout with tables
  • Read Dreamweaver CS3: HOT - Chapter 8
  • Your Blog

Week 7 (3/6)

TOPICS

  • Tables and Table Based Layouts (continued)
  • Introduction to Cascading Style Sheets (CSS)
  • Text formatting with CSS
  • External Stylesheets vs. Embedded and Inline Styles

Midterm Project - ipoinT Advisors Website: Formatting TEXT Using CSS (PART 3)

In the third part of the iPoint project (see above for general info and info on parts 1 and 2), you are required to style and format the text for iPoint Advisors using an external Cascading Style Sheet (CSS). Create differing styles for body text, headers, sub heads, etc.

RESOURCES

LAb/Homework

  • Work on iPoint Advisors Project (due 4/3)
  • Read Dreamweaver CS3: HOT - Chapters 6 - 7
  • Your Blog

Week 8 (3/13)

TOPICS

  • Review of CSS formatting
  • Efficiency and Automation
  • Working with Templates
  • Defining Editibale and Non-Editable Regions
  • Using Templates for Site-Wide Changes
  • Assets and Library Items
  • Using Find/Replace
  • Using the History Panel and Commands
  • Working with Snippets
  • Creating Your Own Code Snippet

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

In the fourth part of the iPoint exercises (see above for general info and info on parts 1-3), you are required to finalize your page design (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).

RESOURCES

LAb/Homework

Spring Break (3/20)

SPRING BREAK - NO CLASS THIS WEEK

Week 9 (3/27)

TOPICS

  • Quick Review of Templates
  • Site Management and FTP

Midterm Project - ipoinT Advisors Website: Refine, DEBUG, and UPLOAD VIA FTP (PART 5)

In the last part of the iPoint exercises (see above for general info and info on parts 1- 4), you simply need to put on the finishing touches, testing your site for consistency and proper functionality, correcting any errors that you spot, and ultimately uploading the site to the IMT servers via FTP.

RESOURCES

LAb/Homework

Week 10 (4/3)

TOPICS

  • FTP Help
  • Web, Graphic, and Multimedia Design Principles
  • Review of iPoint Advisors Websites
  • Working with Frames and Framsets
  • Targeting Frames
  • Inline Frames

RESOURCES

LAb/Homework

Week 11 (4/10)

TOPICS

  • Review iPoint Websites (continued)
  • AP Divs/ Layers
  • Understanding the CSS Box Model
  • Creating a container for centering/aligning AP Divs
  • Using Behaviors

RESOURCES

LAb/Homework

Week 12 (4/17)

TOPICS

  • Compositing and designing web pages with Photoshop, Imagready and/or Fireworks
  • Slicing and optimizing images using Photoshop and Fireworks
  • Rollover graphics and animation using Photoshop and Fireworks

Exercise #3: Composite Homepage Using Photoshop and fireworks or imAgeready

Using Photoshop, Fireworks and/or Imagready, design and produce (with perhaps a little help from Dreamweaver) a homepage that will serve as an index of your work in the class. Be sure to include a textured, graphical background and rollover button links to each of the 4 exercises, the midterm project, and the final project.

RESOURCES

LAb/Homework

Week 13 (4/24)

TOPICS

  • Review of PS and Dreamweaver Integration
  • Nav Bars and Remote Rollovers
  • CSS Rollovers and other Tips and Tricks
  • Forms and Form Elements
  • Styling Forms
  • Working with Spry Tools and Widgets

RESOURCES

LAb/Homework

Week 14 (5/1)

TOPICS

  • Timelines and Animation in Dreamweaver
  • Overview of Animation in Flash
  • Importing and/or Creating Assets
  • The Library, Symbols, and Instances
  • Frames and Keyframes, Timing and Frame Rate
  • Understanding Step vs. Tweened Animations
  • Publishing Flash
  • Integrating Flash Media/Animation in Dreamweaver

Exercise #4: SPlash with Flash

Explore Flash animation techninques by creating a short "splash" page using Flash. Your animation should include at least one motion tween that effects one or more of the following properties: position, scale, rotation, alpha (transparency), tint (color), brightness, and/or filter effects. You may also choose to use step animation. The content of the splash page is up to you and may include any text and/or imagery you feel is appropriate. If you wish, you can try to create a splash page for use in your Final Project, but this is not required.

LAb/Homework

Week 15 (5/8)

TOPICS

  • Buttons, Actions, and Interactivity in Flash
  • Adding a "Skip Button" to your Splash page
  • Forms and Form Elements
  • Styling Forms
  • Working with Spry Tools and Widgets

RESOURCES

LAb/Homework

Week 16 (5/15)

TOPICS

  • Domain registration
  • Finding a Web host
  • Web Accessibility
  • Meta tags, search engines, and site marketing
  • Lab for final project

RESOURCES

Lab/Homework

Optional Saturday Lab (5/17, 10 am - 2 pm)

I'm going to open one of the 4600 labs from at least 10 a.m. - 2:00 p.m. on the Saturday before finals week for optional exta lab time.

Finals Week (5/22 at 10:30 am)

TOPICS