Access to the Intranet is restricted to employees and is only available via the company network. All machines run Microsoft Windows 7 and a recent version of Google Chrome.

You have been tasked with the development of a hi-fidelity prototype and technical

report for the development of the company intranet.

The following components should be submitted in your proposal:

· Initial design sketches of the new intranet home, contacts and product/productdetail pages (hand drawn)

· A detailed wireframe of the new home page (hand drawn using one of the 960 grid templates) with supporting details

· A mock-up of the new home page, contacts and products/product-detail screen in Adobe Photoshop using the 960grid PSD template

· A working HTML/CSS version of the Photoshop mockups using the 960 grid + your own CSS

· A short report that explains the rationale for your design (i.e. why did you develop it that way, why is it an appropriate design, what insights did you have, what assumptions, what research was carried out etc) – include screenshot(s) of your design and code listings.

You should attempt to link your design decisions to relevant and appropriate theory as directed in the module teaching and from your own research (approx 2000 words). You are not required to develop any back-end functionality for the prototype. The prototype should be a functioning HTML/CSS design with easy to use navigation.

Project URL

http://www.frankofamily.info/UniOfSunderland/Level2/Multimedia/Project1/Intranet/

Intranet Proposal working plan

Week 1

Research the main points as:

• Intranet networks (use case)

• Colour theses

• Fonts theses

• Review necessary elements

(End of this week I have to decide what type of fonts and colour structure will use)

Week 2

• The for pages initial design. Create hand drawn sketches.

• Design a detailed wireframe for home page.

• Start to use Photoshop to create 4 pages used by 960 grid.

Week 3

• Finish Photoshop mock-ups.

• Create HTML/CSS code to display graphics elements on browser.

Week 4

• Write a report about my decisions and a summarising what I created and why.

Report

Researches

Intranet networks (use case)

BBC.CO.UK (2010) described the Intranet as a local, private computer network for large companies, industries or other organization. It isolated from internet, available for only inside peoples. Intranet usually use internet technologies. Main functions are publish events, share document, newsletters and staff information. Other definition, it is a portal what provides access to workers for essential information.

Colour theses

The popular color schemes vary periodically as any other thing. Nowadays pastel colors are popular as in fashions. When I have chosen my color schemes I looked through the free pictures what are connected to this topic. I found an Easter Eggs picture in pixabay.com. I used this picture to upload to Adobe Kuler and it generated a color set what I used to my project.

Colour set

Hex: IE02A6 DAA558 5A8A02 3A5C00 0340A3

HTML: A6021E 58A5DA 028A5A 005C3A A34003

Fonts theses

Intranet based on internet technology. Very important aspect to use Web Safe Font Combinations. This provides the full functionability. The main function of a font is easy readable and just other side the nice design. All browsers have default fonts but to create a modern design we have to set ours fonts. When we chose a font we need focus to content too.

The 960 grids templates basic font sets have been met with all criteria so I didn’t changed them. These fonts are: Helvetica Neue, Arial, Liberation Sans, FreeSans, sans-serif.

Design

The selection of the most important design aspect was the use of the application environment. In order to ensure hygiene, these companies do not use a mouse and keyboard the classic. These things are the most infected tools what we use. The most practical to use the touchscreen. I have designed an easy navigation system with large graphical buttons for easy handing.

When I researched the best web templates I have found a high rated design. It was the http://intothearctic.gp/en/#/map/villains/shell/info page where navigation icons and system fit to ours task. I have tried to create a similar navigation system with my own buttons and color scheme. I used a free Java script (Mouseover Tab Menu) to create a dynamic menu with large buttons.

Sample menu My menu

Whereas menu structure were built from icons I had to create over 50 main and nearly 60 sub menu icons.

As a part of this project I have designed a working HTML/CSS prototype by using the 960 grid framework. Pages available on University’s web server.

Home page detailed wireframe

Other pages detailed wireframes

Home page 960grid Photoshop mock-up

About products 960grid Photoshop mock-up

Staff directory 960grid Photoshop mock-up

Document library 960grid Photoshop mock-up

Noticeboard 960grid Photoshop mock-up

Webpage’s links

Homepage:

http://www.frankofamily.info/UniOfSunderland/Level2/Multimedia/Project1/Intranet/

Products:

http://www.frankofamily.info/UniOfSunderland/Level2/Multimedia/Project1/Intranet/products.php

Staff directory:

http://www.frankofamily.info/UniOfSunderland/Level2/Multimedia/Project1/Intranet/staff.php

Documents library:

http://www.frankofamily.info/UniOfSunderland/Level2/Multimedia/Project1/Intranet/documents.php

Noticeboard:

http://www.frankofamily.info/UniOfSunderland/Level2/Multimedia/Project1/Intranet/noticeboard.php

CSS codes

I used 960 grid’s CSS file and slightly modified them to correct error on pages what I have created.

reset.css

/* `XHTML, HTML4, HTML5 Reset

----------------------------------------------------------------------------------------------------*/

abbr,

acronym,

address,

applet,

article,

aside,

audio,

big,

blockquote,

body,

canvas,

caption,

center,

cite,

code,

dd,

del,

details,

dfn,

dialog,

div,

dl,

dt,

em,

embed,

fieldset,

figcaption,

figure,

font,

footer,

form,

h1,

h2,

h3,

h4,

h5,

h6,

header,

hgroup,

hr,

html,

iframe,

img,

ins,

kbd,

label,

legend,

li,

main,

mark,

menu,

meter,

nav,

object,

ol,

output,

pre,

progress,

rp,

rt,

ruby,

samp,

section,

small,

span,

strike,

strong,

sub,

summary,

sup,

tbody,

tfoot,

th,

thead,

time,

tt,

ul,

var,

video,

xmp {

border: 0;

margin: 0;

padding: 0;

font-size: 100%;

}

html,

body {

height: 100%;

background-color: #acacac;

}

article,

aside,

details,

figcaption,

figure,

footer,

header,

hgroup,

main,

menu,

nav,

section {

Override the default (display: inline) for

browsers that do not recognize HTML5 tags.

IE8 (and lower) requires a shiv:

http://ejohn.org/blog/html5-shiv

display: block;

}

strong {

Makes browsers agree.

IE + Opera = font-weight: bold.

Gecko + WebKit = font-weight: bolder.

font-weight: bold;

}

img {

color: transparent;

font-size: 0;

vertical-align: middle;

For IE.

http://css-tricks.com/ie-fix-bicubic-scaling-for-images

-ms-interpolation-mode: bicubic;

}

ol,

ul {

list-style: none;

}

li {

For IE6 + IE7:

"display: list-item" keeps bullets from

disappearing if hasLayout is triggered.

display: list-item;

}

th,

td,

caption {

font-weight: normal;

vertical-align: top;

text-align: left;

}

q {

quotes: none;

}

q:before,

q:after {

content: "";

content: none;

}

sub,

sup,

small {

font-size: 75%;

}

sub,

sup {

line-height: 0;

position: relative;

vertical-align: baseline;

}

sub {

bottom: -0.25em;

}

sup {

top: -0.5em;

}

svg {

For IE9. Without, occasionally draws shapes

outside the boundaries of <svg> rectangle.

overflow: hidden;

}

text.css

960 Grid System ~ Text CSS.

Learn more ~ http://960.gs/

Licensed under GPL and MIT.

/* `Basic HTML

----------------------------------------------------------------------------------------------------*/

body {

font: 13px/1.5 "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;

}

pre,

code {

font-family: "DejaVu Sans Mono", Menlo, Consolas, monospace;

}

hr {

border: 0 solid #ccc;

border-top-width: 1px;

clear: both;

height: 0;

}

/* `Headings

----------------------------------------------------------------------------------------------------*/

h1 {

font-size: 20px;

text-align: center;

color: #a6021e;

}

h2 {

font-size: 18px;

text-align: center;

color: #a62137;

}

h3 {

font-size: 16px;

text-align: left;

color: #a63245;

}

h4 {

font-size: 14px;

text-align: center;

color: #a63245;

}

h5 {

font-size: 12px;

}

h6 {

font-size: 12px;

}

p {

font-size: 12px;

padding: 10px;

}

.table a

{

display:block;

text-decoration:none;

color: #000000;

}

/* `Spacing

----------------------------------------------------------------------------------------------------*/

ol {

list-style: decimal;

}

ul {

list-style: disc;

}

li {

margin-left: 0px;

}

dl,

hr,

h1,

h2,

h3,

h4,

h5,

h6,

ol,

ul,

pre,

address,

fieldset,

figure {

margin-bottom: 0px;

}

960.css

960 Grid System ~ Core CSS.

Learn more ~ http://960.gs/

Licensed under GPL and MIT.

Forces backgrounds to span full width,

even if there is horizontal scrolling.

Increase this if your layout is wider.

Note: IE6 works fine without this fix.

body {

min-width: 100%;

}

/* ######### CSS for top level tabs ######### */

.tabsmenuclass ul{

float: left;

margin-top: 20px;

margin-left: 0px;

margin-right: auto;

padding: 0px;

width: 80px;

height: 320px;

position: fixed;

list-style-type: none;

}

.tabsmenuclass li{

float: left;

}

.tabsmenuclass a{

display: block;

padding: 0px;

background: #005c3a;

color: black;

text-decoration: none;

font: bold 13px Arial;

}

.tabsmenuclass a:hover, .tabsmenuclass a.selected{

background: #1c5c44;

color: white;

}

/* ######### CSS for sub menu container below ######### */

.tabsmenucontentclass{

float: left;

margin-top: 20px;

margin-left: 80px;

width: 160px;

height: 640px;

background: #005c3a;

position: fixed;

}

.tabsmenucontentclass ul{

margin: 0;

padding: 0;

list-style-type: none;

}

.tabsmenucontentclass li{

float: left;

margin-right: 1em;

}

/* `Sub Menu

----------------------------------------------------------------------------------------------------*/

#submenu_background {

float: left;

margin-top: 0px;

margin-left: 80px;

width: 160px;

height: 100%;

position: fixed;

background-color: #58a5da;

}

/* `Search bar

----------------------------------------------------------------------------------------------------*/

.searchbar {

float: right;

margin-top: 0px;

margin-left: 240px;

width: 740px;

height: 70px;

position: fixed;

background-image: url('../images/menu_elements/header_background.png');

background-repeat: repeat-x;

z-index: 1;

}

#search_form {

margin-top: 20px;

background-color:#58a5da;

display:block; /* Add this */

}

/* `Sub Menu

----------------------------------------------------------------------------------------------------*/

.backbutton {

float: left;

margin-top: 700px;

margin-left: 120px;

width: 80px;

height: 80px;

position: fixed;

list-style-type: none;

background: #005c3a;

}

/* `Contents

----------------------------------------------------------------------------------------------------*/

.contents {

float: left;

margin-top: 70px;

margin-left: 260px;

width: 700px;

position:absolute;

}

.border

{

border: 2px solid #a34003;

background-color: #ffffff;

}

.border_active

{

border: 2px solid #a34003;

background-color: #dadada;

}

/* `Links align

----------------------------------------------------------------------------------------------------*/

#full {

width: 100%;

height: 100px;

text-align: center;

}

#full .left {

float: left;

text-align:left;

}

#full .right {

float: right;

text-align: right;

}

/* `Container

----------------------------------------------------------------------------------------------------*/

.container_12,

.container_16 {

margin-left: auto;

margin-right: auto;

width: 960px;

high: 100%;

}

/* `Grid >> Global

----------------------------------------------------------------------------------------------------*/

.grid_1,

.grid_2,

.grid_3,

.grid_4,

.grid_5,

.grid_6,

.grid_7,

.grid_8,

.grid_9,

.grid_10,

.grid_11,

.grid_12,

.grid_13,

.grid_14,

.grid_15,

.grid_16 {

display: inline;

float: left;

margin-left: 10px;

margin-right: 10px;

}

.push_1, .pull_1,

.push_2, .pull_2,

.push_3, .pull_3,

.push_4, .pull_4,

.push_5, .pull_5,

.push_6, .pull_6,

.push_7, .pull_7,

.push_8, .pull_8,

.push_9, .pull_9,

.push_10, .pull_10,

.push_11, .pull_11,

.push_12, .pull_12,

.push_13, .pull_13,

.push_14, .pull_14,

.push_15, .pull_15 {

position: relative;

}

.container_12 .grid_3,

.container_16 .grid_4 {

width: 220px;

}

.container_12 .grid_6,

.container_16 .grid_8 {

width: 460px;

}

.container_12 .grid_9,

.container_16 .grid_12 {

width: 700px;

}

.container_12 .grid_12,

.container_16 .grid_16 {

width: 940px;

}

/* `Grid >> Children (Alpha ~ First, Omega ~ Last)

----------------------------------------------------------------------------------------------------*/

.alpha {

margin-left: 0;

}

.omega {

margin-right: 0;

}

/* `Grid >> 12 Columns

----------------------------------------------------------------------------------------------------*/

.container_12 .grid_1 {

width: 60px;

}

.container_12 .grid_2 {

width: 140px;

}

.container_12 .grid_4 {

width: 300px;

}

.container_12 .grid_5 {

width: 380px;

}

.container_12 .grid_7 {

width: 540px;

}

.container_12 .grid_8 {

width: 620px;

}

.container_12 .grid_10 {

width: 780px;

}

.container_12 .grid_11 {

width: 860px;

}

/* `Grid >> 16 Columns

----------------------------------------------------------------------------------------------------*/

.container_16 .grid_1 {

width: 40px;

}

.container_16 .grid_2 {

width: 100px;

}

.container_16 .grid_3 {

width: 160px;

}

.container_16 .grid_5 {

width: 280px;

}

.container_16 .grid_6 {

width: 340px;

}

.container_16 .grid_7 {

width: 400px;

}

.container_16 .grid_9 {

width: 520px;

}

.container_16 .grid_10 {

width: 580px;

}

.container_16 .grid_11 {

width: 640px;

}

.container_16 .grid_13 {

width: 760px;

}

.container_16 .grid_14 {

width: 820px;

}

.container_16 .grid_15 {

width: 880px;

}

/* `Prefix Extra Space >> Global

----------------------------------------------------------------------------------------------------*/

.container_12 .prefix_3,

.container_16 .prefix_4 {

padding-left: 240px;

}

.container_12 .prefix_6,

.container_16 .prefix_8 {

padding-left: 480px;

}

.container_12 .prefix_9,

.container_16 .prefix_12 {

padding-left: 720px;

}

/* `Prefix Extra Space >> 12 Columns

----------------------------------------------------------------------------------------------------*/

.container_12 .prefix_1 {

padding-left: 80px;

}

.container_12 .prefix_2 {

padding-left: 160px;

}

.container_12 .prefix_4 {

padding-left: 320px;

}

.container_12 .prefix_5 {

padding-left: 400px;

}

.container_12 .prefix_7 {

padding-left: 560px;

}

.container_12 .prefix_8 {

padding-left: 640px;

}

.container_12 .prefix_10 {

padding-left: 800px;

}

.container_12 .prefix_11 {

padding-left: 880px;

}

/* `Prefix Extra Space >> 16 Columns

----------------------------------------------------------------------------------------------------*/

.container_16 .prefix_1 {

padding-left: 60px;

}

.container_16 .prefix_2 {

padding-left: 120px;

}

.container_16 .prefix_3 {

padding-left: 180px;

}

.container_16 .prefix_5 {

padding-left: 300px;

}

.container_16 .prefix_6 {

padding-left: 360px;

}

.container_16 .prefix_7 {

padding-left: 420px;

}

.container_16 .prefix_9 {

padding-left: 540px;

}

.container_16 .prefix_10 {

padding-left: 600px;

}

.container_16 .prefix_11 {

padding-left: 660px;

}

.container_16 .prefix_13 {

padding-left: 780px;

}

.container_16 .prefix_14 {

padding-left: 840px;

}

.container_16 .prefix_15 {

padding-left: 900px;

}

/* `Suffix Extra Space >> Global

----------------------------------------------------------------------------------------------------*/

.container_12 .suffix_3,

.container_16 .suffix_4 {

padding-right: 240px;

}

.container_12 .suffix_6,

.container_16 .suffix_8 {

padding-right: 480px;

}

.container_12 .suffix_9,

.container_16 .suffix_12 {

padding-right: 720px;

}

/* `Suffix Extra Space >> 12 Columns

----------------------------------------------------------------------------------------------------*/

.container_12 .suffix_1 {

padding-right: 80px;

}

.container_12 .suffix_2 {

padding-right: 160px;

}

.container_12 .suffix_4 {

padding-right: 320px;

}

.container_12 .suffix_5 {

padding-right: 400px;

}

.container_12 .suffix_7 {

padding-right: 560px;

}

.container_12 .suffix_8 {

padding-right: 640px;

}

.container_12 .suffix_10 {

padding-right: 800px;

}

.container_12 .suffix_11 {

padding-right: 880px;

}

/* `Suffix Extra Space >> 16 Columns

----------------------------------------------------------------------------------------------------*/

.container_16 .suffix_1 {

padding-right: 60px;

}

.container_16 .suffix_2 {

padding-right: 120px;

}

.container_16 .suffix_3 {

padding-right: 180px;

}

.container_16 .suffix_5 {

padding-right: 300px;

}

.container_16 .suffix_6 {

padding-right: 360px;

}

.container_16 .suffix_7 {

padding-right: 420px;

}

.container_16 .suffix_9 {

padding-right: 540px;

}

.container_16 .suffix_10 {

padding-right: 600px;

}

.container_16 .suffix_11 {

padding-right: 660px;

}

.container_16 .suffix_13 {

padding-right: 780px;

}

.container_16 .suffix_14 {

padding-right: 840px;

}

.container_16 .suffix_15 {

padding-right: 900px;

}

/* `Push Space >> Global

----------------------------------------------------------------------------------------------------*/

.container_12 .push_3,

.container_16 .push_4 {

left: 240px;

}

.container_12 .push_6,

.container_16 .push_8 {

left: 480px;

}

.container_12 .push_9,

.container_16 .push_12 {

left: 720px;

}

/* `Push Space >> 12 Columns

----------------------------------------------------------------------------------------------------*/

.container_12 .push_1 {

left: 80px;

}

.container_12 .push_2 {

left: 160px;

}

.container_12 .push_4 {

left: 320px;

}

.container_12 .push_5 {

left: 400px;

}

.container_12 .push_7 {

left: 560px;

}

.container_12 .push_8 {

left: 640px;

}

.container_12 .push_10 {

left: 800px;

}

.container_12 .push_11 {

left: 880px;

}

/* `Push Space >> 16 Columns

----------------------------------------------------------------------------------------------------*/

.container_16 .push_1 {

left: 60px;

}

.container_16 .push_2 {

left: 120px;

}

.container_16 .push_3 {

left: 180px;

}

.container_16 .push_5 {

left: 300px;

}

.container_16 .push_6 {

left: 360px;

}

.container_16 .push_7 {

left: 420px;

}

.container_16 .push_9 {

left: 540px;

}

.container_16 .push_10 {

left: 600px;

}

.container_16 .push_11 {

left: 660px;

}

.container_16 .push_13 {

left: 780px;

}

.container_16 .push_14 {

left: 840px;

}

.container_16 .push_15 {

left: 900px;

}

/* `Pull Space >> Global

----------------------------------------------------------------------------------------------------*/

.container_12 .pull_3,

.container_16 .pull_4 {

left: -240px;

}

.container_12 .pull_6,

.container_16 .pull_8 {

left: -480px;

}

.container_12 .pull_9,

.container_16 .pull_12 {

left: -720px;

}

/* `Pull Space >> 12 Columns

----------------------------------------------------------------------------------------------------*/

.container_12 .pull_1 {

left: -80px;

}

.container_12 .pull_2 {

left: -160px;

}

.container_12 .pull_4 {

left: -320px;

}

.container_12 .pull_5 {

left: -400px;

}

.container_12 .pull_7 {

left: -560px;

}

.container_12 .pull_8 {

left: -640px;

}

.container_12 .pull_10 {

left: -800px;

}

.container_12 .pull_11 {

left: -880px;

}

/* `Pull Space >> 16 Columns

----------------------------------------------------------------------------------------------------*/

.container_16 .pull_1 {

left: -60px;

}

.container_16 .pull_2 {

left: -120px;

}

.container_16 .pull_3 {

left: -180px;

}

.container_16 .pull_5 {

left: -300px;

}

.container_16 .pull_6 {

left: -360px;

}

.container_16 .pull_7 {

left: -420px;

}

.container_16 .pull_9 {

left: -540px;

}

.container_16 .pull_10 {

left: -600px;

}

.container_16 .pull_11 {

left: -660px;

}

.container_16 .pull_13 {

left: -780px;

}

.container_16 .pull_14 {

left: -840px;

}

.container_16 .pull_15 {

left: -900px;

}

/* `Clear Floated Elements

----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {

clear: both;

display: block;

overflow: hidden;

visibility: hidden;

width: 0;

height: 0;

}

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before,

.clearfix:after,

.container_12:before,

.container_12:after,

.container_16:before,

.container_16:after {

content: '.';

display: block;

overflow: hidden;

visibility: hidden;

font-size: 0;

line-height: 0;

width: 0;

height: 0;

}

.clearfix:after,

.container_12:after,

.container_16:after {

clear: both;

}

The following zoom:1 rule is specifically for IE6 + IE7.

Move to separate stylesheet if invalid CSS is a problem.

.clearfix,

.container_12,

.container_16 {

zoom: 1;

}

Java script

mouseovertabs.js

//Mouseover Tabs Menu: By http://www.dynamicdrive.com

//** Aug 4th, 08': Script creation date

//** March 25th, 13: Menu optimized for consistent mobile browsers experience

var mouseovertabsmenu={

disappeardelay: 250, //set delay in miliseconds before sub menu disappears onmouseout

ajaxloadingmsg: 'Loading Sub Menu Contents...', //Message to show inside sub menu while fetching contents

///////No need to edit beyond here//////////////////////

tabsmenutree:{},

ismobile: navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) != null, //boolean check for popular mobile browsers

initializetabs:function(tabsmenuid, submenuid, tabcontentsLength, disappearBool){

var tabmenu=document.getElementById(tabsmenuid)

var tablinks=tabmenu.getElementsByTagName("a")

var submenu=document.getElementById(submenuid)

var selected=null, tablinks_count=0

for (var i=0; i<tablinks.length; i++){

tablinks[i]._parentid=tabsmenuid

var relattr=tablinks[i].getAttribute("rel")

if (/^gotsubmenu/i.test(relattr) && tablinks_count<tabcontentsLength){ //if "rel" attribute starts with="gotsubmenu" and a tab content exists for this tab based on its order

tablinks[i]._pos=tablinks_count //remember position of this tab relative to its active peers

if (relattr.indexOf("[selected]")!=-1){

selected=tablinks_count

}

this.addEvent(tablinks[i], function(e){

var tabsmenutree=mouseovertabsmenu.tabsmenutree[this._parentid]

mouseovertabsmenu.clearhidetimer(tabsmenutree.submenu.hidetimer)

mouseovertabsmenu.showsubmenu(this)

e.preventDefault()

}, (this.ismobile)? "click" : "mouseover")

tablinks_count++

this.tabsmenutree[tabsmenuid].tabs.push(tablinks[i]) //add this tab to tab collection

}

else{ //else for regular tab links (with no "rel" attribute)

this.addEvent(tablinks[i], function(){

mouseovertabsmenu.hidesubmenu(this._parentid)

}, "mouseover")

}

this.addEvent(submenu, function(e){

mouseovertabsmenu.clearhidetimer(this.hidetimer)

}, "mouseover")

if (disappearBool==true){

this.addEvent(submenu, function(e){ //hide submenu contents when mouse rolls out of submenu DIV

if (!mouseovertabsmenu.isContained(this, e)){

var cursubmenuobj=this

this.hidetimer=setTimeout(function(){mouseovertabsmenu.hidesubmenu(cursubmenuobj._parentid)}, mouseovertabsmenu.disappeardelay)

}

}, "mouseout")

}

var urlselected=this.urlparamselect(tabsmenuid)

//return position of selected tab (relative to its peers), or null

return typeof urlselected=="number"? urlselected : document.getElementById(urlselected)? document.getElementById(urlselected)._pos : selected

ajaxload:function(tabsmenuid, submenuid, disappearBool, url){

var page_request = false

if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)

try {

page_request = new ActiveXObject("Msxml2.XMLHTTP")

}

catch (e){

try{

page_request = new ActiveXObject("Microsoft.XMLHTTP")

}

catch (e){}

}

else if (window.XMLHttpRequest) // if Mozilla, Safari etc

page_request = new XMLHttpRequest()

else

return false

var tabsmenutree=this.tabsmenutree[tabsmenuid]

tabsmenutree.submenu.innerHTML=this.ajaxloadingmsg

var ajaxfriendlyurl=url.replace(/^http:\/\/[^\/]+\//i, "http://"+window.location.hostname+"/")

page_request.onreadystatechange=function(){

mouseovertabsmenu.ajaxpopulate(page_request, tabsmenuid, submenuid, disappearBool, ajaxfriendlyurl)

}

var bustcache=(ajaxfriendlyurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()

page_request.open('GET', ajaxfriendlyurl+bustcache, true)

page_request.send(null)

ajaxpopulate:function(page_request, tabsmenuid, submenuid, disappearBool, url){

if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){

var tabsmenutree=this.tabsmenutree[tabsmenuid]

tabsmenutree.submenu.innerHTML=page_request.responseText

var innerdivs=tabsmenutree.submenu.getElementsByTagName("div")

for (var i=0; i<innerdivs.length; i++){

if (/tabsmenucontent/i.test(innerdivs[i].className)){

tabsmenutree.submenu_divs.push(innerdivs[i])

}

var selected=this.initializetabs(tabsmenuid, submenuid, tabsmenutree.submenu_divs.length, disappearBool)

if (selected!=null && selected<tabsmenutree.submenu_divs.length){

innerdivs[selected].style.display="block"

this.css(tabsmenutree.tabs[selected], "selected", "add")

tabsmenutree.submenu._prevselected=selected

}

showsubmenu:function(linkobj){

var tabsmenutree=this.tabsmenutree[linkobj._parentid]

this.hidesubmenu(linkobj._parentid)

var selected=parseInt(linkobj._pos)

tabsmenutree.submenu_divs[selected].style.display="block"

this.css(tabsmenutree.tabs[selected], "selected", "add")

tabsmenutree.submenu._prevselected=selected

hidesubmenu:function(tabsmenuid){

var tabsmenutree=this.tabsmenutree[tabsmenuid]

var prevselectedindex=tabsmenutree.submenu._prevselected

if (typeof prevselectedindex!="undefined"){

tabsmenutree.submenu_divs[prevselectedindex].style.display="none"

this.css(tabsmenutree.tabs[prevselectedindex], "selected", "remove")

}

clearhidetimer:function(timerid){

if (timerid)

clearTimeout(timerid)

css:function(el, targetclass, action){

var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")

if (action=="check")

return needle.test(el.className)

else if (action=="remove")

el.className=el.className.replace(needle, "")

else if (action=="add" && !needle.test(el.className))

el.className+=" "+targetclass

isContained:function(m, e){

var e=window.event || e

var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)

while (c && c!=m)try {c=c.parentNode} catch(e){c=m}

if (c==m)

return true

else

return false

urlparamselect:function(tabsmenuid){

var result=window.location.search.match(new RegExp(tabsmenuid+"=(\\w+)", "i")) //check for "?tabsmenuid=id_or_pos_of_selected_tab" in URL

var selectedtabstr=RegExp.$1

return /^\d+$/.test(selectedtabstr)? parseInt(selectedtabstr) : selectedtabstr //return position or ID of selected tab (or null if niether found)

addEvent:function(target, functionref, tasktype){

if (target.addEventListener)

target.addEventListener(tasktype, functionref, false);

else if (target.attachEvent)

target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)});

init:function(tabsmenuid, submenuid, disappearBool){

this.tabsmenutree[tabsmenuid]={}

this.tabsmenutree[tabsmenuid].tabs=[] //array referencing the active tab links in this menu (ones with a "rel=gotsubmenu" attr)

this.tabsmenutree[tabsmenuid].submenu=null //reference submenu DIV for this menu

this.tabsmenutree[tabsmenuid].submenu_divs=[] //array referencing the submenu contents (external DIVs with class="tabsmenucontent")

var submenu=document.getElementById(submenuid)

submenu._parentid=tabsmenuid

this.tabsmenutree[tabsmenuid].submenu=submenu //remember this DIV as menu's submenu container

var remoteurl=submenu.getElementsByTagName("a")[0].getAttribute("href")

this.ajaxload(tabsmenuid, submenuid, disappearBool, remoteurl)

}

document.write('<style type="text/css">\n.tabsmenucontent{display:none}\n</style>')

HTML codes

Home page

index.html

<!DOCTYPE html>

<head>

<title>Beanaco Intranet, food and beverage company.</title>

</head>

<body>

<table>

<tr>

</a></td>

</tr>

<tr>

</a></td>

</tr>

<tr>

</a></td>

</tr>

<tr>

</a></td>

</tr>

</table>

</div>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

<form>

</form>

</div>

<h1>Best Employee of the month</h1>

</div>

<p></p>

</div>

<table>

<tr>

</a></td>

</tr><tr>

<p style="text-align:center;">Jason S. Allison</p></a>

</td>

</tr>

</table>

</div>

<table>

<tr>

</a></td>

</tr><tr>

<p style="text-align:center;">Ricky M. Smith</p></a>

</td>

</tr>

</table>

</div>

<p></p>

</div>

<table>

<tr>

</a></td>

</tr><tr>

<p style="text-align:center;">Frank F. Nunnally</p></a>

</td>

</tr>

</table>

</div>

<table>

<tr>

</a></td>

</tr><tr>

<p style="text-align:center;">Margaret T. Watson</p></a>

</td>

</tr>

</table>

</div>

<h2>If you want an extre 10% bonus to your salalry, can be one of the best four!</h2>

</div>

</div>

</body>

</html>

home_menu.html

<ul>

<img src="/images/menu_elements/main_menu/snack_passive.png" onmouseover="this.src='/images/menu_elements/main_menu/snack_active.png';"

onmouseout="this.src='/images/menu_elements/main_menu/snack_passive.png';" alt="Snack and beverage">

</a></li>

<img src="/images/menu_elements/main_menu/staff_passive.png" onmouseover="this.src='/images/menu_elements/main_menu/staff_active.png';"

onmouseout="this.src='/images/menu_elements/main_menu/staff_passive.png';" alt="Staff list">

</a></li>

<img src="/images/menu_elements/main_menu/documents_passive.png" onmouseover="this.src='/images/menu_elements/main_menu/documents_active.png';"

onmouseout="this.src='/images/menu_elements/main_menu/documents_passive.png';" alt="Documents">

</a></li>

<img src="/images/menu_elements/main_menu/notices_passive.png" onmouseover="this.src='/images/menu_elements/main_menu/notices_active.png';"

onmouseout="this.src='/images/menu_elements/main_menu/notices_passive.png';" alt="Notes board">

</a></li>

</ul>

</div>

<a href="/menu/home_submenu.htm" style="visibility:hidden">Sub Menu contents</a>

</div>

//mouseovertabsmenu.init("tabs_container_id", "submenu_container_id", "bool_hidecontentsmouseout")

mouseovertabsmenu.init("mytabsmenu", "mysubmenuarea", true)

</script>

home_submenu.htm

<ul>

<img src="/images/menu_elements/sub_menu/sub_snack_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_snack_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_snack_passive.png';" alt="Snack">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_beverage_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_beverage_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_beverage_passive.png';" alt="Beverage">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_vegetable_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_vegetable_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_vegetable_passive.png';" alt="Vegetable">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_meat_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_meat_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_meat_passive.png';" alt="Meat">

</a></li>

</ul>

</div>

<ul>

<img src="/images/menu_elements/sub_menu/sub_manage_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_manage_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_manage_passive.png';" alt="Management">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_manufact_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_manufact_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_manufact_passive.png';" alt="Manufacturing">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_marketing_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_marketing_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_marketing_passive.png';" alt="Marketing">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_distri_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_distri_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_distri_passive.png';" alt="Distribution">

</a></li>

</ul>

</div>

<ul>

<img src="/images/menu_elements/sub_menu/sub_invoices_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_invoices_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_invoices_passive.png';" alt="Invoices">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_contracts_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_contracts_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_contracts_passive.png';" alt="Contracts">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_forms_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_forms_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_forms_passive.png';" alt="Forms">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_others_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_others_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_others_passive.png';" alt="Other documents">

</a></li>

</ul>

</div>

<ul>

<img src="/images/menu_elements/sub_menu/sub_central_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_central_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_central_passive.png';" alt="Central Notices">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_personal_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_personal_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_personal_passive.png';" alt="Personal Notices">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_scheme_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_scheme_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_scheme_passive.png';" alt="Scheme Notices">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_archive_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_archive_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_archive_passive.png';" alt="Archive Notices">

</a></li>

</ul>

</div>

Products page

products.php

<?Php

* @author Istvan Franko

<head>

<title>Beanaco Intranet, food and beverage company.</title>

</head>

<body>

</div>

<?php include 'menu/product_menu.html'; ?>

<div class="clear"></div>

<form>

</form>

<h3> Products/Snaks/Chips</h3>

</div>

<div class="clear"></div>

<img src="/images/menu_elements/back_passiv.png" onmouseover="this.src='/images/menu_elements/back_activ.png';"

onmouseout="this.src='/images/menu_elements/back_passiv.png';" alt="Back">

</a>

</div>

function goBack() {

window.history.back()

}

</script>

<p></p>

</div>

<tr>

<img src="/images/categories/sweets.png"><h3 style="text-align:center;">Sweets</h3></a></td>

<img src="/images/categories/chips.png"><h3 style="text-align:center;">Chips</h3></a></td>

<img src="/images/categories/biscuits.png"><h3 style="text-align:center;">Biscuits</h3></a></td>

<img src="/images/categories/cakes.png"><h3 style="text-align:center;">Cakes</h3></a></td>

</tr>

</table>

<hr>

<tr>

</tr>

<tr>

</tr>

<!--<tr>

</tr>-->

</table>

<hr>

<h3 text-align="left">Products Details</h3>

<tr>

<h4>Item Description</h4>

<p>Doritos Dinamita Chile Limon Rolled Flavored Tortilla Chips:</p><br>

<h4>Ingredients</h4>

<p>Corn, Vegetable Oil (Corn, Sunflower, And/Or Canola Oil),

And 2% Or Less of The Following: Maltodextrin (Made from Corn) Salt,

Citric Acid, Sugar, Monosodium Glutamate, Artificial Color (Red 40 Lake, Yellow 6 Lake),

Hydrolyzed Corn Gluten, Yeast Extract, Sodium Diacetate, Cheddar Cheese

(Milk, Cheese Cultures, Salt, Enzymes), Modified Corn Starch, Natural Flavor

(Including Natural Extractives of Lime And Natural Extractives of Red Pepper),

Onion Powder, Whey, Corn Syrup Solids, Garlic Powder, Romano Cheese (Part-Skim Cow's Milk,

Cheese Cultures, Salt, Enzymes), Buttermilk, Whey Protein Concentrate, Disodium Inosinate,

And Disodium Guanylate. Contains Milk Ingredients.</p><br>

<h4>Ingredients</h4>

<p>Model No.: 2840000985<br>

Shipping Weight (in pounds): 0.58 <br>

Product in Inches (L x W x H): 2.24 x 6.7 x 11.65 <br>

In Stock: 1200 </p><br>

</td>

</tr>

</table>

</div>

</div>

</body>

</html>

products_menu.html

<ul>

<img src="/images/menu_elements/main_menu/main_snack_passive.png" onmouseover="this.src='/images/menu_elements/main_menu/main_snack_active.png';"

onmouseout="this.src='/images/menu_elements/main_menu/main_snack_passive.png';" alt="Snack">

</a></li>

<img src="/images/menu_elements/main_menu/main_beverage_passive.png" onmouseover="this.src='/images/menu_elements/main_menu/main_beverage_active.png';"

onmouseout="this.src='/images/menu_elements/main_menu/main_beverage_passive.png';" alt="Beverage">

</a></li>

<img src="/images/menu_elements/main_menu/main_vegetable_passive.png" onmouseover="this.src='/images/menu_elements/main_menu/main_vegetable_active.png';"

onmouseout="this.src='/images/menu_elements/main_menu/main_vegetable_passive.png';" alt="Documents">

</a></li>

<img src="/images/menu_elements/main_menu/main_meat_passive.png" onmouseover="this.src='/images/menu_elements/main_menu/main_meat_active.png';"

onmouseout="this.src='/images/menu_elements/main_menu/main_meat_passive.png';" alt="Notes board">

</a></li>

</ul>

</div>

<a href="/menu/product_submenu.htm" style="visibility:hidden">Sub Menu contents</a>

</div>

//mouseovertabsmenu.init("tabs_container_id", "submenu_container_id", "bool_hidecontentsmouseout")

mouseovertabsmenu.init("mytabsmenu", "mysubmenuarea", true)

</script>

products_submenu.htm

<ul>

<img src="/images/menu_elements/sub_menu/sub_sweets_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_sweets_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_sweets_passive.png';" alt="Sweets">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_chips_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_chips_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_chips_passive.png';" alt="Chips">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_biscuits_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_biscuits_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_biscuits_passive.png';" alt="Biscuits">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_cakes_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_cakes_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_cakes_passive.png';" alt="Cakes">

</a></li>

</ul>

</div>

<ul>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

</ul>

</div>

<ul>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

</ul>

</div>

<ul>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

</ul>

</div>

Staff directory page

staff.php

<?Php

* @author Istvan Franko

<head>

<title>Beanaco Intranet, food and beverage company.</title>

</head>

<body>

</div>

<?php include 'menu/staff_menu.html'; ?>

<div class="clear"></div>

<form>

</form>

<h3> Staff/Management/HR</h3>

</div>

<div class="clear"></div>

<img src="/images/menu_elements/back_passiv.png" onmouseover="this.src='/images/menu_elements/back_activ.png';"

onmouseout="this.src='/images/menu_elements/back_passiv.png';" alt="Back">

</a>

</div>

function goBack() {

window.history.back()

}

</script>

<tr>

</a></td>

</tr>

</table>

</div>

Name: Frank B. Ruggerio<br>

Disposition: HR<br>

Tel: 070 0946 5643<br>

Room: SUL108<br>

Email: This email address is being protected from spambots. You need JavaScript enabled to view it.</h3>

</div>

<img align="right" src="/images/send_mail_passive.png" onmouseover="this.src='/images/send_mail_active.png';"

onmouseout="this.src='/images/send_mail_passive.png';" alt="Send email"></h3>

</div>

<hr>

</div>

<tr>

</a></td>

</tr>

</table>

</div>

Name: Peter T. Hamilton<br>

Disposition: HR<br>

Tel: 0191-567-7890<br>

Room: SUL203<br>

Email: This email address is being protected from spambots. You need JavaScript enabled to view it.</h3>

</div>

<img align="right" src="/images/send_mail_passive.png" onmouseover="this.src='/images/send_mail_active.png';"

onmouseout="this.src='/images/send_mail_passive.png';" alt="Send email"></h3>

</div>

<hr>

</div>

<tr>

</a></td>

</tr>

</table>

</div>

Name: Reyna J. Davis<br>

Disposition: HR<br>

Tel: 079 2282 5197<br>

Room: SUL108

9<br>

Email: reynajdavis@@beanaco.co.uk</h3>

</div>

<img align="right" src="/images/send_mail_passive.png" onmouseover="this.src='/images/send_mail_active.png';"

onmouseout="this.src='/images/send_mail_passive.png';" alt="Send email"></h3>

</div>

<hr>

</div>

<tr>

</a></td>

</tr>

</table>

</div>

Name: Terry P. Houston<br>

Disposition: HR<br>

Tel: 077 4442 8785<br>

Room: SUL109

9<br>

Email: This email address is being protected from spambots. You need JavaScript enabled to view it.</h3>

</div>

<img align="right" src="/images/send_mail_passive.png" onmouseover="this.src='/images/send_mail_active.png';"

onmouseout="this.src='/images/send_mail_passive.png';" alt="Send email"></h3>

</div>

<hr>

</div>

</div>

</body>

</html>

staff_menu.html

<ul>

<img src="/images/menu_elements/main_menu/main_manage_passive.png" onmouseover="this.src='/images/menu_elements/main_menu/main_manage_active.png';"

onmouseout="this.src='/images/menu_elements/main_menu/main_manage_passive.png';" alt="Management">

</a></li>

<img src="/images/menu_elements/main_menu/main_manufact_passive.png" onmouseover="this.src='/images/menu_elements/main_menu/main_manufact_active.png';"

onmouseout="this.src='/images/menu_elements/main_menu/main_manufact_passive.png';" alt="Manufacturing">

</a></li>

<img src="/images/menu_elements/main_menu/main_marketing_passive.png" onmouseover="this.src='/images/menu_elements/main_menu/main_marketing_active.png';"

onmouseout="this.src='/images/menu_elements/main_menu/main_marketing_passive.png';" alt="Marketing">

</a></li>

<img src="/images/menu_elements/main_menu/main_distri_passive.png" onmouseover="this.src='/images/menu_elements/main_menu/main_distri_active.png';"

onmouseout="this.src='/images/menu_elements/main_menu/main_distri_passive.png';" alt="Distribution">

</a></li>

</ul>

</div>

<a href="/menu/staff_submenu.htm" style="visibility:hidden">Sub Menu contents</a>

</div>

//mouseovertabsmenu.init("tabs_container_id", "submenu_container_id", "bool_hidecontentsmouseout")

mouseovertabsmenu.init("mytabsmenu", "mysubmenuarea", true)

</script>

staff_submenu.htm

<ul>

<img src="/images/menu_elements/sub_menu/sub_admin_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_admin_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_admin_passive.png';" alt="Adminitration">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_hr_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_hr_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_hr_passive.png';" alt="HR">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_it_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_it_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_it_passive.png';" alt="IT">

</a></li>

</ul>

</div>

<ul>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

</ul>

</div>

<ul>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

</ul>

</div>

<ul>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

</ul>

</div>

Documents library

documents.php

<?Php

* @author Istvan Franko

<head>

<title>Beanaco Intranet, food and beverage company.</title>

</head>

<body>

</div>

<?php include 'menu/documents_menu.html'; ?>

<div class="clear"></div>

<form>

</form>

<h3> Documents/Contract/Archived</h3>

</div>

<div class="clear"></div>

<img src="/images/menu_elements/back_passiv.png" onmouseover="this.src='/images/menu_elements/back_activ.png';"

onmouseout="this.src='/images/menu_elements/back_passiv.png';" alt="Back">

</a>

</div>

function goBack() {

window.history.back()

}

</script>

Document Name: Sample document in alphabet order<br>

Date: 12/12/2013<br>

Short despription: Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<br>

<a href="/download.php">Download</a>

<span class="right"><a href="/print.php">Print</a></span>

</div>

Document Name: Sample document in alphabet order<br>

Date: 12/12/2013<br>

Short despription: Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<br>

<a href="/download.php">Download</a>

<span class="right"><a href="/print.php">Print</a></span>

</div>

Document Name: Sample document in alphabet order<br>

Date: 12/12/2013<br>

Short despription: Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<br>

<a href="/download.php">Download</a>

<span class="right"><a href="/print.php">Print</a></span>

</div>

Document Name: Sample document in alphabet order<br>

Date: 12/12/2013<br>

Short despription: Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<br>

<a href="/download.php">Download</a>

<span class="right"><a href="/print.php">Print</a></span>

</div>

Document Name: Sample document in alphabet order<br>

Date: 12/12/2013<br>

Short despription: Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.<br>

<a href="/download.php">Download</a>

<span class="right"><a href="/print.php">Print</a></span>

</div>

</div>

</body>

</html>

documents_menu.html

<ul>

<img src="/images/menu_elements/main_menu/main_invoices_passive.png" onmouseover="this.src='/images/menu_elements/main_menu/main_invoices_active.png';"

onmouseout="this.src='/images/menu_elements/main_menu/main_invoices_passive.png';" alt="Invoices">

</a></li>

<img src="/images/menu_elements/main_menu/main_contracts_passive.png" onmouseover="this.src='/images/menu_elements/main_menu/main_contracts_active.png';"

onmouseout="this.src='/images/menu_elements/main_menu/main_contracts_passive.png';" alt="Contracts">

</a></li>

<img src="/images/menu_elements/main_menu/main_forms_passive.png" onmouseover="this.src='/images/menu_elements/main_menu/main_forms_active.png';"

onmouseout="this.src='/images/menu_elements/main_menu/main_forms_passive.png';" alt="Forms">

</a></li>

<img src="/images/menu_elements/main_menu/main_others_passive.png" onmouseover="this.src='/images/menu_elements/main_menu/main_others_active.png';"

onmouseout="this.src='/images/menu_elements/main_menu/main_others_passive.png';" alt="Notes board">

</a></li>

</ul>

</div>

<a href="/menu/documents_submenu.htm" style="visibility:hidden">Sub Menu contents</a>

</div>

//mouseovertabsmenu.init("tabs_container_id", "submenu_container_id", "bool_hidecontentsmouseout")

mouseovertabsmenu.init("mytabsmenu", "mysubmenuarea", true)

</script>

documents_submenu.htm

<ul>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

</ul>

</div>

<ul>

<img src="/images/menu_elements/sub_menu/sub_archive_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_archive_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_archive_passive.png';" alt="Archived">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_recent_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_recent_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_recent_passive.png';" alt="Recent">

</a></li>

</ul>

</div>

<ul>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

</ul>

</div>

<ul>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

</ul>

</div>

Noticeboard

noticeboard.php

<?Php

* @author Istvan Franko

<head>

<title>Beanaco Intranet, food and beverage company.</title>

</head>

<body>

</div>

<?php include 'menu/notices_menu.html'; ?>

<div class="clear"></div>

<form>

</form>

<h3> Noticeboard/Central/News</h3>

</div>

<div class="clear"></div>

<img src="/images/menu_elements/back_passiv.png" onmouseover="this.src='/images/menu_elements/back_activ.png';"

onmouseout="this.src='/images/menu_elements/back_passiv.png';" alt="Back">

</a>

</div>

function goBack() {

window.history.back()

}

</script>

<tr>

<h4><br>Sample Notice</h4>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

</a></td>

<h4><br>Sample Notice</h4>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

</a></td>

<h4><br>Sample Notice</h4>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget,

tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p>

</a></td>

</tr>

<tr>

<h4><br>Sample Notice</h4>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

</a></td>

<h4><br>Sample Notice</h4>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

</a></td>

<h4><br>Sample Notice</h4>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget,

tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p>

</a></td>

</tr>

<tr>

<h4><br>Sample Notice</h4>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget,

tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p>

</a></td>

<h4><br>Sample Notice</h4>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget,

tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p>

</a></td>

<h4><br>Sample Notice</h4>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

</a></td>

</tr>

<tr>

<h4><br>Sample Notice</h4>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget,

tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p>

</a></td>

<h4><br>Sample Notice</h4>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget,

tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p>

</a></td>

<h4><br>Sample Notice</h4>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

</a></td>

</tr>

</table>

</div>

</div>

</body>

</html>

notices_menu.html

<ul>

<img src="/images/menu_elements/main_menu/main_central_passive.png" onmouseover="this.src='/images/menu_elements/main_menu/main_central_active.png';"

onmouseout="this.src='/images/menu_elements/main_menu/main_central_passive.png';" alt="Central Notices">

</a></li>

<img src="/images/menu_elements/main_menu/main_personal_passive.png" onmouseover="this.src='/images/menu_elements/main_menu/main_personal_active.png';"

onmouseout="this.src='/images/menu_elements/main_menu/main_personal_passive.png';" alt="Personal Notices">

</a></li>

<img src="/images/menu_elements/main_menu/main_scheme_passive.png" onmouseover="this.src='/images/menu_elements/main_menu/main_scheme_active.png';"

onmouseout="this.src='/images/menu_elements/main_menu/main_scheme_passive.png';" alt="Scheme Notices">

</a></li>

<img src="/images/menu_elements/main_menu/main_archive_passive.png" onmouseover="this.src='/images/menu_elements/main_menu/main_archive_active.png';"

onmouseout="this.src='/images/menu_elements/main_menu/main_archive_passive.png';" alt="Archive Notices">

</a></li>

</ul>

</div>

<a href="/menu/notices_submenu.htm" style="visibility:hidden">Sub Menu contents</a>

</div>

//mouseovertabsmenu.init("tabs_container_id", "submenu_container_id", "bool_hidecontentsmouseout")

mouseovertabsmenu.init("mytabsmenu", "mysubmenuarea", true)

</script>

notices_submenu-htm

<ul>

<img src="/images/menu_elements/sub_menu/sub_news_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_news_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_news_passive.png';" alt="News">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_events_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_events_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_events_passive.png';" alt="Events">

</a></li>

</ul>

</div>

<ul>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

</ul>

</div>

<ul>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

</ul>

</div>

<ul>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

<img src="/images/menu_elements/sub_menu/sub_notyet_passive.png" onmouseover="this.src='/images/menu_elements/sub_menu/sub_notyet_active.png';"

onmouseout="this.src='/images/menu_elements/sub_menu/sub_notyet_passive.png';" alt="notyet">

</a></li>

</ul>

</div>

References

960 Grids

960 Grid System. 2014. [ONLINE] Available at: http://960.gs/ [Accessed 15 November 2014].

What is the intranet?

BBC. 2014. What are intranets and extranets? [ONLINE] Available at: http://www.bbc.co.uk/webwise/guides/intranets-and-extranets [Accessed 08 November 2014].

M Bradyley. 2014. Definition: Intranet [ONLINE] Available at: http://compnetworking.about.com/cs/intranets/g/bldef_intranet.htm About Tech. [Accessed 08 November 2014].

Colour base

Pixabay.com 2014. Easter eggs in coconuts shell [ONLINE] Available at: http://pixabay.com/en/easter-eggs-shell-coconuts-hard-15303/ [Accessed 10 November 2014].

Adobe Kuler. 2014. Adobe Color CC [ONLINE] Available at: https://color.adobe.com/Colour-base-color-theme-4644242/ [Accessed 10 November 2014].

Font theses

D Halpern. 2012. What’s the Best Font For Your Site? (The Psychology of Fonts). [ONLINE] Available at: http://socialtriggers.com/best-font-website/. [Accessed 04 November 2014].

W3 Schools. 2014. CSS Web Safe Font Combinations [ONLINE] Available at: http://www.w3schools.com/cssref/css_websafe_fonts.asp [Accessed 10 November 2014].

Menu bar source

Dinamic Drive. 2013. Mouse Tabs Menu [ONLINE] Available at: http://www.dynamicdrive.com/dynamicindex1/mouseovertabs.htm [Accessed 06 November 2014].

Greenspace Nordic. 2014 Shell [ONLINE] Available at: http://intothearctic.gp/en/#/map/villains/shell/info [Accessed 02 November 2014].