Languages
Pages
Legal
EM208: Web Development I 1
EM208: Web Development I
Final Project
Trina VanderLouw
Professor John Basco
Colorado Technical University
March 20, 2011
Highlights: HTML, CSS, Using internal and external links, Web forms,
Best Practices, Embedded music and video
Programs Used: Adobe Dreamweaver, Adobe Photoshop, Microsoft Word, CTU Virtual Campus
Instructor Feedback:
Excellent work this session Trina. You've crafted a beautiful site that people will find easy to
use. I hope you choose to use this project outside of class. It’s been fun having a designer in
class to bring some professional perspective.
Final Grade: A
EM208: Web Development I 2 Index – Setting up website with internal and external links and style sheet
About Me – Adding images and content
EM208: Web Development I 3 Resume – Unordered lists, links, style sheet
Projects – Links to external sites using blank tabs, style sheet
EM208: Web Development I 4 Contact Me –Web Form with text fields, radio buttons, check boxes, submit
Favorite Links – Embedded music and video
EM208: Web Development I 5 <html> <head> <title>Favorite Links - Trina VanderLouw</title> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> </head> <body> <div id="header" class="menu"> <h1><a href="index.html"><img src="./graphics/logo.png" alt="TRINA VANDERLOUW" width="625px" height="75px" style="padding-bottom: 10px; border: 0" /></a></h1><hr /> <h3><a href="about-me.html">ABOUT ME</a> <a href="resume.html">RESUME</a> <a href="samples.html">PROJECTS</a> <a href="contact-me.html">CONTACT ME</a> <a href="links.html" style="color: #fff">FAVORITES</a></h3> <hr /><br /> </div> <div id="main" class="content"> <h2>FAVORITE LINKS</h2> <table class="main"><tr> <td class="left" style="vertical-align: top"><img src="./graphics/signature.jpg" class="photos" alt="Trina's Signature - Harmony" /></td> <td class="center"><p> - FOR WEB DESIGN - <br /> <table class="links"><tr><td class="center"><a href="http://mrdoob.com/projects/harmony/#squares" target="_blank">Harmony</a></td><td>Procedural drawing tool</td></tr> <tr><td class="center"><a href="http://www.colorschemer.com/online.html" target="_blank">ColorSchemer</a></td><td class>Create your own HEX codes</td></tr> <tr><td class="center"><a href="http://bgpatterns.com/" target="_blank">BgPatterns</a></td><td>Background creator</td></tr> <tr><td class="center"><a href="http://tools.dynamicdrive.com/gradient/" target="_blank">Dynamic Drive</a></td><td>Gradient image maker</td></tr></table><br /> - JUST FOR FUN - <br /> <a href="http://pandora.com" target="_blank">Pandora Radio - Jack Johnson</a><br /> Jack Johnson, Jason Mraz, Mat Kearney, Howie Day,<br /> Ben Harper <embed src="music/WalkAway-BenHarper.mp3" width=20 height=15 autostart=false repeat=true loop=true></embed>, Yael Naim, Bob Marley, The Fray<br /> Eric Hutchinson, Pink Floyd <embed src="music/WishYouWereHere-PinkFloyd.mp3" width=20 height=15 autostart=false repeat=true loop=true></embed> </p><br /> </div></td><td class="right" style="vertical-align: top"><img src="./graphics/bg-maker.jpg" class="photos" alt="Background Maker" /></td></tr></table> <br /><br /> Video about the Harmony - Procedural drawing tool<br /><br /> <object width="640" height="390"><param name="movie" value="http://www.youtube.com/v/To1A-EPz79w&rel=0&hl=en_GB&feature=player_embedded&version=3"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed src="http://www.youtube.com/v/To1A-EPz79w&rel=0&hl=en_GB&feature=player_embedded&version=3" type="application/x-shockwave-
EM208: Web Development I 6 flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="390"></embed></object> </div> <div id="footer"> © 2011 Trina VanderLouw - EM208: Web Development I </div> </body> </html> /* --------- css styles for Trina VanderLouw ----------- */ body { margin-top: 40px; background: #000; color: #50A6c2; font-size: 20px; text-align: center; font-family: century gothic, arial, sans-serif} h1 {font-size: 54px; font-weight: normal; margin: 0; padding-bottom: 10px} h2 {font-size: 28px; font-weight: normal; color: #00688b} h3 {font-size: 20px; font-weight: normal; padding: 5px; margin: 0} h4 {font-size: 24px; font-weight: normal; color: #00688b; padding: 5px; margin: 0} p {line-height: 1.6em} hr {color: #696969; width: 75%; margin: auto} .photos {padding: 4px; border: 1px solid #00688b; width: 156px; height: 200px} .res-photos {border: 1px solid #000; width: 230px; height:165px } table.main {width:100%} table.links {width:100%} table.resume {width:84%; margin:0 8%} td.left {text-align: right; padding-right: 10px} td.center {text-align: center} td.right {text-align: left; padding-left: 10px} td.business {text-align: left; font-size: 22px; padding-left: 10px} td.dates {text-align: right} td.title {font-style: italic; text-align: left; padding-left: 20px} td.img {text-align: right; vertical-align: top; padding-top: 8px} ul.news {padding: 0; padding-bottom: 4px; list-style: none; margin: 0}
EM208: Web Development I 7 /* --------- link styles ----------- */ .menu a:link { color: #50A6c2; text-decoration: none; padding: 20px} .menu a:visited { color: #50A6c2; text-decoration: none; padding: 20px} .menu a:hover { color: #f4f4f4; text-decoration: none; padding: 20px} .content a:link { color: #00688b; text-decoration: none; padding: 0 10px} .content a:visited { color: #00688b; text-decoration: none; padding: 0 10px} .content a:hover { color: #50a6c2; text-decoration: none; padding: 0 10px} .resume a:link { text-decoration: none} .resume a:visited { text-decoration: none} .resume a:hover { text-decoration: none} /* --------- div styles ----------- */ #header { margin: auto; padding; 0; } #main { margin: auto; padding: 20 0 50; width: 75%; background-color: #fff; color: #00688B; border: 6px double #000033; }
EM208: Web Development I 8 #news { margin: auto; padding: 0; width: 100%; background-color: #50a6c2; color: #fff; } #footer { margin: auto; padding: 30px 0; font-size: 14px; }