CA 272 - Professional Web Site Development

Class 24 - Print Styles, DW Templates & Library Items

External Style Sheets

Use external style sheets for Web sites Allows use of same styles for all pages on site Makes it easy to change appearance and layout of

elements sitewide Can have multiple external style sheets

Creating an external style sheet: File > New > CSS Export internal styles Create new style rule in external style sheet Or, just copy and paste into new style sheet

External Style Sheets

Linking external style sheets: If you export styles or create new styles using

external style sheet, DW creates link for you Link button in CSS Styles panel

Options: File/URL: location of style sheet (good to put in

‘styles’ folder) Add as Link / Import - usually choose link Media type

Media Types

Can create different style sheets for different media: All (default) Screen (computer monitor display) Print Handheld - becoming obsolete?

Usually select “all” or create screen and print styles

Print Style Sheets

Must think in terms of print output Plan for black & white Inch measurements for margins, padding Fonts in point sizes, serif fonts for readability

Layout issues: One-column layout is easiest to read in print Unfloat floats Use static positioning for all elements

Background images do NOT display (usually) Set background color to white

Print Style Sheets (continued)

Elements not needed in print version: Navigation Links Forms Etc.

Print-specific styles: Selector: @page [:first | :left | :right ] { … } (e.g., margins)

(support may be spotty) Properties: page-break-before/page-break-after:

[auto | always | avoid | left | right ] page-break-inside: avoid; (tries to avoid page breaks inside

an element)

Print Styles

Widows & Orphans Widows - lines continued from previous page Orphans - lines stranded at bottom of page Example:

p { widows: 4; } - no less than four lines at top of page if paragraphs continues over page break (or pulls whole paragraph to that page)

p { orphans: 2; } - no more than two lines at bottom of page for continued paragraph

Repeated headers/footer Position: fixed

Exercise: Create a Print Stylesheet

Open your float layout Copy CSS to external style sheet Save as ‘screen.css’ Save copy of stylesheet as ‘print.css’ Create link in html doc to print.css

Choose media type ‘all’ for now so we can see styles

Edit print.css …

Exercise: Print Style Sheet

Make #main_nav { display: none; } Remove float from #ltCol and #rtCol (plus

#mainContent and #sidebar) Remove background images Give margins to body, remove text centering Make fonts point sizes, serif font on body text Consider source order of code (main content

first) Add widow/orphan control

Exercise: Print Style Sheet

Preview your page in browser What else could you do to improve? Change media type to ‘print’ Add link to screen.css as ‘screen’ Preview in browser Print out (CS22 printer)

Dreamweaver Templates, Library Items & Snippets

DW templates let you create preformatted page designs as basis for new pages on your site: Repeated elements (non-editable) - such as navigation,

masthead, footer, etc. Editable regions - where content will be entered

Library Items are content assets (like copyright statement or contact info) that can be added to a page (but need not be on every page)

Templates and Library Items can be updated and changes will propagate throughout site

Snippets are chunks of code that can be inserted or wrapped around existing code (do not update)

DW Templates Create html page with all repeating elements of layout Insert placeholder content for editable regions Select content and choose Insert > Template Objects >

Editable Region; give it a name Save as DW template DW will save inside templates folder Create new pages based on template from File > New >

Templates tab Edit content inside editable regions, save as new html

file When you update template, pages based on template

will update

DW Templates

Can also add: Repeating regions (e.g., product description) Optional regions (e.g., sidebar) Editable attribute (e.g., body ID)

Library Items

Select content in HTML document and drag it to Assets > Library Items (category)

Give it a name DW inserts a reference to the item (colored

yellow to indicate) Content is pulled from library item (.lbi) when

displaying page

Snippets

Select some code in HTML document Go to Snippets tab in Files panel Click New Snippet button DW will paste code in ‘Insert Before’ pane Give Snippet a name Give description (optional) Choose whether to wrap or insert as block If wrap, insert code for before and after Click OK Snippets are like shortcuts for pasting code - do NOT

update if modified later

Templates Exercise

Make your float layout a templateInsert > Template Objects > Make Template

DW will create templates folder and save new template

Insert editable regions for main text and sidebar Add class=“” to each nav item; insert editable

attributes Create new page from template Edit placeholder text Edit class attribute on nav item

Library Item Exercise

Modify template to include copyright statement in text, “Copyright © 2006”

Select text and drag to Library Items section of Assets panel

See change in template Open library item and change date of

copyright to 2007; save See changes

Intro to Microformats

Common patterns of content that do not have HTML tags: Contact info Calendar/event info Ratings & reviews Relationships between people Resumes Content labeling (e.g., social bookmarking,

tagging)

Microformats

Humans can recognize contact info, events, ratings, etc.

But, computers cannot Microformats provide standard syntax for

marking up this data using existing HTML tags

Mainly use divs, spans for elements, with classes

hCard

Based on exising vCard format - standard for exchanging contact info

hCard data can be harvested from Web page and converted to vCard data for import into Outlook and other address books

Online tools for creating hCards Also microformats DW extension that helps

you create hCard content

hCalendar

hCalendar format is based on iCalendar format - standard for calendar data

hCalendar can be converted into iCalendar format which can be imported into Outlook and other calendar apps

Online tools and DW extension for hCalendar

Tag-based Microformats

rel attribute of <a> specifies relationship of linked doc to current page

rev attribute specifies relationship of current page to linked doc

rel=“license” - Creative Commons licensing rel=“tag” - link to ‘tag-space’ for tagging content rel=“nofollow” - avoid giving PageRank VoteLinks: rev=“vote-for”, “vote-against”, “vote-

abstain”

Relationship Microformats

XFN (XHMTL Friends Network) rel=

Friend Acquaintance Contact Met Co-worker Colleague Co-resident Neighbor

Child Parent Sibling Spouse Kin Muse Crush Date Sweetheart Me

‘Operator’ Extension

Firefox extension for leveraging microformats:https://addons.mozilla.org/en-US/firefox/addon/4106

Lets you view and export microformat data on page

Can map addresses in Google maps Can export vCards (from hCard data) Etc.

Microformats Exercise

Open hCard creator: http://microformats.org/code/hcard/creator

Type in your info (or dummy info) Copy code Paste into new HTML document Examine code How could we format this with CSS? You need to include microformat in final

project

Web Developer Extension

Dowload Firefox extension at http://chrispederick.com/work/web-developer/features/

Can switch style sheets, disable, edit styles and see effect in browser

Disable images, hide background images Edit HTML, outline divs, display page info Resize, magnify, view source, validate Many other options!

Homework

Download the Web developer extension for Firefox: http://chrispederick.com/work/web-developer/

Download Operator extension for Firefox:https://addons.mozilla.org/en-US/firefox/addon/4106

Create a print style sheet for your float layout Go to ‘Dive Into Accessibility’

http://diveintoaccessibility.org/table_of_contents.html and read ‘Week 1’, plus Day 10, 11, 12, 14, and 26 (skip ‘How to Do It’ for day 26) - ignore references to Moveable Type