OUGD 504 - Web Session 2

This is the second session that we are having working on our websites:

When we want to re-open our websites, we must first tell the computer where to find the root folder. To do this, when Dreamweaver opens it will bring us to this window. This is where we manage our sites, and need to simply double click on the name of our website and relink it.

To relink it, just simply click on the folder icon and navigate your way to the User Work folder, which is where we need to be working from. Once this has been done, you just click save and continue working from where you left off.

This is where we finished last session with our websites. So far, it is very simple and contains only a small piece of text. In order to start designing our website, we need a cascading stylesheet. For this, we need to create a new document and select the page type 'CSS', as seen below:

We know that this is our stylesheet instantly, by the text that is at the top of the document. The grey text doesn't actually do anything other than serve as a note for the designer.

Firstly we are making a generic CSS code. For every CSS tag you make, you can put everything on one line. You can also separate every variable out onto a different line, which is a better way of working.

We start by changing the font family of the text on our website. To do so, we have to enter the correct coding, as shown below:

Once we have selected our font family, we can then save this stylesheet and link it to our index.html so that it will change our website. To do this, we need to save it into our root folder along with everything else.

It will then appear along the side with everything else, like so:

We then have to just attach the stylesheet to the index.html. Once this has been done, any changes made to the stylesheet will directly impact our design.

Now that they have been linked, which can be seen at the top of the document, it will now have changed our font family. When we save and preview our website online, it looks like this:

We are starting at fixed website because responsive coding would be too hard to start with. In order to see if everything is working properly, we are going to give our website a vivid background. To do this, we need to create a container, or a wrapper; this being the naming convention for the box that contains all of the coding. The dimensions of this will be 1024 x 768. We have left a space between the body and the container so that it makes it much easier to edit and visually notice the difference between the two.

Once we have input the size of the box, we then choose a background colour:

This now needs to be linked on our index.html, otherwise it wouldn't change anything. To do so, we need to create a <div id>. Once this has been done, we can then see the coloured box on our website.

This is how our website now looks, after we have inserted the container div id, and saved it:

There is a slight border around the box that, if we were working with just html, would always be there. However, as we are using CSS we can actually edit it. We can change the position of the box, including the distance that it is from each side of the webpage.

This is how it looks when aligned left:

In order to make this box central, we need to adjust the coding. By typing in 'Left:50%' it means that the left hand side of the blue box will always be 50% of the way across the page. However, this wouldn't make the box actually central. To do this, we need to change the left-margin. We take the overall size of the box and half it. When coding this, we then have to write 'margin-left:-512px' which means that now, in conjunction with the 'left:50%', our box will always be central. Like so:

We then wanted to add another bar along the top of the page. This is done in the same way that the blue box was created, only instead of it saying container, it says 'top'. I also changed the colour of this box in order to be able to see if it worked. This is how it looked:

It also had to be linked to the index.html in the same way as the container div id had to be. Once this was done, and saved, it was then visible on the website:

Most websites have some form of a logo on the page also, this being something we were now to look at creating. We opened up Illustrator, creating a web document that was 150 x 150 pixels, the same height as our bar along the top.

Once we had quickly created a logo, we had to save it. In order for it to work we had to select the option 'Save For Web'.

In this menu, we could change a few settings. We could choose whether we wanted to save it as a JPEG or GIF or PNG etc., each having its own advantages and disadvantages. JPEG doesn't support transparent backgrounds, whereas the rest do. We saved our logo as a PNG in the images folder, which is inside the root folder.

We created a new section for our logo to go in, and had to insert the image like shown below:

For the logo, the positioning was 'relative' as it has to be aligned to the rest of our design. We have chosen float left so that the logo should appear at the left hand side of the yellow bar.

This then has to be linked to the index.html page, the exact same as all of the other design aspects.

This is how my website now looks:

In order to make the whole process much easier for myself, especially when it comes to creating a full website, I have indented the open and close tags in order to be able to easily see which open tags relate to which close tags.

Now that we have our logo across the top, we also want to add navigation buttons. In order to do so, we need to go through a similar process to when we added our logo. Initially, we have to create a 'button' div id.

Inside this div id, we need to insert our button. We are creating a rollover image, which means that we have two images and when the mouse hovers over the image, it changes to something else. To do this, we need to click inside the div id and go to 'Insert' and then 'Image Objects' and 'Rollover Image'.

We get to this window, which is where we select our files. The 'original image' is how the button will look normally, and the 'rollover image' is how it will look when our mouse is hovered over it. The alternate text box is optional, but refers to the information that will appear if you leave your cursor over the button. This is especially good for the application 'Screen Reader', as this is the information that shall be read aloud in order to aid the blind.

When you click 'OK', a lot of coding is inserted. This is something that I will look at in more depth during the next session.