11 CSS -malnettsteder: Ikke start fra bunnen av!

11 CSS -malnettsteder: Ikke start fra bunnen av!

Webdesign er mer tilgjengelig enn noensinne, men det krever fortsatt mye arbeid - og mye dyktighet - for å gi profesjonelle resultater.





Heldigvis trenger du ikke starte fra bunnen av hver gang. Det er tusenvis av gratis CSS -maler tilgjengelig online, som alle omfatter moderne designtrender og teknologier. Du kan bruke dem i sin opprinnelige form, eller tilpasse dem til å gjøre dem dine egne.





I denne guiden vil vi se nærmere på CSS -maler, og hvor du kan finne dem.





Hva er en CSS -mal?

En CSS -mal inneholder ikke bare CSS: den gir deg alt du trenger for å lage et fullt fungerende nettsted. Når du laster ned en, får du vanligvis en mappe som inneholder følgende:

  • HTML -filer - Du får en HTML-fil for hver side på nettstedet. Den vil inneholde eksempeltekst og bilder som du må erstatte med ditt eget innhold. Du må også kunne justere metadataene knyttet til ting som beskrivelse av nettstedet.
  • CSS -fil - Du får vanligvis en hoved CSS-fil som inneholder all styling for nettstedet, pluss tillegg som et tilbakestilt stilark, eller en for webfonter.
  • Javascript -fil - Hvis nettstedet inneholder Javascript-funksjoner, bør de ideelt sett inkluderes i sin egen separate fil, i stedet for å inkorporeres i HTML-dokumentene.
  • Bilder, fonter og ikoner - Eventuelle bilder som brukes i malen bør også inkluderes. Du vil kanskje beholde ting som ikoner og bakgrunner, men du må erstatte de andre plassholderbildene med dine egne. Noen tilpassede skrifter kan også inkluderes.

I motsetning til de fleste andre maltyper du møter - det være seg Wordpress, Excel eller InDesign -maler - CSS-maler krever en viss mengde teknisk kunnskap.



Det er ikke noe vennlig grensesnitt for å redigere dem i, så du må i det minste vite hvordan du finner veien rundt et HTML -dokument bare for å legge til ditt eget innhold. For å gjøre dine egne tilpasninger trenger du en anstendig kunnskap om CSS.

Windows starter ikke i sikker modus

Hva du skal se etter i en CSS -mal

Det er så mange gratis CSS -maler å velge mellom. Så hvordan vet du hvilken som er riktig for deg? Her er noen ting du bør se etter:





  • Design - Tydeligvis vil du ha et nettsted som ser fint ut og gjenspeiler det bildet du vil fremstille. Men også vurdere om malen er riktig for dine behov både nå og i fremtiden. Mange er for en-siders nettsteder; noen er designet for flere sider. Hvis du trenger sistnevnte, bør du vurdere om du kan være bedre å bruke et CMS som Wordpress i stedet.
  • Mobiloptimalisert - Mobil nettbruk er nå høyere enn skrivebordet, så det er viktig at nettstedet fungerer som det skal på smarttelefoner. Enhver anstendig CSS -mal bør bruke responsiv design slik at nettstedet fungerer perfekt på en hvilken som helst skjerm. Hvis din valgte ikke gjør det, bytt til en som gjør det.
  • Bra skrevet - Last ned malen og ta en titt på koden før du forplikter deg til å bruke den. Den skal være ren, godt strukturert og lett å redigere. Det bør også være SEO-bevisst, med riktig bruk av tittel- og overskriftstagger.
  • Tillatelse - Sørg for å sjekke lisensen for den valgte CSS-malen. Mange er tilgjengelige under en Creative Commons -lisens , men forskjellige versjoner av denne lisensen avgjør om du kan redigere malen, om du kan bruke den kommersielt, og om du må kreditere den opprinnelige designeren.
  • Tillegg - Noen CSS-malutviklere tilbyr arbeidet sitt på et 'freemium' -grunnlag. Du får malen gratis, men har muligheten til å betale for ytterligere tilpasninger for å gjøre den unik for nettstedet ditt.

Med alt det forklarte, la oss ta en titt på de beste stedene for å finne gratis CSS -maler.

1. Malet.co

Denne fantastiske samlingen med mer enn 800 CSS -maler inneholder stiler for alle klasser av nettsteder. De er alle laget spesielt for nettstedet, så du bør ikke se dem dukke opp andre steder.





Alle malene er responsive og bygget med HTML5. De er små og lette, med ekstra Javascript -funksjoner, for eksempel en videolysboks eller rulleeffekter, bare brukt der de gir virkelig verdi til opplevelsen.

2. Styleshout.com

Styleshout tilbyr et stort utvalg av både gratis og premium maler, den tidligere utgitt under Creative Commons -lisensen.

De gratis malene dekker et bredt spekter av kategorier, fra fulle nettsteder til Coming Soon -sider, og til og med den ofte oversett 404 -feilsiden. Du kan tilpasse dem selv og tilpasse dem til stilen på ditt eksisterende nettsted, eller du kan betale for å få Styleshout til å gjøre det for deg.

3. HTML5Up.net

Denne super stilige samlingen av maler er også super-populær. De fleste har blitt lastet ned hundretusenvis av ganger, og det er lett å se hvorfor.

Alle de vanlige nettstedskategoriene blir tatt vare på, som blogg og produktside, og det er noen spesielt fine design for fotografer å vise frem arbeidet sitt. De grunnleggende raster-stilmalene er ekstremt tilpassbare, mens de prangende har en tendens til å bruke Javascript ganske tungt, så det kan være mindre egnet for dine tweaks.

Fire. Freebiesbug.com

Det Freebiesbug mangler i kvantitet, gjør det mer enn kompensasjon for kvaliteten. Et nettsted der unge utviklere viser frem sine ferdigheter, og inneholder mange avanserte, førsteklasses design.

Nettstedets imponerende samling av gratis maler er perfekte for byråer, fotografer, apputviklere og andre reklamer. Pakket med Javascript- og CSS -effekter og animasjoner, kan du tilpasse nettstedene, selv om de ofte er så fine at du kanskje ikke vil.

I tillegg inkluderer Freebiesbug.com alle slags gratis ressurser for webdesignere, inkludert fonter, arkivbilder, Illustrator -skisser og PSD -filer og mer.

5. Gratis- CSS.com

Free-CSS.com er et gratis nettsted som tilbyr-i skrivende stund-rundt 2503 gratis maler, pluss mange førsteklasses maler, hvis du fortsatt ikke finner det du leter etter.

Med så mange å velge mellom kan det være litt vanskelig å sette seg inn i det perfekte designet. Kvaliteten er generelt god, selv om nettstedets 10-årige eksistens betyr at det fremdeles er vert for maler skrevet i XHTML. Du vil unngå disse. Den andre tingen er å sjekke lisensen for malen du valgte. De er alle gratis, men noen er offentlig eiendom, noen Creative Commons, og noen bruker en forfatterspesifikk lisens.

6. OS-Templates.com

28 sider med gratis CSS-maler, for det meste ved hjelp av moderne, rutenettbaserte oppsett på en enkelt side. Hvis det er det enkle du er ute etter, så er dette stedet å lete. Designene er rene, attraktive og enkle å tilpasse.

OS-Templates.com tilbyr også en stor samling med 'grunnleggende maler'. Disse gir deg den grunnleggende strukturen for et nettsted i forskjellige populære layoutoppsett (to-kolonne, tre-kolonne, etc), mens det er helt ustylet. Som å bruke standardtemaet i Wordpress, lar det blanke lerretet deg gjøre nettstedet ditt til alt du ønsker.

7. boag.online [Ikke lenger tilgjengelig]

Maglev er en enkelt side nettsted mal som kan være forhåndsvises i aksjon på boag.online .

Det er en rask, ren mal, ideell for en produktside. Den minimalistiske designen forsterkes bare med noen få Jquery -effekter for å hjelpe deg med å bla mellom seksjoner. Det enkle oppsettet fungerer i seg selv, men det gir også et flott utgangspunkt for dine egne tilpasninger.

8. Pixel Buddha

Pixel Buddhas maler er ikke bare begrenset til nettsteder, de inkluderer også noen for nyhetsbrev på e -post.

Uansett er de alle designet med HTML5 og CSS3, og er lydhøre, så de ser flotte ut på alle enheter. Høydepunkter inkluderer Howdy HTML, en vakker portefølje/CV -mal og SOHO HTML, en fantastisk e -handelsside som inneholder PSD -filene på toppen av HTML og CSS.

Last ned windows media player for windows 10 64 bit

9. Templatemo.com

Nesten 500 gratis maler er tilgjengelige fra Templatemo. Noen av de beste er de som slipper løs fra rutenettet i Bootstrap-stil for å prøve noe annet.

De fleste malene er enkle og ryddig, selv om funksjoner som lysbokser og innholdskaruseller er inkludert der de trengs. Vi liker også det faktum at flere av malene er konfigurert til å fungere med hele seks sider som standard. Dette gjør det lettere hvis innholdet ditt ikke passer til det stadig mer vanlige layoutet på én side.

10. Startbootstrap.com

Bootstrap er et utrolig populært front-end rammeverk som lar deg bygge nettsteder av høy kvalitet på kort tid. Det tar imidlertid litt tid å lære, det er her Start Bootstrap kommer inn.

Denne samlingen av gratis, åpne kildemaler er alle bygget ved hjelp av Bootstraps rutenettsystem. Det er mer enn 30 å velge mellom. Noen er fullt designet og beregnet for apper, blogger og landingssider, mens andre er tomme oppsett som venter på at du skal style opp.

elleve. Bootswatch.com

Til slutt, noe litt mer praktisk. Bootswatch tilbyr 16 åpen kildekode -temaer til stilsteder bygget med Bootstrap.

Du kan enten bygge nettstedets layout selv ved hjelp av Bootstrap, eller laste ned en av de tomme malene fra Start Bootstrap. Det Bootswatch gjør er å endre skrifttyper, bakgrunnsfarger og styling for knapper, menyer og andre elementer. Det gir nettstedet ditt et unikt utseende, samtidig som det forblir tro mot Bootstraps ultrarene etos.

Det er lett å kaste sammen et grunnleggende nettsted med Bootstrap, og Bootswatch gir det litt polering.

Slik bruker du CSS -maler

I grove trekk er det to måter å bruke maler på. Du bruker dem enten som de er, eller du bruker dem som grunnlag for ditt eget design.

Faren ved bruk av maler er at du ender opp med et nettsted som er identisk med andres. Velg en populær mal, og det kan bokstavelig talt være titusenvis av identiske nettsteder. Dette er hovedargumentet for å tilpasse dem.

windows klarte ikke å fullføre formatet usb

CSS -maler er en flott snarvei for erfarne webdesignere som har et grunnleggende oppsett i tankene og ønsker å hoppe rett inn i stylingen.

De er også perfekte for alle som er nye innen webdesign. Hvis du kjenner deg godt rundt HTML og CSS, men ennå ikke har tillit eller kunnskap til å bygge et nettsted fra bunnen av, fungerer en CSS -mal som både en enkel måte å få et flott nettsted og et fantastisk læringsverktøy.

Du kan behandle det som et pågående arbeid. Start med bytte ut fonter og endre fargeskjemaet , og over tid kan du redesigne eksisterende elementer, legge til nye og så videre. Det er ingen bedre måte å lære noe på enn gjennom praktisk, praktisk erfaring.

Bruker du CSS -maler når du bygger nettsteder? Hva er dine favorittsteder å finne dem? Del dine erfaringer og tips med oss ​​i kommentarene.

Dele Dele kvitring E -post Slik rengjør du Windows -PC -en med kommandoprompt

Hvis det er lite lagringsplass på Windows -PC -en, kan du rydde opp i søppelet med disse raske kommandoprompt -verktøyene.

Les neste
Relaterte temaer
  • Programmering
  • Webdesign
  • CSS
Om forfatteren Andy Betts(221 artikler publisert)

Andy er en tidligere trykkjournalist og tidsskriftredaktør som har skrevet om teknologi i 15 år. På den tiden har han bidratt til utallige publikasjoner og produsert tekstforfatterarbeid for store teknologiselskaper. Han har også gitt ekspertkommentarer til media og vært paneler på bransjearrangementer.

Mer fra Andy Betts

Abonner på vårt nyhetsbrev

Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!

Klikk her for å abonnere