IML 140 Design - Basics

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="wrapper"> 

o<div id="logo"> </div>o<div id="social-media-icons> </div>o<div id="topnav"> </div>o<div id="banner"> </div>o<div id="content"> </div>o<div id="right-side"> </div>o<div id="footer"> </div>

• </div>

3) Create CSS page

formats content - fonts, colorsformats elements - layout

3a) Link CSS to main.html

multiple screen>(folder) stylesheet

    orwindow>CSS style, click "link" in lower right of CSS styles windowbox open and click "browse" to find the stylesheet and click "ok"

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="outer">

o <div id="wrapper">  <div id="logo"> </div> <div id="social-media-icons> </div> <div id="topnav"> </div> <div id="banner"> </div> <div id="content"> </div> <div id="right-side"> </div> <div id="footer"> </div>

o </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 = 200pxleft column = 650pxspace 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="footer-text"> copryright... </p>

30) now add to the css stylesheeton html <p class="footer-text"> copryright... </p>

on CSS .footer-text { text-align: center; }

31) now add class to the two small imageson html <img class="image-frame src=".jpg" />

on CSS .image-frame { padding: 10px: border: 1px #CCC solid; margin: 10px; }

32) now add class to the three dates to change their coloron html <p class="date">

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; }