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 and CSS float tutorial
• Also see the textbook ...

Analyzing CSS

• Handout: 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 this page using the using web developer tools (continued on Wed)

Layout using the float:left property:value combo

• Example directory: http://tecfa.unige.ch/guides/css/ex/layout
• 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 - continued on Wed

• Grab http://tecfa.unige.ch/guides/css/ex/layout/css-boxes-fluid-template.html
• Look at http://tecfa.unige.ch/guides/css/ex/layout/css-boxes-example-fluid.html for inspiration.

Wednesday

• Hands-on homework 3 (see below). I.e. continue with work started on Monday, based on: http://tecfa.unige.ch/guides/css/ex/layout/css-boxes-fluid-template.html

• Analyzing CSS continued (demo of web developer tools)

Homework 3

Project summary:

(1) Create an HTML page with some multi-column layout using the CSS float property

(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 two web sites

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:

• Monday week 6

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 layouts with floats.

Chapter 11 (Positioning) - Optional (week 5 stuff)

Instead of reading chapters 9 and 11 you also can consult a (better) book chapter about CSS layout that I uploaded to the world classroom.

Handout

• CSS box model tutorial
• Analyzing CSS tutorial
• CSS float tutorial
• (removed positioning tutorial, i.e. week 5 topic)
• 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/