WebStandards
Download
Report
Transcript WebStandards
Web Standards
XHTML and CSS
Today’s Show
► Discuss
web standards
► XHTML
► Layout
Without Tables
► CSS
► Why
Web Standards?
Web Standards
► What
are “web standards”?
► Web Standards consist of these W3C
recommendations
XHTML 1.0 or Higher
CSS Level 1 and CSS Level 2
DOM Level 1 and DOM Level 2
ECMAScript 262 (The Language formerly known
as JavaScript
XHTML?
► XHTML
is the “new” version of HTML.
It’s more strict and is an extension of XML
It has its own specifications just like HTML
►XHTML
Strict
►XHTML Transitional
►XHTML Frameset
Converting to XHTML
► Declare
the DOCTYPE
Strict vs Transitional vs Frameset
► Tag
and attributes in lower case
► Attributes must have quoted values
► All tags must have an end tag (<br />)
► Nest tags correctly
► Validate the page
(http://validator.w3.org)
Layout Without Tables
Tables should not be used purely as a means
to layout document content as this may
present problems when rendering to non-visual
media. Additionally, when used with graphics,
these tables may force users to scroll horizontally
to view a table designed on a system with a larger
display. To minimize these problems, authors
should use style sheets to control layout
rather than tables.”
www.w3.org/TR/html4/struct/tables.html#h-11.1
Layout Without Tables
► Use
the <div> tag
Separate your page sections into <div> regions
A <div> is an invisible container for content
► Use
Cascading Style Sheets to position your
regions
► Separate your display information from your
XHTML (No fonts or colors or tables for
layout.)
Content Versus Display
► Separating
tricky
display from content can be
Photos are essentially content, so they can be
included in the XHTML
Backgrounds are not content, and neither are
colors or fonts, so they should go into the style
sheet
BOLD and ITALICS emphasise the content
and are often considered part of the content
►Don’t
make a style just to bold words. Use
<em>
Layout Without Tables (Continued)
► Separate
your page into important regions
Banner area (Title, banner graphic)
Menu or navigation
Content
►Columns?
Sidebar?
Footer
► DO
NOT WORRY ABOUT POSITIONING
YET!
You’re not doing layout in XHTML!!!
Layout Without Tables (Continued)
► Once
your structure is defined, start
thinking about the “skins” of the page
► The style sheet is your skin
You can use more than one “skin” for your
page.
Because your “look and feel” is separated from
your content, changing your design is easy
PDAs, phones, and even printers can have their
own style sheets.
IDs and Classes
► Placing
IDs as attributes of your elements
identifies them as unique. You can use the IDs in
your ECMAScript or your style sheet to manipulate
the element.
► Classes are applied to elements in order to group
the elements
Not unique, but similar
► Assign
IDs to the “regions” of your page (layout)
► Assign CLASSES to sub-regions of your page (look
and feel)
XHTML Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>Company.Com</title>
XHTML Code
<link rel="stylesheet" type="text/css" href="layout.css"
title="default" media="screen" />
<link rel="stylesheet" type="text/css" href="style.css"
title="default" media="screen" />
<link rel="stylesheet" type="text/css" href="pda.css"
title="pda" media="handheld" />
<link rel="stylesheet" type="text/css" href="print.css"
title="print" media="print" /></head>
<body>
XHTML – IMPORTANT STEP
<div id="webStandardsAlert">
<p>This browser does not support basic Web
standards, preventing the display of our site's
intended design. May we suggest that you <a
href="http://webstandards.org/upgrade/">upgrad
e your browser</a>?
</p>
</div>
► We’ll
hide this from the newer browsers later!
XHTML Code
<div id="page">
<div id="banner">
<div id="textbanner">Company.Com</div>
<div id="graphicbanner"”></div>
</div>
<div id="navigation">
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
XHTML Code
<div id="sidebar">
<div id="announcements" class="box">
<div class="title">Announcements</div>
<div class="content">
This is where my announcements are going
</div>
</div>
</div>
<div id="main">
<div class="box">
<div class="title">News</div>
<div class="content">
Main content will go here
</div>
</div>
</div>
XHTML Code
<div id="footer">Copyright © 2004
Company.Com</div>
</div>
</body>
</html>
Our page so far
►
►
Not very pretty, but it is
very concise and will work
well for old browsers and
screen readers.
Some devices can’t read
the styles and will only see
this. That’s okay though
because they can still read
the content and navigate
the site.
Instant “text-only” version!
Round 2: CSS
Style sheets for a skinnable website:
1. Layout.CSS – simple structure
2. Style.css – colors and fonts (optional)
3. Printer Friendly CSS
That’s A Lot of CSS!
► This
structure will
Make old browsers play along
Keeps the layout separate from the colors
Makes it easy to adjust fonts
Makes it really easy to have a “printer friendly
version” without doing a lot of additional work.
The “Cascading” Part
► Styles
are “Cascading” meaning that they
can be redefined several times, either
adding to the style’s properties or overriding
the properties.
A .box style can have a width defined in one
styleshee and a color defined in another.
A .box style can have a width defined in one
styleshee and have its width redefined in
another style
The Cascading Part (Continued)
► The
style that is displayed to the user is the last
style applied for that media type
.box{
background-color:#ffffff;
}
.box{
background-color:#000000;
}
This would result in a black background
Stacking styles
This
p {color:#ffffff;}
td {color:#ffffff; }
h1 {color:#ffffff; }
could be simplified to this:
p, td, h1 {color:#ffffff; }
Keeping your style small and compact will reduce download
times for your users!
Selector Types
► ID
#banner
►#
sign is used to identify an ID selector in the
stylesheet only
►<div id=“banner”>
► CLASS
.box
►Period
(.) is used to identify a class selector in the
stylesheet only
►<div class=“box”>
Selector Types
► Redefined
Elements
body
►No
# or . means that you are going to redefine the
characteristics of this element.
►Good for removing that annoying line break left
when using the <h3> tag.
Using Style to Affect a Region
► #main
.content a{
color:#ffffff;
}
► All anchor tags within a region defined as class
“contents” within a region defined as id “main”
► This ensures that only the elements in a specific
section will be modified
<div id=“main”>
<div class=“content”>
<a href=“mypage.htm”>Link</a>
</div>
<div>
Layout.css
body {
TEXT-ALIGN: center
}
#page {
display:block;
margin:0px auto;
VERTICAL-ALIGN: middle;
WIDTH: 800px;
TEXT-ALIGN: left;
}
CSS
#webStandardsAlert{
display:none;
}
Layout.css
#banner {
display:block;
clear:both;
WIDTH: 800px;
PADDING:0px;
}
Layout.css
#navigation {
DISPLAY: block;
clear:both;
float:left;
MARGIN-TOP: 5px;
MARGIN-bottom: 5px;
WIDTH: 800px;
}
Layout.css
#navigation ul {
DISPLAY: block;
float:left;
list-style: none;
MARGIN:0px 0px 0px 0px;
padding: 0;
}
Layout.css
#navigation li {
DISPLAY: block;
float:left;
VERTICAL-ALIGN: middle;
TEXT-ALIGN: center;
width:98px;
margin-right:2px;
}
#navigation li a {
DISPLAY: block;
}
Layout.css
#sidebar {
clear:both;
MARGIN-TOP: 5px;
DISPLAY: block;
FLOAT: left;
WIDTH: 195px;
MARGIN-RIGHT: 5px;
}
Layout.css
#main {
margin-right: -2px;
MARGIN-top: 5px;
MARGIN-bottom: 5px;
DISPLAY: block;
float:right;
WIDTH: 590px;
}
Layout.css
.box{
display:block;
width:100%;
MARGIN-BOTTOM: 10px;
clear:both;
}
Layout.css
.box .title { PADDING: 2px; }
.box .content { PADDING: 2px; width:100% }
Layout.css
#footer{
display:block;
clear:both;
margin-top: 10px; width: 800px;
padding: 2px;
}
Style.css
body {
FONT-SIZE: 10pt;
FONT-FAMILY: Arial, Helvetica, sans-serif;
BACKGROUND-COLOR: #8B8B8B;
}
Style.css
#banner {
}
BORDER: 1px solid #333333;
#banner #textbanner{
color:#ffffff;
}
#banner #graphicbanner{
display:none;
}
Style.css
#navigation {
FONT-WEIGHT: bold;
FONT-SIZE: 8pt;
COLOR: #ffffff;
}
Style.css
#navigation li a {
FONT-WEIGHT: bold;
COLOR: #FFFFFF;
BACKGROUND-COLOR: #333333;
TEXT-ALIGN: center;
TEXT-DECORATION: none; border: 1px solid #ffffff;
}
#navigation ul li a:hover {
COLOR: #cccccc;
BACKGROUND-COLOR: #666666;
}
Style.css
.box{
BORDER: 1px solid #333333;
BACKGROUND-COLOR: #A5A5A5;
}
.box .title {
FONT-WEIGHT: bold;
COLOR: white;
BACKGROUND-COLOR: #333333;
}
Style.css
a{
COLOR: #FFFFFF;
TEXT-DECORATION: none
}
a:hover {
COLOR: #666666;
}
Style.css
#footer{
TEXT-ALIGN: center;
border: 1px solid #333333;
background-color: #A5A5A5;
}
Why Are We Doing This?
► Separating
layout from content
Makes pages more accessible
►Text-only
►PDA
►Printer-friendly
Makes download times smaller
►Large
bandwidth reduction because CSS is cached
►We can now use more graphics
Print.css
► Coming
in a later version of this
presentation. Please keep checking back.
Why?
► Interoperability
Standards-based browsers show the same
thing on all platforms
► Easy
design changes
We can make design changes much faster!
►http://www.csszengarden.com/
Resources
►
►
►
►
►
►
►
►
►
http://glish.com/css/
http://www.mezzoblue.com/zengarden/resources
/
http://www.meyerweb.com/
http://www.alistapart.com/
http://www.zeldman.com/dwws/
http://www.w3.org/TR/xhtml1/
http://www.w3.org/Style/CSS/
http://www.mozilla.org/products/firefox/
http://www.westciv.com/style_master/house/ind
ex.html
Questions?
► Email
at [email protected]
► Visit web at http://www.bphogan.com/
Slides will be posted.