1.Tee uusi kansio omalle asemalle : harjoitus3
2. Kopioi alla oleva pohja pspad-editoriin.
3. Tallenna se index.html nimellä
(huomaa koodi kuvan liittmiseksi ei ole oikeaa koodia, vaan sitä on joudutu soveltamaan, että näkyy koulun koneella.)
___________________________________________________________________
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//FI”>
<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1>
<meta name=”generator” content=”PSPad editor, www.pspad.com“>
<link rel=”stylesheet” type=”text/css” media=”screen” href=”tyyli.css”>
<title></title>
</head>
<body>
<div >
<div>
<div id=”otsikkokuva”>
</div>
<div id=”otsikko”>
<span class=”header_button”><a href=”index.html”>Etusivu</a></span>
<span class=”header_button”><a href=”sivu4.html”>sivu4</a></span>
</div>
<div>
sdfsdf
asdfasdfasd
fasdfasd
fasdf
</div>
<div >
</div>
<div>
</div>
</div>
</div>
</body>
</html>
_____________________________________________________________________
1.Avaa pspadiin uusi tiedosto: (Cascading style sheet)
2. Kopioi alla oleva muotoilutiedosto pspad-editoriin
3.Tallenna se tyyli.css nimellä harjoitus 3 kansioon
_____________________________________________________________________
/* Elementit */
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
margin: 2em;
/* padding: 4em; */
background: #ffffff;
align:center;
}
h1 { text-align:center; }
h2 { text-align:center; }
h3 { text-align:left; margin-left:3em; margin-top:2em;}
a { text-decoration: none; color: #36c; }
a:visited { color: #595858; }
a:hover { color: #3b3a42; }
#otsikkokuva {
/* width: 890px; */
background: url(kuvat/otsikko.jpg) repeat-x #000;
width: 890px;
height: 100px;
padding: 0px;
vertical-align: middle;
text-align: center;
}
#otsikko {
/* width: 890px; */
width: 890px;
height: 24px;
padding: 2px;
background: url(kuvat/header_bar.gif) repeat-x #000;
vertical-align: middle;
text-align: center;
}
#otsikko .header_button {
font-size: 12px;
position: relative;
top: 4px;
left: 0px;
border-right: 1px dotted #666;
padding: 0px 10px 0px 10px;
vertical-align: middle;
}
#otsikko .header_button a { color: #000; }
#otsikko .header_button a:hover { color: #868588; text-decoration: none; }
#otsikko .header_button a:active { color: red; }
#nav { font-size: x-small; width: 120px; }
#info .teaser { font-size: 9pt; line-height: 16pt; }
#info { margin: 2px 2px 2px 2px; }
/* Luokat classes */
.kuvaalue {
margin-top: 3em;
margin-bottom: 3em;
backgroundcolor: #eaeaea;
align: center;
text-align: center;
}
.keskitetty { align: center; text-align: center; }
.sisennetty { margin-left:5em; margin-left:10em; align: center; }
.sivu {
width: 890px;
vertical-align: center;
margin-left: auto; margin-right: auto;
background: #ffffff;
font-size: 10px;
border-style:solid;
border-color:c2c1c3;
border-left-width:1px;
border-top-width:1px;
border-bottom-width:1px;
border-right-width:1px;
}
.tekstikappale {
margin-top: 1em;
margin-bottom: 1em;
padding-left: 5em;
padding-right: 5em;
}
.tyhja { background-color: #EEEEFF; font-size: 10px; font-family: Tahoma; }
.normi { background-color: #DDDDFF; font-size: 10px; font-family: Tahoma; }
_____________________________________________________________________
Tee harjoitus 3 kansion sisälle kuvat kansio.
Tallenna kansioon tekemäsi header.jpg kuva.
_____________________________________________________________________
Tee näppäimistön alle tuleva kuva.
Koko: width: 10 height 27
Tallenna header_bar.gif nimellä kuvat kansioon