Css group


Published on

CSS Group Presentation for Final Project in WEB130

Published in: Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Css group

  1. 1. CSS GROUP Sonia Leng & Leslie Steele
  2. 2. Here is a screenshot of our design!
  3. 4. Our CSS Project <ul><li>We modeled our CSS layout over the Sakura layout from: http://www.csszengarden.com/?cssfile=/208/208.css&page=0 . </li></ul><ul><li>So this project consisted of many CSS rules. I’ll outline the most important ones since the rest are redundant. </li></ul><ul><li>This project used an external cascading style sheet. </li></ul>
  4. 5. <ul><li>Our Div Ids: #container; #pageHeader, #firstblock (secondblock, etc.) </li></ul><ul><ul><li>the above gave the content areas for the header and area where the entire website would be. So, for example, Our CSS Zen Garden , would be the #pageheader background image. </li></ul></ul><ul><ul><li>i.e. #pageHeader { width: 700px; height: 200px; background-image: url( pageheader.jpg ); background-position: center; margin-top: 10px; </li></ul></ul>
  5. 6. More Div Ids <ul><li>#firstblock h3 (#secondblock h3, etc.) helped to position the graphic contain in #firstblock. </li></ul><ul><ul><li>i.e.: #firstblock h3 {height: 100px; width: 500px; margin: -3px 0px 0px 0px; background-image: url(leslieenlightenment.jpg); background-position: top; background-repeat: no repeat; </li></ul></ul><ul><ul><ul><li>The margin tool helped to position the side graphic (i.e. The Road to Enlightenment) exactly on the page. </li></ul></ul></ul>
  6. 7. DIV ID for navigation <ul><li>#navigation; #videonavigation were used to position the nav bar area on the left of the page. I used #navigation {float: left;} to allow the nav. bars to STAY on the left side. </li></ul>
  7. 8. Div Classes used: <ul><li>.button a; .button a:hover for the link buttons on the page under the div id for navigation. The CSS helped to make rollover images. </li></ul><ul><li>i.e. when your cursor goes over the link button, an image shows up. </li></ul>
  8. 9. Generic CSS rules used: <ul><li>P, body, a, and a:hover were used for general page characteristics. </li></ul><ul><li>i.e. a:hover {font-family: Georgia, “Times New Roman”, Times, serif; font-size: 16px; text-decoration: overline; color: #f32b11; background-color: #f7c041 </li></ul><ul><li>The color scheme for the website design was derived from the page header. </li></ul>
  9. 10. What Are Benefits to a CSS Layout? <ul><li>Saves time by formatting the layout + multiple web pages by only using one file. </li></ul><ul><li>Different style sheets can be specified to use depending on the technology. This can include PDAs or other mobile devices. </li></ul><ul><li>Pages are read more accurately and helps screen readers; best for disabled persons. </li></ul><ul><li>Reduces amount of HTML code needed for a page, thus decreasing overall bandwidth usage. </li></ul>
  10. 11. More benefits to CSS Layouts! <ul><li>Fasting loading for pages in comparison to a table-oriented layout. </li></ul><ul><li>Replaces lengthy HTML in the .html file. </li></ul><ul><li>Web site development is much easier and shortened. </li></ul><ul><li>Easily replaces JavaScript navigation (which takes up a large amount of code); some users may not enable JavaScript so the user may not see the navigation area. </li></ul>
  11. 12. What are Key Considerations for use of CSS? <ul><li>Does the user: </li></ul><ul><ul><li>want a uniform-looking site without clutter? </li></ul></ul><ul><ul><li>require specific position of webpage elements? </li></ul></ul><ul><ul><li>require specific spacing between text? </li></ul></ul><ul><ul><li>Desire to remove the nasty underline on hyperlinks? </li></ul></ul><ul><ul><li>Increase attractiveness and ease of coding and updating the website design? </li></ul></ul>
  12. 13. Examples of how to use CSS effectively: <ul><li>Format text </li></ul><ul><li>Use uniform fonts </li></ul><ul><li>Format links </li></ul><ul><li>Adjust margins (so you can position the information) </li></ul><ul><li>Adjust borders </li></ul><ul><li>Add customized CSS rules for tables so there is less clutter </li></ul>
  13. 14. In Conclusion: <ul><li>We showed a screenshot of our own layout. </li></ul><ul><li>Defined the many CSS rules for the website layout. </li></ul><ul><li>Mentioned the benefits of CSS </li></ul><ul><li>Offered key considerations and examples for use of a CSS layout. </li></ul>
  14. 15. We hoped you liked our layout and that it inspires you to make one for your own website! Thanks for watching! - Sonia & Leslie
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.