Ortak Stil Şablonları Dosyalarının Oluşturulması ve Sayfalarda Kullanılması

Herkese Merhaba;
 
Dizi makalelerimize kaldığımız yerden devam ediyoruz. Bu makalede WEB tasarım işi ile uğraşan herkesin mutlaka duyduğu veya karşılaştığı İngilizce kısaltması ve adı ile CSS (Cascading Style Sheets) Türkçe karşılığı da Stil Şablonları'dır. Büyük çaplı olsun veya olmasın web projesi uygulamalarında CSS dosyaları ile çalışılması mutlaka gereklidir ve programcının sırtından büyük ölçüde kod yükünü almaktadır.
 
 
Bir projede CSS içeriği de en az kaynak kod içeriği kadar önem taşımaktadır. Bir diğer önemli konuda CSS özelliğinin proje içerisinde kullanım biçimidir. Bunun iki tarz kullanım şekli vardır.
 
Birincisi tüm CSS şablonlarını kullanım ihtiyacına göre uzantısı CSS olan ve belli bir mantık çerçevesinde isimlendirilmiş CSS dosyaları içersisinde biriktirmek ve ASPX sayfalarından link ile bağlantı kurmak. İkincisi de her bir ASPX sayfasının içine genelde sayfanın baş kısmına yazılır, aynı şablon tanımlarının tekrar tekrar yazılmasıdır.

Yukarıdaki paragrafın sonunda bahsedilen yöntemlerden hangisini tercih ederdiniz. Tercihinizi yönlendirmek amacı ile size şöyle somut bir program geliştirici ve müşteri diyalogunu örnek vereyim. Bir müşteri ile proje anlaşması yaptınız. Müşteri ana taslağı kabul etti sizde site tasarımına başladınız. Proje kapsamlı bir proje örn. 100 adet ASPX sayfasından oluşan bir proje. Projeyi genel hatları ile tamamladınız ve teslim etmek üzeresiniz. CSS uygulamalarınızda sayfa bazında bağımsız (Her sayfa için ayrı ayrı uygulandı.) müşteriniz size bir son dakika sürprizi yaptı ve proje içerisindeki veri girişi ekranlarında TEXTBOX'ların font büyüklüğünün 11'den 12'ye yükseltilmesini ve Times New Roman olan türünün de Arial olarak değiştirilmesini istedi.

Siz de bu aşamadan sonra CSS'leri bağımsız kullandığınız için bu tarz TEXTBOX geçen bütün sayfaları elden geçirmek zorunda kaldınız. Böyle bir durumunun iki tür dezavantajı var, birincisi zaman kaybı ikincisi de gözden kaçırma. Güncelleme yapılacak yer sayısı ne kadar çok olursa hata yapma ve atlama olasılığı da o kadar yüksek olacaktır. Bu örnekten sonra web projelerinde CSS uygulama şeklinin nasıl olması gerektiği konusunda biraz daha fikir sahibi olduğunuzu düşünüyorum. 

Konunun önemini anlatmak açısından bu kadar örnek yeterli olacaktır sanırım. Artık yavaş yavaş CSS dosyalarının kullanılması ile ilgili somut örnekler ve açıklamalarla konuyu biraz daha pekiştirelim. ASP.NET uygulaması ile geliştirilen WEB projeleri büyük kapsamlı ise genellikle MASTER.PAGE'ler devreye girmektedir. Bu özellikle ilgili detaylara daha sonraki makalelerimizde daha geniş bir açıdan bakacağız. MASTER.PAGE özelliğine benzetme yapacak olursam daha standart WEB geliştiricisi olan FRONT PAGE uygulamasındaki FRAME özelliğine benzemektedir. Neyse konuyu fazla dağıtmak istemiyorum. Projemizi baz alırsak bir ADMIN PANEL tasarlayacağız panel altında ortalama 20 - 25 sayfa olacak. Sayfaların ana özellikleri ADMIN PANEL içerisinde oluşturacağımız MASTER.PAGE altında tasarlanacak veya kod bölümüne yazılacak. Bunlar; Sayfalarda kullanılacak stil dosyalarının link bilgileri, JAVASCRIPT dosyalarına ait link bilgileri, sayfanın CONTENT (Karakter setinin ne olduğu) yapısı vb. bilgiler MASTER.PAGE içerisinde tanımlanmaktadır.

MASTER.PAGE Sayfasına Kaynak Kod Görünümü 

MASTER.PAGE Sayfasına Ait Kaynak Kod Görüntüsü

 

MASTER.PAGE içerisinde diğer sayfalarda kullanılacak olan stil bilgilerinin hangi dosyadan alınacağına ait bilgi
<HEAD> </HEAD>

tagları içerisinde yer alan

<link href="../App_Themes/style.css" type="text/css"
rel="StyleSheet" />

örnek cümlesi ile belirtilmektedir. Bu örnek cümleyi biraz açalım;

 

<link/>
Kullanılacak olan stil şablon dosyasına bağlantı yapılacağının bilgisidir.
href
Bu bölümde dosyanın bulunduğu konum belirtilmektedir.
type
Bu parametrede de ulaşılan dosyanın tipi belirtilmektedir. Bu örnekteki değer text/CSS'tir
rel
Relationship (İlişki kurulan obje türü)

 
Şimdide bir CSS dosyasının içeriğini daha yakından tanıyalım. CSS dosyasının içerisinde WEB sayfası ile ilgili aklınıza gelen her türlü görselliğe müdahale etme imkanınız vardır. Bir botunun görselliğine, bir TextBox'ın rengine, font büyüklüğüne, arka plan rengine, br tablonun genel çerçeve yapısına, satırlarına vb. aklınıza gelebilecek daha bir çok özelliğe müdahale edilebilmektedir.
 

CSS Dosyasına Ait İçerik

CSS Dosyasına Ait İçerik Görüntüsü
 

Yukarıdaki ekran görüntüsünde yer alan sayfalarda kullanılan TEXTBOX'lara ait biçin özelliklerinin tanımlandığı bölüm yer almaktadır.

 
.tx8        { font-size: 8px; }
 
.tx8gri        { font-size: 8px; color:#F4F4F4; }
.tx9        { font-size: 9px; }
.tx10        { font-size: 10px;color:#000000; TEXT-DECORATION: none }
.tx11        { font-size: 11px; }
.tx12        { font-size: 12px; }
.tx13        { font-size: 13px; }
.tx14        { font-size: 14px; }
.tx18        { font-size: 18px; }
.tx24        { font-size: 24px; }
 
   

CSS dosyası içerisinde her bir şablon etiketi nokta (.) ibaresi ile başlamalı ve özellik detayları da köşeli parantez karakterleri içerisinde yer almaktadır {}. Daha sonra proje içerisinde yer alan diğer sayfaların ilgili yerlerinde bu şablon etiketlerinin ismi yazıldığında ekstra bir biçimlendirme yapmaya gerek kalmadan ilgili objenin (TEXTBOX, LABEL, TABLEROW vb.) görüntüsü otomatik olarak değişecektir. Bu şablon ismi ilgili objelerin özelliklerinden CSSClass alanında belirtilmektedir. Bu alana gelindiğinde zaten önceki bölümlerde anlatılan link işlemi yapılmış olan CSS dosyası içerisindeki tüm sınıf etiket isimleri listelenmektedir.

 

Örnek Veri Girişi Ekranında CssClass Alanının İlişkilendirilmesi

Örnek Veri Girişi Ekranında CssClass Alanının İlişkilendirilmesi

Benzer Makaleler