Advanced Content Development for the WWW


5 Νοε 2013 (πριν από 4 χρόνια και 6 μήνες)

159 εμφανίσεις



Session #2

About ATW Projects…

Typical practices a content person uses

Know available technologies and
know the issues likely to affect your
organization and its information

Analyze an organization’s overall
content strategy; implement this
strategy via content modeling

Help those around you to better
develop and manage content

Project 1: Web Technology &
Issue Profiles

For the first project, we’ll be building
an online web
based magazine, of
sorts, for which each of you will
contribute content.

Your job will be to develop a 1000
wd. article on a web content
technology or issue that impacts
the world of Technical

Project 1, Continued

If you are taking
this course for

If you are taking
this course for

You should do a technology
based issue article:

“how does PHP support
dynamic content?”

You should do a research
based issue article:

“personalizing content: is it
worth the threat to privacy?”

Project 1, continued

In addition to learning about the
topic of each article, we’ll learn
other valuable things:

We’ll explore the complexities of
managing multiple content
providers, including managing
format & content consistency

You’ll learn to use Cascading Style
Sheets to assist in this process

Project 1, Requirements

1000 words is the length we are shooting
for; articles should be prepared for an
audience of your peers

You must submit a copyright free image
to go along with your copy;

You must submit in HTML, adhering to a
template and linked style sheet that we
will build, together, over the next few
class sessions

Review version due 1/26; Final version 2/2

Web Space?

You have access to an account provided by

AFS Space

To put stuff there, FTP to

store files in the directory called
Or, in a networked lab, map
the drive and navigate to your
public_html directory

Did that last bit of jargon confuse you?

The ATW Way…think, do, reflect

Today we will think more about the nature of web
content and the complexities of working with
web content by doing some information design.

Because we think through our tools, we’ll discuss
Cascading Style Sheets. But we do this not
merely to learn CSS…we are also looking to
discover some of the fundamental issues related
to information design.

On Cascading Style Sheets

A brief profile of CSS

Cascading style sheets is a specification
created by the W3C which allows web
developers to create style documents to
control textual features and the
positioning of objects on the page.

CSS lets you separate content from

What is CSS?

Multiple styles can be defined and used in
individual HTML documents and across
multiple HTML documents (fonts,
spacing/placement, colors)

Browser follows an order of interpretation
(aka, a cascade) of the style definitions

3 W3C CSS standards (CSS1 and CSS2 are
current; CSS3 in development)

Styles in HTML

In older versions of html, style attributes that
describe how text or other elements should
display are wrapped around text, thus:

<font face=“sans
serif” size=“

Problems arise when you need to change
styles frequently!

Some problems with integrated

each instance of a style must be hand
coded, meaning that any document with
lots of style changes becomes labor

mantaining a consistent look and feel
across pages is tough on a large site

making style changes to multiple pages
is difficult and very time consuming

Styles in CSS

In CSS, style attributes belong to the HTML
element. They can be defined once

either in
the head of a document or in a separate style
sheet document

and referenced whenever

So if this represents my standard body text style:

<font face=“sans
serif” size=“

I can simply define the <P> tag to display all text
as sans
serif, in the point size I want…

Styles in CSS, 2

I can simply define the <P> tag to display
all text as sans
serif, in the point size I



family: Helvetica, Sans

font size: 9pt;


The Logic of Styles in CSS

CSS allows you to attach display information to most HTML
elements. A CSS
is the basic unit of a style sheet.

A rule first names an HTML element (like a body text
paragraph <p>) and then describes how that element
should display.

Thus, a rule contains a

and a

Types of style sheets

CSS defines 3 essential style sheets




Inline style

Inline uses the style= attribute

<p style="font
family: Arial,sans
serif; font
size: 28pt;">

Here’s a paragraph with 28pt font size.


Controls style on an element basis

Embedded style 1

Embedded uses <style></style> tags in the
head of a document

Controls style on a page basis

Use <!

> to protect browsers that don’t
recognize <style> tags

Embedded style 2




h2 { font
type: Arial,sans serif; font
size: 40pt; font
weight: bold }




Linked style

Linked style uses same syntax as embedded
style but is in a separate .css file that you
link to from the HTML file requesting the

Controls style more globally, spanning
documents or an entire Web site

Linked style 2

HTML file using the linked style uses <link>
tag within <head> tag to link to it


<link rel="stylesheet" type="text/css"


Linked style 3

Here’s the style definition in the

linked_style.css file

h1 { font
family: Arial,sans
serif; font
48pt; font
weight: bold }

Style hierarchy

Style sheets work together in a cascading

Inline trumps embedded and linked

Embedded trumps linked

So use linked for global, generic types of things
and keep to a minimum

Use other 2 types for fine tuning

CSS Syntax

CSS rules have the following structure:

selector {property1 : value; property2 : value}

P {font
family : sans
serif; font size : 9}

With this rule applied, everything enclosed by a
<p></p> tag will display in sans
serif, 9pt.

Did he

CSS will make your old HTML look

CSS references objects

in most cases,
chunks of text or images enclosed by

so you must define as an object
any text that you want to reference in a
style sheet.

This means:

You have to close those <p> tags to
form the boundaries of the object being

CSS will make your old HTML look
uhhhhgly, 2

It also means…

You define object Classes, ID’s and learn their properties
and value ranges

You learn to use wildcard tags like <div> and <span>
to define sub
sections of text within the body of a

You have to get good at designing documents…thinking
ahead what will help both content developers and

CSS Classes…naming objects

In CSS, a class refers to a particular category of a more
general tag.

Let’ say you wanted odd and even table cells to be
different colors for easier scanning…

TD {font
face : sans
serif; font
size : 12pt}

.even {bgcolor : #FFFFFF}

.odd {bgcolor : #CCCCCC}

CSS Classes…cont.

In your HTML code for the table, you simply
reference the class to invoke the style:

<td class=“even”>display this text with a white

<td class=“odd”>and this text with a grey

TD {font
face : sans
serif; font
size : 12pt}

.even {background
color : #FFFFFF}

.odd {background
color : #CCCCCC}

Getting more specific…ID’s

You can set ID’s for specific kinds of objects too by giving
them a unique ID name and set of display rules.

Let’s say, for example, we want a table row that serves as a
column header… it could be different than our odd or
even classes of rows and even different from our default
row look.

An ID rule

Here, I have added a new ID to our TR rules

Now, I can specify a row as a header:

<tr id=“header”>Red, sans
serif, 12pt type on a white
background, por favor</tr>

TR {font
face : sans
serif; font
size : 12pt}

.even {background
color : #FFFFFF}

.odd {background
color : #CCCCCC}

#header {color : red}

<DIV> & <SPAN> are your

<div> and <span> tags allow you to define exceptions to
the general rules of your body text…and they are
helpful tools for document designers and web

<div> is usually used to designate styles for block
elements that should stand apart from the body
text…like callout quotes. Everything inside a <div>
tag takes on the <div> attributes…and you can
specify classes and ids for <div> too!

More on <SPAN>

The <span> tag is usually used to change the display
attributes of a short run of text or objects within a
level element (such as a paragraph or table

I might use <span>, for example, to define a look for
code examples (like the one below) that is different
than the body text…

<span class=“example”>TR {font
face : sans
serif; font size :

<DIV> and dynamic html

It is common to use <div> tags to structure content for
dynamic display.

For example, you can have two chunks of information
that occupy the space allocated for a section called
<DIV class=“introduction”>, and switch these out
depending on some user
initiated event (such as
loading the page with IE vs. Netscape browser).

Seeing a document as a collection
of objects…

All of these tags, attributes, rules, selectors,
declarations…what do they mean for
information designers?

They are all tools you use well ONLY if you can
start to see a document as a collection of
objects…so, let’s practice.

Workshop Time!

Workshop Time!

Take a look at a short but familiar
genre…choose one you can see a few
examples for easily such as a Job Ad.

Break it up into the objects that would have to
be defined in a style sheet…don’t worry
about the right syntax too much at this
point…concentrate on defining objects,
attributes, etc…AND

Next Time…

Editorial board for our ‘zine

Read Carliner (pdf); Mazur (in
optional text Albers & Mazur)

Send me an e
mail with your p1
topic idea! (in the form of a
question please, Alex)