D2 les 08

Opmaak met figuren

We kunnen reeds goed werken met figuren in onze inhoud. Figuren worden echter ook gebruikt in de opmaak. Een logo bijvoorbeeld of een achtergrond figuur. In deze les gaan we een figuur een transparante achtergrond geven en een achtergrondafbeelding maken met kleurverloop. Ik haal van Google deze figuur: ooievaar8.jpg (trefwoord= ooievaars)

We openen pixlr.com, een online gratis app om afbeeldingen naar je hand te zetten. Heb je Photoshop of Photoshop Elements, ga je gang..

We gaan naar de afbeelding die we reeds hebben opgeslagen:

Eerst een beetje bijsnijden. 2X klikken en het is in orde..

Daarna kiezen we het toverstafje. Dit selecteert alle pixels binnen een bepaald bereik. Dit kan je dus aanpassen en scherper zetten als je wil.

Je ziet dat alle blauwe tinten werden geselcteerd.

Als we een transparante laag willen maken moet we een laag dupliceren:

Nu hebben we er 2. Dubbelklik op het slotje om het bewerkbaar te maken.

Druk nu op delete op je toetsenbord om de blauwe kleur te verwijderen.

Als je nu de achtergrond wegvinkt heb je de typische blokjesvoorstelling van een transparante laag.

De figuur is nog te groot

Aanpassen naar wens. Ik heb 300 X 150 px genomen.

Opslaan als png is het best.

Het resultaat na uploaden op de site.

Nu gaan we een figuur maken om aan de linker zijkant te zetten. We gaan daarvoor de kleuren gebruiken die reeds op de site gebruikt worden door het thema. Maak een print van de site en sla deze op. Open het in pixlr.com.

maak nu een nieuwe afbeelding met de gewenste afmetingen:

Schik je venster..

De verloop tool ziet er zo uit:

Ik kies voor 3 kleuren.

Klik telkens op zo'n huisje en daarna op het kleurvlakje:

Je krijgt een pipetje waarmee je de kleur kunt halen vanuit je afbeelding van het thema. Zo kan je de kleuren instellen. In deze oefening moet de rechtse kleur overeenkomen met de achtergrond van je body kleur. Sleep tenslotte met d emuis van links naar rechts over de nieuwe afbeeldingen en het wonder geschiedt... Nu akn je dit gebruiken als zijkant in je CSS.

Thema opmaak

In deze les gaan we zeer praktisch te werk. We maken dit na.. het is een oefening over thema opmaak. We werken met het professinal responsive theme. Met Pixlr.com maken we figuren met kleurverloop en zorgen we voor de ooievaar met doorzichtige achtergrond. Page theme zorgt er voor dat we het thema enkel toepassen op de gewenste link. Met CSS injector doen we de rest. De footer staat ook verborgen. Tevens hebben we de figuren een schaduw meegegeven. Alle info over CSS zie je op http://www.w3schools.com/css/

We gaan ook een 'responsive' kolommen inhoudstype maken:

Er is ook een extra oefening om de basisprincipes wat in te oefenen.. In de E-learning inhoud vind je de werkwijze.. Er is ook een figuur met kleurverloop.

 

Fonts

De lettertypes op een website zijn beperkt en hangen zelfs van de browsers af. Tenzij je het lettertype zelf in de CSS meegeeft. Een andere manier is om de CSS van een externe site te halen. Google fonts is gebaseerd op zo'n principe. Vroeger was dit een afzonderlijke module. Nu is dit geïntegreerd in de @font-your-face module. Na installatie kan je tal van mogelijkheden aanvinken. Sommige zijn echter betalend. Geen paniek, het wordt uitdrukkelijk vermeld.

Stel alles zo in. Zo zie je wat gratis is en wat niet.

 

Via Uiterlijk kom je op de instellingen.

Je krijgt telkens een voorbeeld van het lettertype.

Schakel er eentje in om uit te testen.

Nu moet je ook melden wanneer je het gaat gebruiken. Ik wil het bij de H1 tag en voor mijn Site naam. Desnoods kijk je via de inspector welke class of ID, je moet aanspreken.

Je kunt een overzicht krijgen wanneer je welke font inschakelt.

Hoe werkt dit nu? De broncode verraadt dat je de fonts van een externe site haalt. Daarom is ze ook multibrowser..

Aclonica toegepast op H1

en op mijn site naam.

Bootstrap

Bootstrap is een geheel van HTML, CSS en Javascript dat als een pakket wordt aangeboden. Je kunt er alles mee doen wat een moderne, responsive site nodig heeft: kolommen, afbeeldingen, slideshows, knoppen, menu's,... Je moet juist weten hoe je de classes en scripten aanspreekt. Maar er is meer... In plaats van het pakket te downloaden en te installeren op jouw site, kan je het ook van een externe site gaan halen. Omdat deze site zwaar belast zou worden door de grote aantallen gebruikers is er CDN. (content delivery network of content distribution network). Het bootstrap pakket is op vele lokale servers te halen. Omdat er ook veel sites gebruik van maken zit bootstrap waarschijnlijk ook in je cache van je browser. Zo win je aan snelheid. Je kunt ook natuurlijk bootstrap installeren, maar dan mis je de updates en nieuwe zaken die er worden aan toegevoegd. Wij gaan voor de CDN. Links zie je de normale server instellingen, rechts de CDN aanpak.

Omdat we het warm water geen twee keer willen uitvinden, maken we gebruik van de goede handleiding op W3school. We overlopen de handleiding en kopiëren de interessante code op onze eigen website.

Daarvoor activeren we de PHP module die in de kern zit ingebouwd. Van dan af kunnen we dit selecteren. Full HTML werkt slechts 1 keer. Daarna filtert ze de scripts eruit!

Bekijk aandachtig deze code. Zie je waar de css en de js bestanden zitten? Kopieer

en plak in de body. (ik heb een afzonderlijk inhoudstypeaangemaakt met slechts een body veld.)

Zo gaan we de meeste items verkennen. Hieronder de moeilijkste.. Het kolomsysteem telt 12 kolommen. Al naar gelang xs, sm, lg (tablet, phone, pc) kan je een andere instelling kiezen. Wij kennen dit al van het Adaptive theme..

Er zijn ook kant en klare afbeeldings CSS'sen..hier thumbnail.

En circle

Je kunt ook een typisch blikvanger instellen. Het spreekt voor zich dat hier de kleur kan ingesteld worden.

Menustructuren..

Zelfs symbolen werden ingebouwd.

Een slideshow. Deze maakt gebruik van de meegeleverde javascript.

Conclusie: Bootstrap is interessant voor mensen die zelf een thema willen maken. Er bestaat ook een Drupal Bootstrap theme die die reeds voor een deel heeft ingebed.