Project 4 – Final Hand In

April 2, 2011 § Leave a comment

For this project’s final work we have to produce a web site for an event to show what we learnt during the course about web site production and we have to focus on web site elements like links, media, scripts and other web elements.

I chose to make a web site for an event called Emergenza Radio. It’s a streaming radio’s program, conducted by my friends in Rome, and it is on air every thursday.

The first step was to collect some pictures through the facebook’s group. With them I made a moodboard. I made the logo for them a couple of years ago.

Then I began to sketch something on my sketch book, and I made a graphic interface in Photoshop.


interface

I even made a layout scheme and a colour scheme in Photoshop.

After the work in Photoshop, I began to work with Dreamweaver. I made some video tutorials to help understanding how I worked in Dreamweaver but anyway I will post all the html and css code.

Layout Design

I began using a Dreamweaver CS4 template, it is easier and quicker and it gave me all the web page settings to start.

I made my layout adding more divs and I coloured them with different colurs to have an idea of what it will be.

Below a screengrab of the layout, you can see the different divs with different colours.

Now I began to give to the layout the colours and the image that I made before with Photosop.

Below a screengrab of the layout, you can see it is taking shape.

body  {
 margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
 padding: 0;
 text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
 color: #000000;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 100%;
 background-color: #666666;
 background-image: url(images/background-emergenza-radio.jpg);
 background-repeat: repeat;
}
.twoColFixRtHdr #container {
 width: 800px; /* the auto margins (in conjunction with a width) center the page */
 border: 1px solid #000000;
 text-align: left; /* this overrides the text-align: center on the body element. */
 margin-top: 0;
 margin-right: auto;
 margin-bottom: 0;
 margin-left: auto;
 position: relative;
 background-color: #000;
 color: #FFF;
}

I began to work on the different divs placing contents and pictures…

div #top

#top

<div id="top"><a href="http://www.fusoradio.net" target="_blank"><img src="images/logo-fusoradio.png" alt="icon-fusoradio" width="87" height="30" align="right" /></a><a href="http://www.myspace.com/otteruf" target="_blank"><img src="images/myspace_logo.png" alt="icon-my-space" width="30" height="30" align="right" /></a><a href="http://www.facebook.com" target="_blank"><img src="images/logo-facebook.png" alt="icon-facebook" width="30" height="29" align="right" /></a>
 <div id="followus">Follow Us</div>
 <a name="totop" id="totop"></a></div>
#top {
 height: 35px;
 padding-top: 5px;
 padding-right: 30px;
 font-size: small;
}
#followus {
 position: absolute;
 left: 541px;
 top: 16px;
}
.iconspace {
 margin-left: 5px;
}
img {
 border-top-style: none;
 border-right-style: none;
 border-bottom-style: none;
 border-left-style: none;
}

div #header

header

<div id="header">
 <div id="everythu"><a href="http://www.fusoradio.net" target="_blank"><img src="images/emergenza-radio-on-lin-on-f.png" width="187" height="122" alt="emergenza-radio-on-line" /></a></div>
 <!-- end #header -->
 </div>
.twoColFixRtHdr #header {
 height: 375px;
 background-image: url(images/emrgenza-radio-header-logo.jpg);
}
#everythu {
 width: 200px;
 position: absolute;
 left: 11px;
 top: 242px;
}

div #navbar

navbar

<div id="navbar"><a name="homepage" id="homepage"></a><a href="#homepage">Home</a> | <a href="#">About</a> | <a href="#">Contact</a> | <a href="http://www.fusoradio.net">Fusoradio</a></div>
#navbar {
 font-family: MyUnderwoodRegular, Verdana, Geneva, sans-serif;
 background-color: #eace01;
 height: 25px;
 font-size: 20px;
 font-weight: 500;
 letter-spacing: 3px;
 text-align: right;
 color: #000;
 padding-top: 10px;
 padding-right: 30px;
}
@font-face {
 font-family: 'MyUnderwoodRegular';
 src: url('font/MyUnderwood-webfont.eot');
 src: url('font/MyUnderwood-webfont.eot?iefix') format('eot'),
 url('font/MyUnderwood-webfont.woff') format('woff'),
 url('font/MyUnderwood-webfont.ttf') format('truetype'),
 url('font/MyUnderwood-webfont.svg#webfontTjpwvVPS') format('svg');
 font-weight: normal;
 font-style: normal;
}
a:link {
 color: #000;
 text-decoration: none;
}
a:visited {
 text-decoration: none;
 color: #000;
}
a:hover {
 text-decoration: none;
 color: #900;
}
a:active {
 text-decoration: none;
 color: #000;
}

div #sidebar

sidebar

<div id="sidebar1">
 <h3><img src="images/every-thu.png" width="227" height="56" alt="every-thu-emergenza-radio" /></h3>
 <div>
 <h3><a href="http://www.fusoradio.net/radio/ascolta.asp" target="_blank">Listen live</a></h3>
 </div>
 <div>
 <h3><a href="http://www.fusoradio.net/radio/ascolta_trasmissioni.asp" target="_blank">Listen Poadcast</a></h3>
 </div>
 <!-- end #sidebar1 -->
 </div>
.twoColFixRtHdr #sidebar1 {
 float: left; /* since this element is floated, a width must be given */
 width: 220px;
 padding-top: 21px;
 padding-right: 7px;
 text-align: right;
}
.classlink a:link{
 color:#FFF;
 text-decoration:underline;
}
.classlink a:visited{
 color:#FFF;
 text-decoration:underline;
}
.classlink a:active{
 color:#FFF;
 text-decoration:underline;
}
.classlink a:hover{
 color:#CCC;
 text-decoration:underline;
}

div #main content

main content

<div id="mainContent">
 <h1>
 NEXT EPISODE OF EMERGENZA RADIO </h1>
 <h2>THURSDAY 3RD FEBRUARY</h2>
 <div>
 <div>
 <p><img src="images/thu-3-feb-fly.jpg" alt="fly-emergenza-radio" width="204" height="187" align="left" />Emergenza Radio has selected <br />
 5 Rock bands for the next episode:<br />
 <br />
 L' Officina della Camomilla<br />
 Lola and the Lovers<br />
 Megaride<br />
 Rito Pagano<br />
 Rockazzi<br />
 <br />
 <a href="#" target="_blank">Listen episode</a><br />
 <br />
 <a href="#totop">Back to the top</a></p>
 </div>
 </div>
 <div> </div>
 <h2>THURSDAY 20TH JANUARY</h2>
 <p><img src="images/thu-20-jan-fly.jpg" alt="fly-emergenza-radio" width="205" height="242" align="left" />Emergenza Radio has selected<br />
 6 Rap bands for the next episode:<br />
 Esa<br />
 Ill Nano<br />
 Willy Valanga<br />
 Tejaman<br />
 JunglaBeat<br />
 Don Diegoh</p>
 <div>
 <p><a href="#" target="_blank">Listen episode</a></p>
 </div>
 <div>
 <p><a href="#totop" target="_blank">Back to the top</a></p>
 </div>
 <p>&nbsp;</p><!-- end #mainContent -->
 </div>
.twoColFixRtHdr #mainContent {
 float: left;
 width: 430px;
 margin-left: 20px;
 padding-top: 25px;
 padding-right: 3px;
 padding-left: 2px;
}
p {
 text-align: right;
 font-size: small;
}
h1 {
 font-size: 19px;
}
h2 {
 font-size: 14px;
}
.imagespace {
 margin-bottom: 10px;
 margin-right: 10px;
}

some graphic details in the navigation bar

graphic details

<div class="arrow"></div>
 <div id="stars"></div>
 <div id="splash"></div>
#splash {
 background-image: url(images/splash.png);
 height: 150px;
 width: 88px;
 position: absolute;
 left: -59px;
 top: 408px;
}
#stars {
 background-image: url(images/stelle.png);
 height: 57px;
 width: 67px;
 position: absolute;
 left: 754px;
 top: 444px;
}
.arrow {
 background-image: url(images/arrow-yellow-nav-bar.png);
 height: 27px;
 width: 42px;
 position: absolute;
 left: 307px;
 top: 449px;
}

anchors and java script “smooth scroller”

<head>
 <script language="javascript" src="js/smooth-src-comments.js"></script>
 <script language="javascript" src="js/smooth.pack.js"></script>
 </head>
 <a name="totop" id="totop"></a>
 <a name="homepage" id="homepage"></a>

div #footer

footer

<div id="footer">
 <p>© 2011 Emergenza Radio - Design by Giorgio Scappaticcio</p>
 <!-- end #footer -->
 </div>
.twoColFixRtHdr #footer {
 padding: 0 10px 0 20px;
 background-color: #eace01;
}
.twoColFixRtHdr #footer p {
 margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
 padding: 10px 0;
 color: #000;
 text-align: left;
}

Ok now the page Home is finished, the post will continue with the About and Contact pages design…

Advertisements

Where Am I?

You are currently browsing the Project 4 – Final Work category at Giorgio Scappaticcio's Blog.