Site Lessen

Ik heb gezien dat er heel wat vragen zijn over site bouwen en ik wil jullie graag allemaal helpen. Het leek mij leuk om dat te doen door middel van wat lessen. Bijvoorbeeld in HTML, lay-outs maken, coderen etc.

Het idee is dat ik iedere week een opdracht geef waar de 'leerlingen' dan mee aan de slag gaan. Hierna krijg je een beoordeling. Dan vertel ik je wat je goed doet en wat je niet goed doet. Dingen die niet goed gaan ga je dan verbeteren.

Voor de mensen die mee willen doen staat de eerste opdracht al hieronder.
Vragen over de opdrachten mag je stellen in dit topic.

Als het je leuk lijkt om te helpen met de lessen geven mag dat natuurlijk ook.

Geplande lessen:
3 ; lay-out coderen ; divs
4 ; lay-out coderen ; iframe
5 ; lay-out coderen ; menubalk

OPDRACHT 1: kennismaken met WEBS

Maak een account aan op WEBS.
(Het is handig als iedereen met dezelfde host werkt.)

Vervolgens zet je je account in de HTML-mode. Dat doe je als volgt:

Het kan trouwens zijn dat je een week moet wachten voordat dit mag. Dat was vroeger altijd zo, ik weet niet of dat nog steeds het geval is.

Het beheerderspaneel van Webs:


Je maakt een nieuwe pagina aan en noemt deze 'paspoort.html'.
Vervolgens ga je deze pagina bewerken en plakt deze code erin:

Spoiler:

Vul de tekst een beetje aan waar nodig is. Plaats een link naar de pagina met je paspoort als reactie.

hoe plaats je dei link laatste zin vorige bericht?



http://encyclopidia.webs.com/paspoort.html


hoe zet ik het op mijn site?

is ie goed?

----
Ja

OPDRACHT 2: een lay-out coderen deel 1

Ik heb hiervoor een hele simpele standaard lay-out gemaakt.
Deze haal je hier.

Je maakt nu een nieuwe pagina aan en noemt deze 'lay.html'.

Vul eerst de volgende code in:

Spoiler:

Bij 'URL VAN JE LAY-OUT' vul je nu de url van de lay-out die ik gemaakt heb in.

Sla de pagina op en bekijk hem. Als het goed is zie je nu de lay-out.

http://encyclopidia.webs.com/lay.html

en nu?

OPDRACHT 3: lay-out coderen deel 2

Nu gaan je tekst aan je lay-out toevoegen.
De tekst moet uiteraard wel op de juiste plek komen te staan.
Dit doe je met een <div> code.

Voeg de volgende code toe aan de pagina:

Spoiler:

De tekst staat nog niet op de juiste plek. Klik hier om te zien waar de tekst moet komen te staan.

Om de tekst op de juiste plek te krijgen moet je de getallen in je <div> code veranderen. Om te zien welke getallen je nodig hebt ga je naar PhotoFiltre en plak je de lay-out.
Onder in beeld staat in de balk hoeveel pixels de lay-out breed en hoog is. Deze lay-out is 800px breed en 850px hoog.



Je wilt je tekst 10 pixels van de rand van de balk afhebben. Zowel aan de linkerkant als aan de bovenkant en aan de rechterkant.
Nu ga je in PhotoFiltre selecties maken om te kijken hoeveel pixels de tekst in totaal van de linkerkant af moet staan. Het grijs meegerekend en nog 10px van het wit.
Het getal dat je vind plaats je in de <div> code bij

Spoiler:

Nu ga je met PhotoFiltre kijken hoe breed de balk precies is. Omdat je 10px verder bent begonnen haal je 10px van deze breedte af. Omdat je ook 10px aan de rechterkant overwilthouden haal je nog eens 10px van de breedte af. De breedte die je nu hebt plaats je in de <div> code bij

Spoiler:

Nu ga je kijken hoeveel px de menubalk van de bovenkant van de totale lay-out afstaat. Je wilt dat de tekst 10px van de rand met het grijs afstaat dus tel je 10 op bij het gevonden aantal.
Dit aantal vul je ook in in je <div> code bij

Spoiler:

De hoogte van je <div> ga je zo hoog maken dat je de totale lay-out te zien krijgt en niet alleen het gedeelte dat past in je beeldscherm. De totale hoogte van je lay-out is 850 pixels. Het getal dat je bij 'TOP' ingevuld hebt haal je van deze 850 af. Het gevonden getal vul je in de <div> code bij

Spoiler:

Als je klaar bent plaats opnieuw de link naar je lay-out en zet in een spoiler de code die je uiteindelijk gebruikt hebt. Ook als het niet goed is, dan kan ik zien waar het fout gegaan is.

heb nu geen photofiltre ik doe het de volgende keer.

ik kan het niet plakken in photofiltre het resultaat kan je zien op de link vorige bericht.

Je moet de lay-out van hier kopiëren.
Van de link die ook in opdracht 2 stond.
En dan in PhotoFiltre 'paste as new image' kiezen, zo moeilijk is dat toch niet. ^^

oke dat doe ik volgende week heb nu geen tijd.

kun je iets gemakkelijker doen?
leer eens hoe je pagina's online zet!aub

Met die divs werken is echt niet moeilijk hoor.
Niet te snel opgeven!

Probeer het nog een keertje.
Ik heb het gevoel dat je je best niet doet.

kun je aub eerst helpen met die pagina's online zetten please

Ik kom daar later op, dit moet echt eerst.
Maar ik heb nu herfstvakantie, dus wel tijd.
Als je je best doet en opschiet leer het dus sneller.

fine

Lukt de tekst verplaatsen al?
Vul anders zomaar een getal in bij die divs dan zal je zien dat de tekst zich verplaatst.

nee het gaat niet totaal niet kun je niet gewoon de getallen geven?

Ik zal het even opzoeken.
Heb je misschien deze zondag tijd op lang op het forum te zitten, dan kan ik veel helpen.. ?

LEFT: 60px; WIDTH: 180px; POSITION: absolute; TOP: 310px; HEIGHT: 540px

Frederique schreef:Ik zal het even opzoeken.
Heb je misschien deze zondag tijd op lang op het forum te zitten, dan kan ik veel helpen.. ?

nee maar ik kan wel vandaag tot 23 uur of langer op de pc

ik heb met paint mijn laty gemaakt echt mooi.

http://encyclopidia.webs.com/index.htm