HCDE537 > 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
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
See Also: Building an HTML Template from Master Art | WEB200 | Premium Design Works
This portion of the Premium Design Works website is written by Mike Sinkula and dedicated to the Web Design & Development students at Seattle Central Community College.
