![]()
Tim Armato: Winter Quarter
2010: Fundamentals
of IMD
Fundamentals of Interactive Design |
Fundamentals of Interactive Design |
Typography |
||
Syllabus: Student Work: |
HandoutsNotes on WORKFLOW and FILE MANAGEMENT Dreamweaver Site Definitions - FTP client & TextEdit settings Bad Tags Flash Basics - ActionScript 3 handout Final Exam Study Guide HTML ReferencesW3 Schools <--- I recommend this one HTML Dog Getting started
with HTML HTML
Cheat sheet Understanding relative and absolute document paths. |
Other Technical ResourcesW3C - World Wide Web Consortium 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. 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. |
||||
Assignment 02 |
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. |
|||
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: |
|||
Assignment 07 |
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. |
||||
|
DUE: beginning of class Mon, Week 11 |
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. |
|||
Assignment 11 DUE: beginning of class Wed, Week 11 |
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. |
|||
If you notice problems with any of these pages, please let me know! tarmato (at) aii (dot) edu