Page Layout with HTML & CSS | HCDE532 | Students of Premium Design Works

HCDE532 » Page Layout with HTML & CSS

Since the advent of personal computing, page layout skills have expanded to electronic media as well as print media. The electronic page is better known as a graphical user interface (GUI) when interactive elements are included. Page layout for interactive media overlaps with (and is often called) interface design.

Dividing the Page

Most interface designs are broken into a series of logical objects or chunks of information:

Basic Page Layout

See Also:

Building an HTML Template from Master Art | WEB200 | Premium Design Works
Content Layout for the Web | WEB200 | Premium Design Works
Grid and Column Designs | Web Designer Wall
960px Grid System | 960.gs

1. Division Tags

Where <div> is short for division, are the basic tags you will use to group your content into logical components:

<!-- Begin Header -->
<div id="header">
<h1 id="logo"><a href="index.html"><img src="images/logo.png" alt="Mike Sinkula's Website" /></a></h1>
</div>
<!-- End Header -->

2. Identifications

ID’s are the means to control each <div> tag of logical components via the style, selected by the # sign:

#header {
width: 500px;
height: 50px;
margin-top: 50px;
margin-bottom: 10px;
margin-left: 50px;
}

#logo {
font-size: 32px;
}

ID’s are used:

for only one instance per page
to identify a unique piece of your page’s markup; logo, navigation, etc.
to identify and enable a specific target for a JavaScript function

HTML5 Document Section Elements

As well as the first couple of changes, HTML5 has introduced a whole new list of document section elements:

See Also:

HTML5 Tag Reference | W3 Schools
HTML5 | W3C

1. Header

The <header> tag specifies a header for a document or section:

<!-- Begin Header -->
<header>
<!-- Begin Logo -->
<h1 id="logo"><a href="index.php">mike<strong>sinkula</strong></a></h1>
<!-- End Logo -->

<?php include ('includes/navigation.php'); ?>

</header>
<!-- End Header -->

See Also: HTML5 Header Tag | W3 Schools

2. Navigation

The <nav> tag defines a section of navigation links:

<!-- Begin Navigation -->
<nav>
<ul>
<li><a href="biography.php">Biography</a></li>
<li><a href="education.php">Education</a></li>
<li><a href="experience.php">Experience</a></li>
<li><a href="skills.php">Skills</a></li>
</ul>
</nav>
<!-- End Navigation -->

See Also: HTML5 Navigation Tag | W3 Schools

3. Article

The <article> tag specifies independent, self-contained content:

<!-- Begin Content Article -->
<article>
<figure><img src="images/img-myface.png" alt="My Face"><figcaption><small>I dare you to read my <a href="http://www.mikesinkula.com/" target="_blank">blog</a>.</figcaption></small></figure>
<p><a href="http://www.mikesinkula.com/" target="_blank">Mike Sinkula</a> grew up in Southern California and went on to earn a Bachelor of Arts in <a href="http://www.csuchico.edu/cdes/" target="_blank">Communication Design</a> from <a href="http://www.csuchico.edu/" target="_blank">California State University at Chico</a> in 1993.</p>
<p>Early in 1994 Mike came to Seattle to work in its booming graphic design industry. He went on to work for a few years in the corporate sector of Seattle for such companies as <a href="http://www.nintendo.com/" target="_blank">Nintendo of America</a> and Sierra On-line designing and producing artwork for “Nintendo Power” and “Interaction” Magazine.</p>
</article>
<!-- End Content Article -->

See Also: HTML5 Article Tag | W3 Schools

4. Aside

The <aside> tag defines some content aside from the content it is placed in:

<!-- Begin Content Aside -->
<aside>
<ul>
<li><strong>email:</strong> <a title="mailto:mike@mikeinkula.com" href="mailto:mike@mikeinkula.com">mike@mikeinkula.com</a>
<li><strong>blog:</strong> <a title="Mike Sinkula's Blog" href="http://www.mikesinkula.com/" target="_blank">http://www.mikesinkula.com/</a>
</ul>
</aside>
<!-- End Content Aside -->

See Also: HTML5 Aside Tag | W3 Schools

5. Footer

The <footer> tag defines a footer for a document or section:

<!-- Begin Footer -->
<footer>
<p><?php echo ("&copy;" . date ('Y') . " "); ?><a title="http://www.mikesinkula.com" href="http://www.mikesinkula.com">Mike Sinkula</a>. All rights reserved.</p>
</footer>
<!-- End Footer -->