var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML="SideWays "+h+":"+m+":"+s;
t=setTimeout('startTime()',500);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</script>
<!--End of Java Script-->
<!--CSS Code Name-->
<body onload="startTime()">
<div id="txt"></div>
</h1>
<!--Header Image-->
<img src="images/sideways.jpg" alt="" width="801" height="144" />
<ul id="navigation">
<!--Links to next page-->
<li><a href="index.html" title="?">Home</a></li>
<li><a href="sidew.html" title="?">SideW News </a></li>
<li><a href="" title="?">Videos</a></li>
<li><a href="" title="?">Events</a></li>
<li><a href="" title="?">Contact</a></li>
</ul>
<!--Header 3 "H3" can be find in CSS code-->
<blockquote id="quotes" cite=""><h3></h3>
<p> Great slide, more fun!</p>
</blockquote>
<!--Here where I keep my news. Every section has its own Header - At this point the Header 4 "H4"-->
<div id="maincontent">
<!--CSS Code Name-->
<div id="introductionnews">
<p id="intro"> SideWays is Europe's number 1 for Drifting. It's run for Drifters by Drifters and backed up with years of Drifting experience. </p>
<!--CSS Code Name-->
<div id="news">
<h4>The Art & Soul of Drifting </h4>
<p><object width="480" height="208">
<!--This is the video link from another web site, so it lets users to watch the video clip-->
<param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=16596346&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=00adef&fullscreen=1&autoplay=0&loop=0" /><embed src="" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="480" height="208"></embed></object><p></p>
</p>
<h4>
<!--Contents of the news section-->
Want a set of 15×8? Grid V wheels cheaper than ever before?</h4>
<p>We’re over-stocked here at Driftworks at the moment and so a continued effort to clear some space in the warehouse for new lines of products we’ve discounted the Rota Grid V in 15×8 ET0 4×100 in both the gorgeous gloss black and silver with polished lip. So you can now get them for 15% off RRP – This means that a set of four of these lovely wheels will now cost you just £453.49 + delivery! All you have to do is order them online and use the discount code <!--Strong stands for Bold to make the text bold--><strong>DISCOUNTGRIDV</strong> to save £76.51 off RRP. Click on the photos below to be taken through to the shop… and don’t forget to use your discount! </p>
<!--Image link-->
<p><img src="" alt="" width="393" height="262" /></p>
<p> </p>
<h4>AE86 CS2 Coilovers</h4>
<!--Image link-->
<p><img src="" alt="" width="454" height="258" /></p>
<!--Contents of the news section-->
<p>These are so good and popular they sold out pretty much as soon as we got them in, so I was lucky enough to nab a set quickly before they launched out of the dispatch office.</p>
<h4>Formula Drift: Title Fight 2011</h4>
<!--This is the video link from another web site, so it lets users to watch the video clip-->
<p><object width="498" height="271">
<param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=31132672&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=&fullscreen=1&autoplay=0&loop=0" /><embed src="" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="498" height="271"></embed></object><p></p></p>
</div>
</div>
<!--End of News-->
<!--Random pictures from our events-->
<div id="recentwork">
<h5>Random</h5>
<ul>
<li>
<h6>Group</h6>
<img src="" alt="" width="139" height="112" />
<p> Tokyo Drifting</p>
</li>
<li>
<h6>JapMeet</h6><img src="" alt="" width="145" height="83" />
<p> Burning tyres</p>
</li>
<li>
<h6>Drifting</h6>
img src="" alt="" width="145" height="86" />
<p> Sky blue
</p>
</li>
</ul>
</div>
</div>
</div>
<div id="footer">
<p>SideWay Copyright © 2011 </p>
<p> </p>
<!--Link to Reference page-->
<p><a href="">References</a> </p>
</div>
</body>
</html>
<!--End of web site-->
Explanation of CSS
Including CSS source code (5 marks).
/* Start of CSS Document */
* {
margin: 0;
border: 0;
padding: 0;
}
<!--This is the all body color-->
body {
background-color: #000000;
font-family: "Trebuchet MS",sans-serif;
}
<!--Begining of the web site Clearfix lets me to create a table, then is user goes to different page table and style stays the same, but only the information in that table changes-->
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
font-size: 0;
}
.clearfix {
display: inline;
}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
<!--End of clearfix-->
<!--This code will allow me move and change sizes and colors of my positioning position images, text, and other elements on page -->
#container {
margin: 0 auto;
width: 800px;
background-color: #F3F3F3;
border-left: 8px solid #A9B9BF;
border-right: 8px solid #A9B9BF;
padding-bottom: 45px;
}
<!--Header 1 size, color and font-->
h1 {
background-color: #383E40;
border-bottom: 1px solid #666;
height: 19px;
color: #CCC;
font-size: 12px;
padding: 3px 10px;
}
<!--Header 2 size, color and font-->
h2 {
background-color: #E1F7FF;
height: 110px;
font-size: xx-large;
color: #333;
letter-spacing: -3px;
padding: 30px 40px;
border-top: 1px solid #9FD6EA;
}
<!--Style of navigation-->
#navigation {
height: 30px;
background: #383E40;
list-style-type: none;
}
<!--This is a navigation bar, where all my links are-->
#navigation li {
float: left;
text-align: center;
border-right: 1px solid #A3A3A3;
}
<!--Navigation bar specific link table, its size, color and font-->
#navigation a {
width: 159px;
display: block;
height: 26px;
font-size: 16px;
color: #CCC;
text-decoration: none;
padding-top: 4px;
}
#navigation a:hover {
background-color: #717C80;
}
<!--Quotes or we can call it a specific table-->
#quotes {
list-style-type: none;
float: right;
width: 350px;
height: 25px;
background-color: #919191;
border-left: 450px solid #9D9D9D;
}
<!--Header 3 size, color and font-->
h3 {
font-size: 14px;
color: #333;
font-style: italic;
float: left;
margin-left: 10px;
}
<!--This option lets me make specific paragraph style-->
#quotes p {
font-size: 12px;
color: #333;
float: right;
margin: 2px 20px;
}
<!--News section-->
#introductionnews {
float: left;
width: 540px;
margin: 5px;
}
<!--Introduction to news section options-->
#intro {
font-size: 16px;
color: #CCC;
font-style: italic;
background: #333;
padding: 5px;
border-bottom: 4px solid #666;
}
<!--Size of news section-->
#news {
margin-top: 10px;
}
<!--Header 4 size, color and font-->
h4 {
font-size: 16px;
padding-left: 10px;
background-color: #383E40;
color: #F1FCFF;
margin-top: 10px;
}
#news p {
background-color: #F1FCFF;
padding: 15px;
}
<!--This is the setting for Random section table, size, color and pictures-->
#recentwork {
width: 243px;
float: right;
background-color: #FDFFFF;
margin: 5px;
margin-left: 0;
border: 1px solid #A9B9BF;
}
#recentwork ul {
list-style-type: none;
}
<!--Header 5 size, color and font-->
h5 {
height: 35px;
background-color: #BFD2D9;
color: #383E40;
font-size: 22px;
font-style: italic;
border-right: 4px solid #383E40;
}
<!--Header 6 size, color and font-->
h6 {
height: 20px;
background-color: #F1FCFF;
font-size: 12px;
padding-left: 10px;
border-top: 1px solid #717C80;
}
<!--How big the images has to be in this section-->
#recentwork img {
border: 2px solid #717C80;
margin-left: 44.5px;
margin-top: 10px;
}
#recentwork p {
font-size: 12px;
color: #FFF;
background-color: #717C80;
margin-top: 5px;
padding: 5px;
border-bottom: 1px solid #383E40;
}
<!--Footer size, color and font-->
#footer {
margin: 0 auto;
margin-top: -30px;
width: 800px;
height: 30px;
background-color: #717C80;
border-left: 8px solid #A9B9BF;
border-right: 8px solid #A9B9BF;
text-align: center;
}
#footer p, a {
color: #F1FCFF;
font-size: 14px;
padding-top: 5px;
}
Explanation of JavaScript
Brief explanation of each JavaScript statement used in your web site, including JavaScript source code (10 marks).
This JavaScrip holds the time that is now. On the top of the web page. This will help people to see what times it is at the moment.
This JavaScript get your computer original time and show same time in the web site.
<!--Java Script for the Time on Header 1 "H1" can be find in CSS code-->
<h1>
<script type="text/javascript">
function startTime()
{
var today=new Date();
<!--Get hours from your system-->
var h=today.getHours();
<!--Get minutes from your system-->
var m=today.getMinutes();
<!--Get seconds from your system-->
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
<!--Code which makes java script work-->
document.getElementById('txt').innerHTML="SideWays "+h+":"+m+":"+s;
t=setTimeout('startTime()',500);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</script>
<!--End of Java Script-->
Usability / Design Discussion
One A4 page (no more) discussion of usability/design showing (with 3 examples) how your site demonstrates good usability/design principles eg consistency, structure, but not simplicity (10 marks).
Navigation
Navigation bar has to be obvious and consistent throughout the web site so people don’t have to learn new navigation around web page tips, this navigation design is very simple and used in most of the web sites. User can also use “Back” button and go to previews page with no problem, to same point that he was before.
Home
Home page in my design I always have a consistent link to the home page of my site in the same location on every page, then user can easier access home page, from anywhere, this makes easier for user to navigate.
Text
Text is easy writen, so user can read the artice and understand what is about. Text always has a easy to read color on, so people can see the text properly, separate text boxed help to navigate around the web page and don’t get lost where you stoped reading.
Web Site Background
Web site is in plain background color, because its much easier for user to understand the text and web site contents.
My page is really small and shot, so everything is just few click away from each other, this may help users to search and found what they want. Also my web site don’t have any adverts and link becouse this wont be nesseseraly, this may help atract more people, because some web sites has lots of uselles links and adverts which people see and leave the web site.
I chosen this simple design becouse its looks nice, easy to make and easy to navigate arouns, dar colors helps web site stick with man and cars, small readable contents helps easy to found what users are looking.
Contact section lets people contact us and give feedbacks about our web site.
Use of css how it help me to build the web site?
Cascading Style Sheets
CSS is very useful for creating webpage style, has useful codes and short cuts for a design. CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable. CSS has a simple syntax and uses a number of English keywords to specify the names of various style properties. A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors and a declaration block. A declaration-block consists of a list of declarations in braces. When I know all the codes of CSS its easy to navigate around and change sizes and colors of everything that I need.
