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 (i.e. a div with divs inside) and set their width with percentage values. 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 styles CSS boxes and produce some multi-column layout.

(2) Produce 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%)

Homework 4

This homework is fairly optional since I will not test this topic in the exams. If you have some time to spare, do it. In total, you must submit at least five homework projects (out of seven).

Project summary:

• Analyze a web site

Requirements:

Produce an analysis of two web sites

• Describe (roughly) the HTML structure
• Describe CSS techniques used for the layout (if present)
• Discuss the color palette
• Discuss overall quality of layout and visual design
• Include at least a screen capture of each web site.
• Add other elements if you like, e.g. usability
• Include links and references

Due:

• Wednesday week 5

Submission:

• Upload your report

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 positioning tutorial (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/