Handouts

Notes on WORKFLOW and FILE MANAGEMENT

Dreamweaver Site Definitions - FTP client & TextEdit settings

Bad Tags
A great article that answers all of those questions like "Why should I be using <em> instead of <i>?

Flash Basics - ActionScript 3 handout

Final Exam Study Guide

HTML References

W3 Schools <--- I recommend this one
This is my favorite reference and will always be the most up-to-date with respect to current standards. Of particular interest are the HTML 4.01, XHTML 1.0 and CSS 2.0 links under References, and the interactive HTML Examples.

HTML Dog
A well-organized, current reference with Beginner, Intermediate and Advanced sections for HTML and CSS. Of special interest is the Bad Tags article.

Getting started with HTML
An introduction to what HTML is and how it is used. While the theory presented is solid, be aware that the code examples are HTML, not XHTML. This means that the img and br tags in the examples are not self-closing.

Understanding relative and absolute document paths.

Other Technical Resources

W3C - The World Wide Web Consortium

W3C HTML Validator

W3C article, "Why Validate?"

W3C HTML Specifications

W3C XHTML Specifications

Strong Bad's guide to making a web site

CSS References

Getting started with CSS
A good introduction to CSS by the same author as the previous article.

Downloadable CSS Cheatsheet

W3 Schools CSS Positioning

BrainJar CSS Positioning article

Learn CSS Positioning in Ten Easy Steps

My CSS Positioning demo file (view the link to inspect and edit it with Firebug, or right-click the link to save so you can edit it with DreamWeaver).

Create a basic HTML page. Save as index.html. This is your home page and will be the basis for each of the future assignments. You must also create placeholder pages for each of the assignments. These pages must be linked-to from the index page, and each of them must contain a link back to the index. Upload all of the files to your web server account with Cyberduck or another FTP client.

After you upload your files and test the site, send me an email from your Ai account, with "FID" in the subject line, and your full name and URL in the body of the message.

Download the assignment sheet for more information and complete requirements.
Download the FTP/TextEdit handout.
Download the Workflow and File Management handout.

This is a two-part exercise in finding and fixing errors in HTML code. As you may have already experienced, it is possible to write HTML code that looks OK in the browser even though it is syntactically incorrect. It is important to use valid, "standards-compiant" code to assure that your content is accessible on the widest possible variety of delivery platforms. In addition to your own eyes, we will discuss several techniques and tools that can help you make sure that all of your code is error-free.

Part A

1. Read the HTML Dog Bad Tags article.
2. Download this file (right-click on the link) and save it into your Assignment 02 folder. It should replace your existing a02.html file.
3. WIth a partner, identify and fix all of the errors that you can find in the HTML code. You may need to add and delete tags in addition to fixing existing ones.
4. Individually, add a written description to your Assignment 02 page that explains what at least 3 of the errors were. These should not be the same explanations that your partner uses, so be sure to decide which errors each of you will be writing about.
5. Add a link to your partner's Assignment 02 page.

Part B

1. Working from a local copy of your web site, add this doctype declaration in the HTML code of every page except Assignment 02*.
2. You can then use the W3C Validator to help you debug the code in each of your .html files. When one of your files passes the Validator, it will provide you with a few lines of code that will add a badge to your page proving that it validates. You should copy and paste this code into the body of each page once it validates**.
3. Finally, upload all of your validated site files.

*You should not add the doctype definition or attempt to validate your a02.html file.

**With the exception of a02.html, it is the expectation that all web pages you create for this class will validate.

Explore the multitude of options available for creating a web-optimized image file. Compare the qualities and capabilities of the .JPG, .GIF and .PNG file formats by saving both a photographic image, and a graphic image in each format with a variety of different settings. Create a web page that uses tables to display the resulting images. Use named anchors to link to each of the tables from the top of the page. Title and date the page. Your code must validate.

Download the assignment sheet for more information and complete requirements.
Download the Save For Web and Devices File Format handout.

Use Dreamweaver to build a 5-page web site about four countries you would like to visit. Style the visual elements of the pages with CSS.

Download the assignment sheet for more information and complete requirements. .
Download the CSS Intro.

Resources for this assignment:
Get your images from The CIA World Factbook and Getty Images as these are sources of public domain and royalty free information. If you choose to use information from other sources, be sure to include proper MLA citations: MLA Formatting and Style Guide at the Purdue University Online Writing Lab. Here is another great tool to help you format MLA citations.Just choose the appropriate source from the left-hand column, then fill in the blanks and click the "submit" button.

You will be creating a web site that is either a Personal Portfolio with profiles of 2 influences, or a "World Atlas" Country Report (in either case YOU will be writing 400–600 words).

Begin by organizing your thoughts and doing some brief preliminary research so you have an idea of the amount of content you will be dealing with. The next step is to map out your website-to-be.

Once you have some information to work with, divide it into at least four logical groups; these will each become separate pages in your site. You will likely find that you need to organize your content in to even smaller subdivisions. These become the different layers of the informational hierarchy and will have direct influence on the file structure and navigation of your site.

Delivery requirements for Assignment 05:

Validate it. Date it. Upload it.

Create an informative, 6-page (minimum) web site presenting either:
a) your artwork and the work of two artists that have been influential to you
b) a country of your choosing
c) other topic with instructor approval

The content of your site will include a 400–600 word report about your country or your influences. Remember, any quoted material (text or image) must be clearly marked as such and must be accompanied by appropriate citations.Use CSS positioning and <div>'s to control the layout beyond what is possible with HTML alone. See the links below for references on how to correctly cite your sources.

Download the assignment sheet for full details.

Other useful sites:
LRC Online Databases
Online Writing Lab MLA reference
The Landmark Project Citation Machine is also a great tool to help you format MLA citations. Just choose the appropriate source from the left-hand column, then fill in the blanks and click the "submit" button.
The CIA World Factbook

Bounce the ball. Use graphic symbols and a motion tweens. Publish it. Date it. Post the assignment to your website.

Download the assignment sheet for full details.
Flash Basics handout.

Create a web page with a one paragraph summary of your project and web-optimized scans of your thumbnails/storyboards. Date it. Post the assignment to your website.

Download the assignment sheet for full details.

Develop one of the Movie Clip symbols you will be using in your final animation. Publish it. Date it. Post it to your website.

That's all there is to it. There is no assignment sheet.

Create a 10–30 second interactive Flash movie of a character traveling through 2 or 3 different scenes.
Choose one of these two subjects:

Publish it. Date it. Post it.

That's all there is to it. There is no assignment sheet. Here is the AS3 handout from class.