Documentation

Pseudo- code for Hompage
Wrapper
Header
Title
Image
/header
body
main image
nav
links
/body
footer
/footer
/wrapper
Pseudo- code for Personal Profile/Me myself and Brunel/Fascinating

Multimedia/Stalk
Wrapper
Header
Title
Image
/header
body
table
text (left)
image (right)
nav
links
/body
footer
text (copyright)
/footer
/wrapper
Pseudo-code for Portfolio
Not used as it’s a link to an external website
Pseudo-code for Links

Wrapper
Header
Title
Image
/header
body
main image
nav
links
/body
footer
/footer
/wrapper
CSS STYLESHEET
/* Main body and the properties required for all aspects in the body */
body
background-color:#CCCCCC;
padding: 80px;
font-family:Arial, Helvetica, sans-serif;
color:#999999 ;
font-size:9.4px;
text-align:center;
/* Wrapper to hold all contents */
#wrapper
border: 4px solid #FF0000;
background: #ffffff;
width: 800px;
height: 600px;
margin: auto;
text-align:center;
/* Styles for the Header */

#head
padding: 0px;
margin: 0 auto;
width: 750px;
text-align:center;
/* Styles for main contents. ( font styles -though its stated in the body, it doesnt always appear on all
browsers so the font styles had to be defined again) */
#contents
padding: 0px;
margin:: 80 auto;
border:#FF0000 thick;
width: 750px;
height: 300px;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
color:#999999;
/* Text within the tables were being over written therefore a text id was added which solved my
problem */
#text
{
font-size:10px;
/* In places the main text weree being collided with the nav or footer, this added to leave a space
between them. */
#space
background:#FFFFFF;
padding: 20px;
/* Navigation style */
#nav
color:#666666;
background-color:#FFFFFF;
width: 750px;
height:20px;
padding: 10px;
#nav ul
{ list-style:none;
width:750px;
float:left;
padding:0;
margin:0;
background:#ffffff;
text-align:center;
}
#nav ul li
{ float: left;
text-align:center;
margin: 0px 20px;
#nav ul a
display::block;
color:#999999;
padding: 0.3em 2em 0.3em 2em;
text-decoration:none;
line-height: 1.4em;
#nav ul a:hover
background-color:#888888;
color:#FFFFFF;
#a
text-decoration: none;
color:#666666;
}
/* Image links had a border around them when linked, to get rid of this the following was added */
img
border: 0;
background-color: none;
text-decoration: none;
border: none;
padding: 0px;
/* Properties for the footer */
#footer
width: 750px;
border: 0 solid;
padding: 10px;
background:#ffffff;
color: #cccccc;
font-size:8px;
text-align:center;
}
HOMEPAGE HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Farhas Homepage</title>

<link rel="stylesheet" type="text/css" href="styles.css" />
</head>


<body>

<div id="wrapper">

<div id="head"><img src="images/fhomepage.gif" width="600" height="140" alt="Farha's

Homepage" /></div>


<div id="contents">
<p><img src="images/me.jpg" width="650" height="250" alt="Farha's Homepage" /></p>

<div id="space"></div>


<div id="nav">
<ul>
<li><a href="personalprofile.html">Profile</a></li>
<li><a href="mebrunel.html">Me Myself & Brunel</a></li>
<li><a href="multimedia.html">Fasinating Multimedia</a></li>
<li><a href="stalk.html">Stalk</a></li>
<li><a href="http://www.finalcrit.com//portfolio/misstory">Portfolio</a></li>
<li><a href="links.html">Links</a></li>
</ul>
</div>


<div id="footer">
<p>© 2008 . Farha Rehnnuma</p>
</div>

</div>

</div>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10-blue"
alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
</p>
</body>
</html>
PERSONAL PROFILE
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
<title>Personal Profile</title>

</head>

<body>

<div id="wrapper">

<div id="head">
<p><img src="images/farhas_profile.gif" width="600" height="140" alt="Profile Page" /></p>
</div>

<div id="contents">

<table width="750" border="0">
<tr>
<td width="440" id="text">A brief introduction to me; Im Farha Rehnnuma. Studing Multimedia
Technology and Design at Brunel University. I turned 19 on the 5th of September. Anyway carry on
reading if you want to get to know me a little better.
<p>Main point to note about me is that I love photography!! It's a passion! You wont ever see me
without carrying a camera. I guess it's the first thing worthwhile talking about. Its simple I jus love all
the clicking! People would describe me as shy, and quite although I completely disagree. Hand me a
camera and you'll see a complete new person. I would be on the floor, tilting the camera side to side
to try out different angles till I get a good shot. Yes people do look at me strangely and I do get the
odd looks. But it doesn't't actually bother me as most of the time I wont ever see theses people
again and those that I do see again know I'm mad about taking pictures.</p>
<p>I guess the first time I got into photography would be the start of my photography A-levels,
obviously I did get an A J. Also for my a levels I studied Art- which has always been one of my
favourite subjects as its not limited to ideas and expressing your self, not I got an A J. Also did Media,
which helped greatly in knowing about social sciences which also involved watching A LOT of movies
which was great. Not forgetting Product Design which was actually the initial career path I wanted to
head in but web design and photograph and graphics came into an interest.</p>
<p>Which is why I now study a Multimedia Design & Technology. Which I must mention turning
down two scholarships for this course was actually worth it!The reasons why I choose it is that I did
quite a variety of design using different medias, which can be demonstrated within my
portfolio.</p>
</td>

<td width="300"><img src="images/profilepik.jpg" width="290" height="330" alt="Farha

Rehnnuma" /></td>
</tr>
</table>
</div>


<div id="space">
</div>


<div id="nav">
<ul>
<li><a href="home.html">Home</a></li>
</ul>
</div>

<div id="footer">
</div>

</div>
<p>
alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
</p>
</body>

</html>
FASINATING
MULTIMEDIA HTML

<head>
<title>Fasinating Multimedia</title>
</head>
<body>
<div id="wrapper">

<div id="head"><img src="images/showstudio.gif" width="570" height="140" alt="Showstudio.com"

/></div>

<div id="contents">


<tr>
<td id="text">
<p>The website is a online fashion broadcasting company. What makes this website unique is the
concept of the viewers being interactive with the fashion and art world. The site allows the viewers
access to "behind the scenes" , allowing viewers so see the whole process as its developed. This was
a website created by my favourite photographer Nick Knight with aid from Peter Saville (graphic
Designer). The website was launched in November 2000. The site brings together influential writers
photographers, artists, designers and cultural figures in untried interactive projects, movies and live
acts which brings all aspects of multimedia together to be viewed live, which innovative within the
fashion media. "SHOW studio is based on the belief that showing the entire creative process-from
conception to completion-is beneficial for the artist, the audience and the art itself." Nick Knight
SHOWstudio consists of live 24 hour coverage, which is global, with said of its dedicated viewers it
allows viewers to contribute to the projects. With addition to blog's and forum's which is
immediately updated allowing viewers to see from pre-production with meetings with stylists to the
live shoots, and the site documents it as it happens being more interactive to the public than ever
before. Which makes this website unique as the fashion media is often closed to audiences and only
the final image is often seen. I had discovered this site after looking into Nick Knight; who's an
inspirational photographer with surreal shots with creative composition and unthinkable concepts
which also make his work astounding. What I find inspiring as its not just photography but more
involvements of different types of multimedia as can been seen within his work.</p>
</td>
<td width="396"><img src="images/showstudio.jpg" width="324" height="267" alt="Images from

Showstudio" /></td>
</tr>
</table>

</div>
<div id="nav">
<ul>
</ul>
</div>

<div id="space2"></div>

<div id="footer">
</div>
</div>
<p>
</p>
</body>
</html>
ME MYSELF AND
BRUNEL HTML
<head>
<title>Me myself and Brunel</title>
</head>
<body>
<div id="wrapper">

<div id="head"><img src="images/mebrunel.gif" width="700" height="140" alt="Me myself and

brunel" /></div>

<div id="contents">

<tr>
<td width="425" id="text">
<p>Within the question paper it stated "your image should represent yourself as a part of Brunel".
Well really it should be the other way round; Brunel is a part of me and I have tried to incorporate
this within my image. By giving it the literal expression of "take a look inside me". This insists it being
a "part" of me, the deeper you look inside me the more closer involved you get to my life at Brunel;
as represented by the images within each frame; which also in turn are the most important aspects
of my life at Brunel. On the front image I am holding the image in quite a reluctant way?
Represented by myself looking down and holding the frame quite close; kind of a boundary perhaps?
Which tends to be the first impression people think of me; thus it being the out of the frame image.
The images within the frame representing my personality; as its inside me..get it? The second image
being working in the Mac labs which is where I spend most of my time at Brunel; nerd or what!
Which is another thing I appear to be but I actually kind of am this time! But multimedia is fun
though! Its not even work! This being the first image also signifies that it's the most important as it's
the only reason I'm at Brunel for the education. The next images shows me sitting randomly at "the
strip" at Brunel; which I was showing that I am quite odd and I do the strangest things most of the
time which is completely contrasting to the outer surface image people first tend to see me as. The
next being socialising which is another key point to my university life. Finally within the last frame
my friends are illustrated; my wonderful friends on MMTD J as it is the deepest part to me its also
the closest to ma heart. Yes you got it I come up with very cheesy lines too! Furthermore holding all
the pictures are also meant to represent my LOVE for taking pictures!</p>
<p>Image created by Farha Rehnnuma Image size: 234 KB (240,633 bytes)</p>
</td>
<td width="365"><a href="images/look%20inside.jpg"><img src="images/look%20inside.jpg"

width="280" height="340" alt="Me myself and brunel" /></a></td>
</tr>
</table>

</div>

<div id="nav">
<ul>
</ul>
</div>

<div id="footer">
</div>
</div>
<p>
</p>
</body>
</html>
STALK HTML
<head>
<title>Stalk</title>
</head>

<body>

<div id="wrapper">

<div id="head"><img src="images/presents_stalk.gif" width="500" height="140" alt="Stalk" />
</div>

<div id="contents">

<tr>

<td width="332" id="text">This was a video created by my former classmates and I on a recent
assignment to produce a video; by using images to illustrate an event during our first week. This was
an fictional story line in the form of a trailer documenting ones first day at Brunel University.</td>

<td width="390"><embed
src="http://www.onetruemedia.com/share_view_player?p=756d252b321ae3e4d76860"
quality="high" width="390" height="310" name="FLVPlayer" salign="LT"
flashvars="&p=756d252b321ae3e4d76860&skin_id=701&host=http://www.onetrue
media.com" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" /></td>
</tr>
</table>
</div>


<div id="space">
</div>


<div id="nav">
<ul>
<li><a href="mebrunel.html">ME Myself & Brunel</a></li>
</ul>
</div>


<div id="footer">
</div>
</div>
<p>
</p>
</body>
</html>
LINKS PAGE HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>Links</title>
</head>
<body>
<div id="wrapper">

<div id="head"><img src="images/resources.gif" width="704" height="140" alt="Resources" />
</div>

<div id="contents">Personal Link
<ul>
<li>http://www.finalcrit.com//portfolio/misstory</li>
</ul>
<p>Reference links</p>
<p>Recourses that I had used within the production of this website.</p>
<ul>
<li>http://www.showstudio.com/</li>
<li>http://www.channel4.com/culture/microsites/B/bigart/big4_artists.html</li>
<li>http://www.nickknight.com/</li>
<li>http://en.wikipedia.org/wiki/Nick_Knight_(photographer)</li>
<li>http://www.vogue.co.uk/biographies/080421-nick-knight-biography.aspx</li>
<li>http://onetruemedia.com/</li>
</ul>
<p> Documentation </p>
<p> The processes inwhich the website was made can be found in the link below </p>
<ul>
<li><a id="a"href="documentation.pdf" >Document</a></li>
</ul>
</div>
<div id="nav">
<ul>
<li><a href="mebrunel.html">ME Myself & Brunel</a></li>
</ul>
</div>
<div id="footer">
</div>
</div>
<p>
</p>
</body>
</html>

Documentation

Transféré par

Informations du document

Description originale:

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Documentation

Transféré par

Droits d'auteur :

Formats disponibles

Pseudo- code for Hompage

Pseudo- code for Personal Profile/Me myself and Brunel/Fascinating

Pseudo-code for Portfolio

Not used as it’s a link to an external website

Pseudo-code for Links

font-family:Arial, Helvetica, sans-serif;

/* Wrapper to hold all contents */

border: 4px solid #FF0000;

/* Styles for the Header */

font-family:Arial, Helvetica, sans-serif;

margin: 0px 20px;

padding: 0.3em 2em 0.3em 2em;

/* Properties for the footer */

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="styles.css" />

<div id="head"><img src="images/fhomepage.gif" width="600" height="140" alt="Farha's

<p><img src="images/me.jpg" width="650" height="250" alt="Farha's Homepage" /></p>

<li><a href="mebrunel.html">Me Myself & Brunel</a></li>

<li><a href="multimedia.html">Fasinating Multimedia</a></li>

<p>© 2008 . Farha Rehnnuma</p>

alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>

</body>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="styles.css" />

<p><img src="images/farhas_profile.gif" width="600" height="140" alt="Profile Page" /></p>

<table width="750" border="0">

<td width="300"><img src="images/profilepik.jpg" width="290" height="330" alt="Farha

<li><a href="mebrunel.html">Me Myself & Brunel</a></li>

<li><a href="multimedia.html">Fasinating Multimedia</a></li>

<p>© 2008 . Farha Rehnnuma</p>

alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="styles.css" />

<li><a href="mebrunel.html">Me Myself & Brunel</a></li>

<li><a href="mebrunel.html">ME Myself & Brunel</a></li>