Objective

To learn CSS layout techniques by recreating this web page.

Discussion

Good web typography is based on solid print typography principles. In other words, all the rules for print typography still apply even though you are reading on a digital screen.

The major difference between web and print typography is control. In digital media applications, the user has more control than the designer in terms of browser width, type sizes and line breaks. Hyphenation is non-standard on the web and widows and orphans can not really be controlled. Despite this loss of control, designers can still design responsively and accommodate for the narrowest as well as the widest screens.

Although Verdana and Georgia are still the most legible fonts for small type on low resolution screens, there are now many other reasonable (and free) alternatives besides the web core fonts. Google web fonts is the most popular font embedding option and their library of both text and headline fonts are constantly growing (also see 25 Outstanding Google Fonts).

Procedure

Prepping for the exercise

1. download starter files
2. move files to "html" folder
3. launch dreamweaver
4. site > manage sites: import "jsmith-gds110.ste" (if needed)
5. open "google.html"; note structure
6. view > code and design
7. design view window: edit > select all (cmd+A)
8. insert > DIV tag (wraparound, id="wrapper")
9. select <p> for "call-out" paragraph
10. insert > DIV tag (wraparound, class="callout")

Embedding Google fonts

1. browse to fonts.google.com/#HomePlace:home
2. search for "roboto"
3. choose "roboto" and "roboto slab", click "2 families selected"
4. click "customize", select only the following weights:
   • roboto slab: bold 700
   • roboto: regular 400
   • roboto: regular 400 italic
   • roboto: bold 700
   • roboto: bold 700 italic
5. copy/paste embed code to "google.html"

Adding CSS

1. window > css designer: + source: attach existing css file "normalize.css"
2. window > css designer: + source: define in page
3. window > css designer: + selectors:
   • #wrapper: box: margin-left/right: auto; width: 80%; margin-top/bottom: 50px; min-width: 300px; max-width: 700px
   • a: color: #6642fc; text-decoration: none; font-weight: bold;
   • a:hover: text-decoration: underline
   • ul li: list-style-image: url(images/triangle.png);
   • body: "Roboto", "Roboto Regular", sans-serif (edit font list, modify code); font-size: 0.9em; line-height: 1.8em; bg: color=#f1f0fe
   • h1: "Roboto Slab", "Roboto Slab Bold", serif (edit font list, modify code); font-size: 2.5em; line-height: 1.2em
4. duplicate h1, rename h2: font-size: 1.8em
5. duplicate h2, rename h3: font-size: 1.4em
6. add new css selector for ".call-out":
   • layout: width: 35%; min-width: 150px; margin-right: 20px; padding-top/bottom: 6px; float: left
   • text: font-size: 1.2em; line-height: 1.5em; color: #6642fc
   • border: top/bottom: width=2px; style=solid; color=#6642fc
   
7. save, file > preview in browser (opt+F12 and cmd+F12)

Grading

1. make a link from your Process Page to this assignment
2. publish file (see separate lesson)
3. also print a proof for grading
4. file your graded proof in your Process Book for individual review