Sample Files
Pies Example - Add the <div> tags back into the HTML to make the page work. You only need to add the div tags, nothing else needs to be change. Download example.
Table Example Using the Gettysburg web page we added a table of Civil War Battles. Check out the code so you can recreate it on your own. Downloaded here.
Styles, Classes, Title Attribute, and Span are all demonstrated in the Gettysburg sample we did in class. Download the files to see how they were built. Please note the difference between the <title> entity which appears in the <head> of the page and the title attribute which appears inside of a link. To see how this displays open the file in your browser and hover over any of the navigation links for about 2 seconds.
CSS Links
Quick list of some common CSS commands
A CSS "cheat sheet" is available here. Though much of it has not been covered yet and may be confusing until then.
Midterm and Final Projects
Final Project Requirements (pdf)
Site Planning Document (pdf)
Site Planning Document (word doc file)
Design Evaluation Form (pdf)
Not required with the midterm project but is helpful in thinking analytically about design and content on the web. Look at a few of your favorite sites and score them.
Example Site Map (pdf)
Made in Open Office / Microsoft Office. This is a sample site map for a made up travel blog. Note that it doesn't give much info on the company's background and purpose. That is the point of the site planning document.
Useful Programs and Resources
Lorem Ipsum Generator
This is dummy text you can use to for layouts. The point is to put realistic looking text in place that won't distract people with its content.
W3C Validator: Make sure your code is up to par. To get an A on the midterm and final projects, your code must validate.
GNU Image Manipulation Program
An open source (free) alternative to Photoshop
Download for windows at http://www.gimp.org/windows/
Download for Mac at http://gimp.lisanet.de/Website/Download.html
If on a Mac you will also need to install X11 (a special program that is on you operating system disc). You probably buried this deep in your closet. You can also download a new version at http://xquartz.macosforge.org/trac/wiki/X112.3.2.1
Inkscape
An open source (free) vector based illustration program that can be used as an alternative to Illustrator and Fireworks.
Project info at http://www.inkscape.org/
Downloads here
Never purchase Microsoft Office again
OpenOffice is a complete office sweet that is totally compatible with MS Office and is free.
A good way to keep your files safe
Dropbox is a small program that runs on Mac, Windows, and Linux. It creates a folder on your computer that is synchronized to the web. When you put files into this folder or update a file that is in this folder it updates on all your computers that have Dropbox installed. It also stores them on the web so you can access them from anywhere. 2Gb of storage is free.
Intro to Web Design (MART 130)
Laurence Liss :
SUBMIT HOMEWORK TO:
CLASS MEETS
Section 1 - Wed, 8:00 - 11:30 a.m.
Wed Class Calendar of classes and assignments (pdf)
Section 2 - Fri, 8:00 - 11:30 a.m.
Fri Class Calendar of classes and assignments (pdf)
Course Outline (pdf)
TO GET START FILES FOR HOMEWORK
visit the Head First site
How to make a ZIP file (pdf)
Web site Design Evaluation (pdf)
Site Planning Document (pdf)
Suggested Readings
37 things every web designer should know
The Bathing Ape Has No Clothes (and other notes on the distinction between style and design)
Graphic Fundamentals (down the page)
The Texts
Head First HTML with XHTML & CSS by Elisabeth Freeman and Eric Freeman
O'Reilly Media;
ISBN: 0-596-10197-X
(Optional Online reading) Web Style Guide Online by Patrick Lynch and Sarah Horton
If you plan to continue as a programmer/designer:
CSS Pocket Reference
by Eric Meyer
O'Reilly Media
ISBN-10: 0596515057
ISBN-13: 978-0596515058
HTML and XHTML Pocket Reference
by Jennifer Niederst Robbins
O'Reilly Media
ISBN-10: 0596527276
ISBN-13: 978-0596527273