Mijn eerste Website bouwen

Dez

e pr

esen

tatie

mag

noc

h ge

heel

, no

ch g

edee

ltelij

k w

orde

n ge

brui

kt o

f ge

kopi

eerd

zon

der

de

schr

iftel

ijke

toes

tem

min

g va

n S

enio

rnet

Vla

ande

ren

VZ

W

Mijn eerste Website bouwen

De basis

Dez

e pr

esen

tatie

mag

noc

h ge

heel

, no

ch g

edee

ltelij

k w

orde

n ge

brui

kt o

f ge

kopi

eerd

zon

der

de

schr

iftel

ijke

toes

tem

min

g va

n S

enio

rnet

Vla

ande

ren

VZ

W

Voorjaar 2009 Mijn eerste website bouwen 2

Uw Lesgever : Guido WillekensAnimator bij…

Dez

e pr

esen

tatie

mag

noc

h ge

heel

, no

ch g

edee

ltelij

k w

orde

n ge

brui

kt o

f ge

kopi

eerd

zon

der

de

schr

iftel

ijke

toes

tem

min

g va

n S

enio

rnet

Vla

ande

ren

VZ

W

Inhoud van deze cursusModule 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 Een website maken met een tool op de PC, gebaseerd op

sjablonen (templates).Module 5: Google Sites

Een alles in één oplossing.

Voorjaar 2009 Mijn eerste website bouwen… 3

Dez

e pr

esen

tatie

mag

noc

h ge

heel

, no

ch g

edee

ltelij

k w

orde

n ge

brui

kt o

f ge

kopi

eerd

zon

der

de

schr

iftel

ijke

toes

tem

min

g va

n S

enio

rnet

Vla

ande

ren

VZ

W Module 5

Een site bouwen met Google Sites

Dez

e pr

esen

tatie

mag

noc

h ge

heel

, no

ch g

edee

ltelij

k w

orde

n ge

brui

kt o

f ge

kopi

eerd

zon

der

de

schr

iftel

ijke

toes

tem

min

g va

n S

enio

rnet

Vla

ande

ren

VZ

W

Wat leren we?Een site bouwen on-line

Gratis en in het NederlandsDit gebeurt in 5 stappen:

Een Google-Account aanmakenDe site opzettenEen paar pagina’s maken (Over ons,

adressenlijst, nieuws, kalender, fotoalbum,documenten,contacten)

De Startpagina maken Eerst tekst alleen Met prentje Geavanceerde opmaak (Tabellen, lijsten, schuifbalken,

titels)De Navigatiestructuur aanpassenDe Layout naar onze hand zetten


Dez

e pr

esen

tatie

mag

noc

h ge

heel

, no

ch g

edee

ltelij

k w

orde

n ge

brui

kt o

f ge

kopi

eerd

zon

der

de

schr

iftel

ijke

toes

tem

min

g va

n S

enio

rnet

Vla

ande

ren

VZ

W

VoordelenMet één enkele account kunnen we vele toepassingen

gebruikenWe krijgen gratis 100 Mbyte webruimteOnze foto’s kunnen we kwijt op PicasaOnze documenten kunnen we maken met Google DocsIntussen kunnen we ook gebruik maken van onze Gmail

Alle toepassingen samen beschikken over 7,3 Gbyte opslagruimte


Dez

e pr

esen

tatie

mag

noc

h ge

heel

, no

ch g

edee

ltelij

k w

orde

n ge

brui

kt o

f ge

kopi

eerd

zon

der

de

schr

iftel

ijke

toes

tem

min

g va

n S

enio

rnet

Vla

ande

ren

VZ

W

1. Een Google-account aanmakenWe surfen naar www.google.be en

klikken bovenaan op GmailWe gaan ons aanmelden:

We vullen de gegevens in: Voornaam Naam Gewenste e-mail (voornaam.naam) Paswoord Beveiliging…


http://www.google.be/

Dez

e pr

esen

tatie

mag

noc

h ge

heel

, no

ch g

edee

ltelij

k w

orde

n ge

brui

kt o

f ge

kopi

eerd

zon

der

de

schr

iftel

ijke

toes

tem

min

g va

n S

enio

rnet

Vla

ande

ren

VZ

W

Een voorbeeld …


Dez

e pr

esen

tatie

mag

noc

h ge

heel

, no

ch g

edee

ltelij

k w

orde

n ge

brui

kt o

f ge

kopi

eerd

zon

der

de

schr

iftel

ijke

toes

tem

min

g va

n S

enio

rnet

Vla

ande

ren

VZ

W

2. De site aanmakenWe surfen naar https:sites.google.com

Hier moeten we ons eerst aanmelden met onze [email protected] snvlvb00

Vervolgens klikken we op site maken


Opm.: je kan meerdere sites aanmaken en je kan ze ook weer verwijderen via Instellingen Andere Verwijderen….

mailto:[email protected]

Dez

e pr

esen

tatie

mag

noc

h ge

heel

, no

ch g

edee

ltelij

k w

orde

n ge

brui

kt o

f ge

kopi

eerd

zon

der

de

schr

iftel

ijke

toes

tem

min

g va

n S

enio

rnet

Vla

ande

ren

VZ

W

Basisgegevens van onze siteWe vullen eerst de basisgegevens van onze site in


Onthou de URL

Publiek

Dez

e pr

esen

tatie

mag

noc

h ge

heel

, no

ch g

edee

ltelij

k w

orde

n ge

brui

kt o

f ge

kopi

eerd

zon

der

de

schr

iftel

ijke

toes

tem

min

g va

n S

enio

rnet

Vla

ande

ren

VZ

W

Kies een thema voor de siteWe kiezen bijvoorbeeld voor tegels (eerst meer…)


Dez

e pr

esen

tatie

mag

noc

h ge

heel

, no

ch g

edee

ltelij

k w

orde

n ge

brui

kt o

f ge

kopi

eerd

zon

der

de

schr

iftel

ijke

toes

tem

min

g va

n S

enio

rnet

Vla

ande

ren

VZ

W

Resultaat


We gaan deze als laatste afwerken…

Dez

e pr

esen

tatie

mag

noc

h ge

heel

, no

ch g

edee

ltelij

k w

orde

n ge

brui

kt o

f ge

kopi

eerd

zon

der

de

schr

iftel

ijke

toes

tem

min

g va

n S

enio

rnet

Vla

ande

ren

VZ

W

3. Een paar pagina’sWe willen een pagina met:

Over ons Nieuws Adressenlijst Documenten Foto’s: link naar onze webalbums die we op Picasa

hebben geplaatst Contacten


Dez

e pr

esen

tatie

mag

noc

h ge

heel

, no

ch g

edee

ltelij

k w

orde

n ge

brui

kt o

f ge

kopi

eerd

zon

der

de

schr

iftel

ijke

toes

tem

min

g va

n S

enio

rnet

Vla

ande

ren

VZ

W

3.1 Inhoud voor de “Over ons”

We maken een nieuwe pagina van het type pagina.We halen de originele tekst op de site van Seniornet

Vlaanderen (www.snvl.be Over ons)We plakken nu de tekst in het vak dat de pagina

voorsteltWe klikken vervolgens op OpslaanNoteer dat we de “body” niet kunnen aanpassen

(Template)Eventueel is opmaak verloren gegaan en kunnen we

gebruik maken van de mogelijkheden van de Google Site Editor


http://www.snvl.be/

Dez

e pr

esen

tatie

mag

noc

h ge

heel

, no

ch g

edee

ltelij

k w

orde

n ge

brui

kt o

f ge

kopi

eerd

zon

der

de

schr

iftel

ijke

toes

tem

min

g va

n S

enio

rnet

Vla

ande

ren

VZ

W

We bekijken even de HTML-code


Dez

e pr

esen

tatie

mag

noc

h ge

heel

, no

ch g

edee

ltelij

k w

orde

n ge

brui

kt o

f ge

kopi

eerd

zon

der

de

schr

iftel

ijke

toes

tem

min

g va

n S

enio

rnet

Vla

ande

ren

VZ

W

Logo invoegenOphalen: logo.gif imagesWe klikken op Invoegen

AfbeeldingWe moeten de afbeelding van onze

PC naar de server overbrengen

We kunnen de afbeelding dan nog positioneren (wij kiezen voor centraal), en wensen geen tekstomloop


Dez

e pr

esen

tatie

mag

noc

h ge

heel

, no

ch g

edee

ltelij

k w

orde

n ge

brui

kt o

f ge

kopi

eerd

zon

der

de

schr

iftel

ijke

toes

tem

min

g va

n S

enio

rnet

Vla

ande

ren

VZ

W

Resultaat inhoud Over ons


Dez

e pr

esen

tatie

mag

noc

h ge

heel

, no

ch g

edee

ltelij

k w

orde

n ge

brui

kt o

f ge

kopi

eerd

zon

der

de

schr

iftel

ijke

toes

tem

min

g va

n S

enio

rnet

Vla

ande

ren

VZ

W3.2 Nieuwspagina

We klikken op Nieuwe pagina maken en noemen ze Nieuws, een pagina met aankondigingen en onder de Startpagina


Dez

e pr

esen

tatie

mag

noc

h ge

heel

, no

ch g

edee

ltelij

k w

orde

n ge

brui

kt o

f ge

kopi

eerd

zon

der

de

schr

iftel

ijke

toes

tem

min

g va

n S

enio

rnet

Vla

ande

ren

VZ

WPlaats een berichtWe klikken op nieuw berichtWe kopiëren een tekstbericht van bv. Van de website

van Seniornet Vlaanderen, rubriek NieuwsWe plakken de tekst in het veld voor het nieuwe

berichtWe passen de titel aan


Dez

e pr

esen

tatie

mag

noc

h ge

heel

, no

ch g

edee

ltelij

k w

orde

n ge

brui

kt o

f ge

kopi

eerd

zon

der

de

schr

iftel

ijke

toes

tem

min

g va

n S

enio

rnet

Vla

ande

ren

VZ

W

Resultaat


Dez

e pr

esen

tatie

mag

noc

h ge

heel

, no

ch g

edee

ltelij

k w

orde

n ge

brui

kt o

f ge

kopi

eerd

zon

der

de

schr

iftel

ijke

toes

tem

min

g va

n S

enio

rnet

Vla

ande

ren

VZ

W

3.3 Een adressenlijstWe klikken op Nieuwe pagina maken en noemen ze

Adressenlijst, een pagina met een lijst, en onder de Startpagina


Dez

e pr

esen

tatie

mag

noc

h ge

heel

, no

ch g

edee

ltelij

k w

orde

n ge

brui

kt o

f ge

kopi

eerd

zon

der

de

schr

iftel

ijke

toes

tem

min

g va

n S

enio

rnet

Vla

ande

ren

VZ

W

Een lijst van adressenWe kiezen voor een aangepaste lijst maken


Dez

e pr

esen

tatie

mag

noc

h ge

heel

, no

ch g

edee

ltelij

k w

orde

n ge

brui

kt o

f ge

kopi

eerd

zon

der

de

schr

iftel

ijke

toes

tem

min

g va

n S

enio

rnet

Vla

ande

ren

VZ

W

Een lijst met 2 kolommen


• We maken 6 kolommen: Naam, E-mail, Taak, Site, Lid sinds, Geslacht

Dez

e pr

esen

tatie

mag

noc

h ge

heel

, no

ch g

edee

ltelij

k w

orde

n ge

brui

kt o

f ge

kopi

eerd

zon

der

de

schr

iftel

ijke

toes

tem

min

g va

n S

enio

rnet

Vla

ande

ren

VZ

W

Resultaat


Dez

e pr

esen

tatie

mag

noc

h ge

heel

, no

ch g

edee

ltelij

k w

orde

n ge

brui

kt o

f ge

kopi

eerd

zon

der

de

schr

iftel

ijke

toes

tem

min

g va

n S

enio

rnet

Vla

ande

ren

VZ

W

3.4 DocumentenWe maken een nieuwe Webpagina met de naam

DocumentenKies voor bestanden.


Dez

e pr

esen

tatie

mag

noc

h ge

heel

, no

ch g

edee

ltelij

k w

orde

n ge

brui

kt o

f ge

kopi

eerd

zon

der

de

schr

iftel

ijke

toes

tem

min

g va

n S

enio

rnet

Vla

ande

ren

VZ

W

Resultaat


Dez

e pr

esen

tatie

mag

noc

h ge

heel

, no

ch g

edee

ltelij

k w

orde

n ge

brui

kt o

f ge

kopi

eerd

zon

der

de

schr

iftel

ijke

toes

tem

min

g va

n S

enio

rnet

Vla

ande

ren

VZ

W

4. Maak de startpaginaGewone paginaMet 2 kolommenIn eerste kolom:

Een tekstvak met verwelkomingstekst De activiteiten Kalender

In de tweede kolom Samenvatting van het Nieuws Diashow


Dez

e pr

esen

tatie

mag

noc

h ge

heel

, no

ch g

edee

ltelij

k w

orde

n ge

brui

kt o

f ge

kopi

eerd

zon

der

de

schr

iftel

ijke

toes

tem

min

g va

n S

enio

rnet

Vla

ande

ren

VZ

W

Resultaat startpagina


Dez

e pr

esen

tatie

mag

noc

h ge

heel

, no

ch g

edee

ltelij

k w

orde

n ge

brui

kt o

f ge

kopi

eerd

zon

der

de

schr

iftel

ijke

toes

tem

min

g va

n S

enio

rnet

Vla

ande

ren

VZ

W

5. Pas het navigatiemenu aanKlik op Zijbalk bewerkenKies Navigatie Bewerken


Dez

e pr

esen

tatie

mag

noc

h ge

heel

, no

ch g

edee

ltelij

k w

orde

n ge

brui

kt o

f ge

kopi

eerd

zon

der

de

schr

iftel

ijke

toes

tem

min

g va

n S

enio

rnet

Vla

ande

ren

VZ

W

Het navigatiemenu opbouwen

Klik op pagina toevoegen

Kies Nieuws uit de site-map

Doe dit ook voor documenten etc.

Zet ze in de gewenste volgorde met de pijltjes


Dez

e pr

esen

tatie

mag

noc

h ge

heel

, no

ch g

edee

ltelij

k w

orde

n ge

brui

kt o

f ge

kopi

eerd

zon

der

de

schr

iftel

ijke

toes

tem

min

g va

n S

enio

rnet

Vla

ande

ren

VZ

W5. Layout van de Site aanpassen

Er zijn heel wat instellingen voor de site in zijn geheel


Dez

e pr

esen

tatie

mag

noc

h ge

heel

, no

ch g

edee

ltelij

k w

orde

n ge

brui

kt o

f ge

kopi

eerd

zon

der

de

schr

iftel

ijke

toes

tem

min

g va

n S

enio

rnet

Vla

ande

ren

VZ

WEen logo bovenaan, op alle pagina’s

Ophalen: header.png imagesKlik op Logo wijzigen, en laadt het header.png opKlik op Site Layout wijzigen en activeer het logo


Dez

e pr

esen

tatie

mag

noc

h ge

heel

, no

ch g

edee

ltelij

k w

orde

n ge

brui

kt o

f ge

kopi

eerd

zon

der

de

schr

iftel

ijke

toes

tem

min

g va

n S

enio

rnet

Vla

ande

ren

VZ

W

Verberg de “Recente Siteactiviteit”Klik op Site Instellingen Uiterlijk wijzigenRecente Siteactiviteit verwijderen


Dez

e pr

esen

tatie

mag

noc

h ge

heel

, no

ch g

edee

ltelij

k w

orde

n ge

brui

kt o

f ge

kopi

eerd

zon

der

de

schr

iftel

ijke

toes

tem

min

g va

n S

enio

rnet

Vla

ande

ren

VZ

W

Het eindresultaatGa naar https://sites.google.com/site/fdegent


Dez

e pr

esen

tatie

mag

noc

h ge

heel

, no

ch g

edee

ltelij

k w

orde

n ge

brui

kt o

f ge

kopi

eerd

zon

der

de

schr

iftel

ijke

toes

tem

min

g va

n S

enio

rnet

Vla

ande

ren

VZ

W

Tools en Documentatie

De Tools: www.snvl.be/resources/website /KompoZer.zip /WebSiteX1.zip /FileZilla.zip

De Documentatie: /google-sites.pdf

De beelden: www.snvl.be/resources/website/mijnwebsite/images /marmer.gif /header.png /logo.jpg


Mijn eerste Website bouwen

Documents

Transcript of Mijn eerste Website bouwen