- Plan Zo kun je een website bouwen! BoekjeHoeKanJeEenWebsiteBouwen.i1 1 8-7-2008 17:23:14
BoekjeHoeKanJeEenWebsiteBouwen.i2 2 8-7-2008 17:23:15
In dit boekje staat de uitgebreide versie van hoe je een website zou kunnen bouwen. Mijn website is op deze manier tot stand gekomen. Voor ik hieraan begon had ik nog nooit een website gebouwd. Daarom ben ik best trots op het eindresultaat. Door veel te oefenen heb ik steeds weer nieuwe dingen erbij geleerd. BoekjeHoeKanJeEenWebsiteBouwen.i3 3 8-7-2008 17:23:15
BoekjeHoeKanJeEenWebsiteBouwen.i4 4 8-7-2008 17:23:17
Wat heb je allemaal nodig om een website te kunnen bouwen: Een tafel en een stoel Een computer of laptop Een muis en muismat Een internetverbinding Adobe GoLive Adobe Photoshop Kladblok of Editor En een hoop geduld, durf en doorzettingsvermogen BoekjeHoeKanJeEenWebsiteBouwen.i5 5 8-7-2008 17:23:18
Je wilt een website bouwen maar je weet niet hoe dat moet? Lees hier de beschrijving van hoe ik deze website heb gebouwd. Zoek een provider waarbij je een account bij kunt aanmaken, deze website staat mede dankzij pleskprovider.nl online Bedenk een goede naam voor je website, zodat deze bij je past en makkelijk te vinden is op internet Print alle formulieren die je nodig hebt uit en vul ze in en stuur ze op naar Plesk Provider. Inscannen en doormailen mag ook Nu is het wachten tot je website online word gezet BoekjeHoeKanJeEenWebsiteBouwen.i6 6 8-7-2008 17:23:19
Je ontvangt de mail dat je account online staat, en nu?? Je opent je email en klikt op de link Je vult de gebruikersnaam en het wachtwoord in op de website Je zit nu in de Plesk Provider Database. Klik op Home Om een nieuw email adres aan te maken klik je eerst op mail Klik dan op new mail adres Maak het nieuwe email adres aan Klik op redirect om dit email adres door te linken naar je eigen email adres. Je ontvangt nu de mailtjes die via die mail worden gestuurd gewoon op je eigen mail. BoekjeHoeKanJeEenWebsiteBouwen.i7 7 8-7-2008 17:23:19
Om een nieuwe database aan te maken voor je website, moet je het volgende doen: Ga naar Home in Plesk Klik op databases Maak een new database aan [Samantha] Maak een nieuwe user aann onthoud het wachtwoord!! [Samantha] De database is nu aangemaakt. Klaar voor de volgende stap. BoekjeHoeKanJeEenWebsiteBouwen.i8 8 8-7-2008 17:23:20
Omdat je nu op de server zit is het makkelijk om dit nu eerst te doen. Om een afbeelding of filmpje bij een bericht te kunnen plaatsen moet je het volgende doen. Ga naar Home Klik op de naam van je website [samanthadevries.nl] Klik dan op file manager Klik op Httpdocs Klik op new directory Maak een map genaamd images aan Klik op dezelfde rij als de map images, onder het kopje persmissions de tekst aan Vink bij others alles aan BoekjeHoeKanJeEenWebsiteBouwen.i9 9 8-7-2008 17:23:22
Als dat ook allemaal gebeurd is ben je klaar met deze stap. We zijn al even op weg. Maar nu dit nog: Ga nu naar Wordpress.org en download daar de bestanden die je nodig hebt om een website te beginnen Als je de bestanden gedownload hebt, plaats ze in een nieuwe map die je bijvoorbeeld kan noemen Website Samantha 10 BoekjeHoeKanJeEenWebsiteBouwen.i10 10 8-7-2008 17:23:22
Je bent nu klaar me de belangrijkste dingen voor het maken van je website. Je hebt nu het programma GoLive nodig om verder te werken. Open het programma Adobe GoLive Klik op New Klik op Site Klik op site from excisting content Klik op from a local folder of excisting file Selecteer de map met de bestanden van de website Selecteer de index pagina Klik op Finish 11 BoekjeHoeKanJeEenWebsiteBouwen.i11 11 8-7-2008 17:23:23
Om een connectie met de server te maken voor het uploaden van de verschillende bestanden volg je de aanwijzingen hier onder: Klik op Site boven in de balk Klik op Settings Klik op Publish Site Klik op Connect Vul hier de gegevens in die je hebt gekregen per mail [FTP server en wachtwoorden] Als je alles goed hebt ingevuld kun je nu verbinding krijgen door op connect te klikken. Upload nu alle bestanden die in de map staan die je had gedownload in dezelfde map op de server. 12 BoekjeHoeKanJeEenWebsiteBouwen.i12 12 8-7-2008 17:23:24
Je site zal daarna online staan, maar er moet nog wel wat gebeuren voor die daadwerkelijk af is! Laat GoLive nu even rusten. Open nu de map met bestanden van wordpress. Open nu samanthadevries.nl/readme.html Lees het bestand door, hierin staat hoe de installatie te werk gaat Open het bestand wp-config-sample.php in een tekst editor [bijv. kladblok of tekst edit, het liefste geen Word] Verander nu de woorden die tussen haakjes staan (..) De eerste is de naam van je website zonder.nl [samanthadevries] De tweede is de user die je hebt aangemaakt in plesk [samantha] De derde is het wachtwoord van de user in plesk [...] 13 BoekjeHoeKanJeEenWebsiteBouwen.i13 13 8-7-2008 17:23:24
14 De vierde is localhost en die hoef je niet te veranderen!!!! Sla dit bestand op als wp-config.php en sla het op in de map van de internetbestanden Ga terug naar GoLive en zoek het bestand in de map op Upload dit bestand nu op de server Open daarna in je internet browser de website met daar achter de tekst /wp-admin/install.php [www.samanthadevries.nl/wp-admin/install.php] Hier vul je de naam van je weblog in en je email adres Nu krijg je een gebruikersnaam en wachtwoord te zien Schrijf dit op want dit zul je vaker nodig hebben Je website is nu helemaal geinstalleerd, klaar om te beginnen met het ontwerpen! BoekjeHoeKanJeEenWebsiteBouwen.i14 14 8-7-2008 17:23:25
Het vormgeven kan beginnen, je kunt je website vullen met teksten, afbeeldingen en eventuele video s. Open wordpress in je internet browser Klik op Users Maak hier een nieuwe User aan als er meerdere mensen op je website zich moeten kunnen inloggen Zo niet pas dan hier je admin naam aan, zodat bij het geplaatste bericht die naam word weergegeven [Samantha de Vries] Nu kun je het thema van de site gaan veranderen Ga in je internet browser naar themes.wordpress.net Hier kun je allerlei themes vinden die er tot nu toe zijn gemaakt Kies hier een theme en download deze 15 BoekjeHoeKanJeEenWebsiteBouwen.i15 15 8-7-2008 17:23:26
Het bestand is een.zip dus pak het bestand uit Plaats deze map in de map waar je website in staat. En dan in de map WP-Content - in de map themes Load nu de bestanden up op de server Open wordpress en klik op presentation Klik bij available themes het theme aan die jij hebt gedownload. Je ziet als het goed is een printscreen van de vormgeving Deze zal nu als hoofdtheme komen te staan Vernieuw je website in je internetbrowser en je zult zien dat je nieuwe theme nu is geselecteerd 16 BoekjeHoeKanJeEenWebsiteBouwen.i16 16 8-7-2008 17:23:27
Dit was deel 1 van het vormgeven, het echte werk gaat nu beginnen!! Open nu GoLive In de map themes - in de map images vind je alle afbeeldingen die bij deze theme horen Nu is het natuurlijk de bedoeling dat je die afbeeldingen gaat aanpassen op deze manier kan je hem vormgeven naar je eigen stijl Open de bestanden in Photoshop en je kan je eigen kleuren en afbeeldingen toevoegen Houd rekening met de grootte van de afbeeldingen Het makkelijkste is om de afbeeldingen zo groot te laten als dat ze zijn. Het aanpassen is mogelijk maar houdt er dan ook rekening mee dat je de afmetingen aanpast in de style.css Deze staat ook tussen je website bestanden. Sla alle bestanden op als Save for web 17 BoekjeHoeKanJeEenWebsiteBouwen.i17 17 8-7-2008 17:23:28
18 Open nu in de map van je website in GoLive het bestand style.css Hierin kun je de afbeeldingen die je hebt aangepast linken met de juiste titels Het is natuurlijk de bedoeling dat de afbeeldingen op de juiste plaats op de site komen te staan Bij de body vind je de achtergrond, upload hier je nieuwe afbeelding en pas eventueel de achtergrond kleur aan Bij de footer vind je de balk aan onderkant van je website. Bij de header vind je de balk aan de bovenkant van je website Je kunt hier ook de kleuren van eventuele linkjes of teksten wijzigen. Ik zou zeggen klik ze een voor een aan en kijk wat je kunt veranderen. Als je iets nieuws hebt uitgeprobeerd laat het schermpje van style.css dan open staan, sla het wel op. Upload het bestand op de server. Gebeurt er iets wat niet goed is kun je altijd nog de undotoets BoekjeHoeKanJeEenWebsiteBouwen.i18 18 8-7-2008 17:23:29
gebruiken om de wijziging ongedaan te maken. Sla het bestand op. Upload het naar de server en de wijziging is ongedaan gemaakt. Zorg wel dat je altijd een backup hebt voor het geval er iets verwijderd is wat niet zo had moeten zijn!!!!!!!!!!! Kijk goed of je site een geheel wordt en niet dat het allemaal losse elementen zijn Zodra je afbeeldingen of bestanden hebt aangepast en hebt toegevoegd moeten die worden geupload naar de server Dat doe je door de bestanden in dezelfde map op de server te slepen Zorg dat als het bestand al bestaat op de server dat er wordt gevraagd op je het bestand wil replacen, klik dan op OK Als je de eerste afbeeldingen hebt aangepast, en je hebt ze geupload naar de server, vernieuw dan weer je website in je internetbrowser en je zult de veranderingen zien. Ben je er nog niet helemaal tevre- 19 BoekjeHoeKanJeEenWebsiteBouwen.i19 19 8-7-2008 17:23:30
den mee, verander het dan net zolang totdat je het wel leuk vindt. Vergeet alleen niet om steeds opnieuw de afbeeldingen te uploaden naar de server! Als je de vormgeving een beetje hebt afgerond [het kan altijd later nog aanpast worden] kun je beginnen met het vullen van je website Klik in Wordpress op Write en je krijgt een menu waaruit je kan kiezen wat je wilt schrijven Post of Page 20 Een post is een bericht die je in een categorie kunt plaatsen Een page is een paginawaar je maar een tekst op kunt schrijven In een categorie kunnen verschillende berichten staan, maakt niet uit hoeveel Je kunt de pages ook een nummer geven zodat ze in een bepaalde volgorde op je site komen te staan BoekjeHoeKanJeEenWebsiteBouwen.i20 20 8-7-2008 17:23:31
Berichten kun je ook manipuleren door de data aan te passen waardoor het lijkt alsof het bericht eerder is geschreven Op die manier kun je ook een volgorde voor je posts maken Als je op Manage klikt kun je de posts of pages aanpassen Je kunt bijvoorbeeld de tekst aanpassen, titels wijzigen, beelden toevoegen of de datum aanpassen Je kunt de posts volgorde veranderen en je kunt berichten verwijderen Bij het kopje Comments kun je de comments die bij je berichten zijn geplaatst accepteren, wijzigen of verwijderen 21 BoekjeHoeKanJeEenWebsiteBouwen.i21 21 8-7-2008 17:23:32
Bij het kopje Plugins kun je verschillende plugins toevoegen die je site nog leuker kunnen maken: 1 Bijvoorbeeld een pagina index waarin je al je berichten onder elkaar kunt zien in de verschillende catogorien 2 Je kan extra tools toevoegen zoals bijvoorbeeld een web winkel waarbij bezoekers een betaling kunnen doen via de website Bij het kopje Options kun je verschillende dingen van je weblog aanpassen De titel, de ondertitel, de datum en tijds aanduiding en je email adres maar ook kun je de lengte van je berichten aanpassen, je privacy en hoe je berichten op de site komen te staan Je website is af en moet vanaf nu onderhouden worden!!! 22 BoekjeHoeKanJeEenWebsiteBouwen.i22 22 8-7-2008 17:23:33
Als het goed is moet nu je website online staan. Je kunt er berichten, afbeeldingen of video s op plaatsen. Je weet hoe je de vormgeving moet aanpassen. Je weet wat een server inhoudt en waar deze voor dient. En je weet hoe je een website kan installeren. Is een van deze dingen niet gelukt. Blader dan even terug in dit boekje en probeer het nog eens opnieuw. 23 BoekjeHoeKanJeEenWebsiteBouwen.i23 23 8-7-2008 17:23:34
Verder geef ik de tip om veel met de programma s Adobe GoLive en Wordpress te werken zodat je steeds nieuwe dingen leert over hoe je je website kunt bouwen en kunt vernieuwen. In het begin zal het niet altijd even makkelijk zijn, maar je leert ook van je fouten. Als je iets gedaan hebt wat niet helemaal gelukt was en je hebt het zelf kunnen oplossen dan zal je het veel sneller onthouden dan dat je het van iemand hoort en je het maar moet onthouden. Oefening baart kunst zeggen ze weleens. HEEL VEEL SUCCES!!! 24 BoekjeHoeKanJeEenWebsiteBouwen.i24 24 8-7-2008 17:23:35
BoekjeHoeKanJeEenWebsiteBouwen.i25 25 8-7-2008 17:23:36
26 BoekjeHoeKanJeEenWebsiteBouwen.i26 26 8-7-2008 17:23:38