Fundamental Design Principles for Web Page Layout - Practicing divine proportion with an (X)HTML file
(Page 3 of 4 )
In the previous segment, you learned what the golden ratio is, and more specifically how it can be utilized for creating aesthetically pleasant web page designs, at least theoretically speaking. Now it’s time to demonstrate how this proportion can be applied to creating a simple web page layout, composed of the classical header and footer sections and two primary columns.
I’m going to create the structural markup of the pertinent web page. The appropriate widths of the columns and other sections will naturally be assigned via a few simple CSS styles.
That being said, here’s how the bare bones structure of this web page looks:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>2-column web page layout using the Golden Ratio</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>Header section</h1>
</div>
<div id="sidebar">
<h2>Side column</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div id="content">
<h2>Main column</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div id="footer">
<h2>Footer section</h2>
</div>
</div>
</body>
</html>
As you can see, the markup of the above (X)HTML file speaks for itself. In this specific case, the file in question is comprised of a main container that wraps all the remaining sections, which have been identified as “header,” “sidebar,” “content” and finally “footer.” So far, the structure of this sample file should be fairly easy for you to grasp, since it looks similar to other files that you’ve probably coded hundreds of times before.
Admittedly, this part of the example is rather boring. However, this is about to change, since in the course of the following section, I’m going to code the CSS styles that will apply the golden ratio to the file shown previously.
To see how the divine proportion will be implemented by means of some simple CSS code, you’ll have to read the upcoming segment.
Next: Applying the golden proportion to web design >>
More Style Sheets Articles
More By Alejandro Gervasio
/ 6 
