1. 8/13/2003 Designing Without Tables Using CSS by Reshma Kumar and Marina Naito

2. 8/13/2003 2 Agenda  CSS Overview  Pros & Cons of a CSS-Based Site  Designing Table-Free Web Sites

3. 8/13/2003 3 CSS Overview  Cascading Style Sheets (CSS) were designed to deal with issues that HTML cannot handle. CSS is a powerful, flexible way to specify HTML formatting.  It lets you separate the style and layout of your HTML files from their content, allowing you to control the layout, e.g. fonts, colors, leading, margins, typefaces, and other aspects of style, of a Web document without compromising its structure.

4. 8/13/2003 4 Pros & Cons of a CSS-Based Site  Pros  Separation of content from presentation  Because CSS files are typically stored separate from the web pages themselves, a consistent look and feel can be applied throughout the site from a common source.  Increased Stylistic Control  Allows for re-usability and portability  One site's color or layout scheme can be applied to others simply by copying the CSS file.  Centralized Design Information  Semantic Content Markup  Meaning vs. syntax  Accessibility  Multiple web-enabled devices (PDAs, cell phones, and TV-based browsers) can draw on the same source pages, but be displayed in completely different styles. Same for a printer-friendly page. One page serves all purposes!

5. 8/13/2003 5 Pros & Cons of a CSS-Based Site  Pros  Better User Experience  CSS layouts load faster, because there is less code in them, and display more quickly on screen because there are no complex tables to sort through. A CSS layout can display important parts of the page before the full page loads.  CSS Reduces Costs  Smaller file sizes means savings in bandwidth  Time savings in coding  Standards Compliance  Cons  Browser limitations  Netscape Navigator 4.x and Internet Explorer 4.x and earlier

6. 8/13/2003 6 Building A CSS-Based Site  Site- and page-level issues  understanding the workings of CSS positioning  understanding the development of a number of basic page layouts

7. 8/13/2003 7 Table-Less Layouts  Using CSS Positioning (CSS-P) to Layout Web Pages  When building a site using tables, you have to think in a "tabular" format.  think in terms of cells and rows and columns. And your Web pages will reflect that. When you move to a CSS-P design, you'll start thinking of your pages in terms of the content.

8. 8/13/2003 8 Table-Less Layouts  Rethinking How You Build a Page  Header, left nav, content area, right nav, footer  Rather than putting these elements in a table, use the tag to define the different portions of the content, and then use CSS-P to place the content elements on the page. 

9. 8/13/2003 9 Table-Less Layouts  Using CSS, define the position for the id'ed divs. Store the position information in a style call like this:  #content { }

10. 8/13/2003 10 Table-Less Layouts  Content within a div tag will take up as much space as it can, namely 100% of the width of the current location, or the page. So, to affect the location of a section without forcing it to a fixed width, change the padding or the margin elements.  Margin & padding applies to all elements  Examples: (see illustrations)

11. 8/13/2003 11 Table-Less Layouts  Box Model: Element Content At the center of the CSS box model is the content itself. Don’t think of this “content” as being the same as words or pictures that comprise the content of a news story or a set of links. The content is anything contained within the area of the box. Padding (inside box) Margin (outside box) Border

12. 8/13/2003 12 Table-Less Layouts  3 Column Layout: Left Nav Header Footer ContentRight Nav

13. 8/13/2003 13 Table-Less Layouts  : Left Nav Header Footer ContentRight Nav

14. 8/13/2003 14 Table-Less Layouts  id: Left Nav Header Footer ContentRight Nav <div id= “leftnavigation”> <div id= “rightnavigation”>

15. 8/13/2003 15 Table-Less Layouts  For this layout, set the two navigation columns to fixed widths and then set their position absolute, so that they wouldn't be impacted by where they are found in the HTML.  #leftnavigation { position: absolute; left: 0; width: 150px; margin-left: 10px; margin-top: 20px; color: #000000; padding : 3px; }  #rightnavigation { position: absolute; left: 80%; top: 20px; width: 140px; padding-left: 10px; z-index: 3; color: #000000; padding: 3px; }

16. 8/13/2003 16 Table-Less Layouts  Then for the content row, set the margins to be somewhat relative to the outer columns.  #content { top: 0px; margin: 0px 25% 0 165px; padding: 3px; color: #000000; }  (order: top margin, right margin, bottom margin and left margin)  While the page won't look wonderful in non- CSS-P browsers, it is possible to define how the page will look without any table tags.

17. 8/13/2003 17 Table-Less Layouts

18. 8/13/2003 18 Converting An Existing Page  Objective: Take an HTML heavy design and convert it to HTML + CSS  Step 1: Figure out page structure  Take a look at existing page in browser.  Add a temp stylesheet with red border for all table and td elements.

19. 8/13/2003 19 Converting An Existing Page  Step 2: Strip Down HTML Markup  Remove transparent images (unnecc. clutter that can be replaced with margin & padding)  Eliminate: font & elements, entities, bgcolor & background attributes, align and valign attributes, width, border & cellpadding table attributes, any table cells containing only an image or nothing, any text & link attributes on the body element.  Do not remove: cellspacing, colspan & rowspan.

20. 8/13/2003 20 Converting An Existing Page  Step 3: Add your Stylesheet  Step 4: Benefits  Cleaner document structure  Easier to edit & maintain  Decreased file size  Decreased server load

21. 8/13/2003 21 Converting An Existing Page MethodSize*CharactersServer HitsImagesTablesFont Tags All HTML100%10,6174 to 19 18 (16 repeat) 1149 HTML+CSS64.2%6,8193250 HTML with Link 44.6% 4,789 + 2,112 3 to 4250 *Compared to the all-HTML method; refers to the size of the HTML document only. Source: Eric Meyer on CSS by Eric A. Meyer

22. 8/13/2003 22 Resources  Standards:  http://jigsaw.w3.org/css-validator/ W3C CSS Validation Service  http://www.w3.org/Style/CSS/ W3C Cascading Style Sheets home page  CSS Sites:  http://www.alistapart.com/topics/css/ A List Apart  http://www.inknoise.com/experimental/layoutomatic.php inknoise  http://glish.com/css/ Eric Costello  http://www.thenoodleincident.com/ Owen Briggs  http://www.bluerobot.com/web/layouts/ The Layout Reservoir  http://www.meyerweb.com/eric/css/edge/ Eric Meyer  Books (with web sites):  http://www.cssbook.com/ “Designing CSS Web Pages” by Christopher Schmitt  http://www.sitepoint.com/books/css1/ “HTML Utopia: Designing Without Tables Using CSS” by Dan Shafer  http://www.glasshaus.com/BookInfo.asp?bookId=59 “Cascading Style Sheets: Separating Content from Presentation” by Owen Briggs, Steven Champeon, Eric Costello, Matt Patterson  http://www.oreilly.com/catalog/css/ “Cascading Style Sheets, The Definitive Guide” by Eric A. Meyer  http://www.ericmeyeroncss.com/ “Eric Meyer on CSS” by Eric Meyer

23. 8/13/2003 23 Resources (continued )  Other CSS sites:  http://www.westciv.com/style_master/academy/css_tutorial/ West CIV  http://www.csszengarden.com/ Zen Garden – The Beauty in CSS Design  http://www.sitepoint.com/books/css1/  http://www.webreference.com/  HTML Utopia by Dan Shafer  About.com

24. 8/13/2003 24 Questions