Objective

To learn advanced CSS layout techniques by recreating this web page.

Discussion

A full background image can be achieved using many techniques. In this approach, we will use a jQuery plugin and some CSS. The original source files also has an option for full image slide shows.

Procedure

Adding a full image background

1. download starter files
2. download CSS reset starter files
3. merge files into one folder
4. launch dreamweaver
5. open "example.html" (note linked CSS styles, delete unneeded styles)
6. window > CSS: link "css/supersized.core.css"
7. open "core.html"
8. view > code
9. copy javascript code from "core.html" (lines 22-34) to "example.html"
10. change bg image to "img/bg.jpg"
11. save, file > preview in browser (opt+F12 and cmd+F12)

Adding content

1. insert > layout objects > div (id="content")
2. insert some greek text from www.lipsum.com
3. add CSS style "#content" to new style sheet "layout.css" (+):
   box: width=400px, margin-left/right=auto, margin-top/bottom=50, padding=20px; background-image=90.png
4. change title to "Supersized Test"
5. save, file > preview in browser (opt+F12 and cmd+F12)

Grading

1. publish file (see separate lesson)
2. make a link from your process page to this assignment