In the first part of this tutorial I will show you a very easy way to link a HTML document to a CSS form. In the second part we will build up a webpage like the one below using HTML DIV’s in combination with CSS.
As I mentioned before the very first thing you have to do is to have your site definition. (see here how to). Once your site is properly defined we can move forwards and start with the HTML document.
1. Creating a HTML document.
Go to FILE (CTRL+N) and click New Document, from the pop up window select BLANK PAGE, page type: HTML, layout: NONE and then hit CREATE.
2. Save the file as index.html.
3. Once we have created the HTML document we need to create the CSS file.
Go to FIle [1] and hit create new document, [blank page] and select CSS form the page type menu. Hit create.
4. Save your CSS file. I called it master.css. Please remember that a single HTML file can be linked to several CSS files, so having appropriated names for your files will become very handy in future.
Go to File [1] and hit save as [2], in the pop up window make sure you are inside the right folder [3]. type master in the name field [4] and from the drop down selection, select Style Sheet (*.css) then hit save [6]. that is it.
5. By now you should have two documents open in Dreamweaver. index.html and master.css. Also in you file tab on the right hand side these two documents should appear inside your root folder.
6. Now we have to link the HTML file to the CSS master file we just created.
To do so go back to the HTML file [1]. on the left hand side you will have a tab that reads CSS, click on the little arrow to expand it [2].
At the bottom of this tab you will find a little chain-like link, [3] click on it.
Browse in your folder to find the CSS for you want to link [4]. Select master.css from the list.
7. Before you hit OK make sure the button Add as: link is selected. Then hit OK.
8. Now your HTML document will display a <link href> tag in the head, this line of code links the HTML document to the CSS form.
9. Something I should have mentioned at the beginning of this tutorials is that you can change the typeface in the code. This is to avoid simple errors like typing o instead of 0
“ instead of ‘ [ instead of { and of course : instead of ;
So to change the settings, go to edit in Dreamweaver and select preferences. Go down to FONTS and look for Code View (At the bottom on the left hand side). Within the menu select OCR Std as your default font. Also change the size, make it big enough so that you can read your code much easier.
10. Now that your font is set we can continue adding more code.
At the top of the HTML document index.html within the <title> and the </title> tags, type the title of your webpage. I chose my first css. Save your files.
Locate the <body> tag in your document and type <div id=”wrapper”> then close it immediately </did>
Anything you see in a webpage is contained within a box. The structure of a webpage is a complex system of boxes within boxes. That is why it is very important to have a nice and tidy code as much as possible.
These boxes are called DIV.
You can create as many DIVs as you need but the must have different names, as well as we have ID cards, DIVs have ID’s so that correct syntax of a Div is:
<div =id”wrapper”>
</div>
where wrapper is the name you give to the DIV.
REMEMBER TO CLOSE TAGS, THE MOST COMMON PROBLEM I FIND HERE IS PEOPLE CODING AWAY WITHOUT CLOSING TAGS. A REAL MESS.!!
11. Now that we have created our Div in HTML we can move to the CSS file. The first bit of code I want to use is to make the background of the whole page blue. To do that I must style the body of my HTML document. Type this:
body {
background-color:#006699;
}
body is the element we want to style, background-color is the property we want to modify. We can modify several properties using CSS. In the next step we will se how to modify the size of a DIV.
12. Type the following code right below the body background-color in CSS.
#wrapper {
background-color:#ff6666;
margin-left:auto;
margin-right:auto;
width:960px;
height:600px;
}
BY NOW YOUR CSS CODE SHOULD LOOK LIKE THIS”
body {
background-color:#006699;
}
#wrapper {
background-color:#ff6666;
margin-left:auto;
margin-right:auto;
width:960px;
height:600px;
}
This chunk of code will style the div=”wrapper” we created in HTML.
margin-left and margin-right will assure my wrapper will appear in the middle of the browser. As shown below.
Width determines the horizontal size of the div, in the same way Height determines how tall the box is.
By now you should have something like the image before.
A
NOTE ASIDE: IN ORDER TO TEST YOUR WEB PAGE YOU NEED TO GO BACK TO THE
HTML DOCUMENT SAVE IT AND HIT F12, IT WILL OPEN A BROWSER AND DISPLAY
IT.
ALSO REMEMBER TO SAVE YOU R FILES ANY TIME YOU MODIFY THEM. OTHERWISE YOU WILL NOT BE ABLE TO SEE THE CHANGES.
ONCE YOU SAVE THE CHANGES GO BACK TO YOUR BROWSER [FIREFOX. 360, INFERNET EXPLORER AND HIR REFRESH OR F5
13. Go back to the HTML document and type the code shown below. It will create several boxes as follows:
a header, a leftColumn, a mainContent, a rightColumn and a footer.
Save your document and go back to the CSS file.
14. Type the following code for the header. By now you should understand what properties like background-color, width and height affect the Div in HTML.
15. You should have something like this once you save and refresh the browser.
16. In the CSS file add the following code. You can try to style every Div one by one to see how is works.
17. Here is the leftColumn styled.
Now. there are few properties here that I need to explain.
ALWAYS FLOAT YOU COLUMNS AND MAIN CONTENT. By floating CSS tell the Div to rest to either the left or the side of the document. Styling the Columns and the main content usually prevents a lot of future problems.
AS WELL AS FLOAT PUSHES THE COLUMNS TO THE LEFT OR THE RIGHT, CLEAR:BOTH PUSHES THE FOOTER TO FALL RIGHT BELOW THE COLUMNS.
18. Here is the mainContent.
19. Here is rightColumn styled and the footer.
Although HTML and CSS might look difficult at first, it is not at
all, in fact its very easy. Having a good understanding of the very
basic tags and properties will make us able to move into more
complicated CSS in future.
Author: Trapecista
Author: Trapecista
No comments:
Post a Comment