CSS'te Görünüm
Markanız için 300X300 alan.
Düzenlenmek istenen sayfanın üstünde tam bir denetim sağlanmadıkça görsel düzenlemeler oldukça zorlaşır hatta bazen olanaksızlaşır.
Önemli olan bunu en kısa yoldan başarmaktır.
<h1>Örnekler</h1>
<p>Örnek 1</p>
<p>Örnek 2</p>
<p>Örnek 3</p>Çok fazla paragrafı olan bir sayfada, ki sayfalarda çok fazla paragraf vardır, yukarıdaki paragrafları ayrıca yönetmek zordur. Ayrıca her 3 paragraf ayrı ayrı düşünülmek zorunda olduğundan can sıkıcı olabilir. Paragraflar bir kap içinde toplanır. Böylece kap nereye paragraflar oraya.
<h1>Örnekler</h1>
<div>
<p>Örnek 1</p>
<p>Örnek 2</p>
<p>Örnek 3</p>
</div>Çok fazla kutusu olan sayfalarda, ki sayfalarda çok fazla kutu vardır, sınıf ya da kimlik tanımlamadan paragrafları kapsayan kutuyu CSS ile denetlemek de zordur.
<h1>Örnekler</h1>
<div class="İçerikParagrafKap">
<p>Örnek 1</p>
<p>Örnek 2</p>
<p>Örnek 3</p>
</div>İşte şimdi oldu !
CSS ile çalışırken zorunlu olmadıkça genişliği sabitleyemeyin. padding özelliği (satir içi boşluk) yardımıyla başlığın kenarlara uzaklığını satır içinde ayarlayın. Genişlik serbest bırakıldığı için başlık genişledikçe başlığı tutan etiket de genişleyecektir ancak başlık her zaman kendisini tutan etiketin sınırlarına padding değeri kadar uzak kalacak.
İyi Bir Görünüm için Önce Ne yapılmalı ?
Önce kağıt kalemi elinize alıp, sayfa tasarımını çizmek zorundasınız. Sayfa görünümünü kağıda çizmek CSS ile tasarlamaktan daha kolaydır ve daha az zaman alır.
Nelere dikkat etmeniz gerekli?
Anamenü, sağ ve sol menüler, sonuç bölümü, reklamlar ve benzeri etiketler neredeyse her sayfa için geçerlidir. Bu etiketler ileride yapılabilecek tasarım ve geliştirme için keskin bir biçimde ayrı tutulmalı.
İleride, tasarımı değiştirebileceğinizi unutmayın. Bu bölümleri değiştirdiğinizde içerikte neredeyse hiç bir değişikliğe gereksinim duymamanız gerekir. Görünümü içerikten bağımsız kılmanın temel amacı bu.
Sayfanızın tasarımı da bütünüyle esnek olmalı.
Tam da burada, farklı aygıt ve ekran çözünürlükleri için tek bir site anlamına gelen, responsive web karşımıza çıkıyor.
Tasarımınızın esnek olması, sayfanın ekran genişliğine uyum sağlaması ve de farklı aygıtlarda ve ekran çözünürlüklerinde kolay kullanılabilir olması demek.
Eksik kalan noktaları @media, display:flex; ve display:grid; gibi CSS özellik ve yöntemleriyle ve Javascript'le kapatıyoruz.
Görünümü tanımlarken :
- Ekran genişliğini olabildiğince çok kullanmaya çalışın.
- CSS'te kesin değerler yerine göreceli değerler kullanarak esneklik sağlayın.
- Responsive Web'e bir göz atın! Hoşunuza gittiyse ya da gerekliyse kullanın.
- Kullanıcıya hangi sayfada bulunduğunu gösterin.
- Üyelik, giriş ya da önemli bilgileri tutan bölümler, göze çarpmalı.
- Kullanıcılar bu kutulara rahatlıkla ulaşabilmeli: giriş, çıkış, üyelik kaydı & iptali gibi kutular, sayfalar en az tıkla ulaşılabilir olmalı.
- Web'ten esinlenin! Esinlenmek ile çalmak arasında çok ciddi fark var.
Çözüm Yaratın !
Kendinizi sınırlamayın. Yaratıcı olun!
Görünümünü belirlediğiniz sayfa sizin tuvaliniz.
Tasarımda ve kodlamada yaratıcı olun (olmuyorsa, uydurun =) !