Spring 2016 Computer Web Design

Tutorial 1

Tutorial sample file containing several examples of CSS selectors for IDs, Classes, linking to web pages with IDs, and images with relative and absolute path names
Sample with selectors, images, and anchors

Tutorial 1 Project

Right Click, Save As
Right Click, View Source
From CSS "link" Right Click, view in new tab

Tutorial 1 Case 1

Tutorial 2

Example of hot spot

Textbook, Tutorial 2, Nav Link Documentation

Textbook, Tutorial 2, Hot Spot Documentation

Textbook, Tutorial 2, Image Map Documentation

Tutorial 2 Tutorial

To review the book's coverage of nav layout, see Textbook, Tutorial 2, Nav Link Documentation
Select "aperture" on lower Right Hand corner; see that it brings up the aperture definition in glossary by linking to a id within a page
From glossary.htm, view source to see the ID defined for aperture definition

To see the combined results ot "Hot Spot" and "Image Map", see either home.htm, tips.htm, glossary.htm
In the header (above the navigation), is an image with three different sections: Home, Tips, and Glossary
Hover over any of those three, you'll in the bottom left hand corner, the name of "href" value
The img links the usemap to the map itself

Example of anchor cursor property and values

Example of two divs floated side by side, html5 color picker

HTML5 Colorpicker FireFox Fire Fox Color Picker

HTML5 Colorpicker Chrome Chrome Color Picker

HTML5 Colorpicker Edge Edge Color Picker

Tutorial 3

Key typography terms

kerning: space between letters; line-spacing
leading: height of the line; line-height
tracking: space between words
font-family: typeface of the font
font-size: size of the font
serif: typeface with small ornamentation at the tail end of each character
sans-serif: non-serif font without any ornamation
glyph: unique marks that aid in the spelling of a word
monospace: each character has the same width

font size

Absolute units: fixed in size, independent of the device; mm, cm, in, pt, pc
relative units: em, %, px
pixel: single dot on a device; not scalable
resolution: expressed in pixels
pixel: rendered size depends on the density of the output device

All CSS properties and values must not have spaces in them; for example, invalid is font-family: arial black
valid is font-family: "arial black"
Invalid is font family: "arial black"

Examples of vertial-align values

Example of "short cut" formatting for font
font: font-style font-variant font-weight font-size/line-height font-family

Pseudo-class: classification based on current status, position, or use in the document. Dynamic and structual.

Dynamic pseudo-classes change with a user's actions
a:visited {color:red;}

Structural pseudo-classes clasify based on locations within the hierarchy of the page elements.
body:first-child {background-color: yellow;}

selector:pseudo-class {styles;}

Example of pseudo classes

Structural pseudo-classes