coms 359: interactive mediagunkelweb.com/lecture_slides/359class14.pdf · review • css for color...

COMS 359: Interactive Media

Agenda

• Prototype (Ex #4)

• Review

• Text & HTML5 Layout

• Preview

Review

• CSS for lists

– list-style-type

– Image bullet point

• list-style-image:url(“image.jpg”)

<ul>

none

disc (default)

circle

square

<ol>

1 2 3 decimal (default)

01 02 03 decimal-leading-zero

a b c lower-alpha

A B C upper-alpha

i ii iii lower-roman

I II III upper-roman

Review

• CSS for color / 4 Methods1. Hexidecimal – #66cdaa

2. RGB values – rgb(102,205,170)

3. Color names – Aquamarine

4. HSV – Hue, Saturation, Brightness

Range = 00 to ff

Range = 0 to 255

Range = 147 options

Hue = 0 to 360°

S&B = 0 to 100%

Review – CSS for Images

• Image Size

– width & height

• Box properties

– border-style | border-width | border-color

– border-radius:15px

– margin:10px | padding:4px

• Alignment

– float:left / float:right

– Center: display:block; margin:auto

http://gunkelweb.com/coms359/exercise/wlogo.png

Exercise #5

background-repeat: repeat background-repeat: no-repeat

background-repeat: repeat-y background-repeat: repeat-x

background-attachment: scroll

background-attachment: fixed

background-position: 220px 200px

background-position: bottom bottom

background-position: 10% 55%

Background Images

• CSS3 Gradient

– Apply a color gradient to any

CSS box background

– New feature = limited

browser support

– Syntax

Text

• Typeface Terminology

serif sans-serif monospace

im im im

Text

• Typeface Terminology

weight style stretch

light

medium

bold

Normal

Italic

Oblique

Condensed

Regular

E x t e n d e d

Text

• Three Methods for Typeface

Web-safe Font

- Good support

- Limited options

- OS dependent

Download Font

- More options

- Not directly

supported

- © / open source

Images

- Many options

- Image based

- No semantic

data (ALT)

Arial

Times RomanCourier

Bauhaus

Script

Colonna

Text

• Web-Safe Font

– font-family

serif

GeorgiaTimes Roman

sans-serif

Arial

Helvetica

Verdana

monospace

Courier

Courier New

cursive

Comic Sans MSMonotype Corsiva

fantasy

Impact

Haettenschweiler

Text

• font-family

– Basic

– Font-stack

Exercise #1

http://gunkelweb.com/coms359/exercise/css_color.html

http://gunkelweb.com/coms359/exercise/css_color.html

Text• text-align

– left | center | right | justify

– p {text-align: center}

• font-style

– normal | italic | oblique

– p {font-style: italic}

• font-weight

– normal | bold

– h1 {font-weight: bold}

• font-variant

– normal | small-caps

Text

• font-size

– Absolute size = points (pt), pixels (px), cm, ems

• p {font-size: 30pt}

• p {font-size: 30ems}

• p {font-size: 18px}

– Relative sizes = % Percentage

• default font-size is 16px

• 150% is 1½ times larger than the default

• 50% is ½ smaller than the default

• p {font-size: 150%}

Exercise #2

Text

• font-stretch

– normal | condensed | expanded

– h1 {font-stretch: condensed}

• text-transform

– uppercase | lowercase | capitalize

– h1 {text-transform:uppercase}

• text-decoration

– None | underline | overline | line-through | blink

– h2 {text-decoration:underline}

Text

• text-indent

– px | ems | cm

• text-shadow– horizontal offset, vertical offset, blur value, color

– h1 {text-shadow: 2px 2px 0px #333333}

• line-height

– px | ems | cm

• letter-spacing, word-spacing

– px | ems | cm

Exercise #3

Text

• :first-letter & :first-line

– Specify different values for the first letter and first line

of text inside an element

– Example

Exercise #4

Text

• @font-face

– Expanded font options

– Properties

• font-family = name of the font

• src = the URL or path to the font file

• format = specifies the format of the font file

– Sources

• http://www.fontsquirrel.com (open access)

• http://fontex.org (open access)

• http://typekit.com (proprietary)

http://www.fontsquirrel.com/

http://fontex.org/

http://typekit.com/

1. Download and install font package

2. Write CSS to use this font

Text

http://www.google.com/fonts

Google Fonts- Alternative approach

- Link to a Google stylesheet

- Free to use; easy to code

http://www.google.com/fonts

Modify the href of the first <link>

element to a new value – fontstyle2.css

Exercise #5

Copy and paste a second <link> element

from the Google Fonts website.

Exercise #5

Write the stylesheet; copy and paste the

css code from the Google Fonts website

Exercise #5

Text

• Selecting Font

– Readability

– Character of the content

– Functionality

Hypertext

• Pseudo classes for styling hypertext

– :link

– :visited

– :active

– :hover

Exercise #6

HTML5 Layout

• Page Layout with CSS

– Use <div> tags to identify

different parts of the html

document

– Apply style to these <div>

elements in the stylesheet by

creating different classes

– Position the <div> elements

by using positioning

HTML5 Layout

• New Elements

– <header>

– <article>

– <nav>

– <footer>

Purpose/Benefit• Structure the html document

without having to use multiple

<div> tags

• Semantic data useful for web 2.0

applications like data mashups

and content aggregators

• <div> is content neutral and

generic; the new HTML 5 tags

designate not only structural page

elements but their meaning within

the page content.

Preview

• Meta-Information & Search Engine Optimization

– Duckett - ch. 8: Extra Markup (pp. 176-198)

– Duckett - ch. 19: Practical Information (pp. 476-492)

– Miller - ch. 8: Search Engine Optimization (pp. 200-217)

– Miller - ch. 10: Analysis (pp. 248-255)

– Google - Search Engine Optimization Starter Guide

coms 359: interactive mediagunkelweb.com/lecture_slides/359class14.pdf · review • css for color...

Documents