Click to skip over navigation
 

lecture 4: handout

<< previous slide

return to lesson 4 index

next slide >>


AN INVITATION FOR THOSE FOLLOWING VIRTUAL LECTURES.

A final-year project student in Computing is doing research into the use of the virtual lectures. He needs a couple of volunteers who are willing to be observed while following the lecture through, and perhaps answer a few questions before and after.

This shouldn't take up any more of your time than you'd spend following the lecture anyway: and you'll get paid £5 for your trouble.

If you're interested please mail me on andrew [dot] whitworth [at] manchester [dot] ac [dot] uk and we will get back to you to arrange a time.

slide F: examples of web page design

At this point in the lecture you will be asked to have a look at a few of these sites (how many you look at is up to you but I would recommend at least two - do have a look beyond the front pages of the sites as well). In the box, jot down your impressions of the look and feel of the site as a visual experience. There are no right and wrong answers here: I have my own opinions about these sites and will explain some in later slides but the more important thing is that you start thinking about how layout and design can be used to pass on information, to assist the visitor, to establish mood and tone, and other tasks.

The Guardian: http://www.guardian.co.uk

The Sun: http://www.thesun.co.uk

University of Lancaster: http://www.lancs.ac.uk

University of Central England: http://www.uce.ac.uk

The Open University: http://www.open.ac.uk

Jamiroquai official site: http://www.jamiroquai.co.uk

The Coral official site: http://www.thecoral.co.uk

Radiohead official site: http://www.radiohead.co.uk

slide L: code for the sample table

The following is the complete code for the example table shown at the end of the lecture, including styles defined in the document header. The only thing missing, for clarity, is the mass of content in the fourth table cell. Remember that even though this is used to lay out the whole page, it remains a simple 2 × 2 table.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCtype html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en" />
<title>Excerpt from 'The Law of Freedom' by Gerrard Winstanley</title>
<style type="text/css"><!--

table { border-width: 0px;
        border-style: none;
        border-collapse: collapse; }

td.darkblue { background-color: #00008b }

td.medblue { background-color: #6495ed;
        color: #ffffff;
        text-align: center; }

td.main { background-color: #f0ffff;
        color: #191970;
        padding: 5% 5% 0% 15%; }

--></style>
</head>

<body>

<table>
  <tr>
    <td class="darkblue" style="width: 10%"> </td>
    <td class="medblue"><h2>Excerpt from "The Law of Freedom"</h2></td>
  </tr>

  <tr>
    <td class="medblue" style="width: 10%"> </td>
    <td class="main">

    <p>When mankind began to buy and sell...

    ...Close this window</a></p>

    </td>
  </tr>
</table>

</body>
</html>


<< previous slide

return to lesson 4 index

next slide >>