Creating a CSS document
Go to file > New > Blank Page > CSS > Create
Customising in CSS
To determine something such as a font family, type 'body' then '{'. Hit return, and then type 'f'. This should bring up the options for all the CSS styles you can use. In this case, font family.
I chose Verdana, and hit return.
To end the style, ';' is used. A '}' is then used to close the bodystyle.
The stylesheet needs to be saved in the same folder as the rest of the website.
We now need to link the stylesheet to the main page.
This little chain link button attaches style sheets to the main page.
A window will appear called 'Attach External Style Sheet'. Click 'browse' and find your style sheet. It needs to be stored in the same folder as the rest of the website, in this case 'root'.
Fixed pixel sizes
To determine the look of the screen itself, or the 'container' we need to code it in CSS. It starts just after the previous input after the font, hit return a couple of times, write hashtag'nameofscreen' in this case container, then space and '{'. Hit return and type 'width' then ';' and type the widthPX; Hit return then type 'height' then ';' This will determine the size of the background.
To ensure you've programmed it correctly you can choose the background colour by typing 'background-color' with ':' which will bring up a colour picker box. Hit return and close it with ';'. Hit return and then '}'
Then, to link this with the main page, within the body which is the content for the website, you need to write <div id="container"> to open this style onto the body. This needs to be closed otherwise this is applied to everything below it. To close it you need to type </div> . The forward slash closes it.
To get rid of the white border, which we can do in CSS, we need to determine the position of the page. So I type 'position' which comes up with the drop down box. For this position, you have to select 'fixed'. If it was relative we can't edit the border.
Then type 'top', then write '0;'
And do the same with left, since everything is determined from these two edges.
This gets rid of the border.
Centralising the page
Making the left edge at 50% makes the edge jump to the centre of the page.
However we want both sides to central the page.
To do this, we leave the left edge at 50% but give the margin-left edge half of the pixel-worth of the width of the screen. This will guarantee the page to be centred.
Voila.
To create a horizontal toolbar
We're going to add a toolbar across the top, and so we type #top , underneath write the width and height which is the same as the size of the page. We determine the background colour of the toolbar in the same process as before. We do the position as relative, as it's relative to the current background. We do float as left.
We then add the 'div id' for the 'top' hashtag to activate it from the CSS document. We have to immediately close it when finished writing it. Indenting and 'tab' ing div id's makes it easier to recognise differentiate between the different div id's.
Hit save and refresh on the browser to view the website so far.
Using images on your site
We are going to create a logo using adobe illustrator.
saving as a jpeg is good for featuring photographs but doesn't support transparency. PNG supports transparency.
On CSS, type #logo and type in the width and height of the logo. We know we want it to be the same height as the toolbar. When typing in the background image, it asks us to browse.
This is when we locate the logo.
Then we close the CSS.
We then add another div id, so I indent it again so its easier to read. We put it within the 'top' div id, because that's the location of the logo.
We then save and refresh the page, and it's there!
Creating a rollover button
On Adobe illustrator, we create another web file. We size it to the size that we want our button to be. Because it's a rollover button we copy the design layer and change it accordingly. Layer 1 will be the first view, and layer 1 copy will be the second view of the button. Save them separately naming them appropriately. (they can be separate by hiding each layer in turn)
Then, in CSS we create the code for the button by starting with #button, and then type in all the necessary coding.
We add another div id, again indenting to set it differently from the other div id's.
Then, in between the div id for 'button' we go to insert ...
image objects > rollover image. We do this so that dreamweaver will code it for us, as it's quite complicated!
The 'insert rollover image dialogue box should appear. you browse for the original and interchangable image in turn.
...selecting the second image.
In the 'alternate text' we type in a description of the button, to assist with partially sighted / blind web users.
Hit OK and Dreamweaver creates the Javascript for us!
We then save and hit refresh in the preview browser:
As I hover over my 'home' button, it changes colour!
No comments:
Post a Comment