COAP:COAP-3120/week4
Jump to navigation
Jump to search
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 positioning 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/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
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:
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/