We maken een drupaltemplate voor een Italiaans restaurant “Dolce”.
Maak een nieuw document in Fireworks
Teken een rechthoek van 980x30. Kleur naar keuze.
Teken eronder 980x320. Kleur naar keuze.
Teken een rechthoek van 980x40 (onderaan). Kleur naar keuze.
Teken een rechthoek van 720x280 en teken deze over de header. Plaats in het midden.
Teken een rechthoek van 200x280, met rand. Plaats aan de rechterkant.
Zoek een foto op google over pasta, toscane, enz.
Neem een foto die breder is dan 800px.
Vergroot de foto en kopieer. Plak in Fireworks.
Selecteer de foto.
Klik onderaan op het vierkantje. Typ 700 in bij B (breedte). De foto wordt 700px breed en de hoogte wijzigt automatisch, zodat de verhoudingen bewaard blijven.
Teken een rechthoek op de foto (700x260). Knip de rechthoek.
Selecteer de foto. Kies Bewerken – Plakken als masker.
We hebben nu een masker gemaakt. Dit masker staat in het lagenpaneel naast de foto. Je kan het slotje tussen foto en masker uitvinken en zo nog de foto verplaatsen. Je kan ook eerst een selectie in de foto maken om bv de bomen uit te snijden.
Mogelijk resultaat 1:
Mogelijk resultaat 2:
Kies nu zelf uw kleuren.
Kies kleuren in de foto of kies een kleurencombinatie in het Kulerpaneel.
(venster – extensies – Kuler)
Teken een pad:
Maak het pad donkergrijs en zet de rand op doezelaar=10.
Versleep het pad (onder de witte rechthoek en foto)
Teken nog een rechthoek die net zo groot is als het canvas: 980x720. Enkel een rand (kleur naar keuze).
Resultaat:
Model: wrapper, header, container, links, rechts en footer
Segmenteer en geef de segementen een naam.
Bestand – Exporteren
In map images
Klik op Opslaan.
Ga naar Dreamweaver.
Maak een nieuwe HTML-pagina. Sla op als layout.html.
Maak de divstructuur:
<div id="wrapper">
<div id="header"></div>
<div id="container">
<div id="links"></div>
<div id="rechts"></div>
</div>
<div id="footer"></div>
</div>
We voegen nu de CSS toe.
1: klik in body
2: klik op +
3: stel juist in
Sla op als style (in de hoofdmap)
Geef de opmaak aan de body:
Stel in en kies OK.
Klik in wrapper. Klik op +.
Kies OK. Stel nu de opmaak in.
De volledige CSS-opmaak:
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 11pt;
background-color: #7F5A2D;
}
#wrapper {
background-image: url(images/wrapper.jpg);
background-repeat: repeat-y;
margin: auto;
width: 980px;
}
#header {
background-image: url(images/header.jpg);
background-repeat: no-repeat;
height: 388px;
width: 980px;
padding-top: 7px;
text-align: center;
}
#container {
width: 980px;
}
#links {
float: left;
width: 745px;
padding-right: 10px;
padding-left: 10px;
}
#rechts {
float: left;
width: 180px;
padding-right: 10px;
padding-left: 10px;
}
#footer {
background-image: url(images/footer.jpg);
background-repeat: no-repeat;
clear: both;
height: 35px;
width: 980px;
padding-top: 25px;
color: #FFF;
text-align: center;
}
Resultaat in Dreamweaver:
Resultaat in de browser: