Mijn eerste Website bouwen

Transcriptie

1 Mijn eerste Website bouwen De basis Uw Lesgever : Guido Willekens Animator bij Voorjaar 2015 Mijn eerste website bouwen 2 1

2 Inhoud van deze cursus Module 1: Browsers en Webservers Hoe gebeurt surfen eigenlijk en wat speelt er zich af achter de schermen? Module 2: HTML en KompoZer De codetaal van de webpagina en een tool om er mee te leren werken en te verstaan. Module 3: Hosting en FTP Waar staat mijn website en hoe breng ik er mijn pagina s naartoe? Module 4 WebSiteX1/X5 Een website maken met een tool op de PC, gebaseerd op sjablonen (templates). Module 5: JouwWeb Een alles in één oplossing. Voorjaar Module 4 Een site bouwen met WebsiteX1 2

3 Wat leren we? Een tool om een site te bouwen? Gratis maar in het Engels Dit gebeurt in 5 stappen: Personalia en thema De site-structuur De individuele pagina Enkel tekst Met prentje Met filmpje Geavanceerde opmaak (menu, schuifbalken, titels) Publiceren Mogelijkheden van de recente versie X5.13 Uitbreiding: zelf het resultaat aanpassen in de HTML of CSS Voorjaar Een site beginnen Voorjaar

4 Stap 1: algemene instellingen 1. Personalia 2. Menu 3. Thema en kleur Voorjaar Stap 2: site-structuur Pagina s bijmaken De naam wijzigen Voorjaar

5 Stap 3: Pagina s maken De startpagina is een tekstpagina, zoals in de eerste oefening. Voorjaar De 3 pagina s Telkens tekst en een prentje Voorjaar

6 De 3 pagina s Voorjaar Stap 4: geavanceerde instellingen Opmaak van menu Titels Schuifbalken Voorjaar

7 5. Publiceren Dit doen we in een map op onze PC. Project opslaan, om later te kunnen aanpassen!!! Voorjaar Resultaat Startpagina 14 7

8 Pagina1 15 Pagina

9 Pagina 3 17 Broncode: Headers Titel en auteur Opmaak voor alle pagina s met stylesheet Javascript voor instellingen en menu 18 9

10 Broncode: menu 19 Broncode: mijn inhoud 20 10

11 Broncode: Footer Datum en mailadres Voorjaar Even de stylesheet bekijken Je kan nu zowel de HTML als de CSS aanpassen, maar let op, als je het project terug laat uitvoeren wordt alles overschreven! Voorjaar

12 Meer mogelijkheden met X van Incomedia Tekst editor Standaard objecten Full screen mode Responsive pages Prijs: 70 euro Speciale objecten Voorjaar Uitbreidingen In de mappen De banner aanpassen De achtergrond aanpassen In de stylesheet (CSS) De tekstkleur van de banner instellen In de pagina zelf (HTML) Google kaartje invoegen Google kalender invoegen Foto albums toevoegen Voorjaar

13 Banner aanpassen in de images Open de banner en noteer de afmetingen Hernoem naar top_origineel.jpeg Zoek een nieuwe afbeelding en snij uit op de afmetingen Sla op in de map images als top.jpeg Doet hetzelfde met bg_content.gif voor de achtergrond Voorjaar Google kaartje invoegen Surf naar Google Maps Zoek locatie op Klik op delen Klik op kaart insluiten Open in WebSiteX1 een tekstvak Plak de tekst met iframe erin Exporteer de site opnieuw Voorjaar

14 Resultaat met kaart Voorjaar Google kalender invoegen Surf naar Google Open de app Agenda Klik op Instellingen Agenda s Klik op uw agenda Deze agenda insluiten Open in WebSiteX1 een dubbel tekstvak Zet de HTML indicator Plak het iframe erin Exporteer de site opnieuw Voorjaar

15 Resultaat met kalender Voorjaar Foto album via Google Je moet eerst in Google met de App foto s een album maken om te delen, foto s selecteren voor het album en het een naam geven.. Je ziet voor delen naast de sociale websites ook de link. Klik op gereed en deze link staat op het klipboard. Deze link plak je in de tekst Voorjaar

16 Een link naar een album Voorjaar Belangrijk Voor Les 3 zou je op voorhand een account moeten aanmaken bij jouwweb. Surf hiervoor naar jouwweb.nl en doorloop de procedure. Voorjaar