Experiment 8

Experiment 8
— print (last updated: Jul 6, 2009) — print

The goal of this experiment is to improve upon the design we've started in Experiment 5. In doing so we will blend in the images created in Experiment 6 and add style rules to create the many of the effects we created before.

Part I: create the document and style rules

Create a directory SecondWeb with subfolder images.
Download two image file from these links below into the images subfolder.
header.gif
anderson.jpg

Create the document webdesign.html in the SecondWeb folder with this starting content:

<html>
<head>
<title>My Website v2</title>
<style>
<!--
td { 
  border: solid thin black; 
}
-->
</style>
</head>
<body>

<table summary="" class="main"> 
<tr>

<td class="left">

NAVIGATION TABLE

</td>

<td class="right">

<p class="center">
<img src="images/header.gif" alt="My Website" height="100px" width="450px"/>
</p>

CONTENT TABLE

</td>

</tr>
</table>

</body>
</html>

Add these style rules:

body {
  background-color: cornsilk;
  font-family: arial, sans-serif;
  padding: 5px;
}

/* the font-size property, unlike font-family, doesn't inherit
   automatically from body to table */
body, table {
  font-size: 11pt;
}

table.main {
  width: 100%;
}

/* by default, valign everything to the top */
table.main tr {
  vertical-align: top;
}

Replace NAVIGATION TABLE by this table:

<table class="nav">
<tr><td><a href="index.html">Home</a></td></tr>
<tr><td><b href="webdesign.html">Web Design</b></td></tr>
<tr><td><a href="movies.html">Favorite Movies</a></td></tr>
<tr><td><a href="hobbies.html">My Hobbies</a></td></tr>
<tr><td><a href="songs.html">Top 10 Songs</a></td></tr>
</table>

Replace CONTENT TABLE by this table:

<table class="content">

<tr>
<td colspan="100" class="center">
  <h2>What I've Learned in Web Design</h2>
</td>
</tr>

<tr class="columns"> 
<td>
<h3>HTML</h3> 
HTML stands for
<b>H</b>yper<b>T</b>ext <b>M</b>arkup <b>L</b>anguage.
It was invented in 1989 by Tim Berns-Lee.
<p>
<em>Hypertext</em> refers
to the ability to move among information in many files in 
non-linear way by activing <em>links</em> to other files.
</p>
</td>

<td>
<h3>Lists</h3>
Lists are ways of organizing information in a hierarchical way according to 
a sequence of elements (numbered or not) along with their subsequences. 
Lists are usually thought of as combinations of the elements:
 <tt>ul</tt> (unordered list), 
 <tt>ol</tt> (ordered list),
 and 
 <tt>li</tt> (list item).
</td>

<td>
<h3>Graphical Images</h3>
This is Anderson Hall, taken from the south side:
<p class="center">
<img src="images/anderson.jpg" alt="Anderson" width="120px" height="160px" />
</p>
at the entrance closest to where my Web Design class is held.
</td>
</tr>
</table>

We have all the content in. Here is a diagram of the overall page:

BLOCK SKETCH

Continue on to control the appearance using style rules.

Add this style rule to prevent the left column from expanding too much:
```
table.main td.left {     
  width: 125px;          
}
```
The table.main is not really necessary in this example because td.left itself uniquely identifies the cell holding the navigational table. Prepending table.main acts as "insurance" in case there were another td.left in some other table.
Add this style rule to prevent the left column from being crushed:
```
table.nav {
  width: 125px;
}
```

Add this style rule to equalize and pad the content cells:

table.content td {
  width: 30%;
  padding: 0px 10px 0px 10px;
}

Modify/add these style rules to set style properties for the navigational cell:

table.main td.left {
  width: 125px;
  /* add these: */
  padding-top: 100px;
  background-color: lavender;
  border: solid 1px #cc0000;
}

table.nav td {
  padding: 0px 0px 10px 5px;
}

Add this style rule to center the images:
```
.center {
  text-align:center;
}
```
Finally, eliminate the cell borders by deleting (actually commenting out) the first rule:
```
/*
td { 
  border: solid thin black; 
}
*/
```

The overall effect should be this: webdesign.html

Part II: import the style rules through a stylesheet

Create a blank style sheet by selecting New from the File menu (or else, type Ctrl-N). You get a popup window entitled Select a template or ... from which you should choose the Blank Style Sheet found in either the Style Sheets or the All tabs. All that you're really doing is creating an empty file!
Save the file as mystyle.css.

Cut the style rules (see below) and paste them into mystyle.css.

/*
td { border: solid thin black; }
*/

body {
  background-color: cornsilk;
  font-family: arial, sans-serif;
  padding: 5px;
}

body, table {
  font-size: 11pt;
}

table.main {
  width: 100%;
}

table.main tr {
  vertical-align: top;
}

table.main td.left {
  width: 125px;
  padding-top: 100px;
  background-color: lavender;
  border: solid 1px #cc0000;
}

table.nav {
  width: 125px;
}

table.content td {
  width: 30%;
  padding: 0px 10px 0px 10px;
}

table.nav td {
  padding: 0px 0px 10px 5px;
}

.center {
  text-align:center;
}

Make the style section in webdesign.html look like this

<head>
<title>Test Style</title>
<style type="text/css">
<!--
@import url(mystyle.css);
-->
</style>
</head>

<head>
<title>Test Style</title>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<style type="text/css">
<!--

-->
</style>
</head>

You can generate the link element most effectively using a choice from the drop-down in the main (leftmost) style icon in HTML-Kit's Style tab.

Refresh the webdesign.html page to observe that it still picks up the style rules.

Experiment 8 — print (last updated: Jul 6, 2009) — print

Part I: create the document and style rules

Part II: import the style rules through a stylesheet

Experiment 8
— print (last updated: Jul 6, 2009) — print