Design Trainingen

Old-School XHTML Website Dreamweaver

<<< terugHTML basicsCSS basicsdreamweaver basicsdreamweaver xhtml websiteresponsive html5 websiteinteractive code tricswordpress website hosting & webserverwebsite beheer & cms


Het Ontwerp dat in deze Masterclass wordt gebruikt:

 

0 Sitemanager instellen

Om je website te overzichtelijk te beheren stel je voordat je begint de SITE MANAGER in. Deze helpt je bij correcte links naar afbeeldingen en html-pagina's. Begin met het aanmaken van een nieuwe site via het menu MANAGE SITES.

 

1 Start met bouwen: de HTML-pagina

 

Start met bouwen van de website met XHTML en CSS (Cascading Style Sheets) in Adobe Dreamweaver.

 

2 Linken van pagina's

Het linken van pagina's is de basis voor het internet. Via een eenvoudige tekst-link koppel je twee html-pagina's met elkaar.

In het veld Links in het Properties Venster vul je dus altijd de pagina-naam + extensie (bijv. pagina_naam.html) of een link naar een andere website (bijv. http://www.google.com) in.

Als je een link maakt naar een pagina toe, denk dan ook aan een link terug. Dat is wel zo vriendelijk...

 

3 Achtergrond afbeelding en kleuren van de 'body'

Bewerk via de body-tag de achtergrondkleur, afbeelding en typografie. Je schrijft nu INLINE CSS (Cascading Style Sheets). Met CSS bestuur je de vormgeving van een website. 
TIP: Gebruik eens een half transparante afbeelding (png24) als achtergrond afbeelding in combinatie met de achtergrondkleur...

 

4 Inline CSS

Met INLINE CSS (Cascading Style Sheets) kun je per pagina afzonderlijk de vormgeving aanpassen.
De INLINE CSS code staat meestal in de HEAD-section van de HTML-code.

 

5 Afbeeldingen plaatsen en link op afbeelding maken

Afbeelding plaatsen en linken naar bijvoorbeeld een website.
Gebruik op internet alleen de volgende bestandsformaten voor afbeeldingen: .jpg - .gif - .png - .swf.
Zet afbeeldingen in Photoshop op het goede formaat en grootte.

Indien je een link maakt, kies ook 'Target _Blank'.
De link wordt in een nieuw venster geopend i.p.v. in hetzelfde venster.

Met een ImageMap kun je zelf een gebied tekenen voor een link.
Hierdoor kun je meerdere links op 1 afbeelding maken.

 

6 Koppelen van Externe CSS-pagina aan HTML-pagina

Met EXTERNE CSS (Cascading Style Sheets) in een gekoppeld css-document wijzig je op 1 plaats alle vormgeving voor alle html-pagina's tegelijk. Dit werkt efficiënter dan inline css-code per pagina. Het CSS-document wordt via een link in de HEAD-section gekoppeld aan alle pagina's.

 

7 Centreren van de site met de Container Div

Haal de link, tekst en afbeelding weg. Die zijn niet meer nodig. Start met de vormgeving in CSS:

De eerste div is in de meeste ontwerpen de #container. Deze wordt gebruikt om de website mooi in het midden van de browser te laten staan en is 994 pixels breed. Een mooie breedte voor schermen van 1024 pixels breed. Het site ontwerp wordt bij voorkeur binnen deze breedte gemaakt.

Zet de margin-left en margin-right op AUTO. Dan blijft de container in het midden van de browser staan.

 

8 Invoegen van de Header Div

De tweede div is de #header. Deze wordt vaak gebruikt voor een logo of sfeerafbeelding (slideshow).
De breedte hoeft niet te worden ingevuld, omdat de header vanzelf de breedte van de container kiest.
De div #header is 'genest' in de div #container.

 

9 Invoegen van de Menu Div

De container div #menu wordt gebruikt om de menuknoppen bij elkaar te houden. In dit ontwerp is dat een horizontaal menu over de volle breedte van de div #container, dus daarom hoeft er geen breedte te worden ingevuld. Net als de div #header. Voor een verticaal menu geef je wel een breedte op (bijvoorbeeld 250 pixels).

Ook deze div is 'genest' in de div #container. Ook de volgende div's die gemaakt worden, zullen zijn genest.

 

10 Invoegen van Tekstblok met Margin en Padding

Het tekstblok voor de algemene pagina-teksten.
Zorg dat er altijd een hoog contrast is tussen de tekstkleur en de achtergrond kleur. Maar... witte tekst op een zwarte achtergrond heeft vaak weer een te hoog contrast. Kies dan bijvoorbeeld voor licht-grijze tekst.

Het tekstblok staat 20 pixels van de rand. Deze ruimte buiten om de div heet: MARGIN
De tekst in het tekstblok heeft ook 15 pixels ruimte tot de rand. Deze ruimte binnen de div heet: PADDING
LET OP: de hoeveelheid padding wordt opgeteld bij de breedte en hoogte van de div. Met padding wordt de div dus hoger en breder.

 

11 Floaten van twee Div's

De div #foto komt aan de rechterkant van het tekstblok. Hiervoor krijgen BEIDE blokken de optie: FLOAT:LEFT waardoor ze naast elkaar komen te staan.
Door de optie FLOAT komen div's, maar ook afbeeldingen, dus naast elkaar te staan i.p.v. standaard onder elkaar. Als je een afbeelding Float, zal de tekst om de afbeelding heen gaan staan in plaats van er onder of er boven.

 

12 Invoegen van de Footer Div met Clear Both

Invoegen van de div #footer.
Door CLEAR:BOTH te geven aan de div #footer komt deze onder alle voorgaande div's te staan. De CLEAR heft de float van de vorige div's op.

De div #container en div #tekst worden variabel in hoogte als je hun hoogte in de CSS verwijdert. De footer wordt dan naar benden gedrukt als er meer tekst of beeld komt te staan. Zo past de website zich in hoogte altijd aan de hoeveelheid tekst aan.

 

13 Stijlen van een link tot een mooie menuknop

Met behulp van CSS maak je van je saaie blauwe links de mooiste menu knoppen. Inclusief rollover!

Je kunt in een knop ook een achtergrond afbeelding inzetten. Denk dan aan een subtiel verloop tintje of licht patroon.

 

14 Stijlen van de links in de Footer Div

De links in de footer zijn meestal bijzaak en klein. Het is wel mooi om ze met CSS te stylen. Dit werkt hetzelfde als de links in het hoofdmenu. Je geeft er alleen geen achtergrondkleur en hoogte-breedte aan.

 

15 Kleine Inline CSS-wijzigingen in de HTML-pagina

Bij kleine pagina-gebonden aanpassingen in de vormgeving, maak je weer gebruik van INLINE CSS. Deze kan tussen de HTML-code worden geplaatst.

 

16 Stijlen van een verticaal submenu

De opbouw van dit snelmenu is bijna hetzelfde als van het hoofdmenu. Dit verticale menu wordt tussen de div #menu en de div #tekst geplaatst. Dit gaat het makkelijkste als je de cursor in de code op de goede plek zet, voordat de div #snel_naar wordt ingevoegd.

Om de knoppen een vaste breedte te geven is het wel noodzakelijk om de optie DISPLAY:BLOCK aan te zetten. Door de div #snel_naar een vaste breedte te geven worden de knoppen vanzelf onder elkaar gezet.

 

17 Ontwerp in Photoshop

De CSS blokken zijn nu grofweg ingedeeld... Tijd om het ontwerp er bij te pakken!

Het ontwerp voor een website wordt bij voorkeur in Photoshop gemaakt. Photoshop is PIXEL-BASED en het internet is dat ook. Daarnaast ondersteunt Photoshop halve pixels waardoor rondingen in de browser 'strakker' uit zien dan bijvoorbeeld rondingen vanuit een VECTOR-BASED programma (Illustrator/InDesign).

TIP: deel je Photoshop ontwerp in duidelijke lagen en laagmappen in. Dit is handig voor een programmeur of gewoon voor jezelf.
TIP: werk je ontwerp zo precies mogelijk uit in Photoshop. Dan ziet de opdrachtgever hoe het er uit gaat zien.

 

18 Slicen van het ontwerp in Photoshop

Nadat het ontwerp klaar is, wordt het in bruikbare stukken geknipt met de SLICE-tool (segmenten-gereedschap). Deze stukken worden dan rechtstreeks geplaatst in een DIV/CLASS of in de achtergrond daarvan

LET OP:
fotobeeld en halftonen altijd bewaren in JPG.
Vectoren en volvlakken bewaren in GIF.
Transparante delen en vrijstaande stukken bewaren als PNG24.

 

19 Invoegen van de slices in de Div's

Zodra de eerste slices (segmenten) vanuit Photoshop zijn bewaard, kunnen ze in de HTML-pagina worden geplaatst.

Afbeeldingen kunnen via INSERT/IMAGE in een DIV worden geplaast. Of ze worden via de CSS in de achtergrond van een DIV geplaatst.

Omdat de afbeelding in de div #header heel hoog is, schuiven de div's #menu_container, #tekst, #snel_naar en #foto daar over heen.
Geef hiervoor negative margin-bottom: -295px aan de div #header en geef de andere div's die er over heen vallen POSITION RELATIVE.

Afbeeldingen kunnen in een achtergrond repeteren, zodat er een patroon ontstaat. Repteren kan ook worden uitgezet (no-repeat) of alleen horizontaal (x-repeat) of verticaal (y-repeat).

 

20 Slicen van transparante delen in Photoshop

Het gebruik van een GIF of PNG24 heeft als voordeel dat je transparantie kunt gebruiken. Hierdoor kun je afbeeldingen vrijstaand over een achtergrond zetten in je HTML-pagina.

 

21 Invoegen en stijlen van overige Div's

Stylen van het snelmenu en nieuwsblok in basis. Later worden hier de teksten nog in geplaatst en de menuknoppen aangepast.

 

22 Slicen van menu-achtergrond met glas-effect

Slicen van de menu-achtergrond van het hoofdmenu (transparante png) en het snelmenu (jpg)

 

23 Stijlen van flexibele menuknoppen met glans-effect

Na het slicen van de achtergrond van de menuknoppen in Photoshop, kan deze in de achtergrond van de div #menu en #menu a (link) worden geplaatst. Gebruik X-REPEAT voor horizontaal repeteren. De achtergrond afbeelding loopt dan over de gehele breedte van de knop. Het maakt dan niet uit hoe lang de knop wordt. Erg flexibel, zodat er makkelijk een menuknop bij kan komen.

 

24 Stijlen van het verticale snelmenu

Ook de snelmenu-knoppen krijgen een achtergrond.
TIP: geef in de a:hover (rollover) meer padding aan de linkerkant. Dan verschuift de knoptekst iets naar rechts. Gewoon als visueel effect tijdens de rollover.

 

25 Invoegen van repeterende blokken als Class

Een CLASS is bijna hetzelfde als een DIV maar er is 1 verschil: een CLASS mag meerdere keren op een pagina voor komen. Handig voor bijvoorbeeld meerdere blokjes naast elkaar. In plaats van een hashtag (hekje) staat er een punt voor de class-naam.

 

26 Foto's plaatsen in de repeterende class-blokken

De vijf CLASS-blokken zijn aangemaakt en staan naast elkaar. Met INSERT/IMAGE zet je eenvoudig de foto's er in.
Pas desgewenst de achtergrond kleur van de blokken aan.

 

27 Finetunen van de vormgeving in CSS

Het hoofdmenu was nog niet helemaal gestijld volgens het ontwerp in Photoshop. Dit doe je weer via de CSS.

 

28 Gebruik van min-height

Als je MIN-HEIGHT (zelf typen, staat niet in het standaard dialoogvenster) gebruikt, dan heeft de div minimaal de min-height hoogte, tenzij er meer in staat. Dan wordt de div zo hoog als de inhoud er van. Handig voor tekstkaders die mogelijk ook veel hoger worden als er meer tekst in staat.

 

29 Onder liggende Div's naar beneden duwen met een Break-regel

Zodra je veel tekst in het tekstkader plaatst, zullen de foto-blokken niet allemaal mee naar beneden schuiven. Dit is op te lossen door er een BREAK (witregel) tussen het nieuwsblok en het eerste fotoblok. Deze BREAK krijgt ook nog de style CLEAR:BOTH, net als de footer. Het is dan een soort onzichtbare balk die alle onderliggende div's naar beneden drukt.

 

30 Teksten stijlen en typografie bepalen

Tekst kun je stylen door de HTML-TAG te gebruiken in de CSS.
Zo is een grote koptekst: h1 of h2 of h3, etc...
De leestekst is altijd: p (paragraph).
Bij de knoppen 'praat' je tegen: a (link) of a:hover (rollover)

 

31 Teksten stijlen en typografie bepalen

Stylen en typografie van de tekst van de nieuwsberichten.
Gebruik hiervoor een h2 (heading 2) en p (paragraph). Deze staan in de div #nieuws (was div #foto).

Daarnaast wordt de teskt LEES MEER ook nog gestyled met een aparte CLASS: .lees_meer
Een CLASS mag meerdere keren op een pagina voorkomen, maar is verder hetzelfde als een DIV. Voor een CLASS staat een punt in plaats van een hastag (hekje)

De div-naam #foto hebben we nu voor de duidelijkheid veranderd in de div #nieuws.
LET OP: wijzig een div-naam op 2 plaatsen:
1. in je HTML-pagina
2. in je CSS-document

 

32 Horizontale lijn stijlen

Bij het toevoegen van een tweede nieuwsbericht, is het mooi de twee berichten van elkaar te scheiden door een lijn. Deze lijn heet HORIZONTAL RULE (hr). De hr kan worden gestyled door het aanpassen van de CSS-code BORDER.

Je kunt dan verschillende lijnstijlen kiezen, waaronder een stippellijn. Doordat de class .lees_meer een float naar rechts heeft, gebruik je een BREAK (witregel) met CLEAR-BOTH, zodat alles mooi onder elkaar gaat staan. Net zoals bij de vijf fotoblokken onderaan deze website gedaan is.

 

33 Het resultaat!

En dit is wat het oplevert!
Een flexibele website:

  • die centreert in de browser
  • die in hoogte kan variëren
  • waarbij het menu makkelijk is uit te breiden.


Volgende stap is het maken van een TEMPLATE, die als basis dient voor alle andere pagina's. Voordeel van een template is, dat als je hierin iets aanpast je op alle gekoppelde pagina's deze wijziging automatisch door voert. Zo zet je bijvoorbeeld eenvoudig op alle pagina's tegelijk een menuknop er bij.

 

34 Template maken voor meerdere pagina's

Een website heeft vaak meerdere pagina's, die er allemaal bijna hetzelfde uit zien. Het is daarom handig een basis-pagina te maken die gekoppeld is met alle pagina's. Dit heet een TEMPLATE. Indien je iets wijzigt in je template dan geldt dat ook voor alle gekoppelde pagina's.

 

35 Werking van de Template

In deze video een voorbeeld van het nut van een template.
Er wordt in de TEMPLATE een knop in het menu toegevoegd. Deze verschijnt vervolgens op alle gekoppelde pagina's.

 

36 Tabel maken voor het formulier

Door een TABEL kun je gegevens van bijvoorbeeld een contactformulier netjes onder elkaar zetten.

TIP: door de TABLE-BORDER (tabel-rand) op nul te zetten, worden de randen onzichtbaar.
LET OP: De DESIGN-VIEW van Dreamweaver is niet altijd betrouwbaar. Test in je browser.

 

37 Formulier bouwen

Een formulier bestaat uit een aantal onderdelen:
1. de formulier-tag (form)
2. de formulier-velden (input)
3. de verzend-knop (submit)
4. een php-script dat de verzending mogelijk maakt, zonder dat daar het lokale mailprogramma van de gebruiker voor hoeft te worden geopend. Dit php-script wordt geladen door de FORM-ACTION