We're creating the above folder which will attach to the html to make it how we want it to look, sort of like a template, this is then applied to each page's HTML. This allows us to create much more interesting websites.
You can write notes to yourself in CSS, to give your self indicates to what part of the code is about, say it's related to the navigation bar. This is done by /* ...*/ Anything written within here wont effect the code.
The most simply code for CSS is generic code. To start off editing the text in the previous session we type in body { and a menu comes up, to edit the font we're picking the font-family to edit this from a list of genric typefaces.
We then close this, but we could carry it on. To close it we type at the end of the font-family code line a semi colon (;) and then on the line below close it with a curly bracket
}
To link the style-sheet to the html page, click the link symbol and select the file from the browse and it should apply it's self to the html straight off.
In this session we're gonna be working at the following container/wrapper (the two standardised names):
1024 x 768.
#container {
We need to create our own identifier for this using the #, using the px measurements we write that in as width and height and I added in colour too.
This isn't automatically included in the html sheet because it's a unique Id so we need to add this into the html by typing in:
then to close this off we type </div>
Because it leaves a 10 px line around the top and left we need to close this off by setting it's position in CSS because this isn't possible to do in HTML.
We voted to make the box centralised so to do this we need to make the left 50% so it's 50% to the left, and then make the margin-left:512px; so that it goes back 512 pixels to make it centralised.
Doing the same as like how we did the wrapper before, we now created a nav-bar to float above the green wrapper from before.
In Illustator, when creating a web page select Web, then 100x100px becuase this is the size i want my
Then again make a seperate id for the Logo and to include it this time select background-image and select the file type.
Tabbed to the right I can then include the Div ID into the HTML code to now include it on top of the nav bar.
Now my logo i quickly created appears up in the top left.
In Illustrator I created a home button quickly,
No comments:
Post a Comment