Interface components is a term for all the supporting elements of a page’s content. Lists Menus Forms Tables This chapter focuses on using proper, valid XHTML to create these components and how to properly design them to integrate well into a webpage.

Tables had a designated purpose when they were first developed– laying out grids of data in rows and columns à la Microsoft Excel. Stylin’ Codin’ Languages XHTML & CSS PHP & SQL Focus Interface Design Back-end Code

Make it more accessible for the visually impaired by adding scope definitions to each table header (whether the header relates to a row or a column). My Books Stylin’ Codin’ Languages XHTML & CSS PHP & SQL Focus Interface Design Back-end Code table.basic_lines { width:300px; border-top:3px solid #069; } Link to example

Further define the style of the table by adding lines around the rows. body { font:.8em verdana, sans-serif; } table.basic_lines { width:300px; border-collapse:collapse; /* Removes space between the cells */ border-top:3px solid #069; } table.basic_lines th { border-bottom:2px solid #069; } table.basic_lines td { border-bottom:1px solid #069; } table.basic_lines caption { margin-bottom:6px; } table.basic_lines td, table.basic_lines th { padding:5px 3px; } Link to example

Add some background color, and we have a nicely styled way to display rows of data. body {font:.8em verdana, sans-serif;} table.basic_lines { width:300px; border-collapse:collapse; border-top:3px solid #069; } table.basic_lines th { border-bottom:2px solid #069; background-color:#CCFFCC; } table.basic_lines td { border-bottom:1px solid #069; background-color:#FFFFCC; } table.basic_lines th[scope=“col”] { background-color:#99CCCC; } table.basic_lines td, table.basic_lines th { padding:5px 3px; border-bottom:1px solid #069; } Link to example Remember pseudo-classes?

A vital part of nearly every website is some type of form– login page, e- commerce checkouts, etc. In XHTML, it’s useful to use “label” to define what each input type does. Input Box  Simple text box. User Name Password Box  Text box, but will encrypt your type on the screen. Password Text Area  Large text box. Description Enter description

Radio Buttons  Allow one choice to be made. Check Boxes  Allow multiple choices to be made. Select Box  Drop-down box with multiple selections. Choose something Option One Option Two Submit / Reset Button  Submits / Resets the form. Link to example * In the example I added div’s and labels. Consider doing this for styling purposes. You can see a stylized version of my example here.here

A handy tool for any modern site is the tiny login. Lets put it in our two-column page on the left side navigation bar. Link to exampleLink to style sheet.

A list is a group of related text items. Ordered / unordered / definition. A menu is a list that offers navigation choices. Lists Unordered  Bulleted by default. Can change to hollow circle, etc. Ordered  Numbered by default. Can change to Roman Numerals, etc. Definition  Nested list that contains sub items.

Unordered Choice 1 Choice 2 Ordered Choice 1 Choice 2 Definition XHTML A mechanism… CSS A mechanism…

A menu, ultimately, is a list of choices. All menus are lists and should be styled as such for greatest compatibility within different browsers. Let’s start with a simple list and turn it into a menu. Gibson Fedner Rickenbacker Ibanez body { font:1.0em verdana, arial, sans-serif; } div#listcontainer { border:1px solid #000; width:160px; font-size:.75em; margin:20px; } Link to example

We’ll turn the borders on and the bullets off to make it more like a menu. body { font:1.0em verdana, arial, sans-serif; } ul {border:0; margin:10px 30px 10px 1.25em; padding:0; list-style-type:none;} li {border-bottom:2px solid #069; margin:0; padding:.3em 0; text-indent:.5em} div#listcontainer { border:1px solid #000; width:160px; font-size:.75em; margin:20px; } Link to example

Enclose the list, convert it into a menu (add links). body { font:1.0em verdana, arial, sans-serif; } ul {border:0; margin:10px 30px 10px 1.25em; padding:0; list-style-type:none;} li {border-bottom:2px solid #069; margin:0; padding:.3em 0; text-indent:.5em;} li:first-child {border-top:2px solid #069;} div#listcontainer a {text-decoration:none; color:#069;} div#listcontainer a:hover {color:#00;} div#listcontainer { border:1px solid #000; width:160px; font-size:.75em; margin:20px; } Link to example

CSS menus are one of the highly sought-after code snippets in CSS. Item 1 Item 2 Item 3 The CSS is rather long and complex and won’t fit on the PowerPoint, but we can outline a bit about how we want this to work. First set the list elements side-by-side. Style the list elements so they have a nice background color and a border. Upon hovering the mouse over the list elements, have more elements be displayed under the one you’re hovering over. When the mouse is not hovering over the original list elements or the displayed list elements, hide the displayed elements. Link to example

 Tutorials, reference guides, advanced scripting.  Many good online books on CSS and other web design techniques. Wyke-Smith, Charles. Stylin' with CSS : A Designer's Guide. Grand Rapids: New Riders, 2007.