comp 1850 | web design and development one

lecture five

agenda

  • browser extensions & tools
  • more on css
  • css box model
  • exercises
  • readings

browser extensions & tools

  • Different browsers allow you to extend their capabilities with small plug-ins.
  • Firefox and Chrome allows the creation of extensions (small add-ons that add new functionality to Mozilla applications)
  • useful Firefox addons for web developers and designers:
  • useful Chrome addons for web developers and designers:

css box model

  • as far as a style sheet is concerned, everything in your HTML is inside a box
  • from the outside in it looks like this:
    margin
    border
    padding
    this is some content
  • content: text & web page elements in the container
  • padding: area between the content and the margin
  • border: between the padding and the margin
  • margin: determines the empty space between the element and adjacent elements
  • content width vs. visible width:
    • content width is the size of the visible content (text, images, etc.)
    • visible width, however, includes everything out to the edges of border

Hands-on Practice: in-class exercise

Get all the textbook exercises in one great PDF.

  1. Work through Hands-On Practice 6.1 starting on page 251 of text.
  2. Begin with ex01_normal_flow/starter.html.

float and display

Float property

Elements that seem to "float" on the right or left side of either the browser window or another element are often configured using the float property.

.floatright {float: right;}
<img src="file.jpg" class="floatright">

Display property

Configures how and if an element is displayed.

  • display:none;
    The element will not be displayed.
  • display:block ;
    The element is rendered as a block element, even if it is actually an inline element, such as a hyperlink.
  • display:inline;
    The element will be rendered as an inline element, even if it is actually a block element, such as a <li>.

Hands-on Practice: in-class exercise

  1. Work through Hands-On Practice 6.2 starting on page 253 of text.
  2. Begin with ex02_float/startyls.html.
  3. Try the clear property (see page 246)
  4. Try the overflow approach to clear a float (see page 255)

external resources

  1. A CSS property index
    By Brian Wilson (no not THAT Brian Wilson)
  2. W3Schools
    Tutorials and examples.
  3. Complete CSS Guide
    From Westciv.
  4. 50 Useful Coding Techniques
    CSS Layouts, Visual Effects and Forms - from Smashing Magazine.
  5. Lists, Floats and Selectors
    Great tutorials from MaxDesign
  6. Position is Everything
    Advanced CSS techniques for dealing with browserr issues.
  7. The Layout Reservoir
    From bluerobot.com.
  8. CSS Layout Techniques
    From glish.com.
  9. 10 CSS tricks you may not know.
    From webcredible.co.uk.
  10. Little Boxes
    More CSS layout techniques

widgetwerks exercise

Your instructor will walk you through a more advanced layout for the WidgetWerks site.

optional exercises

  1. Complete the Hands-On Exercises for Lighthouse Island Bistro
    Using the files in ex04_lighthouse, complete the exercises starting on page 266 (6.4) and page 267 (6.5).
  2. Turn a list into a navigation bar:
    Walk through the steps required to recreate a navigation bar described by Roger Johansson in his excellent tutorial.
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 |