Author Archive

Temporary Home Page (+ extra credit)

Due date for for basic version – Tuesday, Oct. 30

Due date for extra-credit enhancements – Tuesday, Dec. 18

Here’s a link to the handout: Temporary Home Page handout

Make a home page for your folder on caweb. How much you do is up to you.

What it must have by Oct. 30:

  • Working links to all your assignments (3 pts)
  • Must work as the index page to your directory. In other words, when I click on your name in the list, this page must appear. (6 pts)
  • One image (1 pts)
  • Satisfactory design (5 pts)
  • Valid code (5 pts)

If you add some fancy stuff, you can get extra credit! (due date for enhancement Dec. 18)

  • Original images/illustrations used well – (10 pts)
  • Semantic animation (in other words, animation that adds to the meaning and usability of the page (10 pts)
  • Gratuitous but fun animation (5 pts)
  • External style sheet –(5 pts)
  • Floated layout – (20 pts)
  • CSS link states –(5 pts)
  • Image map – (10 pts)
  • Design excellence (10 pts)

Bare-Bones Example

Fancied-up Examples

 

Posted on: October 25th, 2012

Reading about Links for Thursday, Oct. 25

For Thursday, some reading in Learning Web Design:

  • Review pages 105 – 111 in Chapter 6: Adding Links
  • Read pages 112 – 120 in Chapter 6: Adding Links

After we’ve finished the crit on our Artist/Musician site, we’ll do an in-class exercise based on this reading.

Enjoy your day off – see you Thursday!

Posted on: October 22nd, 2012

Link to an External Style Sheet

Here’s a screencast of my demo about linking to an external stylesheet. Apologies for the sketchy production quality. I’m a noob at video sorts of things.

This video is tiny in the screen, but you can make it fit to your monitor.

If you still have questions when you’re done, refer to our textbook, Learning Web Design, pages 300 – 302.

Posted on: October 22nd, 2012

How to create a webpage – with rollovers! – using Photoshop & Dreamweaver

Thursday we learned about creating multiple optimized images from one Photoshop webpage comp.

Today, we’ll review those steps and take it further. We’ll use Photoshop to slice and optimize the comp images (that’s the review part).

We’ll also use Photoshop to actually create our html page! When the page and all the images are created, we’ll open it up in Dreamweaver and make our Javascript rollovers.

Step-by-step directions below:

Slicing+rollovers from Ann Foley

Posted on: October 16th, 2012

Busy Week! (Week 7)

Busy week!

We started work on the artist/musician assignment, which is fun and creative and challenging.

This week, we talked about and worked on these steps of the assignment:

  1. Choose artist and gather images.
  2. Using Photoshop, create a static comp of your artist page.
  3. Slice up the comp into the required areas: titlebar, navi, etc. Slicing, BTW, is a Photoshop term that means cutting up a comp.
  4. Optimize each slice appropriately for the web. We will cover slicing and optimizing thoroughly.
  5. Create a gif animation to put in the little animation div in the lower right-hand corner.
(I’m going to simplify the steps below. We’ll use Photoshop to create slices and to create the html for our pages. Much better!)

Next week, we’ll talk about and work on the following steps:

  1. Open the Artist.html page from the materials folder in TextWrangler. Save it as your Artist webpage. In this html page, place the images you created in the slice/optimize process in their correct divs.
  2. Returning to the navi and back and next slices, we’ll make rollover animations using Photoshop.
  3. We’ll plug the ani, navi, and back/next slices into their areas.
  4. W00T! We’re done! Time for the crit.

Posted on: October 11th, 2012

Artist/Musician Site

Tonight we’ll have a look at our scuba site and plunge right in to the Artist/Musician assignment.

Note that the deadline for the Artist/Musician assignment is now October 25 at the beginning of class.

And here, for your viewing pleasure, Gangnam Style. This video always makes me smile.

Posted on: October 9th, 2012

Textwrangler User Manual

Are you curious about how Textwrangler works? Probably not. But if you’re going to use it, at some point you will benefit by having the User Manual.

Here it is, in pdf format.

Posted on: October 6th, 2012

Artist/Musician Assignment – 100 points

Here’s a link to the materials you need for this assignment.

Here’s a link to the handout.

Due Date:  October 25, 2012 at the beginning of class

Here are some examples of artist/musician sites:

YOU HAVE BEEN HIRED TO CREATE THE ART AND GRAPHICS ONLY FOR A SINGLE PAGE SITE.

An art director has already determined the layout of each page. Your job is to create the artwork to fit within the grid. It is crucial to the programmer/coder that you create graphics to exact sizes indicated on “map,” and use naming scheme as shown in two documents:

  • Musician_map.pdf
  • artist.html

OBJECTIVES

Explore using Photoshop and Illustrator and Dreamweaver to:

  • create static comps for web pages;
  • turn static comps into sliced and optimized images for use in a web page;
  • create simple Javascript behaviors to enhance the interactivity of a web page;
  • create gif animations.

GUIDELINES

MAIN ILLUSTRATION:
  • Choose any entertainer, group, artist, author influential person past or present.
  • You may use photos for illustration reference only. Any photos must be dramatically altered to be included.
  • Illustration style is open. However, it should reflect the mood/personality of subject. For example, a nice peaceful pastel color portrait of Marilyn Manson would probably not be appropriate.
  • Consider caricatures, satires, collages, found objects, non-literal interpretations. The only rule is that the illustration must bear some resemblance to your subject(s).
  • Illustrations must be created to fit within layout.
NAVIGATIONAL BAR:

Could contain the following choices, and there must be at least three:

  • Bio
  • Influences
  • Body of Work
  • Photo Gallery
  • Home

Prepare as one graphic to size. We’ll go over how to slice the nav graphic into separate buttons and how to make them change on hover in class.

BACK/NEXT BUTTONS:

The “back” and “next” elements must also be rollover buttons. You’ll prepare them using the same methods we learned preparing the nav buttons.

TITLE BAR:

Must contain the name of artist/group. Be creative. Consider warp and special effects features in Illustrator and photoshop and traditional media for creation. Font choice and colors are very important for consistency within page.

ANIMATION:

This is an accent graphic that should reflect something about the artist or group. For example, if you choose Elvis, your animation could be of a little swiveling pelvis.

OVERVIEW OF TASKS

  1. Choose artist and gather images
  2. Using Photoshop, create a static comp of your artist page.
  3. Slice up the comp into the required areas: titlebar, navi, etc. Slicing, BTW, is a Photoshop term that means cutting up a comp,
  4. Optimize each slice appropriately for the web. We will cover slicing and optimizing thoroughly.
  5. Open the Artist.html page from the materials folder in TextWrangler. Save it as your Artist webpage. In this html page, place the images you created in the slice/optimize process in their correct divs.
  6. Returning to the ani slice, we’ll make a gif animation using Photoshop.
  7. Returning to the navi and back and next slices, we’ll make rollover animations using Photoshop.
  8. We’ll plug the ani, navi, and back/next slices into their areas.
  9. W00T! We’re done! Time for the crit.

Posted on: October 4th, 2012

Textwrangler Keyboard Shortcuts

Posted on: October 4th, 2012

September 27 – External Style Sheets & Extended Deadline

The due date for the Scuba/100k assignment is extended to Thursday, Oct. 4 at 5:45. We’ll have a crit as soon as they’re all uploaded.

Here’s how you put all your styles into an external style sheet.

  1. Create a document with the extension .css. For example, mystyles.css.
  2. Put that document in the same directory at the same level as the html document you’re working on. In the same folder, in other words.
  3. Copy all the styles from the head portion of your html document. Just the selectors and declarations – not the <style type=”text/css”>…</style> portion.
  4. Paste the styles into the mystyles.css document.
  5. Delete the styles from your html document.
  6. Link  mystyles.css to your html page by putting this in the <head></head> portion of your page:

<link rel="stylesheet" href="mystyles.css">

And there you have it.

Posted on: September 28th, 2012