CSS3 + HTML5 = Top Notch One-Page Website Template
Web development is the most flexible sector, where you have to keep yourself updated with the new-generation technologies and techniques. There is no doubt that new techniques in this area are changing with pace. Thus, it becomes important for every professional web designer or developer to adopt the new changes and latest technologies.
In order, to derive the maximum benefits of the newfangled web development techniques, you have to utilize the new methods while designing or developing a website.
Today, we are creating an HTML5 web template by using the rich features introduced by CSS3 and jQuery with the scrollTo plugin. You can optionally download an XHTML version of the web template, as HTML5 is still in its construction period.
In this post we will share the steps for creating an HTML5 web page with the combination of CSS3 and jQuery.
Create a One-Page Website Template
Step 1- The Design of a Web Template
The first step for a web designer is to implement his/her ideas into the design. For this, designers need programs like Photoshop, to work on the specifics and view how the different elements will fit together.
After this, you can simply think about the initial layout of the page.
Step 2- HTML
HTML5 is still a work in progress. But some portions of the standard are complete and ready to be used. We have separated the entire layout into a few section tags:
- header – covers your page header
- footer – covers your page footer
- section – arranges content to sections (for example: sidebar, main area etc)
- article – segregates the specific article from the rest of the page
- nav – consist your navigation menu
- figure – holds an image which is used as an illustration for your article
With the help of this, you can display your web content in such a way that the subject matter of that page can be determined. In fact, search engine kind of online marketing services allow you to drive more targeted visitors to your site and thus enhance your ROI.
There are few implications in utilizing HTML5. IE family is one of the notorious browsers, that doesn’t support these tags (It can be locked with the simple JavaSrcipt file). Thus, it is important for you to take a decision on moving to HTML5 on your website.
template.html – Head section
<!DOCTYPE html> <!-- The new doctype --> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Coding A CSS3 & HTML5 One Page Template | xyz demo</title> <link rel="stylesheet" type="text/css" href="styles.css" /> <!-- Internet Explorer HTML5 enabling script: --> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <style type="text/css"> .clear { zoom: 1; display: block; } </style> <![endif]--> </head>
This coding is very short and simple, so that you will have no problem remembering it.
After determining the encoding of the title and the document, you can proceed to include a JavaScript file that will allow Internet Explorer (IE) to suitably render HTML5 tags.
template.html – Body Section
<body> <section id="page"> <!-- Defining the #page section with the section tag --> <header> <!-- Defining the header section of the page with the appropriate tag --> <h1>Your Logo</h1> <h3>and a fancy slogan</h3> <nav class="clear"> <!-- The nav link semantically marks your main site navigation --> <ul> <li><a href="#article1">Photoshoot</a></li> <li><a href="#article2">Sweet Tabs</a></li> <li><a href="#article3">Navigation Menu</a></li> </ul> </nav> </header>
In this, we use new section tags that classify your page into separate semantic sections. Furthermost is the #page section that is settled to a width of 960px in the style sheet. And, after this comes the header tag and the navigation tag.
template.html – Article
<!-- Article 1 start --> <div class="line"></div> <!-- Dividing line --> <article id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view. --> <h2>Photoshoot Effect</h2> <div class="line"></div> <div class="articleBody clear"> <figure> <!-- The figure tag marks data (usually an image) that is part of the article --> <a href="http://xyz.com/2010/02/photo-shoot-css-jquery/"> <img src="http://cdn.xyz.com/img/featured/641.jpg" width="620" height="340" /></a> </figure> <p>In this post, we are creating a photo shoot effect with our just-released PhotoShoot jQuery plug-in. With it you can convert a regular div on the page into a photo shooting stage simulating a camera-like feel.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus quam quis .... </p> </div> </article> <!-- Article 1 end -->
This markup is shared between all articles. In addition, the first line is the dividing line and then we can see the new article tags with a unique ID that are used by the navigation for scrolling the page.
We can also see the title of the article, two paragraphs and the new fig. tag that marks the usage of images in the article.
template.html – Footer
<footer> <!-- Marking the footer section --> <div class="line"></div> <p>Copyright 2010 - YourSite.com</p> <!-- Change the copyright notice --> <a href="#" class="up">Go UP</a> <a href="http://xyz.com/" class="by">Template by xyz</a> </footer> </section> <!-- Closing the #page section --> <!-- JavaScript Includes --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script src="jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script> <script src="script.js"></script> </body> </html>
At the bottom of the web page, you can see the rest of the JS files, which add the jQuery library and the scrollTo plugin.
Step 3 – CSS
Now, you can take extra measures with the styling. As the tags of the new version of HTML introduces are not yet offered with a default styling, you can simply add it using CSS code, and the page works and appears as it is supposed to:
styles.css – Part 1
header,footer, article,section, hgroup,nav, figure{ /* Giving a display value to the HTML5 rendered elements: */ display:block; } article .line{ /* The dividing line inside of the article is darker: */ background-color:#15242a; border-bottom-color:#204656; margin:1.3em 0; } footer .line{ margin:2em 0; } nav{ background:url(img/gradient_light.jpg) repeat-x 50% 50% #f8f8f8; padding:0 5px; position:absolute; right:0; top:4em; border:1px solid #FCFCFC; -moz-box-shadow:0 1px 1px #333333; -webkit-box-shadow:0 1px 1px #333333; box-shadow:0 1px 1px #333333; } nav ul li{ display:inline; } nav ul li a, nav ul li a:visited{ color:#565656; display:block; float:left; font-size:1.25em; font-weight:bold; margin:5px 2px; padding:7px 10px 4px; text-shadow:0 1px 1px white; text-transform:uppercase; } nav ul li a:hover{ text-decoration:none; background-color:#f0f0f0; } nav, article, nav ul li a,figure{ /* Applying CSS3 rounded corners: */ -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }
However, we need to settle the display value of the latest tags to block, as you can view from the first two lines. Then, we can style them as we would do with the common divs.
styles.css – Part 2
/* Article styles: */ #page{ width:960px; margin:0 auto; position:relative; } article{ background-color:#213E4A; margin:3em 0; padding:20px; text-shadow:0 2px 0 black; } figure{ border:3px solid #142830; float:right; height:300px; margin-left:15px; overflow:hidden; width:500px; } figure:hover{ -moz-box-shadow:0 0 2px #4D7788; -webkit-box-shadow:0 0 2px #4D7788; box-shadow:0 0 2px #4D7788; } figure img{ margin-left:-60px; } /* Footer styling: */ footer{ margin-bottom:30px; text-align:center; font-size:0.825em; } footer p{ margin-bottom:-2.5em; position:relative; } footer a,footer a:visited{ color:#cccccc; background-color:#213e4a; display:block; padding:2px 4px; z-index:100; position:relative; } footer a:hover{ text-decoration:none; background-color:#142830; } footer a.by{ float:left; } footer a.up{ float:right; }
In this section of coding, we execute more detailed styling to the elements like a hover property, a width for the page section and styles for the links inside the footer.
Step 4 – jQuery
Now you will create a tranquil scrolling effect after clicking the navigation link, using the scrollTjQuery plugin. This is done to improvise the template.
In this step, you just need to loop through the links included in the navigation bar and attach an onclick event which will trigger the $ .scrollTo() function.
script.js
$ (document).ready(function(){ /* This code is executed after the DOM has been completely loaded */ $ ('nav a,footer a.up').click(function(e){ // If a link has been clicked, scroll the page to the link's hash target: $ .scrollTo( this.hash || 0, 1500); e.preventDefault(); }); });
After entering this code, our template is complete.
Conclusion
In this article we introduced the latest semantic features offered by HTML5 to create and code a top-notch one-page web template. Being a web designer/developer, it is vital to properly utilize the new techniques and technologies.
