 |
| Tasarımın temel görünümü |
index.html kodları:
<!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>Başlıksız Belge</title>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>
<body>
<div id="kapsayici">
<div id="ust"><span class="stil1">LOGO</span></div>
<div id="menu">
<ul>
<li><a href="Anasayfa.html" target="iframe">Anasayfa </a></li>
<li><a href="hakkimizda.html" target="iframe">Hakkımızda </a></li>
<li><a href="iletisim.html" target="iframe">İletişim </a></li>
<li><a href="galeri.html" target="iframe">Galeri</a></li>
</ul>
</div>
<center>
<iframe name="iframe" width="875" height="300"></iframe>
</center>
<div id="alt"><span class="stil2">Tüm hakları saklıdır. © 2012 <a href="A">denem.com</a></div>
</div>
</body>
</html>
stil.css kodları:
@charset "utf-8";
/* CSS Document */
{width:900px;
height:800px;
border:2px solid #000000;
margin-left:auto;
margin-right:auto;
}
#ust
{height:300px;
background-color:#999999;
border:2px solid #000000;
margin:10px;
}
#menu
{height:50px;
background-color:#CCCCCC;
margin:10px;
margin-top:30px;
border:2px solid #000000;
}
#alt
{height:50px;
background-color:#CCCCCC;
margin:10px;
border:2px solid #000000;
}
.stil1
{font-size:120px;
color:#000000;
padding:270px;
line-height:250px;
}
.stil2{
font-size:36px;
color:#000000;
line-height:50px;
}
ul
{list-style-type:none;
margin:0px;
padding:0px;
}
ul li
{float:left;
position:relative;
}
ul li a
{display:block;
background-color:#CCCCCC;
width:100px;
height:30px;
margin:10px
;border:1px dotted #000000;
line-height:30px;
text-decoration:none;
}
ul li:hover a
{background-color:#FFFFFF;
color:#FF0000;
}
 |
| Linkler için diğer sayfaları da oluşturmalıyız. |
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Başlıksız Belge</title>
<style type="text/css">
<!--
.stil1 {color: #0066FF;
font-size:36px;}
-->
</style>
</head>
<body>
<span class="stil1">Anasayfa</span>
</body>
galeri.html kodları:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Başlıksız Belge</title>
<style type="text/css">
<!--
.stil1 {color: #0066FF;
font-size:36px;}
-->
</style>
</head>
<body>
<span class="stil1">Galeri</span>
</body>
hakkimizda.html kodları:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Başlıksız Belge</title>
<style type="text/css">
<!--
.stil1 {color: #0066FF;
font-size:36px;}
-->
</style>
</head>
<body>
<span class="stil1">Hakkımızda</span>
</body>
iletisim.html kodları:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Başlıksız Belge</title>
<style type="text/css">
<!--
.stil1 {color: #0066FF;
font-size:36px;}
-->
</style>
</head>
<body>
<span class="stil1">İletişim</span>
</body>
0 yorum :
Yorum Gönder