Here is a few screenshots of my site from start to now:

This is when I decided to change my site:

 Above is the template for the new site, The layout is pretty much the same, just a few minor changes like the footer links and colors.

Website 

Here I will explain some parts of my site and how I achieved the look I wanted.

Header:   The header is styled the same on all pages.  It consists of a logo on the left, dummy facebook and twitter link, and my navigation.  The navigation is a an Unordered List, with the list elements floated left.  There is a border top and bottom when hovered over, and also the same border when the page is active.

Footer:  The footer is also the same on all pages.  There is a link to my blog on the left, which when hovered over changes image, this is also an external link to this blog.  The image change as done using javascript.
Code :
<a href="http://zebone29.blogspot.ie/" onmouseover="document.joelogo.src=joe2.src"             onmouseout="document.joelogo.src=joe.src" target="_blank">
   <img src="file://localhost/Users/newuser/Desktop/website/images/joe.png" name="joelogo" alt="blog link">
        </a>
Then there is a javascript file..javascript/script.js..which is the code for the image swap.


There is also a to top scroll button on the right.
Code:
<!--to top button-->
    $('a[href=#toTop]').click(function(){
        $('html, body').animate({scrollTop:0}, 'slow');
        return false;
    });

});


The content of each page is different, not by much, there is some adjustments to height so each page has its own content styling.
Some other features are the table which is highlighted when hovered over.
A google map is on the contact page, this was easy to insert and is handy for future use.
The stats page is made of mostly of 2 images, representing a petrol station fuel price bilboard.

Web Programming

WEEK 11

web project

At the end of last week I decided to start my site again, I wanted it to be cleaner and more modern.  I could not use the original site I had made, I would of spent too long re-arranging the div's, so I started from scratch.  I used the 960 grid for layout and kept it very simple.  My site is now made up of 5 main div's, the main div, set to 960 px wide.  The other 4 div's are horizontal, header, footer and 2 div's in between.  The images and flash are the same as they where, so once I had the page laid out I could start adding content.

I used kuler to get a color template, I used some of the colors but as I went further I used more and more white.  I added orange, which wasn't part of the original kuler but since I had varied from the kuler this didn't matter.

Overall now I am happier with the site and having not been sure what kind of style I like best I think clean is the style I am leaning towards.  It is easy however when doing a clean site to add to much and loose the clean look, even a border the wrong color or size can loose the look.

Web Programming

WEEK 10

This week we looked further into the design and layout.  We looked more at the 960 grid and how important it is to have a clear grid and idea of the site you want to make.  We also talked about inspect element(chrome) and how we can use this to see the the paddings and margins applied by browsers.

We looked at form validation from a jquery library, and how to style your form.

Web Programming

WEEK 10

Web Project

This week I started to code out the menu and the home page.  I aligned my links to centre of the page, which proved trickier than I first thought.  I had to use display:inline block, something I hadn't used before and something ill need to look at further.  I used some border styles to hold the content and made them flexible.

Next was the contact form. The form itself isn't to bad to do, but styling the form is tough.  I wanted this page to be empty apart from the form so I made the form quite big and bold.  Then I used absolute positioning to make the form display inputs on both sides instead of straight down, This was tricky and something that made me sit back a few times and really think of what I was doing and what the css was doing, or trying to do in some cases

Web Programming

WEEK 9.
Web Project

This week I started to mock up my site, I decided to do a minimalist site with a clear layout.  I started by sketching in my pad and soon came up with the box model for the site.  I than went to Photoshop and marked out the box model so i had a clear image of where I was going.  I then started to code the site, laying out the div's as I had in Photoshop.  With the box model already done the coding wasn't hard and the site was laid out fairly soon.  At this stage the The content was'nt important the design and layout was the main part.  I now have a layout for the home page, This page will be the template for all other pages.

Web Programming

WEEK 7 and 8

In week 7 and 8 we looked in depth at the design and structure of websites.  We looked at the importance of grids when designing a website and we were asked to use a grid to outline a web page.  Using a grid makes it a lot easier to plan the layout and gives you direction.  Without using a grid or any form of planning and jumping straight into the code is never a good idea, this is where problems occur that could have been prevented with planning.  Even a simple sketch will help the structure and make it easier to create the look you want.

We also covered the design of a web site, like the use of only a few colors used throughout the site.  For example make all the headings the same color, all the images the same style, borders etc.  Without the continuity the site can become messy and will have no real flow and users will pick up on this.

Web Programming

Web site examples

This week we were asked to find examples of different types of sites, these are the sites I found.

Vintage modernizm: http://www.level2d.com/home.html : 

This site is a very modern site done in an old retro style, for me the font on this site makes it.

Minamilist: http://frankchimero.com/info/:

This is a perfect example of minimalism. I love the use of white space and how simple and clear the site is.

Grunge: http://www.thestrokes.com/us/music

I like the use of black on this site to highlight everything. even tho black is the main color this site doesnt seem too dark.

Grid based: http://www.harveynorman.ie/

This is a good example of a grid based website, the grid layout is clear to make out

Web Programming

WEEK 5

This week we started on CSS, Cascading Style Sheets.

CSS is used to style everything on the page, from text to images.

Your CSS should be in a separate CSS folder, then you link the CSS through a link in the HEAD of the document. This greatly reduces the amount of CSS required and makes simple changes..simple.

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

Web Programing

WEEK 4

This week we discussed the importance of planning a website.

Planning is somewhat overlooked but is arguably the most important part of the design process.

Without proper planning a website can become lost in process.

we plan our layout, colors, fonts, images, navigation....EVERYTHING!!

If you properly plan your site then the code and style will be much easier, less time changing and hopefully 

no Major problems will arise during the making of the site

Web Programing

WEEK 3:

           In week 3 we covered links, more specifically linking from one page to another.

           Firstly we looked at LISTS, ul, ol etc to make a list.

           We then used the a..or anchor tag to link to another page we had made.

           Surrounding a piece of text in an anchor tag make this text an active link.
eg <a href="http://zebone29.blogspot.ie/">my blog</a>

Some key points of linking

• open and close anchor tag.
• Destination of link between quotes.
• Destination of file/img is correct.

Web Programing

WEEK 2:

           In week two we discussed the structure of a web site/page.

           We covered the HTML tag(doctype), HEAD tag, BODY tag and TITLE tag. These tags are the building    blocks of a  web page: eg;

<HTML>

   <HEAD>

     <TITLE>  < /TITLE>

   </HEAD>

 <BODY>

    *all content here

 </BODY>

</HTML>

       We also discussed the laws of tag/selectors..eg..<h1>,< h2>, <p>, <ul>, <li> etc.

      Every tag(few exceptions*) must have an opening and closing tag.

*line break is an example of this.<br />

About me

Hey 143.

My names Joseph O'Reilly.  Im 26 and coming here as a muture student.

When finishing school(2003) I chose to presue a trade.  6 years later and I was a fully qualified Cabinet Maker...then let go.  After a year or so of looking for a job i decided to see a carrer councilor and through her decided to study multimedia. I have just finished second year in SCD-senior college dun laoghaire and now starting here.  Apart from that I play guitar, big into music, and sports, liverpool fan too.

And here is a link to my last years blog  http://josephor.wordpress.com/