comp 1850 | web design and development one

lecture four

agenda

  • div and span
  • classes vs. ids
  • styling navigation links
  • introduction to tables
  • table elements
  • readings

div and span

div and span are tagsets which allow you to define your own blocks of code for styling. Both of them require either a class or id to be assigned.

  • Use div to define a block of code that can be styled and positioned using css. The div tag is a block-element tag
    <div class="contentblock">content</div>
  • Use span to define a block of code for styling. The span tag is an in-line element, and thus is not appropriate for positioning.
    <div class="contentblock">Some content <span class="tabledata">other content</span> last content.</div>

class or id?

  • Configure a class:
    • If the style may apply to more than one element on a page
    • Use the . (dot) notation in the style sheet.
    • Use the class attribute in the HTML.
  • Configure an id:
    • If the style is specific to only one element on a page
    • Use the # notation in the style sheet.
    • Use the id attribute in the HTML.

styling navigation links

  • A navigation system is really just a series of list items
  • It makes semantic sense to structure navigation bars as lists and style them with CSS
  • A sample navigation system
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Partners</a></li>
    <li><a href="#">Stuff</a></li>
    </ul>
  • We can change the list from vertical to horizontal orientation using the list-style: none; declaration
  • We also need to apply float: left; to our various elements and remove extra padding and margins
  • As an example, walk through the steps required to recreate a navigation bar described by Roger Johansson in his excellent tutorial.

exercise one

Your instructor will walk you through the creation of a list-based navigation system for the WidgetWerks site.

introduction to tables

  • originally intended for displaying tabular data - information in rows and columns
  • was the primary way to do page layout prior to CSS
  • markup behind tables is a bit tricky and not entirely intuitive:
    • constructed in rows, but columns are implied by number of cells in each row
    • a 3x3 table consists of 3 rows, but we must be sure to include 3 separate cells within each row for table to display as intended
  • tables can be nested within tables allowing for complex and dynamic page layouts

table elements

  • three elements required to make a table: <table><tr><td></td></tr></table>
  • <table></table> - signifies that you are creating a table
  • <tr></tr> - delimits a table row
  • <td></td> - delimits the data in a table cell
  • a sample table:
    <table>
    <tr><td>top left</td><td>top right</td></tr>
    <tr><td>bottom left</td><td>bottom right</td></tr>
    </table>
  • Also: See pages 357-359 for information on table headers and captions
  • old school table attributes (see page 357):
    • border - draws lines around your table: <table border="1">
    • width - specifies width of table in percentage or pixels:
      <table border="1" width="300">
    • cellpadding - adds space (in pixels) around objects in table cells:
      <table border="1" width="300" cellpadding="10">
    • cellspacing - adds space to borders between cells:
      <table border="1" width="300" cellpadding ="10" cellspacing="10">
  • as with many attributes, there are default values - if you want them set to "zero" you must specify
  • <td> attributes (see page 358):
    • width - width of cell in pixels
    • align - alignment of elements in cell (left (default), center, right)
    • valign - vertical alignment of elements in cell (top, middle (default), bottom)
    • colspan - cell spans 2 or more columns
    • rowspan - cell spans 2 or more rows
    • bgcolor - often specified in hexidecimal code (e.g. #ff0000)
  • <tr> tag can also accept align, and bgcolor to apply the same values to an entire table row (see page 358):
  • See page 364 in your textbook for corresponding CSS properties

exercise two

Use the notes above to help recreate the tables on this page.

If you get through the two tables quickly enough, experiment adding styles (see page 380) to the table using your textbook/the web as a reference. Here are some ideas:

  1. Use your own devices and colour choices to create embedded styles to:
  2. Change the background colour of the tables.
  3. Change the background colour of one of the rows of the tables.
  4. Change the background colour for one or more of the table cells in the tables.
  5. Add an overall width of 600px to the table.
  6. Add more text to one of your cells. What happens to the table? The other cells? Change the vertical alignment of text so that it's different for every cell in a row. Do you see a change? What if you add more text?

exercise three

Objective:
Reformat the WidgetWerks pages using tables to format appropriate content.

  1. Replace the ordered and unordered lists on partners.html with a table (2 columns, 1 header row and 5 regular rows).
  2. Follow the hands on practice (8.3) steps starting on page 380 of your textbook (PDF file of selected pages; bring your textbook to class!) to style the table (ignore step 4 re: caption). Use the following colours in place of those suggested in the book:
    #ffcc66
    #bc7116
    #f4eed7
    #f9e8a7
    Put the styles in your external stylesheet and link it to the partners page.
  3. Replace the definition lists on stuff.html with tables.
  4. Advanced: Review sections 8.6 and 8.7 (pgs. 366-368) and apply sections to your product listing.
  5. Add a link to the stylesheet so that the tables display the same as on the partners page.

homework exercise

  1. Complete the Web Research exercises (numbers 1 and 2) at the end of Chapter 3 in Web Development & Design Foundations that starts on page 122.
  2. Upload your exercises to your account and email your instructor with the proper URL. HINT: it might look something like this:
    http://students.bcitwbdev.com/dave/hw3/

Exercise is due before the start of the week five class. Your instructor will not hunt you down to hand this in - no email sent to your instructor = zero marks.

comp 1850 home | about the course | readings | assignments | resources | 01 | introduction | 02 | html & ftp | 03 | css: fonts & colours | 04 | css: links & tables | 05 | css: page layout | 06 | site structure | 07 | design principles | 08 | design techniques | 09 | forms | 10 | client-side scripting | 11 | server-side & analytics | dave tanchak | jeff parker | richard hart | | | students on bcitwebdev | example projects | textbook website | my.bcit | D2L login | example projects | bcit | bcit: computing |