İnternet Programlama-I

İnternet Programlama-I
HTML - CSS

CSS ile Site Dolaşım Menüsü Oluşturmak
Yatay menüler, dünyadaki ilk Web siteleri var olduğundan beri kullanılan en işlevsel ve ziyaretçilerin en sık kullandığı fiziksel alanlardır. Neticede yatay menüler tüm sitenin ana başlık ve içeriklerine erişim olanağı sağlayan kilit noktalardan biridir. Dolayısıyla bu, site navigasyonu ne kadar problemliyse ziyaretçi o kadar sıkıntı çekecek, ne kadar başarılı ve estetikse ziyaretçi o kadar eğlenerek gezecek demektir.

<html> <head> <title>KIRKLARELİ ÜNİVERSİTESİ</title> <style type="text/css"> /* az sonra buraya css kodlarımızı gireceğiz */ </style> </head> <body> <ul> <li><a href=" MYO</a></li> <li><a href=" MYO</a></li> <li><a href=" MYO</a></li> <li><a href=" Hizmetleri MYO</a></li> <li><a href=" Bilimler MYO</a></li> </ul> </body>

ul { margin:0; padding:0; } li { float:left;

Tüm linkler böylece yan yana gelmiş oldu. Öte yandan fark ediyoruz ki, liste öğelerinin imleçleri halen oradalar. Liste öğelerinin imleçlerini kapatıyoruz: li { float:left; list-style-type:none; }

Şimdi yapmamız gereken öncelikle link elementlerinin (a) tıklama alanlarını display:block özelliğiyle link alanı kadar kapsamak, ve elementlere biraz iç boşluk (padding) vererek hem okunabilir alanı ferahlandırmak, hem de bunu yaparak aynı zamanda linkler arası boşluk oluşturmaktır. Link elementlerine kutu seviyesi özelliği kazandırıp 5 piksellik iç boşluk uyguluyoruz: a { display:block; padding:5px; }

Şimdi yapmamız gereken öncelikle link elementlerinin (a) tıklama alanlarını display:block özelliğiyle link alanı kadar kapsamak, ve elementlere biraz iç boşluk (padding) vererek hem okunabilir alanı ferahlandırmak, hem de bunu yaparak aynı zamanda linkler arası boşluk oluşturmaktır. Link elementlerine kutu seviyesi özelliği kazandırıp 5 piksellik iç boşluk uyguluyoruz: a { display:block; padding:5px; font:9.5pt Georgia; color:#000099; /*lacivert */ text-decoration:none; }

a:hover { color:#CC6600; border-bottom:3px solid #CC6600; }

CSS ile Form Öğelerini Stillendirmek
Eskiden bu yana, tasarladığımız Web sitelerinde teknik yetersizlik nedeniyle sınırlı seviyede görselleştirmeler yaparak hayata geçirdiğimiz öğeler arasında kuşkusuz ki interaktif formlar devamlı başı çekmiştir. Bunun sebebi, tarayıcıların form etiketinin altında bulunan form öğelerinin (text kutusu, radyo butonları, liste, menüler vb.) işletim sistemi standardında görüntülenmeleri ve o vakitler CSS ile tasarım geliştirmek sınırlar dahilinde olduğu için birçok kısıtlamaya sahip olmamızdı.

Bilindiği gibi, formlar kendilerini kapsayan ve interaktif veri transferi işleminde köprü görevi üstlenen kutu seviyesi <form> etiketiyle kapsanırlar. Bu etiketlerin içine giren öğelerin doğrudan stillendirilmesi ve kutu yapısında biçimlenmeleri birçok durumda tasarımlarımızı hayata geçirirken yeterli gelmeyebileceği için, formlar içindeki öğeleri gruplamamızı ve adımlara bölmemizi sağlayan bir başka kutu seviyesi element olan fieldset elementlerini kullanıyor olacağız.

Hazırlayacağımız İletişim Formumuzda veri giriş kriterleri şu şekilde olsun: Ad Soyadı Mesaj

Kriterlerimizden ilk üçünü bir fieldset alanı içine, mesaj bölümünü de bir başka fieldset içine alarak mantıksal bir gruplama yapacağız. Bu yöntem hem stillendirme yaparken daha yaratıcı fikirleri hayata geçirmemize yardımcı olacak, hem de ziyaretçinin bir sürü metin kutusu arasında kaybolmaması adına bir iyileştirme sağlayacaktır.

Veri kutularımızı her zamanki gibi textbox input ile oluştururken, birden fazla satıra sahip olabilecek mesaj metni gibi öğelerimiz için textarea form öğesini kullanacağız. Kriter başlıklarımızın ve onların veri giriş içeriklerinin erişilebilir olması için de onları label elementiyle kapsayacağız.

<html> <head> <title>CSS İle Biçimlenmiş İletişim Formu</title> <style type="text/css"> body { font:9.5pt "Trebuchet MS"; color:#666666; } </style> </head> <body> <form id="iletisim" method="post" action=""> <fieldset> <label for="ad"><span>Adınız:</span>

<label for="ad"><span>Adınız:</span> <input type="text" name="ad" id="ad" /></label> <label for="soyad"><span>Soyadınız:</span> <input type="text" name="soyad" id="soyad" /></label> <label for=" "><span> Adresiniz</span> <input type="text" name=" " id=" " /></label> </fieldset> <fieldset> <label for="mesaj"><span>Mesajınız:</span> <textarea name="mesaj" id="mesaj"></textarea></label> <div><input type="submit" value="Gönder" /></div> </form> </body> </html>

CSS ile Fieldset İçindeki Öğeleri Stillendirmek
Şimdi bu formların içindeki öğelerin içerik kısmını stillendirerek yapısal biçimlemelere geçmeden önce onları görsel olarak bu biçimlemelere hazır hale getireceğiz. Yapacağımız düzenlemeler, form içeriğimizi stilsiz standart halleri olan yan yana dizilim yapısından kurtararak başlık altına metin kutuları gelecek şekilde, düzgün bir görünümde sunmaktan ibaret olacak.

label, label span { /* label ve label içindeki span öğeler için selektör gruplama */ display:block;} label { padding:5px; }

span { font-weight:bold; } fieldset input, fieldset textarea { color:#666; padding:2px; border:1px solid #a1a1a1; width:250px; fieldset textarea { font:9.5pt "Trebuchet MS";

Ziyaretçi fare işaretçisi ile metin kutusuna veri girişi yapmak için tıklayan ya da Tab tuşuyla metin kutularına erişerek yazmak istediğinde kutularımızın görünümünde bazı değişimler uygulayarak formumuzun etkileyiciliğini artırmaya çalışacağız. Bu bahsettiğim işlemler için daha evvelki uygulamalarımızda a elementi için de kullanmış olduğumuz pseudo class’lardan focus özelliğini kullanacağız. Ziyaretçi metin kutusuna veri girişi için tıkladığında kutularımızın çerçeve rengini siyaha çevirelim

fieldset input:focus, fieldset textarea:focus { border-color:#000; }

Şimdi formumuzdaki fieldset elementlerinin çerçeve rengini ve aralarındaki boşluğu arttıralım. Fieldset’ler için çerçeve rengini 3 piksellik gri, boşluk oranını da her fieldset elementinden sonra dışa doğru alttan 15 piksel olacak şekilde ayarlayalım: fieldset { border:3px solid #999; margin-bottom:15px; }

CSS ile Fieldset Çerçevesine Yazı Eklemek
<body> <form id="iletisim" method="post" action=""> <fieldset> <legend>Bilgi Formu</legend> Yazıyı yazdıktan sonra style içine biçimlendirmesini yapalım legend { font:10.5pt "Trebuchet MS"; color:#666666; font-weight:bold; }

CSS ile Fieldset Çerçevesine Yazı Eklemek

CSS dosyasını harici olarak kullanmak
@charset "utf-8"; /* CSS Document */ body { background: yellow; }

CSS dosyasını harici olarak kullanmak
<html> <head> <title>Untitled Document</title> <link href="css/1.css" rel="stylesheet" type="text/css" /> </head> <body> bu benim ilk sayfam </body> </html>

İnternet Programlama-I

Benzer bir sunumlar

... konulu sunumlar: "İnternet Programlama-I"— Sunum transkripti:

Benzer bir sunumlar

Proje hakkında

Geri bildirim

Giriş

Sosyal ağ üzerinden giriş yapmak:

İnternet Programlama-I

Benzer bir sunumlar

... konulu sunumlar: "İnternet Programlama-I"— Sunum transkripti:

Benzer bir sunumlar

Proje hakkında

Geri bildirim