11 Tapak Templat CSS: Jangan Mulakan Dari Awal!

11 Tapak Templat CSS: Jangan Mulakan Dari Awal!

Reka bentuk web lebih mudah diakses daripada sebelumnya, tetapi masih memerlukan banyak kerja - dan banyak kemahiran - untuk menghasilkan hasil yang kelihatan profesional.





Nasib baik, anda tidak perlu bermula dari awal setiap masa. Terdapat ribuan templat CSS percuma yang tersedia dalam talian, semuanya merangkumi trend dan teknologi reka bentuk moden. Anda boleh menggunakannya dalam bentuk asal, atau menyesuaikannya untuk menjadikannya milik anda sendiri.





Dalam panduan ini, kami akan melihat lebih dekat templat CSS dan tempat mencarinya.





Apa itu Templat CSS?

Templat CSS tidak hanya mengandungi CSS: ia memberikan semua yang anda perlukan untuk membuat laman web yang berfungsi sepenuhnya. Apabila anda memuat turunnya, biasanya anda akan mendapat folder yang mengandungi yang berikut:

  • Fail HTML - Anda akan mendapat fail HTML untuk setiap halaman laman web. Ia akan mengandungi contoh teks dan gambar yang perlu anda ganti dengan kandungan anda sendiri. Anda juga mesti dapat menyesuaikan data meta, yang berkaitan dengan perkara seperti perihalan laman web.
  • Fail CSS - Anda biasanya mendapat satu fail CSS utama yang berisi semua gaya untuk laman web ini, ditambah dengan tambahan seperti helaian gaya tetapan semula, atau satu untuk fon web.
  • Fail Javascript - Sekiranya laman web ini mengandungi fungsi Javascript, mereka sebaiknya dimasukkan ke dalam fail berasingan mereka, dan bukan dimasukkan ke dalam dokumen HTML.
  • Imej, fon, dan ikon - Sebarang gambar yang digunakan dalam templat juga harus disertakan. Anda mungkin mahu menyimpan perkara seperti ikon dan latar belakang, tetapi perlu mengganti gambar placeholder yang lain dengan gambar anda sendiri. Beberapa fon khusus juga boleh disertakan.

Tidak seperti kebanyakan jenis templat lain yang akan anda temui - sama ada Wordpress, Excel, atau Templat InDesign - Templat CSS memang memerlukan sejumlah pengetahuan teknikal.



Tidak ada antara muka yang mesra untuk mengeditnya, jadi anda harus tahu sekurang-kurangnya cara mencari dokumen HTML hanya untuk menambahkan kandungan anda sendiri. Untuk membuat penyesuaian anda sendiri, anda memerlukan pengetahuan yang baik mengenai CSS.

cara mengatur onenote untuk kerja

Apa yang perlu dicari dalam Templat CSS

Terdapat begitu banyak templat CSS percuma untuk dipilih. Jadi bagaimana anda tahu mana yang sesuai untuk anda? Berikut adalah beberapa perkara yang perlu diperhatikan:





  • Reka bentuk - Jelas sekali, anda mahukan laman web yang kelihatan bagus dan mencerminkan apa sahaja gambar yang anda ingin gambarkan. Tetapi pertimbangkan juga apakah templat itu sesuai untuk keperluan anda sekarang dan di masa hadapan. Banyak untuk laman web satu halaman; ada yang direka untuk berbilang halaman. Sekiranya anda memerlukan yang terakhir, pertimbangkan sama ada anda lebih baik menggunakan CMS seperti Wordpress sebagai gantinya.
  • Dioptimumkan untuk Mudah Alih - Penggunaan web mudah alih sekarang lebih tinggi daripada desktop, jadi penting agar laman web anda berfungsi dengan baik pada telefon pintar. Mana-mana templat CSS yang baik harus menggunakan reka bentuk responsif supaya laman web ini berfungsi dengan sempurna pada skrin bersaiz apa pun. Sekiranya yang anda pilih tidak, beralih ke yang sesuai.
  • Bertulis Baik - Muat turun templat dan lihat kodnya sebelum anda berkomitmen untuk menggunakannya. Ia harus bersih, tersusun dengan baik, dan mudah diedit. Ia juga harus sedar SEO, dengan penggunaan tajuk dan tajuk tajuk yang betul.
  • Lesen - Pastikan untuk memeriksa lesen untuk templat CSS pilihan anda. Banyak yang ada di bawah lesen Creative Commons , tetapi versi berlainan lesen ini menentukan sama ada anda boleh mengedit templat, sama ada anda boleh menggunakannya secara komersial, dan sama ada anda perlu memberi kredit kepada pereka asal.
  • Tambahan - Beberapa pembangun templat CSS menawarkan karya mereka secara 'freemium'. Anda mendapat templat secara percuma, tetapi mempunyai pilihan untuk membayar penyesuaian tambahan untuk menjadikannya unik untuk laman web anda.

Dengan semua yang dijelaskan, mari kita lihat tempat terbaik untuk mencari templat CSS percuma.

1. Templated.co

Koleksi lebih dari 800 templat CSS yang menakjubkan ini mengandungi gaya untuk setiap kelas laman web. Semuanya dibuat khas untuk laman web ini, jadi anda seharusnya tidak melihatnya muncul di tempat lain.





Semua templat responsif, dan dibina dengan HTML5. Mereka kecil dan ringan, dengan ciri Javascript tambahan, seperti kotak cahaya video atau kesan tatal, hanya digunakan di mana ia menambah nilai sebenar pengalaman.

2. Styleshout.com

Styleshout menawarkan pelbagai templat percuma dan premium, yang pertama dilancarkan di bawah lesen Creative Commons.

Templat percuma merangkumi pelbagai kategori, dari laman web penuh hingga halaman Coming Soon, dan bahkan halaman kesalahan 404 yang sering diabaikan. Anda boleh menyesuaikannya sendiri dan menyesuaikannya dengan gaya laman web anda yang ada, atau anda boleh membayar untuk mendapatkan Styleshout untuk melakukannya untuk anda.

3. HTML5Up.net

Koleksi templat yang sangat bergaya ini juga sangat popular. Sebilangan besar telah dimuat turun beratus-ratus ribu kali, dan mudah untuk mengetahui sebabnya.

Semua kategori laman web biasa disediakan, seperti halaman blog dan produk, dan terdapat beberapa reka bentuk yang sangat bagus untuk jurugambar untuk memamerkan karya mereka. Templat gaya grid asas sangat disesuaikan, sementara yang lebih terang cenderung menggunakan Javascript agak berat sehingga mungkin kurang sesuai dengan tweak anda.

Empat. Freebiesbug.com

Apa yang kekurangan Freebiesbug dalam kuantiti lebih dari sekadar membuat kualiti. Laman web di mana pemaju muda mempamerkan kemahiran mereka, ia merangkumi banyak reka bentuk premium mewah.

Koleksi templat percuma di laman web ini sangat sesuai untuk agensi, jurugambar, pembangun aplikasi, dan kreatif lain. Dikemas dengan kesan dan animasi Javascript dan CSS, anda boleh menyesuaikan laman web, walaupun selalunya sangat bagus sehingga anda mungkin tidak mahu.

Di samping itu, Freebiesbug.com merangkumi semua jenis sumber percuma untuk pereka web, termasuk fon, gambar stok, lakaran Illustrator dan fail JPA, dan banyak lagi.

5. Percuma-CSS.com

Free-CSS.com adalah tawaran laman web tanpa embel-embel - pada masa penulisan - kira-kira 2503 templat percuma, ditambah banyak yang premium juga, sekiranya anda masih tidak dapat mencari apa yang anda cari.

Dengan begitu banyak yang boleh dipilih, agak sukar untuk mendapatkan reka bentuk yang sempurna. Kualitinya umumnya baik, walaupun keberadaan 10 tahun laman web ini bermaksud masih ada templat yang ditulis dalam XHTML. Anda pasti mahu mengelakkan perkara ini. Perkara lain adalah memastikan anda memeriksa lesen untuk templat pilihan anda. Semuanya percuma, tetapi ada yang domain awam, beberapa Creative Commons, dan ada yang menggunakan lesen khusus pengarang.

6. OS-Templates.com

28 halaman templat CSS percuma, kebanyakannya menggunakan susun atur berasaskan grid moden pada satu halaman. Sekiranya sederhana adalah apa yang anda harapkan, maka ini adalah tempat yang sesuai untuk dicari. Reka bentuknya bersih, menarik, dan mudah disesuaikan.

OS-Templates.com juga menawarkan koleksi besar 'templat asas'. Ini memberi anda struktur asas untuk laman web dalam pelbagai skema susun atur yang popular (dua lajur, tiga lajur, dan lain-lain), sementara tidak bergaya sepenuhnya. Seperti menggunakan tema lalai di Wordpress, kanvas kosong membolehkan anda mengubah laman web anda menjadi apa sahaja yang anda mahukan.

7. boag.online [Tidak lagi tersedia]

Maglev adalah templat laman web satu halaman yang boleh dipratonton dalam tindakan di boag.online .

Ini adalah templat yang cepat dan bersih, sesuai untuk halaman produk. Reka bentuk minimalis hanya ditambah dengan beberapa kesan Jquery untuk membantu anda menatal di antara bahagian. Susun atur yang ringkas berfungsi dengan sendirinya, tetapi ia juga menjadi titik permulaan yang baik untuk penyesuaian anda sendiri.

8. Pixel Buddha

Templat Pixel Buddha tidak hanya terhad pada laman web, tetapi juga merangkumi beberapa buletin e-mel.

Walau apa pun, semuanya direka dengan HTML5 dan CSS3, dan responsif sehingga kelihatan hebat di mana-mana peranti. Sorotan merangkumi HTML Howdy, templat portfolio / resume yang indah, dan SOHO HTML, halaman eCommerce yang hebat yang merangkumi sumber fail JPA di atas HTML dan CSS.

bagaimana mencari kamera tersembunyi di rumah anda

9. Templatemo.com

Hampir 500 templat percuma boleh didapati dari Templatemo. Sebilangan yang terbaik adalah yang melepaskan diri dari sistem grid gaya Bootstrap untuk mencuba sesuatu yang berbeza.

Sebilangan besar templatnya sederhana dan tidak rapi, walaupun ciri seperti kotak cahaya dan karusel kandungan disertakan di tempat yang diperlukan. Kami juga menyukai kenyataan bahawa beberapa templat disediakan untuk berfungsi dengan sebanyak enam halaman secara lalai. Ini menjadikannya lebih mudah jika kandungan anda tidak sesuai dengan susun atur satu halaman yang semakin biasa.

10. Startbootstrap.com

Bootstrap adalah rangka depan yang sangat popular yang membolehkan anda membina laman web berkualiti tinggi dalam masa yang sama sekali. Namun, memerlukan sedikit masa untuk belajar, di situlah Start Bootstrap masuk.

Koleksi templat sumber terbuka percuma ini semua dibina menggunakan sistem grid Bootstrap. Terdapat lebih daripada 30 untuk dipilih. Sebilangannya dirancang sepenuhnya, dan ditujukan untuk aplikasi, blog, dan halaman arahan, sementara yang lain adalah susun atur kosong yang menanti anda untuk menata gaya.

sebelas. Bootswatch.com

Akhirnya, sesuatu yang sedikit lebih berkesan. Bootswatch menawarkan 16 tema sumber terbuka ke laman gaya yang dibina menggunakan Bootstrap.

Anda boleh membina susun atur laman web anda sendiri menggunakan Bootstrap, atau memuat turun salah satu templat kosong dari Start Bootstrap. Apa yang dilakukan oleh Bootswatch ialah menukar fon, warna latar, dan gaya untuk butang, menu, dan elemen lain. Ini memberikan laman web anda keunikan sambil tetap mematuhi etika ultra-bersih Bootstrap.

Sangat mudah untuk menggabungkan laman web asas dengan Bootstrap, dan Bootswatch memberikannya penggayaan segera.

Cara Menggunakan Templat CSS

Secara umum, terdapat dua cara untuk menggunakan templat. Anda boleh menggunakannya sebagaimana adanya atau anda menggunakannya sebagai asas untuk reka bentuk anda sendiri.

Bahaya ketika menggunakan templat adalah anda menggunakan laman web yang serupa dengan laman web orang lain. Pilih templat yang popular dan mungkin terdapat puluhan ribu laman web yang serupa. Ini adalah hujah utama untuk menyesuaikannya.

bagaimana menukar kata laluan anda pada xbox satu

Templat CSS adalah jalan pintas yang bagus untuk pereka web berpengalaman yang mempunyai susun atur asas dan ingin langsung menggayakannya.

Mereka juga sesuai untuk sesiapa sahaja yang baru dalam reka bentuk web. Sekiranya anda mengetahui cara HTML dan CSS tetapi belum mempunyai keyakinan atau pengetahuan untuk membina laman web dari awal, templat CSS berfungsi sebagai cara mudah untuk mendapatkan laman web yang menarik, dan alat pembelajaran yang hebat.

Anda boleh menganggapnya sebagai kerja yang sedang dijalankan. Mulakan dengan menukar fon dan menukar skema warna , dan lama-kelamaan anda dapat merancang semula elemen yang ada, menambah yang baru, dan sebagainya. Tidak ada cara yang lebih baik untuk belajar apa-apa selain melalui pengalaman praktikal dan praktikal.

Adakah anda menggunakan templat CSS semasa membina laman web? Apakah tempat kegemaran anda untuk mencarinya? Kongsi pengalaman dan petua anda dengan kami dalam komen.

Berkongsi Berkongsi Tweet E-mel Cara Membersihkan PC Windows Anda Menggunakan Prompt Perintah

Sekiranya ruang komputer Windows anda hampir habis, bersihkan sampah menggunakan utiliti Prompt Perintah pantas ini.

Baca Seterusnya
Topik-topik yang berkaitan
  • Pengaturcaraan
  • Reka Bentuk Web
  • CSS
Mengenai Pengarang Andy Betts(221 Artikel Diterbitkan)

Andy adalah bekas wartawan cetak dan editor majalah yang telah menulis mengenai teknologi selama 15 tahun. Pada masa itu, dia telah menyumbang banyak penerbitan dan menghasilkan karya tulis untuk syarikat teknologi besar. Dia juga telah memberikan komen pakar untuk media dan menjadi tuan rumah panel di acara industri.

Lebih Banyak Dari Andy Betts

Langgan buletin kami

Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!

Klik di sini untuk melanggan