Go over Homework from Class 3
Get Started: Copy class 4 from the server to your desktop. Manage site in Dreamweaver
Hard return vs. soft return
In HTML, there are two types of lists:
- unordered lists – marked with bullets. An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
- ordered lists – marked with numbers or letters. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
Read & Practice: http://www.w3schools.com/html/html_lists.asp
Activity 1: Use Dreamweaver’s editor to add lists
Activity 2: Use CSS to stylize lists
With CSS, lists can be styled further, and images can be used as the list item marker. Try it:
Step 1: Copy this in your internal stylesheet (reference):
Step 2: Copy this between body tags:
<p>Example of ordered lists:</p>
Display Typefaces vs. Text Typefaces
“The best text typefaces are easy to read in long blocks of copy. They do not call much attention to themselves […] Conversely, display typefaces are used to entice a reader into text copy, to create a mood or feeling, or to announce important information. Sometimes, they accomplish all these purposes at the same time. They are intended to stand out, and they perform well when they are appropriate. However, display typefaces can look peculiar in applications where text typeface designs are warranted.” – Fonts.com
Activity 3: Customize Display and Text typefaces with Google Web Fonts
http://www.google.com/webfonts or search for Google web fonts at Google.com.
Type Poster Inspiration
You will be following along with instructor for the next activities. We will be using background images from the lovely Coffee Shop Blog.
Activity 4: Create font treatment in Dreamweaver with instructor
Choose one google web font in normal and bold weights.
Activity 5: Create font treatment in Dreamweaver with instructor
Choose two complimentary google web fonts
Activity 6: Create font treatment in Dreamweaver with instructor
Choose a script font and 2 colors
Activity 7: Create font treatment in Dreamweaver with instructor
Choose a font from google web fonts and get creative with color
Homework – DUE 9/21
Find an inspiration poster or other typography example and replicate it using CSS in Dreamweaver. (Don’t overwhelm yourself with something super complex – simple is beautiful)
Ongoing: continue working on your Exhibit Site, updating your plan with elements that you now know how to implement. First home page design due soon!