Sitemap
Copyright © Studio Artist X 2004-2010, KvK nr. 34202110
Dreamweaver MX gratis online tutorial voor de beginners ...
Natuurlijk kunnen we alleen navigeren als we weten waar we naar toe willen! Daarom hebben we allereerst een goed overzicht nodig van alle pagina's binnen de website. Zo'n overzicht is dus een soort "In kaart gebrachte website" ook wel site-map genoemd. Onder Files (ziet u geen panel files rechts druk dan op F8) zien we alle bestanden die binnen de door ons aangemaakte site zijn opgeslagen als Local View geselecteerd is. Dit kunnen we gebruiken als overzicht. Kiezen we Map View, dan zien we alle bestanden in een structuur weergegeven, maar nu alleen de bestanden die in relatie tot elkaar staan. Heeft u nog geen pagina's gemaakt en/of geen site gedefinieerd? Dan is het raadzaam eerst de eerdere tutorial te lezen!
Voor we aan een website structuur beginnen, is het handig om te bepalen uit hoeveel pagina's de website ongeveer zal bestaan. Welke onderwerpen of groepen onderwerpen aan bod komen. En of het de bedoeling is later veel onderwerpen toe te voegen. Zeker bij de navigatie geldt: "Een goed begin is het halve werk!"
Het begin punt van de navigatie is een bestand met de naam "index". De indexpagina wordt altijd als eerste gezien als we de URL (het www-adres) intypen in de browser. Deze indexpagina kan een frameset (*) zijn, maar ook een enkele pagina. Voor het gemak gaan we nu, net als in de vorige tutorial, uit van een frame-set.
Deze frameset is opgebouwd uit een left-frame deze laat de donkergroene pagina linker-frame.htm zien, een top-frame deze laat de lichtgroene boven-frame.htm zien. Dan hebben we het (wisselende) main-frame, en deze laat de pagina home.htm zien. Samen vormen zij de index.htm, in dit geval de frameset. In het linker frame maken we nu een eenvoudige navigatie, door middel van zgn. tekstlinks. Ter voorbereiding zijn de volgende pagina's aangemaakt: home.htm – natuurgebieden.htm – fotografie.htm – links.htm In het linker frame hebben we een tabel gemaakt met 1 kolom en een aantal rijen. In elke rij typen we het kopje van de desbetreffende pagina, in één woord. We selecteren met de cursor het hele woord "home". Vervolgens kiezen we in de properties-inspector bij Link het mapje. Dan selecteren we uit de lijst met bestanden het bijbehorende bestand "home.htm" . En omdat DreamWeaver nu nog geen idee heeft wáár we dit bestand willen laten zien (in een van de frames of juist als losse pagina), kiezen we een Target (een doel). In dit geval willen we dat de pagina opent in het frame mainFrame.
We doen dit vervolgens bij alle andere tekst woordjes. En koppelen ieder woordje op de bovenstaande manier aan de bijbehorende pagina. Als we met de cursor in de navigatie blijven staan, zien we nu links boven in het DreamWeaver scherm linker-frame.htm met een asterix/sterretje (*) staan. Dat betekent dat deze pagina nog niet is opgeslagen! U kunt nu met CTRL + S of bij File ⇒ Save frame, de pagina opslaan.
En een heel eenvoudige navigatie is klaar!
 Site navigatie - Map view |
 |
We kunnen nu na gaan of we elk woordje hebben gekoppeld aan een pagina.
Dat kunnen we zien als we nu rechts in het panel files bij local view nu map view selecteren. We zien dat linker-frame.htm, de links home.htm, natuurgebieden.htm, fotografie.htm en links.htm bevat. Op deze manier kunnen we de opbouw en structuur van de website zien. Dit is een heel bescheiden website, maar u begrijpt…Bij een omvangrijke website is het geen overbodige luxe, het overzicht te raadplegen. |
Nu deze navigatie werkt, kunnen we kijken hoe we deze er in de bron code uit ziet. <table width="130" border="0" cellspacing="3" cellpadding="3"> <tr> <td align="LEFT" valign="MIDDLE"><a href="home.htm" target="mainFrame">Home</a></td> </tr> <tr> <td align="LEFT" valign="MIDDLE"><a href="natuurgebieden.htm" target="mainFrame">Natuurgebieden</a></td> </tr> <tr> <td align="LEFT" valign="MIDDLE"><a href="fotografie.htm" target="mainFrame">Fotografie</a></td> </tr> <tr> <td align="LEFT" valign="MIDDLE"><a href="links.htm" target="mainFrame">Links</a></td> </tr> <tr> <td align="LEFT" valign="MIDDLE"> </td> </tr> </table> |
||
Hier ziet u een deel van de code die DreamWeaver heeft gegenereerd.
<a href="home.htm" target="mainFrame">Home</a>
Betekent dus verwijzing naar de pagina home.htm, het doel van de pagina (waar uw webbrowser deze straks laat zien) is mainFrame. Dit wordt met Target aangegeven, waar dan het woord Home niets anders is dan de weergave van uw tekstlink, had bij een oefening ook "Pagina 1" kunnen heten.
Hoe kunnen we nu het uiterlijk van de links aanpassen? In dit geval hebben we de pagina instellingen Page Properties aangepast.
Bij de categorie Appearance hebben we gekozen voor het font Times New Roman, grootte 18 pixels, en grijze tekst kleur, en een groene achtergrond kleur.
Voor de instellingen van de links hebben we gekozen voor het font van de pagina (same as page font) de link kleur is licht grijs, de bezochte links (visited links) zijn donker grijs. Op het moment dat er iemand met de cursor over de link gaat (rollover links) wordt deze wit en de actieve links laten we voor wat het is.
Bij Underline style hebben we vier opties. Altijd onderstrepen, nooit onderstrepen, alleen onderstrepen op het moment dat er iemand met een cursor overheen gaat, of juist de onderstreping verbergen op het moment dat er iemand met de cursor overheen gaat!
Let op: Op het moment dat u deze aanpassingen doet zult u ook met uw cursor in het juiste frame moeten staan! Of de juiste pagina apart hebben geopend!
In de volgende tutorial bespreken we links en navigatie door middel van Image maps!
* Kijk voor uitleg van deze termen in de eerdere Dreamweaver 4 tutorial van Alexander.