You are on page 1of 3

Lab 3: Simple Layouts

1. Firebug Introduction
What is Firebug? Firebug is an extension for the Mozilla Firefox browser that allows you to debug and inspect HTML, CSS, the Docu ent !b"ect Model #D!M$ and %a&aScript'

Why do we use Firebug? (nspect the beha&ior of HTML)CSS, and Debug "a&ascript ' Detect perfor ance of website' Trac. Coo.ies * Sessions' odify style * layout with true +,S(+,-'

How to install Firebug? To install Firebug for Firefox, go to http/))www'getfirebug'co How to launch Firebug? 0 ways/ 1ress F23 on the .eyboard' 1ress the Firebug button on the toolbar'

4ight clic. on an ele ent, choose 5(nspect 6le ent with Firebug78

Firebug utorials 2' Find out the attributes, D!M properties, CSS properties of the ele ent

3' Modifying HTML)CSS ele ents in real ti e

0' Debugging %a&aScript code

9' +eb 1erfor ance

:' Trac.ing Coo.ies and Sessions

!. "#ercises
a$ ;se Firebug to inspect HTML, CSS code of all gi&en exa ples' For ore basic layout exa ples, &isit/

http/))www'p ob'co'u.)te p)0colfixedtest<9'ht http/))www'ironspider'ca)webdesign2=3)tables9layout3'ht

b$ ;se HTML and CSS to build a layout li.e the picture below'