Mini Exercises (Skill Sets)

1 Type - basic, basic, basic, (did I say basic?) typography coded with HTML
The goal of this assignment is to set up a very basic web site using SimpleText. Then, using the text formatting and horizontal rule tags, recreate skill sheet 1.

2 Graphics, links & backgrounds - simple HTML coding to import graphics, and create hyperlinks
Using the image files given, recreate skill sheet 2. This involves setting the background image of the web page using CSS, using the image tag to insert images and creating hyperlinks for text AND images on the web page. skill sheet 2

3 Introduction to CSS - write basic rules using CSS. Learn to control typography and positioning of elements using class and div tags. skill sheet 3

4 Resume - HTML coded page(s) with hyperlinks and imported logo(s)
In this assigment you have the task of recreating (or start from scratch) your resume as an html document. Consider organizing everything into a multi-page web site that is user friendly. See see View samples from other students.

4 Under 60k - prepare graphics to create a simple web page
In this assignment you are given a text file and some graphics files. The goal of this assignment is to create a web page from these files, using all of the images, while keeping the size of the web page under 60 K. This assignment uses Adobe ImageReady. Project files | View samples of this project.

5 HTML tables - This is a set of small assignments involving tables. The goal of these assignments is to make you very familiar with using tables in HTML and Dreamweaver. The assignments concentrate on basic text and graphics layouts and efficient use of tables.
tutorial
number tables (3)
class chart (hand out) complete in Dreamweaver
Mallard's schedule complete in Dreamweaver

6 CSS/Slicing - Ulandio
Take a page designed in photoshop, slice and optimize. Use Dreamweaver and CSS to complete the layout

7 CSS- navigation
Write CSS rules that will provide unique looks and interaction with links on your web page

8 Anchored Links & Image Maps- This exercise will demonstrate how to navigate to a specific spot within html pages. It will also allow the user to select a link embedded within an image
html project file | project image

Web Sites

1 Web Page Artist - Musician page
Create art and navigation graphics (still and animated) for an existing web layout. This site will focus on proper graphic preparation, and color selection. Project will introduce techniques for creating web art in Photoshop, Illustrator, and ImageReady. Sound will also be introduced.
View samples
Assignment sheet
HTML layout
PDF map
rollover how to

2 Slicing & Optimizing (Aldo Leopold Nature Center) - Photoshop or Illustrator created layouts, sliced, assembled, and ready to publish.
You will also be working in Dreamweaver (finally!) to create a multi page web site. assignment specifics | CSS links | CSS link exercise

3 Design or Redesign
Now that you are taking a web design course, expect friends and family to come calling. If you have no “real” client to design for, a redesign of an existing site may be substituted. Dreamweaver software introduced. Criteria for number of pages and skills will be given in class. View samples.

4 Personal Web Site
This will be the site for all the projects completed in this course. It can link to the other web sites, mini-exercises, and other web resources. You may add other content as desired. Page will be uploaded onto an MATC server. View samples.