![]()
Tim Armato: Summer Quarter
2010: Fundamentals
of IMD
Fundamentals of Interactive Design |
User-Centered Interface Design |
Media Design |
||
HandoutsNotes on WORKFLOW and FILE MANAGEMENT Dreamweaver Site Definitions - FTP client & TextEdit settings Bad Tags Flash Basics - ActionScript 3 handout HTML ReferencesW3 Schools <--- I recommend this one HTML Dog Getting started
with HTML Understanding relative and absolute document paths. |
Other Technical ResourcesW3C - The World Wide Web Consortium W3C article, "Why Validate?" Strong Bad's guide to making a web site CSS ReferencesGetting started with CSS 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. |
||||
Assignment 02 |
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
Part B
*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. |
|||
Assignment 03 |
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. |
|||
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. . Resources for this assignment: |
||||
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. |
||||
Assignment 06
|
Create an informative, 6-page (minimum) web site presenting either: 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: |
|||
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. |
||||
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. |
||||
Assignment 10 |
Create a 10–30 second interactive Flash movie of a character traveling through 2 or 3 different scenes.
Requirements:
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. |
|||
If you notice problems with any of these pages, please let me know! tarmato (at) aii (dot) edu