Easily Coding a Jeweler’s Website to HTML5 CSS3 from PSD

Easily Coding a Jeweler’s Website to HTML5 CSS3 from PSD

AD

Last Friday we offered free download of the Jewelry Web Design Template and the Friday before that, we published the Photoshop tutorial for designing a jeweler’s website. Today is the time for HTML CSS tutorial. By following this, you can easily code this website to perfection. It also includes a simple JavaScript slideshow.

Jeweler’s sites require dark backgrounds, sharp colors, quality stock photos and large size jewelry display. This layout has all these specifications.

Previous Posts: 

Live Demo

Photoshop-Layout-Tutorial

<head> Area Code

You can notice that we have a JavaScript code placed in our <head> section. This is necessary to make a slideshow, if you are to make a slideshow in Flash, you wouldn’t need this code. If you are savvy with JavaScript, you can use a little jQuery and make the slideshow more graphical but I’ll keep it simple so everyone can understand it.

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jewelry Template | Designzzz</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript">
 function MM_changeProp(objId,x,theProp,theValue) { //v9.0
 var obj = null; with (document){ if (getElementById)
 obj = getElementById(objId); }
 if (obj){
 if (theValue == true || theValue == false)
 eval("obj.style."+theProp+"="+theValue);
 else eval("obj.style."+theProp+"='"+theValue+"'");
 }
 }
 </script>
</head>

Moving Forward to <Body>

Nothing out of the ordinary here.

<html>
<body>
<div id="main-container">
  <!--all the codes carrying body content are displayed below.-->
</div>
</body>
</html>

CSS of this Area

I kept it simple, you can see the code, it’s simple.

@charset "utf-8";
 /* CSS Document */
*{
   margin:0;
   padding:0;
   }
body
   {
   background:url(images/background.png) repeat scroll #333333;
   }
   article, aside, figure, footer, header, hgroup, menu, nav, section { display:block; }

#main-container
   {
   width:1000px;
   margin:0 auto;
   overflow:hidden;
   }

Navigation and Slideshow

Photoshop-Jewelry-Layout-Tutorial

I learned how important commenting is while making daily website inspirations.
Always, I repeat always comment out your code… it doesn’t seem important in HTML but when you start coding advance languages, you yourself forget why did you write a particular code… So make a habit of commenting today, it’ll help you tomorrow.

Now in the slideshow section, notice that code, it’ll only work if we have that JavaScript function in our header. This code changes the image if we click on a bullet below the main slide. You can see the demo for a visual clarification.

<header><!--Start header-->
 <div class="nav-bg"><!--navigation-->
 <nav>
 <div class="left-nav">
 <ul>
 <li><a href="#">Home </a></li>
 <li><a href="#">About </a></li>
 </ul>
 </div>
 <div id="logo">
 <div class="jewelry">
 <img src="images/logo.png" alt="" />
 </div>
 </div>
 <div class="right-nav">
 <ul>
 <li><a href="#">Products </a></li>
 <li><a href="#">Contact </a> </li>
 </ul>
 </div>
 </nav>
 </div><!--End navigation-->

 <div class="featured-image"><!--slideshow-->
 <div id="img1">  <img src="images/featured.png" alt="" /></div>
 <div id="img2" style="display:none;">  <img src="images/featured-2.png" alt="" /></div>
 <div id="img3" style="display:none;">  <img src="images/featured-3.png" alt="" /></div>
 </div>

 <div class="slide">
 <div class="slideshow">

 <p><a href="#" onclick="MM_changeProp('img1','','display','block','DIV');MM_changeProp('img2','','display','none','DIV');MM_changeProp('img3','','display','none','DIV')">.</a></p>
 <p><a href="#" onclick="MM_changeProp('img1','','display','none','DIV');MM_changeProp('img2','','display','block','DIV');MM_changeProp('img3','','display','none','DIV')">.</a></p>
 <p><a href="#" onclick="MM_changeProp('img1','','display','none','DIV');MM_changeProp('img2','','display','none','DIV');MM_changeProp('img3','','display','block','DIV')">.</a></p>

 </div>

 </div> 

 <div class="line">
 </div>

 <section>
 <h1> Exclusive Daimonds </h1>
 <h2> "The finest 24 carat diamond jewelry makers of the town" </h2>
 </section>
 </header><!--End header-->

CSS of this Area

You can see that we used CSS3 code so that the font can be loaded from server-side without bothering the client. CSS2 doesn’t support this code.

header
 {
 width:1000px;
 overflow:hidden;
 }
 #logo
 {
 height:77px;
 width:200px;
 float:left;

 }
 .jewelry
 {
 margin:0 auto;
 width:200px; 

 }
 @font-face
 {
 font-family: Steiner;
 src:url("images/Steinerlight.ttf");
 }
 .nav-bg
 {
 background:#000000;
 width:1000px;
 height:60px;
 }
 nav
 {

 position:absolute;
 width:1000px;
 height:60px;
 }
 nav ul
 {
 margin:0;
 padding:0;
 }
 nav ul li
 {
 font-family:"Steiner";
 font-size:18px;
 color:#ffffff;
 list-style:none;
 float:left;
 margin:18px 56px;
 }
 nav ul li a
 {
 color:#ffffff;
 text-decoration:none;
 }
 nav ul li a:hover
 {
 color:#d24460;
 }
 .left-nav
 {
 width:383px;
 height:59px;
 float:left;
 }
 .right-nav
 {
 width:383px;
 height:59px;
 float:left;
 }
 .featured-image
 {
 width:1000px;
 height:349px;
 }
 .slide
 {

 position:relative;
 top:-24px;
 width:200px;
 left:400px;
 height:0px;
 }
 .slideshow
 {
 background:url(images/sub-featured.png) no-repeat;
 width:200px;
 overflow:hidden;
 }
 .slideshow p
 {
 font-size:107px;
 float:left;
 top:-74px;
 margin:0 17px;
 position:relative;
 }
 .slideshow p a
 {
 color:#000;
 text-decoration:none;
 }
 .slideshow p a:hover
 {
 color:#fff;
 }
.line
   {
   background:#252424;
   width:850px;
   height:7px;
   margin:0 auto;
   }
section
   {
   width:960px;
   height:140px;
   }
h1
   {
   font-family:Arial, Helvetica, sans-serif;
   font-size:27px;
   color:#ffffff;
   width:350px;
   overflow:hidden;
   font-style:italic;
   font-weight:normal;
   text-align:center;
   margin:14px 0;
   }
h2
   {
   font-family:Arial, Helvetica, sans-serif;
   font-size:26px;
   font-style:italic;
   width:960px;
   overflow:hidden;
   font-weight:normal;
   color:#dddddd;
   text-align:center;
   }

Content Area HTML

Photoshop-Jewelry-Layout-Tutorial

Once we add a JavaScript function, we can call it as many times as we want, just like a CSS property. So I have added a little hover (mouse over) effect here as well.

<div id="content"><!--Content Area-->
<div class="catagories">
<h3>Rings</h3>
<h3>Nose Pin</h3>
<h3>Ear Rings</h3>
</div>
<div class="image">
<div class="img" onmouseover="MM_changeProp('hover','','display','block','DIV')" onmouseout="MM_changeProp('hover','','display','none','DIV')">
<div id="hover" style="display:none;">
</div>
</div>
<div class="nosepin" onmouseover="MM_changeProp('hover2','','display','block','DIV')" onmouseout="MM_changeProp('hover2','','display','none','DIV')">
<div id="hover2" style="display:none;">
</div>
</div>
<div class="earrings" onmouseover="MM_changeProp('hover3','','display','block','DIV')" onmouseout="MM_changeProp('hover3','','display','none','DIV')">
<div id="hover3" style="display:none;">
</div>
</div>
</div>
<div class="catagories">
<h3>Bracelet</h3>
<h3>Necklace</h3>
<h3>Bangles</h3>
</div>
<div class="image">
<div class="breslet" onmouseover="MM_changeProp('hover4','','display','block','DIV')" onmouseout="MM_changeProp('hover4','','display','none','DIV')">
<div id="hover4" style="display:none;">
</div>
</div>
<div class="necklace" onmouseover="MM_changeProp('hover5','','display','block','DIV')" onmouseout="MM_changeProp('hover5','','display','none','DIV')">
<div id="hover5" style="display:none;">
</div>
</div>
<div class="bangles" onmouseover="MM_changeProp('hover6','','display','block','DIV')" onmouseout="MM_changeProp('hover6','','display','none','DIV')">
<div id="hover6" style="display:none;">
</div>
</div>
</div>
</div>

CSS of this Area

#content
 {
 width:1000px;
 overflow:hidden;
 }
 .catagories
 {
 width:1000px;
 overflow:hidden;
 }
 h3
 {
 font-family:"Steiner";
 font-size:26px;
 color:#FFFFFF;
 float:left;
 padding:0 96px;
 width:130px;
 text-align:center;
 }
 .image
 {
 width:1000px;
 height:275px;

 }
 .img
 {
 background:url(images/Jewlery.png) no-repeat;
 float:left;
 width:242px;
 margin-left:63px;
 height:242px;
 }
 #hover
 {
 background:url(images/hover.png) no-repeat;
 margin:2px;
 width:242px;
 height:242px;
 }
 .nosepin
 {
 background:url(images/image-1.png) no-repeat;
 float:left;
 width:242px;
 margin-left:63px;
 height:242px;
 }
 #hover2
 {
 background:url(images/hover.png) no-repeat;
 margin:2px;
 width:242px;
 height:242px;
 }
 .earrings
 {
 background:url(images/image-2.png) no-repeat;
 float:left;
 width:242px;
 margin-left:63px;
 height:242px;
 }
 #hover3
 {
 background:url(images/hover.png) no-repeat;
 margin:2px;
 width:242px;
 height:242px;
 }
 .breslet
 {
 background:url(images/image-3.png) no-repeat;
 float:left;
 width:242px;
 margin-left:63px;
 height:242px;
 }
 #hover4
 {
 background:url(images/hover.png) no-repeat;
 margin:2px;
 width:242px;
 height:242px;
 }
 .necklace
 {
 background:url(images/image-4.png) no-repeat;
 float:left;
 width:242px;
 margin-left:63px;
 height:242px;
 }
 #hover5
 {
 background:url(images/hover.png) no-repeat;
 margin:2px;
 width:242px;
 height:242px;
 }
 .bangles
 {
 background:url(images/image-5.png) no-repeat;
 float:left;
 width:242px;
 margin-left:63px;
 height:242px;
 }
 #hover6
 {
 background:url(images/hover.png) no-repeat;
 margin:2px;
 width:242px;
 height:242px;
 }

Footer Area HTML

Photoshop-Tutorial-Template

Why would a local shop need a big bulky footer? There’s no reason so I kept it brief.

<footer><!--Footer-->
<div id="addcont">
<div class="address">
<p> Address:    7th sky Heaven building Street 45 Pak.</p>
</div>
<div class="contact">
<p>Contact: 0800-786-00</p>
</div>
</div>
<div id="cprt">
<p>2011 Copyrighted Designzzz.com</p>
</div>
</footer>

CSS of Footer

footer
 {
 background:url(images/footer-bg.png) repeat-x scroll;
 width:1000px;
 height:79px;
 border-radius:10px;
 }
 #addcont
 {
 width:960px;
 overflow:hidden;
 }
 .address
 {
 width:375px;
 height:50px;
 float:left;

 }
 .address p
 {
 color:#c4c4c4;
 padding:18px;
 text-align:center;

 }
 .contact
 {
 width:275px;
 height:50px;
 float:right;
 }
 .contact p
 {
 color:#c4c4c4;
 text-align:center;
 padding:18px;
 }

 #cprt
 {
 width:970px;
 overflow:hidden;
 }
 #cprt p
 {
 color:#5298ee;
 text-align:center;
 }
Live Demo

Further Related Readings

Jawad

I am a professional web designer, working as a tutorial writer here at Designzzz. I also have a crazy for Cars and Automobiles, that's why I have blog about them, Carunch.com; You can follow me on Twitter
All Articles by

Copyrights © 2014 - Designzzz. All Rights Reserved