11 Mga Site ng Template ng CSS: Huwag Magsimula Mula sa Scratch!

Ang disenyo ng web ay mas madaling ma-access kaysa dati, ngunit kailangan pa rin ng maraming trabaho - at maraming kasanayan - upang makabuo ng mga resulta ng pagtingin sa propesyonal.

Sa kasamaang palad, hindi mo kailangang magsimula sa simula bawat oras. Mayroong libu-libong libreng mga template ng CSS na magagamit online, lahat ay tumatanggap ng mga modernong disenyo at teknolohiya. Maaari mong gamitin ang mga ito sa kanilang orihinal na form, o ipasadya ang mga ito upang gawin ang iyong sarili.

Sa gabay na ito susuriin namin nang mas malapit ang mga template ng CSS, at kung saan ito mahahanap.

Ano ang isang CSS Template?

Ang isang template ng CSS ay hindi lamang naglalaman ng CSS: binibigyan ka nito ng lahat ng kailangan mo upang lumikha ng isang ganap na gumaganang website. Kapag nag-download ka ng isa, karaniwang makakakuha ka ng isang folder na naglalaman ng mga sumusunod:

Mga HTML file - Makakakuha ka ng isang HTML file para sa bawat pahina ng website. Maglalaman ito ng sample na teksto at mga imahe na kakailanganin mong palitan ng iyong sariling nilalaman. Kakailanganin mo ring ayusin ang data ng meta, na nauugnay sa mga bagay tulad ng paglalarawan ng site.
CSS file - Karaniwan kang nakakakuha ng isang pangunahing CSS file na naglalaman ng lahat ng estilo para sa site, kasama ang anumang mga extra tulad ng isang reset ng styleheet, o isa para sa mga web font.
Javascript file - Kung ang site ay naglalaman ng mga pag-andar ng Javascript dapat nilang ideyal na maisama sa kanilang sariling magkakahiwalay na file, sa halip na isama sa mga HTML doc.
Mga imahe, font, at icon - Ang anumang mga imaheng ginamit sa template ay dapat ding isama. Maaaring gusto mong panatilihin ang mga bagay tulad ng mga icon at background, ngunit kakailanganin mong palitan ang ibang mga imahe ng placeholder ng iyong sarili. Ang ilang mga pasadyang font ay maaari ding maisama.

Hindi tulad ng karamihan sa iba pang mga uri ng template na makakaharap mo - maging sa Wordpress, Excel, o Mga template ng InDesign - Ang mga template ng CSS ay nangangailangan ng isang tiyak na halaga ng kaalamang panteknikal.

Walang madaling gamitin na interface upang mai-edit ang mga ito, kaya kakailanganin mong malaman kahit papaano makahanap ng iyong paraan sa paligid ng isang HTML na dokumento upang maidagdag lamang ang iyong sariling nilalaman. Upang makagawa ng iyong sariling mga pagpapasadya kakailanganin mo ng disenteng kaalaman sa CSS.

binabawasan ang laki ng isang jpg

Ano ang Hahanapin sa isang CSS Template

Maraming mga libreng template ng CSS upang mapagpipilian. Kaya paano mo malalaman kung alin ang tama para sa iyo? Narito ang ilang mga bagay na dapat abangan:

Disenyo - Malinaw na, nais mo ang isang site na mukhang maganda at sumasalamin ng anumang imahe na nais mong ilarawan. Ngunit isaalang-alang din kung ang template ay tama para sa iyong mga pangangailangan pareho ngayon at sa hinaharap. Marami ang para sa mga pahina ng isang pahina; ang ilan ay dinisenyo para sa maraming mga pahina. Kung kailangan mo ng huli, isaalang-alang kung maaari kang mas mahusay sa paggamit ng isang CMS tulad ng Wordpress sa halip.
Na-optimize sa Mobile - Ang paggamit ng mobile web ay mas mataas na ngayon kaysa sa desktop, kaya mahalaga na gumana nang maayos ang iyong site sa mga smartphone. Anumang disenteng template ng CSS ay dapat gumamit ng tumutugong disenyo upang ang site ay ganap na gagana sa anumang laki ng screen. Kung ang iyong napili ay hindi, lumipat sa isa na hindi.
Maayong Sumulat - I-download ang template at tingnan ang code bago ka mangako na gamitin ito. Dapat itong malinis, mahusay na nakabalangkas, at madaling mai-edit. Dapat ding magkaroon ng kamalayan sa SEO, na may wastong paggamit ng mga tag ng pamagat at heading.
Lisensya - Siguraduhing suriin ang lisensya para sa iyong napiling template ng CSS. Maraming magagamit sa ilalim ng isang lisensya ng Creative Commons , ngunit tinutukoy ng iba't ibang mga bersyon ng lisensyang ito kung maaari mong i-edit ang template, kung maaari mo itong magamit sa komersyo, at kung kailangan mong i-credit ang orihinal na taga-disenyo.
Mga addon - Ang ilang mga developer ng template ng CSS ay nag-aalok ng kanilang trabaho sa batayang 'freemium'. Makukuha mo ang template nang libre, ngunit may pagpipilian na magbayad para sa karagdagang mga pagpapasadya upang gawin itong natatangi sa iyong site.

Sa lahat ng ipinaliwanag, tingnan natin ang mga pinakamahusay na lugar upang makahanap ng mga libreng template ng CSS.

1. Naka-template.co

Ang nakamamanghang koleksyon na ito ng higit sa 800 mga template ng CSS ay naglalaman ng mga istilo para sa bawat klase ng website. Ang lahat ng mga ito ay nilikha lalo na para sa site, kaya hindi mo dapat makita silang nag-crop up kahit saan pa.

Ang lahat ng mga template ay tumutugon, at binuo gamit ang HTML5. Maliit at magaan ang mga ito, na may labis na mga tampok sa Javascript, tulad ng isang lightbox ng video o mga scroll effect, ginamit lamang kung saan nagdagdag ng tunay na halaga sa karanasan.

2. Styleshout.com

Nag-aalok ang Styleshout ng isang malaking hanay ng parehong mga libre at premium na template, ang dating inilabas sa ilalim ng lisensya ng Creative Commons.

Saklaw ng mga libreng template ang isang malawak na hanay ng mga kategorya, mula sa buong mga website hanggang sa Paparating na mga pahina, at kahit na ang madalas na napapansin na 404 na pahina ng error. Maaari mong ipasadya ang mga ito sa iyong sarili at iakma ang mga ito sa istilo ng iyong mayroon nang site, o maaari kang magbayad upang makuha ang Styleshout na gawin ito para sa iyo.

3. HTML5Up.net

Ang sobrang naka-istilong koleksyon ng mga template na ito ay napakapopular din. Karamihan sa mga nai-download na daan-daang libo-libong beses, at madaling makita kung bakit.

Ang lahat ng mga karaniwang kategorya ng site ay nasilbi, tulad ng blog at pahina ng produkto, at may ilang partikular na magagandang disenyo para sa mga litratista na ipakita ang kanilang trabaho. Ang pangunahing mga template ng estilo ng grid ay lubos na napapasadyang, habang ang mga flashier ay may posibilidad na gumamit ng Javascript nang napakalakas kaya maaaring hindi gaanong angkop sa iyong mga pag-aayos.

Apat. Freebiesbug.com

Ang kulang sa Freebiesbug sa dami nito higit pa sa bumubuo sa kalidad. Isang site kung saan ipinapakita ng mga batang developer ang kanilang mga kasanayan, nagsasama ito ng maraming matataas, premium na disenyo.

Ang kahanga-hangang koleksyon ng site ng mga libreng template ay perpekto para sa mga ahensya, litratista, developer ng app, at iba pang mga likha. Naka-pack na may Javascript at CSS effects at mga animasyon, maaari mong ipasadya ang mga site, kahit na madalas silang napakaganda na baka ayaw mo.

Bilang karagdagan, nagsasama ang Freebiesbug.com ng lahat ng mga uri ng libreng mapagkukunan para sa mga web designer, kabilang ang mga font, stock photo, Illustrator sketch at PSD file, at marami pa.

5. Libre-CSS.com

Ang Free-CSS.com ay isang walang-alok na nag-aalok ng website - sa oras ng pagsulat - ilang 2503 libreng mga template, kasama ang maraming mga premium, kung hindi mo pa rin makita kung ano ang iyong hinahanap.

Sa napakaraming pipiliin mula dito ay maaaring maging medyo mahirap upang manirahan sa perpektong disenyo. Ang kalidad sa pangkalahatan ay mabuti, bagaman ang 10 taong pagkakaroon ng site ay nangangahulugang nagho-host pa rin ito ng mga template na nakasulat sa XHTML. Gusto mong iwasan ang mga ito. Ang iba pang bagay ay upang matiyak na suriin mo ang lisensya para sa iyong napiling template. Lahat sila ay libre, ngunit ang ilan ay pampublikong domain, ang ilang Creative Commons, at ang ilan ay gumagamit ng isang partikular na lisensya ng may akda.

6. OS-Templates.com

28 mga pahina ng mga libreng template ng CSS, karamihan ay gumagamit ng mga modernong, layout na batay sa grid sa isang solong pahina. Kung simple ang hinahabol mo, pagkatapos ito ang lugar upang tumingin. Ang mga disenyo ay malinis, kaakit-akit, at madaling ipasadya.

Nag-aalok din ang OS-Templates.com ng maraming koleksyon ng 'pangunahing mga template'. Binibigyan ka nito ng pangunahing istraktura para sa isang website sa iba't ibang mga tanyag na mga scheme ng layout (dalawang haligi, tatlong haligi, atbp), habang ganap na walang istilo. Tulad ng paggamit ng default na tema sa Wordpress, binibigyang-daan ka ng blangkong canvas na gawing anumang nais mo ang iyong site.

7. boag.online [Hindi na magagamit]

Ang Maglev ay isang solong isang pahina ng template ng website na maaaring maging na-preview sa pagkilos sa boag.online .

Ito ay isang mabilis, malinis na template, perpekto para sa isang pahina ng produkto. Ang minimalist na disenyo ay dinagdagan lamang ng ilang mga epekto ng Jquery upang matulungan kang mag-scroll sa pagitan ng mga seksyon. Gumagana ang simpleng layout sa sarili nitong karapatan, ngunit gumagawa din ito para sa isang mahusay na panimulang punto para sa iyong sariling mga pagpapasadya.

8. Pixel Buddha

Ang mga template ng Pixel Buddha ay hindi lamang limitado sa mga website, nagsasama sila ng ilan para sa mga newsletter din sa email.

Alinmang paraan, lahat sila ay dinisenyo gamit ang HTML5 at CSS3, at tumutugon sa gayon maganda ang hitsura sa anumang aparato. Kabilang sa mga highlight ang Howdy HTML, isang magandang portfolio / template ng resume, at SOHO HTML, isang kahanga-hangang naghahanap ng pahina ng eCommerce na may kasamang mga mapagkukunang PSD file sa tuktok ng HTML at CSS.

kung paano makopya ang mga file mula sa windows hanggang linux

9. Templatemo.com

Halos 500 mga libreng template ang magagamit mula sa Templatemo. Ang ilan sa mga pinakamahusay na ay ang mga na makawala mula sa Bootstrap-style grid system upang subukan ang isang bagay na naiiba.

Karamihan sa mga template ay simple at walang gulong, bagaman ang mga tampok tulad ng mga lightbox at content carousel ay kasama kung saan kinakailangan nila. Gusto rin namin ang katunayan na ang ilan sa mga template ay naka-set up upang gumana sa mas maraming anim na mga pahina bilang default. Ginagawa nitong mas madali kung ang iyong nilalaman ay hindi umaangkop sa unting karaniwang isang-pahina na layout.

10. Startbootstrap.com

Ang Bootstrap ay isang hindi kapani-paniwalang tanyag na balangkas ng front-end na nagbibigay-daan sa iyo upang bumuo ng mga de-kalidad na website nang walang oras. Gayunpaman, tumatagal ng kaunting oras upang malaman, kung saan papasok ang Start Bootstrap.

Ang koleksyon na ito ng libre, bukas na mga template ng mapagkukunan ay pawang binuo gamit ang grid system ng Bootstrap. Mayroong higit sa 30 upang pumili mula sa. Ang ilan ay ganap na dinisenyo, at inilaan para sa mga app, blog, at mga landing page, habang ang iba naman ay mga blangko na layout na naghihintay para sa iyo na mag-istilo.

labing-isang Bootswatch.com

Sa wakas, isang bagay na medyo mas hands-on. Nag-aalok ang Bootswatch ng 16 bukas na mga mapagkukunang tema sa mga istilong site na itinayo gamit ang Bootstrap.

Maaari mong itayo ang layout ng iyong site mismo gamit ang Bootstrap, o i-download ang isa sa mga blangko na template mula sa Start Bootstrap. Ang ginagawa ng Bootswatch ay baguhin ang mga font, kulay ng background, at ang estilo para sa mga pindutan, menu, at iba pang mga elemento. Binibigyan nito ang iyong site ng isang natatanging hitsura habang nananatiling totoo sa ultra-malinis na etos ng Bootstrap.

Madaling magtapon ng isang pangunahing website na may Bootstrap, at binibigyan ito ng Bootswatch ng ilang instant na polish.

Paano Gumamit ng Mga Template ng CSS

Malawakang pagsasalita, mayroong dalawang paraan upang magamit ang mga template. Maaari mong gamitin ang mga ito bilang-ay o ginagamit mo ang mga ito bilang batayan para sa iyong sariling disenyo.

Ang panganib kapag gumagamit ng mga template ay magtapos ka sa isang website na magkapareho sa ibang tao. Pumili ng isang tanyag na template at maaaring may literal na sampu-sampung libo ng magkaparehong mga site. Ito ang pangunahing argumento na pabor sa pagpapasadya sa kanila.

kung paano ipasok ang isang linya sa salitang 2016

Ang mga template ng CSS ay isang mahusay na shortcut para sa mga bihasang taga-disenyo ng web na may isang pangunahing layout sa isip at nais na tumalon nang diretso sa pag-istilo nito.

Perpekto rin sila para sa sinumang bago sa disenyo ng web. Kung alam mo ang iyong paraan sa paligid ng HTML at CSS ngunit wala pang kumpiyansa o kaalaman upang bumuo ng isang site mula sa simula pagkatapos ay isang template ng CSS ang nagsisilbing parehong isang madaling paraan upang makakuha ng isang mahusay na hinahanap na site, at isang kasindak-sindak na tool sa pag-aaral.

Maaari mo itong tratuhin bilang isang isinasagawang gawain. Magsimula sa pamamagitan ng paglipat ng mga font at pagbabago ng scheme ng kulay , at sa paglipas ng panahon maaari mong muling idisenyo ang mga mayroon nang elemento, magdagdag ng mga bago, at iba pa. Walang mas mahusay na paraan upang malaman ang anuman kaysa sa praktikal, karanasan sa karanasan.

Gumagamit ka ba ng mga template ng CSS kapag nagtatayo ng mga website? Ano ang iyong mga paboritong lugar upang hanapin ang mga ito? Ibahagi ang iyong mga karanasan at tip sa amin sa mga komento.

Magbahagi Magbahagi Mag-tweet Email Paano linisin ang iyong Windows PC Gamit ang Command Prompt

Kung ang iyong Windows PC ay mababa na sa espasyo ng imbakan, linisin ang basura gamit ang mga mabilis na utos ng Command Prompt na ito.

Basahin Susunod Mga Kaugnay na Paksa

Programming
Disenyo ng web
CSS

Tungkol sa May-akda Andy Betts(221 Mga Artikulo Na-publish)

Si Andy ay dating print journalist at magazine editor na nagsusulat tungkol sa teknolohiya sa loob ng 15 taon. Sa oras na iyon nag-ambag siya sa hindi mabilang na mga publication at gumawa ng gawaing kopya para sa mga malalaking kumpanya ng tech. Nagbigay din siya ng ekspertong komento para sa media at nag-host ng mga panel sa mga kaganapan sa industriya.

Higit Pa Mula sa Andy Betts

Mag-subscribe sa aming newsletter

Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!

Mag-click dito upang mag-subscribe