Interactive Tools
Fall 2011

Interactive Tools

This is a class that intro­duces concepts of HTML and CSS to design students. Working primarily with Adobe Dreamweaver, we’ll run through the funda­mentals needed to design and code a basic website. This website accom­panies the classroom lectures and houses addi­tional mate­rials that may be useful for the class. Students at North­eastern should visit the syllabus page for addi­tional policy infor­mation. Anyone is welcome to follow along with the tuto­rials on the site, although they may some­times be missing some key points that students otherwise get in the physical classes.

Recent Tutorials

Basics of CSS: the box model

Tutorial to follow. For now: What you need to know from the lecture: Draw “invisible boxes” around your designs so you can begin to visu­alize how you’ll structure your code Make div elements in your HTML document for every box that you drew on your designs. (Be cognizant of where your opening and closing tags are if you …
Read more »

Fundamentals of HTML Syntax

The purpose of this article is under­standing the funda­mental syntax of HTML. We’ll explore HTML elements, names, attributes and their values so you can under­stand the basics of HTML when you look at it.

Tentative Schedule

1

Jan 11

 

Intro: Hello World

Brief history of the web. Resources. Programs. File structure and site overview. Why designers need to take ownership of web design.

 

For next class, bring in a simple website design as a JPEG. You should use Photoshop, ensuring that you’re in RGB color mode with a 72 pixel per inch reso­lution. This does not have to be coded, it’s just a static image. It must contain some text, an image, and place­holders for links to other pages (but you don’t have to design the other pages yet.) It must have a header, footer and body section with a left and right side.

2

Jan 18

 

HTML and CSS Overview

What’s the rela­tionship of html and css? What’s the correct termi­nology? Proper tag structure. Linking pages. How web pages actually work. Introduce the box model.

 

If you wish to change or simplify your design based on our class discussion, please do so for next week. In addition, use Dreamweaver templates as a base and add your own “boxes” to the page using div elements and the box model as discussed today. You should make all of the appro­priate div elements needed for the “boxes” on either your existing design, or the revised design you’ll make this week. These boxes do not need to be styled or look like the design, they just need to be on the page as a framework to start making your site.

3

Jan 25

 

Basics of CSS: the box model and floats

The basic box model: padding, margin, border, background-color and floats. Shorthand CSS declarations.

 

Building on your code from last week, begin to add the discussed CSS decla­ra­tions (float, padding, margin, border, etc.) to your code to approx­imate the look of your designs. You should try to correctly place your boxes on the page, make them the right size, and add some back­ground color as a place­holder. Don’t worry about images and text styles just yet.

Remember!
You should be dupli­cating your whole site folder every week so you can reference back to your code in the future. By the end of the semester, you should have about 13 unique folders worth of code.

Note: you need your domain and hosting for week 5. We’ll be uploading your site to the web that week!

4

Feb 1

 

CSS: Links and focus on typography

You’re all designers—take real control of your type with CSS! Introduce linking, as well as the concept of hier­archy from an acces­si­bility stand­point (h1, h2, h3, p…) Talk about embedded fonts and the concept of cross-browser testing.

 

Style the text on your page appro­pri­ately to match your designs. You should display an under­standing of hier­archy on your pages using para­graphs and headers so add the following elements: [h1, h2, h3, p]. Create a new page and make links between the two pages as discussed in class.

Note: you need your domain and hosting for week 5, NEXT WEEK! We’ll be uploading your site to the web next week.

5

Feb 8

 

FTP clients. CSS: Stringing and the cascade

Best prac­tices for stringing styles (list syntax in HTML as an example) and re-use of code utilizing the “cascade”. Introduce FTP clients and uploading content to the web.

You can download the code from this week’s tutorial here.

 

Use the concepts of speci­ficity and CSS stringing as discussed to change the styles of common elements on your pages. Make sure you’ve done the following:

  1. Use Dreamweaver to create a bulleted (unordered) list on your page. (This contains the <ul> and <li> elements.)
  2. Use chained CSS styles to change the look of the list at different indent levels. In the CSS, you’ll write this like so:
    ul li ul li { }
  3. Assign unique classes to the <body> elements of at least two different pages.
  4. Using these body classes, change the look of at least one div on each page without renaming the class of that div. (Use the concept of speci­ficity and chaining to change the look of the div.)

Also, upload this week’s work to your website—you can use a subdi­rectory if you wish (so the domain is www.yourwebsite.com/your_subdirectory).

  1. IMPORTANT! On the index.html page that you upload to Data 1 this week, make an absolute link to the domain where your site is now uploaded, so that I can see your website on your server when I click the link from your index page on Data 1.

 We’re here in the schedule.

Content below is more-or-less the actual schedule we’ll follow, but the info above is what we’ve already covered.

CLASS IS CANCELLED ON FEBRUARY 15th.

Sorry, I had a personal sched­uling error… We’ll pick up where we left off next week, February 22. There is no addi­tional homework, please complete the work above (Class #5, assigned Feb 8th) for next week.

6

Feb 15

 

Stepping back: image handling

Proper “save for web” commands from the Adobe suite. Inline and external CSS image handling. The HTML image tag. Best prac­tices for images.

 

Add the images from your design to the site as discussed. Use Photoshop (or Illus­trator) to save the images correctly for web.

7

Feb 22

 

Setting up user feedback with simple CSS

The basics of inter­ac­tivity: rollovers, link states, display settings. To class or ID? That is the question. Discuss cross-browser testing.

  Style the text links on your page with the four different pseudo selectors (link, visited, active, hover). Also, use the CSS hover state applied to a link that changes the appearance of hover—this should not be a simple link color change, it should change a photo, back­ground color, size, or some­thing else about the element. Don’t forget to create a link from one page to a specific element ID on the other page.

8

Feb 29

 

CSS: Posi­tioning method

Focus on the CSS position decla­ration, as well as some alternate methods to achieve complex layouts.

 

Explore using the fixed, absolute and relative posi­tioning methods. Make at least one element on your page fixed, and one absolute (you may want to make a duplicate version of your site to do this if your design doesn’t warrant these posi­tioning methods.)

9

Mar 14

 

Advanced CSS Transitions

Build on the inter­ac­tivity of links to animate posi­tions with new CSS3 properties.

  

10

Mar 21

 

More CSS tricks

Overview of CSS3.

  

11, 12, 13, 14

 

Help with your IF projects and Final

Email me specific ques­tions before class and I’ll review for everyone based on the greatest interest.