Expression Web 2 - CSS Uygulamaları

Merhaba arkadaşlar ;

Expression Web 2 Beta üzerinde CSS 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.



Enlarge this imageSayfayı küçültmek


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.


Enlarge this imageSayfayı küçültmek


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.


Enlarge this imageSayfayı küçültmek


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.


Enlarge this imageSayfayı küçültmek


lı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.



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.


Enlarge this imageSayfayı küçültmek


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ı.



Enlarge this imageSayfayı küçültmek


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 olucak.