How to add a background image

*padding* can be used to change image co-ordinates

Evaluation

Here is the layout for my 1st website (no links yet). I however want to completely re-do this reguarding a new set of skills I have picked up and using the 960 template on photoshop along with better container divs etc.

This site is a prerunner to the concept idea I had of making every menu and title image to look drawn and fairly basic in a 'doodle' style. I took inspiration from the aardman website
( http://www.aardman.com/ ) and linked this with the fact that I doodle a lot. However I feel like I started this design falsely and with not many skills as I have been concentrating on other units. I now through trial, error and research know more about the software such as padding and acurately sized images. Plus I have a greater understanding of a good page layout, I want to make the categories less handwritten and more like doodles. I plan to work on a new interactive page in the next week. I'd like to add that I have a full time job...

However I do like the simplicity of this page with focus on the image.

Here is a much better design I am happy with...

Change of Name

I have decided to call my web title 'Blowke'. This is because I always name the strange drawings I do by adding 'bloke' on the end of them, for example 'alien bloke' or 'scary bloke with a bike bloke' and have become known from my facebook album built up of these characters.

Website mock-up

This is a very rough mock up of my website, this will pobably change.
I want to produce a rough drawn style for the title and sections as it bounces off the fat that I doodle a lot.

Programme notes

Stard IDs in Css with '#' (alt 3)
{start }end

eg.
#container{
width:940;
margin:auto;
border:1px solid #000:
}

(this centres the container and applies a 1 pixel border)


When applying a margin, values occur as a compas in order of North East South West (0 1 2 3)

Links colour:
A link= Default state
A active= Selected

Web Issues

Aesthetics

Access Speed

Content is King

Web Standards

Websafe colours

Image formats

Font Families

Fluid vs Fixed

Layout eg HTML divs, tables, layers, CSS positioning

Advantages of HTML5 over older HTML versions

Readability

Usability

Consistency

Navigation

accessibility eg colours, navigation, target audience, fonts

Cross browser compliance

Pretty good websites

Ebay is one of the most popular websites in modern day, it is an online marketplace where you can buy or sell used or new items over the internet. The navigation of the site is clear and easy by the incorporation of sidebar menus and key points of user interest like the 'users also bought' boxes, this box records your site usage by monitoring items you look at and then suggest similar items. The link to the eBay home screen is always at the top left so this keeps the consistency of the site and makes for easy usability. Sections are split into appropriate genres so users can find what they are searching for easily.

Crap Websites

This website is disgusting, poorly designed and in some cases unreadable. The confusing multitude of colours is unattractive to users and does not keep up with a consistent design, this makes the content hard to access and off-putting. Also the amount of information spread out on one page is confusing and just looks disgusting, no colours compliment each other and presentation is very amateur.

This dull colour scheme is an eyesore, it looks like virtual sick. The aesthetics are not successful here, the site does not look slick or attractive in any way. The design seems to just place the different boxes wherever they will fit and has no thought toward used access.

This is an example from a web designer of what a bad website looks like. It epitomises the mistakes unexperienced web designer. The uncomplimentary colour scheme, multiple text sizes and text colours all go against the usability. 

This website failed to load properly and pictures failed, apart from a few rubbish clipart animations I have no idea what this website is all about. This could be down to web standards or image format, this does not enforce any element of professionalism or persuade anyone to take anything this site has to say seriously. There is not much more I can say about this as it is a complete fail...

Terminology

'Web site'- Place on the web where you can get information

'Web Application'-  Coded and created  on the web for interaction-process

'Uniform Resource Locator'- Web link, Hypertext Transfer Protocol

'Content'- Stuff on the website

'Layout'- The way the website is constructed

'Structure'- Elements of the layout such as header, footer, sidebar, menu

'Cookies'- Small files used to store info about a session in your browser

'Servers'- The physical location of websites

'Remote'- Machines containing websites external to your location

'Local'- Your own connection using a browser to the web

'File sharing'- p2p system of sharing files between local machines

'Ecommerce'- Making money . The buisness of buying and selling on the internet, the virtual economy

'VOIP'- Voice over internet protocol

'HTML'- Hypertext markup language

'XHTML'- E(Xtensible) Hypertext Markup Language

'DHTML'- Read Canvas

'Javascript'- Programming Language called a scripting language used for behaviour (interactivity in web pages)

'Perl'- Used often for processing forms

'PHP'- PHP hypertext processor

'ASP'- Microsoft version of PHP- called active server pages

'Java'- Programming language used to make applications, web applications and games

'Client side scripting'- Runs from the browser

'Server side scripting'- rus from server

'Cascading Style Sheets'- Language to alter style of websites

'FLV'- Flash video format

Canvas - Interactive Element which behaves like flash within an HTML5 document

Initial research

This is Weeblstuff.com, its humour and style is something I aspire to match, and is already very similar to my own projects. The top bar is divided into sections then subsections whithin these sections, simple yet effective. This site consists of many short flash animations and films...and they are all pretty loveable. This site of slight self mockery and randomness is quite in tune with my personality, and my own site should embody my personality more so.

This site is structured using a basic sidebar that affects the main box of content. This is easy and user friendly. This is an example of a digital exhibition like what I will be producing for my own work. This structure is interesting in its simplicity, making my own structure simple appeals to me so that users will not be challenged to access everything I want to show them.

Yeah it's Assassins creed, only the best game series in the world... This site involves many video previews and is essncially one huge interactive slideshow, you can choose from different games in the series and different slides/videos, this would work well with different projects of mine in my portfolio.

A website for Noah and the whale, one of my favourite bands. I was drawn to this website because of its simplicity in colour scheme and layout, this simplicity is effective and gives a modern-retro feel, sometimes less is more, It also draws attention to the bold title. It seems to say 'this is who we are, this is what we do' and lacks commercial bullshit which is often off-putting, this shows more soul.

Aardamn is one of my favourite things in the world full stop. The very british humour and the work and care behind each project is inspiring. This website incorporates a moving homepage, the pencil drawings move from right to left across the virtual page, I was drawn to this because of all of the mindless doodles I do, these doodles are a large element in all of my work and I would like to use them as a theme for my portfolio. I definitely want to incorporate a canvas like this one, probably involving my strange drawings moving in some way.

This is a website for an art designer (Ayse Designz), all of these artwork show a great deal of skill and style. This website is layed out like a digital gallery, I like this because after all the website I will be designing will be to exhibit my own work, however i would like to do something slightly more inteesting with the movement around the site. Having said that, when you click on a key image it enlarges and other artworks move to fit around it, which acts as a sort of zoom of inteest.