Creating a stylish promo page in HTML5_HTML5 Multimedia Development Cookbook-QQ阅读武侠男生网

上QQ阅读APP看书，第一时间看更新

Creating a stylish promo page in HTML5

Our pal Roxane's single-page portfolio site has come together using more than a few of the new HTML5 elements. She's ready to show the world she's a forward-thinking web developer, ready to tackle advanced projects.

Getting ready

We've done the prep work by assembling much of the content for the single-page portfolio site. It isn't very stylish just yet, but when we layer CSS on top of it, this will really come together and be as stylish as our imaginations will allow.

How to do it...

Here's the code we have so far. It's valid against the World Wide Web Consortium's HTML5 and Section 508 accessibility tests. This unstyled code should be easily viewable in any modern web browser whether it's on the desktop or a mobile device.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Roxane</title>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>[endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<hgroup>
<h1>Roxane is my name.</h1>
<h2>Developing websites is my game.</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#About">About</a></li>
<li><a href="#Work">Work</a></li>
<li><a href="#Contact">Contact</a></li>
</ul>
</nav>
<section id="About">
<h3>About</h3>
<p>I'm a front-end developer who's really passionate about making ideas into simply dashing websites.</p>
<p>I love practical, clean design, web standards give me joyful chills, and good usability tickles the butterflies in my stomach.</p>
</section>
<section id="Work">
<h3>Work</h3>
<p>sample 1</p>
<p>sample 2</p>
<p>sample 3</p>
</section>
<section id="Contact">
<h3>Contact</h3>
<p>email</p>
<p>phone</p>
<p>address</p>
</section>
<aside>
<h4>What I'm Reading</h4>
<ul>
<li><img src="http://packtpub.com/sites/default/files/imagecache/ uc_thumbnail/2688OS_MockupCover.jpg" alt="Inkscape 0.48 Essentials for Web Designers"> Inkscape 0.48 Essentials for Web Designers</li>
<li><img src="http://packtpub.com/sites/default/files/imagecache/ uc_thumbnail/bookimages/0042_MockupCover_0.jpg" alt="jQuery 1.4 Reference Guide"> jQuery 1.4 Reference Guide</li>
<li><img src="http://packtpub.com/sites/default/files/imagecache/ uc_thumbnail/9881OS_MockupCover.jpg" alt="Blender 2.5 Lighting and Rendering"> Blender 2.5 Lighting and Rendering</li>
</ul>
</aside>
<aside>
<h4>Elsewhere</h4>
<p>You can also find me at:</p>
<ul>
<li><a href="http://linkedin.com/in/">LinkedIn</a></li>
<li><a href="http://twitter.com/">Twitter</a></li>
<li><a href="http://facebook.com/">Facebook</a></li>
</ul>
</aside>
<footer>
<h5>All rights reserved. Copyright Roxane.</h5>
</footer>
</body>
</html>

How it works...

A single-page portfolio site makes a lot of sense for a developer or designer, as all the information is quickly available to those in hiring positions, like human resources teams or recruiters.

There's more...

This is exactly the kind of professional single-page portfolio site Roxane needs to demonstrate she's a forward-thinking developer learning to wield the next generation of web standards.

Try sans shiv

As an experiment, turn off the "HTML5 Shiv" JavaScript reference in the code and see how various versions of Internet Explorer treat our new HTML5 tags.

Mobile first

Remember to consider mobile displays when creating this and other websites. There's almost never a good reason to block entire groups of people from seeing your content.

IE evil?

Over the past 15 years or so, we've spent a lot of time and effort bashing Microsoft Internet Explorer for its lack of standards support and buggy interpretation of the box model. The upcoming IE10 brings us closer to a more unified web development world, but we still remain years away from being free of cursing IE.