P4 design, create and test web pages using CSS to control layout
P5 design, create and test web pages using scripts to implement
interactivity.
A client requires a web site comprising four main pages. The first is a high impact home page
featuring a message detailing information specific to the user (eg a welcome line that refers to
his or her local time, browser or location). The others contain a user poll or gather opinion in a
similar way on a topic, an image gallery displaying thumbnails of 6 pictures linked to larger
versions and a page featuring an RSS feed supplying content from an external source.
I started with a design for the page
Heading
Column with main content for each page
text about
cars
Footer with date
I used CSS for everything to do with layout and Javascript for the interactivity.
The width was set at 100% and I would rely on the content to expand vertically as it might
change depending on people’s screen resolution settings and browser window size.
I needed to set up two columns in a container, and added the selectors and properties for fonts
and padding and colors. (stylesheet – stage1)
Then I needed some buttons for links with rollover effects. I decided on black with white text
which would change to green background on hover and red when active.
This additional code is shown as stage 2.
This completed the basic layout for the site pages ready for content to be added. I tested the way
it looked in IE, Firefox and Google Chrome and everything was OK so I could move on to add
some interesting content. This is what I want to add:
Page Interactive content
Home Rollover main image
Change the heading depending on the time of day
News Add an RSS news feed from the Top Gear site
Photo Add a CSS gallery linking to bigger pictures
Poll Add a poll so people can vote for their car
Andrew HillDocument1 Page 1
P4 design, create and test web pages using CSS to control layout
P5 design, create and test web pages using scripts to implement
interactivity.
Stylesheet stage 1.
This is the first stylesheet I made for the layout as in the design I wanted.
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
line-height:150%;
}
div.header,div.footer
{
padding:0.5em;
color:white;
background-color:gray;
clear:left;
}
h1.header
{
padding:0;
margin:0;
font: 24px georgia, serif;
}
p
{
font: 12px georgia, serif;
color: gray;
}
div.left
{
float:left;
width:160px;
margin:0;
padding:1em;
}
div.content
{
margin-left:190px;
border-left:1px solid gray;
padding:1em;
}
Andrew HillDocument1 Page 2
P4 design, create and test web pages using CSS to control layout
P5 design, create and test web pages using scripts to implement
interactivity.
Stylesheet – stage 2
This makes the menu buttons
a.menu:link {
display: inline;
font: 16px verdana, sans-serif;
color: #fff;
padding: 5px;
margin: 10px 10px 5px 0px;
text-decoration: none;
background-color:#000;}
a.menu:visited {
display: inline;
font: 16px verdana, sans-serif;
color: #fff;
padding: 5px;
margin: 10px 10px 5px 0px;
text-decoration: none;
background-color:#222;}
a.menu:hover {
display: inline;
font: 16px verdana, sans-serif;
color: #fff;
padding: 5px;
margin: 10px 10px 5px 0px;
text-decoration: none;
background-color:#0F0;}
a.menu:active {
display: inline;
font: 16px verdana, sans-serif;
color: #fff;
padding: 5px;
margin: 10px 10px 5px 0px;
text-decoration: none;
background-color:#F00;}
Andrew HillDocument1 Page 3
P4 design, create and test web pages using CSS to control layout
P5 design, create and test web pages using scripts to implement
interactivity.
Stylesheet –stage 3
This makes the image gallery
div.img
{
margin:2px;
border:1px solid #222;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #f00;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}
That completed the first stylesheet.
On testing and reviewing the draft pages they were a bit dull with the grey and the width of
100% meant that it all got stretched on wider monitors.
I made some adjustments and used a fixed with of 960px and changed the background color to
red which was much nicer.
Andrew HillDocument1 Page 4
P4 design, create and test web pages using CSS to control layout
P5 design, create and test web pages using scripts to implement
interactivity.
Fluid width before color change
Fixed width with color change
Andrew HillDocument1 Page 5
P4 design, create and test web pages using CSS to control layout
P5 design, create and test web pages using scripts to implement
interactivity.
Image rollover code
0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i
Script to get time and change heading text
Andrew HillDocument1 Page 6
P4 design, create and test web pages using CSS to control layout
P5 design, create and test web pages using scripts to implement
interactivity.
Script for the newsfeed
Script for the poll
Andrew HillDocument1 Page 7
P4 design, create and test web pages using CSS to control layout
P5 design, create and test web pages using scripts to implement
interactivity.
Testing and previews
Poll
Newsfeed
Andrew HillDocument1 Page 8
P4 design, create and test web pages using CSS to control layout
P5 design, create and test web pages using scripts to implement
interactivity.
Photo gallery
View the site at http://andrewx.com/unit10/sample
Andrew HillDocument1 Page 9