Objective
To learn CSS layout techniques by recreating this
web page.
Discussion
Multiple columns of text are a challenge with XHTML and CSS. One possible approach is to make use of float techniques. When floating text columns, it is essential to specify a width for each floated column. One other trick for working with floats is to "clear" the float in order to wipe the slate clean for the next block of columns.
In addition, when preparing transparent GIF files that float on top a colored background, one must add a matte color in order to avoid a white "fringe" in a browser. Fortunately, Photoshop's optimization tool makes this an easy procedure.
Procedure
Prepping for the exercise
- download starter files (move files to proper location)
- download CSS reset starter files (move CSS files to proper location)
- launch Photoshop, file > new (210 x 50px, RGB, transparent)
- file > place "logo.ai", scale down slightly
- open "tile.jpg": eye-dropper a typical yellow, close
- file > save for web (GIF 32 no dither, matte=foreground color)
Laying out the résumé page
- launch dreamweaver
- open "resume.html"
- insert > image "logo.gif" at top of file
- window > CSS: link "reset.css", "boilerplate.css", "font.css"
- select <body>: insert > layout objects > div tag: id=wrapper
- window > CSS: add the following CSS styles to this document only
• div: border: solid, thin, red (temporary style)
- window > CSS: add the following CSS styles to "layout.css"
• body: background: image="tile.jpg"
• #wrapper: box: width=800px, margin left/right=auto
• ul li: list: image="bullet.gif";
• .col1: box: float=left, width=280,
padding-bottom=6em
• .col2: box: float=left, width=500,
padding-bottom=6em
• .rule: border-top: solid, thin, black; box: height=2em
- select <img>
- insert > layout objects > div: class=col1
- select each <ul>
- insert > layout objects > div: class=col1
- select each <p>
- insert > layout objects > div: class=col2
- add <br.clear> to clear float (after each <div.col2>)
- insert > layout objects > div: class=.rule (as needed)
- replace placeholder text with
- save, file > preview in browser (opt+F12 and cmd+F12)
Fine-tuning the CSS
- select first <div.col2>: id=top
- window > CSS: add the following CSS styles to "layout.css"
• #top: box: margin-top=12px
- window > CSS: edit the following CSS styles:
• disable borders in temporary <div>
• .col2: box: margin-left=20px
• .rule: box: margin-left=40px
• #wrapper: box: margin-top=30px, padding-right=40px
- save, file > preview in browser (opt+F12 and cmd+F12)
Grading
- publish file (see separate lesson)
- make a link from your process page to this assignment
