iml 140 design - basics
DESCRIPTION
TRANSCRIPT
![Page 1: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/1.jpg)
1) log onto docs.google.com:
• username: USCiml140• password: imlpassword• select: evans design• click and download• extract files & put on desktop
![Page 2: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/2.jpg)
2) Open Dreamweaver
• create new site• save in evans design folder
![Page 3: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/3.jpg)
3) Review content
• basic html (no formatting)• empty stylesheet
![Page 4: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/4.jpg)
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>
![Page 5: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/5.jpg)
3) Create CSS page
formats content - fonts, colorsformats elements - layout
![Page 6: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/6.jpg)
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"
![Page 7: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/7.jpg)
4) CSS comment categories
/* reset */ /* global */
/* containers *//* images */
/* text-elements */
![Page 8: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/8.jpg)
5) /* global */
html { }body { }
![Page 9: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/9.jpg)
5) /* global */
html { }body { background-color: #C2822f;}
![Page 10: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/10.jpg)
6) Create wrapper elements
#wrapper { width: 900px; margin: 0px auto; background-color: #FFF; }
![Page 11: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/11.jpg)
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>
![Page 12: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/12.jpg)
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>
![Page 13: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/13.jpg)
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; }
![Page 14: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/14.jpg)
9) Logo element
#logo {padding-top: 30px; }
![Page 15: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/15.jpg)
10) social-media-icons
#social-media-icons {float: right; }
![Page 16: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/16.jpg)
10) #!ck
#social-media-icons {float: right; }
![Page 17: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/17.jpg)
11) Add to logo element:
#logo { margin: 30px 0px; float: left; }
![Page 18: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/18.jpg)
12) topnav elements:
#topnav { clear: both; }
![Page 19: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/19.jpg)
12) reference a specific aspect of social-media-icons below #social-media-icons:
#social-media-icons ul li { display: inline; }
![Page 20: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/20.jpg)
12) create margin spacing to lower social-media-icons on the page
#social-media-icons ul { padding-top: 30px; }
![Page 21: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/21.jpg)
#social-media-icons { float: right; }
#social-media-icons ul li { display: inline; }
#social-media-icons ul { padding: 30px; }
overview
![Page 22: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/22.jpg)
what is the difference between margins and padding? who cares!
outside
inside
![Page 23: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/23.jpg)
13) create links to your nav bar
![Page 24: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/24.jpg)
14) now we need to create more #topnav elements#topnav ul { border-top: 1px #CCC solid; padding: 10px 0px; }
![Page 25: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/25.jpg)
15) now we need to create even more #topnav elements#topnav ul li { display: inline; }
![Page 26: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/26.jpg)
16) now we need to create even more #topnav elements#topnav ul li { display: inline; }
![Page 27: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/27.jpg)
17) now we need to create even more #topnav elements#topnav ul li a { padding-right: 15px; text-decoration: none;}
![Page 28: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/28.jpg)
18) now we need to create even more #topnav elements#topnav a:link { color: #000; }
![Page 29: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/29.jpg)
now we need to create our two columns:
right column = 200pxleft column = 650pxspace between = 50px
![Page 30: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/30.jpg)
19) let's format the #content element#content { width: 650px; float: left; }
![Page 31: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/31.jpg)
20) let's format the #right-side element#right-side { width: 200px; float: right; }
![Page 32: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/32.jpg)
21) let's start working on the footer (it's harder than you think!)#footer { clear: both; }
![Page 33: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/33.jpg)
22) do we need any spacing around the banner? #banner { margin-bottom: 30px; }
![Page 34: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/34.jpg)
23) let's format our headline tags? h1 { color: #9A7418; border-bottom: 1px #CCC solid; padding-bottom: 15px;}
![Page 35: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/35.jpg)
24) do we need a margin for more spacing? h1 { color: #9A7418; padding-bottom: 15px; border-bottom: 1px #CCC solid; margin-bottom: 15px; }
![Page 36: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/36.jpg)
25) let's format our sub-headline tags? h2 { color: #000; }
![Page 37: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/37.jpg)
26) let's format our sub-headline tags? h3 { color: #000; }
![Page 38: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/38.jpg)
27) more work on the #footer #footer { clear: both; border-top: 1px #CCC solid;}
![Page 39: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/39.jpg)
28) more work on the #footer - padding (inside) #footer { clear: both; border-top: 1px #CCC solid;}
![Page 40: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/40.jpg)
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>
![Page 41: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/41.jpg)
30) now add to the css stylesheeton html <p class="footer-text"> copryright... </p>
on CSS .footer-text { text-align: center; }
![Page 42: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/42.jpg)
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; }
![Page 43: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/43.jpg)
32) now add class to the three dates to change their coloron html <p class="date">
on CSS .date { color: #9A7418; }
![Page 44: IML 140 Design - Basics](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b8af5f4a79591b458b456d/html5/thumbnails/44.jpg)
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; }