11 CSS Şablon Siteleri: Sıfırdan Başlamayın!

İlan

Web tasarımı her zamankinden daha erişilebilir, ancak yine de çok çalışmak gerekiyor - ve bol beceri Web Tasarım Öğrenmek İster misiniz? Başlamak için 7 YouTube KanalıYouTube'da web tasarımına yeni başlayanlar için binlerce video ve kanal bulunmaktadır. Burada başlamak için en iyi olanlardan bazılarına bakıyoruz. Daha fazla oku - profesyonel görünümlü sonuçlar üretmek.

Neyse ki, her seferinde sıfırdan başlamanıza gerek yok. Tümü modern tasarım trendlerini ve teknolojilerini kapsayan binlerce ücretsiz CSS şablonu bulunmaktadır. Bunları orijinal formlarında kullanabilir veya kendiniz yapmak için özelleştirebilirsiniz.

Bu kılavuzda, CSS şablonlarına ve bunları nerede bulacağınıza daha yakından bakacağız.

CSS Şablonu Nedir?

Bir CSS şablonu yalnızca CSS içermez: tam olarak çalışan bir web sitesi oluşturmak için ihtiyacınız olan her şeyi sağlar. 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 gereken örnek metin ve resimler içerir. Ayrıca, site açıklaması gibi şeylerle ilgili meta verileri de ayarlamanız gerekir.
  instagram viewer
• CSS dosyası - Genellikle sitenin tüm stilini içeren bir ana CSS dosyası ve sıfırlama stil sayfası gibi ekstralar veya web yazı tipleri için bir tane alırsınız.
• Javascript dosyası - Site Javascript işlevleri içeriyorsa, ideal olarak HTML belgelerine dahil olmak yerine kendi ayrı dosyalarına dahil edilmelidir.
• Resimler, yazı tipleri ve simgeler - Şablonda kullanılan tüm resimler de dahil edilmelidir. Simgeler ve arka planlar gibi şeyleri saklamak isteyebilirsiniz, ancak diğer yer tutucu resimleri kendi resimlerinizle değiştirmeniz gerekir. Bazı özel yazı tipleri de dahil edilebilir.

Karşılaşacağınız diğer birçok şablon türünün aksine - WordPress, Excel veya InDesign şablonları En İyi 7 Ücretsiz InDesign Şablonları Kitaplar, El İlanları, Dergiler ve Daha Fazlası İçin SitelerÜcretsiz InDesign şablonlarını bulmak zor olabilir. Hazırlanmış Adobe InDesign şablon web siteleri listemiz tüm tasarım ihtiyaçlarınızı karşılar. Daha fazla oku - CSS şablonları belirli miktarda teknik bilgi gerektirir.

Bunları düzenlemek için kolay bir arayüz yoktur, bu nedenle en azından bir HTML belgesinde sadece kendi içeriğinizi eklemek için yolunuzu nasıl bulacağınızı bilmeniz gerekir. Kendi özelleştirmelerinizi yapmak için bir iyi CSS bilgisi Bu Adım Adım Eğiticiler ile HTML ve CSS öğreninHTML, CSS ve JavaScript'i mi merak ediyorsunuz? Web sitelerini sıfırdan nasıl oluşturacağınızı öğrenmek için bir ustalığınız olduğunu düşünüyorsanız - burada denemeye değer birkaç harika adım adım öğretici var. Daha fazla oku .

Bir CSS Şablonunda Neler Arar

Aralarından seçim yapabileceğiniz çok sayıda ücretsiz CSS şablonu var. Peki hangisinin sizin için doğru olduğunu nereden biliyorsunuz? İşte dikkat etmeniz gereken birkaç nokta:

• tasarlamak - Açıkçası, güzel görünen ve tasvir etmek istediğiniz görüntüyü yansıtan bir site istiyorsunuz. Ancak, şablonun hem şimdi hem de gelecekte ihtiyaçlarınız için doğru olup olmadığını düşünün. 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 kullanarak daha iyi olup olamayacağınızı düşünün.
• Mobil İç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ı önemlidir. İyi bir CSS şablonu, sitenin herhangi bir boyutta ekranda mükemmel çalışması için duyarlı tasarım kullanmalıdır. Seçtiğiniz kişi bunu yapmazsa, buna geçin.
• İyi yazılmış - Şablonu indirin ve kullanmaya başlamadan önce koda bakın. Temiz, iyi yapılandırılmış ve kolay düzenlenebilir olmalıdır. Ayrıca başlık ve başlık etiketlerinin doğru kullanımı ile SEO farkında 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 Creative Commons ve Ticari Olmayan Kullanım Nedir?Creative Commons nedir? "Ticari olmayan kullanım" ne anlama geliyor? Creative Commons lisansları ve bunların nasıl çalıştığı hakkında bilgi edinin. Daha fazla oku , 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.
• Eklentileri - Bazı CSS şablon geliştiricileri çalışmalarını “freemium” esasına göre sunar. Şablonu ücretsiz olarak alırsınız, ancak sitenize özgü hale getirmek için ek özelleştirmeler için ödeme seçeneğiniz vardır.

Açıklanan her şeyle, ücretsiz CSS şablonlarını bulmak için en iyi yerlere bakalım.

800'den fazla CSS şablonunun bu çarpıcı koleksiyonu, her web sitesi sınıfı için stiller içerir. Hepsi özellikle site için oluşturulduğundan, başka bir yerde toplandıklarını görmemelisiniz.

Tüm şablonlar duyarlı ve HTML5 ile oluşturulmuştur. Video ışık kutusu veya kaydırma efektleri gibi ekstra Javascript özellikleri ile küçük ve hafiftirler, yalnızca deneyime gerçek değer kattıkları yerlerde kullanılırlar.

Styleshout, Creative Commons lisansı altında yayınlanan çok çeşitli ücretsiz ve premium şablonlar sunar.

Ücretsiz şablonlar, tam web sitelerinden Çok Yakında sayfalara ve hatta çoğu zaman gözden kaçanlara kadar çok çeşitli kategorileri kapsar 404 hata sayfası Harika bir 404 Hatası Sayfası ve 10 Örnekler Nasıl YapılırAkıllıca tasarlanmış bir 404 hata sayfası sıkıcı bir web sitesi ile unutulmaz bir web sitesi arasındaki fark olabilir. Daha fazla oku . Onları kendiniz özelleştirebilir ve mevcut sitenizin stiline uyarlayabilir veya Styleshout'un bunu sizin için yapmasını sağlayabilirsiniz.

Bu süper şık şablon koleksiyonu da süper popüler. Çoğu yüz binlerce kez indirildi ve nedenini görmek kolay.

Blog ve ürün sayfası gibi her zamanki site kategorileri için yiyecek ve içecek sağlamakta ve fotoğrafçıların çalışmalarını sergilemeleri için özellikle hoş tasarımlar bulunmaktadır. Temel ızgara tarzı şablonlar son derece özelleştirilebilirken, daha gösterişli olanlar Javascript'i oldukça yoğun bir şekilde kullanma eğilimindedir, bu nedenle ayarlarınıza daha az uygun olabilir.

Freebiesbug'un kalite açısından telafi etmekten daha fazla bir miktarı yoktur. Genç geliştiricilerin becerilerini sergilediği bir site, birçok üst düzey, premium tasarım içerir.

Sitenin etkileyici ücretsiz şablon koleksiyonu ajanslar, fotoğrafçılar, uygulama geliştiricileri ve diğer reklam öğeleri için mükemmeldir. Javascript ve CSS efektleri ve animasyonları ile paketlenmiş olarak, siteleri genellikle istemediğiniz kadar güzel olsa da özelleştirebilirsiniz.

Buna ek olarak, Freebiesbug.com yazı tipleri, stok fotoğrafları, web tasarımcıları için her türlü ücretsiz kaynağı içerir. Illustrator çizimleri Adobe Illustrator için Ödeme Yapmayın: Bu Ücretsiz Alternatif HarikaAdobe Illustrator harika, ancak Creative Cloud aboneliği nedeniyle oldukça pahalı. Bu web uygulaması alternatifi neredeyse iyi ve hiçbir maliyeti yok! Daha fazla oku ve PSD dosyaları ve daha fazlası.

Free-CSS.com, aradığınızı bulamadığınız takdirde, 2503 ücretsiz şablonun yanı sıra birçok premium şablon da sunan, fırfırsız bir web sitesidir.

Aralarından seçim yapabileceğiniz çok fazla kişi ile mükemmel tasarıma yerleşmek biraz zor olabilir. Sitenin 10 yıllık varlığı hala XHTML'de yazılmış şablonlara ev sahipliği yaptığı anlamına gelir, ancak kalite genellikle iyidir. Bunlardan kaçınmak isteyeceksiniz. Başka bir şey, seçtiğiniz şablon için lisansı kontrol ettiğinizden emin olmaktır. Hepsi ücretsiz, ancak bazıları kamuya açık, bazıları Creative Commons ve bazıları da yazarlara özel lisans kullanıyor.

Çoğunlukla modern, ızgara tabanlı düzenleri tek bir sayfada kullanan 28 sayfa ücretsiz CSS şablonu. Eğer peşinde olduğunuz basitse, o zaman burası bakılacak yer. Tasarımlar temiz, çekici ve özelleştirmesi kolaydır.

OS-Templates.com ayrıca geniş bir “temel şablonlar” koleksiyonu sunar. Bunlar, tamamen popüler olmadan çeşitli popüler düzen şemalarında (iki sütun, üç sütun vb.) Bir web sitesi için temel yapı sağlar. WordPress'te varsayılan temayı kullanmak gibi, boş tuval de sitenizi istediğiniz herhangi bir şeye dönüştürmenizi sağlar.

7. boag.online [Artık mevcut değil]

Maglev olabilecek tek bir sayfa web sitesi şablonu boag.online'da eylemin önizlemesi.

Ürün sayfası için ideal, hızlı ve temiz bir şablon. Minimalist tasarım, bölümler arasında kaydırma yapmanıza yardımcı olmak için yalnızca birkaç Jquery efekti ile artırılır. Basit düzen kendi başına çalışır, ancak kendi özelleştirmeleriniz için harika bir başlangıç ​​noktası sağlar.

Pixel Buddha’nın şablonları yalnızca web siteleriyle sınırlı kalmaz, e-posta bültenleri için de içerir.

Her iki durumda da, hepsi HTML5 ve CSS3 ile tasarlanmıştır ve duyarlı olduklarından herhangi bir cihazda harika görünürler. Öne çıkan özellikler arasında güzel bir HTML portföy / özgeçmiş şablonu İhtiyacınız Olacak Son 5 Özgeçmiş Oluşturma Uygulaması ve SitesiCV'nizi kalabalığın içinde öne çıkarmanız gerektiğinde bu muhteşem özgeçmiş oluşturma siteleri ve uygulamaları kullanın. Doğru araçlarla, tasarım becerileri olmadan bile hızlı bir şekilde benzersiz bir özgeçmiş oluşturabilirsiniz. Daha fazla oku ve HTML ve CSS'nin üstünde kaynak PSD dosyalarını içeren harika görünümlü bir e-ticaret sayfası olan SOHO HTML.

Templatemo'dan yaklaşık 500 ücretsiz şablon mevcuttur. En iyilerinden bazıları Bootstrap tarzı ızgara sisteminden farklı bir şey denemek için kırılanlardır.

Şablonların çoğu basit ve karmaşıktır, ancak ışık kutuları ve içerik karuselleri gibi özellikler ihtiyaç duyuldukları yerde bulunur. Ayrıca, şablonlardan birkaçının varsayılan olarak altı sayfaya kadar çalışacak şekilde ayarlanmasını seviyoruz. Bu, içeriğiniz giderek yaygınlaşan tek sayfalık düzene uymuyorsa kolaylaştırır.

Bootstrap, hiçbir zaman yüksek kaliteli web siteleri oluşturmanızı sağlayan inanılmaz derecede popüler bir ön uç çerçevesidir. Ancak, Start Bootstrap'ın devreye girdiği yer öğrenmek biraz zaman alır.

Bu ücretsiz, açık kaynak şablonları koleksiyonu kullanılarak Bootstrap’ın şebeke sistemi Web Arayüzleri Oluşturma: Nereden BaşlamalıWeb arayüzlerinin nasıl bozulduğunu göstereceğiz, ardından kendinizi 21. yüzyıl web tasarımcısı yapmak için gereken temel kavramları, araçları ve yapı taşlarını göstereceğiz. Daha fazla oku . Seçim için 30'dan fazla var. Bazıları tamamen tasarlanmış ve uygulamalar, bloglar ve açılış sayfaları için tasarlanmıştır, diğerleri ise stil oluşturmanızı bekleyen boş düzenlerdir.

Sonunda, biraz daha pratik bir şey. Bootswatch, Bootstrap kullanılarak oluşturulan stil sitelerine 16 açık kaynaklı tema sunuyor.

Bootstrap kullanarak sitenizin düzenini kendiniz oluşturabilir veya Bootstrap'i Başlat'tan boş şablonlardan birini indirebilirsiniz. Bootswatch'ın yaptığı, yazı tiplerini, arka plan renklerini ve düğmeler, menüler ve diğer öğelerin stilini değiştirmektir. Bootstrap’ın ultra temiz ahlakına sadık kalarak sitenize benzersiz bir görünüm kazandırır.

Bootstrap ile temel bir web sitesini bir araya getirmek kolaydır ve Bootswatch ona anında bir cila verir.

CSS Şablonları Nasıl Kullanılır

Genel olarak, şablon kullanmanın iki yolu vardır. Onları olduğu gibi kullanır veya kendi tasarımınızın temeli olarak kullanırsınız.

Şablonları kullanırken tehlike, 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 özdeş site olabilir. Onları özelleştirme lehine ana argüman budur.

CSS şablonları, temel bir düzeni düşünen ve doğrudan şekillendirmeye atlamak 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'de yolunuzu biliyorsanız, ancak henüz bir site oluşturmak için güveniniz veya bilginiz yoksa sıfırdan sonra bir CSS şablonu hem harika görünümlü bir site elde etmenin kolay bir yolu hem de harika bir öğrenme işlevi görür aracı.

Bunu devam eden bir çalışma olarak ele alabilirsiniz. Başla yazı tiplerini değiştirme Ücretsiz Fontları Çevrimiçi 8 En İyi Ücretsiz Font Web SiteleriHerkes lisanslı yazı tipini karşılayamaz. Bu web siteleri, bir sonraki projeniz için mükemmel ücretsiz yazı tipini bulmanıza yardımcı olacaktır. Daha fazla oku ve renk düzenini değiştirme Pro gibi bir renk düzeni nasıl seçilirRenkler aldatıcı. Birlikte iyi görünen bir avuç renk seçmek yeterince kolay görünebilir, ancak saatlerce ince ayar yapan herhangi bir tasarımcının size söyleyeceği gibi: zor. Daha fazla oku zaman içinde mevcut öğeleri yeniden tasarlayabilir, yenilerini ekleyebilir vb. Hiçbir şeyi öğrenmenin pratik, uygulamalı deneyimden daha iyi bir yolu yoktur.

Web siteleri oluştururken CSS şablonlarını kullanıyor musunuz? Onları bulmak için en sevdiğiniz yerler hangileri? Yorumlarınızda deneyimlerinizi ve ipuçlarınızı bizimle paylaşın.