COAP:COAP-3120/week4

COAP 3120

COAP-3120

COAP-3120/week1

COAP-3120/week2

COAP-3120/week3

COAP-3120/week4

COAP-3120/week5

COAP-3120/week6

COAP-3120/week7

COAP-3120/week8

COAP 3120 Week 4 program

Main topic: The CSS box model and layouting with float:left

Monday

Homework 2 (continued ... if needed)

• Q/R Homework 2

CSS Boxes

• Handouts: CSS box model tutorial

Analyzing CSS

• Analyzing CSS tutorial
• Install both View Source Chart and Web Developer Firefox extensions if not already done so.

Classroom activity

• Identify a web page that you like in terms of its layout and visual design
• Look at the HTML and the CSS of the using web developer tools

Layout using the float:left property:value combo

• Example directory: http://tecfa.unige.ch/guides/css/ex/
• Most important principles:
  • Fluid layouts are better in most cases.
  • Don't add any margins or paddings to columns that will go into a multi-column layout. Use wrappers and only set width using percentage value. You may specify a min-width however.
  • Total width must add up to 100%

Example:

#right_col {
    float: left;
    width:17%;
    min-width:2cm;

Start with mini-project (homework) 3

• Grab http://tecfa.unige.ch/guides/css/ex/layout/css-boxes-fluid-template.html

Wednesday

• Hands-on homework 3 (see below)
• Continue with your work based on: http://tecfa.unige.ch/guides/css/ex/layout/css-boxes-fluid-template.html

Homework 3

Project summary:

(1) Create an HTML page that uses CSS box for some multi-column layout. (2) A short report describing and discussing your design

Requirements:

The HTML must include:

• Some nested div boxes (or equivalent)

The CSS must include:

• A layout using CSS boxes. Part of the page must include a multi-column layout.
• We strongly suggest starting from the provided template, since layouting with CSS is not trivial...

The short report:

• It should shortly explain your design, e.g. what you aimed to achieve
• It should include references/sources used (in particular to the original HTML file). Be careful to respect general Webster rules about plagiarism.
• It should shortly explain what you did in your CSS.
• The report can be turned in any format (e.g. HTML, PDF or Word).

Example HTML+CSS:

• http://tecfa.unige.ch/guides/css/ex/layout/css-boxes-example-fluid.html

Due:

• Wednesday week 5

Submission:

• Upload (a) the HTML file, (b) the CSS file (if external), (c) all the picture files and (d) the report to the world classroom (hw 1). Creating a *.zip file of everything is the easiest solution.
• Make sure that the upload worked (e.g. don't forget to hit the submit button)

Evaluation criteria:

• Requirements (presence of CSS elements) - 20%
• Visual design / originality - 30%
• Usability - 10% (is the text readable ?)
• Technical quality (CSS structure and documentation, valid HTML and CSS) - 20%
• Presence and quality of the report - 10%
• On time - 10 % (only 2 days late = 5%)

Reading and other resources

Textbook

Chapter 8 (The Box Model: Controlling Margins, Borders, Padding, Width, and Height

Chapter 9 (Floating and Vertical Alignment) - This chapter is not brilliant with respect to creating typical layouts.

Chapter 11 (Positioning) - Optional.

Handout

• CSS box model tutorial
• Analyzing CSS tutorial
• CSS box model (to be completed some day ...)
• http://tecfa.unige.ch/guides/css/ex/layout

Validation

• HTML validator (alternatively, use the FF exension): http://validator.w3.org/
• CSS validator: http://jigsaw.w3.org/css-validator/