Web Workshop Session Two

Web Session Two

So firstly, we had to lay out our 3 scamps we did for the session and walk round and give people feedback, my scamps are below and this is what feedback I got?

•  Would be a good concept to make it interactive.
• Like the line of the roller coaster being the line of the navigation - using the shape as function
• Intial impact could be overbearing

Although, I do understand the feedback I don't think I could really show my ideas down on paper fully due to me wanting motion but simplistic on the homepage.




Website on Dreamweaver

Navigation, needs to be always visible. So you can get to any page at any time. Needs to be in a good location not at the bottom.
Splash Screen
The purpose is to be able to be used by the end user.

1024x768
This will work on 94% of devises that are currently in use for the internet.

Try & limit yourself to the amount of fonts you use, one for the heading and also the buttons, then one for the body copy.

Make sure you size everything up before you start doing your website on dreamweaver.

Wire Frame: 

Only open a html file from the box right section, local file menu. Don't open it up in the file open because other wise you might not get into the correct location.

We are now going to make the website we have decided on in the design page we have set out in the session.

So firstly we create the outline of the website called, wrapper or container.

You have to go onto style sheet then go after the font and press enter twice.

Anything with /**/ means that it can just be a personal note. Although, anything you do write, that is open to the public.

#- alt 3

As soon as you put a curly bracket this drop down menu will come up.

Good to have different variables on different lines so you type width and then colon then put the width with pixel (px) with semi colon to close it.

If you press return then the drop down menu will come back up.
then chose height with the height of the container with semi colon after.
Then enter and curly bracket to close this.

When you are wanting to create something the audience to see you have to put it in the body section.

Then go on to source code and angular bracket open with div which is the name you give to everything and you can have two types we are going to use an id now.

Which then automatically comes up with the container you have made in the container before on the stylesheet.

Now you need to close the div by putting </div>


But now we can't see if that has worked as it doesn't have an outline and is just a plain white box with a plain background.

Press enter and then you can chose background which will then allow you to chose the colour.

Then chose the colour you are wanting, the only choices that are visible are the 256 colours that are web safe colours. So now we know the website is working due to the coloured square.

If we work with fixed position we can say how much we want to be eliminated from the edges.
The most common way with position is relative where you float things. It is called relative because it takes in the consideration all the other elements around it. Also, there is absolute position but we wont be looking at this as much.

So this is how you can position it:






Although now we are going to make it centrally aligned within the window.

So, 50% means that it will move across 50% of the browser window, so the left side of it is 50% across.
You can only work with % when getting something in the centre you have to work with percentage.

So to make this work we have to:

This is because you have to show it how far across it can get by moving it by 50% and then you have to put half the width of what it is into the centre, which then makes it overall in the centre and not the left edge in the centre.



Now we are going to create the navigation bar.

Now we have to go to the source code and tell that this is ready to be shown. By <div> id and this time you should have a choice from your container and nav.

The float means to place it to the left. with the position in the relative.
Then you need to go to the source code and then let it know you want it too be shown. And do as follows:

Now we are going to create the buttons: If we was solely working in HTML we would have to create it 4 times but in CSS you only have to create it once and call it 4 times.

Need to make sure we are creating it for web as you can chose on here and also make sure you are working at the right size.

If you can do a logo without a background colour it will create the file smaller so its better for web using. Also then you need to save for web.

So the file image needs to be png-24. So you get a crisp image. You can't hide the extension when saving it.




Now go to dreamweaver:

Now this time chose background-image then browse for your image you are wanting to place.

Now you need to place in your source code into your nag div due to it been within your nav container.

If you look at design view it is pretty wizzy wig as it cant work with fixed positioning and the whole container is off centre and can't be seen fully as it is out of line. 

A good way to work is to line everything up by pressing tab and then you know which close is for what open.


Now we are going to create a button
We are going to create a rollover:
So for this we have to create a new layer and show some change within them.

Then you have to save for web as for last time, you have to hide the rollover and then save as web and save as png again then show the rollover too and then save for web again and save as png again. In the image file within the root folder.



We cant add the image into the CSS mode we have to add this is in HTML due to it been a rollover.

Now we are going to insert the rollover button on the source code page we have to select between:

Alternate text: the text in the yellow box when hoovering over it with arrow, this is what will read to a blind person by a screen reader.



At the moment we don't have the page to connect the button to. Thats why I have left it blank.