ART 346 Z: Interactive Design

For Tues, Dec 5

Wednesday, November 29, 2006

For Homework:

Project #1 - Create an HTML version of your portfolio homepage and save it to your istudents drive. Rollovers, swaps, and other interactive elements should be functional.

Assignments - Assignment resubmission deadline is 6:30pm, December 7th. Remember you are allowed to resubmit 2 assignments for the chance to receive a possible 5 points each.

Christie   /   0 comments

For Thursday, Nov 30

Tuesday, November 28, 2006

For Homework:

Assignment #6 - Complete and post on the web.

Blog - Write a self-evaluation for your sixth assignment. What parts of the design are you satisfied with? What, if anything, do you think you could have done better? Be sure to include the link to your calendar/css page.

Christie   /   0 comments

For Tuesday, Nov 28

Tuesday, November 21, 2006

For Homework:

Have a good Thanksgiving break.

Christie   /   0 comments

More Stylin'

Exercise #1: Using only CSS (no tables)turn this page, into this page.

(The first page and images are available under gambit/FA06/art346z/class/css2/)

Hints:

- the page was made with 4 div tags
- the divs use floating not absolute positioning
- nav div is 120px wide
- content div is 350px wide
- features div is 150px wide
- container div is 760px wide
- nav rollovers were created with css selector type advanced (check the drop down menu)

Christie   /   0 comments

For Tuesday, Nov 21

Wednesday, November 15, 2006

For Homework:

Read - Chapter 2 from Learning Web Design

Blog - Using your own words, describe in one or two paragraphs how the web works (info available in above chapter).

Christie   /   0 comments

Stylin'

Note: At the start of class please copy the "css" folder on gambit (gambit/FA05/art346z/class) to your istudents drive

What it is

A style sheet is a set of instructions that controls the appearance of a webpage.


Why We Should Care

1) Greater typography and page layout control
2) Easier to maintain
3) Style info is kept separate from structure
4) Smaller file sizes

Compare the Code


What it Looks Like

A style sheet is made up of rules - a series of instructions for how page elements should be displayed

Each rule is defined by
1) the selector (identifies the element to be affected)
2) the declaration (style instructions which includes a property and value)

So visually it looks like this
selector{property:value}

And a real example would look like this
.header{font-size: 16px}


CSS Fun

Walk-through - before / after


Your Turn

Exercise 1 - Recreate this CSS page using Dreamweaver/CSS.
Exercise 2 - Using only CSS turn this page, into this page.

Christie   /   0 comments

For Thursday, Nov 16

Monday, November 13, 2006

For Homework:

Read - Chapter 8, pgs. 111-116 & 127-131, from Learning Web Design

Project #1: Create a draft of an artwork page using Fireworks. You do not have to export your file as a webpage.

Christie   /   0 comments

For Tuesday, Nov 14

Wednesday, November 08, 2006

For Homework:

Assignment #5 - Complete and post on the web.

Blog - Write a self-evaluation for your fifth assignment. What parts of the design are you satisfied with? What, if anything, do you think you could have done better?

Christie   /   0 comments

For Thursday, Nov 9

Monday, November 06, 2006

For Homework:

Blog Tag Practice: Create a SIMPLE two column table for your blog. In the left column, put your entries (title, date, text, author, and comments). In the right column, put the blog archive. Test your code by modifying your blog template.

Christie   /   0 comments

For Tuesday, Nov 7

Thursday, November 02, 2006

For Homework:

Project #1: Take one of your sketches, and create a draft of your homepage design using Fireworks. You do not have to export your file as a webpage.

Read - Handout, Chapter 5 from Blogging: Genius Strategies for Instant Web Content by Biz Stone

Christie   /   0 comments

HTML

Wednesday, November 01, 2006

HTML documents are plain text files created using any text editor.

HTML Tags

HTML tags are used to mark elements (images, text, links, etc) of a file


  • most HTML tags are container tags - they consist of two tags, a beginning and an end tag

  • beginning tags contain a left bracket <, tag name, and a right bracket >

  • end tags contain a left bracket <, a slash /, tag name, and a right bracket >

  • the beginning and end tags are wrapped around a range of text

  • some tags contain attributes (instructions added within a tag to modify its appearance)

  • tags are not case sensitive



HTML Structural Tags

All web pages require a set of structural tags that help the browser sort out the parts of the document

These tags do not affect how the content looks

html = container tags that tell the browser the page is html-coded

head = contains descriptive information about the document

body = contains the actual content that displays in the browser

Christie   /   0 comments