Home-theater-designers
Webdesign is toegankelijker dan ooit, maar het vergt nog steeds veel werk - en veel vaardigheid - om professioneel ogende resultaten te produceren.
Gelukkig hoef je niet elke keer opnieuw te beginnen. Er zijn duizenden gratis CSS-sjablonen online beschikbaar, die allemaal moderne ontwerptrends en -technologieën omarmen. Je kunt ze in hun oorspronkelijke vorm gebruiken of ze aanpassen om ze je eigen te maken.
In deze handleiding gaan we dieper in op CSS-sjablonen en waar u ze kunt vinden.
Wat is een CSS-sjabloon?
Een CSS-sjabloon bevat niet alleen CSS: het geeft je alles wat je nodig hebt om een volledig functionerende website te maken. Wanneer u er een downloadt, krijgt u meestal een map met het volgende:
- HTML-bestanden -- Je krijgt een HTML-bestand voor elke pagina van de website. Het bevat voorbeeldtekst en afbeeldingen die u moet vervangen door uw eigen inhoud. Je moet ook de metadata kunnen aanpassen, bijvoorbeeld met betrekking tot de sitebeschrijving.
- CSS-bestand -- U krijgt meestal één hoofd-CSS-bestand met alle styling voor de site, plus eventuele extra's zoals een reset-stylesheet of een voor weblettertypen.
- Javascript-bestand -- Als de site Javascript-functies bevat, zouden ze idealiter in hun eigen aparte bestand moeten worden opgenomen, in plaats van in de HTML-documenten te worden opgenomen.
- Afbeeldingen, lettertypen en pictogrammen -- Alle afbeeldingen die in de sjabloon worden gebruikt, moeten ook worden opgenomen. Misschien wilt u zaken als pictogrammen en achtergronden behouden, maar moet u de andere tijdelijke aanduiding-afbeeldingen vervangen door uw eigen afbeeldingen. Sommige aangepaste lettertypen kunnen ook worden opgenomen.
In tegenstelling tot de meeste andere soorten sjablonen die u zult tegenkomen, of het nu Wordpress, Excel of InDesign-sjablonen -- CSS-sjablonen vereisen een bepaalde hoeveelheid technische kennis.
Er is geen gebruiksvriendelijke interface om ze in te bewerken, dus u moet op zijn minst weten hoe u uw weg kunt vinden in een HTML-document om uw eigen inhoud toe te voegen. Om je eigen aanpassingen te maken, heb je een behoorlijke kennis van CSS nodig.
hoe game delen op xbox one
Waar u op moet letten in een CSS-sjabloon
Er zijn zoveel gratis CSS-sjablonen om uit te kiezen. Dus hoe weet je wat voor jou geschikt is? Hier zijn een paar dingen om op te letten:
- Ontwerp -- Het is duidelijk dat je een site wilt die er mooi uitziet en het beeld weerspiegelt dat je wilt weergeven. Maar denk ook na of de sjabloon geschikt is voor uw behoeften, nu en in de toekomst. Velen zijn voor websites van één pagina; sommige zijn ontworpen voor meerdere pagina's. Als je dat laatste nodig hebt, overweeg dan of je in plaats daarvan beter een CMS zoals Wordpress kunt gebruiken.
- Mobiel-geoptimaliseerd -- Het gebruik van mobiel internet is nu hoger dan dat van desktops, dus het is essentieel dat uw site goed werkt op smartphones. Elke fatsoenlijke CSS-sjabloon moet een responsief ontwerp gebruiken, zodat de site perfect werkt op elk schermformaat. Als de door jou gekozen optie dat niet doet, schakel dan over naar een die dat wel doet.
- Goed geschreven -- Download de sjabloon en bekijk de code voordat u zich ertoe verbindt deze te gebruiken. Het moet schoon, goed gestructureerd en gemakkelijk te bewerken zijn. Het moet ook SEO-bewust zijn, met correct gebruik van titel- en koptags.
- Vergunning -- Zorg ervoor dat u de licentie voor uw gekozen CSS-sjabloon controleert. Er zijn er veel beschikbaar onder een Creative Commons-licentie , maar verschillende versies van deze licentie bepalen of u de sjabloon kunt bewerken, of u deze commercieel mag gebruiken en of u de oorspronkelijke ontwerper moet crediteren.
- Add-ons -- Sommige ontwikkelaars van CSS-sjablonen bieden hun werk op 'freemium'-basis aan. U krijgt de sjabloon gratis, maar u kunt betalen voor extra aanpassingen om deze uniek te maken voor uw site.
Laten we, met dat alles uitgelegd, eens kijken naar de beste plaatsen om gratis CSS-sjablonen te vinden.
1. Templated.co
Deze verbluffende verzameling van meer dan 800 CSS-sjablonen bevat stijlen voor elke websiteklasse. Ze zijn allemaal speciaal voor de site gemaakt, dus je zou ze nergens anders moeten zien opduiken.
Alle sjablonen zijn responsief en gebouwd met HTML5. Ze zijn klein en licht van gewicht, met extra Javascript-functies, zoals een video-lightbox of scroll-effecten, die alleen worden gebruikt waar ze echt waarde toevoegen aan de ervaring.
2. Styleshout.com
Styleshout biedt een groot aantal gratis en premium sjablonen, de eerste vrijgegeven onder de Creative Commons-licentie.
De gratis sjablonen bestrijken een breed scala aan categorieën, van volledige websites tot Binnenkort-pagina's en zelfs de vaak over het hoofd geziene 404-foutpagina. U kunt ze zelf aanpassen en aanpassen aan de stijl van uw bestaande site, of u kunt betalen om Styleshout het voor u te laten doen.
3. HTML5Up.net
Deze superstijlvolle verzameling sjablonen is ook super populair. De meeste zijn honderdduizenden keren gedownload en het is gemakkelijk in te zien waarom.
Alle gebruikelijke categorieën van sites worden verzorgd, zoals blog en productpagina, en er zijn enkele bijzonder mooie ontwerpen voor fotografen om hun werk te laten zien. De basissjablonen in rasterstijl zijn uiterst aanpasbaar, terwijl de flitsendere sjablonen nogal zwaar Javascript gebruiken, dus misschien minder geschikt voor uw aanpassingen.
Vier. Freebiesbug.com
Wat Freebiesbug aan kwantiteit mist, maakt het meer dan goed in kwaliteit. Een site waar jonge ontwikkelaars hun vaardigheden laten zien, met veel hoogwaardige, premium ontwerpen.
De indrukwekkende verzameling gratis sjablonen van de site is perfect voor bureaus, fotografen, app-ontwikkelaars en andere creatievelingen. Boordevol Javascript- en CSS-effecten en animaties, kun je de sites aanpassen, hoewel ze vaak zo leuk zijn dat je dat misschien niet wilt.
Daarnaast bevat Freebiesbug.com allerlei gratis bronnen voor webontwerpers, waaronder lettertypen, stockfoto's, Illustrator-schetsen en PSD-bestanden, en meer.
5. Free-CSS.com
Free-CSS.com is een no-nonsense website die - op het moment van schrijven - zo'n 2503 gratis sjablonen aanbiedt, plus tal van premium-sjablonen, voor het geval je nog steeds niet kunt vinden wat je zoekt.
Met zoveel om uit te kiezen, kan het een beetje moeilijk zijn om het perfecte ontwerp te vinden. De kwaliteit is over het algemeen goed, hoewel het 10-jarig bestaan van de site betekent dat er nog steeds sjablonen zijn die zijn geschreven in XHTML. Deze wil je vermijden. Het andere ding is om ervoor te zorgen dat u de licentie voor uw gekozen sjabloon controleert. Ze zijn allemaal gratis, maar sommige zijn openbaar domein, sommige Creative Commons en sommige gebruiken een auteursspecifieke licentie.
6. OS-Templates.com
28 pagina's met gratis CSS-sjablonen, meestal met moderne, op rasters gebaseerde lay-outs op één pagina. Als u op zoek bent naar eenvoudig, dan is dit de plek om te kijken. De ontwerpen zijn strak, aantrekkelijk en gemakkelijk aan te passen.
OS-Templates.com biedt ook een grote verzameling 'basissjablonen' aan. Deze geven u de basisstructuur voor een website in verschillende populaire lay-outschema's (twee kolommen, drie kolommen, enz.), terwijl ze volledig ongestyled zijn. Net als bij het gebruik van het standaardthema in Wordpress, kunt u met het lege canvas van uw site alles maken wat u maar wilt.
7. boag.online [Niet meer beschikbaar]
Maglev is een websitesjabloon van één pagina die kan worden bekeken in actie op boag.online .
Het is een snelle, schone sjabloon, ideaal voor een productpagina. Het minimalistische ontwerp wordt alleen aangevuld met een paar JQuery-effecten om u te helpen tussen secties te scrollen. De eenvoudige lay-out werkt op zich, maar het is ook een goed startpunt voor uw eigen aanpassingen.
8. Pixel Boeddha
De sjablonen van Pixel Buddha zijn niet alleen beperkt tot websites, ze bevatten ook enkele voor e-mailnieuwsbrieven.
Hoe dan ook, ze zijn allemaal ontworpen met HTML5 en CSS3 en zijn responsief, dus ze zien er geweldig uit op elk apparaat. Hoogtepunten zijn onder meer Howdy HTML, een prachtig portfolio/cv-sjabloon, en SOHO HTML, een geweldig uitziende eCommerce-pagina met de bron-PSD-bestanden bovenop de HTML en CSS.
hoe instagram-foto's op de computer op te slaan
9. Templatemo.com
Bijna 500 gratis sjablonen zijn beschikbaar bij Templatemo. Enkele van de beste zijn degenen die loskomen van het Bootstrap-achtige rastersysteem om iets anders te proberen.
De meeste sjablonen zijn eenvoudig en overzichtelijk, hoewel functies zoals lichtbakken en inhoudcarrousels zijn opgenomen waar ze nodig zijn. We vinden het ook leuk dat verschillende sjablonen zijn ingesteld om standaard met maar liefst zes pagina's te werken. Dit maakt het gemakkelijker als uw inhoud niet past in de steeds vaker voorkomende lay-out van één pagina.
10. Startbootstrap.com
Bootstrap is een ongelooflijk populair front-end framework waarmee je in een mum van tijd websites van hoge kwaliteit kunt bouwen. Het kost echter wat tijd om te leren, en dat is waar Start Bootstrap van pas komt.
Deze verzameling gratis, open source-sjablonen zijn allemaal gebouwd met behulp van het rastersysteem van Bootstrap. Er zijn meer dan 30 om uit te kiezen. Sommige zijn volledig ontworpen en bedoeld voor apps, blogs en bestemmingspagina's, terwijl andere blanco lay-outs zijn die wachten op je stijl.
elf. Bootswatch.com
Eindelijk iets meer hands-on. Bootswatch biedt 16 open source-thema's om sites te stylen die zijn gebouwd met Bootstrap.
U kunt de lay-out van uw site zelf bouwen met Bootstrap, of een van de lege sjablonen downloaden van Start Bootstrap. Wat Bootswatch doet, is de lettertypen, achtergrondkleuren en de stijl voor knoppen, menu's en andere elementen wijzigen. Het geeft uw site een unieke uitstraling en blijft trouw aan het ultraschone ethos van Bootstrap.
Het is gemakkelijk om een eenvoudige website samen te stellen met Bootstrap, en Bootswatch geeft het meteen wat glans.
CSS-sjablonen gebruiken
In grote lijnen zijn er twee manieren om sjablonen te gebruiken. Je gebruikt ze zoals ze zijn of je gebruikt ze als basis voor je eigen ontwerp.
Het gevaar bij het gebruik van templates is dat je op een website komt die identiek is aan die van iemand anders. Kies een populaire sjabloon en er kunnen letterlijk tienduizenden identieke sites zijn. Dit is het belangrijkste argument om ze aan te passen.
hoe te verbergen activeer windows 10 watermerk
CSS-sjablonen zijn een geweldige snelkoppeling voor ervaren webontwerpers die een basislay-out in gedachten hebben en meteen willen beginnen met stylen.
Ze zijn ook perfect voor iedereen die nieuw is in webdesign. Als je de weg kent in HTML en CSS, maar nog niet het vertrouwen of de kennis hebt om een geheel nieuwe site te bouwen, dan is een CSS-sjabloon zowel een gemakkelijke manier om een fantastisch uitziende site te krijgen als een geweldig leermiddel.
Je kunt het beschouwen als een werk in uitvoering. Begin met de lettertypen uitschakelen en het kleurenschema wijzigen , en na verloop van tijd kunt u bestaande elementen opnieuw ontwerpen, nieuwe toevoegen, enzovoort. Er is geen betere manier om iets te leren dan door praktische, hands-on ervaring.
Gebruik je CSS-sjablonen bij het bouwen van websites? Wat zijn je favoriete plekken om ze te vinden? Deel uw ervaringen en tips met ons in de opmerkingen.
Deel Deel Tweeten E-mail Uw Windows-pc opschonen met de opdrachtpromptAls uw Windows-pc weinig opslagruimte heeft, ruimt u de rommel op met deze snelle opdrachtprompthulpprogramma's.
Lees volgende Gerelateerde onderwerpen- Programmeren
- Webdesign
- CSS
Andy is een voormalig printjournalist en tijdschriftredacteur die al 15 jaar over technologie schrijft. In die tijd heeft hij bijgedragen aan talloze publicaties en copywritingwerk voor grote techbedrijven. Hij heeft ook deskundig commentaar geleverd voor de media en heeft panels gehost op branche-evenementen.
Meer van Andy BettsAbonneer op onze nieuwsbrief
Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!
Klik hier om je te abonneren