Konular

Yeni Bir CSS Stil Yaratmak ve CSS Stil Türleri

Dreamweaver ile kendi CSS stillerimizi tan?mlamaya ba?l?yoruz. Öncelikle bir CSS stil tan?mlamak için neler yapmam?z gerekti?inden ve bunlara en iyi nas?l hükmedebilece?imizden bahsedip alternatif kullan?mlar? gözden geçirece?iz

Yeni bir CSS tan?mlarken mutlaka Dreamweaver kullanaca??z diye bir kaide yok biz sadece DW'?n bizlere sundu?u ola?anüstü görsel ortam? kullan?p gayet konforlu bir biçimde CSS tan?mlamalar?m?z? yapaca??z. Bir arkada??m "Abi CSS yazmak kadar zevkli bir ?ey yok" demi?ti bir keresinde. Gerçekten de kendi kodunu yazanlar için en zevkli k?s?md?r CSS kodlamak ama art?k kod yazmaya gerek yok. DW bizim için bunu rahatl?kla yap?yor zaten.

Yeni bir CSS yaratmak

?imdi DW içerisinde nas?l yeni bir CSS stili yarataca??m?z? görece?iz. Öncelikle doküman?n?z? kaydetmelisiniz. Window / CSS styles menüsü ile e?er aç?k de?ilse "CSS Styles" paneline ula??yoruz.

www.dijitalders.com

CSS styles paneli liste görünümü

Panelin sa? üst kö?esindeki seçenekler menüsüne ula?mam?z? sa?layan dü?meye bir kez t?kl?yoruz. Aç?lan menüden "New ..." seçene?i ile yeni bir stil yaratmaya ba?layabiliriz.

www.dijitalders.com

CSS styles paneli menüsünden New diyerek yeni bir stil tan?mlamaya ba?layabilirsiniz

Bir ileti?im kutusu aç?lacakt?r. Burada yeni yaratt???m?z stilimize dair ön ayarlar? yap?yoruz. Bu ön ayarlar;

www.dijitalders.com

Yeni stil yarat ileti?im penceresi

Selector Type: Bu k?s?m i?in beklide en önemli noktalar?ndan biri diyebiliriz. Stilimizin türünü belirtiyoruz.

Class (can apply to any tag)

Bu seçenek özel stiller (class) tan?mlamam?za yar?yor. Bunlar genelde bizim istedi?imiz özelliklerde kendi isimlendirmemizi yapabilece?imiz stiller anlam?na geliyor. Bunlar?n aktif hale geçebilmesi için seçili bir nesneye uygulanmas? gerekiyor.

Tag (redefines the look of the specific tags)

Bunlar i?leri büyük ölçüde kolayla?t?ran HTML taglar?n? tekrar biçimlendirmenize yar?yor. Yani <P>, <TEXTAREA> veya <BODY> gibi taglar? istedi?iniz gibi biçimlendirebilirsiniz. Bunlar?n aktif olabilmesi için ise bir seçim ve uygulama i?lemini yapman?za gerek yoktur.

www.dijitalders.com

CSS ile HTML etiketlerini tekrardan biçimlendirebilirsiniz

?öyle ki; e?er bir <TD> tag?n? biçimlendirirseniz bunu herhangi bir yere uygulamak gerekmez. Bu bütün <TD>'leri (tablo hücrelerini) kapsar. Bu ?ekilde bir <BODY> tag? tan?mlayarak her paragrafa veya metne ayr? ayr? stil uygulamaktan kurtulabilirsiniz. (BODY tag? için arka fon rengi tan?mlamas? yaparsan?z sayfan?z?n arka fon rengi de de?i?ecektir.)

Bu ?ekilde bir <BODY> tan?mlarsan?z Modify / Page Properties ile yapt???n?z ayarlar? yapman?za gerek kalmadan <BODY> yi biçimlendirmi? olursunuz. Böylece W3C standartlar?na uygun ve hatas?z bir sayfaya sahip olabilirsiniz.

Advanced (IDs, pseudo-class selectors)

Nesnelere özel ID ile ili?kili stiller veya yalanc? stiller olarak tabir edilen stiller yaratmam?z? sa?lar. Örne?in ID'si "UstTaraf" olan bir DIV için #UstTaraf isimli bir stil yarat?rsak bu stil sadece "UstTaraf" ID'sine sahip nesneleri yani ilgili DIV'imizi kapsayacakt?r

www.dijitalders.com

Advanced seçene?i ile yeni bir stil tan?mlamak

Bu seçenek ayn? zamanda Web'de s?kça gördü?ümüz "Rollover text linkler" in temel mant???n? te?kil eden <A> tag? üzerinde oynamalar yapmam?za da olanak sa?l?yor.

Name / Tag / Selector: Bu k?s?mda stilimize geçerli bir isim verece?iz. Bu isimler alt tire (_) ve bo?luk içermeyip rakamla ba?lamayan isimler olmas? gerekiyor. Seçti?imiz türe göre "Name" k?sm? da "Tag" veya "Selector" olarak de?i?ecektir.

Define in: Bu özellik yaratt???m?z stili tan?mlayaca??m?z ortam? belirtiyor. Yani harici bir ".css" uzant?l? dosya yaratarak doküman?m?z ile bu .css dosyas?n? ili?kilendirmek "New Style Sheet File" seçili olmal?d?r.

E?er önceden bir stil tan?mlam?? ve bu seçene?i i?aretlemi? olsayd?k yaratt???m?z dosya(örne?in stillerim.css)  burada "stillerim.css" ?eklinde görünecekti. E?er tan?mlad???n?z CSS stilin sadece bu dokümana özgü olmas?n? istiyorsan?z "This Document Only" seçene?ini i?aretleyerek; yarat?lan CSS'in bu doküman?n <HEAD> taglar? aras?na bir STYLE tan?mlamas? yap?lmas?n? sa?layabilirsiniz. Fakat yapt???m?z stil sitedeki tüm dokümanlarda kullan?lacak ise bunu stillerim.css gibi bir isimle harici olarak kaydedip daha sonra kullanmak istedi?imiz dokümanlara "Attach Style Sheet...." Menüsü ile ba?laman?z daha mant?kl? bir çözüm olacakt?r. Bir stildeki herhangi bir de?i?ikli?in di?er dokümanlar? da otomatik olarak etkilemesi için bu yöntem daha uygun olacakt?r.

OK dedi?imiz anda stilimiz için as?l biçimsel tan?mlamalar? yapaca??m?z Diyalog Penceresine ula??yoruz. Bu pencerenin ba?l??? ?u ?ekilde olacakt?r: "CSS rule Definition for .KucukKirmizi in stillerim.css"

CSS stil tan?mlarken bu makalede bahsi geçen tüm özellikleri kullanacaks?n?z diye bir ?art yok. Zaten bunlar?n hepsini kullanman?z da imkâns?z. Hemen belirtelim ki çok özellik tan?mlanan bir CSS stil taray?c?ya da bir o kadar ek yük getirecek ve sayfay? a??rla?t?racakt?r. Sadece Type ve Background bölümleri bile ço?u zaman i?inizi fazlas? ile görece?inden di?er bölümler sadece özel stiller tan?mlad???n?z zamanlarda i?inize yarayacakt?r.

Burada yaz? türü ve ona benzer tan?mlamalar? yap?yoruz;

www.dijitalders.com

Stil yaratma penceresi, Type gölümü

  • Font: Yaz? tipini buradan seçiyoruz.
  • Size: Yaz? tipimizin büyüklü?ünü belirliyoruz.
  • Style: Yaz?m?z?n e?ik olmas?n? sa?lar.
  • Line Height: Sat?r yüksekli?ini belirtir. Size'den 2 piksel fazla olmas? ideal bir seçimdir.
  • Weight: Kal?n yazmak ve bunun derecelerini belirtmemize yarar.
  • Case: Variant ile hemen hemen ayn? i?i görür, yat?lar?n büyük ya da küçük harf ile yaz?lmas?n? ya da sadece ilk harflerini büyük olmas?n? sa?lar.
  • Decoration: Altçizgi ve benzeri etkileri buradan ayarl?yoruz.
  • Color: Renk seçimini buradan yap?yoruz.

Bazen stilimiz için arka fon ayarlar? da yapmam?z icap edebilir Bu ayarlar? da buradan yap?yoruz.

www.dijitalders.com

Stil yaratma penceresi, Background bölümü

  • Background Color: Arka fon için istedi?iniz rengi seçebilir ya da renk kodunu yap??t?rabilirsiniz.
  • Background Image: Arka fon için renk de?il ama bir resim dosyas? kullanmak istedi?inizde buradan resmi seçiyoruz.
  • Repeat: Bu ise seçti?imiz resim dosyas?n?n tekrar etmesini ayarlamam?za yar?yor. Yani resim dosyas? çok küçük ise yaz?n?n kaplad??? tüm alan? kaplatabilir ya da sadece x veya y ekseni boyunca tekrar yapmas?n? sa?layabiliriz.
  • Attachment: Burada resim dosyas? Scroll esnas?nda sabit kalabilir (Fixed) ya da oda scroll ile kayar (scroll), gibi iki seçenek mevcut.
  • Horizontal Position: Yatay pozisyonu belirtir.
  • Vertical Position: Dikey pozisyonu belirtir.

Daha çok paragraflara özgü ayarlar? belirtir. Gazetelerde oldu?u gibi sütunlar (block da denir) yaparak site tasar?m? yap?yorsan?z i?inize çok yarayacak ayarlard?r.

www.dijitalders.com

Stil yaratma penceresi, block bölümü

  • Word Spacing: Kelimeler aras? bo?lu?u belirtir.
  • Letter Spacing: Karakterler aras? bo?lu?u belirtir.
  • Vertical Alignment: Dikey hizalama.
  • Text Align: Temel metin hizalamay? belirtir.
  • Text Indent: Indent ile bir sekme içeri al?nm?? metinlerin sekme de?erini piksel veya di?er birimler cinsinden belirlemenizi sa?lar.
  • Whitespace: Beyaz bo?lular da denen bo?luklar?n geni?li?ine dair ayarlar.
  • Dsiplay: Görünümün ne türde olaca??n? belirler. Örne?in bir DIV'i gizlemek istersen "none" seçmemiz yeterli olacakt?r.

CSS Box Model standartlar? ve kutu modeli tasar?mlar? için kulland???m?z k?s?md?r. Özellikle DIV'lerin biçimlendirilmesinde kullan?l?r.

www.dijitalders.com

Stil yaratma penceresi, Box bölümü

  • Witdh: Kutu (box) geni?li?i.
  • Height: Kutu yüksekli?i.
  • Float: Kutu hizalamas?n?. Örne?in bir nesneyi sa?a hizalamak isterseniz bunu "right" seçmeniz yeterli olacakt?r. Float ve "Block" bölümünde geçen "text-align" seçeneklerinin birbiri ile kar??t?rmamak gerekir. Zira "float" oldu?u gibi nesnenin kendisinin konum hizalamas?n? belirtirken "text-align" ise nesne içeri?inin hizalamas?n? belirtir. Örne?in sa?a hizalanm?? (float: right;) bir DIV'in içeri?i ortalanm?? (text-align: center;) olabilir.
  • Clear: Daha çok katmanlar ve DIV'ler ile ilgili bir ayar. Nesneler aras? hizalama ne temas seçeneklerini belirtir.
  • Padding: Üst, alt ve yanlardan olan içerik uzakl???n? belirtir.
  • Margin: Kutunun çevresindeki di?er nesnelere olan uzakl???n? belirtir.

Border, (baz?lar? bordür der ?) stiliniz için çerçeve tan?m? yapman?z? sa?lar. Textarea'lar gibi form elementlerinde çok güzel sonuçlar verebiliyor.

www.dijitalders.com

Stil yaratma penceresi, Border bölümü

  • Style: Çerçevenin türünü belirtir. Her kenar için ayr? ayr? ayarlayabilece?iniz gibi standartlar? da kullanabilirsiniz.
  • Width: Çerçeve kal?nl???n? belirtir.
  • Color: Çerçeve rengini belirtir.

Liste ö?eleri için stil tan?mlamalar? burada yer al?yor.

www.dijitalders.com

Stil yaratma penceresi, List bölümü

  • Type: Buradan standart tan?ml? madde imlerinden birini seçebilirsiniz.
  • Bullet Image: Madde imleri için kendi seçti?iniz bir resim dosyas?n? da kullanman?z mümkün.
  • Psition: Liste olarak belirlenmi? metinlerin di?er paragraflara göre konumunu belirtir.

Nesneler ve özellikle katmanlar pozisyon ve görüntülenme ayarlar? buradan yap?l?yor.

www.dijitalders.com

Stil yaratma penceresi, Position bölümü

  • Type: Konumland?rma türü.
  • Widht: Geni?lik.
  • Height: Yükseklik.
  • Placement: Taray?c?da sayfan?n neresinde bulunmas?n? istiyorsak buradan de?erleri girmeliyiz.
  • Clip: Bu daha çok JavaScript kullan?larak yap?lm?? kaybolma efektlerinde kullan?lmas? gereken bir seçenek.
  • Visibility: Görünürlü?ü buradan ayarl?yoruz.
  • Overflow: CSS katmanlar için içeri?in katman içerisindeki görüntülenme ?eklini belirtir. Örne?in Overflow: scroll seçene?i ile katman içeri?inin iFramelerde oldu?u gibi kayd?r?lmas?n? sa?layabilirsiniz.

Bu k?s?mda ilginizi çekebilecek bölümler ?unlar:

www.dijitalders.com

Stil yaratma penceresi, Extenmsions bölümü

  • Page Break Before / After: Internet Explorer için geçerli bir tan?mlama seçene?i. Nesneler aras? ili?kilerle alakal? bir olay san?r?m.
  • Cursor: Bu stilin uyguland??? metinler için; fare imleci, bu stil ile biçimlendirilmi? nesne üzerine geldi?inde üzerine geldi?inde nas?l bir ?ekil alac???n? belirler. Baz? sitelerde gördü?ümüz linklerin üzerine gidince kursör'in + ?eklini almas? buradan yap?l?yor.
  • Filters: Bu özellik ise çok ilginç ve bir o kadar da kullan??l?. Buradan belirleyece?iniz bir filtre için ilgili de?erleri de girmek suretiyle resim dosyalar?na uygulayaca??n?z bu stil sayesinde, sadece CSS stil ile resmi siyah beyaz hale getirebilir, kontrast ayar?n? de?i?tirebilir yada resmi ters çevirebilirsiniz. Sadece resimler de?il nesnelerin görsel özellikleri üzerine çe?itli efektleri de bu k?s?mdan yapabilirsiniz. Fakat taray?c?lar taraf?ndan tam olarak desteklenmeyen bir özellik oldu?undan kullan?rken bunu göz ard? etmemeniz gerekmektedir.

CSS Stillerin ba?l?ca ayarlar? bunlar. Bu ayarlar?n hepsini yapmak genelde pek sa?l?kl? sonuçlar vermez. Bir metin için CSS tan?ml?yorsan?z sadece "Type" k?sm? i?inizi fazlas?yla görecektir.

?stedi?iniz tüm ayarlar? yapt???n?za göre OK diyebilirsiniz. Stilinizi ekledi?iniz anda CSS Styles panelinde, verdi?iniz isimde bir stil görünecektir.

Yorumunuzu Ekleyin

Database Paneli

Database paneli

26,244 Okunma 1 Yorum 05/06/2008 10:46:38

Div Çatılı sayfalar Oluşturmak

Çok değil birkaç yıl önce sayfa tasarımlarımızı yaparken ara yüz bileşenlerini tablolar kullanarak görünmez ızgaralar üzerine inşa ederdik. Bu durum; HTML yapı dilinin web tasarımcıları tarafından hatalı yorumlanmasının ve kullanılmasının bir sonucu idi. Tarayıcılar arası çekişmelerin ve tüm Internet alışkanlıklarımızı etkileyen tarayıcı savaşlarının bir sonucu olarak ortaya çıkmıştı. Fakat Web 2. 0 kavramının gündeme geldiği şu günlerde artık eski tasarım alışkanlıklarını bir kenara bırakıp modern tasarım ve web teknolojilerine cevap verecek web sayfaları tasarlamanın vakti geldi de geçiyor bile

25,984 Okunma Henüz yorum yapılmamış 06/08/2007 17:55:00

Recordset ile verileri sayfaya yazdırmak

Kayıt dizisi (recordset) ile Dreamweaver içerisinden veritabanına erişim sağlayarak, kriterlere göre ve ya istediğimiz sayıda kaydı sayfaya yazdırmak mümkün. Bizde bu makale ile veritabanı kayıt erişimlerini yakından inceleyeceğiz

21,701 Okunma Henüz yorum yapılmamış 31/08/2007 14:19:45

Bindings Paneli

Dreamweaver bindings paneli

20,759 Okunma Henüz yorum yapılmamış 05/06/2008 10:03:38

Database Paneli

Veritabanlarına erişmek

19,746 Okunma Henüz yorum yapılmamış 05/06/2008 09:12:39

Datebases Paneli

Resimli anlatım

19,646 Okunma Henüz yorum yapılmamış 06/06/2008 11:05:53

Bindings Paneli

Veri bağlantılarının yönetildiği panel

19,013 Okunma Henüz yorum yapılmamış 05/06/2008 09:11:51

Named Anchor

Named anchor aracı ile ilgili açıklamalar

19,005 Okunma Henüz yorum yapılmamış 05/06/2008 10:18:51

Dreamweaver ile Site tanımlamaları

Dreamweaver birçok geliştirme ortamında olduğu gibi proje bazlı çalışmalar yapmaya olanak tanıyan bir yazılımdır. Bu makalede projelerimizi DW içerisinde nasıl yönetebileceğimizi göreceğiz

18,833 Okunma Henüz yorum yapılmamış 01/09/2007 02:25:54

ASP sayfası hazırlama

Dreamweaver mx de ASP çalışmak için daha önceden ASP ile uğraşmış olmak gereklidir. Her nekadar Dreamweaver Mx işimizi kolaylaştırsa da ASP 'den anlamak bazı durumlarda faydalı olacaktır. ASP öğrenmek için Dr. Hakkı ÖCAL 'ın ASP kitaplarını tavsiye ederim

18,707 Okunma Henüz yorum yapılmamış 12/08/2007 04:13:11

Yükleniyor...