1 Start Dreamweaver op. De workspace verschijnt. De Dreamweaver MX Workspace. 2 Klik op Dreamweaver Site in de kolom Create New.

Transcriptie

1 In deze instructie wordt een web gemaakt met frames. Het voorbeeld behandelt een digitaal portfolio, maar natuurlijk kun je de instructies gebruiken voor elk web met frames, ongeacht het onderwerp. Deze instructies zijn voor Dreamweaver CS4 van Adobe, maar die is op een detail na identiek aan Dreamweaver 4 en 8. Daarom tref je in de tekst soms screenshots aan met de naam Dreamweaver MX 4 of 8. Let op!!! Op pagina 9 heet in CS4 het knopje geen Design maar CSS. Dreamweaver Een web aanmaken in Dreamweaver doe je als volgt. 1 Start Dreamweaver op. De workspace verschijnt. Figuur 6.1b De Dreamweaver MX Workspace 2 Klik op Dreamweaver Site in de kolom Create New. De wizard Site definition verschijnt.

2 Figuur 6.2b De wizard Site definition 3 Vul de naam van de site in, hier: digitaalportfolio. 4 Klik op de Next-knop. Het volgende scherm van de wizard vraagt of je speciale server technologie wilt gebruiken voor het web. 5 Kies No, I do not want to use a server technology en klik op de Next-knop. Nu vraagt de wizard waar je het web wilt bewerken en waar je de bestanden op je eigen computer wilt opslaan. De wizard geeft hier standaard de locale computer en de map mijn documenten weer. Dat kun je zo laten. 4 Klik op de Next-knop. Vervolgens vraagt de wizard je hoe je verbinding maakt met de remote server. Dat is de webserver waar je web uiteindelijk op komt ter staan. 5 Kies hier voor none en klik op de Next-knop De wizard toont nu een overzicht van de ingestelde waarden. 6 Klik op de Done-knop

3 Het web is nu aangemaakt en verschijnt in het workspacemenu aan de rechter kant van de workspace. Figuur 6.3b Het web is aangemaakt Nu moet je nog een map aanmaken die de standaardmap voor de afbeeldingen in het web gaat worden. 7 Klik met de rechter muisknop op de map met het zojuist aangemaakte web en kies New Folder. Geef de folder de naam images Je kunt op dezelfde manier ook andere mappen aanmaken. Het web is nu klaar voor de volgende, zeer belangrijke, stap die voor Dreamweaver en voor Frontpage dezelfde is.

4 Een nieuwe pagina maken In stap 1 heb je bepaald welke pagina s je nodig hebt voor je web. Elk van die pagina s moet je aanmaken met Frontpage of met Dreamweaver en opslaan in de het web dat je in stap 2 gemaakt hebt. Ook hier geldt overigens weer dat je de webmap kunt onderverdelen in submappen. Dat kan handig zijn als je bijvoorbeeld 12 projecten wilt beschrijven op 12 verschillende pagina s. Maak dan een submap projecten in je webmap aan. Maakt vervolgens de pagina s voor elk project in die map. 1 Kies HTML in de kolom Create New Er verschijnt nu een nieuwe pagina in de workspace met de naam Untitled-1. Deze pagina wordt de basis van alle inhoudspagina s van het web. 2 Sla deze pagina als basis.htm Het bestand verschijnt nu in het workspacemenu onder de hoofdmap van het web. Figuur 6.4b De workspace met basis.htm 2 Geef het bestand een toepasselijke titel. Deze vul je in bij Title op de Documenttoolbar, bijvoorbeeld basisbestand. tip Als deze Document-toolbar niet in beeld is, kun je hem aanzetten door in het menu te kiezen voor View en dan in het uitklapmenu voor Toolbars' en tot slot voor Document

5 Boven de pagina zie je de Insert-toolbar. Deze toolbar is er in een aantal varianten die je via een uitklapmenu kunt selecteren door op het pijltje naar beneden naast Common te klikken. Via de knoppen van de Insert-toolbar voeg kun je bijvoorbeeld tabellen en afbeeldingen op de pagina zetten, zoals je verderop zal zien. Figuur 6.5b De Insert-toolbar: Common 3 Klik op het pijltje naast Common en kies Lay-out. Figuur 6.6b De Insert-toolbar: Layout 4 Klik op de tabelknop. Het venster Tabel verschijnt: Figuur 6.7b Het venster Tabel 5 Vul de waarden in als in figuur 6.7b. Je kunt de waarden overigens later nog aanpassen aan je eigen voorkeuren. Wij kiezen hier voor 800 pixels breedte en twee kolommen. De linker kolom wordt de tekstkolom, de rechter kan vrij ingevuld worden met plaatjes of tekst. Alle andere opmaak komt later in de stylesheet. Er verschijnt een tabel op de pagina.

6 Figuur 6.8b De pagina met de indelingstabel opmerking Onder de pagina zie je staan <body><table>. Dit zijn voorbeelden van de in hoofdstuk 5 al genoemde tags. opmerking Onder tags zie je de Properties-toolbar Hier geeft Dreamweaver de eigenschappen weer van dat deel van de pagina (de tag) waarin de cursor zich bevindt. In Figuur 6.8b is dat de opmaaktabel, waarvan je het aantal rijen, het aantal kolommen en de breedte ingevuld ziet. Wanneer je wat meer ervaren bent en wat meer weet over tags, kun je de eigenschappen eenvoudig aanpassen door hier andere waarden in te vullen. 6 Klik met de rechtermuisknop in de linker cel van de tabel op de pagina en kies Edit Tag <td>.

7 Figuur 6.9b Het pop-upmenu De Tag Editor opent. Figuur 6.10b De Tag Editor 7 Vul bij Width: 450px in. Herhaal de punten 5 en 6 voor de rechter tabelcel, maar vul nu maximaal 350px in bij Width: zodat de tabel niet te breed wordt. Ongeveer 30% van de Internetgebruikers gebruikt een resolutie van 800 bij 600 pixels. Houd daar rekening mee. 8 Sla de pagina nogmaals op. 9 Sluit de pagina.

8 Je hebt nu een basispagina met een indelingstabel gemaakt. Binnen deze tabel kun je alle tekst typen en je afbeeldingen plaatsen. De leesbaarheid van je site is dan optimaal. Deze pagina kun je steeds als basis voor een nieuwe pagina gebruiken. Ga nu verder met de opmaak van de pagina voordat je nieuwe pagina s gaat maken. Dat scheelt je straks werk. De pagina s opmaken: kleuren en lettertypen Tijdens stap 1 heb je al nagedacht over het kleurgebruik in je website. Kleur en lettertype kun je per pagina definiëren. Je kunt ook werken met een zogenaamde stylesheet. Een stylesheet is een pagina met stijlkenmerken, waarvan je er meer per pagina kunt gebruiken. Een stijl is niets anders dan een aantal opmaakkenmerken voor een paginaonderdeel, tag in html termen, zoals een alinea of op kop, een link of een tabelcel of de hele pagina. Een voorbeeld: De inhoud van een webpagina zit ingeklemd tussen de <body> en de </body> tag. Een definitie van die tag zou er uit kunnen zien als Body {font-family : verdana, arial; font-size : 11px; color : #000000; background-color : #FFCC00; } Deze stijldefinitie schrijft voor dat de browser de pagina laat zien met een goudgele achtergrond en verdana als lettertype, kleur zwart. Kent je computer geen verdana, dan wordt arial getoond. Wil je nu de stijl aanpassen naar bijvoorbeeld een witte achtergrond, dan verander je in de stylesheet de background-color in #FFFFFF en sla je de stylesheet op. Alle pagina s die deze stylesheet gebruiken hebben nu een witte achtergrond in plaats van een goudgele. Het voordeel van stylesheets is dan ook dat deze de onderhoudbaarheid van de opmaak van het web enorm vergroten, omdat je door een definitie op een stylesheet aan te passen, je in één keer alle pagina s aanpast die deze stylesheet gebruiken. Zonder stylesheets moet je handmatig overal in je web het kenmerk aanpassen. Dat is voor een paar pagina s wel te doen, maar een web groeit altijd en voor je er erg in hebt, moet je enorm veel pagina s onderhouden. Met een tweede stylesheet kun je dan nog paginaspecifieke kenmerken definiëren. Zowel met Frontpage als met Dreamweaver kun je eenvoudig stylesheets maken. Voor elk element kun je op een dergelijk stylesheet de kenmerken definiëren. 1 Maak een map stylesheets aan in het web. tip Dit kun je vanuit Dreamweaver eenvoudig doen door met de rechter muisknop te klikken op de hoofdmap van de site (dat is meestal de bovenste) en dan in het pop-upmenu te kiezen voor New Folder. Tot slot geef je de nieuwe map de naam stylesheets In de workspace staat nog altijd het scherm waarmee je een nieuwe pagina kunt aanmaken. 2 Klik op CSS in de kolom Create New.

9 Er verschijnt een nieuwe pagina in de workspace. Figuur 6.11b De lege stylesheetpagina 4 Sla deze pagina op in de map stylesheets als basisstijl.css. De pagina verschijnt in het workspacemenu rechts als basisstijl.css in de map stylesheets 5 Klik op Design (heet in deze versie CSS!!!) in het workspace-menu. Het Design-menu opent.

10 Figuur 6.12b Het Design-menu 6 Klik om een tag met stijlkenmerken toe te voegen op het New CSS Style -knopje: De wizard New CSS Style verschijnt. 7 Selecteer Redefine HTML Tag bij Type:. 8 Selecteer This Document Only bij Define In:. 9 Kies bij Tag: de tag waarvoor je de stijl wilt definiëren. In dit voorbeeld kiezen we voor body. Figuur 6.13b De wizard New CSS Style Voor de betekenis van de tags verwijzen we naar de helpfunctie van Dreamweaver, omdat het te ver voert alle termen hier te behandelen. De belangrijkste worden in tabel 6.1b genoemd met de belangrijkste op te maken kenmerken.

11 Tabel 6.1b Belangrijke tags Tag Beschrijving tag Stijlkenmerken Item opmaakmenu A Link lettertype, kleur, tekststijl lettertype A:hover link waar de muis lettertype, kleur, tekststijl lettertype bovenop staat body paginakenmerken achtergrond, kleur randen h1 t/m Header1 t/m 6 (vergelijk lettertype, kleur, tekststijl lettertype h6 koppen in Word) P Alinea lettertype, kleur, tekststijl, lettertype,randen marges, achtergrondkleur, rand ul,ol ordered (genummerde) lettertype, kleur, tekststijl Lettertype of unordered (ongenummerde) list (vergelijk opsomming in Word) li listitem (item in de ul of ol) lettertype, kleur, tekststijl Lettertype opmerking Wanneer je opmaakcodes of tags voor een tabel gaat definiëren, moet je er rekening mee houden dat de eigenschappen ook voor de indelingstabel zullen gelden. Wil je dat niet, dan zul je een zogenaamde class aan moeten maken voor de indelingscellen. Hier gaan we daar niet dieper op in, omdat dat buiten het kader van dit boek valt. Kijk voor hulp bij classes in de helpfunctie van Dreamweaver. 10 Klik op de OK-knop. Het venster CSS Style Definition for body verschijnt. Figuur 6.14b Het venster CSS Style definition for body, background

12 11 Klik op Background. Kies hier de kleur voor de achtergrond van de pagina die je in deelstap 4 hebt opgeslagen als basisstijl.css. Je kunt ook een achtergrondafbeelding kiezen uit de map images in het web door deze met de Browse-knop op te zoeken. Speel om te zien wat de invloed van de instellingen is, dan eens met de opties Repeat, Attachment, Horizontal Position en Vertical Position. opmerking Gebruik voor de achtergrond alleen plaatjes die in de map images van het web staan; andere plaatjes worden na het publiceren niet meer gevonden. 12 Klik op Box. Het venster om de marges in te stellen verschijnt. Figuur 6.15b Het venster CSS Style definition for body, box 13 Stel bij Top en bij Left de bovenmarge en de linkermarge voor de pagina s in. Neem vooral bij de linkermarge genoeg ruimte om de leesbaarheid te vergroten. Voor de body-tag hoef je slechts de achtergrond en de linker- en bovenmarge te definiëren, omdat alle tekst en alle afbeeldingen in een tabel staan. De tabel is nu op de juiste plek gepositioneerd. De stijldefinitie voor de body-tag verschijnt nu op de stylesheet. 14 Herhaal de deelstappen 8 tot en met 12 voor de tags waarvan je de stijl wilt definiëren. Indien nodig kun je de stijldefinitie later altijd aanpassen door de te veranderen tag te selecteren in het designmenu en te klikken op het CSS-edit-knopje:.

13 Let op: Als je alle tags gehad hebt, zien de stylesheet en het designmenu er ongeveer uit als in figuur 6.17b. In het document zie je de code bij de opmaak, in het designmenu de tags die je hebt opgemaakt. Figuur 6.16b Basisstijl.css

14 15 Sla de stylesheet nogmaals op. Herhaal de deelstappen 2 tot en met 17 voor aparte stylesheets voor de banner en voor de navigatiepagina als je daarop een andere stijl wilt kunnen gebruiken. Sla deze stylesheet op in de map [stylesheets] onder de namen navigatie.css en banner.css. De stylesheet basisstijl.css moet nu aan het bestand basis.htm gekoppeld worden. 16 Open basis.htm. 17 Klik in het designmenu op de Attach Style Sheet -knop: Het venster Attach External Style Sheet verschijnt.

15 Figuur 6.17b: Het venster Attach External Style Sheet 18 Zoek via de Browse-knop het bestand basisstijl.css. De wizard Select Style Sheet File verschijnt. Figuur 6.18b: De wizard Select Style Sheet File 19 Kies bij Relative to voor Document. opmerking Dit is uitermate belangrijk. Laat je hier Root staan, dan kom je na publicatie zeker in de problemen, omdat de interne links niet meer kloppen. 20 Klik op de OK-knop Het pad naar basisstijl.css verschijnt bij File/URL.

16 Figuur 6.19b: Het venster Attach External Style Sheet 21 Selecteer Link bij Add as 22 Klik op OK. De stylesheet is nu aan basis.htm gekoppeld. Je ziet dat meteen, omdat de in de stylesheet gedefinieerde stijlen meteen op basis.htm worden toegepast. Elke keer als je vanuit dit basisbestand een nieuw bestand maakt, zal dat de stijldefinitie uit basisstijl.css gebruiken. Je kunt dus ook al die bestanden in één keer aanpassen door een definitie in het bestand basisstijl.css te wijzigen. De pagina s vullen: tekst Over de tekst kunnen we kort zijn. Je bezoekers lezen van het beeldscherm dus houd het kort: gebruik korte kernachtige zinnen en weinig alinea s per pagina. Voor de verdeling van de tekst over de pagina heb je een indelingscel op elk van de pagina s gezet, die de breedte van de tekstkolom op 450px vasthouden. Daarmee krijg je prettig leesbare kolommen. Tekst invoegen werkt bij Frontpage en bij Dreamweaver bijna hetzelfde als bij Word. Er zijn eigenlijk maar een paar zaken waar je op moet letten: 1 Zet de tekst in de linker indelingscel, zodat de kolombreedte automatisch vastgelegd is. 2 Gebruik de opmaakelementen die je op de stylesheet hebt gedefinieerd. Je zult zien dat de tekst dan automatisch verschijnt in de stijl die je in de stylesheet hebt gedefinieerd. Verder moet je rekening houden met het volgende: 3 Met de [enter]-toets op het toetsenbord start je een nieuwe alinea. Wil je naar de volgende regel, dan moet je de [Shift]-toets ingedrukt houden als je de [enter]-toets indrukt. 4 Uitlijnen met spaties is niet veilig. De meester browsers maken van een rij spaties één spatie. Gebruik liever een tabel om uit te lijnen. 5 Tot slot raden we je af stukken tekst uit Word zo in Dreamweaver of Frontpage te kopiëren, omdat er dan allerlei stijlkenmerken meekomen die je opmaak verstoren. Kopieer een dergelijk tekstblok eerst in het Notepad van Windows, om alle opmaak eruit te slopen en vervolgens in Dreamweaver of Frontpage. Dan gaat het altijd goed. 1 Open basis.htm.

17 Je opent nu het basisbestand dat je eerder gemaakt hebt, met daarop de indelingstabel. Ook de stijlkenmerken zitten al in dat bestand, doordat de stylesheet eraan gekoppeld is. 2 Klik in het menu op Save As en sla het bestand op in het web onder een goede naam. Een goede naam is niet te lang, bevat geen spaties of hoofdletters en eindigt op.htm. Voorbeelden van goede namen zijn: personalia.htm: bevat je persoonsgegevens opleiding.htm: bevat je opleidingsgegevens werkervaring.htm: bevat je werkervaring swot.htm bevat je persoonlijke SWOT leerstijl.htm bevat je leerstijl kwaliteit.htm bevat je kwaliteiten vaardigheden.htm bevat je vaardigheden competenties.htm bevat je competenties 3 Klik op het tabblad Text in de werkbalk. De Text -werkbalk verschijnt. Figuur 6.20b De Insert toolbartext 4 Vervang bij Title template door een toepasselijke titel, als Digitaal Portfolio met daarachter je naam. 5 Typ nu je tekst in de indelingscel, waarbij je gebruikmaakt van de opmaakcodes (tags) als h1, h2, ul in de Text -werkbalk. opmerking Maak geen gebruik van de knop voor het lettertype, omdat je dan de stylesheet overruled. tip Dreamweaver heeft de nare gewoonte elke keer als je het bestand op wilt slaan, aan te bieden een template van het bestand te maken. Dit kun je voorkomen door steeds de optie Save As te gebruiken of door de optie Save As te gebruiken. Meer hoef je niet te weten om tekst in te kunnen voeren. De pagina s vullen: afbeeldingen Niet elke afbeelding is geschikt voor internetpagina s. Dat heeft alles te maken met de downloadtijd die een afbeelding vergt. Waarschijnlijk heeft niet iedere bezoeker van je pagina de beschikking over breedband. Een goede manier om lange downloadtijden te voorkomen, is te werken met kleine aanklikbare afbeeldingen, die na aanklikken groter openen. Voordeel is dat de laadtijd beperkt blijft van de pagina met de kleine afbeeldingen en dat bezoekers zelf kunnen beslissen de grotere versie alsnog te openen. 1 Plaats de cursor op de plek waar je de afbeelding wilt hebben. 2 Kies Common in het uitklap menu van de Insert toolbar 3 Klik op de knop Image :.

18 Het venster Select Image Source verschijnt. Figuur 6.21b Select Image Source 4 Browse naar de afbeelding die je wilt gebruiken. Deze heb je bij stap 3 in de map images gekopieerd. 5 Kies Document bij Relative To:. opmerking Dit is uitermate belangrijk. Laat je hier Root staan dan kom je na publicatie geheid in de problemen, omdat de interne links niet meer kloppen. 6 Dubbelklik op de afbeelding die je wilt toevoegen. opmerking Nu zie je waarom je in een eerder stadium de te gebruiken afbeeldingen in de map [images] moest kopiëren. Browse nooit naar een map buiten de hoofdmap van het web waarin je werkt, omdat de afbeeldingen dan niet gevonden worden nadat je het web gepubliceerd hebt. 7 Klik indien nodig op de OK-knop. De afbeelding verschijnt nu op de pagina op de plaats waar je de cursor had staan.

19 Figuur 6.22b De afbeelding verschijnt op de plek van de cursor 8 Klik met de rechter muisknop op de afbeelding. De Tag Editor Image verschijnt. Figuur 6.23b De Tag Editor Image

20 9 Vul bij de Alternate Text de tekst in die moet verschijnen als de afbeelding bij bezoekers niet getoond wordt. 10 Vul de Horizontal Space en de Vertical Space in. Dit is de minimale afstand tussen afbeelding en tekst eromheen. 11 Geef de waarde voor de randdikte om de afbeelding op bij Border. 12 Kies bij Alignment de plaats van de afbeelding. In het voorbeeld is rechts uitlijnen gekozen. Speel eens met de verschillende waarden om te kijken wat er gebeurt. 13 Klik op de OK-knop. De afbeelding staat nu op de goede plaats. Het teken dat achter de kop Persoonsgegevens verschenen is, geeft aan waar de afbeelding ingevoegd is. Dat is voor bezoekers van de website niet zichtbaar. Figuur 6.24b De afbeelding op de goede plaats gezet

21 Navigatie- en bannerpagina maken Als alle tekstpagina s af zijn, maak je de navigatiepagina en de bannerpagina, die je straks nodig hebt om de framespagina te maken. Navigatie- en bannerpagina s gaat natuurlijk precies hetzelfde als tekstpagina s maken in Frontpage of Dreamweaver. Je kunt dus de instructies hierboven erbij nemen als je er niet uit komt. We beginnen met de navigatiepagina. Hierop komen de links naar de pagina s. Voorlopig zet je hier slechts de termen die de bezoeker naar de juiste pagina moeten leiden. In geval van een digitaal portfolio kun je dan denken aan termen als: persoonsgegevens, opleiding, werkervaring, persoonlijke SWOT, leerstijl, kwaliteiten, vaardigheden en competenties. Je kunt er ook voor kiezen hier knoppen te maken. Bijvoorbeeld door afbeeldingen te gebruiken die je als link laat werken. Maak nog geen links naar de verschillende pagina s. Doe dat nadat de framespagina gemaakt is, omdat de links naar het juiste deel van het frame moeten verwijzen. Een navigatiepagina maken gaat als in de volgende deelstappen. Als je niet precies meer weet hoe je een van de deelstappen uit moet voeren, blader dan terug naar de beschrijving bij het programma dat je gebruikt. 1 Maak een nieuwe pagina en sla deze op in het web als navigatie.htm. 2 Koppel de pagina aan de stylesheet navigatie.css, die je eerder gemaakt hebt. 3 Typ de woorden voor de navigatie of plaats de knoppen. tip Zet je navigatie items in een tabel, zodat ze mooi uitgelijnd zijn. 4 Sla de pagina nogmaals op. Nu moet je de banner maken. Deze pagina komt in het bovenste frame en vormt de vaste kop van de webpagina. Een banner maken gaat als in de volgende deelstappen. 1 Maak een nieuwe pagina en sla deze op in het web als banner.htm. 2 Koppel de pagina aan de stylesheet banner.css, die je eerder gemaakt hebt. 3 Typ de tekst of plaats de afbeelding. tip Als je wilt dat een afbeelding naadloos sluit tegen bovenkant en linkerkant van de browser, kun je die afbeelding als achtergrond invoeren. Zorg dan wel dat de afbeelding breed genoeg is om te voorkomen dat de afbeelding zich een aantal keer herhaald. Minimaal 800px, beter is 1600px waarvan er minimaal 800 een zinnige afbeelding vormen. 4 Sla de pagina nogmaals op.

22 De framespagina Wij gebruiken frames, omdat dat voor de beginnende webbouwer de eenvoudigste methode is om een goed navigerend web te bouwen. Wij gebruiken een framespagina met drie frames: - vaandel: de titelbalk van de pagina, - inhoudsopgave: de navigatie van het web - content: de inhoud van de pagina (de tekst en de afbeeldingen) 1 Klik in het menu op File en vervolgens in het uitklapmenu op New. 2 Selecteer Framesets in de linker kolom en Fixed Top, Nested Left in de rechterkolom. Figuur 6.25b New Document 3 Klik op de Create-knop. De pagina met de lege frameset verschijnt in de workspace.

23 Figuur 6.26b De frameset 4 Sla de frameset op in het web onder de naam index.htm. opmerking Deze naam is verplicht, omdat het de paginanaam is waarmee elk web opent. 5 Vul op de Properties-toolbar onder het document de waarden voor Border en Bordercolor in voor de framespagina. 6 Klik met de rechter muisknop in het bovenste frame. 7 Kies in het menu Files en vervolgens in het uitklapmenu Open in Frame. 8 Kies uit de lijst met bestanden banner.htm 9 Herhaal de deelstappen 6 tot en met 8 voor het frame linksonder, waarbij je voor navigatie.htm kiest en voor het frame rechtsonder, waarbij je voor de pagina die hoort bij het bovenste item op je navigatiepagina, bijvoorbeeld personalia.htm tip De banner, navigatie en personalia pagina s zijn in de frameset verschenen. Je kunt nu de hoogte en breedte van de frames nog gemakkelijk aanpassen, door de frameborders (grijze lijnen tussen de frames) te verslepen. De frameset is nu gevuld met de pagina s die je bij opening aan de bezoekers van de website presenteert.

24 Figuur 6.27b De frameset met de startpagina s 10 Klik op een frameborder met de rechtermuisknop en kies vervolgens File in het menu en dan Save Frameset. De frameset is nu opgeslagen als index.htm. Nu moet tot slot nog de navigatie werkend gemaakt worden. opmerking Dreamweaver geeft standaard de naam mainframe aan het hoofdframe, leftframe aan het linker frame en topframe aan het bovenste frame. Je kunt dat controleren door over te schakelen op de codeweergave. 11 Controleer de naam van het hoofdframe. Deze framenaam heb je nodig om de pagina s in het juiste frame te laten laden als er op een link geklikt wordt. 12 Zorg dat de Common insert-toolbar geselecteerd is. 13 Selecteer een term op de navigatiepagina 14 Klik op de link-knop op de Insert toolbar Het venster Hyperlink verschijnt

25 Figuur 6.28b Het venster Hyperlink 15 Klik op het map-ikoontje naast Link en selecteer het bestand dat je aan de link wilt koppelen. De bestandnaam verschijnt nu achter Link: 16 Klik op het pijltje naar beneden achter Target en kies het juiste frame uit de lijst die verschijnt. ( MainFrame, tenzij je het hoofdframe anders genoemd hebt.) Je hebt nu een link gemaakt naar het bestand. Je kunt deze link aanpassen door er rechts op te klikken en in het pop-upmenu dat verschijnt te kiezen voor Change Link. 17 Herhaal de deelstappen 14 tot en met 16 voor alle navigatie-items tip Wil je een nieuw browservenster openen met de link, kies dan voor _blank. Een nieuw browservenster is vooral handig wanneer je daar een pagina buiten het eigen web linkt. 18 Klik in het menu op File en vervolgens op Save All. Gefeliciteerd, het web is af. Vanaf nu begint een andere taak: het web publiceren en actueel houden.