Layout

Dr Andres Baravalle

Extra

Open the Moodle site for this module and complete the lab activities for "Layout" and "HTML5 Layout".

Create a new web page incorporating a few paragraphs of text related to Fernand Léger. You can use wikipedia as a starting point, and do not forget to use the cite and blockquote tags appropriately
Use a search engine of your choice to retrieve one or more image of Fernand Léger's work - you will use that image in this and in the next activities.
Create a 960 pixels based layout
Set a title (h1 and title tags)
Create a 2 rows layout; the first row will include one of the images of a Léger's paintings, centered
The second row will include 3 columns of equal width; each column will include infomation on Leger

Re-implement Activity #2 using a liquid layout (layout based on percentages rather than pixels)

Re-implement Activity #2 using Bootstrap (download from getbootstrap.com; see example here)
Bootstrap requires jquery; if the CDN URL is not be reachable, download a copy of jQuery
Use Dreamweaver's preview features to emulate a mobile phone and a tablet - are the results as expected?

Reimplement Activity #2 using unevenly sized columns: the firsrt one should be using half of the page

This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License (what does it mean? you can copy/modify/redistribute this content).