Microsoft’un yeni nesil Web Tasarım programı Expression Web ile CSS dosyaları uygulamalarına bir göz atalım.

BildiÄŸiniz gibi CSS (Cascading Style Sheets) Html elementlerine kazandırdığımız stil dosyalarıdır. Klasik HTML yapısında yazılara,görsellere,tablolara kısaca html tagi olan her websayfası elementine stil kazandırmak için çok opsiyonumuz yoktu ve hepsine teker teker yazıyorduk. CSS ile bu sorun ortadan kalkıyor. CSS stil dosyalarını merkezi tutarak istediÄŸinizde tüm sayfadaki bu stile sahip elementleri güncelliyebiliyorsunuz. Expression Web’teki uygulamalarımıza bakmadan kısaca temel CSS stil dosyaları geliÅŸtirilimi ve yönetiminden de bahsetmek istiyorum. CSS dosyaları sadece bir yazıyı örnek alacak olursak onun rengi,büyüklüğü,italicliÄŸi gibi stil bilgilerini saklayabilen kodlardır. Metnin kendisi html olarak kalırken onun özelliklerini ayrı bir kısımda tutarak bu stilleri diÄŸer aynı stili vermek istediÄŸimiz kısımlar içinde kullanabiliriz.

CSS dosyalarının temel yapısı şu şekildedir:

stil {
atanacak stil;
mesela arkaplan rengi;
}

gibidir. Öncelikle stil adı yazılır ve süslü parantezler ile atanacak stiller sıralanır.

CSS stil dosyaları sayfamıza 3 farklı mantıkla eklenebilir:

1-) Tag seçiciler ile ( body,p,table,h1,h2,h3,h4,h5,h6….) 
2-) Class ( Sınıf ) ile 
3-) ID ile

Bu 3 yöntem aslında sadece stilin adını yaratırken adından anlaşılabilir. Tag yapılı bir örnek alacak olursak:

body { background-color: #FFFFFF" ; }

gibi tüm body tagine arkaplan rengi olarak beyaz atamış oluyoruz.

.stil1 { font-size:3 ; }

gibi noktalı bir class (sınıf ) ismi oluÅŸturarak font büyüklüğü 3 olan bir stil yaratmış oluyoruz. Tagten farkı bu class’ı head taglerinin arasında yarattıktan sonra body kısmında:

<p class="stil1"> Lorem Ipsum </p>

gibi Lorem Ipsum yazısının bulunduğu paragraf tagine atamamız gerekecek. Tagler direk o taglere atanırken classları mutlaka bir html tagine bu yapıda classlarımızı atamamız gerekiyor. Eğer herhangi bir html tagi arasında olmayan bir yazıya atamak gerekirse(illaki paragraf tagş olmayabilir)

<span class="stil1">Lorem Ipsum </span>

gibi span tagiyle ayırabiliriz.

ID yapılı atamalarımızda ise Class yapısına benzer olmakla beraber class yapısının avantajı olan sayfanın farklı yerlerinde aynı class yapısını kullanabilmek ID ile bir tekillik gerektiğinde kullanılıyor.

#kutu
{ width : 550 px ; height : 700 px ; }

gibi head taglerinde stilimizi yarattıktan sonra body kısmında yine atarken:

<div id="kutu"> İçerik </div>

gibi o özellikleri bir div tagiyle division’a atayabiliyoruz. Özellikle arayüz tasarımları yapabildiÄŸimiz CSS Layerları bu yapıyı kullanmaktadır. Class’tan farkı tekil olarak atanabilmesidir baÅŸka bir divisiona kutu atanamaz.

3 farklı yöntemde CSS stil dosyalarını yaratmayı gördük. Ayrıca bu yaratmış olduğumuz ve sayfada kullanılan stillerimizi HTML sayfamıza eklemenin de 3 yolu var.

1-) internal (dahili) 
2-) external (harici) 
3-) inline (satıriçi)

Yukarıda bahsettiÄŸimiz CSS stilleri oluÅŸturulurken html sayfamıza eklerken eÄŸer dahili kullanılacaksa head tagleri arasında oluÅŸturup body’de CSS tipine göre istenen yerde çağırılıyor.Bu stilleri ayrıca harici bir stil.css dosyası gibi bir dosyada tutarak merkezi stil yönetimi saÄŸlayabiliriz.Böylelikle dışarıda tutulan herhangi bir stil güncellendiÄŸinde bu stili kullanan tüm sayfalarımız güncellenebiliyor.
Dahili ve harici olarak tutulabilen stillerimizden öte bazende direk o satırda stilimizi tanıtıp ne bir class ile ne de dışarıda bir dosya ile stil oluşturmadan o satırda stilimizi tanıtabiliyoruz.

Satıriçinde sonuçta CSS html taglerine atanabilen stillerimiz olduğundan herhangi bir html tagini açtıktan sonra:

<p style="font-size:3"> Örnek yazı </p>

gibi bir yapı ile style tagi açarak istediğimiz stili o satırda o html tagi içerisinde atayabiliyoruz. Ancak sadece o satırda kullanılabiliniyor ve merkezi yönetilemiyor.

Expression Web tam bir CSS 2.1 desteğiyle geliyor. Açılış ekranında sağ alt kısımda öncelikle sayfanızda oluşturacağınız CSS stillerinin adlarıyla beraber alttaki gibi bir önizleme ile beraber gelen Apply Styles paneli yer alıyor.

http://img.sanalkurs.net/images/resim1_7.jpg

Yukarıdaki panelde sayfamızda bulunan tag yani seçici stiller hariç tüm CSS stillerimiz isimleri ve konumları ile yer alıyor.New Style diyerek sayfamız için yeni bir CSS stili oluÅŸturabilir ve kullanabiliriz.CSS stillerini teker teker saha sonra inceleyeceÄŸiz.Sayfada herhangi bir html tagini seçip (yazı, görsel, div…) burada mesela style2 tıklayarak ona bu stilin atanmasını saÄŸlayabiliriz. Attach Style Sheet ile dışarıda tuttuÄŸumuz veya hazır bulduÄŸumuz stil dosyalarını mesela style.css dosyasını çalışmamıza baÄŸlayarak onun stillerini de kullanabiliriz. Options ile görünüm ayarlarının sıralamasını deÄŸiÅŸtirebilirsiniz.

Dikkatinizi mutlaka çekmiÅŸ olan Dreamweaver’a göre tasarımcılar için büyük bir yenilik olanrak Expression Web ile gelen CSS stillerindeki renklenmelerdir. Renklerin anlamları:

Mavi Daire: Tag Seçicileri ile atanmış CSS stili 
Yeşil Daire: Class yapısında CSS stili 
Kırmızı Daire: ID ile atanmış CSS stili 
Sarı Daire: Inline (Satıriçi) atanmış CSS stilleri

Dairenin etrafı gri çemberle sarananlar (fotoda style1 de olduÄŸu, style2 de olmadığı gibi) sayfada kullanılıyor anlamına geliyor, sarılı olmayanlar kullanılmıyor. (Inline’da yok o zaten direk atandığından)

CSS stillerinin üzerine sağ tıkladığımızda alttaki gibi bir menü geliyor. Apply Style ile o anda sahnede seçili olan html taglerine o stili atıyor. Normaldeki çift tıklama ile aynı görevi görür. GotoCode ile bu stili tutan kodlara ulaşabilirsiniz.Eğer internal bir stil ise head taglerindeki kısmı açar,eğer inline ise direk o kısmı seçer ama eğer external yani harici bir dosyadan gelen bir stil ise o dosyayı html dosyasının yanına stil.css diye açarak onun içerisine götürür. New Style yeni stil oluştururken New Style Copy varolan bir stilin bir kopyasını çıkararak geliştirmeye imkan verir. Modify Style ile bu stili geliştirmeye devam edebiliriz. Rename class ile bu stil dosyalarının adını style1,style21 gibi anlamsız ve karmaşıklığa yol açabilecek şekilden çıkarıp daha anlamlı olabilecek anabaslik, metin gibi türkçe karakter içermeyen isimlerle ekleyebiliriz. Böylece daha sonraki geliştirmelerde daha rahat okunabilirlik sağlamış oluruz. Delete ile sağ tıkladığımız stili silebiliriz. Attach Style Sheets ile dışarıdan bir css dosyasını sayfamıza bağlayabiliriz. Manage Style Sheet Links ile dışarıdan çoklu bağladığımız CSS stillerinde de en son eklenen her zaman daha önceliklidir ve mesela body tagine atanmış bir arkaplan rengi ilk eklediğimizde siyah sonrakinde sarı olursa en son eklenen harici dosyadaki CSS stili geçerli olur ve arkaplan sarı olur. Bu hiyerarşiyi düzenleyebileceğiniz kısım ekrana gelir. Remove Class , Remove ID , Remove Inline Style ile stili silmeden sayfadaki atanmış kısmından kaldırabiliyoruz.

http://img.sanalkurs.net/images/resim2_6.jpg

Modify Style diyerek Expression Web ‘in CSS stillerini teker teker yaratabileceÄŸimiz CSS panelimiz geliyor. Buradan sol taraftaki menüden sırasıyla stil kodlarını seçerek atayabiliriz. New Style Sheet ile buradan da stil oluÅŸturup daha sonra sayfaya atayabiliriz,burada Modify Style ile girdiÄŸimiz bu menüde yapacağımız deÄŸiÅŸiklikler saÄŸ tıkladığımız stili ve dolayısıyla ona sahip tüm stilleri güncelleyecektir.EÄŸer harici dosyadan çalışmamıza dahil olmuÅŸ bir stili Modify Style ile güncellerseniz Expression Web html dosyasının yanında o stil.css dosyasını da açarak üstüne yıldız koyarak deÄŸiÅŸtiÄŸini yaptığınız deÄŸiÅŸikliÄŸi saklamanız için sizi uyaracaktır.

http://img.sanalkurs.net/images/resim3_6.jpg

Expression Web arayüzünde CSS stillerinin özelliklerini bu açılan CSS panelinde deÄŸilde kısaca görebileceÄŸimiz saÄŸda bir CSS Properties panelimiz var. Altta gösterdiÄŸim kısımdaki 3 buton ile en baÅŸtaki ile o an sahnede seçili olan html elementinin sahip olduÄŸu stil dosyasının CSS kategorilerine göre getirmesi 2.cisi ise alfabetik olarak getirmesini saÄŸlar.Benim tavsiyem alışmanız açısından CSS kategorisi ÅŸeklinde bırakılmasıdır. 3.buton ise atanmış stilleri mavi ile iÅŸaretliyerek üstte gösterip göstermemesini saÄŸlıyor. SaÄŸdaki Summary ile atanmamış class’ları görmediÄŸinizi belirtebiliyorsunuz.CSS Properties kısmından istediÄŸiniz özelliÄŸin yanına gelerek aynı büyük CSS panelindeki gibi CSS stillerini atanabilecek özelliklerinden seçebiliyorsunuz.

http://img.sanalkurs.net/images/resim4_3.jpg

Aslında bir de sayfamıza CSS atarken kullanabileceÄŸimiz bir yöntem benim de günlük hayatta çok sık baÅŸvurduÄŸum hem Dreamweaver’da hem Expression Web’te olan CSS Intellisense desteÄŸidir. Zamanla CSS mantığını ve atanmasını kavradığınızda paneller yerine çok hızlı bir ÅŸekilde atamak istediÄŸinizi stili kod kısmından da verebileceksiniz. Bu intellisense desteÄŸine eriÅŸebilmek için mesela aÅŸağıdaki gibi style1 adında örnek bir class’ımız olsa stil olarakta font-family seçtikten sonra yeni bir stil atamak için font family stilinin sonundaki noktalı virgülden sonra enter’a bastığımızda alttaki gibi atayabileceÄŸiniz tüm CSS stilleri sıralanabiliyor.Ancak burada atadığınız stillerin sonuna burada noktalı virgül koymazsanız CSS stili atanmıyor siz yazmayı unutmayın.

http://img.sanalkurs.net/images/resim5_2.jpg

En sık yaşadığımız sıkıntılardan biri de özellikle CSS positining için hazır internetten bulduğumuz Layout CSS dediğimiz sayfanın arayüzünü tasarımlarının bulunduğu CSS dosyalarını açtığımızda dinamik olarak oluşturulan bu dosyaların altta solda gösteriğim gibi tek satırda gelmesi ve yönetiminin ve okunabilirliğinin zorluğudur.Bu CSS dosyasını Expression Web ile açıp sağ tıklayarak Reformat CSS diyerek sağdaki gibi okunabilir ve geliştirilebilir hale getirilebiliniyor.

http://img.sanalkurs.net/images/resim6_2.jpg

CSS stil dosyaları ile çalışırken kendi html sayfanızda yarattığınız internal (dahili) CSS stillerini merkezi yönetmek üzere tüm sayfalarınızı buna baÄŸlayarak çalışmanızın tümü için geçerli stiller oluÅŸturmak isteyebileceksiniz. Bunun için yeni bir CSS dosyası oluÅŸturup zincirlemek gerekiyor.New Style kısmına tıklayıp “Define in” kısmından New Style Sheet diyebiliriz. Bu projemize yeni bir CSS dosyası yaratıp bunu Attach yani zincirlemek isteyip istemediÄŸinizi soracak OK dersek baÄŸlamış olacağız.Expression Web alttaki gibi Manage Styles panelinde size 1.css dosyasını ben örnek olarak zincirledim onda da bir arkaplan rengi olarak body tagine stil atadım.Ayrıca baÅŸlık yazılarıma atadığım internal yarattığım bir style1 stilim var.Bu baÅŸlık stilinin tüm projemdeki dosyalarda aynı olmasını ve bu css dosyasındaki stili güncellediÄŸimde hepsi güncellensin istiyorum.Bu yüzden bu stilimi dışarıdaki dosyama eklemem lazım.Normalde o stili head kısmından cut (kesmeli) daha sonra harici dosyama düzgün formatta yapıştırmam gerekiyordu ama Expression Web’te altta gösterdiÄŸim üzere istediÄŸiniz stilleri dahiliden hariciye sürükleyip bırakabiliyoruz ve arkaplan da bu dahili stili silip harici dosyaya bu stili ekliyor. Aynı ÅŸekilde harici bulduÄŸunuz stilleri de dahiliye bu ÅŸekilde taşıyabiliyoruz. Mükemmel bir zaman kazancı.

http://img.sanalkurs.net/images/resim7_1.jpg

Expression Web 2 Beta tam CSS desteği ve tasarımcılar için yardımcı birçok unsurla Dreamweaver dahil rakiplerinin önüne geçiyor. Expression Web 2 release olunca CSS tarafında birkaç yenilik daha bizi bekliyor olacak.

Faydalı olması dileÄŸiyle…Kaynak dosyayı indirmek için tıklayın