MODULE 5 : CMS jouwweb Tijdens de beide oefeningen hebben we gemerkt dat er heel wat bij komt kijken, om zelfs een eenvoudige pagina te maken en op een WebServer te plaatsen: een tool zoals KompoZer of Expression Web leren gebruiken de HTML syntax onder de knie krijgen de CSS syntax onder de knie krijgen een tool zoals FileZilla leren gebruiken Gelukkig kan het ook anders: met een online omgeving, dus zonder de tools van hierboven zonder kennis van HTML en CSS Waar zit dan het verschil? In de mogelijkheden: je moet volledig binnen een vooropgesteld keurslijf blijven. Dit noemt men de Sjabloons (templates). Je kan kiezen tussen een paar sjabloons, maar je kan niet je eigen sjabloon aanmaken. Het risico is dan ook dat er na een tijdje nogal veel websites nogal sterk op elkaar gaan gelijken. Er is wel beperkte mogelijk tot aanpassen van de HTML code. Wij zullen dit nu uitproberen in oefening 3, met JouwWeb: omdat dit gratis en in het Nederlands is. Surf naar http://www.jouwweb.nl/ Maak een account aan met een sitenaam, mail adres en paswoord. Je komt dan op de editor terecht. Je kan verder pagina s toevoegen, en de design aanpassen. We beginnen met het maken van de startpagina. Het concept is steeds hetzelfde: kies een object dat je op de site wil plaatsen en sleep dat naar de positie waar je het wil plaatsen. SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 36
Je merkt meteen de basis: tekst, afbeeldingen en headers. De layout maak je met kolommen en witruimte. Eventueel, maar ouderwets, met tabellen. Je kan ook documenten en filmpjes opladen en invoegen. Een kaart en links naar je facebook behoren ook tot de mogelijkheden. tenslotte krijg je ook nog greep op de site door HTML fragmenten in te voeren: kan interessant zijn, zoals voor het embedden van een kalender. Je klikt dan op publiceren en mag een naam kiezen. De URL wordt dan http://femmavorselaar.jouwweb.nl/ Voor de banner kan je een eigen afbeelding opladen. In de design mode kan je aantal zaken aanpassen: - de achtergrondkleur van menu - de achtergrond van de pagina - grootte en font van de tekst en headers Maar wat had je verwacht? Wel gratis, maar je moet er de reclame bijnemen. Tegen betaling kan het zonder en heb je een echte hosting met een domeinnaam. SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 37
Een gelijkaardige oplossing: http://www.simplesite.com Dit is de eerste versie met de basis template: SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 38
Dit is de versie na de design aanpassingen. SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 39
Experimenteer zelf een beetje verder met: Structuren: een lijn plaatsen witruimte voorzien drie kolommen en eentje verwijderen om twee kolommen te hebben plaats een zij menu: dan deel je in twee kolommen: verhouding 2/3 en 1/3 Html tags gebruiken een iframe van een youtube filmpje Een diavoorstelling gekoppeld aan een album Een knop om een mail te sturen Nawoord bij deze cursus. Het was de bedoeling van deze cursus een inzicht te geven in wat er allemaal om de hoek komt kijken, bij het ontwikkelen van een website en de eerste stappen te zetten in het maken van een eigen eenvoudige site. We hebben geleerd, dat er heel wat technologie komt bij kijken, maar dat het zonder ook wel mogelijk is om een mooi resultaat neer te zetten. Toch blijft kennis van HTML en CSS een imperatief voor wie verder wil geraken.ofwel moet je vrij veel betalen, om je eigen online werkomgeving te laten ontwikkelen door een gespecialiseerd bedrijf SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 40
Bijlage 1: KompoZer downloaden en installeren. We surfen naar http://kompozer.net/download.php en klikken op de knop Download. In het dialoogvenster kiezen we voor Bestand opslaan en in het volgende dialoogvenster geven we de map aan, waar we willen opslaan. Dan gaan we naar die map, en dubbel klikken op het zip bestaand. We vragen dan aan Winzip of Winrar, om het zip bestand te extraheren naar bijvoorbeeld c:\, onze schijf waar ook de andere programma s te vinden zijn onder Program Files. We vinden dan in c:\ KompoZer 0.7.10\ alles wat we nodig hebben. We klikken met de rechtermuisknop op kompozer.exe en maken een snelkoppeling op ons bureaublad. Nu kunnen we het programma gebruiken vanop ons bureaublad, door op het icoontje te klikken: Noteer dat we geen installatie hoefden te doen: gewoon de inhoud van het zip bestand extraheren volstond. Bijlage 2: FileZilla downloaden en installeren Typ FileZilla in google, en je hebt de link naar de website om te downloaden. Sla het bestand ergens op, eventueel op het bureaublad en voer het dan uit. SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 41
Bijlage 3: webruimte activeren bij een Provider. Bij Telenet gaat het in volgende stappen: Surf naar www.telenet.be en klik op Mijn Telenet. Meldt u aan met uw gebruikersnaam en wachtwoord. In het menu aan de zijkant geef je aan dat je jouw webruimte wil configureren. Je kiest voor de volle 50 Mbyte of voor een deel. Klik op verdergaan. www.telenet.be Telenet Portaal Een paar voorbeelden: users.telenet.be/ powerelect pixelpower planten pegatex pianoman kvlvbevel scouts-ekeren Bij Belgacom (Skynet) gaat het in volgende stappen: Surf naar www.skynet.be en klik op Adsl.be. Ga naar Mijn ADFSL en Mijn webruimte, dan naar beheren. Je moet dan een aanvraag indienen en de voorwaarden aanvaarden. Na ingeven van gebruikersnaam en wachtwoord en domein, vraag je de creatie van de webruimte. SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 42
www.skynet.b e Bij Skyne t kan je er voor opteren om een andere URL aan te maken, een Alias, waar je abonnee nummer niet in voorkomt. Je klikt dan op alias aanmaken en vraagt bijvoorbeeld je voornaam.naam als onderdeel van de URL. Zo is je site gemakkelijker te vinden. users.skynet.be/guido.willekens/ SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 43