Continuing from where we left off. We have just setup our folder, the beginning of our design, and finally our background to our layout. Next we will begin with the internals of our website design.
Let’s do our banner section next since website code is read from top down. So let’s design our site in the same order. So following order we will build our banner section. So too start off we will be placing a "fixed" class div inside our "bgeffect" to keep the "bgeffect" div behind all our information and sections.
<div class="bgeffect">
<div class="fixed head">
</div>
</div>
Next we need to setup the information inside the banner. In this case we have a navigation and logo inside our banner section. So we will setup a list with links inside to make our navigation. Then we will setup a div named "logo left" meaning it has the class "logo" and "left" which will be our container for our image.
<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>
Please be aware this is inside the “fixed” div. If you didn’t notice I setup a div inside each one of my list links named "navHover" this div will come in handy once we add CSS and will act as our transparent border under our links like in our design. Also there is a random div called "clear" well this one to push our fixed div to cover our data since float have no height within the main div unless you state a style of "clear:both" or "overflow:hidden" in specific locations. In this case I’m going to setup a "clear:both" style which is the div called "clear"
Now we have our slide show section. This is the trickiest part, now why is that? One it has rounded corners, second it has arrow buttons which look like they are not within the div, and finally the images need to slide. Well to make this the easiest for beginners as possible I have integrated CSS3 into the original design to help with the rounded corners. So let’s get on the road! This section is after the "fixed" div not within the "fixed" div.
<div class="ssfixed">
<div class="f10">
</div>
</div>
Here is a breakdown of the current slideshow setup. We first have the "ssfixed" div is our main container and reference for knowing this is the slideshow. I use the name "ssfixed" instead of "fixed" to clarify this. Next we have the div "f10" which the naming since for this is because I’m setting a ten percent transparent fade onto the slideshow.
Next we will do the details. Meaning we need to setup our slides then our slideshow button’s. In this design I make grouping divs, one is "ssSlide" and the other is "ssButtons". Now let’s insert this code into our "f10" div.
<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>
Now within this code I have also included a "clear" div in which is making sure our data appears correct once we setup the CSS. Now looking into the setup, I created a list for the images that will be displayed. Then for the buttons I created two divs that have two class names. Next you might find something odd I setup a "onclick" event. This event is being used to trigger JavaScript when the object is clicked. The data within this event is the function we will setup for this simple slideshow.
Now finally we have our main body section. This section includes a side bar and our main content area. In this setup we will be placing this after the "ssfixed" div. and then used another "fixed" div.
<div class="fixed mBody">
<div class="clear"></div>
</div>
In this one div we also added another name "mBody" this is to help clarify the location of this div and allow us to attach only properties to it in case we need to.
Let’s start with our side menu. Since we know it will be right I’m going to be using the name "right" and a name to clarify it’s my side bar. Then we will setup fake details to help with clarifying how it looks with data. To help break down the data inside the side bar we will setup a div called "mb" which will act as our separator.
<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>
Finally we have our main content area to do. This will be just like the left but instead I will setup a sample image in one of the sample boxes. Also instead of "right" this will be "left" to say it’s on the left side.
<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>
I am going to simple explain and give you this in one whole code. The footer is after the "fixed" div. It will have a div called "copy" which will hold the copyright information. Then for the navigation it will be setup just like our navigation in our banner, finally with a last div of "clear".
<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>
Now Save Your File as index.html
<!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>