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