Class Tuesday, March 27, 2012

1. Review setting up multi-column layout with CSS

2. Firebug

3. Choose website to re-create

Setting up a multi-column layout with CSS

You have practiced before with multi-column layouts and I’ve had you copy and paste code to do it. Also, the code was part of an internal style sheet. This time you will use an external style sheet.

By setting up a multi-column layout you’re creating distinct vertical areas such as a left column and center column or left, center, and right columns. This can be done by using absolute positioning and float properties to put each column into place, as you will see in our style sheet. Additionally, each of the columns, broken down into div areas, are positioned within one large div area that is the size of the entire page (in this case, 950 pixels).

Creating a page layout with CSS can be done in a variety of ways and this is just a quick practice so you can get a feel for it. You don’t have to set up vertical columns to arrange your content but it’s often done since it’s a basic and attractive way to organize a webpage. For more information on the different positioning properties see HTML Dog.

Firebug

Firebug is a really cool add-on for Firefox (and Chrome) so you can see- and edit- the HTML and CSS of any webpage. You can see exactly how the page is coded and you can make edits (of course just for you to see if you’re tweaking a site that’s not yours) and instantly view the changes. Alternatively, it’s a great way to review your own webpage and check out your code in real time.

You have Firebug installed on your laptops. To access it simply right click anywhere on a webpage and click on “Inspect Element with Firebug,” located at the bottom of the menu.

This is a great learning tool for you for reviewing what you already know and for discovering more HTML and CSS coding.

Quick activity with Firebug- pull up a website you like and use Firebug to inspect the HTML and CSS.

Choose a website to re-create

You will spend the rest of today and tomorrow re-creating the home page one of your favorite websites. You can either try to re-create it exactly or do something new and different. Spend some time today deciding which site you’d like to do. I will come around to check in with you to see what you have chosen.

This project will include:
– Setting up a page with HTML and CSS with an external style sheet (I will help you get going with this)
– Potentially using Photoshop or Fireworks to create or edit a graphic or image
– Using CSS to select appropriate colors and fonts

This is going to count as a project and it is your first project of the third quarter. Projects are worth 50% of your grade.