HV-Designs.co.uk

May 26th, 2009 in PSD Sitebuilds by Richard Carpenter

Your PROject Pt.3: 4 Additional Pages

• Share

Hello welcome to part 3 of the your PROject template. Today we’ll be creating 4 extra pages to go with our template.

Right lets get started, goto your folder wherr your template is copy your index.html file then paste it into the same directory. Rename the copied index.html file to services.html, then open it up in your code editor. Locate the code between the end div tag for the header all the way down to the container ends div. Highlight it all and hit the delete key, basically all’s were doing is removing the content area. This is what your code should look like once deleted.

<div id="container"><!--CONTAINTER STARTS-->

<div id="header"><!--HEADER STARTS-->

<div id="top-elements"><!--TOP ELEMENTS START-->

<div id="logo"><!--LOGO STARTS-->
<img src="images/logo.png" alt="Welcome To Your PROject" />
</div><!--LOGO ENDS-->

<div id="nav-bar"><!--NAVIGATION STARTS-->
<ul class="navlinks">
<li class="current"><a href="index.php">Home</a></li>
<li><a href="services.php">Services</a></li>
<li><a href="products.php">Products</a></li>
<li><a href="testimonials.php">Testimonials</a></li>
<li><a href="contact.php">Contact Us</a></li>
</ul>
</div><!--NAVIGATION ENDS-->

</div><!--TOP ELEMENTS END-->

<div id="featured"><!--FEATURED CONTENT STARTS-->
<div class="featured-text"><!--FEATURED TEXT STARTS-->
<h1 class="featured">featured text here 01</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor est et ante euismod vel euismod tortor ornare. Quisque turpis augue, iaculis vel luctus non, dapibus a ante. Quisque vitae turpis augue. Nulla facilisi.  Continue Reading...</p>
</div><!--FEATURED TEXT ENDS-->

<div id="featured-image01"><!--FEATURED IMAGE STARTS-->
<div class="featured-buttons"><!--NEXT AND PREVIOUS BUTTONS STARTS-->
<div class="featured-btn">
<img src="images/next_btn.png" alt="Next"  />
<div class="featured-btn"><img src="images/prev_btn.png" alt="Previous" />
</div>
</div>
</div><!--NEXT AND PREVIOUS BUTTONS END-->
</div><!--FEATURED IMAGE ENDS-->

</div><!--FEATURED CONTENT ENDS-->

</div><!--HEADER ENDS-->

THIS IS WHERE YOUR NEW CODE WILL GO

</div><!--CONTAINER ENDS-->

<div id="footer"><!--FOOTER STARTS-->
<div id="footer-content"><!--FOOTER CONTENT STARTS-->
<p>Copyright &copy; your project | All Rights Reserved</p>
<p>Design By <a href="http://www.richard-carpenter.co.uk">Richard Carpenter</a></p>
<p>&nbsp;</p>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="Valid CSS!" />
</a><a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10-blue"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
</p>

</div><!--FOOTER CONTENT ENDS-->
</div><!--FOOTER ENDS-->

We can now begin to add our modified layout for our services page. We’ll be mocking it up in the same way as we did for our main page boxes, only this time the box will be 900px wide. We mock it up like this.

<div class="services"><!--BOX STARTS-->
<div class="services-inside">
<h2>a content title here</h2>
<h2 class="boxtitle2">May 20, 2009</h2>
<p>SOME TEXT HERE</p>
</div>
</div><!--BOX ENDS-->

As you can see the code is pretty much the same as our main page code only difference is we’ve renamed the div’s. The css is also pretty much the same.

/* ----------SERVICE'S PAGE STYLES---------- */

.services {
	float: left;
	border: 1px solid #121212;
	margin-bottom: 15px;
	float: left;
	width: 898px;
}

.services-inside {
	background-color: #0c0c0c;
	border: 1px solid #030303;
	float: left;
	width: 876px;
	padding: 10px;
}

.services-inside p {
	padding-top: 10px;
}

Depending on what you actually want on your services page you’ll have to add in the extra styles. So if you wanted a list on the services page with some images then you’d have to style them under the “SERVICE’S PAGE STYLES” in the style sheet. Here is the code for my services page with images and a simple list.

<div class="services"><!--BOX STARTS-->
<div class="services-inside">
<h2>a content title here</h2>
<h2 class="boxtitle2">May 20, 2009</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis porttitor massa eu scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris eget metus orci, et venenatis turpis. Quisque felis velit, sollicitudin ac pellentesque vehicula, fermentum ut velit. <strong><em><a href="#">Etiam tellus ipsum, posuere nec molestie in, ultrices vel enim</a></em></strong><a href="#">.</a> Donec vel est orci. Donec diam leo, fringilla sit amet vehicula eu, dictum quis elit.</p>
<p>&nbsp;</p>
<h2>Services</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis porttitor massa eu scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris eget metus orci, et venenatis turpis.</p>

<ul class="service-list">
<li>Service #1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Service #2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Service #3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Service #4 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Service #5 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>

<h2>&nbsp;</h2>
<h2>another header goes here</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis porttitor massa eu scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris eget metus orci, et venenatis turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis porttitor massa eu scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris eget metus orci, et venenatis turpis.</p>
<img src="thumbnails/01.gif" alt="01" width="200" height="170" class="service-img" /><img src="thumbnails/02.gif" alt="02" width="200" height="170" class="service-img" /><img src="thumbnails/03.gif" alt="03" width="200" height="170" class="service-img" /><img src="thumbnails/04.gif" alt="04" width="200" height="170" class="service-img" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis porttitor massa eu scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris eget metus orci, et venenatis turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis porttitor massa eu scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris eget metus orci, et venenatis turpis.</p>
</div>
</div><!--BOX ENDS-->

You’ll now have to style the img tag’s and list’s in your stylesheet which looks like this.

.service-list li{
	padding-left: 10px;
	font-size: 0.7em;
	color: #FFFFFF;
	margin-left: 40px;
	line-height: 18px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.service-img {
	padding: 5px;
	background-color: #000000;
	border: 1px solid #383838;
	margin-left: 6px;
	margin-top: 10px;
	margin-bottom: 5px;
}

My services page looks like this.

So basically when creating your new pages depending on what you have in there will determine what styles you will need in your style sheet otherwise you can re-use styles we have already set. Thats our services page done, lets start on our products page. Copy your services.html file and paste a copy in the main directory, rename the file to products.html then open it in your code editor. Keep all the classes associated with the services page as we can reuse them for this page just remove all the content inbetween them.

Once you’ve removed all the content from the classes you should have something like this. (just remember if you change anything in the services page css it will automatically change on the products page also. You can get around this by using the same styles but change the class ID’s.)

<div class="services"><!--BOX STARTS-->
<div class="services-inside">
<h2>product #1 here</h2>
<h2 class="boxtitle2">product short info</h2>
CONTENT HERE
</div>
</div><!--BOX ENDS-->

For the products page i think we’ll have 3 boxes, to do this all’s we need to do is copy and paste the code above 2 times.

<div class="services"><!--BOX #1 STARTS-->
<div class="services-inside">
<h2>product #1 here</h2>
<h2 class="boxtitle2">product short info</h2>
CONTENT HERE
</div>
</div><!--BOX ENDS-->

<div class="services"><!--BOX #2 STARTS-->
<div class="services-inside">
<h2>product #1 here</h2>
<h2 class="boxtitle2">product short info</h2>
CONTENT HERE
</div>
</div><!--BOX ENDS-->

<div class="services"><!--BOX #3 STARTS-->
<div class="services-inside">
<h2>product #1 here</h2>
<h2 class="boxtitle2">product short info</h2>
CONTENT HERE
</div>
</div><!--BOX ENDS-->

All’s thats needed now is to stick some content inside each box. The content you choose to display and how you display it will determine what styles you have to put inside your style sheet. For instance if you look at the code below you’ll see what ive put in my three product boxes.

<div class="services"><!--BOX #1 STARTS-->
<div class="services-inside">
<h2>product #1 here</h2>
<h2 class="boxtitle2">product short info</h2>
<p><img src="thumbnails/03.gif" alt="Product Sample" width="200" height="170" class="imgfloat-right" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis porttitor massa eu scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris eget metus orci, et venenatis turpis. Quisque felis velit, sollicitudin ac pellentesque vehicula, fermentum ut velit. <strong><em><a href="#">Etiam tellus ipsum, posuere nec molestie in, ultrices vel enim</a></em></strong><a href="#">.</a> Donec vel est orci. Donec diam leo, fringilla sit amet vehicula eu, dictum quis elit.</p>
<ul class="service-list">
<li>Service #1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Service #2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Service #3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
</div><!--BOX ENDS-->

<div class="services"><!--BOX #2 STARTS-->
<div class="services-inside">
<h2>product #2 here</h2>
<h2 class="boxtitle2">product short info</h2>
<p><img src="thumbnails/01.gif" alt="Product Sample" width="200" height="170" class="imgfloat-left" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis porttitor massa eu scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris eget metus orci, et venenatis turpis. Quisque felis velit, sollicitudin ac pellentesque vehicula, fermentum ut velit. <strong><em><a href="#">Etiam tellus ipsum, posuere nec molestie in, ultrices vel enim</a></em></strong><a href="#">.</a> Donec vel est orci. Donec diam leo, fringilla sit amet vehicula eu, dictum quis elit.</p>
<ul class="service-list">
<li>Service #1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Service #2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Service #3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
</div><!--BOX ENDS-->

<div class="services"><!--BOX #3 STARTS-->
<div class="services-inside">
<h2>product #1 here</h2>
<h2 class="boxtitle2">product short info</h2>
<p><img src="thumbnails/03.gif" alt="Product Sample" width="200" height="170" class="imgfloat-right" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis porttitor massa eu scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris eget metus orci, et venenatis turpis. Quisque felis velit, sollicitudin ac pellentesque vehicula, fermentum ut velit. <strong><em><a href="#">Etiam tellus ipsum, posuere nec molestie in, ultrices vel enim</a></em></strong><a href="#">.</a> Donec vel est orci. Donec diam leo, fringilla sit amet vehicula eu, dictum quis elit.</p>
<ul class="service-list">
<li>Service #1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Service #2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Service #3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
</div><!--BOX ENDS-->

Each box contains a short paragraph, an image floated either left or right and again a small list. We can use the orginal P tag styles from our style sheet already, aswell as the list we already styled inside services section. All’s we need to style are some image left and right float options so we can float our product images either left or right. We can do this by adding the following css into our stylesheet.

/* ----------PRODUCT'S PAGE STYLES---------- */

.imgfloat-left {
	float:left;
	padding: 5px;
	background-color: #000000;
	border: 1px solid #383838;
	margin-right: 6px;
	margin-bottom: 6px;
	margin-top: 6px;
	margin-left: 6px;
}

.imgfloat-right {
	float:right;
	padding: 5px;
	background-color: #000000;
	border: 1px solid #383838;
	margin-left: 6px;
	margin-bottom: 6px;
	margin-top: 6px;
	margin-right: 6px;
}

Save your work and test your template in your browser. Here’s how mine looks.

Copy and paste the services page again, only this rename the file to testimonials.html. Remove ALL the content between the header ending div and container ending div. Were now going to make a new mockup but using some of the same styles. In the testimonials area we’ll have boxes the same as our products page but at the bottom of each box we’ll have some star ratings. The code looks like this.

<div class="testimonial"><!--BOX STARTS-->
<div class="testimonial-inside">
<h2>customer #1</h2>
<h2 class="boxtitle2">Thomas davis</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis porttitor massa eu scelerisque. Mauris eget metus orci, et venenatis turpis. Quisque felis velit, sollicitudin ac pellentesque vehicula, fermentum ut velit. </p>

<div class="rating">
<img src="images/star.png" alt="1" /><img src="images/star.png" alt="2" /><img src="images/star.png" alt="3" /><img src="images/star.png" alt="4" /><img src="images/star.png" alt="5" />
</div>
</div>
</div><!--BOX ENDS-->

We now need to style everything, we’ll use the same styles as our services page classes, but we’ll use the class testimonial instead. We’ve also created a new class called rating which will be for our stars. The css looks like this.

/* ----------TESTIMONIAL'S PAGE STYLES---------- */

.testimonial {
	float: left;
	border: 1px solid #121212;
	margin-bottom: 15px;
	float: left;
	width: 898px;
	margin-right: 25px;
	background-color: #0c0c0c;
}

.testimonial-inside {
	background-color: #0c0c0c;
	border: 1px solid #030303;
	float: left;
	width: 876px;
	padding: 10px;
}

.testimonial-inside p {
	padding-top: 10px;
}

.rating {
	float: left;
	height: 18px;
	width: 876px;
	margin-top: 10px;
}

.rating img{
	float: right;
}

You can now copy and paste the code for each box underneath each other to create more testimonial boxes. Just change the information inside each box. My testimonials page looks like this.

Copy and paste your services page once more then rename to contact.html, also on this page we’ll be using the services page classes.

<div class="services"><!--BOX STARTS-->
<div class="services-inside">
<h2>contact us</h2>
<h2 class="boxtitle2">get in touch using the contact form below</h2>
CONTENT HERE
</div>
</div><!--BOX ENDS-->

Inside the contact page were going to need a form and maybe a short paragraph with some info. On the text fields that we use we’ll assign some classes which will enable us to style the form and text boxes etc… via our style sheet.

<div class="services"><!--BOX STARTS-->
<div class="services-inside">
<h2>contact us</h2>
<h2 class="boxtitle2">get in touch using the contact form below</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis porttitor massa eu scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris eget metus orci, et venenatis turpis. Quisque felis velit, sollicitudin ac pellentesque vehicula, fermentum ut velit. Donec vel est orci. Donec diam leo, fringilla sit amet vehicula eu, dictum quis elit. </p>
<form id="contact" name="contact" method="post" action="">
  <label>
  <input name="textfield" type="text" class="textfield" id="textfield" value="Name:" size="45" />
  </label>
  <br />
  <label>
  <input name="textfield2" type="text" class="textfield" id="textfield2" value="E-Mail:" size="45" />
  </label>
  <br />
  <label>
  <input name="textfield3" type="text" class="textfield" id="textfield3" value="Subject:" size="45" />
  </label>
  <br />
  <label>
  <textarea name="textarea" cols="45" rows="10" class="textbox" id="textarea">Information:</textarea>
  </label>
  <br />
  <label>
  <input name="button" type="submit" class="form-button" id="button" value="Submit" />
  </label>
  <label>
  <input name="button2" type="reset" class="form-button" id="button2" value="Reset" />
  </label>
</form>
</div>
</div><!--BOX ENDS-->

The css for our contact form looks like this.

/* ----------CONTACT PAGE STYLES---------- */

.textfield, .textbox {
	background-color: #000000;
	border: 1px solid #383838;
	padding: 2px;
	margin-top: 5px;
	margin-bottom: 5px;
	color: #CCCCCC;
	font-style: italic;
}

.form-button {
	background-color: #000000;
	border: 1px solid #383838;
	padding: 4px;
	color: #CCCCCC;
	margin-right: 5px;
	font-size: 0.8em;
}

#contact {
	margin-top: 10px;
	width: 300px;
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}

Your contact page should now look something like this.

All your pages should now be set and in working order. Before your template goes live you’ll have to change the links in your navigation, you will also have to set the ID of current for each individual page link. So for example if your on the contact page the link for your contact page in your navigation should have an ID of current. If your on the index page your index page should have an ID of current.

Thats all for this tutorial you should now have a good idea of how to create a 5page website. Its not as hard as some people think, once you’ve coded the main page its just as simple as copy and paste for the others. Dont forget to subscribe via rss and twitter also please could you promote this post along with many of my others. Thats it till next time, look out for the next tutorial when we’ll be intergrating a jquery plugin called jflow for our featured area.

Other Parts To This Project

• Pt.1 PSD Designs
• Pt.2 PSD Conversion

Download The FREE Template

You can download the FREE CSS Template by clicking HERE.

• Share