CTN 161 Web Production 2

Check the videos for positioning and layout:

• Float
• Positioning

___________________________________________

Here is the example from Friday night’s class

• Exercise 6
• Exercise 7

Lecture ( pdf | ppt )

Prepare to be addicted

Listamatic

1. Create a class with your name. Now design this class so that it visually represents you.

2. Create a document with a paragraph of text and several links (3). Now change the CSS to control the link styles. Try altering hover, so that the link changes in some way when you mouse over it.

 As a web designer you will frequently find yourself taking inspiration from print pieces. In some cases a client or employer may give you an existing print piece and ask you to recreate it for the web. In other cases you may find inspiration in the print designs you see in your everyday life, such as the newspaper, magazine, brochures or books. In this assignment we will be creating a 3 page web site inspired by a print piece.

Assignment 2 (pdf) | Assignment 2 Presentation with example (pdf)

Exercise 5

• CSSBasics
  http://www.cssbasics.com
• HTML Dog CSS Properties
  http://htmldog.com/reference/cssproperties/
• CSS Box Model Demo
  http://www.redmelon.net/tstme/box_model/
• Box Model
  http://css-discuss.incutio.com/?page=BoxModel
• Box Model Explained
  http://www.tanfa.co.uk/css/articles/css-box-model.asp

When you are writing a font-family that has space between the words, it must be in quotes.  The type of quotes you use will depend on how you are applying the style.

In-Line

<p style=”font-family:’Times New  Roman’;”>

Note: When we do this in an in-line style, we use a single quote.

Internal or External

h2{font-family:”Times New  Roman”}

Note: When we do this in an internal or external style, we use a double quote.

Need a little font humor?  Check out Font Conference from College Humor.

Exercise 4

Text from exercise:

Lorem ipsum dolor sit amet
By Fido Doe

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mi sem, adipiscing a pharetra nec, consectetur non velit. Pellentesque lorem lacus, venenatis ut auctor a, scelerisque pulvinar ipsum. This line is really important. Morbi ultrices feugiat condimentum. Vivamus ac dolor urna.

Sunshine, Puppies and CSS… ( pdf )

CSS Properties
http://www.htmldog.com/reference/cssproperties/

Simple CSS: Removing the Underline from Links
http://www.wpdfd.com/issues/85/simple_css_removing_the_underline_from_links/

CSS Typeset
http://csstypeset.com/

CSS Elements
http://www.w3schools.com/css/css_examples.asp

CSS Zen Garden
http://www.csszengarden.com/