Wie bekend is met de ontwikkeling van websites, weet dat je meestal niet begint met de HTML-structuur. In plaats daarvan pak je een grafisch programma en bouwt daar het ontwerp van de pagina op. (Als je in een bureau werkt, ontvang je het ontwerp van de ontwerper of de klant). Daarna is de opdracht om van dit ontwerp de pagina te bouwen. Dat is waar het nu om draait.
In verband met het nabouwen van ontwerpen zullen jullie steeds weer de twee termen Slicing en Dicing tegenkomen. Daarmee wordt eigenlijk niets anders bedoeld dan dat je het sjabloon of het ontwerp neemt, het in je grafisch programma opdeelt en dan weer samenvoegt via HTML.
Het juiste grafische programma
Nou ja, iedereen heeft zijn voorkeuren voor welke software hij of zij het liefst gebruikt. Zo ook voor grafische programma's. In verband met professioneel webdesign zit het echter een beetje anders in elkaar. Daar wordt bijna uitsluitend met Photoshop gewerkt. In feite worden de meeste ontwerpen opgeslagen als PSD-bestand. En juist dit PSD-formaat kan niet in alle programma's worden geopend of bewerkt.
Wie geen Photoshop heeft, is overigens niet helemaal hulpeloos. Een mogelijke alternatief is GIMP. Het programma kan gratis worden gedownload van de website http://www.gimp.org/. Ik zal jullie de basisstappen laten zien om een lay-out te maken aan de hand van GIMP. Dit werkt op een vergelijkbare manier maar ook in Photoshop.
Je eigen lay-out maken
Allereerst bedenk je de basisaspecten van het ontwerp:
• Hoe breed moet de lay-out zijn?
• Hoeveel kolommen moet het bevatten?
Maak vervolgens het werkgebied via Bestand > Nieuw en stel de grootte in. Hoewel het door mij gemaakte ontwerp "schermvullend" zal zijn, heeft de daadwerkelijke inhoud een breedte van slechts 1000 pixels. Als lay-out hoogte stel ik 887 pixels in. (Waarbij de hoogte van de website zich later sowieso zal oriënteren op de inhoud).
Met OK worden de gegevens bevestigd. Hiermee ligt het werkgebied klaar en kan worden gevuld met inhoud. (Voor de duidelijkheid werk ik in de schets met een grijze achtergrond. Deze zal later niet zichtbaar zijn op de website).
Een heel typisch element dat op de website thuishoort, is het logo dat meestal als afbeelding beschikbaar is. Om het in het ontwerp in te voegen, selecteer Bestand > Openen en selecteer je logo, dat in een van de formaten PNG, GIF of JPEG beschikbaar moet zijn. Bevestig de selectie met Openen. Kopieer vervolgens het logo naar het klembord door op Ctrl+C te drukken. Schakel vervolgens over naar het eigenlijke webdesign en druk daar op Ctrl+V. Het ingevoegde logo zal nog niet op de gewenste plaats staan. Met hulpmiddelen zoals de Verplaats-tool kan je het echter probleemloos naar de juiste positie verplaatsen.
Als de afbeelding niet kan worden verplaatst, moet je eerst de laag activeren. De bijbehorende instellingen vind je onder Venster > Dockable Dialogues > Lagen .
Voor een betere verdeling zou je hulplijnen moeten weergeven. Klik met de muis op de Liniaal en sleep deze met ingedrukte linker muisknop naar de gewenste positie.
Je kan nu zoveel hulplijnen tekenen als je wil, waarlangs je de elementen van de website kan uitlijnen.
Maak nu een nieuwe laag aan. Deze laag moet het bovenste menu bevatten.
Als naam kan je Bovenste menu opgeven. Maak de laag aan met OK. Selecteer het Selectie-rechthoek en teken het gebied waarin de navigatie moet worden ingevoegd.
In het huidige voorbeeld ga ik ervan uit dat de achtergrond van het bovenste menu een verloopkleur krijgt. Klik hiervoor op Verloop: Selectie met een verloopkleur (vullen).
De verloop moet verlopen van grijs naar zwart. De bijbehorende kleuren kan je instellen via de Kleurkiezer . Als verloopstijl stel ik van voor naar achter in, dus van de voorgrond- naar de achtergrondkleur. Houd nu de Ctrl -toets ingedrukt en trek een lijn van boven naar beneden in het geselecteerde gebied. Nadat de linker muisknop is losgelaten, heeft het gebied het gewenste verloop.
In principe heb je nu twee opties:
• Je laat het gebied voor de navigatie zoals het is.
• Je voegt de afzonderlijke menu-items toe, zodat je al in de schets nauwkeuriger kan zien welke lettertypes, enz. je gebruikt.
Welke van deze twee opties je kiest, ligt uiteindelijk natuurlijk bij jou. Als je het ontwerp echter bijvoorbeeld aan je klant wil presenteren, zou ik je hoe dan ook aanraden om de menu-items toe te voegen. Er is namelijk vaak een gebrek aan verbeeldingskracht bij veel klanten op dit punt.
Selecteer eerst een lettertype. In GIMP vind je de bijbehorende instellingen onder Venster > Dockable Dialogues > Lettertypen .
In de loop van deze serie is al ingegaan op het probleem van lettertypen in verband met CSS en HTML. Uiteindelijk kan je als webdesigner theoretisch elk gewenst lettertype opgeven. Of deze echter daadwerkelijk aanwezig is op de computer van de sitebezoekers en dus kan worden weergegeven, weet je niet. Daarom zijn de resultaten - vooral als je zeer exotische lettertypen gebruikt - moeilijk te controleren. In deze serie zal ik echter nogmaals ingaan op dit aspect wanneer we het hebben over de lettertypen van de voorbeeldwebsite. Voor de huidige lay-out kies ik in ieder geval voor de volgende instellingen:
• Verdana bold
• 20 pixels
• Witte tekstkleur
Je kunt op deze manier nu de individuele menu-onderdelen toevoegen. Het is het beste om de laag waarin het eerste menu-onderdeel is opgenomen te kopiëren en als nieuwe laag in te voegen. Vervolgens kun je de tekst van de laag aanpassen. Zo maak je het bovenste menu.
Het bovenste menu moet een hover-effect krijgen. Als je dus met de muisaanwijzer over de afzonderlijke menu-onderdelen beweegt, verandert de achtergrondkleur. Ook dit aspect moet natuurlijk worden gevisualiseerd in het ontwerp. Hiervoor stel je de gewenste hover-kleur in en kopieer je een van de bestaande menu-lagen. Aan deze laag wijs je de kleur toe. In het huidige voorbeeld ga ik uit van een blauw kleurverloop. Vervolgens voeg je de tekst van het menu-onderdeel in. Op die manier krijg je al een gevoel voor hoe het menu er uiteindelijk uit zal zien.
