comp 1850 | introduction to web design and development

lecture five

agenda

  • developer tools
  • css box model
  • css positioning
  • exercises
  • readings

developer tools: Firefox

HTML and CSS are both client side technologies: the client machine is responsible for processing both. Since the client computer's memory has the code, the user has access to a website's HTML and CSS source code.

With a web browser, View > Source will display the current page's HTML source code (Ctrl+U will also work). With some additional browser cfeatures, the CSS source code is equally easy to access.

  • Firefox is a free, customizable web browser that is one of the most standards-compliant browser available today
  • learn more:
  • several extensions (small add-ons that add new functionality to Mozilla applications) make web development much easier
  • to view installed extensions and add new ones:
    • go to Tools > Add-ons to launch the Add-ons window
    • click "Get Add-ons" at top of window
    • you can browse installed Add-ons or click Browse All Add-ons to visit the Add-ons database online
  • other useful developer extensions:

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

relative and absolute positioning

relative property

  • Use to slightly change the location of an element in relation to where it would otherwise appear
  • Hands-on: Create a new HTML document using the following embedded rules:
    h1 {	
    	background-color:#cccccc;
    	padding:5px;
    	color: #000000;
    }
    
    #myContent { position: relative; left:30px; font-family:Arial,sans-serif; }

absolute property

  • Use to precisely specify the location of an element in the browser window
  • Hands-on: Create a new HTML document using the following embedded rules:
    
    h1 {	
    	background-color:#cccccc;
    	padding:5px;
    	color: #000000;
    }

    #content { position: absolute; left:200px; top:100px; font-family:Arial,sans-serif; width:300px; }

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>.

CSS layouts

Page layout can be defined using either CSS positioning or HTML tables. For flexibilty, power, and maintainability, CSS is usually the best choice. CSS positioning helps facillitate the separation of style from structure, allowing more responsive web design.

When designing a CSS positioning template:

  1. Have a clear idea of the layout and behavior you desire. Sketch it out or mock it up in photoshop.
  2. Set your test browser to default view size. Be prepared to keep changing the width and height of the browser as you test.
  3. In HTML, use the div element to define major sections of your layout (header, footer, navigation, etc). You may want to add some placeholder content to each section so that you will have something to see when testing.
  4. Assign id or class attributes to the divs
  5. In an external CSS file, style the box models of the divs (borders, margins, paddings)
  6. Apply absolute positioning to any candidate elements
  7. Apply any relative, fixed or float positioning as needed. Note: You dont always need to specially position every element: sometimes static positioning is exactly what you want
  8. Add/Remove different quantities of content to see how the page behaves.

additional exercises

  1. Read chapters 6 and 7 from the textbook
  2. Do the chapter 6 textbook hands on practice exercises 6.2->6.9
  3. Work through hands on practice exercies 7.1->7.9

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 browser issues.
  7. CSS Layout Techniques
    From glish.com.
  8. 10 CSS tricks you may not know.
    From webcredible.co.uk.
  9. Little Boxes
    More CSS layout techniques
  10. Rich In Style
    CSS Guides, free stylesheets, bug reports, example pages, etc.
home | about the course | readings | resources | 01 | introduction | 02 | html & ftp | 03 | css: fonts & colors | 04 | css: links & tables | 05 | css: page layout | 06 | information architecture | 07 | design principles | 08 | css: layout & graphics | 09 | html forms | 10 | client side scripting | 11 | scripting & analytics | jeff parker | students on bcitcomp.ca | textbook website | my.bcit | bcit | bcit: computing |