1) log onto docs.google.com: <ul><ul><li>username: USCiml140 </li></ul></ul><ul><ul><li>password: imlpassword </li></ul></...
2) Open Dreamweaver <ul><ul><li>create new site </li></ul></ul><ul><ul><li>save in evans design folder </li></ul></ul>
3) Review content <ul><ul><li>basic html (no formatting) </li></ul></ul><ul><ul><li>empty stylesheet </li></ul></ul>
4) Add <div> </div> to create formatting structure <ul><ul><li>wrap elements </li></ul></ul><ul><ul><li><div id=&quot;wrap...
3) Create CSS page formats content - fonts, colors formats elements - layout
3a) Link CSS to main.html multiple screen>(folder) stylesheet     or window>CSS style, click &quot;link&quot; in lower rig...
4) CSS comment categories /* reset */  /* global */ /* containers */ /* images */ /* text-elements */ 
5) /* global */ html    { } body    { }
5) /* global */ html    { } body    { background-color: #C2822f;}
6) Create wrapper elements #wrapper { width: 900px; margin: 0px auto; background-color: #FFF; }
Next: to create a border around the wrapper and keep everything centered you must create another <div> </div> tag on the m...
4) Add <div> </div> to create formatting structure <ul><ul><li>wrap elements </li></ul></ul><ul><ul><li><div id=&quot;oute...
8) Copy #wrapper CSS elements and paste on line below, but change #wrapper to #outer and width: 960; #outer { width: 960px...
9)   Logo element   #logo {padding-top: 30px; }
10)    social-media-icons   #social-media-icons {float: right; }
10)    #!ck   #social-media-icons {float: right; }
11)   Add to logo element:   #logo { margin: 30px 0px;  float: left;  }
12)   topnav elements:   #topnav { clear: both; }
12)  reference a specific aspect of social-media-icons below #social-media-icons :   #social-media-icons ul li { display: ...
12)  create margin spacing to lower social-media-icons on the page   #social-media-icons ul { padding-top: 30px; }
#social-media-icons { float: right; } #social-media-icons ul li { display: inline; }   #social-media-icons ul { padding: 3...
what is the difference between margins and padding? who cares! outside inside
13) create links to your nav bar
14) now we need to create more #topnav elements #topnav ul { border-top: 1px #CCC solid; padding: 10px 0px; }
15) now we need to create  even  more #topnav elements #topnav ul li { display: inline; }
16) now we need to create  even  more #topnav elements #topnav ul li { display: inline; }
17) now we need to create  even  more #topnav elements #topnav ul li a { padding-right: 15px; text-decoration: none;}
18) now we need to create  even  more #topnav elements #topnav a:link { color: #000; }
now we need to create our two columns: right column = 200px left column = 650px space between = 50px
19) let's format the #content element #content { width: 650px; float: left; }
20) let's format the #right-side element #right-side { width: 200px; float: right; }
21) let's start working on the footer (it's harder than you think!) #footer { clear: both; }
22) do we need any spacing around the banner?  #banner { margin-bottom: 30px; }
23) let's format our headline tags?  h1 { color: #9A7418; border-bottom: 1px #CCC solid; padding-bottom: 15px;}
24) do we need a margin for more spacing?  h1 { color: #9A7418; padding-bottom: 15px; border-bottom: 1px #CCC solid;  marg...
25) let's format our sub-headline tags?  h2 { color: #000; }
26) let's format our sub-headline tags?  h3 { color: #000; }
27) more work on the #footer  #footer { clear: both;  border-top: 1px #CCC solid; }
28) more work on the #footer - padding (inside)  #footer { clear: both; border-top: 1px #CCC solid;}
29) now we need to center #footer by adding a class to the footer tag on the html document  <p class=&quot;footer-text&quo...
30) now add to the css stylesheet on html <p class=&quot;footer-text&quot;> copryright... </p> on CSS .footer-text { text-...
31) now add class to the two small images on html <img class=&quot;image-frame src=&quot;.jpg&quot; /> on CSS .image-frame...
32) now add class to the three dates to change their color on html <p class=&quot;date&quot;> on CSS .date { color: #9A741...
32) we might need to play with the margins to align the date better on both the .date class and h3  .date { color: #9A7418...
Upcoming SlideShare
Loading in...5
×

IML 140 Design - Basics

2,043

Published on

Published in: Education, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,043
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

IML 140 Design - Basics

  1. 1. 1) log onto docs.google.com: <ul><ul><li>username: USCiml140 </li></ul></ul><ul><ul><li>password: imlpassword </li></ul></ul><ul><ul><li>select: evans design </li></ul></ul><ul><ul><li>click and download </li></ul></ul><ul><ul><li>extract files & put on desktop </li></ul></ul>
  2. 2. 2) Open Dreamweaver <ul><ul><li>create new site </li></ul></ul><ul><ul><li>save in evans design folder </li></ul></ul>
  3. 3. 3) Review content <ul><ul><li>basic html (no formatting) </li></ul></ul><ul><ul><li>empty stylesheet </li></ul></ul>
  4. 4. 4) Add <div> </div> to create formatting structure <ul><ul><li>wrap elements </li></ul></ul><ul><ul><li><div id=&quot;wrapper&quot;>  </li></ul></ul><ul><ul><ul><li><div id=&quot;logo&quot;> </div> </li></ul></ul></ul><ul><ul><ul><li><div id=&quot;social-media-icons> </div> </li></ul></ul></ul><ul><ul><ul><li><div id=&quot;topnav&quot;> </div> </li></ul></ul></ul><ul><ul><ul><li><div id=&quot;banner&quot;> </div> </li></ul></ul></ul><ul><ul><ul><li><div id=&quot;content&quot;> </div> </li></ul></ul></ul><ul><ul><ul><li><div id=&quot;right-side&quot;> </div> </li></ul></ul></ul><ul><ul><ul><li><div id=&quot;footer&quot;> </div> </li></ul></ul></ul><ul><ul><li></div> </li></ul></ul>
  5. 5. 3) Create CSS page formats content - fonts, colors formats elements - layout
  6. 6. 3a) Link CSS to main.html multiple screen>(folder) stylesheet     or window>CSS style, click &quot;link&quot; in lower right of CSS styles window box open and click &quot;browse&quot; to find the stylesheet and click &quot;ok&quot;
  7. 7. 4) CSS comment categories /* reset */  /* global */ /* containers */ /* images */ /* text-elements */ 
  8. 8. 5) /* global */ html    { } body    { }
  9. 9. 5) /* global */ html    { } body    { background-color: #C2822f;}
  10. 10. 6) Create wrapper elements #wrapper { width: 900px; margin: 0px auto; background-color: #FFF; }
  11. 11. Next: to create a border around the wrapper and keep everything centered you must create another <div> </div> tag on the main.html page around the wrapper <div>  
  12. 12. 4) Add <div> </div> to create formatting structure <ul><ul><li>wrap elements </li></ul></ul><ul><ul><li><div id=&quot;outer&quot;> </li></ul></ul><ul><ul><ul><li><div id=&quot;wrapper&quot;>  </li></ul></ul></ul><ul><ul><ul><ul><li><div id=&quot;logo&quot;> </div> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><div id=&quot;social-media-icons> </div> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><div id=&quot;topnav&quot;> </div> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><div id=&quot;banner&quot;> </div> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><div id=&quot;content&quot;> </div> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><div id=&quot;right-side&quot;> </div> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><div id=&quot;footer&quot;> </div> </li></ul></ul></ul></ul><ul><ul><ul><li></div> </li></ul></ul></ul><ul><ul><li></div> </li></ul></ul>
  13. 13. 8) Copy #wrapper CSS elements and paste on line below, but change #wrapper to #outer and width: 960; #outer { width: 960px; margin: 0px auto; background color: #FFF; }
  14. 14. 9) Logo element   #logo {padding-top: 30px; }
  15. 15. 10)  social-media-icons   #social-media-icons {float: right; }
  16. 16. 10)  #!ck   #social-media-icons {float: right; }
  17. 17. 11) Add to logo element:   #logo { margin: 30px 0px; float: left; }
  18. 18. 12) topnav elements:   #topnav { clear: both; }
  19. 19. 12)  reference a specific aspect of social-media-icons below #social-media-icons :   #social-media-icons ul li { display: inline; }
  20. 20. 12)  create margin spacing to lower social-media-icons on the page   #social-media-icons ul { padding-top: 30px; }
  21. 21. #social-media-icons { float: right; } #social-media-icons ul li { display: inline; }   #social-media-icons ul { padding: 30px; } overview
  22. 22. what is the difference between margins and padding? who cares! outside inside
  23. 23. 13) create links to your nav bar
  24. 24. 14) now we need to create more #topnav elements #topnav ul { border-top: 1px #CCC solid; padding: 10px 0px; }
  25. 25. 15) now we need to create even more #topnav elements #topnav ul li { display: inline; }
  26. 26. 16) now we need to create even more #topnav elements #topnav ul li { display: inline; }
  27. 27. 17) now we need to create even more #topnav elements #topnav ul li a { padding-right: 15px; text-decoration: none;}
  28. 28. 18) now we need to create even more #topnav elements #topnav a:link { color: #000; }
  29. 29. now we need to create our two columns: right column = 200px left column = 650px space between = 50px
  30. 30. 19) let's format the #content element #content { width: 650px; float: left; }
  31. 31. 20) let's format the #right-side element #right-side { width: 200px; float: right; }
  32. 32. 21) let's start working on the footer (it's harder than you think!) #footer { clear: both; }
  33. 33. 22) do we need any spacing around the banner?  #banner { margin-bottom: 30px; }
  34. 34. 23) let's format our headline tags?  h1 { color: #9A7418; border-bottom: 1px #CCC solid; padding-bottom: 15px;}
  35. 35. 24) do we need a margin for more spacing?  h1 { color: #9A7418; padding-bottom: 15px; border-bottom: 1px #CCC solid; margin-bottom: 15px; }
  36. 36. 25) let's format our sub-headline tags?  h2 { color: #000; }
  37. 37. 26) let's format our sub-headline tags?  h3 { color: #000; }
  38. 38. 27) more work on the #footer  #footer { clear: both; border-top: 1px #CCC solid; }
  39. 39. 28) more work on the #footer - padding (inside)  #footer { clear: both; border-top: 1px #CCC solid;}
  40. 40. 29) now we need to center #footer by adding a class to the footer tag on the html document  <p class=&quot;footer-text&quot;> copryright... </p>
  41. 41. 30) now add to the css stylesheet on html <p class=&quot;footer-text&quot;> copryright... </p> on CSS .footer-text { text-align: center; }
  42. 42. 31) now add class to the two small images on html <img class=&quot;image-frame src=&quot;.jpg&quot; /> on CSS .image-frame { padding: 10px: border: 1px #CCC solid; margin: 10px; }
  43. 43. 32) now add class to the three dates to change their color on html <p class=&quot;date&quot;> on CSS .date { color: #9A7418; }
  44. 44. 32) we might need to play with the margins to align the date better on both the .date class and h3  .date { color: #9A7418; margin-bottom: 3px; } h3 {margin-top: 0px; }
  1. A particular slide catching your eye?

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

×