IML 140 Design - Basics
Upcoming SlideShare
Loading in...5
×
 

IML 140 Design - Basics

on

  • 2,117 views

 

Statistics

Views

Total Views
2,117
Views on SlideShare
545
Embed Views
1,572

Actions

Likes
0
Downloads
4
Comments
0

2 Embeds 1,572

http://xwiki.usc.edu 1571
http://storm.usc.edu 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

IML 140 Design - Basics IML 140 Design - Basics Presentation Transcript

  • 1) log onto docs.google.com:
      • username: USCiml140
      • password: imlpassword
      • select: evans design
      • click and download
      • extract files & put on desktop
  • 2) Open Dreamweaver
      • create new site
      • save in evans design folder
  • 3) Review content
      • basic html (no formatting)
      • empty stylesheet
  • 4) Add <div> </div> to create formatting structure
      • wrap elements
      • <div id=&quot;wrapper&quot;> 
        • <div id=&quot;logo&quot;> </div>
        • <div id=&quot;social-media-icons> </div>
        • <div id=&quot;topnav&quot;> </div>
        • <div id=&quot;banner&quot;> </div>
        • <div id=&quot;content&quot;> </div>
        • <div id=&quot;right-side&quot;> </div>
        • <div id=&quot;footer&quot;> </div>
      • </div>
  • 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 right of CSS styles window box open and click &quot;browse&quot; to find the stylesheet and click &quot;ok&quot;
  • 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 main.html page around the wrapper <div>  
  • 4) Add <div> </div> to create formatting structure
      • wrap elements
      • <div id=&quot;outer&quot;>
        • <div id=&quot;wrapper&quot;> 
          • <div id=&quot;logo&quot;> </div>
          • <div id=&quot;social-media-icons> </div>
          • <div id=&quot;topnav&quot;> </div>
          • <div id=&quot;banner&quot;> </div>
          • <div id=&quot;content&quot;> </div>
          • <div id=&quot;right-side&quot;> </div>
          • <div id=&quot;footer&quot;> </div>
        • </div>
      • </div>
  • 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; }
  • 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: inline; }
  • 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: 30px; } overview
  • 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; margin-bottom: 15px; }
  • 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&quot;> copryright... </p>
  • 30) now add to the css stylesheet on html <p class=&quot;footer-text&quot;> copryright... </p> on CSS .footer-text { text-align: center; }
  • 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; }
  • 32) now add class to the three dates to change their color on html <p class=&quot;date&quot;> on CSS .date { color: #9A7418; }
  • 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; }