Learnit

3. Het opzetten van een site

Voordat je kunt beginnen met het maken van mooie webpagina’s moet je eerst een site definiëren. Dit wil zeggen dat je aangeeft waar de HTML-bestanden van je site op je harddisk moet komen te staan.

Eerst moeten we iets vertellen over de naamgeving binnen Dreamweaver. Dreamweaver maakt verschil tussen een site en een pagina. Als er binnen Dreamweaver gesproken wordt over een site is dat eigenlijk de map waarin je de HTML-bestanden van de internetsite zet. Deze map wordt de Local Root Folder genoemd.

3.1. Waar staat een website?

Tijdens de ontwikkeling van een site worden de HTML-bestanden meestal opgeslagen op de harddisk van de ontwikkelaar (soms ook op het netwerk van de ontwikkelaar). Dit heeft verschillende voordelen:

• opslaan en openen van bestanden gaat snel
• je hoeft geen verbinding met internet te hebben terwijl je ontwikkelt
• je kunt werken aan een kopie terwijl de site gewoon onveranderd in de lucht blijft

Op het moment dat je zover bent dat je de site op internet wilt testen dan kun je hem uploaden naar een provider op internet. Dit doe je in Dreamweaver met het Site venster. Als je aan het werk gaat met een bestaande site wil je soms ook bestanden van het internet naar je PC halen. Dit noem je downloaden.

Een beetje een website bestaat al snel uit enkele tientallen pagina’s en om overzicht te kunnen blijven houden is het verstandig om de site onder te verdelen in mappen.

Je site op de webserver

Hoe ziet een werkende website er globaal uit? Een site heeft een homepage, bijvoorbeeld "www.learnit.nl". Dit is de pagina waar de site begint. Als een bezoeker deze URL intypt, wordt een koppeling gelegd naar het bijbehorende IP-adres. Het IP-adres verwijst naar een map op een webserver op het internet. Bij providers is dat vaak iets als "www/". De homepage en meestal ook de (hele) site bevindt zich op deze server in deze map. Een bezoeker weet niet met welke file de site begint, en de server weet dat ook niet uit zichzelf. Daarom wordt standaard bij de bezoeker in de browser de inhoudsopgave van de map "www/" getoond.

Meestal wil je dat niet. Als een bezoeker naar jouw homepage komt, wil je die verwelkomen met een mooi en functioneel scherm, Gelukkig is dit mogelijk. Als het bestand index.html in de map staat, dan zorgt de provider er namelijk voor dat de inhoud van dat bestand getoond wordt door de browser in plaats van de inhoudsopgave van de map. Soms is de naam van het index bestand "home.htm", of "default.htm", dit verschilt per provider en dit moet je dus even navragen. Als een bezoeker dus het adres www.google.nl bezoekt wordt dus eigenlijk www.google.nl/index.html getoond. www.google.nl levert dezelfde pagina op als www.google.nl/index.html.

3.2. Een nieuwe site

Het opzetten van een site binnen Dreamweaver kan zowel vanuit het site window als vanuit het document venster.

Figuur 3.1: Site window

• Kies in de menubalk de menuoptie Site.
• Kies de optie Manage Site.
• Het window Manage Sites wordt geopend.
• Klik op New Site.
• Het window Site Definition wordt geopend, kies het tabblad Advanced.
• Typ de naam Muziek in achter Site Name, zoals hierboven.
• Klik op het mapje naast de regel Local Root Folder, je bent nu in een verkenner venster.
• Ga naar Mijn Documenten en maak een nieuwe map met de naam Cursus Dreamweaver.
• Ga in de map staan door op Open te klikken.
• Klik daarna op Select en op OK.
• Controleer of het laatste deel van het pad in het venster Local Root Folder de naam van jouw nieuwe map bevat.
• Zo ja, klik op OK.
• Vink het vierkant voor Cache: Enable Cache aan.
• Kies nogmaals OK, de site is nu aangemaakt.

Het enige waar je nu nog op moet letten is dat je de HTML-bestanden (pagina’s) in de juiste map opslaat. Deze bestanden, en alle foto’s die je gebruikt, moeten in de Local Root Folder komen. Als je klaar bent gaan we namelijk alle inhoud van de Local Root Folder uploaden (publiceren) en dan is het makkelijk als alles in één map staat. Dit voorkomt gebroken verwijzingen naar afbeeldingen en pagina’s.

3.3. Het beheren van een site

Voor het beheren van een site van de bestanden van een site is het "Site Window" een handig hulpmiddel. Als je alleen het Document venster opent hebt staan open je dit window door op Site, Site Files te klikken. De opzet van het Site Window lijkt sterk op een FTP-programma. Dit zijn programma's waarmee bestanden op het internet gezet kunnen worden. Meer hierover lees je in de les testen en publiceren. Voor het onderwerp van dit hoofdstuk is vooral de helft waar de local folder boven staat van belang. Als het goed is, is dit venster, als je met een nieuwe site begint leeg, Als je al bezig bent zie je in dit venster de bestanden die je reeds hebt gemaakt. Het Site Window biedt een handig overzicht van de bestanden die in jouw "Local Root Folder" staan.

Binnen het Site Window zijn een aantal opties mogelijk:

Rechterkant van het Site Window: Local Folder

Nieuw bestand maken:

Klik in de menubalk op de menuoptie File, kies New of klik met je rechtermuis op het rechtergedeelte van het Site Window en klik op 'New File'. Geef het bestand gelijk een naam.

TIP: laat wel de extensie .htm of .HTML staan. Anders wordt het niet meer als zodanig herkend.

Figuur 3.2: Nieuwe pagina aanmaken

Oefening 3.2 Nieuwe pagina aanmaken.

1. Kies in de menubalk de menuoptie File.
2. Kies de optie New.
3. Het document venster New Document wordt geopend.
4. Kies het tabblad General.
5. Kies in de lijst Category voor Basic Page en uit de lijst Basic page voor HTML.
6. Vink de tekst Make document XHTML compliant aan, zodat het overeenkomt met de nieuwe standaard van het web.
7. Klik op Create.
8. De nieuwe pagina wordt aangemaakt.
9. Kies File, save as.
10. Bewaar de pagina onder index.htm.
11. Klik op OK.

Bestand openen:
Dubbelklik op de naam van een bestand.

Bestand een andere naam geven:
Klik op een bestandsnaam, klik nog een keer op de naam. De naam is blauw geworden en je kunt deze dan veranderen.

Bestand kopiëren:
Klik met de rechtermuisknop op de naam van een bestand en klik op kopiëren. Klik met de rechtermuisknop op een leeg gedeelte van de rechterkant van het "Site window" en klik op plakken. Het bestand krijgt wel een toevoegsel aan de naam (Copy of ….).

Bestand bekijken in een browser:
Selecteer het bestand en druk op F12 of Klik met je rechtermuisknop op een bestand en klik preview in browser en kies de gewenste browser.

Map aanmaken:
Klik met je rechtermuisknop in het rechterdeel van het Site Window. Klik op 'New Folder'.

Het is aan te raden mappen aan te maken voor afbeeldingen 'images', en voor grote onderdelen van de internetsite, zodat je een duidelijk overzicht houdt van je bestanden.

TIP: laat Flashteksten en Flashbuttons in dezelfde map staan als het HTML-bestand waar ze in zijn verwerkt, anders ontstaan er problemen met het previewen.

Linkerkant van het Site Window: Site Map

TIP: het is handig de homepage van je internetsite alvast index.htm te noemen, dan bespaar je onderstaande handelingen.

Figuur 3.3: Site Map

Oefening 3.3 Procedure site map

1. Kies in de menubalk de menuoptie Site.
2. Kies de optie Manage Sites.
3. Klik op Edit en daarna op het tabblad Advanced.
4. Selecteer de Categorie Site Map Layout (aan de linkerkant van het window).
5. Klik op het mapje naast Home Page.
6. Wijs de homepage aan, index.htm.
7. Vink Display dependent files aan om ook afbeeldingen etc in het schema te zien De nieuwe pagina wordt aangemaakt.
8. Klik op OK.
9. Klik op Done.

Maken van een link:

Klik op de tekst in een pagina, hou de shift knop ingedrukt. Sleep de pijl die naast het icoon verschijnt naar de naam van een bestand in het rechter deel van het Site window.

Figuur 3.4: maken van een link

Oefening 3.4 Maken van een link

1. Voeg de tekst Home in op de index pagina.
2. Selecteer de Tekst Home en hou de shift-toets ingedrukt.
3. Sleep de pijl naar het bestand index.htm in het rechter deel van het Site window.
4. De link is gemaakt.

3.4. Bestanden in Dreamweaver importeren

Als je een bestaande internetsite wilt wijzigen, dan moet je een kopie van je site op internet op je harde schijf plaatsen. Dit wordt downloaden genoemd. Als je nog niet op je eigen computer aan deze site hebt gewerkt moet je eerst een site definiëren.

Als je een site wilt importeren dan kun je dat op de volgende manier doen:

1. Kies in de menubalk op de menuoptie Site.
2. Kies de optie Manage sites.
3. Klik op New Site.
4. Typ de naam Muzieksite van internet in bij Site name.
5. Klik op het mapje naast de regel Local Root Folder (je bent nu in een verkenner venster).
6. Ga naar Mijn Documenten.
7. Maak een nieuwe map aan (doe dit niet in een map die zelf als een internetsite is).
8. Geef de map een naam.
9. Ga in de map staan door op Open te klikken.
10. Klik daarna op Select en op OK.
11. Controleer of het laatste deel van het pad in het venster Local Root Folder de naam van jouw nieuwe map bevat.
12. Zo ja, klik op OK.
13. Vink het vierkant voor Cache: Enable cache aan.
14. Kies in de menubalk op de menuoptie Site.
15. Kies de optie Manage sites.
16. Klik op Define Site.
17. Klik op Edit.
18. Klik op Remote Info.
19. Ga naar Mijn Documenten.
20. Kies in het pulldown menu FTP.
21. Vul de Hostname van de server in (bijvoorbeeld ftp.macromedia.com).
22. Vul de gebruikersnaam en het wachtwoord in.
23. Als de server SFTP ondersteunt, vink dan het vierkantje bij Use Secure FTP (SFTP) aan.
24. Druk op Test om de verbinding te testen.
25. Klik op Done.

Je hebt nu een nieuwe site gemaakt waar de bestanden in kunnen worden geplaatst. We gaan nu de bestanden van internet halen en in de Local Root Folder zetten.

De bestanden worden nu van het internet naar jouw computer gekopieerd. Voor een uitgebreidere beschrijving over het downloaden en uploaden van bestanden, zie hoofdstuk 13, Testen en Uploaden.

Disclaimer: De gratis online cursussen zijn beschikbaar gesteld en ontwikkeld door het bedrijf Learnit. Deze cursus is gratis maar mag niet gebruikt worden voor commerciële doeleinden. Dit werk is auteursrechtelijk beschermd; het auteursrecht ervan berust bij Learnit.