Hope this tutorial gave you a better oversight on how you can interpret a picture and then turn it into HTML and CSS. Something might have brief main reason is because did not find them needing an explanation. The CSS Setup Section gave you almost all the CSS tags used in this design. Meaning if you can understand how to use those properties then the effects on each section is not needed to be explained. While I admit the JavaScript section is very short I believe I gave you most of the information that a beginner might need. If you would like to learn more about the JavaScript use w3schools or jQuery website to learn to use the functions found in this tutorial. So without further ado I will give you the source code in full for each page.
No Major Video was used in this tutorial. Will be used next time.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GMScripts - The Next Generation</title>
<link href="style/main.css" type="text/css" rel="stylesheet" rev="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/SlideShow.js"></script>
</head>
<body>
<div class="bgeffect">
<div class="fixed head">
<ul class="navigation right">
<li><a href="#">Home</a><div class="navHover"></div></li>
<li><a href="#">Services</a><div class="navHover"></div></li>
<li><a href="#">Porfolio</a><div class="navHover"></div></li>
<li><a href="#">Projects</a><div class="navHover"></div></li>
<li><a href="#">Partners</a><div class="navHover"></div></li>
<li><a href="#">About Us</a><div class="navHover"></div></li>
<li><a href="#">Contact Us</a><div class="navHover"></div></li>
</ul>
<div class="logo left"><a href="http://gmscripts.org/"> </a></div>
<div class="clear"></div>
</div>
<div class="ssfixed">
<div class="f10">
<div class="ssBody">
<div class="ssSlide" id="SlideShow">
<ul>
<li><img src="images/slideshow/Slide1.png" id="Slide1" alt="" /></li>
<li><img src="images/slideshow/Slide2.png" id="Slide2" alt="" /></li>
</ul>
</div>
<div class="ssButtons">
<div class="ssBLast left" id="ssLast"><a href="#last" onclick="slideLast();"> </a></div>
<div class="ssBNext right" id="ssNext"><a href="#next" onclick="slideNext();"> </a></div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="fixed mBody">
<div class="sider right">
<div class="mb">
<div class="header"> Header Goes Here </div>
Eros duis magna feugiat nonummy accumsan vulputate illum ut molestie ut nisl duis duis dolore ullamcorper erat.
</div>
<div class="mb">
<div class="header"> Header Goes Here </div>
Eros duis magna feugiat nonummy accumsan vulputate illum ut molestie ut nisl duis duis dolore ullamcorper erat.
</div>
</div>
<div class="main left">
<div class="mb">
<div class="header"> Header Goes Here </div>
Eros duis magna feugiat nonummy accumsan vulputate illum ut molestie ut nisl duis duis dolore ullamcorper erat.
<div class="mb">
<div class="header"> Header Goes Here </div>
<img src="images/body/Sample-Image.png" alt="" />
</div>
</div>
<div class="clear"></div>
</div>
<div class="fixed footer">
<div class="copy right">
© 2010 GMScripts
<br />
ALL RIGHTS RESERVED
</div>
<ul class="navigation left">
<li><a href="#">Home</a><div class="navHover"></div></li>
<li><a href="#">Services</a><div class="navHover"></div></li>
<li><a href="#">Porfolio</a><div class="navHover"></div></li>
<li><a href="#">Projects</a><div class="navHover"></div></li>
<li><a href="#">Partners</a><div class="navHover"></div></li>
<li><a href="#">About Us</a><div class="navHover"></div></li>
<li><a href="#">Contact Us</a><div class="navHover"></div></li>
</ul>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
/* Background Design and Effects */
body {
background: url(../images/bg/bg-pattern.png) left top repeat;
color: #2e2e2e;
font-size: 11px;
font-family: arial;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
.bgeffect {
min-width: 900px;
min-height: 500px;
background: url(../images/bg/bgdesign.png) center top no-repeat;
}
/* Information Holders */
.fixed {
margin: 0px auto 0px auto;
padding: 0px 0px 0px 0px;
width: 880px;
}
.ssfixed {
margin: 0px auto 0px auto;
padding: 0px 0px 0px 0px;
width: 900px;
}
.ssfixed .f10 { padding: 10px 0px 10px 0; border-radius: 5px; }
/* Banner Information/Holders */
.head { padding: 0px 0px 50px 0px; }
.logo { width: 202px; height: 52px; margin: 25px 0px 0px 0px; background: url(../images/Logo/GMLogo-N.png) center center no-repeat; }
.logo:hover { background: url(../images/Logo/GMLogo-H.png) center center no-repeat; }
.logo a { display: block; width: 202px; height: 52px; }
.navigation { width: 650px; margin: 43px 0px 0px 0px; list-style: none; font-size: 14px; font-weight: bold; float: left; padding: 0px 0px 0px 0px; }
.navigation a { color: #FFFFFF; text-decoration: none; }
.navHover { height: 5px; }
.navigation li { list-style: none; padding: 0px 5px 3px 5px; margin: 0px 5px 0px 5px; float: left; }
.navigation li:hover .navHover { background: url(../images/Fades/Fade-20.png) left top repeat; }
/* SlideShow Setup */
.ssBorder { height: 10px; width: 900px; }
/* Slide Body and Slides */
.ssBody { padding: 3px 3px 3px 3px; background: #FFFFFF; margin: 0px 10px 0px 10px;}
.ssSlide { background: url(../images/slideshow/Slide1.png) center center no-repeat; width: 874px; height: 174px; overflow: hidden; }
.ssSlide ul { position:relative; width: 3500px; height: 174px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; }
.ssSlide ul li { height: 174px; width: 874px; list-style: none; float: left; }
/* Slide Buttons */
.ssBLast { width: 48px; height: 48px; background: url(../images/slideshow/Arrow-Left.png) center center no-repeat;
position: absolute; margin: -110px 0px 0px -27px; }
.ssBLast a { display: block; width: 48px; height: 48px; }
.ssBNext { width: 48px; height: 48px; background: url(../images/slideshow/Arrow-Right.png) center center no-repeat;
position: absolute; margin: -110px 0px 0px 853px; }
.ssBNext a { display: block; width: 48px; height: 48px; }
/* Main Body and Holders */
.mBody { background: url(../images/body/Main-Body.png) right top repeat-y #FFFFFF; padding: 10px 0px 0px 0px; }
.sider { width: 238px; margin: 0px 14px 10px 0px; }
.sider .mb { margin: 0px 0px 10px 0px; }
.main { width: 603px; margin: 0px 0px 10px 10px; }
.main .mb { margin: 0px 0px 8px 0px; border-bottom: 1px solid #D2D2D2; padding: 0px 0px 3px 0px; }
.mBody img { border: 3px solid #D2D2D2; margin: 3px 3px 3px 3px; }
.mBody img:hover { border: 3px solid #878787; }
/* Footer Area */
.footer { }
.footer .navigation { margin: 10px 0px 0px 0px; font-size: 12px; }
.footer .copy { color:#FFFFFF; font-size: 11px; font-weight: bold; text-align: right; margin: 8px 0px 0px 0px; }
/* Text Tags */
.header { font-size: 13px; font-weight: bold; color: #09F; margin: 0px 0px 3px 5px; }
/* Fades */
.f10 { background: url(../images/Fades/Fade-10.png) left top repeat; }
.f20 { background: url(../images/Fades/Fade-20.png) left top repeat; }
/* Float and Cache Tags */
.left { float:left; }
.right { float:right; }
.clear { clear:both; }
// JavaScript Document
var i = 0;
var imax = 1;
var ssMove = 874;
function slideNext() {
if(i < imax) {
i++;
var setMove = -1 * (874 * i);
$('#SlideShow ul').stop().animate({'marginLeft':setMove+'px'},350);
} else {
i = 0;
var setMove = -1 * (874 * i);
$('#SlideShow ul').stop().animate({'marginLeft':setMove+'px'},350);
}
return false;
}
function slideLast() {
if(i > 0) {
i = i - 1;
var setMove = -1 * (874 * i);
$('#SlideShow ul').stop().animate({'marginLeft':setMove+'px'},350);
} else {
i = imax;
var setMove = -1 * (874 * i);
$('#SlideShow ul').stop().animate({'marginLeft':setMove+'px'},350);
}
return false;
}
SlideShow = setInterval ( "slideNext()", 10000);