Advanced Online Media

 

HOME

SYLLABUS

TOOLS

DESIGN

MULTIMEDIA

WRITING

RESOURCES

CSS

ASSIGNMENT
CSS PRACTICE: “JABBERWOCKY”
<div> TAGS
ONLINE COLOR HELPERS
REVIEW OF CSS
TUTORIALS

REVIEW OF CSS (Cascading Style Sheets)
Professionals use CSS to design Web pages. It’s much easier to make changes throughout your site than it is to go through and make changes page by page. NOTE: CSS syntax is completely different from HTML syntax.

     <body>  
     #wrap     
         width: 800px; Sets width of big container
         height: auto; Lets height adjust to content
         padding: 0px; Creates padding around body of page
         margin-top: 50px;

 Sets top margin down 50 pixels
         border: 2px double #FFFFFF; Defines a 2-px double-line border
      }  
     #wrap #header {  
         width: 800px;  
         height: 130px;  
         padding: 0px;  
         margin: 0px;  
         float: left; Makes everything line up properly
         background-color: #D2B48C; Makes background color of the header tan
      }  
     #wrap #main {      
         width: 800px;  
         height: auto;  
         padding: 0px;  
         margin: 0px;  
         background-color: #000000; Makes box color of this box white
         font-family: Verdana, Arial, Helvetica, sans-serif;  
        font-size: 10px;  
        line-height: 125%; (% NOT pixels!) Adjusts leading (space between lines)
     }  
     a:link {   
         color: #865CFF;  
         text-decoration: none;  
     }  
</body>  

<div> TAGS
You’ll enclose parts of your page with <div> tags. Put navigation buttons in a <div>. Put your main text in a big block inside another <div>. Use a <div> to enclose a photo and a caption together.

Then use CSS to style the divs. That is, write the rules for how each div should look.

Jump to top

CSS PRACTICE: “JABBERWOCKY”

  1. 1. Go to jmc460. Drag the jabberwocky folder onto your desktop. Do NOT open it in the jmc460 folder.
  2. Open jabberwocky.html in Dreamweaver.
        a. If you can’t see the CSS styles, go to Window > CSS.
        b. If the SPLIT screen isn’t showing, click on SPLIT in the upper left corner.
  3. The first two verses look different from the next five verses. Why?
  4. Edit Jabberwocky.html so the next five verses look the same as the first two verses. Hint: <p class="verse">
  5. Save the file and refresh the file in the browser. To preview in the browser:
        a. Click on the globe near the top of the Dreamweaver page.
        b. If that doesn’t work, drag the file to the Safari or Firefox icon in the dock.
        OR
        c. Right-click on the file and open in the browser.
  6. Use the link at the top of the Jabberwocky page to view the ‘In French’ file.
  7. Experiment with the BODY tag in both Dreamweaver and in the CSS file.
        a. In jabberwocky.html (Dreamweaver file), click on the BODY tag in the CSS window. Change the background color to #71414A.
        b. In jabberwocky.css (CSS file) change the line “body {background-color: #FFFFCC}” to read: “body {background-color: #71414A}”
  8. Save the changed file and look at the result in Jabberwocky.html in the browser.
  9. Check the “In French” file. Are the changes there too?
  10. Either in Dreamweaver or CSS, change the color of the Anchor tags for the a:link (link) and a:visited (visited link).
  11. To get rid of the underline in the Anchor tags, double-click on a:link in the CSS window, then click Decoration: none.
  12. Change the attributes of the <div.hr> tag. <hr> stands for horizontal rule.
  13. Change the ugly green box around the title so it's not so ugly.
  14. For the final challenge, style “Jabberwocky” using the six type contrasts we studied—size, weight, structure, form, direction and color. Be sure to align things that should be aligned. Make it pretty!
  15. Show your beautiful revision to Carol or Nancie, then start the homework.

IMPORTANT! Save the CSS file before refreshing the browser file. If a change doesn’t show up, empty the browser’s cache.

Jump to top

penguins
Cecil R. Schwalbe The smallest warm-weather penguin, the Galapagos penguin stands only 16 to 18 inches tall and weighs 5 pounds.

ASSIGNMENT (thanks to Mindy McAdams)

PURPOSE
Show your mastery of styling and controlling text with CSS by restyling text according to the instructions below.

All fonts and colors in HTML documents today are specified using CSS. The old use of <font> tags is considered amateurish and outdated. You’re encouraged to use text attributes other than font-family, font-size and font-weight, but please remember that legibility is your first priority. Do NOT load on the styles in any way that makes the page look weird or ugly.

INSTRUCTIONS

  1. Download the two files below by right-clicking (or CONTROL + click on a Mac):
       • HTML file
       • CSS file  

  2. There’s one heading in the document <h1>. Use CSS to specify the font, size and weight of the <h1> heading.

    IMPORTANT! Make changes ONLY in the CSS, just as we did with “Jabberwocky.” Since there is an external style sheet (exercise.css), do NOT add new styles inside the head tag in the split-screen view. Make changes that affect ONLY the text itself but not the layout or positioning of anything. If you have more than one style with the same name, such as .subhead, you’ll have problems.

  3. Black text appears on a white background in several places. Use CSS to specify the font, size AND the line height you’d like for the BLACK text on a WHITE background. All text on the white background must be the same font (the heading, however, may be a different font). Remember what we learned about the typeface that’s easiest to read on the computer screen AND the size of the type that works best online.

  4. Make the intro text (white background) larger than the rest.

  5. Make the footer text (white background) smaller than the rest.

  6. There is black text on a beige background in the document. Use the type classification for this text that is the opposite of the one you specified for the text on the white background. If one is serif, then the other should be sans-serif. Use CSS to specify the font, size AND line height for the BLACK text on a BEIGE background. All text on the beige background must be the same font and size. (Note that all the text on a beige background is inside <div> tags.)

  7. Change the color scheme of the background <body> and the beige boxes (Hint: One box is called <example>, and the other is called <example2>) to a more harmonious color scheme.

    HINT: Use one of the online color helpers below.

  8. The a:link at the bottom of the page is now blue with an underline. Change the link to a harmonious color that is NOT underlined.

  9. Add a CSS style for an a:visited link in a contrasting color that is NOT underlined either.

    HINT: Click on the + to make a new CSS rule. Click on Advanced, then scroll to a:link. Pick a harmonious color. Under the Decoration category, click none.

  10. Style the entire composition using some of the six type contrasts we studied—size, weight, structure, form, direction and color.

  11. After you finish, put both files in a folder with your name on it INSIDE the jmc460>css folder. You do NOT need to print out anything. Do NOT rename either file.

GRADING 20 points

  • 5 points: overall appearance
  • 15 points: technical proficiency

Jump to top

penguins
Will Kirkland Galapagos penguins usually lay two eggs but raise only one chick.

ONLINE COLOR HELPERS

  • The Color Wizard
    Click the Launch the Color Wizard button. Type in a hex code, then click SET, or use the sliders to change colors.
  • Spin the Color Wheel
    Click the Spin the Color Wheel button. When you find a color you like, click HOLD. Keep doing that until you find a harmonious palette.
  • Color Palette Creator
    This fabulous tool allows you to input one base color (then click OK) and see a range of tints (blended with white) and shades (blended with black).
  • Color Palette Generator
    Enter the URL of an image to get a color palette that matches the image. This is useful for coming up with a color palette that matches a key image on your page.
  • Colors Palette Generator
  • Color Toy
    This site is fun. You can enter a hex code or try the Random button at the far right.
  • Color Scheme Generator
    Lots of buttons to push and play with. Pick any color and see monochrome, contrast, triad, tetrad and analogic color palettes. VERY useful for Web designers.
  • Colorcube
    See how your text color and link colors will look against your background color.
  • Adobe Kuler
    You can quickly create harmonious color themes on this site or download color schemes created by others.
  • Color Schemes
    This easy application lets you submit your favorite color scheme and vote for others.
  • EasyRGB: Color Harmonies
    This complex color-picking aid can help you find complementary colors. In the menu labeled RGB Range (bottom left inside the box), you can change the value to 0-FF and enter the Web hexadecimal values in the three boxes. Then click Start to get a set of colors.
  • Colors Palette Generator
    Upload an image to generate a color palette based on the image's primary colors. Useful for quickly grabbing a particular color within an image for inspiration.

Jump to top

TUTORIALS
Styling text with CSS tutorial
http://www.tutorialized.com/tutorial/CSS-Text-Styles/20586

Creating CSS styles
http://www.tutorialized.com/tutorial/Creating-CSS-Styles-in-DreamweaverMX/14060

Other tutorials
http://www.w3schools.com/Css/default.asp
http://www.tutorialized.com/tutorials/Dreamweaver/CSS/1

Jump to top
© 2008-2009 Carol B. Schwalbe