css kompressor'u nasıl kullanabiliriz.?

merhaba

yakın bir zamanda css veya html'i sıkıştırabilip daha kullanışlı hale getirebildiğimizi öğrendim. css compressor sitesini buldum sitenin kodlarının tümünü kopyala yapıştır yaptım ve sıkıştırılmış olan kodu drw'da esas kodu silip yerine yapıştırdım. fakat bulamadığım bir hatayla bu çalışmamakta. bu sıkıştırmayı siteye nasıl ekleyebilirim. yardımcı olabilirmisiniz? saygılar.

Merhaba hiç bilmiyordum ama sayende öğrendim. Css compressor alt alta olan css kodlarını yanyana yazarak sıkıştırıyor ve çok azda olsa css kodlarında değişiklik yapıyor. Yani

h1 {
font-weight:bold;
font-size:1.5em;
margin-bottom:0;
margin-top:1px; }

Böyle değilde

h1{font-weight:700;font-size:1.5em;margin-bottom:0;margin-top:1px}

böyle sıkıştırıyor. Bold u 700 e çeviriyor. 0.5 i .5 e çeviriyor gibi.

Normal css kodlarını nasıl ekliyorsan bunları da öyle ekleyebilirsin.

Ve sadece css dosyalarını sıkıştırıyor html kodlarını sıkıştırmıyor.

Sıkışmamış CSS Kodu

   body {
                font-family: arial, sans-serif;
                font-size: 0.8em;
                height:100%;
            }
            body * {
                font-size: 100%;
            }
            h1 { 
                font-weight:bold;
                font-size:1.5em;
                margin-bottom:0;
                margin-top:1px; }
            
            h2 { 
                font-weight:bold;
                font-size:1.2em;
                margin-bottom:0; 
                color:#707070;
                margin-top:1px; }

            h3 { 
                font-weight:bold;
                font-size:1.2em;
                margin-bottom:0; 
                color:#000;
                margin-top:1px; }
                
            td, th {
                font-family: arial, sans-serif;
                font-size: 0.9em;
            }            
            
            .header {
                font-weight: bold;
                font-size: 1.1em;
            }
            
            p.sml { 
                font-size:0.8em;
                margin-top:0; 
            }
            
            .data {
                border-collapse:collapse;
                border:1px solid #b0b0b0;
                margin-top:3px;
                width:100%;
                padding:5em;
            }

            .data td {
                border-bottom:1px solid #b0b0b0;
                text-align:left;
                padding:3px;
            }
            
            .sortup {
                background-position: right center;
                background-image: url(http://www.google.com/webmasters/sitemaps/images/sortup.gif);
                background-repeat: no-repeat;
                font-style:italic;
                white-space:pre; }
                
            .sortdown {
                background-position: right center;
                background-image: url(http://www.google.com/webmasters/sitemaps/images/sortdown.gif);
                background-repeat: no-repeat;
                font-style:italic;
                white-space:pre; }
            
            table.copyright {
                width:100%;
                border-top:1px solid #ddad08;
                margin-top:1em;
                text-align:center;
                padding-top:1em;
                vertical-align:top; }
                
            .copyright {
                color: #6F6F6F;
                font-size: 0.8em;
            }

Sıkıştırılmış Css Kodu

body{font-family:arial, sans-serif;font-size:.8em;height:100%}
body *{font-size:100%}
h1{font-weight:700;font-size:1.5em;margin-bottom:0;margin-top:1px}
h2{font-weight:700;font-size:1.2em;margin-bottom:0;color:#707070;margin-top:1px}
h3{font-weight:700;font-size:1.2em;margin-bottom:0;color:#000;margin-top:1px}
td,th{font-family:arial, sans-serif;font-size:.9em}
.header{font-weight:700;font-size:1.1em}
p.sml{font-size:.8em;margin-top:0}
.data{border-collapse:collapse;border:1px solid #b0b0b0;margin-top:3px;width:100%;padding:5em}
.data td{border-bottom:1px solid #b0b0b0;text-align:left;padding:3px}
.sortup{background-position:right center;background-image:url(http://www.google.com/webmasters/sitemaps/images/sortup.gif);background-repeat:no-repeat;font-style:italic;white-space:pre}
.sortdown{background-position:right center;background-image:url(http://www.google.com/webmasters/sitemaps/images/sortdown.gif);background-repeat:no-repeat;font-style:italic;white-space:pre}
table.copyright{width:100%;border-top:1px solid #ddad08;margin-top:1em;text-align:center;padding-top:1em;vertical-align:top}
.copyright{color:#6F6F6F;font-size:.8em}

Toplamda 438 byte sıkıştırılmış.

Uğraşma kompresörle getir bana bende kompresörle aynı kodu yazıyorum , şaka bi yana çok büyük çapta trafikli bir siten yoksa bunu yapman elle tutulur, gözle görülür bir fark sağlamayacaktır.

Katılıyorum araştırırken bu kadarmıymış dedim. Büyük birşey bekliyordum sıkıştırdığı da bişey yok Css'i iyice öğrendiğinde zaten yanyana yazarsın alt alta değil ki alta alta yazmanda çok devasa boyutlara çıkarmaz Css dosyanı.

hakılısınız, teşekkürler bir de şunu ekliyim soruma; bu sitemi www.bercabambu.com drw cs4 ile css i hazır yaptığı şekliyle yaptım. bildiğim kadarıyla css daha avantajlı olması gerekir. ama bundan önce bol grafik ve tabloyla yaptığımdan daha biraz daha yavaş açılıyor. özellikle grafikler gözle görülür derecede daha uzun zamanda yükleniyor. bunda ben bir yerde yanlışmı yapıyorum sizce?

Önemli olan css/xhtml kodlama yapmak değil.Önemli olan doğru kodlama yapmak.Normalde eski tekniklerde bazı resimler bir bütün olarak alınırdı ve boyutu büyük olurdu.Şimdi o resimleri parçalara ayırarak tekrarlatıp kullanma olanağı sayesinde sayfa boyutu düşüyor.Ayrıca her aynı tip yazı için farklı kod yazmaktansa tek bir kod ile tüm bu aynı tip yazılara müdehale edildiği için burdanda sayfa boyut avantajı doğuyor.

Örneğin,
http://www.bercabambu.com/image/anasayfa_gorsel4.png

şu resmi tek parça koymuşsunuz, css kullanara kbunu 3 parça şeklinde yerleştirebilirsiniz bilginiz yetiyorsa zamanınız varsa 5 6 parçada yerleştirebilirsiniz.Böylece o 75kblık resim 10kb gibi bir boyuta belki daha aza düşücektir. gibi gibi.

Resmin biri 400 kb biri 450 kb normaldir yavaş açılması. Muhtemel neden Fw veya Ps ile birleştirme yaptıysan resimleri direk Ctrl+S ile kaydetmiş olmandır buda normal olarak layer lı kaydettiği için yüksek boyutta olmuştur. Şu resimleri koyarsan sorun çözülmüş olacaktır.

41 KB

41 KB

Aynı yöntemi diğer resimler içinde uygulaman gerekmektedir. Fw yada Ps ile açarak resimleri export ederek kayıt edebilir bu şekilde boyutlarını düşürebilirisin.

yardımınız için çok teşekkür ederim. iyi çalışmalar

Resimleri photoshop'da yapıyorsanız resimleri parçalara bölerek kaydetme esnasında web sayfası olarak kaydedebilir ve kaydediğiniz yerde oluşan html dosyasından kodları kopyalayıp dreamweaver'da kullanabilirsiniz. Arkadaşlarında dediği gibi resimler parça parça olacağından yüklenme hızı daha yüksek olacaktır.

Bu arada compressor'u kullanmanızı tavsiye etmem. Çünkü css kodları o kadar karışık hal alıyor ki, değişiklik yapmak istediğinizde hiçbirşey bulamıyorsunuz.