Objective

To learn CSS layout techniques by recreating this web page.

Discussion

Rounded corners can be easily achieved using CSS3. This means IE 8 and older browsers that don't support CSS3 will only see square corners, but that is a small sacrifice. Mozilla (Firefox) and Webkit (Safari/Chrome) browsers are supported with backwards compatible code that have been available for years.

As a bonus, we'll also make use of Google web fonts for a headline.

Procedure

Prepping for the exercise

1. download starter files
2. download CSS reset starter files (move CSS files to proper location)
3. launch Illustrator, file > new (profile=web, 640x480)
4. rectangle tool: opt+click: 10x10px
5. fill=white, stroke=none
6. window > transparency: opacity=40%
7. file > save for web "40.png": preset=PNG24, transparency=yes
8. file > new (profile=web, 640x480)
9. rounded rectangle tool: opt+click: 225x30px, radius=15
10. fill=#9F5F33, stroke=none, duplicate vertically, snap
11. make 2nd button darker
12. file > save for web "button.png": preset=PNG24, transparency=yes

Creating the page structure

1. launch dreamweaver
2. open "curvy.html" (note structure)
3. window > CSS: link "reset.css", "font.css"
4. window > CSS: add CSS styles to "layout.css" (+):
   • body: background: image="wood.jpg", min-width=1024px
   • #header: box: height=100px, bg=#9F5F33, margin-bottom=30px
   • #content: box: width=90%, margin left/right=auto
   • #footer: box: height=50px, margin top=30px, padding-top=10px
   • #leftColumn: box: width=25%, float=left
   • #rightColumn: box: width=25%, float=right
   • #mainColumn: box: width=48%, margin left/right=auto
5. add a thin red border to the 3 "columns" (temporary)
6. save, file > preview in browser (opt+F12 and cmd+F12)

Adding rounded corners to main column

1. select main text: insert > layout objects > div tag "#main"
2. window > CSS: add CSS styles to "layout.css" (+):
   • .rounded20: border-radius=20px; -webkit-border-radius=20px;
   -moz-border-radius=20px
   • #main: bg image="40.png", width=90%, margin-left/right=auto
3. select <div#main>; add style ".rounded20"
4. save, file > preview in browser (opt+F12 and cmd+F12)

Adding rounded corners to right column

1. select "art.jpg": insert > layout objects > div tag "#right"
2. select <div#right>; add style ".rounded20"
3. new CSS style "#right": bg image="art.jpg", float=right
4. replace "art.jpg" with "spacer.gif" (match width/height)
5. save, file > preview in browser (opt+F12 and cmd+F12)

Adding rounded corners to menu buttons

1. window > CSS: add CSS styles to "font.css" (+):
   • a: bold, color=#9F5F33, decoration=none
   • a:hover: decoration=underline
2. window > CSS: add CSS styles to "menu.css" (+):
   • #leftColumn p a: box: height=30px; width=225px; display=block
   • #leftColumn a: font-size=1.2em, wieght=bold, color=white;
   background-image=buttons.png
   • #leftColumn a:hover: text-decoration=none;
   background-image=buttons.png,
   background-position: x=0px, y=30px
   
3. save, file > preview in browser (opt+F12 and cmd+F12)

Fine-tuning the CSS

1. edit "h1": box: padding-top=0
2. edit "#leftColumn p a": box: width=185px, padding-left/right=20px;
   height=15px, padding-top=6px, padding-bottom=9px
3. edit "#main": box: padding=20px
4. edit "#footer": border-top: thin, white, dashed
5. new CSS style "#leftColumn p": padding-bottom: 1.5em
6. remove thin red border from the 3 "columns"
7. save, file > preview in browser (opt+F12 and cmd+F12)

Adding Google web fonts

1. browse to www.google.com/webfonts#HomePlace:home
2. search for "anton", click "quick use" and follow instructions
3. new CSS style ".tophead" (in "fonts.css"):
   • type=white, size=36px
   • box: margin-left/right=auto, width=90%, padding-top=30px
4. add in code view: font-family: 'Anton', sans-serif;
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