Lesson 3Feb 3, 2010

Headers (headlines) Text Links (to pages, email addresses,

docs) Images Bullet points Boxes for content Tables (for formatting, or tabular

data)

2

Use “Format” in PI to change headers• <h1> through <h6>• <h2> suited for headlines

within middle column• <h3> suited to headlines

in right column <h2> has 2 variations:

• class=“green”• class=“grand”

3

Most will be cut-and-pasted from existing sources

CSS will convert to standardized font style, size, color for paragraphs• <p>paragraph</p>• Provides consistent “look and feel” to text across

website Use “Format” box in Property Inspector to

convert text to Paragraph Enter = paragraph break

• </p><p> Shift + Enter = line break

• <br />

4

For simple links: select text, use the Link box in the PI• Absolute (outside sites): cut-and-paste URL• Relative (your site): browse or use target icon

Email links: select text, use the mail icon

Document links: select text, browse or use target icon

Packs lots of content in a small space Gives the end-user the option of

clicking for more information, or continuing with the overview

Two good examples:• NASA Astronomy Picture of the Day• Wikipedia

The more sites you link to, and the more sites link to you, the more “Google-juice” you have

6

Images take longer to load, so use judiciously• Insert Image on the objects panel• Select Image (browse to it)

Property inspector will change to allow image manipulation

Thumbnail will appear with image size and dimensions

You’ll be prompted to add alt text• ALWAYS add alt, or descriptive, text• Text to speech browsers, or folks who have image

loading turned off need it 7

Best done in outside image editor• Photoshop is industry standard

Powerful tool, fun to work with Expensive ($125) Steep learning curve

• Adobe Elements Basic, cheaper version of PShop ($79)

• Free editors: GIMP, Pixlr, Picasa• You have some image software with your computer

(MS PhotoEditor, Kodak Imaging for Windows)• Digital cameras come with basic imaging software

8

If you have no image editing software:

Adjust size using Width/Height boxes in PI or Click-and-drag sizing boxes• Numbers in Width and Height boxes will

bold to indicate a changed value • Use “Reset size” button if you don’t like

what you did

9

In PI:• Image link – put URL in “Link” box• Change alt text in “Alt” box• V-Space, H-space will add vertical and

horizontal spacing in pixels• Border and alignment won’t work

Trumped by CSS• If you want to float it right – chose “right” in

class• You can crop, lighten, darken, sharpen here

too Again, better done with an image editor

10

11

JPEG - • supports lots of colors, longer to

download, best for complex imagery• good for photos

GIF - • 256 colors (any 256, not predetermined)• Easier to download, best for large areas of

flat color• Good for cartoon-ish images

PNG – • not supported by all browsers• Good for simpler graphics (NOT photos)• Better than GIF, more than 256 colors

Keep image files small• Smallest physical size• Lowest usable quality (# of colors in gifs,

quality # in jpgs) Use alt tags

• Not necessary for small details (borders, bullets, etc)

Reuse images (only need one logo for all pages)

12

Use the List icon in the PI Bullet points are pre-formatted with

custom images for the bullets Each column (left, main, right for a 3

column layout) has a distinct bullet point style

13

Left columnMain column Right

column

List elements with class=“video”

List elements with class=“audio”

14

To add visual emphasis Select text Add class of “box”

Used for formatting content Before CSS, the primary way to lay

out a page• Building shelves for images and text

Now: build boxes within a column for content

Also used for Tabular data (e.g. precipitation over time) or columns of information (e.g. name, phone #, email address)

Click Table icon in Insert panel

# of rows, # of columns

Width in pixels or % Border thickness Padding (within cell) Spacing (between

cells)

17