Typography

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.

HTML Cheat sheet
Helpful references for color codes, special characters, etc., but the HTML reference is out of date.

Understanding relative and absolute document paths.

Other Technical Resources

W3C HTML Validator

W3C - World Wide Web Consortium

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. You must use this doctype definition in the HTML code of every page. 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 with your URL from your Ai account.

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

Interview a partner as a journalist writing a 100–200 word biographical summary (examples). Type up the paragraph in MS Word. Add two versions of it to your web site as Assignments 02a & 02b. The first (part A) will be the letter saved as a Web Page from MS Word. The second (part B) will be an HTML page you write from scratch. In the text of the bio, create a relative link, and an absolute link on relevant text. Title and date each page. Part B must validate.

Download the assignment sheet for more information and complete requirements.

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 addendum to the assignment sheet. <--NEW (2/10/10) 

Resources for this assignment:
You must create a site definition before using Dreamweaver for the first time.
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
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

I encourage everyone to participate in the 16 Things tutorials. In fact, I think this is so important that I am making it Assignment 07.

By class time on Monday (2/8) you need to have completed the first FIVE of the 16 Things. Additionally, you need to update your FID index page with a link to your new blog. This link should replace the existing a07 link. Since 16 Things is designed to be self-paced, after today we will not be dedicating much class time to it.

I am also offering 20 extra credit points* to anyone who completes all 16 Things by the last class of the quarter (Wed. 3/24).

*extra credit cannot be earned unless all primary assignments are turned in

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 10–30 second interactive Flash movie of a character traveling through 2 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.

Use Button Symbols and ActionScript to add navigation to Assignment 10. The movie will pause at the end of each scene and wait for the user to select which scene they want to view next.