Today we will present the final projects. You should have uploaded it to the server. We are using a similar url as the midterm but with mmp240final so if your username is cstei1234 then it is
Here is the link to the page with all of your projects:
We will look at this html and css file to see how they styled forms:
Today we are going to look at converting a PSD design to HTML and CSS. We will use this tutorial on the web as a way to look at it.
Colored Boxes Tutorial
Here is an image of the design used in the tutorial, we will open this in PhotoShop and look at it. You can (should ) use your own design as well.
Part of what the Colored Boxes doesn’t cover too well is slicing the PSD. You can see some more about that here:
There are literally hundreds (thousands?) of tutorials on how to do this. Here are some more links to other tutorials that are mostly show how to turn a specific design into HTML/CSS. Some are long and complicated so I decided to use the simpler one above in class and link to these:
List of PSD to HTML tutorials
VIDEO tutorails, these are screencasts of the process
30 11 2009
Today we are going to talk about grids. They are an extremely valuable tool for graphic designers (and you are all graphic designers when you create your web sites) to help with page layout.
First we are going to all look at this introductory video by Professor Kaisar.
Then we will use the following Grid Overlay Tool to look at some web sites.
Professor Kaisar’s Podcast Materials
Sites shown in the intro
Then we will look at video tutorial also by Prof. Kaisar.
Tool used in Photoshop Tutorial
More Information on Grids
More grid examples
Today we will look at doing Google Maps
And Google Calendar:
and hopefully get out of here before 9pm.
Here is a link to the Google page on how to do things:
Final Project Info
Your homework due today includes you proposals for your midterm projects. Make sure that you get them in to me today so that I can get back to you. Today we will begin looking at the Final Project Grading Rubric. Here is the file
Part of the requirements for the final project is that you use Dreamweaver Templates. We will talk about how they work today and use this document:
We will also look at using Google Maps, Calendars and Custom Search Engine today. To do all of these things you should have a Google Account. If you don’t, then sign up for one, it’s free. The first link below has some tutorials on how to do that and the next three links are for where the maps, calendar and search engines are:
We will start off the class with a quick recap of Dreamweaver Templates and the three column layouts we looked at
Here is a page about layouts
Next we will look at two types of image replacement.
CSS Image Replacement
One type is CSS based and basically shows a background image instead of the text. The link for the instructions is here
We will look at Phark Revised and Gilder/Levin Method (with tiles like Shea enhancement at bottom)
The other type is called Scalable Inman Flash Replacement (sIFR) and this replaces text with a Flash file showing the same text. The link to the intro article is here:
And some documentation we will look at is here:
Today we are going to look at using Dreamweaver Templates. creatingadreamweavertemplate.pdf
We’re also going to look at layouts and, if there is enough time, combine a 3 column layout with the Dreamweaver Template.
Today we are going to finish the presentations.
Then we are going to spend some time looking at and talking about design. We will work in paris and look at some different sites, most of which I got from this site
So first we will get into Pairs.
Then we will look at your instructions:
With your partner go through at least five of these sites and then follow the instructions and answer the questions:
Count the number of columns, and sections (header, footer, nav, content, sub sections etc) on the site.
2) How can you tell where one section of the site ends and the next begins? Pay special attention to the use of the following
Using the Web Developer Toolbar turn on and off the images. Compare the site with and without images.
3) How are images and illustrations used to enhance the site?
Look at how much are the images are used directly (the images are of the product, service, person, subject of the site) and how much are they used indirectly (the images are not directly about the subject of the site like background images, ornamentation etc.).
4) In what ways are direct images and indirect images used to convey the message and emotions they sites’ designers are trying to convey and evoke?
See if you can count the number of different typefaces on each site. Also look at the following:
5) What common practices do you see with typography across the sites? What things make the text more readable? What makes it less readable?
I will go over an example then you will do it in pairs.
Here are the sites: