html & css: a printer's primer

73
HTML & CSS: A Printer’s Primer Michael M. Grant, PhD for Mrs. Nancy Leininger’s GC 310 Michael M. Grant 2010

Upload: michael-m-grant

Post on 20-Aug-2015

1.143 views

Category:

Education


1 download

TRANSCRIPT

Page 1: HTML & CSS: A Printer's Primer

HTML & CSS: A Printer’s PrimerMichael M. Grant, PhDfor Mrs. Nancy Leininger’s GC 310

Michael M. Grant 2010

Page 2: HTML & CSS: A Printer's Primer

Michael M.

Grant

Page 3: HTML & CSS: A Printer's Primer

http://idt.memphis.edu

Page 4: HTML & CSS: A Printer's Primer

http://viral-notebook.com

Page 5: HTML & CSS: A Printer's Primer

Go Tigers!!

Page 6: HTML & CSS: A Printer's Primer
Page 7: HTML & CSS: A Printer's Primer

GC 215GC 310GC 440

Page 8: HTML & CSS: A Printer's Primer

What’s on tap …

What’s happening on the Web today

HTML

CSS

Sites that are implementing templates

Content management

What’s this all mean for printing technologies

Image from http://www.flickr.com/photos/vek/4075264063/sizes/l/

Page 9: HTML & CSS: A Printer's Primer

WHAT’S HAPPENING ON THE WEB?

Image from http://www.flickr.com/photos/jurvetson/63009926/sizes/m/

Page 10: HTML & CSS: A Printer's Primer

Top 5 Visited Sites on the Planet

INTERNET STATISTICS

by Alexa rankings

Page 11: HTML & CSS: A Printer's Primer

Total Number of Hostnames for Websites

http://news.netcraft.com/archives/2010/03/17/march_2010_web_server_survey.html

INTERNET STATISTICS

Page 12: HTML & CSS: A Printer's Primer

World Population

The World’s Population

http://www.worldmapper.org/display.php?selected=336#

Page 13: HTML & CSS: A Printer's Primer

Internet Users 2007

http://www.worldmapper.org/display.php?selected=336#

Page 14: HTML & CSS: A Printer's Primer
Page 15: HTML & CSS: A Printer's Primer
Page 16: HTML & CSS: A Printer's Primer

HTML, CIRCA 1994

Image from http://www.flickr.com/photos/daniello/422213306/

Page 17: HTML & CSS: A Printer's Primer
Page 18: HTML & CSS: A Printer's Primer
Page 19: HTML & CSS: A Printer's Primer
Page 20: HTML & CSS: A Printer's Primer
Page 21: HTML & CSS: A Printer's Primer
Page 22: HTML & CSS: A Printer's Primer
Page 23: HTML & CSS: A Printer's Primer
Page 24: HTML & CSS: A Printer's Primer

CASCADING STYLESHEETS Offers ways to improve productivity, experimentation, and reuse.

Page 25: HTML & CSS: A Printer's Primer

CSS ALLOWS FOR CONTROL OF FORMATTING & PAGE STRUCTURE.

You get 2 for the price of 1!

Page 26: HTML & CSS: A Printer's Primer

USING CSS TO CONTROL FORMATTING IS SIMILAR TO STYLES IN WORD & INDESIGN.

Let’s start with the easy one …

Page 27: HTML & CSS: A Printer's Primer
Page 28: HTML & CSS: A Printer's Primer
Page 29: HTML & CSS: A Printer's Primer
Page 30: HTML & CSS: A Printer's Primer
Page 31: HTML & CSS: A Printer's Primer
Page 32: HTML & CSS: A Printer's Primer
Page 33: HTML & CSS: A Printer's Primer

CSS ALSO ALLOWS YOU TO DEFINE CHARACTERISTICS OF SPECIFIC ELEMENTS ON YOUR WEB PAGE.

This is specific to the Web …

Page 34: HTML & CSS: A Printer's Primer
Page 35: HTML & CSS: A Printer's Primer
Page 36: HTML & CSS: A Printer's Primer
Page 37: HTML & CSS: A Printer's Primer
Page 38: HTML & CSS: A Printer's Primer

WHO’S GOT QUESTIONS SO FAR?

Image from http://www.flickr.com/photos/crystaljingsr/3914729343/

Page 39: HTML & CSS: A Printer's Primer

CSS CAN ALSO CONTROL THE STRUCTURE OF A PAGE.

And now the other way to use CSS …

Image from http://www.flickr.com/photos/plutor/2882819776/

Page 40: HTML & CSS: A Printer's Primer
Page 41: HTML & CSS: A Printer's Primer
Page 42: HTML & CSS: A Printer's Primer

HTML

Page 43: HTML & CSS: A Printer's Primer

CSS

Page 44: HTML & CSS: A Printer's Primer

CSS Zen Garden

Page 45: HTML & CSS: A Printer's Primer

CSS Zen

Page 46: HTML & CSS: A Printer's Primer

CSS Zen

Page 47: HTML & CSS: A Printer's Primer

CSS Zen

Page 48: HTML & CSS: A Printer's Primer

CSS Zen

Page 49: HTML & CSS: A Printer's Primer

CSS Zen

Page 50: HTML & CSS: A Printer's Primer

CSS Zen

Page 51: HTML & CSS: A Printer's Primer

CSS Zen

Page 52: HTML & CSS: A Printer's Primer

3 WAYS TO IMPLEMENT CSS ON YOUR WEBSITE

External CSS

Embedded/Internal CSS

Inline styles

Page 53: HTML & CSS: A Printer's Primer

A NUMBER OF SITES WILL IMPLEMENT A TEMPLATE FOR YOU.

Just add content.

Page 54: HTML & CSS: A Printer's Primer
Page 55: HTML & CSS: A Printer's Primer
Page 56: HTML & CSS: A Printer's Primer
Page 57: HTML & CSS: A Printer's Primer
Page 58: HTML & CSS: A Printer's Primer
Page 59: HTML & CSS: A Printer's Primer

NOW WHO’S GOT QUESTIONS?

Image from http://www.flickr.com/photos/crystaljingsr/3914729343/

Page 60: HTML & CSS: A Printer's Primer

HELLO, CONTENT MANAGEMENT.

Maintaining a site with lots of folks contributing is difficult. Homegrown sites work well for 1 or 2 people

Page 61: HTML & CSS: A Printer's Primer
Page 62: HTML & CSS: A Printer's Primer

CMSContent Creators

IT Professionals& Web Developers

Adapted from http://www.patrickpetersen.nl/images/cmspatrickpetersen.jpg

Page 63: HTML & CSS: A Printer's Primer

CMS Examples

Luminis

Page 64: HTML & CSS: A Printer's Primer

Wordpress

Page 65: HTML & CSS: A Printer's Primer

Wordpress

Page 66: HTML & CSS: A Printer's Primer

Wordpress

Page 67: HTML & CSS: A Printer's Primer

MOVING FORWARD WITH THE WEB FOR PRINTING

Is print dead?

Page 68: HTML & CSS: A Printer's Primer
Page 69: HTML & CSS: A Printer's Primer

Multiple Mediums ≠ Multimedia

Print Web Mobile

Page 70: HTML & CSS: A Printer's Primer

BRANDINGREUSE V. REPURPOSE

What does this mean for printing technologies?

Print Web Mobile

Page 71: HTML & CSS: A Printer's Primer

WHAT ABOUT NOW?

Image from http://www.flickr.com/photos/crystaljingsr/3914729343/

Page 72: HTML & CSS: A Printer's Primer

Michael M. Grant, PhD

[email protected]

http://viral-notebook.com