Web Design Session 2

The Session;
1024 x 768 will work on 94% of devices currently in use to get onto the internet.

Try and limit yourself to only working with two fonts, one for the headings and the navigation buttons, then one for body copy.

We are now going to create the website template on dreamweaver.
First we are going to create the outside box. The naming conventions for this is the container or wrapper. To do this we are going to create the container in the style sheet.

Anything with the /* */ means that it can just be a personal note to yourself, it doesn't effect the website, although can be seen if you look through the coding for the website.

It is better to have different variables on different lines.

Putting a semi colon on the end of the height or width will close the variable, then just add a } to close the bracket.

opening the div id on the source code, this is in the body so that it can be seen. then to close the div id, you do the same just before the body is closed.

As you cant see if it has worked as it is just a container, you can add a background colour on the spreadsheet, and choose any colour.

Choosing pink as my colour meant that after I have saved it went onto my site to see it live, and it showed me the pink site with my works on it.
If we worked with fixed positioning it would eliminate the white boarder around the outside, you can you can also work with relative positioning, this is so that it can just floats, and cant go over the top, the third way is absolute, which is a lot like fixed.

Making the coloured screen get rid of the lining you can go on position, change the top and left to 0 this is so that it has no board.

Although if you want to positioning to be in the center of the web page you can change the 'left' to 50, this makes the left edge central not the whole thing central.

It is better to do it this way rather that just changing the left into 25% as it won't be consistent on all screen or if you change the size of the screens, this is a better way to do it by creating a margin to the left.

Next we are creating the navigation bar.

First on the spreadsheet you need to div the same sort of thing as before, #nav, the do the height and width, add a background colour so that you can see it on the website, then position it, this time using  a float.

Then go to source code and after container add the div, nav, then close the div, this will make the colour available to see on the website.

After saving the Dreamweaver document and opening it on chrome I can see what effect this gives, it worked, although I don't think that the colours look great.

We are now creating the buttons, working with CSS means that we can just creat one for all four, although if we work with HTML we would have to create all four.

Going on illustrator to create a logo, to do this I need to change the profile to web, then change the pixels to 200 x 200 pixels, as this is the size I want it on my website. Also when you are saving an image, go on save for web, then change the Name that you are saving it to PNG-24 this means that it will save with a good clarity, also make sure transparency so that the background colour isn't in it.

To then get the logo onto the spreadsheet and do the same kind of things to it again, apart from this time go onto background then image, and you will be able to find the logo we just saved from illustrator.

Then go to the source code and add the logo as the next div, then save it again, and view it on chrome.

After viewing my page, I found that my logo was there, although the colours are horrible and don't work together at all, it worked, that's all that matters.

Don't reply on dreamweaver to preview your website as it cuts off a lot of it and doesn't look the same as it does live, therefore always check on the internet on something like safari or chrome.

To put tabs into your source code you just use the tab button, you do this to see where you have opened and closed certain divs, this makes it clearer and easier for you to understand.

To do the button we just have to specify the area, and we will add the image into it after, this is because it is a rollover and we need to add it as a HTML not CSS.

To add the Image into the source code as a HTML you have to go to insert then image objects then rollover image, then it comes into this box below.

Then fill in all of the different fields.

Applying them and saving them allowed me to view the website, and this is what happened, the top image is before I hovered over the home button, and the bottom image is after I have hovered over the home button.