1. CA 272 - Professional Web Site Development Class 24 - Print Styles, DW Templates & Library Items

2. 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

3. 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

4. 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

5. 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

6. 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)

7. 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

8. 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 …

9. 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

10. 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)

11. 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)

12. 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

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

14. 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

15. 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

16. Templates Exercise Make your float layout a template Insert > 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

17. 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

18. 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)

19. 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

20. 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

21. 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

22. Tag-based Microformats rel attribute of 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”

23. 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

24. ‘Operator’ Extension Firefox extension for leveraging microformats: https://addons.mozilla.org/en-US/firefox/addon/4106 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.

25. Microformats Exercise Open hCard creator: http://microformats.org/code/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

26. Web Developer Extension Dowload Firefox extension at http://chrispederick.com/work/web-developer/features/ 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!

27. Homework Download the Web developer extension for Firefox: http://chrispederick.com/work/web-developer/ http://chrispederick.com/work/web-developer/ Download Operator extension for Firefox: https://addons.mozilla.org/en-US/firefox/addon/4106 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 http://diveintoaccessibility.org/table_of_contents.html