Üye Girişi
Bağlan Google+ ile Bağlan Facebook ile Bağlan
Yeni Kayıt
Tüm Forumlar
  • Tüm Forumlar
  • Web Tasarım - Programlama
  • Tasarım ve grafik
  • Web Tasarım ve Hazır Kodlar
  • Bu Konuda
Şimdi Ara

[Ders] Daha iyi tasarımlar için CSS ...

Sıcak Fırsatlarda Tıklananlar
Editörün Seçtiği Fırsatlar
Bu Konudaki Kullanıcılar:
1 Misafir - 1 Masaüstü
5 sn
58
Cevap
0
Favori
2.189
Tıklama
Daha Fazla
İstatistik
  • Konu İstatistikleri Yükleniyor
Konuya Özel
0 oy
Öne Çıkar
Cevapla
Sayfa: 123
Sayfaya Git
Git
sonraki
Giriş
Mesaj
  • Merhaba arkadaşlar,

    DH de üyelerin CSS hakkında takıldığı, sorunlar yaşadığını gözlemledim,
    Ben bu arkadaşlar için kendi kalemimden bir döküman hazırladım...
    Umarım herkes için faydalı olur :)


    [Örnek 1 - Css dosyası oluşturmak]
    Anasayfa (index.htm) 'nın bulunduğu dizine boş bir style.css oluşturuyoruz. (Bunu "sağ tık > yeni metin belgesi oluştur" diyerek dosya uzantısını css yazarakta oluşturabilirsiniz.)



    [Örnek 2 - Css'yi sayfanızda çalıştırmak]
    Anasayfanızı (index.htm) açıp kodlama bölüamünden en üstüne ; "<link href="style.css" rel="stylesheet">" aşağıdaki örnekteki gibi ekliyoruz... 
     
      [color=#CC0000]<link href="style.css" rel="stylesheet">[/color] 
      <head> 
      <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> 
      <title>New Page 1</title> 
      </head>




    [Örnek 2.1 -Css index sayfanızda çalıştırmak..! ]
    Eğer Css'yi bir dosyadan değilde sayfa içerisinde dosyaya ihtiyaç duymadan çalıştırmak istiyorsanız index.htm'yi bir editör ile açın ve aşağıdaki kodları gerekli yere (örnekte "head" dan sonra...) yapıştırmanız yeterli olacaktır... 

     
      <head> 
      [color=#CC0000]<style type="text/css"> 
      [i]Class (css style) komutlar buraya[/i] 
      </style>[/color] 
      </head>




    [Örnek 2.2 -Style komutları sadece istediğiniz yerde kullanmak ; ]
    CSS ye sadece bir yerde ihtiyaç duyuyorsanız css dosyasına vs. hiç gerek yok...
    Style komutları işimizi görecektir, şöyle bir yol izliyoruz :) ;

    Bir tablomuz var diyelim... Bu tabloyu sağa,sola yukarıya doğru hizalayacağız ve bir mesafe bırakacağız. 
     
      [color=#CC0000]<div style="padding:10;">[/color] 
      <table width="308"> 
      <tr> 
      <td> 
      Tablo hizalandı... 
      </td> 
      </tr> 
      </table>[color=#CC0000]</div>[/color]

    Gördüğünüz gibi tablomuzun başına ve sonuna kırmızı ile gösterdiğimiz komutları getirdik.
    Böylece Tablomuz sayfa kenarlarına doğru hizalanmış oldu.
    Bunu aynı şekilde tablo içindeki ders 3 teki kutucuk içinde yapabilirsiniz. Tablo çerçevelerine göre rahat bir şekilde hizalayabilirsiniz :)



    [Örnek 3 - Tablo kullanmadan kutular yaratmak]
    Bunu özellikte forumdan biri için hazırladım... Tablo kullanmadan mükemmel kutular, kutucuklar yapabilirsiniz... Bu olayı anlatmakla birlikte kullanabileceğiniz bir kaç alternatifte vereceğim...

    İlk önce style.css'yi açıyoruz (Dreamweaver tavsiye ederim). Karşımızda bomboş bir sayfa var, biz buraya gerekli komutları kodları yazacağız ki işimiz görülsün :)
    Açtık dosyamızı ve aşağıdaki kodları olduğu gibi C/P yapıyoruz; 
     
      .kutu { 
       
      	background-color:#F4F4F4; 
      	border:1pt solid #CFCFCF; 
      	margin:4px 4px 4px 4px; 
      	padding:2px; 
      } 
      .kutubaslik { background-color:#CFCFCF; font-size:100%; font-weight:bold; COLOR: #ffffff; }


    Burada kutu için ;
    background-color : Kutucuğun arkaplan rengi,
    border : Kutucuğun çerçeve kalınlığı (karşısında yazanı "dashed" (çizgili), "dotted" noktalı ya da "solid" düz çizgi olarak ayarlayabilirsiniz),
    margin : Kutucuğun sağa sola yukarıya ve aşağıya olan mesafesi,
    padding : Mesafe/sağa sola hiza..

    kutubaslik için ;
    background-color : Başlığın arkaplan rengi,
    font-size : Başlığa yazılacak yazının font büyüklüğü,
    font-weight : Başlık yazısını kalın (bold) , italik (italic) gibi olmasını ayarlayabilirsiniz,
    color : Yazının rengi...



    [Örnek 3.1 - Şimdi sıra geldi bunu sayfada uygulamaya ...]
    Şimdi index.htm 'yi editörümüzde açıyoruz. Sayfada herhangi bir yere (ister tablo içinde kullanın (tavsiyemdir) ister kullanmayın) aynen aşağıdaki kodları ekliyoruz ; 

     
      <div class="kutu"><div class="kutubaslik">[color=#CC0000]MetaLiaZ[/color]</div> 
      [color=#CC0000]Bu DH üyelerine Özel bir CSS Kullanım Örneğidir.[/color] 
      </div>

    Önizleme;
    [Ders] Daha iyi tasarımlar için CSS ...




    [Örnek 3.2 - Kutumuzun başlığına resim ekleyelim..!! - Örneği indirmek için tıklayınız...!]
    Bir kutu yapmıştık 3. dersimizde... Şimdi bu kutumuzun başlığına resim ekleyelim ki şekil olsun görsellik açısından... Şimdi şöyle bir yol izleyeceğiz bunun için, style.css'mizi tekrar açıyoruz aynen aşağıdaki kodu C/P yapıyoruz; 

     
      .kutu { 
      	background-image:url([color=#CC0000]ornek.jpg[/color]); 
      	background-repeat: repeat-x; 
      	background-color:#F4F4F4; 
      	border:1pt solid #CFCFCF; 
      	margin:5px 5px 5px 5px; 
      	padding:5px; 
      } 
      .kutubaslik {  font-size:100%; font-weight:bold; COLOR: #000000; }

    ornek.jpg; istediğiniz herhangi bir resim olabilir, Kayıt edip çıkıyoruz... Ve index.htm'yi editörümüzle açıp 3.1 deki kodumuzu tekrar yapıştırıyoruz; 

     
      <div class="kutu"><div class="kutubaslik">[color=#CC0000]MetaLiaZ[/color]</div> 
      [color=#CC0000]Bu DH üyelerine Özel bir CSS Kullanım Örneğidir.[/color] 
      </div>

    Önizleme;
    [Ders] Daha iyi tasarımlar için CSS ...


    Bu dersimizde kullandığımız şimdiye kadarki işlediklerimizden farklı olan;
    background-repeat : Bu resmimizin nasıl ne kadar tekrarlamasını belirler, mesela repeat-x; (x yönünde) , repeat-y; (y yönünde) , no-repeat; (tekrar etme) gibi...

    Gördüğünüz gibi 1 tablo bile kullanmadan değeri tablodan daha yüksek bir kutu oluşturduk :))



    [Örnek 4 - Sayfanızın default (varsayılan) font'u, rengi vs...]
    Aşağıda vereceğim kodu yine style.css dosyanıza C/P yapmanız yeterli olacaktır... Açıklamayı kodun hemen altında yapacağım, 
     
      TD { 
      FONT-WEIGHT: normal; COLOR: #000000; FONT-SIZE: 70%; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; 
      }

    font-weight : Yukarıdaki derste de belirttiğim gibi yazının kalın (bold) , italik (italic) ya da normal (ne kalın ne italic ne de alt çizgili) gibi olmasını sağlayabilirsiniz,
    color : Yazının rengi...
    font-size : Font boyutu,
    font-family : Açıklamaya gerek var mı? :))



    [Örnek 5 - Güzel text'ler textarea'lar ve submit butonlar oluşturmak için ;]
    Çerçeve ve iç rengi ile oynayabileceğimiz, rengini boyutunu vs. değiştirebileceğimiz bir Style kodu örneği vericem bugün. Bunlar başlıkta belirttiğim gibi kutucuklarınızı dilediğiniz gibi şekillendirebilirsiniz(renk, boyut vs..).

    İlk olarak style.css dosyasımızı açıyoruz ve aşağıdaki kodu C/P yapıyoruz; 
     
      .metaliaz { font-family: Arial; font-size: 8pt; border: 2px dashed #c0c0c0; padding: 1; background-color: #F9F9F9 }


    Sonra index.htm'mizi açıyoruz ve aşağıdaki kodu yine C/P yapıyoruz ; 
     
      <input type="text" value="MetaLiaZ Text" class="metaliaz">  
      <font face="Tahoma"><span style="font-size: 8pt"><input type="text" class="metaliaz"></span></font><p> 
      <font face="Tahoma"> 
      <textarea class="metaliaz" rows="4" cols="37">MetaLiaZ TextArea</textarea><span style="font-size: 8pt"><textarea></textarea></span></font><p> 
      <font face="Tahoma"> 
      <input type="submit" value="MetaLiaZ Submit Buton" class="metaliaz"><span style="font-size: 8pt"><input  
      type="submit" class="metaliaz"></span></font>

    Ve sonuç (Önizleme);
    [Ders] Daha iyi tasarımlar için CSS ...



    [Örnek 6 - Resimli Başlıklar]
    Önizleme ;
    [Ders] Daha iyi tasarımlar için CSS ...

    Önizlemedeki gibi Kategori yanında bulunan, başlıkların önüne resim ekleyebilmek
    için aşağıdaki kodu style.css’e yapıştırıp, 
    .baslik { 
      background: #fff url(baslikdosya_metaliaz.jpg) no-repeat; 
      font-weight: bold; 
      padding-left:20px; 
      height:16px; 
      font-size:11px; 
      }

    Ve bunun başlık önünde görülebilmesi için ise index.htm de konu başlıklarını aşağıdaki kod içine almanız gerekmekte 
    <span class="baslik">Konu Başlığı MetaLiaZ</span>



    Tümü tarafımdan yazılmıştır ve hazırlanmıştır...
    Şimdilik benden bu kadar devamı gelecektir,
    Bir teşekkür yeter :)
    Saygılarımla



    < Bu mesaj bu kişi tarafından değiştirildi MetaLiaZ -- 13 Haziran 2008; 0:54:10 >







  • Teşekkürler. Tabiki az birşey javascript bilen birinin teşekkürü kod ile olacaktır: 

     
        <script type="text/javascript"> 
       
      var ders = 1; 
       
      var MetaLiaZ_css_anlatiyor = true; 
       
      while(MetaLiaZ_css_anlatiyor && ders<4){  
       
      alert("Ders: "+ders+" Bir teşekkür mesajı gönder.");   
       
      ders++; 
      } 
       
      if(ders==4) { alert("Çay molası verilecek!") ; MetaLiaZ_css_anlatiyor = false; } 
       
      </script>


    Bu kısmı takip edeceğim, haberin olsun.



    < Bu mesaj bu kişi tarafından değiştirildi sanal47 -- 10 Nisan 2007; 7:27:43 >
  • Güzel çalışma Eline sağlık. tasarımda bütünlük ve güzellik için bilinmesi gereken konulardan bir tanesi.
  • quote:

    Orjinalden alıntı: sanal47

    Bir teşekkür. Tabiki az birşey javascript bilen birinin teşekkürü kod ile olacaktır:

    <script type="text/javascript">
    while(MetaLiaZ css anlatırken){ alert("Bir teşekkür mesajı gönder."); }
    </script>

    Bu kısmı takip edeceğim, haberin olsun.


    Faydası oluyorsa ne mutlu bana arkadaşım, ben teşekkür ederim.
  • quote:

    Orjinalden alıntı: serkanyan

    Güzel çalışma Eline sağlık. tasarımda bütünlük ve güzellik için bilinmesi gereken konulardan bir tanesi.


    Teşekkür ederim.
    Gerçekten de öyle CSS şart oldu artık çoğu sayfa/siteler için.
    Resim vs.. kullanmak yerine CSS en iyisi ve avantajlarıda var sayfa yükleme süresi vs.. gibi
  • Ders 3'e Resimli kutu oluşturma ve resimler eklendi
  • Ders 3.2 le ilgili bir sorum olacak..

    Orada verdiğin kodu aşağıdaki gibi yazdım.Bunu 450px büyüklüğündeki bir table'ın içine c/p yaptım.Burada 2.sorunla karşılaştım.

    I.yukarıda örneğini verdiğin kutucuktan 3 tane birden çıktı
    II. Bu kodu yazmadan önce orada daha önce ders3 deki komutları yazıp deneme yapmıştım.Daha sonra style.css deki bu kodları silip ders3.2 deki kodları yapıştırıp , index.htm yi açtıgımda kutucukların ve yazıların birbirine yapıştıgını hatta üstüste çıktıgını gördüm

    kutu {
    background-image:url(http://img165.imageshack.us/img165/1397/div29we.png);
    background-repeat: repeat-x;
    background-color:#F4F4F4;
    border:1pt solid #CFCFCF;
    margin:5px 5px 5px 5px;
    padding:5px;
    }
    .kutubaslik { font-size:100%; font-weight:bold; COLOR: #000000; }


    bu 2 durumun ortaya çıkmasının sebepleri nedir acaba??

    teşekkürler




  • CSS anlatımına devam etmeni diliyoruz, gönülden teşekkürler.
  • quote:

    Orjinalden alıntı: OzgurOz

    Ders 3.2 le ilgili bir sorum olacak..

    Orada verdiğin kodu aşağıdaki gibi yazdım.Bunu 450px büyüklüğündeki bir table'ın içine c/p yaptım.Burada 2.sorunla karşılaştım.

    I.yukarıda örneğini verdiğin kutucuktan 3 tane birden çıktı
    II. Bu kodu yazmadan önce orada daha önce ders3 deki komutları yazıp deneme yapmıştım.Daha sonra style.css deki bu kodları silip ders3.2 deki kodları yapıştırıp , index.htm yi açtıgımda kutucukların ve yazıların birbirine yapıştıgını hatta üstüste çıktıgını gördüm

    kutu {
    background-image:url(http://img165.imageshack.us/img165/1397/div29we.png);
    background-repeat: repeat-x;
    background-color:#F4F4F4;
    border:1pt solid #CFCFCF;
    margin:5px 5px 5px 5px;
    padding:5px;
    }
    .kutubaslik { font-size:100%; font-weight:bold; COLOR: #000000; }


    bu 2 durumun ortaya çıkmasının sebepleri nedir acaba??

    teşekkürler




    Şimdi index.htm ile style.css arasında bağlantı kurdunuz,
    Ve style.css içindeki tüm kodları silin (deneme amaçlı)
    Sonra boş kalan sayfaya aynen şunları yapıştırın;

    Orada verdiğin kodu aşağıdaki gibi yazdım.Bunu 450px büyüklüğündeki bir table'ın içine c/p yaptım.Burada 2.sorunla karşılaştım.

    I.yukarıda örneğini verdiğin kutucuktan 3 tane birden çıktı
    II. Bu kodu yazmadan önce orada daha önce ders3 deki komutları yazıp deneme yapmıştım.Daha sonra style.css deki bu kodları silip ders3.2 deki kodları yapıştırıp , index.htm yi açtıgımda kutucukların ve yazıların birbirine yapıştıgını hatta üstüste çıktıgını gördüm

    kutu {
    background-image:url(http://img165.imageshack.us/img165/1397/div29we.png);
    background-repeat: repeat-x;
    background-color:#F4F4F4;
    border:1pt solid #CFCFCF;
    margin:5px 5px 5px 5px;
    padding:5px;
    }
    .kutubaslik { font-size:100%; font-weight:bold; COLOR: #000000; }

    En son olarak ta index.htm'yi bir editörle açıp css dosyamızda oluşturduğumuz kutuyu uygulamak kaldı & şu kodu da aynen index.htm 'ye yapıştırıyoruz;

    <div class="kutu" align="center"><div class="kutubaslik" align="center">MetaLiaZ
    Bu DH üyelerine Özel bir CSS Kullanım Örneğidir.</div>

    Bunları dediğim gibi yaparsanız sorunsuz çalışacaktır.

    Eğer aşağıdaki gibi yaparsanız bir çok kutucuk oluşturabilirsiniz index.htm'nizde;

    <div class="kutu" align="center"><div class="kutubaslik" align="center">MetaLiaZ
    Bu DH üyelerine Özel bir CSS Kullanım Örneğidir.</div>
    <div class="kutu" align="center"><div class="kutubaslik" align="center">MetaLiaZ
    Bu DH üyelerine Özel bir CSS Kullanım Örneğidir.</div>
    <div class="kutu" align="center"><div class="kutubaslik" align="center">MetaLiaZ
    Bu DH üyelerine Özel bir CSS Kullanım Örneğidir.</div>


    Style kutumuzu istediğiniz gibi değiştirebilir denemeler yapabilirsiniz...

    Saygılarımla




  • @OzgurOz
    Senin için üşenmedim sen ve diğer üyelerde yararlansın diye, hiç değilse bir faydasını görsün diye bir örnek hazırladım,
    Adres :http://rapidsharé.com/files/13452279/CSS_Ders_Anlat__305_m__305__MetaLiaZ_ders3_oernek.zip.html

    sharé > share olarak çeviriniz...
  • senden faydalı birşeyler görmek hoşuma gidiyor

    devam
  • nasıl olsa yasadışı bir şey yok bu adresi bir kerede kopyalanıp girilebilir halde yazmamızda sakınca yoktur.

    http://rapidshare.com/files/13452279/CSS_Ders_Anlat__305_m__305__MetaLiaZ_ders3_oernek.zip.html
  • Teşekkürler @snaqe & @MaviAteş :)

    Sansürsüz nasıl adres yazdınız anlayamadım, rica etsem yolunu PM olarak atar mısın MaviAteş
  • @metaliaz

    Öncelikle özel ilgine çok teşekkür ederim.
    çalıştığım işyeri rapidshare'i blokladıgı için verdiğin örneği inceleyemiyorum.Eve gidince hemen ona bakacağım..

    Ancak yukarıdaki sorunum halen devam ediyor..

    style.css dosyasını tamamen siliyorum. ve bahsettiğin 2.kodu buraya c/p yapıyorum. ve style.css dosyasını bu şekilde kaydetiyorum..Ancak bir türlü eski kodları sildiremedim.ilk yaptıgım kutucuk onun altında her daim gözüküyor..yazılar birbirine girmiş durumda , iyice odaklandım ama hata yaptıgım yeri de bir türlü kestiremiyorum..Herşeye en baştan başladım yine aynı şey oldu.

    sorun ne olabilir?
  • quote:

    Orjinalden alıntı: OzgurOz


    @metaliaz

    Öncelikle özel ilgine çok teşekkür ederim.
    çalıştığım işyeri ****'i blokladıgı için verdiğin örneği inceleyemiyorum.Eve gidince hemen ona bakacağım..

    Ancak yukarıdaki sorunum halen devam ediyor..

    style.css dosyasını tamamen siliyorum. ve bahsettiğin 2.kodu buraya c/p yapıyorum. ve style.css dosyasını bu şekilde kaydetiyorum..Ancak bir türlü eski kodları sildiremedim.ilk yaptıgım kutucuk onun altında her daim gözüküyor..yazılar birbirine girmiş durumda , iyice odaklandım ama hata yaptıgım yeri de bir türlü kestiremiyorum..Herşeye en baştan başladım yine aynı şey oldu.

    sorun ne olabilir?


    Hmmm... Tablo içinde denediniz aslında bir sorun olmaması lazım ama bir de şöyle deneyin,
    Style.css dosyasına 4. dersteki kodu da ekleyip öyle deneyin.
    Karışıklık default fonttan kaynaklanabilir.
    Haber bekliyorum




  • Yok hocam değişen birşey olmadı..

    Hatta herşeye baştan başladım..
    Sıfırdan bir style.css ve index.htm dosyası oluşturdum..Bu index'e hiç tablo koymadım.Daha sonra index.htm içine kopyalamam gereken kodları kopyaladım.style.css içine 3.2 drsdeki kodları kopyaladım..

    enteresan ama hala 3.dersdeki kodlar en altta çıkıyor.Bu yüzden tüm yazılar birbirine giriyor.3.dersdeki kodları nereden çekiyor merak ediyorum çünkü style.css dosyası sadece 1 tane var , onun içinde de 3.2 deki kodlar kopyalanmış durumda
  • En iyisi siz benim örnek olarak koyduğum dosyayı indirin bir inceleyin, çalıştırın...
    Eğer ki aynı sorun devam ediyorsa buraya yazın hata var diye.
    Haber bekliyorum
  • Ders 2.1 & 2.2 Eklenmiştir
  • eve gelir gelmez , örnek üzerinde çalışmaya başladım

    herhangi bir sorun yok hocam , şuan..İş yerimde dw yoktu , evde herseyi dw ile yapınca suan herhangi bir pürüzle karşılaşmadım..

    Gelelim yeni sorularıma (vakit ayırırsan sevinirim)

    Hocam 2 ye bölünmüş tablo düşün.table width=%50 ikisinin de
    bu iki tabloya css yardımı ile 2 kutucuk oluşturdum. ve içine resim ve yazılarla doldurdum.Ancak bazı kelimeler , kutucuktan tastı..Hoş bir görüntü değil tabi.Bunu nasıl çözebilirim
  • quote:


    Hocam 2 ye bölünmüş tablo düşün.table width=%50 ikisinin de
    bu iki tabloya css yardımı ile 2 kutucuk oluşturdum. ve içine resim ve yazılarla doldurdum.Ancak bazı kelimeler , kutucuktan tastı..Hoş bir görüntü değil tabi.Bunu nasıl çözebilirim


    Net bir şey diyebilmem için ScreenShot alır mısınız?
    Görmeden ne dersem yalan olur şimdi :)
    • 
Sayfa: 123
Sayfaya Git
Git
sonraki

Benzer içerikler

- x
Bildirim
mesajınız kopyalandı (ctrl+v) yapıştırmak istediğiniz yere yapıştırabilirsiniz.
Hizmet kalitesi için çerezleri kullanabiliriz. DH’ye girerek kullanım izni vermiş sayılırsınız.
Anladım Veri Politikamız