Well yeah this was my cover for my web design unit work.
Had nothing to do with web design so i added some to the orange background.
:D
Thursday 7 June 2007
Web Design Cover
Well yeah this was my cover for my web design unit work.
Had nothing to do with web design so i added some to the orange background.
:D
Wednesday 6 June 2007
My Myspace
This is my myspace.
With this i basically just tried to use what i learnt in my research. I used div overlays and stayed as far away from the generic myspace layout as i could. I have added all my peers i could find and have also uploaded my work and photography to it the pictures page.
With this i basically just tried to use what i learnt in my research. I used div overlays and stayed as far away from the generic myspace layout as i could. I have added all my peers i could find and have also uploaded my work and photography to it the pictures page.
Bad Website
deathmetal.com
This is an example of a bad website. The website looks plain because there is a plain black background and not a lot of content. The graphics on the site I think look really tacky and cheap and not very inviting. The text on the site is red and lime green which I think looks bad because it also just looks tacky and not very well thought out. On the bands page there is just a list of bands down the left hand side and nothing on the right which makes the site look empty and once again not very well thought out.
This website hasnt had alot of thought put into the design ofthe website. The website isnt the greatest for navigation and also isnt inviting to make you wnat to come back. I think that it could have been really easy to make have put some design into the website and it wouldnt have taken an expert to do this.
This is an example of a bad website. The website looks plain because there is a plain black background and not a lot of content. The graphics on the site I think look really tacky and cheap and not very inviting. The text on the site is red and lime green which I think looks bad because it also just looks tacky and not very well thought out. On the bands page there is just a list of bands down the left hand side and nothing on the right which makes the site look empty and once again not very well thought out.
This website hasnt had alot of thought put into the design ofthe website. The website isnt the greatest for navigation and also isnt inviting to make you wnat to come back. I think that it could have been really easy to make have put some design into the website and it wouldnt have taken an expert to do this.
Tuesday 5 June 2007
Evaluation
At the start of this project I felt confodent and happy with the brief. I also felt that I would hopefully learn alot from this unit as it is something I am already interested in.
At the start of the unit i learnt a lot about the coding of websites that i did not already know. The main thing I learnt and was very interested in was the SEO ( Search Engine Optimisation ) Theres was alots of things about this that I did not know. The main thing I found from this was that you shouldnt just put your company name in the title but also what the page is about as this also helps the search engine. I also learnt about H1 tags or Heading 1 tags I did not realise these made such a differnce.
Once we started to look at the layout of websites and how to use different objects such as layers and tables I felt we could have looked a bit more into things. This was just a personal thought as I already knew these objects I felt we could have learnt alittle more about controlling these objects with code. This didn't effect me thought because I learnt these things by myself when people were learning about the layers.
Once i got stuck into making my website I came across alot of problems. At first I wanted to keep it to the same size as the last briefs size but I soon found this was hard as it was so small. I soon over came this by changeing the size and the layout of the page but keeping the same ideas. I felt the main thing with the layout i could have improved was the use of space. I feel that i could have made better use of some of the space. If i had done this again i would have changed how i displayed the album art work next to the album names and also on the home page would have made better use of the offers space. I also tried to encorporate things that I had found in my research and in the lesson tutorials into my site. This meant just picking up on little things that i found made a good website and also about SEO.
Overall I was really happy with my finished product and feel pleases as i have learnt alot of new things such as external css. I am mainly pleased as i feel i have produced a professional looking website that shows my skills. If i had alittle more time and hadn't have add some of the problems i did with the site layout i would have liked to add more SEO objects into the site like meta tags , keywords and H1 tags. There is only a few mainor things I would change but these arnt anything magor that i am worring about.
At the start of the unit i learnt a lot about the coding of websites that i did not already know. The main thing I learnt and was very interested in was the SEO ( Search Engine Optimisation ) Theres was alots of things about this that I did not know. The main thing I found from this was that you shouldnt just put your company name in the title but also what the page is about as this also helps the search engine. I also learnt about H1 tags or Heading 1 tags I did not realise these made such a differnce.
Once we started to look at the layout of websites and how to use different objects such as layers and tables I felt we could have looked a bit more into things. This was just a personal thought as I already knew these objects I felt we could have learnt alittle more about controlling these objects with code. This didn't effect me thought because I learnt these things by myself when people were learning about the layers.
Once i got stuck into making my website I came across alot of problems. At first I wanted to keep it to the same size as the last briefs size but I soon found this was hard as it was so small. I soon over came this by changeing the size and the layout of the page but keeping the same ideas. I felt the main thing with the layout i could have improved was the use of space. I feel that i could have made better use of some of the space. If i had done this again i would have changed how i displayed the album art work next to the album names and also on the home page would have made better use of the offers space. I also tried to encorporate things that I had found in my research and in the lesson tutorials into my site. This meant just picking up on little things that i found made a good website and also about SEO.
Overall I was really happy with my finished product and feel pleases as i have learnt alot of new things such as external css. I am mainly pleased as i feel i have produced a professional looking website that shows my skills. If i had alittle more time and hadn't have add some of the problems i did with the site layout i would have liked to add more SEO objects into the site like meta tags , keywords and H1 tags. There is only a few mainor things I would change but these arnt anything magor that i am worring about.
Monday 4 June 2007
Website testing
As I want as many hits as possible i want my website to be viewable from as many magor web browsers as I can.
Firefox Mac
As you can see the website wroks perfectly fine within firefox on a Mac. This means anybody wanting to view the website using firefox on a Mac will be able to make the most of the website.
Opera Mac
As you can see everything lines up nicely with in Opera. The only problem is the flash objects do not show. As i have never used opera before i am not sure wether this is due to it not having a plug-in installed or some other problem. This doesn't make too much of a difference to the website though, it just means the user will not be able to see the flash but the sitte will still work fine.
Safari Mac
All the features of the website work fine within safari. This means the user will be able to enjoy all the features of the website such as flash, drop menus and everything lines up. The only problem is the the header as the top seams to have a orange tint to it. I can only imagine that this is a problem with the div tag or the table inside it.
When testing this on a different Mac machine I found that it worked fine with no orange tint across the screen.
Here you can see there is no orange tint across the top. This most have just been A problem with the other machine. This means the website also performs perfectly within safari.
FireFox PC
Here you can see the website functions perfectly within Firefox on a PC. This produces no errors or throw stuff out of place.
Internet Explorer PC
As you can see the website works fine within Internet Explorer as well. The only problem is that when a flash object is on a page with Internet Explorer it asks wether you want to install the Active X This cane become annoying for some users, This is not a magor worry for me though.
Summary:
The only realy differnce I have come across in the broswers is between the grey and organge boxes at the bottom some leave a small space and some line them up. This makes no difference to me as both ways look fine. The only problem I came across was the plug-ins with opera, This isn't a big worry to me as very few people use it. Overall i am happy with the way that the website preforms within all browsers and would be happy for people to view the website.
Firefox Mac
As you can see the website wroks perfectly fine within firefox on a Mac. This means anybody wanting to view the website using firefox on a Mac will be able to make the most of the website.
Opera Mac
As you can see everything lines up nicely with in Opera. The only problem is the flash objects do not show. As i have never used opera before i am not sure wether this is due to it not having a plug-in installed or some other problem. This doesn't make too much of a difference to the website though, it just means the user will not be able to see the flash but the sitte will still work fine.
Safari Mac
All the features of the website work fine within safari. This means the user will be able to enjoy all the features of the website such as flash, drop menus and everything lines up. The only problem is the the header as the top seams to have a orange tint to it. I can only imagine that this is a problem with the div tag or the table inside it.
When testing this on a different Mac machine I found that it worked fine with no orange tint across the screen.
Here you can see there is no orange tint across the top. This most have just been A problem with the other machine. This means the website also performs perfectly within safari.
FireFox PC
Here you can see the website functions perfectly within Firefox on a PC. This produces no errors or throw stuff out of place.
Internet Explorer PC
As you can see the website works fine within Internet Explorer as well. The only problem is that when a flash object is on a page with Internet Explorer it asks wether you want to install the Active X This cane become annoying for some users, This is not a magor worry for me though.
Summary:
The only realy differnce I have come across in the broswers is between the grey and organge boxes at the bottom some leave a small space and some line them up. This makes no difference to me as both ways look fine. The only problem I came across was the plug-ins with opera, This isn't a big worry to me as very few people use it. Overall i am happy with the way that the website preforms within all browsers and would be happy for people to view the website.
Sunday 3 June 2007
Making the website
To make my website I used a mixture of techniques to get a finish I was happy with.
To start with I had to make some changes to my design as the brief before for designing the layout had a set size of 720 x 480 that we had to design to. As this brief had no size limits i changed the sizes of things to make it more usable. I did this as i thought the old limits were a bit small and was hard to make everything fit nicely.
For a start I made my header stretch across the width of the page by tileing it on it X axis. I did this so hat no matter what screen resolution you are using it will stretch across your screen.
To make the links across the top always be the correct size for the screen resolution I put them inside a table. Then by making this tables width a percentage it will always adjust to the users screen.
The logo, white content area and the 2 small areas at the bottom of the pages are layers or also known as div tags. I have controlled all these using an external css page ( cascading style sheet ) this stops the layers from shifting around on the page and also allows me to make them sit center.
This external css also allows me to control what style text is the default, the font colour and the background colour and a lot more features on the website.
I then used this piece of coding to connect the style sheet to the html page:
This is placed on the html page between the "head" tags.
Everything with in my content area is held in place by using tables. This makes it easy to hold everything in the correct place because you can add row and columns and also can adjust the widths and heights easily.
This shows the areas of the table for the index page. this shows how i have used the table with row and columns to make everything sit in the correct places.
These form objects i simply made by using the built in form objects with in dreamweaver. These were found within the forms tab at the top of the window and i used forms such as text field and a list/menu. Once you have these in you page you can simply add the different names or lists to them. To add the list into the drop down list/menu I simply click on it and went list values.
This shows the pop up box where you add your list items.
Here you can see my search page. For the artist search i have created roll over images as the buttons to search. I created this by click on my link image and then opening the behaviors within flash and chose swap image. Then I chose the second image i wanted the image to change to when rolled over. This will gave me a roll over link effect.
When making the website I made sure I sure that i added alt tags to all my images so that these can be picked up by screen readers and help more people access my website.
To start with I had to make some changes to my design as the brief before for designing the layout had a set size of 720 x 480 that we had to design to. As this brief had no size limits i changed the sizes of things to make it more usable. I did this as i thought the old limits were a bit small and was hard to make everything fit nicely.
For a start I made my header stretch across the width of the page by tileing it on it X axis. I did this so hat no matter what screen resolution you are using it will stretch across your screen.
To make the links across the top always be the correct size for the screen resolution I put them inside a table. Then by making this tables width a percentage it will always adjust to the users screen.
The logo, white content area and the 2 small areas at the bottom of the pages are layers or also known as div tags. I have controlled all these using an external css page ( cascading style sheet ) this stops the layers from shifting around on the page and also allows me to make them sit center.
This external css also allows me to control what style text is the default, the font colour and the background colour and a lot more features on the website.
I then used this piece of coding to connect the style sheet to the html page:
This is placed on the html page between the "head" tags.
Everything with in my content area is held in place by using tables. This makes it easy to hold everything in the correct place because you can add row and columns and also can adjust the widths and heights easily.
This shows the areas of the table for the index page. this shows how i have used the table with row and columns to make everything sit in the correct places.
These form objects i simply made by using the built in form objects with in dreamweaver. These were found within the forms tab at the top of the window and i used forms such as text field and a list/menu. Once you have these in you page you can simply add the different names or lists to them. To add the list into the drop down list/menu I simply click on it and went list values.
This shows the pop up box where you add your list items.
Here you can see my search page. For the artist search i have created roll over images as the buttons to search. I created this by click on my link image and then opening the behaviors within flash and chose swap image. Then I chose the second image i wanted the image to change to when rolled over. This will gave me a roll over link effect.
When making the website I made sure I sure that i added alt tags to all my images so that these can be picked up by screen readers and help more people access my website.
Friday 1 June 2007
Bad Myspace
http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=6221
This is the myspace of the original owner of myspace
I think that alot of myspace's are bad and this shows why they are bad. The reason i think they are mostly bad is because they all have this same generic layout structure. This makes most myspace profiles look bad and all very simulair.
As shown in my other post about good myspace coding the only real way to over come this horrible generic layout is to use div overlays.
With the generic myspace layout you generally get a picture in the top left and then the about me section on the right with all the friends and comments below. Even when people use code to change the colours of their pages they still end up almost the same layout just with different colours and backgrounds.
This is the myspace of the original owner of myspace
I think that alot of myspace's are bad and this shows why they are bad. The reason i think they are mostly bad is because they all have this same generic layout structure. This makes most myspace profiles look bad and all very simulair.
As shown in my other post about good myspace coding the only real way to over come this horrible generic layout is to use div overlays.
With the generic myspace layout you generally get a picture in the top left and then the about me section on the right with all the friends and comments below. Even when people use code to change the colours of their pages they still end up almost the same layout just with different colours and backgrounds.
Subscribe to:
Posts (Atom)