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

HeadingColumn with text about cars

main content for each page

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 contentHome Rollover main image

Change the heading depending on the time of dayNews Add an RSS news feed from the Top Gear sitePhoto Add a CSS gallery linking to bigger picturesPoll Add a poll so people can vote for their car

Andrew Hilldocument.docx 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 Hilldocument.docx 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 2This 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 Hilldocument.docx 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 3This 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 Hilldocument.docx 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 Hilldocument.docx 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<script language="JavaScript" type="text/JavaScript"><!--function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;}function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>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<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x;}function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}//--></script></head><body onLoad="MM_preloadImages('images/audi2.jpg')">

Script to get time and change heading text<script language=javascript><!--function greeting() {Now = new Date()Hour = Now.getHours();if (Hour < 5)msg ="it's night and dark outside"else if(Hour <12)msg ="in the morning"else if(Hour < 18)msg ="in the afternoon"else if (Hour < 24)msg ="in the evening"return( msg )}document.write(greeting())//-->

Andrew Hilldocument.docx 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>

Script for the newsfeed

<script language="javascript" src="http://www.rssfeedconverter.com/services/rssconvert.php?format=js&url=http%3A%2F%2Frss.feedsportal.com%2Fc%2F426%2Ff%2F417510%2Findex.rss"></script>

Script for the poll

<script language="javascript" src="http://www.polleverywhere.com/multiple_choice_polls/MTk5MTU3MzQ3/web.js?height=250&results_count_format=percent&width=300" type="text/javascript"></script>

Andrew Hilldocument.docx 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 Hilldocument.docx 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 Hilldocument.docx Page 9