11 CSS veidņu vietnes: nesāciet no nulles!

11 CSS veidņu vietnes: nesāciet no nulles!

Tīmekļa dizains ir pieejamāks nekā jebkad agrāk, taču tas joprojām prasa daudz darba - un daudz prasmju -, lai iegūtu profesionāla izskata rezultātus.





Par laimi, jums katru reizi nav jāsāk no nulles. Tiešsaistē ir pieejami tūkstošiem bezmaksas CSS veidņu, kas ietver mūsdienu dizaina tendences un tehnoloģijas. Varat tos izmantot sākotnējā formā vai pielāgot, lai tie būtu savi.





Šajā rokasgrāmatā mēs sīkāk apskatīsim CSS veidnes un to, kur tās atrast.





Kas ir CSS veidne?

CSS veidne ne tikai satur CSS: tā sniedz visu nepieciešamo, lai izveidotu pilnībā funkcionējošu vietni. Lejupielādējot, parasti tiek parādīta mape, kurā ir šāda informācija:

  • HTML faili - Jūs saņemsiet HTML failu katrai vietnes lapai. Tajā būs teksta paraugs un attēli, kas jums būs jāaizstāj ar savu saturu. Jums arī jāspēj pielāgot metadatus, kas saistīti ar tādām lietām kā vietnes apraksts.
  • CSS fails - Jūs parasti saņemat vienu galveno CSS failu, kas satur visu vietnes stilu, kā arī visas papildu iespējas, piemēram, atiestatīšanas stila lapu, vai vienu tīmekļa fontiem.
  • Javascript fails - Ja vietne satur Javascript funkcijas, tās ideālā gadījumā būtu jāiekļauj atsevišķā failā, nevis jāiekļauj HTML dokumentos.
  • Attēli, fonti un ikonas - Jāiekļauj arī visi veidnē izmantotie attēli. Iespējams, vēlēsities paturēt tādas lietas kā ikonas un foni, bet citi viettura attēli būs jāaizstāj ar savējiem. Var būt iekļauti arī daži pielāgoti fonti.

Atšķirībā no vairuma cita veida veidņu, ar kurām jūs sastapsities - vai tas būtu Wordpress, Excel vai InDesign veidnes - CSS veidnēm ir vajadzīgas noteiktas tehniskās zināšanas.



Nav draudzīga interfeisa, lai tos rediģētu, tāpēc jums būs jāzina vismaz, kā orientēties HTML dokumentā, lai pievienotu savu saturu. Lai veiktu pielāgojumus, jums ir nepieciešamas pienācīgas zināšanas par CSS.

kā apvienot divus Facebook kontus

Ko meklēt CSS veidnē

Ir tik daudz bezmaksas CSS veidņu, no kurām izvēlēties. Tātad, kā jūs zināt, kas jums ir piemērots? Šeit jāņem vērā dažas lietas:





  • Dizains - Acīmredzot jūs vēlaties vietni, kas izskatās jauki un atspoguļo jebkuru attēlu, kuru vēlaties attēlot. Bet arī apsveriet, vai veidne ir piemērota jūsu vajadzībām gan tagad, gan nākotnē. Daudzi ir paredzēti vienas lapas vietnēm; daži ir paredzēti vairākām lapām. Ja jums ir nepieciešams pēdējais, apsveriet, vai jums labāk būtu izmantot tādu CMS kā Wordpress.
  • Optimizēta mobilajām ierīcēm - Mobilā tīmekļa izmantošana tagad ir lielāka nekā galddatorā, tāpēc ir svarīgi, lai jūsu vietne viedtālruņos darbotos pareizi. Jebkurai pienācīgai CSS veidnei jāizmanto adaptīvs dizains, lai vietne perfekti darbotos jebkura izmēra ekrānā. Ja jūsu izvēlētais to nedara, pārslēdzieties uz tādu, kas to dara.
  • Labi uzrakstīts - Lejupielādējiet veidni un apskatiet kodu, pirms apņematies to izmantot. Tam jābūt tīram, labi strukturētam un viegli rediģējamam. Tam vajadzētu būt informētam arī par SEO, pareizi izmantojot virsraksta un virsraksta tagus.
  • Licence - Noteikti pārbaudiet izvēlētās CSS veidnes licenci. Daudzi ir pieejami saskaņā ar Creative Commons licenci , bet dažādas šīs licences versijas nosaka, vai varat rediģēt veidni, vai varat to izmantot komerciāli un vai jums ir jāpieskaita sākotnējais dizainers.
  • Papildinājumi - Daži CSS veidņu izstrādātāji piedāvā savu darbu uz “freemium” pamata. Jūs saņemat veidni bez maksas, taču jums ir iespēja maksāt par papildu pielāgojumiem, lai padarītu to unikālu jūsu vietnei.

Ar visu to paskaidrojot, apskatīsim labākās vietas, kur atrast bezmaksas CSS veidnes.

1. Templated.co

Šī satriecošā vairāk nekā 800 CSS veidņu kolekcija satur katras vietnes klases stilus. Tie visi ir izveidoti īpaši vietnei, tāpēc jums nevajadzētu redzēt, ka tie parādās citur.





Visas veidnes ir atsaucīgas un veidotas, izmantojot HTML5. Tie ir mazi un viegli, un tiem ir papildu Javascript funkcijas, piemēram, video gaismas kaste vai ritināšanas efekti, un tie tiek izmantoti tikai tur, kur tie rada reālu vērtību.

2. Styleshout.com

Styleshout piedāvā plašu bezmaksas un premium veidņu klāstu, iepriekšējais tika izdots saskaņā ar Creative Commons licenci.

Bezmaksas veidnes aptver plašu kategoriju klāstu, sākot no pilnām vietnēm un beidzot ar drīzumā esošām lapām, un pat bieži nepamanīto 404 kļūdu lapu. Jūs varat tos pielāgot pats un pielāgot savas esošās vietnes stilam, vai arī maksāt, lai Styleshout to izdarītu jūsu vietā.

3. HTML5Up.net

Šī īpaši stilīgā veidņu kolekcija ir arī ļoti populāra. Lielākā daļa ir lejupielādēti simtiem tūkstošu reižu, un ir viegli saprast, kāpēc.

Tiek nodrošinātas visas parastās vietņu kategorijas, piemēram, emuārs un produktu lapa, un fotogrāfiem ir īpaši jauki dizaini, lai parādītu savu darbu. Pamata režģa stila veidnes ir ļoti pielāgojamas, savukārt zibatmiņainākās mēdz diezgan stipri izmantot Javascript, tāpēc tās var būt mazāk piemērotas jūsu pielāgojumiem.

Četri. Freebiesbug.com

Tas, kam Freebiesbug trūkst kvantitātes, tas vairāk nekā kompensē kvalitāti. Vietne, kurā jaunie izstrādātāji demonstrē savas prasmes, tajā ir iekļauti daudzi augstākās klases, augstākās klases dizaini.

Vietnes iespaidīgā bezmaksas veidņu kolekcija ir lieliski piemērota aģentūrām, fotogrāfiem, lietotņu izstrādātājiem un citām reklāmām. Pildīti ar Javascript un CSS efektiem un animācijām, jūs varat pielāgot vietnes, lai gan tās bieži ir tik jaukas, ka jūs to nevēlaties.

Turklāt Freebiesbug.com ietver visu veidu bezmaksas resursus tīmekļa dizaineriem, ieskaitot fontus, krājuma fotoattēlus, Illustrator skices un PSD failus un daudz ko citu.

5. Free-CSS.com

Free-CSS.com ir vienkārša vietne, kas rakstīšanas laikā piedāvā aptuveni 2503 bezmaksas veidnes, kā arī daudz premium veidņu, ja joprojām nevarat atrast meklēto.

Tā kā ir tik daudz, no kuriem izvēlēties, var būt nedaudz grūti izlemt par perfektu dizainu. Kvalitāte parasti ir laba, lai gan vietnes 10 gadu pastāvēšana nozīmē, ka tajā joprojām tiek glabātas XHTML rakstītas veidnes. Jūs vēlaties no tiem izvairīties. Otra lieta ir pārliecināties, vai esat pārbaudījis izvēlētās veidnes licenci. Tie visi ir bez maksas, bet daži ir publiski pieejami, daži Creative Commons, un daži izmanto autora licenci.

6. OS-Templates.com

28 lappuses bezmaksas CSS veidnes, galvenokārt izmantojot modernus, uz režģa balstītus izkārtojumus vienā lapā. Ja jūs meklējat vienkāršu, tad šī ir vieta, kur meklēt. Dizains ir tīrs, pievilcīgs un viegli pielāgojams.

OS-Templates.com piedāvā arī lielu “pamata veidņu” kolekciju. Tie sniedz jums vietnes pamatstruktūru dažādās populārās izkārtojuma shēmās (divu kolonnu, trīs kolonnu utt.), Vienlaikus būdami pilnīgi nestilīgi. Tāpat kā WordPress noklusējuma motīva izmantošana, tukšais audekls ļauj pārvērst savu vietni par visu, ko vēlaties.

7. boag.online [vairs nav pieejams]

Maglev ir vienas lapas lapas veidne, kas var būt priekšskatīts darbībā vietnē boag.online .

Tā ir ātra, tīra veidne, kas ideāli piemērota produkta lapai. Minimālisma dizainu papildina tikai daži Jquery efekti, lai palīdzētu ritināt starp sadaļām. Vienkāršais izkārtojums darbojas pats par sevi, taču tas ir arī lielisks sākumpunkts jūsu pielāgojumiem.

8. Pikseļu Buda

Pixel Buddha veidnes neaprobežojas tikai ar vietnēm, tās ietver arī e -pasta biļetenus.

Jebkurā gadījumā tie visi ir izstrādāti, izmantojot HTML5 un CSS3, un tie ir atsaucīgi, tāpēc lieliski izskatās jebkurā ierīcē. Svarīgākie notikumi ietver sveicienu HTML, skaistu portfeļa/atsākšanas veidni un SOHO HTML - satriecoša izskata e -komercijas lapu, kas ietver avota PSD failus virs HTML un CSS.

mbr vai gpt otrajam ssd

9. Templatemo.com

Vietnē Templatemo ir pieejamas gandrīz 500 bezmaksas veidnes. Daži no labākajiem ir tie, kas atbrīvojas no Bootstrap stila režģa sistēmas, lai izmēģinātu kaut ko citu.

Lielākā daļa veidņu ir vienkāršas un nepārblīvētas, lai gan tādas funkcijas kā gaismas kastes un satura karuseļi ir iekļautas tur, kur tās ir vajadzīgas. Mums patīk arī tas, ka vairākas veidnes pēc noklusējuma ir iestatītas darbam ar pat sešām lapām. Tas atvieglo, ja jūsu saturs neatbilst arvien populārākajam vienas lapas izkārtojumam.

10. Startbootstrap.com

Bootstrap ir neticami populāra priekšgala sistēma, kas ļauj ātri izveidot augstas kvalitātes vietnes. Tomēr tas aizņem mazliet laika, lai iemācītos, un tas ir, ja sākas Bootstrap.

Šī bezmaksas atvērtā pirmkoda veidņu kolekcija ir veidota, izmantojot Bootstrap režģa sistēmu. Ir vairāk nekā 30, no kuriem izvēlēties. Daži no tiem ir pilnībā izstrādāti un paredzēti lietotnēm, emuāriem un galvenajām lapām, bet citi ir tukši izkārtojumi, kas gaida, kad jūs izveidosit stilu.

vienpadsmit. Bootswatch.com

Visbeidzot, kaut kas vairāk praktisks. Bootswatch piedāvā 16 atvērtā koda tēmas stila vietnēm, kas veidotas, izmantojot Bootstrap.

Jūs varat izveidot vietnes izkārtojumu pats, izmantojot Bootstrap, vai lejupielādēt vienu no tukšajām veidnēm no Start Bootstrap. Bootswatch maina fontu, fona krāsas un pogu, izvēlņu un citu elementu stilu. Tas piešķir jūsu vietnei unikālu izskatu, vienlaikus saglabājot uzticību Bootstrap īpaši tīrajai ētikai.

Izmantojot Bootstrap, ir viegli apvienot pamata vietni, un Bootswatch tai piešķir tūlītēju laku.

Kā izmantot CSS veidnes

Vispārīgi runājot, ir divi veidņu izmantošanas veidi. Jūs tos vai nu izmantojat tādus, kādi tie ir, vai arī izmantojat tos sava dizaina pamatā.

Izmantojot veidnes, pastāv briesmas, ka jūs galu galā iegūstat vietni, kas ir identiska kāda cita vietnei. Izvēlieties populāru veidni, un burtiski varētu būt desmitiem tūkstošu identisku vietņu. Šis ir galvenais arguments par labu to pielāgošanai.

norunājiet tikšanos ābolu veikalā

CSS veidnes ir lielisks īsceļš pieredzējušiem tīmekļa dizaineriem, kuriem ir padomā pamata izkārtojums un kuri vēlas uzreiz sākt veidot to.

Tie ir lieliski piemēroti arī ikvienam, kurš vēl nav iepazinies ar tīmekļa dizainu. Ja jūs pārzināt HTML un CSS, bet vēl neesat pārliecināti vai zinoši, lai izveidotu vietni no nulles, tad CSS veidne kalpo gan kā vienkāršs veids, kā iegūt izcilu vietni, gan kā lielisks mācību līdzeklis.

Jūs to varat uzskatīt par nepabeigtu darbu. Sāciet ar fontu izslēgšana un mainot krāsu shēmu , un laika gaitā jūs varat pārveidot esošos elementus, pievienot jaunus utt. Nav labāka veida, kā kaut ko iemācīties kā ar praktisku, praktisku pieredzi.

Vai, veidojot vietnes, izmantojat CSS veidnes? Kādas ir jūsu iecienītākās vietas, kur tās atrast? Kopīgojiet savu pieredzi un padomus ar mums komentāros.

Kopīgot Kopīgot Čivināt E -pasts Kā tīrīt Windows datoru, izmantojot komandu uzvedni

Ja jūsu Windows datorā ir maz vietas krātuvē, iztīriet nevēlamos atkritumus, izmantojot šīs ātrās komandrindas utilītas.

Lasīt Tālāk
Saistītās tēmas
  • Programmēšana
  • Web dizains
  • CSS
Par autoru Endijs Betss(Publicēts 221 raksts)

Endijs ir bijušais drukas žurnālists un žurnālu redaktors, kurš 15 gadus raksta par tehnoloģijām. Šajā laikā viņš ir devis ieguldījumu neskaitāmās publikācijās un sagatavojis teksta teksta rakstīšanas darbus lieliem tehnoloģiju uzņēmumiem. Viņš ir sniedzis arī ekspertu komentārus plašsaziņas līdzekļiem un vadījis paneļus nozares pasākumos.

Vairāk no Endija Betsa

Abonējiet mūsu biļetenu

Pievienojieties mūsu informatīvajam izdevumam, lai iegūtu tehniskus padomus, pārskatus, bezmaksas e -grāmatas un ekskluzīvus piedāvājumus!

Noklikšķiniet šeit, lai abonētu