1 / 16

Chapter 6: Designing Interface Components

Chapter 6: Designing Interface Components. Interface Components. Interface components is a term for all the supporting elements of a page’s content. Lists Menus Forms Tables

aldon
Download Presentation

Chapter 6: Designing Interface Components

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 6: Designing Interface Components

  2. Interface Components • 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.

  3. Tables • Tables had a designated purpose when they were first developed– laying out grids of data in rows and columns à la Microsoft Excel. <table border=“1”> <tr> <td>&nbsp;</td> <td>Stylin’</td> <td>Codin’</td> </tr> <tr> <td>Languages</td> <td>XHTML &amp; CSS</td> <td>PHP &amp; SQL</td> </tr> <tr> <td>Focus</td> <td>Interface Design</td> <td>Back-end Code</td> </tr> </table>

  4. Tables • 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). <table class=“basic_lines” summary=“My Books”> <caption> <strong>My Books</strong> </caption> <tr> <th scope=“col”>&nbsp;</th> <th scope=“col”>Stylin’</th> <th scope=“col”>Codin’</th> </tr> <tr> <th scope=“row”>Languages</th> <td>XHTML &amp; CSS</td> <td>PHP &amp; SQL</td> </tr> <tr> <th scope=“row”>Focus</th> <td>Interface Design</td> <td>Back-end Code</td> </tr> </table> table.basic_lines { width:300px; border-top:3px solid #069; } Link to example

  5. Tables • 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_linesth { 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_linesth { padding:5px 3px; } Link to example

  6. Tables • 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_linesth { border-bottom:2px solid #069; background-color:#CCFFCC; } table.basic_lines td { border-bottom:1px solid #069; background-color:#FFFFCC; } table.basic_linesth[scope=“col”] { background-color:#99CCCC; } table.basic_lines td, table.basic_linesth { padding:5px 3px; border-bottom:1px solid #069; } Remember pseudo-classes? Link to example

  7. Forms • 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. • <label for=“user_name”>User Name</label> • <input type=“text” name=“user_name” id=“user_name”/> • Password Box  Text box, but will encrypt your type on the screen. • <label for=“password”>Password</label> • <input type=“password” name=“password” id=“password” /> • Text Area  Large text box. • <label for=“desc”>Description</label> • <textarea id=“desc” name=“desc” rows=“3” cols=“14”>Enter description</textarea>

  8. Forms • Radio Buttons  Allow one choice to be made. • <input type=“radio” id=“radio1” name=“radioset” value=“choice1” checked=“checked” /> • <input type=“radio” id=“radio2” name=“radioset” value=“choice2” /> • Check Boxes  Allow multiple choices to be made. • <input type=“checkbox” id=“check1” name=“checkset” value=“1” /> • <input type=“checkbox” id=“check2” name=“checkset” value=“2” /> • <input type=“checkbox” id=“check3” name=“checkset” value=“3” /> • Select Box  Drop-down box with multiple selections. • <select id=“choices” name=“choice”> • <option value=“0”>Choose something</option> • <option value=“1”>Option One</option> • <option value=“2”>Option Two</option> • </select> • Submit / Reset Button  Submits / Resets the form. • <input type=“submit” value=“Submit This Form” /> • <input type=“reset” value=“Reset This 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.

  9. Forms • 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 style sheet. Link to example

  10. Lists and Menus • 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.

  11. Lists and Menus Unordered <ul> <li>Choice 1</li> <li>Choice 2</li> </ul> Ordered <ol> <li>Choice 1</li> <li>Choice 2</li> </ol> Definition <dl> <dt>XHTML</dt> <dd>A mechanism…</dd> <dt>CSS</dt> <dd>A mechanism…</dd> </dl>

  12. Lists and Menus • 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. <div class=“listcontainer”> <ul> <li>Gibson</li> <li>Fedner</li> <li>Rickenbacker</li> <li>Ibanez</li> </ul> </div> body { font:1.0em verdana, arial, sans-serif; } div#listcontainer { border:1px solid #000; width:160px; font-size:.75em; margin:20px; } Link to example

  13. Lists and Menus • 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

  14. Lists and Menus • 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

  15. CSS Menus • CSS menus are one of the highly sought-after code snippets in CSS. <div id=“multi_drop_menus”> <ul> <li><a href=“#”>Item 1</a></li> <li><a href=“#”>Item 2</a></li> <li><a href=“#”>Item 3</a></li> </ul> </div> • 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

  16. More Information • http://www.w3schools.com/css/ Tutorials, reference guides, advanced scripting. • http://safari.oreilly.com  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.

More Related