CSS ile web sayfası oluşturma
Özet :
Bu makalemizde Css (Cascading Style Sheets) ile tablo kullanmadan web sayfası hazırlamayı inceleyeceğiz.
Makalemizde Css ile tablo kullanmadan web sayfası oluşturmayı inceleyeceğiz.
Bildiğimiz gibi web teknolojilerinin gelişimi ile paralel olarak karmaşık web sitelerinin ortaya çıkması, tasarımların daha hayata geçmeden
değişmesi, tablolu html yapısını içinden çıkılamaz hale, Css'i ise kahramanımız haline gelmiştir.
O zaman bir örnekle kahramanımızı tanımaya başlayalım.
İlk olarak Visual Studio 2005 programımızda File -> New -> WebSite diyerek yeni bir proje oluşturuyoruz.
Sonrasında projemizi sağ tıklayarak Add New Item diyoruz ve bir StyleSheet belgesi seçtikten sonra add buttonuna basıyoruz.
Artık boş css belgemiz hazır.Şimdi yapmamız gereken aşağıda açıklamalı olarak yazdığımız css kodlarını belgemize aktarmak.
/*gövdemizin font,renk ve hizalamalarını yapıyoruz*/
BODY
{
background:
#202328;
font:
75%/160% Verdana,
Arial, sans-serif;
color:
#ffffff;
text-align:
center;
}
/*linklerimize ait csslerimizi yazıyoruz.*/
/*Linkimizin rengi*/
A
{
color:
#b0dfff;
}
/*linkimizin ziyaret edildikten sonraki rengi*/
A:visited
{
color:
#b0dfff;
}
/*linkimizin üzerine geldiğimizde aldığı renk*/
A:hover
{
color:
#ffffff;
}
/*elemanımızın tuş girdilerini algılamaya başladığı andaki rengi*/
A:focus
{
color:
#33ff33;
}
/*fare düğmesine kullanıcının basması ile bırakması arasında geçen sürede linkin
aldığı renk*/
A:active
{
color:
#b0dfff;
}
/*büyük başlığımızın rengi ve fontu*/
H1
{
color:
#ff00ff;
font-family:
Arial, sans-serif;
}
/*küçük başlığımızın rengi ve fontu*/
H2
{
color:
#b0dfff;
font-family:
Arial, sans-serif;
}
/*html kısımında ana adlı div içinde kalan kodların kullanacağı style'ları yazıyoruz*/
/*padding yazıların border'dan ne kadar mesafe uzaklıkta başlayacağını belirtir.*/
/*text-align yazıların hangi yöne dayalı olacağını belirtir.*/
#ana
{
padding-right:
10px;
padding-left:
10px;
padding-bottom:
10px;
padding-top:
10px;
text-align:
left;
}
/*margin sayfanın verilen yöne olan uzaklığını belirtir*/
/*display: block kullandığımız nesnelerin alt alta sıralanmasını sağlar.*/
/*overflow: hidden kutu dışına taşan yazıları gizler.ScrollBar çıkmasını engeller.*/
/*position: relative göreceli konum öğesidir.Öğenin soluna 20px boşluk ekler*/
H1
{
margin-top:
0px;
display:
block;
font-size:
180%;
overflow:
hidden;
width:
172px;
position:
relative;
height:
36px;
}
/*html kısımında icerik adlı div içinde kalan kodların kullanacağı style'ları yazıyoruz*/
/*margin borderın dışındaki bir nesnemizdir.Margine vereceğimiz değerler ile borderımızın*/
/*olduğu kısmı sayfa kenarlarından istediğimiz kadar uzaklaştırabiliriz.*/
/*margin: 20px 100px 20px 200px değerler
sırası ile üst-sağ-alt-sol kenarlardan olan uzaklıkları belirtir.*/
#icerik
{
margin:
20px 100px 20px 200px;
}
/*html kısımında alt adlı div içinde kalan kodların kullanacağı style'ları yazıyoruz*/
/*alt adlı div içinde kalan nesnelerimizin font ve genişliğini ayarlıyoruz*/
#alt
{
font-size:
85%;
width:
175px;
}
Css belgemizi kaydettikten sonra yapmamız gereken, kaynak olarak göstermek için
css belgemizi default.htm sayfamıza sürükleyip bırakmaktır.
Css belgemiz ile ilgili işlemlerimiz bitti.Şimdi sırada default.htm sayfamızın source
kısmına yazacağımız html kodları var.
Sayfamızın source kısmını açtıktan sonra, aşağıdaki şekilde body tagları arasına
kodumuzu yazıyoruz.
/*bu ksımda
yaptığımız işlemler sadece css belgemizde verdiğimiz style' ları kullanmak.*/
<body id="sayfa">
/*bir adet div oluşturuyoruz ve ID 'sini ana olarak veriyoruz.Böylece
bu div içinde kalan nesneler
css belgemizde yazdığımız #ana altındaki style' ları
alıyor*/
<div id="ana">
<div id="logo">
/*Css belgemizde büyük
başlık için oluşturduğumuz H1 style' larını alıyoruz*/
<h1
style="width: 383px; height: 21px">Css
ile web sayfası oluşturma</h1>
</div>
<div id="icerik">
<h2>
Tablosuz sayfalarla artık tasarım çok kolay</h2>
<p>
Malzeme Listesi :</p>
<p>
1 adet Notepad<br
/>
1 adet Css belgesi</p>
<p>
Tek yapmanız gereken makalemizi okumak.</p>
<a target="_blank" href="http://www.yazgelistir.com/">www.yazgelistir.com</a><br>
<a target="_blank" href="http://www.yazgelistir.com/">www.yazgelistir.com</a><br>
<a target="_blank" href="http://www.yazgelistir.com/">www.yazgelistir.com</a><br>
<a target="_blank" href="http://www.yazgelistir.com/">www.yazgelistir.com</a>
<p>
Herhangi bir sorununuz olursa ben buradayım. <a
href="mailto:erenarsu@yahoo.com">e-mail</a></p>
</div>
<div id="alt" style="width:
440px; height: 10px;">
Tüm hakları yazılım aşıklarına aittir.
</div>
</div>
</body>
Kodlarımızı yazdıktan sonra tek yapmamız gereken projemizi kaydedip, çalıştırmak.
Sayfamızın görüntüsü aşağıdaki gibi olmalıdır.
Ekte projemizi de gönderiyorum.İsterseniz oradanda inceleyebilirsiniz.
Herhangi bir sorununuz olursa erenarsu@yahoo.com adresinden bana ulaşabilirsiniz.
İyi Çalışmalar...
Yazgelistir.com