Home-theater-designers
Web tasarımı her zamankinden daha erişilebilir, ancak profesyonel görünümlü sonuçlar üretmek için hala çok çalışmak ve çok fazla beceri gerekiyor.
Neyse ki, her seferinde sıfırdan başlamanıza gerek yok. Hepsi modern tasarım trendlerini ve teknolojilerini kucaklayan, çevrimiçi olarak sunulan binlerce ücretsiz CSS şablonu vardır. Bunları orijinal formlarında kullanabilir veya kendinize ait hale getirmek için özelleştirebilirsiniz.
Bu kılavuzda CSS şablonlarına ve bunların nerede bulunacağına daha yakından bakacağız.
CSS Şablonu Nedir?
Bir CSS şablonu yalnızca CSS içermez: size tam olarak işleyen bir web sitesi oluşturmak için ihtiyacınız olan her şeyi verir. Birini indirdiğinizde, genellikle aşağıdakileri içeren bir klasör alırsınız:
- HTML dosyaları -- Web sitesinin her sayfası için bir HTML dosyası alacaksınız. Kendi içeriğinizle değiştirmeniz gerekecek örnek metin ve resimler içerecektir. Ayrıca site açıklaması gibi şeylerle ilgili meta verileri de ayarlayabilmeniz gerekir.
- CSS dosyası -- Genellikle sitenin tüm stilini ve ayrıca sıfırlama stil sayfası veya web yazı tipleri için bir tane gibi ekstraları içeren bir ana CSS dosyası alırsınız.
- Javascript dosyası -- Site Javascript işlevleri içeriyorsa, ideal olarak HTML belgelerine dahil edilmek yerine kendi ayrı dosyalarına dahil edilmelidirler.
- Resimler, yazı tipleri ve simgeler -- Şablonda kullanılan tüm görseller de dahil edilmelidir. Simgeler ve arka planlar gibi şeyleri saklamak isteyebilirsiniz, ancak diğer yer tutucu resimleri kendi resimlerinizle değiştirmeniz gerekecektir. Bazı özel yazı tipleri de dahil edilebilir.
Karşılaşacağınız diğer şablon türlerinin çoğundan farklı olarak - Wordpress, Excel veya InDesign şablonları -- CSS şablonları belirli bir miktarda teknik bilgi gerektirir.
Bunları düzenlemek için kolay bir arayüz yoktur, bu nedenle en azından kendi içeriğinizi eklemek için bir HTML belgesinde yolunuzu nasıl bulacağınızı bilmeniz gerekir. Kendi özelleştirmelerinizi yapmak için iyi bir CSS bilgisine ihtiyacınız olacak.
telefon bilgisayar tarafından tanınmıyor
Bir CSS Şablonunda Nelere Bakmalı?
Aralarından seçim yapabileceğiniz çok sayıda ücretsiz CSS şablonu var. Peki hangisinin sizin için doğru olduğunu nasıl bileceksiniz? İşte dikkat etmeniz gereken birkaç şey:
- Tasarım -- Açıkçası, güzel görünen ve canlandırmak istediğiniz görüntüyü yansıtan bir site istiyorsunuz. Ancak şablonun hem şimdiki hem de gelecekteki ihtiyaçlarınız için doğru olup olmadığını da göz önünde bulundurun. Birçoğu tek sayfalık web siteleri içindir; bazıları birden çok sayfa için tasarlanmıştır. İkincisine ihtiyacınız varsa, bunun yerine Wordpress gibi bir CMS kullanmanın daha iyi olup olmayacağını düşünün.
- Mobil için Optimize Edilmiş -- Mobil web kullanımı artık masaüstünden daha yüksek, bu nedenle sitenizin akıllı telefonlarda düzgün çalışması çok önemli. Herhangi bir uygun CSS şablonu, sitenin herhangi bir boyuttaki ekranda mükemmel şekilde çalışması için duyarlı tasarım kullanmalıdır. Seçtiğiniz çalışmıyorsa, yapana geçin.
- İyi yazılmış -- Şablonu indirin ve kullanmaya karar vermeden önce koda bir göz atın. Temiz, iyi yapılandırılmış ve düzenlenmesi kolay olmalıdır. Ayrıca başlık ve başlık etiketlerinin doğru kullanımı ile SEO konusunda bilinçli olmalıdır.
- Lisans -- Seçtiğiniz CSS şablonunun lisansını kontrol ettiğinizden emin olun. birçoğu mevcut Creative Commons lisansı altında , ancak bu lisansın farklı sürümleri, şablonu düzenleyip düzenleyemeyeceğinizi, ticari olarak kullanıp kullanamayacağınızı ve orijinal tasarımcıya kredi vermeniz gerekip gerekmediğini belirler.
- Eklentiler -- Bazı CSS şablon geliştiricileri, çalışmalarını 'ücretsiz' olarak sunar. Şablonu ücretsiz olarak alırsınız, ancak sitenize özgü hale getirmek için ek özelleştirmeler için ödeme yapma seçeneğiniz vardır.
Tüm bunları açıkladıktan sonra, ücretsiz CSS şablonları bulmak için en iyi yerlere bir göz atalım.
1. Templated.com
800'den fazla CSS şablonundan oluşan bu çarpıcı koleksiyon, her web sitesi sınıfı için stiller içerir. Hepsi özellikle site için yaratıldı, bu yüzden başka hiçbir yerde kırpılmalarını görmemelisiniz.
Tüm şablonlar duyarlıdır ve HTML5 ile oluşturulmuştur. Video ışık kutusu veya kaydırma efektleri gibi ek Javascript özellikleriyle küçük ve hafiftirler ve yalnızca deneyime gerçek değer kattıkları yerlerde kullanılırlar.
2. Styleshout.com
Styleshout, birincisi Creative Commons lisansı altında yayınlanan çok çeşitli ücretsiz ve premium şablonlar sunar.
Ücretsiz şablonlar, tam web sitelerinden Çok Yakında sayfalarına ve hatta genellikle gözden kaçan 404 hata sayfasına kadar çok çeşitli kategorileri kapsar. Bunları kendiniz özelleştirebilir ve mevcut sitenizin stiline uyarlayabilirsiniz ya da Styleshout'un sizin için yapmasını sağlamak için ödeme yapabilirsiniz.
3. HTML5Up.net
Bu süper şık şablon koleksiyonu da çok popüler. Çoğu yüz binlerce kez indirildi ve nedenini görmek kolay.
Blog ve ürün sayfası gibi tüm olağan site kategorileri için yiyecek ve içecek sağlanır ve fotoğrafçıların çalışmalarını sergilemeleri için özellikle güzel tasarımlar vardır. Temel ızgara stili şablonlar son derece özelleştirilebilirken, daha gösterişli olanlar Javascript'i oldukça yoğun bir şekilde kullanma eğilimindedir, bu nedenle tweaks için daha az uygun olabilir.
Dört. freebiesbug.com
Freebiesbug'un nicelikten yoksun olduğu şey, nitelik olarak telafi etmekten çok daha fazlası. Genç geliştiricilerin becerilerini sergiledikleri bir site, birçok üst düzey, birinci sınıf tasarım içeriyor.
Sitenin etkileyici ücretsiz şablon koleksiyonu ajanslar, fotoğrafçılar, uygulama geliştiriciler ve diğer reklam öğeleri için mükemmeldir. Javascript ve CSS efektleri ve animasyonlarıyla dolu, siteleri özelleştirebilirsiniz, ancak çoğu zaman o kadar güzeller ki istemeyebilirsiniz.
Ayrıca Freebiesbug.com, yazı tipleri, stok fotoğrafları, Illustrator çizimleri ve PSD dosyaları ve daha fazlası dahil olmak üzere web tasarımcıları için her türlü ücretsiz kaynağı içerir.
5. Ücretsiz-CSS.com
Free-CSS.com, aradığınızı hala bulamamanız durumunda, 2503 civarında ücretsiz şablon ve ayrıca bol miktarda premium şablon sunan sade bir web sitesidir.
Aralarından seçim yapabileceğiniz pek çok şey olduğundan, mükemmel tasarıma karar vermek biraz zor olabilir. Sitenin 10 yıllık varlığı, hala XHTML ile yazılmış şablonları barındırdığı anlamına gelse de, kalite genellikle iyidir. Bunlardan kaçınmak isteyeceksiniz. Diğer şey, seçtiğiniz şablonun lisansını kontrol ettiğinizden emin olmaktır. Hepsi ücretsizdir, ancak bazıları kamu malıdır, bazıları Creative Commons'tır ve bazıları yazara özel bir lisans kullanır.
6. OS-Templates.com
Çoğunlukla tek bir sayfada modern, ızgara tabanlı düzenler kullanan 28 sayfa ücretsiz CSS şablonu. Peşinde olduğunuz şey basitse, bakmanız gereken yer burasıdır. Tasarımlar temiz, çekici ve özelleştirilmesi kolaydır.
OS-Templates.com ayrıca geniş bir 'temel şablonlar' koleksiyonu sunar. Bunlar, tamamen stilsiz olmakla birlikte, çeşitli popüler düzen şemalarında (iki sütunlu, üç sütunlu, vb.) bir web sitesi için temel yapıyı verir. Wordpress'teki varsayılan temayı kullanmak gibi, boş tuval sitenizi istediğiniz herhangi bir şeye dönüştürmenizi sağlar.
7. boag.online [Artık mevcut değil]
Maglev, tek sayfalık bir web sitesi şablonu olabilir. boag.online'da eylem halinde önizlendi .
Bir ürün sayfası için ideal, hızlı, temiz bir şablondur. Minimalist tasarım, bölümler arasında gezinmenize yardımcı olmak için yalnızca birkaç Jquery efektiyle güçlendirilir. Basit düzen kendi başına çalışır, ancak aynı zamanda kendi özelleştirmeleriniz için harika bir başlangıç noktası sağlar.
8. Piksel Buda
Pixel Buddha'nın şablonları yalnızca web siteleriyle sınırlı değildir, e-posta bültenleri için de bazılarını içerir.
Her iki durumda da hepsi HTML5 ve CSS3 ile tasarlanmıştır ve duyarlıdır, bu nedenle herhangi bir cihazda harika görünürler. Öne çıkan özellikler arasında, güzel bir portföy/özgeçmiş şablonu olan Howdy HTML ve HTML ve CSS'nin üzerinde kaynak PSD dosyalarını içeren harika görünümlü bir e-ticaret sayfası olan SOHO HTML yer alır.
evimin tarihini nasıl öğrenirim
9. Templatemo.com
Templatemo'da yaklaşık 500 ücretsiz şablon mevcuttur. En iyilerinden bazıları, farklı bir şey denemek için Bootstrap tarzı ızgara sisteminden kurtulanlardır.
Şablonların çoğu basit ve düzenlidir, ancak ışık kutuları ve içerik karuselleri gibi özellikler ihtiyaç duyulan yerlere dahil edilmiştir. Ayrıca, birkaç şablonun varsayılan olarak altı sayfaya kadar çalışacak şekilde ayarlanmış olmasını da seviyoruz. Bu, içeriğiniz giderek yaygınlaşan tek sayfa düzenine uymuyorsa işinizi kolaylaştırır.
10. Startbootstrap.com
Bootstrap, hiç vakit kaybetmeden yüksek kaliteli web siteleri oluşturmanıza olanak tanıyan, inanılmaz derecede popüler bir ön uç çerçevedir. Ancak, Start Bootstrap'in devreye girdiği yer olan öğrenmesi biraz zaman alır.
Bu ücretsiz, açık kaynak şablon koleksiyonunun tamamı Bootstrap'in ızgara sistemi kullanılarak oluşturulmuştur. Aralarından seçim yapabileceğiniz 30'dan fazla var. Bazıları tamamen tasarlanmış ve uygulamalar, bloglar ve açılış sayfaları için tasarlanmıştır, diğerleri ise stil vermenizi bekleyen boş düzenlerdir.
on bir. Bootswatch.com
Son olarak, biraz daha uygulamalı bir şey. Bootswatch, Bootstrap kullanılarak oluşturulan sitelere stil vermek için 16 açık kaynak teması sunar.
Bootstrap kullanarak sitenizin düzenini kendiniz oluşturabilir veya Bootstrap Başlat'tan boş şablonlardan birini indirebilirsiniz. Bootswatch'ın yaptığı, yazı tiplerini, arka plan renklerini ve düğmelerin, menülerin ve diğer öğelerin stilini değiştirmektir. Bootstrap'in ultra temiz değerlerine sadık kalırken sitenize benzersiz bir görünüm kazandırır.
Bootstrap ile basit bir web sitesini bir araya getirmek kolaydır ve Bootswatch onu anında cilalar.
CSS Şablonları Nasıl Kullanılır
Genel olarak konuşursak, şablonları kullanmanın iki yolu vardır. Bunları ya olduğu gibi kullanırsınız ya da kendi tasarımınızın temeli olarak kullanırsınız.
Şablonları kullanmanın tehlikesi, bir başkasınınkiyle aynı olan bir web sitesine sahip olmanızdır. Popüler bir şablon seçin ve kelimenin tam anlamıyla on binlerce aynı site olabilir. Bu onları özelleştirme lehine ana argümandır.
ücretsiz müzik indirmek için en iyi yer
CSS şablonları, aklında temel bir düzen olan ve doğrudan onu şekillendirmeye başlamak isteyen deneyimli web tasarımcıları için harika bir kısayoldur.
Ayrıca web tasarımında yeni olan herkes için mükemmeldir. HTML ve CSS ile ilgili yolunuzu biliyorsanız ancak henüz sıfırdan bir site oluşturacak özgüvene veya bilgiye sahip değilseniz, o zaman bir CSS şablonu hem harika görünen bir site elde etmenin kolay bir yolu hem de harika bir öğrenme aracı olarak hizmet eder.
Devam eden bir çalışma olarak değerlendirebilirsiniz. Şuna göre başla: yazı tiplerini değiştirme ve renk düzenini değiştirme ve zamanla mevcut öğeleri yeniden tasarlayabilir, yenilerini ekleyebilir vb. Pratik, uygulamalı deneyim yoluyla bir şey öğrenmenin daha iyi bir yolu yoktur.
Web siteleri oluştururken CSS şablonları kullanıyor musunuz? Onları bulmak için en sevdiğin yerler hangileri? Deneyimlerinizi ve ipuçlarını yorumlarda bizimle paylaşın.
Paylaş Paylaş Cıvıldamak E-posta Komut İstemini Kullanarak Windows Bilgisayarınızı Nasıl TemizlersinizWindows PC'nizin depolama alanı azalıyorsa, bu hızlı Komut İstemi yardımcı programlarını kullanarak gereksiz dosyaları temizleyin.
Sonrakini Oku İlgili konular- Programlama
- Web Tasarım
- CSS
Andy, 15 yıldır teknoloji hakkında yazan eski bir basılı gazeteci ve dergi editörüdür. Bu süre zarfında sayısız yayına katkıda bulundu ve büyük teknoloji şirketleri için metin yazarlığı çalışmaları yaptı. Ayrıca medya için uzman yorumu sağladı ve endüstri etkinliklerinde panellere ev sahipliği yaptı.
Andy Betts'dan Daha FazlaHaber bültenimize abone ol
Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!
Abone olmak için buraya tıklayın