Het .psd bestand is niet van belang, dit gebruik je enkel en alleen als voorbeeld. Je opent een nieuw HTMl document en gaat aan de slag. Ik zal je the beginning geven:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
Dit is een standaard HTML document. In dit geval maak ik boven de body en onder de Head een CSS aan. (Normaal doe je dit in een extern document)
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
[B]<style type="text/css">
</style>[/B]
<body>
</body>
</html>
Hierin geef je al je objecten een stijl. De achtergrond, het witte vlak, etc.
Je ziet ik heb hier 2 onderdelen een stijl of "class" gegeven. De BODY, dat is je achtergrond en "content" Dat is je witte blok waar straks alle content in gaat. Alle classes worden met een "." ervoor gebruikt behalve de body class.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
[B]<style type="text/css">
body {
background-color:#333;
}
.content {
width:500px;
height:800px;
display:block;
background-color:#FFF;
margin: 0 auto;
</style>
[/B]
<body>
</body>
</html>
Een kleine uitleg:
width:500px; < -- spreekt voor zich
height:800px; < -- spreekt voor zich
display:block; < -- spreekt voor zich
background-color:#FFF; < -- spreekt voor zich
margin: 0 auto; < -- Lijnt alle content in het midden uit.
Je hebt nu je CSS. De stijl staat dus klaar. Maar het moet nog toegepast worden in je BODY.
Hiervoor schrijf je tussen je BODY tags:
Code:
<div class="content"> </div>
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
body {
background-color:#333;
}
.content {
width:500px;
height:800px;
display:block;
background-color:#FFF;
margin: 0 auto;
</style>
<body>
[B]<div class="content"> </div>
[/B]</body>
</html>
Als het goed is moet het er dan zo uitzien. Je hebt nu een donkere grijze achtergrond en een witvlak in het midden. De rest voeg je toe door nieuwe .classes aan te maken. Succes
Klik om te vergroten...
