1 / 15

ICC 565 Designing Interactivity

ICC 565 Designing Interactivity. Stephen Masiclat Director, Graduate Program in Media Management Jeffrey Passetti Adjunct Professor. Lecture 2 URL’s Nodes & Validation. Review You should have the following directory structure on your desktop: icc565 colorSite images.

orien
Download Presentation

ICC 565 Designing Interactivity

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ICC565Designing Interactivity Stephen Masiclat Director, Graduate Program in Media Management Jeffrey Passetti Adjunct Professor

  2. Lecture 2 URL’s Nodes & Validation • Review • You should have the following directory structure on your desktop: • icc565 • colorSite • images

  3. Building a web site. . . • We will be creating a small (four-page) site and saving it in the “colorSite” directory.

  4. . . .one page at a time • • Web pages conform to a standard called the Document Object Model or DOM. • • The first set of objects in the DOM are nodes. • • Nodes are built from valid tags: opening and closing tags • • <openTag> </closeTag> • Don’t freak out, but. . . • Node=Element=Tags

  5. Page one. . . • <html> • <head> • <title> Assignment 1: the color site </title> • </head> • <body> • </body> • </html>

  6. Remember this? ffffff eeeeee dddddd cccccc bbbbbb aaaaaa 999999 888888 777777 666666 555555 444444 333333 222222 111111 000000 maximum • Computer color specification uses • hexadecimal notation The alphanumerics correspond to level of voltage delivered to the pixels. They are always in the order, Red, Green, Blue (RGB). How do you make red, green and blue? voltage applied to pixel minimum

  7. Nodes are special • An html element can take an attribute. In this first example, we’ll modify the body element as follows: • <body bgcolor=“#ffffff”> • </body>

  8. Other important tags • The next important elements are the structural tags: • <h1> through <h6> </h1> • <p> </p> • And the anchor tag: • <a> • <a href=“some URL”> </a>

  9. To link it all, use the <a> tag • Our example will take advantage of the • co-location of the pages. • <a href=“red.html”> This text links to the red page. </a> • Next, make similar links to a green and blue page.

  10. You now have all the elements to make your first site • Save this first page as index.html • Duplicate this page, then change the background color attributes to create red, green and blue pages. • Save these as red.htmlgreen.html and blue.html • All should be saved in the colorSite directory.

  11. Clean up the links • Convert the appropriate link on each page to a “Home Page” link. For example, on red.html, convert the link to the red page into a link to the home page. • Make sure the various pages link to each other correctly.

  12. To place images, use the <img> tag • This is a self-closing tag. • The first version will place the images • unmodified. • <imgsrc=“images/red.jpg” /> • Our second version will use the height and width attributes for different instantiations. • <imgsrc="images/red.jpg" height="15" width="100" />

  13. Add links to the web • Create appropriate sections with links to: • • The Pantone Corp site • · the home page • · the 2012 Color of the Year page • • Per Bang’s color multitool • · www.perbang.dk • • Copy some text from the Pantone site into your html document. • • Write a short introductory piece to Per Bang's tool. • • Format these text blocks appropriately. They must be structured, but un-formatted.

  14. A little extra. . . • To make the external sites (Pantone and Per Bang) open in new windows, add a parameter to the <a> tag as follows: <a href="http://www.perbang.dk/rgb/E500A2/" target="blank">

  15. When it works, hand it in. • Drag your index page into a browser pane and test all the links. • All the links. • When you are finished, hand the site in through Blackboard.

More Related