Website bouwen met Dreamweaver CS3 (21-3-2013)

Gerrit van Eijndhoven http://www.gerritentiny.nl/

1. Voorwoord ............................................................................................................ 2 2. Site directorie aanmaken. .................................................................................... 4 3 Site definitie aanmaken. ....................................................................................... 5 4. Opmaakstijl maken in een Style Sheet ................................................................. 5

5. Aanmaak hoofdpagina ......................................................................................... 7 6 Tabellen ............................................................................................................... 8 7 Een koppeling (link) maken. ............................................................................... 12 8 Spry-elementen .................................................................................................. 12 9 Video-object ....................................................................................................... 14

10 Opslaan en testen ........................................................................................... 15 11 Publiceren op het Internet ............................................................................... 16

12 FTP-server ...................................................................................................... 17 13 Bezoekertellers ............................................................................................... 19 14 Disclaimer ....................................................................................................... 19 15 HTML .............................................................................................................. 20

16 Lopende tekst in HTML met een HTML-generator .......................................... 20 17 Eigen URL-pictogram ..................................................................................... 22

18 Slot ................................................................................................................. 23

1. Voorwoord Wil je een eigen website maken dan zijn er meerdere mogelijkheden. - De eerste is hem helemaal opbouwen in HTML- codes.

Hiervoor heb je nodig: - Bekendheid met de HTML-code..

Een praktisch codeoverzicht vind je o.a. op: http://www.anouksweb.nl/html/html.php

- Een tekstbewerker waar je tekst zonder opmaak kunt schrijven bv. het Kladblok van Windows.

Heb je geen of nauwelijks kennis van HTML dan kun je beter de volgende mogelijkheid gebruiken.

- Het gebruiken van een speciaal programma bv. Dreamweaver. Hierin maak je ook gebruik van HTML, maar in de Design-modus worden de functies al gebruiksklaar aangeboden, a.h.w. in WYSIWYG. In de Code-modus kun je ook direct in code schrijven. Mijn huidige site Vanalleswat is opgebouwd met Dreamweaver CS3 (Engelstalige uitvoering). Adobe Dreamweaver is een zeer compleet programma om websites te maken. De prijs is wat minder comfortabel. Kost al gauw €500.

Vind je de prijs een probleem, dan zijn er ook eenvoudige gratis programma’s, om websites te maken, te downloaden b.v. NVU. Het wordt niet meer geactualiseerd maar is een goed, eenvoudig programma om de eerste stappen in webdesign te maken. Je kunt het downloaden door te klikken op: http://www.mozilla-nl.org/producten/nvu/ Om alle mogelijkheden van Dreamweaver te leren gebruiken is het verstandig om een goed boek over Dreamweaver ter beschikking te hebben. Daar zijn er veel van te koop maar je kunt ze ook in een Openbare Bibliotheek lenen. Een heel handige optie is om gebruik te maken van de gratis nederlans-talige Dreamweaver-cursus die je kunt hem bekijken op: http://www.gratiscursus.be/Dreamweaver_CS3/index.htm De voordelen van Dreamweaver: - Het is vrij eenvoudig is om je pagina’s op te bouwen, ook zonder kennis

van HTML. Je kunt in de Design-modus (Design), in de Code-modus (=HTML) of in de Split-modus (=beide) werken. Mijn advies: Heb je geen ervaring met de HTML-code, werk dan in de Design-modus.

- Je kunt de pagina’s opbouwen m.b.v. frames, tabellen en lagen. Frames en lagen laat ik hier verder buiten beschouwing. Het werken met frames is verouderd, daarom heb ik mijn nieuwe site opgebouwd met tabellen.

- Door gebruik te maken van opmaak-stijlen in een Style Sheet kun je de tekst-layout en pagina-layout in al je pagina’s hetzelfde maken en later evt. in één handeling wijzigen.

Hieronder ga ik uitleggen hoe e.e.a in zijn werk is gegaan. Dat zou een leidraad kunnen vormen als je zelf ook een website wilt gaan bouwen. Ik ga uitleggen hoe je een aantal opmaakstijlen in een Style Sheet vastlegt, een nieuwe pagina aanmaakt, een tabel plaatst en deze voorziet van inhoud.

2. Site directorie aanmaken. Het allereerste moet je een site-directory aanmaken. Maak deze aan in je documentendirectory. De directory krijgt de naam van je toekomstige site b.v. MijnSite Maak in die gemaakte directory ook een subdirectory /Documenten en evt. een subdirectory /Foto aan. Daar kun je later documenten en foto’s in plaatsen die je op je site wilt tonen. Ook alle overige bestanden en mappen moet je de rootdirectory /MijnSite plaatsen

3 Site definitie aanmaken. Door een sitedefinitie aan te maken via Site - New Site kun je de structuur van je site beheren m.b.v. Site Managment. Dat is niet absoluut nodig maar wel aan te raden. Je maakt daar dan een structuur aan waarmee je je site op een overzichtelijke manier kunt beheren. Zo kun je b.v. in een grafisch overzicht alle onderdelen zien waaruit je site bestaat zien en ook hun relatie tot elkaar. Ook kun je b.v. de gewijzigde pagina’s automatisch uploaden naar de server. Om alle mogelijkheden te leren kennen is een goed handboek echter niet overbodig. Ik heb mijn definitie locaal gemaakt, zodat ik geen automatische verbinding krijg met de externe server en dus ook niet per ongeluk wijzigingen en probeersels automatisch upload. Wil ik echt uploaden naar mijn host dan gebruik ik FileZilla (zie .12). Een dergelijke sitedefinitie aanmaken gaat als volgt:

- Start Dreamweaver - Klik in de menubalk op Site - Klik op New Site - Open evt. het tabblad Basic - Vul de naam in van je site, b.v. MijnSite. - Laat het veld voor een Url ongemoeid en klik Next - Kies in het volgende scherm voor No, I do not …. - Kies in het volgend scherm Edit local copies …. - Vul in het veld de plaats in van je sitedirectorie (zie .2) en klik Next. - Kies in het eerste veld voor None en klik Next - Nu zie je een samenvatting van je sitedefinitie. - Klik op Done. Je definitie wordt nu opgeslagen. Vink in de menubalk bij Window het item Files aan.

Nu zie je rechtsonder in de tab Files alle bestanden die deel uitmaken van je site. Heb je meerdere sitedefinities dan kun je de gewenste hier ook selecteren.

4. Opmaakstijl maken in een Style Sheet 4.1 Wat is een Style Sheet?

Een Style Sheet is een speciale pagina waarin je een aantal tekst- en paginakenmerken vastlegt in de vorm van een opmaakstijl. Je kunt meerdere opmaakstijlen vastleggen met elk een eigen naam, b.v.: KopKlein, KopMiddel, KopGroot. Het Style Sheet sla je ook op onder een eigen naam, meestal de naam van de site, b.v: MijnSite.css De tekstkenmerken kunnen zijn: - Lettertype (b.v. Arial, Courier, etc) - Lettergrootte (b.v. small, medium, large) - Letterkleur (b.v. zwart, blauw, rood, etz.) - Lettereigenschap (vet, cursief, onderstreept, normaal) Je kunt ook paginakenmerken zoals achtergrondkleur en marge-grootte vastleggen in een stijl. Dat blijft hier buiten beschouwing. Het gemaakte Style Sheet koppel je aan al je nieuwe webpagina’s

4.2 Aanmaak van een css-bestand - Open Dreamweaver - Klik op File - Klik op New - Kies Blank Page - Klik op CSS - Klik op Create

4.3 Aanmaak van een stijl

Het is handig als je van te voren al een keuze hebt gemaakt in welke opmaak je de koppen, teksten, links etc. op je scherm wilt hebben. We gaan er voorlopig van uit - Alles krijgt het Arial-lettertype - Je maakt een hoofdtekst , medium,

zwart, normaal - Je maakt 1 soort kop, large, zwart, normaal - Je maakt 3 linktypes, resp. small, medium, large, blauw, normaal Hiervoor is dus nodig dat we 5 stijlen aanmaken. Om een stijl aan te maken ga je als volgt te werk - Klik op Tekst - CSS-style - New - Vul bij Name een naam in (we kiezen voor ‘kop’) - Klik op OK - Vul verder in zo als hiernaast

aangegeven - Klik op Apply - Klik op OK Nu staat je eerste opmaakstijl in je Style Sheet. Maak nu ook de andere opmaakstijlen aan. Ben je klaar sla het sheet dan op: - Klik op File - Blader naar je sitedirectorie - Klik op Save as - Klik op de naam van het reeds gemaakte

.CSS-bestand. (b.v. MijnSite.css) - Klik op OK Je Style Sheet is nu klaar en kun je bij alle nog te maken webpagina´s gaan gebruiken.

5. Aanmaak hoofdpagina 5.1 Enige opmerkingen:

- Een website is nagenoeg altijd opgebouwd uit meerdere pagina’s. De eerste pagina is de hoofdpagina. Op alle andere pagina’s moet een

knop aanwezig zijn waarmee je direct naar de hoofdpagina kunt erugkeren.

- De naam van de hoofdpagina wordt altijd: index.html Deze naam moet geheel in kleine letters. - De hoofdpagina is de eerste pagina die een bezoeker te zien krijgt als

hij je site bezoekt. Eigenlijk is het een welkomstscherm, besteedt er dus veel zorg aan.

- Streef er naar dat een bezoeker met maximaal 3 klikken bij de gezochte informatie komt.

- Op de hoofdpagina komen een aantal objecten te staan. Dit kunnen grafische of tekstobjecten zijn, te denken valt aan:

- Site-naam of logo - Introductietekst - Bezoekersteller (zichtbaar of verborgen) - Links naar andere pagina’s, documenten, andere site’s Deze links kunnen grafische knoppen zijn maar ook tekst. 5.2 Openen nieuwe pagina

- Klik op File - Klik op New - Klik in het nieuwe scherm op: - Blank Page - HTML - None - Create

Nu hebben we onze eerste webpagina voor ons Weliswaar geheel leeg maar dat gaat veranderen. Maar eerst de pagina opslaan

5.3 Pagina opslaan

We gaan deze eerste pagina nu opslaan in de eerder gemaakte MijnSite-directorie - Klik op File - Klik op Save as - Blader naar de directorie MijnSite - Geef als naam op index (geen hoofdletters) - Klik op Save De eerste pagina is nu opgeslagen als index.html

5.4 Style Sheet koppelen aan index-pagina. - Klik op Text - Klik op CSS-Styles - Klik op Attach Style Sheet - Blader bij File/Url naar je MijnSite-directorie en klik op MijnSite.css - Klik op OK De koppeling is nu tot stand gebracht. Als je nu onderaan in de Properties-balk op Styles klikt zie je daar de aangemaakte opmaakstijlen.

6 Tabellen 6.1 Wat is een tabel?

Al de objecten die op het scherm moeten komen behoren een vaste eigen plaats te krijgen. Ook moeten de onderdelen duidelijk leesbaar op het scherm aanwezig zijn zonder dat een horizontale scrollbalk nodig is. Een verticale scrollbalk zal soms niet vermeden kunnen worden. Dit geldt dan minimaal voor schermresoluties van 1024x768 en hoger. Daarom gaan we het scherm indelen m.b.v. een tabel. Een tabel is een soort rooster dat uit rijen en kolommen bestaat. Wij kiezen om te beginnen 3 kolommen en 3 rijen. Deze tabel kan zichtbaar maar ook verborgen worden. In de ontwerpfase is hij altijd zichtbaar. De vakjes in de tabel worden cellen genoemd. Cellen kunnen weer samengevoegd of gesplitst worden. Rijen en kolommen kunnen later evt. ook toegevoegd of verwijderd worden.

6.2 Plaatsen van een tabel. - Klik op Insert - Klik op Table - Vul aantal Rijen en Kolommen in - Vul bij Tablewidth 100% in

Hierdoor zal de tabel altijd de totaalbreedte van het monitorscherm beslaan, onafhankelijk van de schermresolutie.

Geef de Kolommen 1 en 3 een breedte van 20% en de 2e Kolom een breedte van 60%

- Klik op OK Voorbeeld van aanmaak van een tabel met 3 rijen en 3 kolommen. De tabel krijgt een breedte van 100% ( dus krijgt altijd de breedte van het monitorscherm)

De kolommen krijgen een breedte van resp. 20%, 60% en 20%. Deze breedten zijn weer percentages van de tabelbreedte. Klik met de cursor op de rand van een kolom om de kolom te selecteren.

Vul vervolgens hier het breedtepercentage van de kolom in. Doe dat zo bij elke kolom.

6.3 Tabel aanpassen Op je scherm is nu de tabel zichtbaar. Doordat we de breedtemaat op 100% hebben aangegeven zal hij de gehele paginabreedte hebben. De hoogte is nog maar 1 regel/rij doordat de cellen nog leeg zijn. De rijhoogte past zich zelf aan aan de inhoud tenzij je een vaste (minimum) hoogte opgeeft. Dat doen we voor de 1e en 2e rij. Rij 1 geven we een rijhoogte van 70 (pixels) Rij 2 geven we een hoogte van 600 (pixels Bij rij 3 geven we geen hoogte op. Die hoogte wordt bepaald door de inhoud. Op deze manier zal, onafhankelijk van de monitorresolutie, de hoofdpagina altijd horizontaal het scherm vullen. Verticaal zullen altijd minimaal de eerste 2 rijen zichtbaar zijn.

Welkom-pagina met tabel.

Door in het menu Window-Properties (Venster-Eigenschappen) aan te vinken zal aan de onderzijde een eigenschapvenster verschijnen van een geselecteerd object

Eigenschappen van de tabel

6.4 Tabel vullen met objecten. - Achtergrondkleuren - Selecteer de tabel door aan de bovenzijde op de tabelrand te klikken.

Kies een achtergondkleur bij Bg color. - Selecteer achtereenvolgens de linker- en rechter middencel en geef die

ook een achtergrondkleur. - Koptekst - Type in de middenboven-cel de site-naam. Geef die een kleur en een

behoorlijke lettergrootte Mooier is om een grafisch logo te maken in een grafisch programma, dat op te slaan in .gif-formaat en in die bovencel te inserten. Dat heb ik in het voorbeeld gedaan.

- Welkomsttekst - Plaats de welkomsttekst in de middencel. Geef die een

aangemaakte stijl b.v. ‘hoofdtekst’. - Koppelingen

- In de linkse middencel komen de koppelingen naar de onderwerpen verder in je site. Ik heb daar twee koppelingen als voorbeeld neergezet naar een pagina Dagbladen.

- De eerste is een tekst ‘Vanalleswat’ met een aangemaakte stijl ‘tekstlarge’ en die gekoppeld is aan mijn site Vanalleswat.

- De tweede is een grafische knop in .gif-formaat, zelf gemaakt in een grafisch programma en ge-insert in deze cel. Daarna gekoppeld aan de pagina ‘Dagbladen.html’. Je kunt ook een Flash-knop maken. Deze maak je aan via Insert-Media-Flashbutton.

- In de middenonder-cel komt een contact-koppeling. Als je daarop klikt verschijnt een emailformulier om berichten naar de site-eigenaar door te geven.

7 Een koppeling (link) maken.

Je kunt van elk object en tekst op een pagina een koppeling maken naar een andere pagina, een document of een externe site. Het gaat als volgt. - Selecteer het grafisch object of tekstdeel, dat je als koppeling wilt

gebruiken. - Onderaan verschijnt dan de eigenschapbalk die bij dat object behoort. - Blader bij ‘Link” naar de pagina of document dat gekoppeld moet

worden. - Of vul bij ‘Link” de Url in van de site die dan geopend moet worden, b.v.

http://www.gerritentiny.nl

8 Spry-elementen

Een mooie toepassing in Dreamweaver is het gebruik van Spry-elementen. Dit zijn een aantal mogelijkheden om leuke effecten op je scherm te gebruiken, b.v. oprolbare teksten en rolmenu’s. Je kunt ze invoegen via: Insert – Layout Objects , kies daar een gewenst element uit de 4 Spry-elementen. Als je een van die elementen aanklikt wordt het, op de plaats waar de cursor staat, ingevoegd en wordt een speciaal .CSS-blad gemaakt waarin de eigenschappen van het gebruikte Spry-element staan vermeld en evt. kunnen worden aangepast. (Klik daarvoor op het gewenste item in het rechtse paneel)

In dit voorbeeld heb ik een rolmenu ingevoegd. Het ziet er wat saai uit maar de eigenschappen kun je in het .CSS-blad aanpassen.

Hier zie je in mijn site VANALLESWAT een bewerkt rolmenu.

Het is de moeite waard om wat te oefenen met het gebruik van spry-

elementen. Wil je er meer van weten kijk dan eens bij: http://livedocs.adobe.com/nl_NL/Dreamweaver/9.0/help.html?content=WS2442184F-3DF4-4240-96AF-CC6D792E2A62.html Daar wordt duidelijk uitgelegd hoe je de element kunt gebruiken en aanpassen. Opmerking: Bij de geuploadde site werkte het Spry-menu bij mij prima in IExplorer maar niet goed in Google Chrome en Mozilla Firefox. Door bij die browsers (bij Chrome via de huidige pagina beheren-tekenset en bij Firefox via beeld-tekenset) de tekenset op Unicode-UTF8 in te stellen was dit probleem opgelost. Let wel! Dit moet dus bij de kijker gebeuren. Als het niet goed werkt in IExplorer verander daar de tekenset, via pagina-codering, ook in Unicode-UTF8.

9 Video-object

M.b.v. Dreamweaver is het vrij eenvoudig om eigen videofilmpje te vertonen op je website. Deze moeten dan wel eerst geschikt worden gemaakt en vervolgens naar de server worden geupload. Het geschikt maken is nodig omdat een normaal videofilmpje al gauw één of meer Gb groot kan zijn. Dat geeft dan problemen doordat tijdens het afspelen, de benodigde datastroom via internet meestal niet snel genoeg is. Dat geeft dan stilvallen of stotteren van het beeld als gevolg. Wil je dit voorkomen maak dan de beeldafmetingen niet te groot. Kies bij een breedbeeldformaat (16:9) voor 720x405 pixels en bij een normaal formaat (4:3) voor 720x 540 pixels. Dit zal bij downloadsnelheden > 3Mb/sec l goed werken. Er zijn twee manieren om de filmpjes te vertonen. - Normaal downloaden, opslaan en vervolgens afspelen met een

geschikte medisplayer, b.v. de Windows Media Player, de FLV Media Player, PowerDVd, etc. - Het voordeel is dat zo de meerder gangbare formaten zoals

.wmv en .flv kunnen worden bekeken. - Het nadeel is dat eerst de hele film gedownload moet worden

voordat hij kan worden bekeken. Dit duurt meestal erg lang en is dus niet aan te bevelen.

- Je filmpje eerst omzetten in het Adobe Flash-formaat xxxxx.flv en daarna uploaden naar de server. Het converteren naar een .flv-formaat gaat erg handig met het gratis conversieprogramma Quick Media Converter. Te downloaden op: http://www.computeridee.nl/downloads.jsp?rubriek=1620616&id=2478626 Het .flv-bestand kan met Flash (dat nagenoeg op elke gangbare computer aanwezig is) rechtstreeks via je site vertoond worden - Nadeel is dat het converteren naar een .flv-bestand het bestand

behoorlijk groter maakt. - Voordeel is dat het filmpje al tijdens het downloaden direct

bekeken kan worden. Als de downloadsnelheid wat laag is kan dat wel met beeldstotteren gepaard gaan.

Wil je gebruik maken van deze mogelijkheid, maak dan een nieuwe pagina aan waarin je het filmpje wil vertonen, maak een link naar deze pagina en maak in die pagina een video-object aan via: Insert – Media – Flash Video. Voor het invullen van de parameters, zie onderstaand voorbeeld.

Deze nieuwe pagina moet naar je host-server geupload worden, samen met de automatisch extra aangemaakte bestanden FLVPlayer_Progressive.swf, Clear_Skin_3.swf en de map Scripts. Het filmpje dat je bekijkt wordt (in XP) opgeslagen in de directorie C:/Document en Settings/eigen naam/Local Settings/Temporary Internet Files. Bij andere besturingssystemen wordt het in een daar mee vergelijkbare directory peplaatst. Als je het opnieuw bekijkt wordt het van daar uit geladen en zullen evt. downloadsnelheden geen rol meer spelen. Het inladen vraagt dan wel even tijd. Evt. kun je het daar ook verwijderen. Een demofilmpje (Fotoshow Rome) staat op mijn site VANALLESWAT.

Deze demo is gemaakt met het gratis Magix Slideshow Maker programma.

10 Opslaan en testen Heb een pagina klaar of gewijzigd, vergeet niet om hem dan opnieuw op te slaan. Test hem ook uit op je internetbrowser, b.v. IE-Explorer. Dit doe je door File-Preview in Browser-IExplore aan te klikken. Heb je nog andere browsers geïnstalleerd dan kun je ook daar testen.

We hebben nu globaal behandeld welke stappen moeten worden doorlopen om tot een eenvoudige website te komen. Ik hoop dat bovenstaande uitleg voldoende is om inzicht te krijgen hoe e.e.a. in zijn werk gaat. Ga je aan de slag dan zou ik er toch voor zorgen om een behoorlijk naslagwerk over DreamWeaver bij de hand te hebben.

11 Publiceren op het Internet Hier wordt onder verstaan het onderbrengen van je site bij een externe host van waaruit je site wereldwijd toegankelijk is. Soms heeft je eigen internetprovider de faciliteit om daar je site te publiceren. Service, mogelijkheden en keuze van je URL zijn meestal erg beperkt. Beter is om een abonnement bij een speciale provider (Host) te nemen.

Je moet dan een contract afsluiten, kosten €2 á 10/mnd. Je kunt daar dan ook een eigen domeinnaam, b.v. www.eigennaam.nl, aanvragen. Een goede en goedkope provider is Hosting2Go. Kosten €28/jr. O.a. deze site VANALLESWAT draait daar. Deze installeert (op verzoek) ook de Frontpage serverextensies. Daardoor kun je o.a. ook de bezoekersteller van Frontpage gebruiken. Je hebt echter geen aparte bezoekersteller nodig, daar je bij Hosting2Go zeer uitgebreide statistieken over bezoekers en bezoekersgedrag kunt inzien. Kijk eens op hun site ter oriëntatie en evt. voor bestellen.

http://www.hosting2go.nl/?refid=101

12 FTP-server Heb je een host-contract tot je beschikking, dan heb je van hem ontvangen: - Een domeinnaam (URL) - Een gebruikersnaam - Een wachtwoord Met deze gegevens kun je een account aanmaken en je site op internet plaatsen. Heeft men de site klaar en goed getest, dan moet men de gemaakte site bij de host plaatsen. Dit gebeurt d.m.v. uploaden. Hiervoor heeft men een FTP-server nodig. Dat is een programma waarmee je de gemaakte site naar je webruimte bij je host kopieert. Soms stelt de host een FTP-server ter beschikking, ook Dreamweaver heeft een FTP-server, maar er zijn ook een aantal goede gratis FTP-servers te downloaden via Internet. B.v. via http://filezilla-project.org is de free-versie van FileZilla Cliënt te downloaden. Heeft men het gedownload en geïnstalleerd dan moet je eerst een account aanmaken via Bestand – Sitebeheer. In het Sitebeheer-schermpje kun je je gegevens invullen

12.1 Account aanmaken - Vul bij ‘host” je eigen Url in of bij de

eerste keer uploaden de Url die je host heeft opgegeven.

- Vul bij ‘gebruiker’ je verstrekte gebruikersnaam in

- Vul bij ‘wachtwoord’ het verstrekte wachtwoord in

- Klik op OK - Klik op Verbinden

12.2 Uploaden - Blader in de browser bij Locale site naar de directorie waar je

bestanden zijn opgeslagen en klik daarop. - In het vak daaronder zijn nu al je aangemaakte

bestanden te zien - Sleep deze met de muis naar de map HTTPDOCS aan

de rechterzijde. Nu kan men de site op internet bekijken.

13 Bezoekertellers Hoogstwaarschijnlijk wil je ook wel graag weten of er naar je site gekeken wordt. Daarvoor kun je een bezoekersteller aan je site toevoegen. Hiervoor zijn verschillende mogelijkheden. Letsstat Een goed werkende teller is de teller van de firma Letsstat. De uitvoering Letsstat X1 is gratis voor privé-gebruik en te downloaden via:

http://www.letsstat.nl/ Enige voordelen van deze teller zijn:

- Je krijgt informatie hoe dikwijls je site is bezocht - Je krijgt informatie wanneer je site is bezocht - Je kunt de IP-adressen van de bezoekers bekijken - Je kunt zien welke pagina’s het meest bekeken worden - De data worden ook nog grafisch gepresenteerd - Hij heeft geen reclame of banners - De teller kan zowel zichtbaar als verborgen worden gebruikt - De toegang naar de telgegevens kan met een wachtwoord worden

afgesloten. Wel wordt verwacht dat je een klein Letsstat-icoontje op je site toelaat, waarmee men toegang kan krijgen naar de site van Letsstat. Hosting2go Publiceert men zijn site via Hosting2go dan zijn er ook uitgebreide bezoekersstatistieken beschikbaar. Die zijn alleen toegankelijk met een wachtwoord. Overig Verder zijn er nog veel meer gratis bezoekerstellers via Internet te downloaden. Die moet je dan aan de HTML-code van minstens je openingspagina toevoegen. Dat is niet echt moeilijk. Nadeel van de gratis tellers is dat er altijd een duidelijk zichtbaar icon van de tellerleverancier op het betreffende scherm wordt vertoond, via welk je dan naar de site van die tellerleverancier kunt doorlinken. Wil je dat niet dan kun je bij die leverancier meestal een betaald abonnement afsluiten. Kosten €5 á €10/mnd.

14 Disclaimer

Zorg er voor dat je niet aansprakelijk kunt worden gesteld voor eventuele schade die door gebruik van je website zou kunnen ontstaan. Een mogelijkheid hiervoor is om een z.g. disclaimer in je site op te nemen. Je kunt er zelf één proberen samen te stellen maar daar is nogal wat juridische kennis voor nodig. Beter is om op internet een disclaimer te zoeken en te downloaden. B.v. de gratis disclaimer die beschikbaar wordt gesteld door:

Van Eeckhoutte Advocaten ’s-Gravenhage.

Om hier meer over te weten, klik op: http://www.vaneeckhoutteadvocaten.nl/freedisclaimer.html

15 HTML Hoewel een site helemaal wordt opgemaakt in HTML-code is Dreamweaver een programma waarin je geen kennis hoeft te hebben van die HTML-code. Je kunt je site dan helemaal in de Design-modus opbouwen. Toch zijn er een aantal situaties waarbij het handig is om toch wat kennis te hebben van die taal. Als je in de Split- of Code-modus draait heb je toegang tot de HTML-code. Je kunt dan direct aanpassingen doen of fouten corrigeren. Ook functies die niet in Dreamweaver aanwezig zijn, kun je daar invoegen in de vorm van z.g. tags. Bijvoorbeeld om een lopende tekst te maken. (zie 16) Mijn advies is om je toch maar wat elementaire kennis van de HTML-taal eigen te maken. Het lijkt wel, maar is niet zo moeilijk. Op het internet zijn diverse sites die uitleg geven. Een zeer duidelijke en Nederlandstalige is http://www.handleidinghtml.nl/ . Er zijn er nog veel andere programma’s en andere methoden om een site te maken. B.v. alleen in HTML-code. Dat kan zelfs met een simpele tekstbewerker. Dat is echter alleen voor ervaren website-bouwers weggelegd.

16 Lopende tekst in HTML met een HTML-generator

Een HTML-generator is een programma dat automatisch HTML-tags produceert voor functies die men in een site wil aanbrengen. De Quackit-generator kan er tientallen produceren o.a. voor een lopende tekst. http://www.quackit.com/html/html_generators/html_marquee_generator.cfm Voorbeeld van een tag voor een lopende tekst:

<!-- HTML Codes by Quackit.com --> <style type="text/css"> .html-marquee {height:20px;width:90%;background-color:#DDDDC;font-family:Arial;font-size:10pt;color:#000000;font-style:italic;border-width:1px;border-style:solid;border-color:#000000;} </style> <marquee class="html-marquee" direction="left" behavior="scroll" scrollamount="2" scrolldelay="1" >Enter your marquee text here, and/or enter an image below...</marquee><p style="font-family:verdana,arial,sans-serif;font-size:10px;"></p>

Gebruik van deze tag gaat als volgt : - Plaats de cursor op de plaats waar het lopend tekstvenster moet

komen - Ga naar het HTML-venster - Als het goed is, staat daar de cursor ook op de juiste plaats. - Kopieer de bovenstaande tag naar die plaats. - Vervang Enter your marquee text here, and/or enter an image below...

door je eigen tekst. - Pas evt. de eigenschappen aan:

o height = vensterhoogte (px = pixels, % = procent) o width = vensterbreedte (px = pixels, % = procent) o background-color = vensterkleur o font-family = lettertype o font-size = lettergrootte o font-style = letterstijl (bold, italic, normal) o color = letterkleur o border-width = dikte borderlijn in pixels o border-style = lijnsoort (solid, dotted, dashed of double) o border-color = kleur borderlijn o direction = scrollrichting (left, right, up, down) o behavior = scroll (lopend) of bounce (op- en neergaand) o scrollamount = het aantal pixels/verschuiving (hoog getal is sneller) o scroll-delay = om de hoeveel msec een verschuiving moet

plaatsvinden (hoog getal is langzamer) Opm.: Scroll-amount en scroll-delay bepalen de loopsnelheid en de ‘schokkerigheid’. Speel daar mee om een optimaal lopen te verkrijgen. Mijn voorkeur is scroll-amount=”2” en scroll-delay=”1”

17 Eigen URL-pictogram Als je site op Internet staat is het wel zo leuk om aan je URL ook een eigen pictogram toe te kennen. Normaal wordt het bekende blauwe Explorer-pictogram met je URL verbonden, maar een persoonlijk pictogram is wel zo aardig. Ik zelf heb voor deze site een geel monogram gemaakt. Ik heb dat als volgt gedaan in 4 stappen : 1 Een plaatje maken met Photoshop: - Eerst in Photoshop een nieuw document geopend met een grootte van

32x32 pixels. Kies je minder pixels dan wordt het pictogram wat grof. - Geef het plaatje een achtergrondkleur

(Deze achtergrond kun je later bij het omzetten naar het ico-formaat evt. transparant maken)

- Kies een voorgrondkleur. - Je kunt nu de gewenste pixels één voor één inkleuren met het kwastje. - Wil je alleen maar een letter dan kun je via de tekst-optie een letter

invoeren. - Sla dit plaatje (Opslaan als) op in .GIF-formaat b.v. mijnpictogram.gif. 2 Het plaatje omzetten in een icon (xxxxx.ico) met IrfanView - Open IrfanView - Laadt het reeds aangemaakte plaatje - Sla het op (Opslaan als) in het .ico-formaat. De bestandsnaam wordt dan b.v. mijnpictogram.ico

Kies als bestemmingsmap de hoofdmap van je site waarin ook o.a. index.html staat.

3 De code van index.html aanpassen - Open in Dreamweaver het bestand index.html - Open het code-scherm - Plaats bovenaan in de header, of direct boven <head>, de tekst: <link rel="shortcut icon" href="mijnpictogram.ico"> - save index.html 4 Wijzing uploaden naar je Host. - Upload met FileZilla de bestanden index.html en mijnpictogram.ico naar

je hoofddirectorie (HTTPDOCS) bij je Host. Nu zal voortaan in Explorer je URL worden voorafgegaan door je eigen pictogram. Ook afgeleiden koppelingen zoals in Favorieten of snelkoppelingen op het bureaublad zullen van het eigen pictogram worden voorzien.

18 Slot

We hebben nu een eenvoudige website opgebouwd, waar echter nog niet je eigen inhoud in staat. Je zult nu zelf de bestaande pagina’s moeten vullen met een eigen inhoud en eventueel nieuwe pagina’s met bijbehorende knoppen aanmaken. Ook de indeling, verfraaiing en achtergronden kun je nu naar eigen hand gaan zetten. Nog enige tips:

- Om alle mogelijkheden te leren gebruiken is het verstandig om een goed boek over Dreamweaver ter beschikking te hebben. Daar zijn er veel van te koop maar je kunt ze ook in een Openbare Bibliotheek lenen. Een heel handige optie is om gebruik te maken van de gratis nederlans-talige Dreamweaver-cursus die je kunt hem bekijken op: http://www.gratiscursus.be/Dreamweaver_CS3/index.htm

- Bedenk van te voren goed welke onderwerpen je op je website wilt gaan publiceren.

- Bedenk ook dat Internet openbaar is en dat, wat je éénmaal gepubliceerd hebt, niet meer is terug te halen en een eigen leven kan gaan leiden.

Ben dus voorzichtig om privacygevoelige onderwerpen in je site op te nemen.

- Neem geen onjuiste, kwetsende of immorele inhoud in je site op. - Houd je pagina’s overzichtelijk met niet te veel informatie tegelijkertijd,

maar zorg wel dat op je welkom-pagina al globaal te zien is wat er op je site is te vinden.

- Maak je pagina’s niet te bont met onnodige plaatjes of flitsende dingen. Dat leidt alleen maar af en vertraagt de laadtijd.

- Maak je paginaopmaak zodanig dat er, ook in andere monitor-resoluties, maar minimaal gebruik behoeft te worden gemaakt van de schuifbalken. Test dat ook uit.

- Bouw je site zodanig dat men met een minimaal aantal klikken (liefst minder dan 3) de gezochte informatie op je site in beeld heeft

Vind je de prijs van Dreamweaver een probleem, dan zijn er ook eenvoudige gratis programma’s, om websites te maken, te downloaden b.v. NVU. Het wordt niet meer geactualiseerd maar is een leuk programma om de eerste stappen in webdesign te maken. Je kunt het downloaden door te klikken op: http://www.mozilla-nl.org/producten/nvu/ Ik hoop dat deze kennismaking meegeholpen bij het maken van je eerste eigen website en mogelijk zijn het de eerste stappen om ook de uitgebreidere mogelijkheden te gaan verkennen.

Veel succes