Personal Design Training
Professionele design trainingen bij op maat of privé les van een ervaren professional en vakdocent?
<<< terug1 Head Section2 Body Section3 Responsive CSS
Een website die zich in vormgeving aanpast aan de verschillende schermbreedtes van apparaten, zoals smartphones en tablets. Maar ook de meeste App's hebben een responsive layout.
TIP: schuif het browservenster groter en kleiner om het Responive effect te ervaren...
De techniek waarmee responsive websites worden gebouwd is HTML (Hyper Text Markup Language) en CSS (Cascading StyleSheets). Responsive Design zal de standaard worden voor websites en apps. Daarom leer je dus wat dit is en hoe het werkt, zodat je in de beroepspraktijk weet waar je als vormgever van websites over praat.
Door knippen en plakken van HTML- en CSS-code, leer je hoe de opbouw van een responsive webpagina in elkaar zit. Je maakt een professionele HTML-pagina met een:
Aan de HTML-content koppel je Cascading StyleSheets (CSS). Hierdoor ervaar je de kracht van Cascading StyleSheets in de vormgeving.
Met behulp van enkele korte opdrachten pas je zelf de CSS aan. Hierdoor wordt je vaardiger in het werken met CSS. Ook vul je de pagina met eigen tekst en afbeeldingen, video's en widgets. Zodra je de basis van CSS een beetje onder de knie hebt, kun je blijven oefenen en misschien zelf een eigen ontwerp omzetten via HTML en CSS!
Wil je nog extra interactiviteit? Dan kun je ook leren hoe je een slideshow-script of een foto-popup-script aan je webpagina koppelt. Zelfs het koppelen van een simpel CMS(tekst-beheer)-systeem behoort tot de mogelijkheden. Zo krijg je een complete professionele, responsive website!
Nee. Als vormgever hoef je dit niet te kunnen, al wordt de technische kennis steeds vaker gevraagd door ontwerpbureau's. Het belangrijkste is dat je een website kunt vormgeven en daarbij ook een voorstel doet voor verschillende schermbreedtes (mockup). Het bouwen laat je meestal aan een programmeur over. Maaaaaarrrr.....
Zoals je ook iets over druktechnieken (resolutie & drukkleuren) moet weten om een goed ontwerp voor drukwerk te maken, zo moet je ook basiskennis van de webtechniek (html & css) hebben om een goed ontwerp voor een website te kunnen maken. Een beetje techniekkennis is dus echt noodzakelijk voor een vormgever. Bijvoorbeeld om goed met een programmeur te kunnen overleggen.
Door de onderstaande opdracht uit te voeren ontdekt je, door kopieren en plakken, de opbouw van een HTML-document. Ook ervaar je hoe krachtig vormgeving met CSS werkt. Met behulp van enkele korte opdrachten pas je zelf de CSS aan. Hierdoor wordt je vaardiger in het werken met CSS. Ook vul je de pagina met eigen tekst en afbeeldingen, video's en widgets. Hierdoor wordt je vaardiger met HTML.
Veel code kopieren en plakken is de beste manier. Omdat het over internet-techniek gaat, zijn kennis en scripten eenvoudig te Googlen. Zodra je dan de gewenste code gevonden hebt, kun je deze kopieren en plakken in je eigen HTML documenten.
TIP: Een goede website om de basis van de HTML- en CSS-code te leren is: w3schools.com
<tag open> tekst of afbeelding</tag sluit>Voorbeelden van tag's zijn:
<html> <head> <body> <header> <section> <article> <footer> <h1> <h2> <p>Let tijdens het bouwen op de open- en sluit tag's. Probeer de logica te zien
afmeting in pixels | 72dpi | sRGB
background: rgba(255,255,255,0.8);
Verschillende manieren om commentaar-tekst toe te voegen
in HTML code: <!-- commentaar -->
in CSS code : /* commentaar */
in PHP/JavaScript code per regel: // commentaar
Zonder veel kennis en ervaring in de webtechniek, bouw je in een aantal stappen toch zelf je eigen Responsive website. Deze kun je later uiteraard gaan vullen met tekst en beeld en aanpassen aan je eigen wensen. Door het volgen van de stappen en aanpassen van de code leer je vanzelf hoe de HTML en CSS werkt. Als kers op de taart krijg je er nog een paar mooie layout-settings bij waarmee je verschillende effecten en layouts krijgt! Ook zijn er instructies voor een slideshow, foto-popup (fancybox) en koppeling met een gratis online CMS (tekstbeheer).
Kortom, in een aantal stappen bouw je hier gratis en voor niks een responisive HTML5 website, zonder veel kennis van de code. Deze website kun je dan ook nog eens gebruiken voor je eigen portfolio!
Veel plezier en maak er wat moois van!!
Om snel fouten op te sporen of het effect van een wijziging in je HTML en CSS code te zien, kun je gebruik maken van de browser plug-in Firebug.
Hiermee kun je code wijzigen en direct het resultaat in je scherm zien. Let op: de code wordt niet echt gewijzigd in je documenten. Dat doe je uiteraard zelf, zodra je de fout gevonden hebt, of weet op welke manier je de code wilt wijzigen. Zodra je de pagina in je browser ververst, worden je tijdelijke aanpassingen in de code weer terug gezet naar de code in jouw documenten. Onmisbare tool voor elke website bouwer!