go to new then click on the CSS link, Css documents can only work in code.
Grey text in a Css document is a note to the designer telling you what the document is, the first line just tells you which character set it is - @charset.
To write a note you just have to put a forward slash and then an asterix /* then to close - */
Next we created another couple of lines and started by typing in body the a curly bracket, options then come up and you then press return again to create another line which will then become indented, we pressed f so another list came up, we scrolled down to font family so a list of the fonts would come up.
after selecting a font you have to finish the code with a semi colon ; then on the next line you need to close the brackets with another curly bracket }
we can then close the css document if it is already linked to our root folder and access it directly from our index folder page. we have to link the css document by going to the my style link at the side of the page or by going to window then selecting my style, you then need to click on the chain link button and select the correct document which in this case is the style sheet in the root folder.
we are going to make some content for our site now which we are going to start with the dimensions - 1024 x 768, to do this in dreamweaver we have to type a hash tag in then after that write container then input the dimensions of the page. this is all done in the css document.
This is how the code should look for the dimensions of a page, we have also added a background colour to the page so we can see that its working. later on we can go back to this and change the colour or take it out once we have designed our site.
After this we need to get out of css and go back to our source code, and input the relevant information so the rest of the document can read it.
The code in this case should look like this.
we then go back to to our css coding and we are now going to choose the positioning of our box,
The coding should look like this for a fixed background that is fixed to the edges of the page. At the moment our site is align to the left, we want to align it to the centre which is quite tricky because you cant give a specific measurement because the site will change depending on how you view it. We are first going to move the left side 50%
this halves the page so we dont want that, in order for our container to sit in the centre of the page we have to add another line of code that will counteract the 50% we just put in, this is half the with of our page with a minus in front of it, in the case it will be -512.
We are now going to make a navigation bar the coding for this is just another container at the dimensions you want.
After this we need to go back to the source code page and link the pages together the same way we did for the original container we made
When your saving to the internet you need to use the smallest possible size, this is all down to the speed of opening the web page. I have made a logo on illustrator using the dimensions of 150px by 150px.
We then saved out image as a png. file which is a web safe file, this also enables use to include a clear background to save more space on the page. if saved as a jpeg. then the background would be filled in. You have to save the file in the root folder then in the sub folder 'images' we created last week.
We needed to select the relevant positioning and also the actual image by inputting the above commands.
Once again we had to go back to our source code page and link the two together.
we have now created a rollover button in illustrator by creating two identical layers and altering the appearance of one of the layers, we save that in the same way we saved the logo image then create the code in the css.
This time in css we cant code a rollover so we have to go back to our source code page and start to lay it our in a way that can keep it simple, we started to indent the div code so that the start div lines up with the end div, this just makes it easier to see what is what.
Because we cant code the rollover in css we have to go to the images option at the top of the page and select input image, then go down to rollover image and select the relevant files and also the alternative text.
