Web Construction, CSS &Spry Navigation

Some of the best practices but NOT the final answer.

Web ConstructionHow we want to start developing our sites.

Tables and Divs Minimal tables

• Use as little tables as possible. To obtain a standard four-block layout…

Tables and Divs …the following code is all you need:

<table><tr>

<td colspan="2"><div

class="header">Header</div>

</td></tr><tr>

<td><div

class="navigation">Navigation</div>

</td><td>

<div class="content">

Content</div>

</td></tr><tr>

<td colspan="2" style="vertical-align: bottom">

<div class="footer">

Footer</div>

</td></tr>

</table>

Content VS Presentation CONTENT

• It’s important to put all content (text, images ect) in your html doc.

• As well as scripts, tables and divs.

PRESENTATION• CSS can cover the rest…

Cascading Style SheetsA language used to describe the design of an HTML doc

How To Write It

Common Issues Classitis and Divitis

• An error of beginning CSS coders is to use far too many <div> tags and class attributes, like:

<div class="header"><div class="headerText"><p class="headerP">This site uses CSS!</p></div></div>

Common Issues Start with simple XHTML:

Then use these two CSS selectors:

<div class="header"><p>This site uses CSS!</p></div>

div.header {/* styles */}

div.header p {/* styles */}

Common Issues Try extending the selector or

specifying certain tags.body, td, li, p {font: 0.8em verdana,sans-serif;}

#mydiv p {font-size: 34px;}

http://www.blooberry.com/indexdot/css/propindex/all.htm

CSS Properties

Spry Navigation MenusA simple way to add interactivity to your site