Een Template maken vanaf nul
Maak een nieuwe map “fruit” in sites/all/themes van je drupalsite.
Open in Fireworks moodboard-fruit.png (zie oefeningen zelfstudie.be)
Selecteer de kleurvakken en groepeer (wijzigen – groeperen).
Transformeer en plaats rechtsboven. We beperken ons in deze lay-out tot deze kleuren.
Versleep het logo naar links en de tekst ook.
Vergroot het canvas naar 960x600 (knop linksboven)
Tussentijds resultaat:
Teken een rechthoek (960x 85). Plaats deze bovenaan achter het logo.
Klik als kleur de achtergrondkleur van het logo aan en verwijder de rand.
Teken een rode (960x7) (voorlaatste kleur) rechthoek onder de vorige.
Geef het canvas de derde kleur.
Teken een witte rechthoek (805x300) met grijze rand. Zet op dekking 20% en centreer.
Teken een witte rechthoek (830x325) zonder rand. en centreer.
Teken een laatste rechthoek onderaan. Deze vult de ruimte die rest op. Maak deze rechthoek groen (verloop van de twee eerste kleuren)
Typ de knoppen in (Arial – 20 – laatste kleur)
(dit is puur om een idee te krijgen van de navigatielay-out. We moeten deze zo dadelijk terug verbergen.
Teken een vorm met de pen.
Geef de vorm een verloop van fel naar donkerrood (2 laatste kleuren).
Sleep achter de knop (home) en maak deze wit.
Het vectoriële werk zit erop!
Voorlopig resultaat:
Nu komen de bitmaps erbij.
Kies telkens voor Bestand – Importeren en voeg een figuur in. Neem van elke fruitsoort één afbeelding.
Selecteer telkens het wit in de figuur met de toverstaf en verwijder. Pas de tolerantie telkens goed aan en kies voor Anti-Alias als randstijl.
Indien niet de volledige achtergrond (wit) verwijderd is, selecteer je dit met de veelhoeklasso.
Transformeer (verklein) de foto’s en plaats ze op een goede plek.
Je kan ook steeds een afbeelding spiegelen of draaien.
Teken nog schaduwen via ovalen (grijs, geen rand, doezelaar 20px).
Plaats deze ovalen achter het fruit.
Tot slot nog het pronkstuk. Zet het lettertype van Fruitfactory in eentje naar keuze. Je kan er eentje downloaden op 1001freefonts.com (bv earwing factory, …)
Resultaat:
De lay-out is klaar, we moeten deze nu segmenteren
Slice/segmenteer alles.
Exporteer de slicen.
“Alleen afbeeldingen” kiezen
“Inclusief gebieden zonder segmenten” uitvinken.
Teken best een schema, waarop je de groottes en breedtes van de slicen noteert:
Maak de divs in Dreamweaver (in HTML).
Klik in wrapper en maak en nieuwe CSS-regel aan.
id en wrapper worden automatisch ingevuld.
Kies onderaan voor Nieuw stijlpaginabestand. Klik op OK.
Sla op in de templatemap.
Maak nu de volledige CSS aan.
Achtergrondfiguur – no repeat
Positioneren: 960px breed en hoogte van de figuur en relatief
Container:
Positioneren: relatief en 960px breed
*** Tip voor links en rechts: maak 2 segmenten in fireworks en klik erop. Je kan dan de breedte en positie (x) van het segment zien.
Links
Positioneren: relatief en 600px breed
Kader: marge links (zie x in fireworks, bv 81px), float left, evt een linkerpadding
Rechts
Positioneren: relatief en 200px breed
Kader: marge links (zie x in fireworks, bv 81px), float left, evt een linkerpadding
Footer
Achtergrondfiguur, no repeat
Positioneren: relatief, 960 px breed en hoogte (zie afbeelding).
Kader: Clear: both
Body
Naar keuze: achtergrondkleur, lettertype, tekstgrootte, tekstkleur, enz.