We maken een template voor een bouwonderneming.
Voorbereiding: plaats mapje “bouw” in je drupalmap -> drupal/sites/all/themes (zie onderaan voor de nodige bestanden)
Canvaskleur: #2C3033
1// Teken een rechthoek (980x235): #3C4145
Geef de rechthoek een structuur:
2//
Teken een afgeronde rechthoek (640x65) - #2C3033 (geen structuur!
3// Teken een witte rechthoek (640x650) en leg deze op de vorige rechthoek, zodat je de onderste afgeronde hoeken niet ziet.
4// teken een rechthoek (978x465) met kleur #F2F2F2.
Sleep de laag van deze laatste rechthoek achter die van de anderen.
Voeg het logo in via Bestand – Importeren.
Voeg tekst toe in lettertype naar keuze (bv Bauhaus93)
Teken slicen (segmenten) op de layout.
Kijk na of het document ingesteld staat op JPEG – hogere kwaliteit.
Ofwel bij de canvaseigenschappen, ofwel in het paneel “optimaliseren”
Bestand – Exporteren.
In map bouw/images
Sla op als “layout.png” in de map bouw/bron.
We
denken na over de divstructuur. We hebben meerdere opties.
Optie 1:
1 wrapper – 2 header – 3 container – 4 zoek – 5 menu – 6 links – 7 rechts ! rechts krijgt negatieve marge
OPTIE 2 (*voorkeur*)
1 wrapper – 2 links – 3 rechts – 4 zoek – 5 linksblok – 6 menu – 7 slideshow – 8 inhoud
We kiezen voor OPTIE 2.
Start Dreamweaver op.
Maak een nieuwe html-pagina en sla op als layout.html.
Maak de div-structuur.
<div id="wrapper">
<div id="inwrapper">
<div id="links">
<div id="zoek"></div>
<div id="linksblok"></div>
</div>
<div id="rechts">
<div id="menu"></div>
<div id="slideshow"></div>
<div id="inhoud"></div>
</div>
</div>
</div>
We hebben nog nood aan een extra div: inwrapper (omdat we 2 achtergrondfiguren hebben).
We maken de CSS-code.
De CSS-code:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
background-color: #2C3033;
}
#wrapper {
background-image: url(images/wrapper.jpg);
background-repeat: repeat-y;
margin: auto;
width: 980px;
overflow: hidden;
}
#inwrapper {
background-image: url(images/header.jpg);
background-repeat: no-repeat;
width: 980px;
overflow: hidden;
}
#links {
float: left;
width: 300px;
}
#rechts {
float: left;
width: 680px;
}
#zoek {
height: 50px;
width: 300px;
margin-top: 30px;
text-align: center;
}
#linksblok {
width: 280px;
margin-left: 10px;
margin-top: 170px;
}
#menu {
height: 35px;
width: 625px;
margin-top: 23px;
margin-left: 25px;
padding-top: 12px;
}
#slideshow {
height: 200px;
width: 625px;
margin-top: 20px;
margin-left: 25px;
overflow: hidden;
}
#inhoud {
width: 625px;
margin-top: 20px;
margin-left: 25px;
}
Bestand – Alles opslaan
Neem het worddocument (van html naar drupal7template) erbij.
Ga naar Fireworks. Open layout.png.
Afbeeldingsgrootte aanpassen naar 300px breed.
OK.
Opslaan als screenshot.png (samengevoegde png) in map bouw.
Maak in Dreamweaver een nieuwe HTML-pagina. Verwijder de code.
Plak deze code:
; $Id$
name = Leeg
description = Beschrijving
core = 7.x
engine = phptemplate
stylesheets[all][] = style.css
regions[highlighted] = highlighted
regions[sidebar_first] = sidebar first
regions[sidebar_second] = sidebar second
regions[content] = content
regions[help] = help
regions[header] = header
regions[footer] = footer
De blokposities:
Resultaat:
; $Id$
name = Bouw
description = Template voor Bouw
core = 7.x
engine = phptemplate
stylesheets[all][] = style.css
regions[zoek] = zoek
regions[links] = links
regions[menu] = menu
regions[slideshow] = slideshow
regions[content] = content
Sla op als bouw.info, in de map bouw.
Kopieer html.tpl.php uit een vorige oefening, naar de map “bouw”.
Sla layout.html op als page.tpl.php
Verwijder alle overbodige code (alles tem <body>, alles vanaf </body> en de tekst):
Enkel dit blijft over (divs):
<div id="wrapper">
<div id="inwrapper">
<div id="links">
<div id="zoek"></div>
<div id="linksblok"></div>
</div>
<div id="rechts">
<div id="menu"></div>
<div id="slideshow"></div>
<div id="inhoud"></div>
</div>
</div>
</div>
Plak de nodige codes (zie worddocument)
Sla alles op.
Template instellen:
Blokken instellen: