MODULE 4 : WEBSITEX1

Maat: px

Weergave met pagina beginnen:

Download "MODULE 4 : WEBSITEX1"

Ruth Koster
5 jaren geleden
Aantal bezoeken:

De installatie wijst zichzelf uit. Deze tool is gratis, maar wel in het Engels.

1 MODULE 4 : WEBSITEX1 In deze benadering maken we een site met een startpagina en 3 kleine pagina s. We doen dit met een tool op de PC: WebSiteX1. We stellen deze tijdelijk ter beschikking op onze site: Na downloaden moet je dit bestand unzippen, en ix1setup.exe uitvoeren. De installatie wijst zichzelf uit. Deze tool is gratis, maar wel in het Engels. De opbouw van de site gebeurt nu in 5 stappen: Personalia ingeven en een thema kiezen De site structuur bepalen De individuele pagina s maken Enkel tekst alleen Met prentje Met filmpje Geavanceerde opmaak (menu, titels, schuifbalken) Publiceren Stap 1: personalia ingeven en een thema kiezen. We starten de tool en beginnen aan een nieuw project. Noteer dat we dit project ook zullen opslaan als een apart bestand met de extensie.iwp. We klikken op Next, en vullen dan een paar persoonsgegevens in. De Footer note zal onderaan op elke pagina verschijnen!! We kiezen vervolgens voor een navigatie menu in de verticale richting. SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 1

Tenslotte kiezen we de opbouw van onze site, gebaseerd op een sjabloon: we gaan voor High Tide, met

We maken drie bijkomende pagina s, naast onze startpagina: dit doen we door te klikken op de New

Vervolgens noemen we de pagina s, lesgeven, website bouwen, tuinieren: dit doen we telkens door op

2 Tenslotte kiezen we de opbouw van onze site, gebaseerd op een sjabloon: we gaan voor High Tide, met een oranje achtergrond kleur. Stap 2: De site structuur bepalen. We maken drie bijkomende pagina s, naast onze startpagina: dit doen we door te klikken op de New page knop. Vervolgens noemen we de pagina s, lesgeven, website bouwen, tuinieren: dit doen we telkens door op de knop Rename te klikken. Stap 3: de individuele pagina s maken. De startpagina is een gewone tekstpagina: we plaatsen dus een Text object. We typen dezelfde tekst als in oefening 1. SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 2

Op tweede pagina plaatsen we wat tekst en een afbeelding: je kiest eerst het object tekst, en dat komt aan de linkerkant, dan de afbeelding en die komt aan de rechterkant.

Stap 4: Geavanceerde opmaak (menu, titels, schuifbalken) In deze stap bepalen we het uiterlijk van onze site: Eerst het navigatie menu: kleur en dikte van de kadertjes, en afstanden buiten de

3 Op tweede pagina plaatsen we wat tekst en een afbeelding: je kiest eerst het object tekst, en dat komt aan de linkerkant, dan de afbeelding en die komt aan de rechterkant. We maken op dezelfde manier de derde pagina over Website bouwen, en vierde pagina over tuinieren. Stap 4: Geavanceerde opmaak (menu, titels, schuifbalken) In deze stap bepalen we het uiterlijk van onze site: Eerst het navigatie menu: kleur en dikte van de kadertjes, en afstanden buiten de kadertjes. Dit wordt uitgedrukt in pixels. We kunnen de naam die we aan de pagina hebben gegeven, als titel laten verschijnen en hiervan de kleur en Font kiezen. Tenslotte kunnen we een aantal kleurinstellingen doen, zoals bijvoorbeeld voor de schuifbalk aan de zijkant. SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 3

Stap 5: Publiceren In de laatste stap zetten we de tool aan het werk om alles voor ons te maken. Het resultaat laten we eerst op onze PC opslaan in de map../oefeningx1.

4 Stap 5: Publiceren In de laatste stap zetten we de tool aan het werk om alles voor ons te maken. Het resultaat laten we eerst op onze PC opslaan in de map../oefeningx1. We kunnen vervolgens ook kiezen om de inhoud van deze site bij onze Provider of Hosting bedrijf te plaatsen. We moeten dan wel beschikken over de naam van de Host, en een geldige gebruikersnaam en bijhorend wachtwoord. Niet vergeten!! Onze site is een project, en dit moeten we opslaan als een bestand met extensie.iwp. Daarvoor klikken we bovenaan op Save. We kunnen nu op elk moment op dit bestand dubbelklikken, de tool gaat open en we kunnen kiezen op welke stap we willen terugkomen: bijvoorbeeld de kleur van de schuifbalk aanpassen: daarvoor moeten we bij stap 4 zijn. Na de aanpassingen, altijd stap 5 doen en het project opslaan. Nog goed om weten: Je kan op elk moment de pagina testen door op de knop Test te drukken. Via Help krijg je heel wat uitleg, weliswaar in het Engels. Op de volgende bladzijden kan je het resultaat bewonderen. SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 4

5 SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 5

6 SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 6

7 We kijken nog snel even naar de broncode van één van de pagina s: In de HEADER herkennen we de titel, onze naam uit de personalia, een stylesheet verwijzing, en een verwijzing naar de javascript voor het menu In de BODY zien we op de eerste plaats het logo bovenaan (top.jpg), en dan het navigatie menu, met de javascript oproepen, voor wanneer we met de muis klikken of erover gaan. De menu items zijn hier cellen van een tabel. SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 7

De verdere inhoud van de pagina herken je aan de teksten die we hebben ingetypt, en we zien veel attributen voor font en kleur, zoals we die hebben ge kozen op het sjabloon.

Conclusie van deze oefening: met zo een tool op de PC kan je snel een mooie website opbouwen, zonder enige kennis van HTML of CSS.

8 De verdere inhoud van de pagina herken je aan de teksten die we hebben ingetypt, en we zien veel attributen voor font en kleur, zoals we die hebben ge kozen op het sjabloon. Tenslotte is er de onderkant: hier vinden we Footer note en het mail adres dat we in de eerste stap hebben ingegeven. Conclusie van deze oefening: met zo een tool op de PC kan je snel een mooie website opbouwen, zonder enige kennis van HTML of CSS. Anderzijds het je de pagina s wel op je PC staan, en niets belet je om toch een paar aanpassingen te doen, die met de tool niet kunnen: bijvoorbeeld tabellen of een formulier toevoegen. Je kan zelf de Stylesheet aanpassen. Vergeet niet dat wanneer je stap 5 terug uitvoert, al deze aanpassingen verloren gaan SNV HANDLEIDING MIJN EERSTE WEBSITE BOUWEN 8

Vergelijkbare documenten

Mijn eerste Website bouwen

Mijn eerste Website bouwen De basis Uw Lesgever : Guido Willekens Animator bij Voorjaar 2015 Mijn eerste website bouwen 2 1 Inhoud van deze cursus Module 1: Browsers en Webservers Hoe gebeurt surfen eigenlijk