In part 2 of this tutorial series, I will be explaining how to code the design we produced in part 1, into HTML5 and CSS, using Adobe Dreamweaver. Hopefully this tutorial will help you to learn some of the new HTML5 tags and methodologies.
Preview
Click the image below to get a working example of the site:
Creating the site folders and files
1 The first steps we need to take is to setup our site by creating the files and folders we need for the site directory. In Dreamweaver, create the following files and folders and give them the correct names:
Now inside the ‘css’ folder, create a stylesheet in Dreamweaver and save it here:
Saving layout images and components
2 Before we begin building the site, you need to slice up and save all of the different images and elements we will be using to build the site. For example, the logo, slides, news box, Flikr photo backgrounds etc. Here are some examples of some of the key design elements that need to be sliced out:
Typing the code
3 Now you can begin to start coding your site in Dreamweaver. The first step is to give your site a title, as well as link to the stylesheet you created. Notice that we will be using a HTML5 doc-type:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Clean Business Layout</title>
<link rel="stylesheet" href="css/style.css" type="text/css"
media="screen" />
</head>
<body>
</body>
</html>
3.1 Once you have linked to your stylesheet you will then need to insert a HTML5 javascript link and some CSS in order to make sure that the HTML5 tags can be read in all the browsers.
(Place Inside head tag)
<!--[if IE]>
<script
src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
(Place in the stylesheet)
article, aside, figure, footer, header,
hgroup, menu, nav, section {
display: block;
}
3.2 Now we are ready to write some HTML. In order to keep the site centered within the browser window, we need to use a ‘wrapper’ or ‘container’ which will have a set width and be centered in the page. All of our content will then be placed inside this container, so that our page stays centered.
<body>
<div class="wrapper">
</wrapper><!—End Wrapper-->
3.3 For the header, we will be using a new HTML5 tag which is <header>. This tag is read by browsers just like a div tag, therefore we can apply styles in the stylesheet to this tag. Inside the <head> tag, you need to write the following HTML code in order to create our logo for the site:
<header>
<div id="logo">
<h1>D2
Interactive</h1>
</div>
</header>
3.4 In order to create the navigation we will be using another new HTML5 tag. In this instance, it will be the <nav> tag. This tag is used for the main navigation of any HTML5 website. Inside this tag, you need to create an un-ordered list, just like you would in a regular HTML site.
<nav>
<ul>
<li class="current"><a href="#">home</a></li>
<li><a href="#">showcase</a></li>
<li><a href="#">services</a></li>
<li><a href="#">about</a></li>
<li class="endLi"><a href="#">contact</a></li>
</ul>
</nav>
As you can see, within each list item, there is an anchor tag for the links to the different pages you could have within this website.
3.5 Now we need to write the HTML for the slideshow element of the site. Later on this tutorial I will be explaining how to implement a jQuery slider into the layout. For now though, we can simply write the HTML we need for the slider.
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<img
src="images/slide.jpg" width="940" height="300"
alt="Slide" />
<img
src="images/slide2.jpg" width="940" height="300"
alt="Slide" />
<img
src="images/slide3.jpg" width="940" height="300"
alt="Slide" />
<img
src="images/slide4.jpg" width="940" height="300"
alt="Slid" />
</div>
</div>
3.6 The next section of the design we are going to build is the tagline element underneath the slideshow. In order to create the two line breaks above and below the text, I used a class so that we can apply the same styles to both:
<div class="tagline">
<div class="lineBreak">
</div>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
lacinia tempus risus, id mollis sem porttitor eu.
Nam ut leo turpis, vel laoreet enim.</h2>
<div class="lineBreak">
</div>
</div>
Main Content
4 Now we can move on to typing up the code for the main content of the design. In order to keep the HTML organised and to make the CSS much easier, I created three different column divs, with the content for each inside.
<div class="mainContent">
<div class="col1">
<h3>we produce beautiful, innovative, standards compliant
websites to suit your needs</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
lacinia tempus risus, id mollis sem porttitor eu. Nam ut leo turpis,
vel laoreet enim. In diam ligula, pellentesque et ornare vel,
tincidunt vitae est. Sed facilisis facilisis ante, in adipiscing
orci viverra eu.</p>
<p>Phasellus quis libero at orci venenatis ornare. Proin sit amet
nibh purus. Morbi ut facilisis justo. Vestibulum tellus libero,
fermentum et luctus non, accumsan sed arcu. Cras vitae luctus felis.
Aenean lacinia metus vitae nibh luctus a vestibulum erat tempus.
Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
lacinia tempus risus, id mollis sem porttitor eu. Nam ut leo turpis,
vel laoreet enim.</p>
<div class="button">
<p><a href="#">services</a></p>
</div>
</div>
<div class="col2">
<div class="serviceBox">
<p>Html5 & Css3</p>
</div>
<div class="serviceBox small">
<p>Media Queries</p>
</div>
<div class="serviceBox">
<p>Seo</p>
</div>
<div class="serviceBox">
<p>Branding</p>
</div>
</div>
<div class="col3">
<div class="newsBox">
<h4>latest news</h4>
<div class="post">
<h5>06.09.2011</h5>
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit, cras lac...</p>
</div>
<div class="post">
<h5>06.09.2011</h5>
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit, cras lac...</p>
</div>
<div class="post">
<h5>06.09.2011</h5>
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit, cras lac...</p>
</div>
</div>
</div>
</div>
Footer elements
5 After you have typed out the code of the main content section of the design, you will then need to move onto the footer. This is where our first wrapper container will end. Again we will be using a new HTML5 tag, in this case, the <footer> tag. However, within this <footer> tag, we will then need to create another wrapper. I used a class for the wrapper div, therefore the same styles will be applied to both, making the job of styling much easier.
<footer>
<div class="wrapper">
</div>
</footer>
5.1 Now within this wrapper, you can insert the code for your footer elements:
<div class="quote">
<h3>request a quote</h3>
<form action="form_action.asp" method="get">
<input type="text" name="name" value="Name" />
<input type="email" name="email" value="Email" />
<input type="text" name="number" value="Phone" />
<input type="text" name="postcode" value="Postcode" />
<input type="text" class="message" name="message"
value="Message..." />
<input type="submit" class="button" value="Submit" />
</form>
</div>
<div class="quickLinks">
<h3>quicklinks</h3>
<ul>
<li>Lorem ipsum dolor amet ellit</li>
<li>Lorem ipsum dolor amet</li>
<li>Lorem ipsum dolor amet a</li>
<li>Lorem ipsum dolor amet consectetur</li>
<li>Lorem ipsum dolor amet cra lac</li>
<li>Lorem ipsum dolor amet</li>
<li>Lorem ipsum dolor amet elit</li>
<li>Lorem ipsum dolor amet elm</li>
</ul>
</div>
<div class="flikr">
<h3>flikr</h3>
<h5><a class="flikrLink" href="#">View All</a></h5>
<div class="clear">
</div>
<ul>
<li><img src="images/flikrBg.jpg" width="75" height="75"
alt="Flikr Bg" /></li>
<li><img src="images/flikrBg.jpg" width="75" height="75"
alt="Flikr Bg" /></li>
<li><img src="images/flikrBg.jpg" width="75" height="75"
alt="Flikr Bg" /></li>
<li><img src="images/flikrBg.jpg" width="75" height="75"
alt="Flikr Bg" /></li>
<li><img src="images/flikrBg.jpg" width="75" height="75"
alt="Flikr Bg" /></li>
<li><img src="images/flikrBg.jpg" width="75" height="75"
alt="Flikr Bg" /></li>
<li><img src="images/flikrBg.jpg" width="75" height="75"
alt="Flikr Bg" /></li>
<li><img src="images/flikrBg.jpg" width="75" height="75"
alt="Flikr Bg" /></li>
</ul>
</div>
5.2 As you can see, I used the new method of creating HTML5 input forms. Eventually the new browsers will be able to support the added functionality these input forms can give your site. That is the HTML for the site completed, we will now move onto the CSS for the site in he stylesheet.
Writing the stylesheet
6 In the ‘style.css’ file you should have created at the beginning of this tutorial, you need to begin by adding some styles for the main opening elements of the site. I have broken these down into sections for you to insert:
h2 {
font-size: 20px;
font-style: italic;
text-align: center;
font-weight: normal;
}
h3 {
color: #653dcc;
font-size: 16px;
text-transform: uppercase;
font-weight: normal;
}
h4 {
color: #fff;
font-size: 14px;
text-transform: uppercase;
font-weight: normal;
}
h5 {
color: #653dcc;
font-size: 12px;
font-weight: normal;
}
p {
margin: 10px 0 5px 0;
font-weight: normal;
line-height: 165%;
}
a {
color: #fff;
text-decoration: none;
}
a:hover {
color: #2d2d2d;
}
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #2d2d2d;
}
.wrapper {
width: 940px;
margin: 0 auto;
}
6.1 Now we can use the logo image you should have sliced up, in order to create the logo for the site in the CSS:
#logo {
float: left;
display: block;
margin: 20px 0 0 0;
text-indent: -9999px;
background: url(../images/logo.png);
background-repeat: no-repeat;
width: 166px;
height: 21px;
}
6.2 Now you need to apply some CSS for the navigation elements for the site:
nav {
float: right;
margin: 10px 0 0 0;
}
nav ul li {
float: left;
display: inline;
padding: 0 10px 0 10px;
}
nav ul li.endLi {
padding: 0px;
}
nav ul li a {
color: #2d2d2d;
text-decoration: none;
text-transform: uppercase;
}
nav ul li a:hover {
color: #653dcc;
}
.current {
color: #653dcc;
}
6.3 I will explain how to integrate the slider at the end of this tutorial, therefore the next styles you need to insert into your stylesheet is the styles for the tagline element:
.tagline {
float: left;
margin: 20px 0 0 0;
}
.tagline h2 {
padding: 10px 0 10px 0;
}
.lineBreak {
background: url(../images/lineBreak.jpg);
background-repeat: repeat-x;
height: 2px;
width: 940px;
}
Main content styles
7 Next you need to write the styles for the main content elements and columns:
.mainContent {
float: left;
margin: 50px 0 0 0;
}
.col1 {
float: left;
width: 520px;
padding: 0 30px 0 0;
}
.col1 h3 {
margin: 0px;
padding:0px;
}
.col2 {
float: left;
width: 132px;
padding: 0 30px 0 0;
}
.serviceBox {
float: left;
background: url(../images/serviceBox.jpg);
background-repeat: no-repeat;
width: 112px;
height: 58px;
margin: 0 0 23px 0;
padding: 18px 10px 0 10px;
text-align: center;
color: #fff;
text-transform: uppercase;
}
.small {
height: 70px;
padding: 6px 10px 0 10px;
}
.col3 {
float: left;
width: 228px;
}
.newsBox {
float: left;
background: url(../images/newsBg.png);
background-repeat: no-repeat;
width: 198px;
height: 345px;
padding: 15px;
}
.newsBox h4 {
text-align: center;
margin: 15px 0 40px 0;
}
.post h5 {
margin: 15px 0 5px 0;
}
.post p {
margin: 0px;
font-size: 12px;
}
Footer styles
8 For the footer section of the site, you need to write the following styles for the footer elements:
footer {
float: left;
width: 100%;
background: #e3e3e3;
margin: 20px 0 0 0;
}
.quote {
float: left;
width: 320px;
padding: 0 35px 0 0;
}
input {
float: left;
background: url(../images/formBg.png);
backround-repeat: no-repeat;
border: none;
width: 140px;
height: 32px;
padding: 0 0 0 10px;
margin: 0 10px 10px 0;
}
.message {
background: url(../images/lgeFormBg.png);
backround-repeat: no-repeat;
border: none;
width: 299px;
height: 150px;
}
.button {
background: url(../images/button.png);
backround-repeat: no-repeat;
border: none;
width: 120px;
height: 32px;
color: #fff;
text-transform: uppercase;
}
.button:hover {
color: #2d2d2d;
}
.button p {
color: #fff;
text-transform: uppercase;
padding: 5px 0 0 24px;
}
.quickLinks {
float: left;
width: 300px;
padding: 0 35px 0 0;
}
.quickLinks ul {
list-style: none;
margin: 0px;
padding: 0px;
}
.quickLinks ul li {
background: url(../images/listSymbol.png)
no-repeat 0px 5px;
padding: 7px 0 7px 30px;
}
.flikr {
float: left;
width: 246px;
}
.flikr h3 {
float: left;
}
.flikr h5 {
float: right;
}
.flikrLink {
color: #653dcc;
}
.flikr ul {
list-style: none;
margin: 0px;
padding: 0px;
}
.flikr ul li {
float: left;
padding: 0 7px 7px 0;
}
Integrating the Nivo slider
9 The final steps in creating this site is to integrate the Nivo Slider you should have downloaded at the beginning of this tutorial. You first need to copy all of the files into the appropriate folders in your site directory:
Inside the 'themes' folder, you should have the files for the different themes for the slider:
Next copy across the java script files into the 'js' folder:
Now the css:
Now within your HTML, you need to type the appropriate links to the different stylsheets and javascript files:
<link rel="stylesheet" href="themes/default/default.css"
type="text/css" media="screen" />
<link rel="stylesheet" href="css/nivo-slider.css"
type="text/css" media="screen" />
<link rel="stylesheet" href="css/slider.css"
type="text/css" media="screen" />
(Underneath the footer content)
<script type="text/javascript"
src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript"
src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
9.1 Now you need to make the following changes to the following styles in the slider stylesheets you should have linked to:
(default.css)
.theme-default .nivo-controlNav {
position:absolute;
left:90%;
bottom: 0px;
margin-left:-40px; /* Tweak this to center bullets */
}
(slider.css)
.theme-default #slider {
margin:30px auto 0 auto;
width:940px; /* Make sure your images are the same size */
height:300px; /* Make sure your images are the same size */
}
You have now finished reading the tutorial! You can download the coded design from the link below.
Download Site Files
View All Articles