Agenda:
Item#1 --- Finish up your Miss Baker typography lesson and show me the result for a grade.
- - - - -
Item #2 --- Read this article (http://designfestival.com/2011/top-10-dos-and-donts-of-web-typography) and answer the following questions in an email to Mr. Seiler. Copy and paste the Question into the email when you provide an answer.
a) Why should we NOT put continuous text in all capitals?
b) Why is contrast important to typogrpahy on a website?
c) What are some general guidelines for applying HEADINGS/HEADLINES to a page?- - - - -
Item#3 --- Complete the hyperlink lesson as described below. Due date: End of class on Friday.
Now we finish up our typography unit by concentrating on links. Hyperlinks, that is. Hyperlinks are typically styled in CSS by using what we call pseudo-classes. What are are styling is the tag, of course, and it has 5 "states" that we style:
LINK - the way the hyperlink looks before the user clicks it.
VISITED - the link has already been clicked
ACTIVE - the way the link looks "during" the actual click (doesn't last long)
HOVER - when you mouse-over the link
*FOCUS - when the user tabs through the links using the tab key; this is a KEY feature for accessibility.
Mnemonic device to remember this: LoVe-HAte Friends
To remove or not remove the link underline? That is a debate among designers and there is currently no "right" or "wrong" answer on that topic. It is up to you.
An example of the code is below:
a: link
{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
}
Assignment:
- Create a new, blank X(HTML) page (strict) and choose a school-appropriate topic.
- Create a heading 1 (Example: "The ins and outs of canine care")
- Write a thoughtful, well-reasoned paragraph on the topic (no research needed, just make sure it makes sense) Don't forget those tags!
- Create a heading 2 called "Further Reading"
- Add 5 links to sites that provide further reading on your school-appropriate subject.
- Most importantly for this assignment - STYLE the links - all 5 states - Link, Visited, Hover, Active, Focus
- Show me your page and code when you are finished.
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.