11 CSS -skabelonwebsteder: Start ikke fra bunden!

11 CSS -skabelonwebsteder: Start ikke fra bunden!

Webdesign er mere tilgængeligt end nogensinde, men det kræver stadig meget arbejde - og masser af dygtighed - at producere professionelt flotte resultater.





Heldigvis behøver du ikke starte forfra hver gang. Der er tusindvis af gratis CSS -skabeloner tilgængelige online, der alle omfatter moderne designtrends og teknologier. Du kan bruge dem i deres originale form eller tilpasse dem til at gøre dem til dine egne.



I denne vejledning ser vi nærmere på CSS -skabeloner, og hvor de kan findes.





Hvad er en CSS -skabelon?

En CSS -skabelon indeholder ikke bare CSS: den giver dig alt hvad du behøver for at oprette et fuldt fungerende websted. Når du downloader en, får du typisk en mappe med følgende:

  • HTML -filer - Du får en HTML-fil for hver side på webstedet. Det vil indeholde eksempeltekst og billeder, som du skal udskifte med dit eget indhold. Du skal også være i stand til at justere metadataene vedrørende ting som beskrivelse af webstedet.
  • CSS -fil - Du får normalt en hoved-CSS-fil, der indeholder al styling til webstedet, plus eventuelle ekstrafunktioner som f.eks. Et nulstillet typografiark eller en til webskrifttyper.
  • Javascript -fil - Hvis webstedet indeholder Javascript-funktioner, bør de ideelt set inkluderes i deres egen separate fil, frem for at blive indarbejdet i HTML-dokumenterne.
  • Billeder, skrifttyper og ikoner - Alle billeder, der bruges i skabelonen, bør også inkluderes. Du vil måske beholde ting som ikoner og baggrunde, men skal udskifte de andre pladsholderbilleder med dine egne. Nogle tilpassede skrifttyper er muligvis også inkluderet.

I modsætning til de fleste andre typer skabeloner, du støder på - det være sig Wordpress, Excel eller InDesign -skabeloner - CSS-skabeloner kræver en vis mængde teknisk viden.



Der er ingen venlig grænseflade til at redigere dem i, så du skal i det mindste vide, hvordan du finder rundt i et HTML -dokument, bare for at tilføje dit eget indhold. For at lave dine egne tilpasninger har du brug for et anstændigt kendskab til CSS.

bærbar oplader tilsluttet, men oplader ikke

Hvad skal man kigge efter i en CSS -skabelon

Der er så mange gratis CSS -skabeloner at vælge imellem. Så hvordan ved du, hvad der er det rigtige for dig? Her er et par ting at holde øje med:



  • Design - Det er klart, at du vil have et websted, der ser godt ud og afspejler det billede, du vil skildre. Men overvej også, om skabelonen passer til dine behov både nu og i fremtiden. Mange er til sider på en side; nogle er designet til flere sider. Hvis du har brug for sidstnævnte, skal du overveje, om du måske er bedre til at bruge et CMS som Wordpress i stedet.
  • Mobiloptimeret - Mobilwebforbrug er nu højere end desktop, så det er vigtigt, at dit websted fungerer korrekt på smartphones. Enhver anstændig CSS -skabelon skal bruge responsivt design, så webstedet fungerer perfekt på enhver størrelse skærm. Hvis din valgte ikke gør det, skal du skifte til en, der gør det.
  • Godt skrevet - Download skabelonen og tag et kig på koden, før du forpligter dig til at bruge den. Det skal være rent, velstruktureret og let at redigere. Det skal også være SEO-bevidst med korrekt brug af titel- og overskriftstagger.
  • Licens - Sørg for at tjekke licensen til din valgte CSS-skabelon. Mange er tilgængelige under en Creative Commons -licens , men forskellige versioner af denne licens afgør, om du kan redigere skabelonen, om du kan bruge den kommercielt, og om du skal kreditere den originale designer.
  • Tilføjelser - Nogle CSS-skabelonudviklere tilbyder deres arbejde på et 'freemium'-grundlag. Du får skabelonen gratis, men har mulighed for at betale for yderligere tilpasninger for at gøre den unik for dit websted.

Med alt det forklarede, lad os tage et kig på de bedste steder at finde gratis CSS -skabeloner.

1. Skabeloneret.co

Denne fantastiske samling af mere end 800 CSS -skabeloner indeholder stilarter til hver klasse af websteder. De er alle skabt specielt til webstedet, så du bør ikke se dem dukke op andre steder.



Alle skabeloner er lydhøre og bygget med HTML5. De er små og lette med ekstra Javascript -funktioner, f.eks. En video -lysboks eller rulleeffekter, der kun bruges, hvor de tilføjer oplevelsen virkelig værdi.

2. Styleshout.com

Styleshout tilbyder et stort udvalg af både gratis og premium skabeloner, den tidligere udgivet under Creative Commons -licensen.

De gratis skabeloner dækker en bred vifte af kategorier, fra fulde websteder til Coming Soon -sider og endda den ofte oversete 404 -fejlside. Du kan tilpasse dem selv og tilpasse dem til stilen på dit eksisterende websted, eller du kan betale for at få Styleshout til at gøre det for dig.

3. HTML5Up.net

Denne super-stilfulde samling af skabeloner er også super-populær. De fleste er blevet downloadet hundredtusinder af gange, og det er let at se hvorfor.

Alle de sædvanlige kategorier af websteder er tilgodeset, som blog og produktside, og der er nogle særligt flotte designs til fotografer at vise deres arbejde frem. De grundlæggende skabeloner i gitterstil er ekstremt tilpasselige, mens de prangende har en tendens til at bruge Javascript ganske tungt, så det kan være mindre velegnet til dine tweaks.

Fire. Freebiesbug.com

Hvad Freebiesbug mangler i mængde, gør det mere ud end i kvalitet. Et websted, hvor unge udviklere viser deres færdigheder, det indeholder mange high-end, premium designs.

Webstedets imponerende samling af gratis skabeloner er perfekte til bureauer, fotografer, appudviklere og andre annoncer. Pakket med Javascript- og CSS -effekter og animationer kan du tilpasse webstederne, selvom de ofte er så flotte, at du måske ikke vil.

Derudover indeholder Freebiesbug.com alle former for gratis ressourcer til webdesignere, herunder skrifttyper, lagerfotos, Illustrator -skitser og PSD -filer og mere.

5. Gratis- CSS.com

Free-CSS.com er et problemfrit websted, der i skrivende stund tilbyder omkring 2503 gratis skabeloner plus masser af premium-skabeloner, hvis du stadig ikke kan finde det, du leder efter.

Med så mange at vælge imellem kan det være lidt svært at nøjes med det perfekte design. Kvaliteten er generelt god, selvom webstedets 10-årige eksistens betyder, at det stadig er vært for skabeloner skrevet i XHTML. Du vil gerne undgå disse. Den anden ting er at sørge for at tjekke licensen til din valgte skabelon. De er alle gratis, men nogle er offentlige domæner, nogle Creative Commons, og nogle bruger en forfatterspecifik licens.

6. OS-Templates.com

28 sider gratis CSS-skabeloner, mest ved hjælp af moderne, gitterbaserede layout på en enkelt side. Hvis det er simpelt, hvad du leder efter, så er dette stedet at se. Designene er rene, attraktive og nemme at tilpasse.

OS-Templates.com tilbyder også en stor samling af 'grundlæggende skabeloner'. Disse giver dig den grundlæggende struktur for et websted i forskellige populære layoutordninger (to-kolonne, tre-kolonne osv.), Mens det er helt ustylet. Ligesom at bruge standardtemaet i Wordpress, giver det tomme lærred dig mulighed for at gøre dit websted til alt, hvad du vil.

7. boag.online [Ikke længere tilgængelig]

Maglev er en enkelt webside -skabelon, der kan være vist i aktion på boag.online .

Det er en hurtig, ren skabelon, ideel til en produktside. Det minimalistiske design forstærkes kun med et par Jquery -effekter for at hjælpe dig med at rulle mellem sektioner. Det enkle layout fungerer i sig selv, men det giver også et godt udgangspunkt for dine egne tilpasninger.

8. Pixel Buddha

Pixel Buddhas skabeloner er ikke kun begrænset til websteder, de indeholder også nogle til nyhedsbreve via e -mail.

Uanset hvad, er de alle designet med HTML5 og CSS3 og er lydhøre, så de ser godt ud på enhver enhed. Højdepunkter inkluderer Howdy HTML, en smuk portfolio/CV -skabelon og SOHO HTML, en fantastisk eCommerce -side, der indeholder PSD -filerne oven på HTML og CSS.

er 256 GB nok til macbook pro

9. Templatemo.com

Næsten 500 gratis skabeloner er tilgængelige fra Templatemo. Nogle af de bedste er dem, der slipper fri fra gittersystemet i Bootstrap-stil for at prøve noget andet.

De fleste skabeloner er enkle og ryddelige, selvom funktioner som lightboxes og indholdskarruseller er inkluderet, hvor de er nødvendige. Vi kan også godt lide, at flere af skabelonerne er konfigureret til at fungere med hele seks sider som standard. Dette gør det lettere, hvis dit indhold ikke passer til det stadig mere almindelige layout på en side.

10. Startbootstrap.com

Bootstrap er en utrolig populær front-end ramme, der giver dig mulighed for at bygge hjemmesider af høj kvalitet på ingen tid. Det tager dog lidt tid at lære, og det er her Start Bootstrap kommer ind.

Denne samling af gratis open source -skabeloner er alle bygget ved hjælp af Bootstraps gittersystem. Der er mere end 30 at vælge imellem. Nogle er fuldt ud designet og beregnet til apps, blogs og landingssider, mens andre er tomme layout, der venter på, at du skal style op.

elleve. Bootswatch.com

Endelig noget lidt mere praktisk. Bootswatch tilbyder 16 open source -temaer til stilwebsteder, der er bygget ved hjælp af Bootstrap.

Du kan enten selv opbygge dit websteds layout ved hjælp af Bootstrap eller downloade en af ​​de tomme skabeloner fra Start Bootstrap. Hvad Bootswatch gør, er at ændre skrifttyper, baggrundsfarver og styling til knapper, menuer og andre elementer. Det giver dit websted et unikt udseende, samtidig med at det forbliver tro mod Bootstraps ultra-rene etos.

Det er let at samle et grundlæggende websted med Bootstrap, og Bootswatch giver det øjeblikkelig polering.

Sådan bruges CSS -skabeloner

Groft sagt er der to måder at bruge skabeloner på. Du bruger dem enten som de er, eller også bruger du dem som grundlag for dit eget design.

Faren ved brug af skabeloner er, at du ender med et websted, der er identisk med andres. Vælg en populær skabelon, og der kan bogstaveligt talt være titusinder af identiske websteder. Dette er hovedargumentet for at tilpasse dem.

hvordan man laver en note på Windows 10

CSS -skabeloner er en fantastisk genvej til erfarne webdesignere, der har et grundlæggende layout i tankerne og ønsker at springe direkte i styling af det.

De er også perfekte til alle, der er nye inden for webdesign. Hvis du kender din vej omkring HTML og CSS, men endnu ikke har tillid eller viden til at bygge et websted fra bunden, fungerer en CSS -skabelon som både en let måde at få et flot websted og et fantastisk læringsværktøj.

Du kan behandle det som et igangværende arbejde. Start med udskiftning af skrifttyper og ændre farveskemaet , og med tiden kan du redesigne eksisterende elementer, tilføje nye osv. Der er ingen bedre måde at lære noget på end gennem praktisk, praktisk erfaring.

Bruger du CSS -skabeloner, når du bygger websteder? Hvad er dine foretrukne steder at finde dem? Del dine oplevelser og tips med os i kommentarerne.

Del Del Tweet E -mail Sådan rengøres din Windows -pc ved hjælp af kommandoprompt

Hvis din Windows -pc er ved at løbe tør for lagerplads, skal du rydde op i skrammel ved hjælp af disse hurtige kommandopromptværktøjer.

Læs Næste Relaterede emner
  • Programmering
  • Webdesign
  • CSS
Om forfatteren Andy Betts(221 artikler udgivet)

Andy er en tidligere printjournalist og tidsskriftredaktør, der har skrevet om teknologi i 15 år. På den tid har han bidraget til utallige publikationer og produceret tekstforfatterarbejde for store tech -virksomheder. Han har også givet ekspertkommentarer til medierne og vært paneler ved branchearrangementer.

Mere fra Andy Betts

Abonner på vores nyhedsbrev

Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!

Klik her for at abonnere