We zijn het vorige lesje geëindigd met de aanwijzing hoe je  je web weer kunt openen als je er aan verder wilt werken.
En dat gaan we dus nu doen.

Open web 1 op de welkomstpagina.
De index.html  laten we voorlopig voor wat hij is.

De welkom.htm openen we dus door er in de mappenlijst op te dubbelklikken met linker muisknop.

Selecteer even het woordje index en de tekst die je erop hebt gezet en klik op de delete toets op het toetsenbord.

*****************
We hebben dus een volkomen leeg werkvlak voor ons, met daarboven in de grijze balk de tekst welkom.htm

We gaan beginnen een achtergrond in te brengen.
Klik op Opmaak achtergrond en er verschijnt een grijs tabblad.
Het heet: Eigenschappen van Pagina en bovenaan zie je nog meer tabbladen


Kijk even rustig rond hierop, klik even op de andere tabbladen. Kijk ook eens wat daarop staat.
Waar we het meest mee werken is tabblad Algemeen en tabblad achtergrond.

*******************
We gaan een achtergrond inbrengen en daarom nemen we dus dit tabblad (achtergrond) voor ons.

Zet een vinkje bij Achtergrond figuur bovenaan.
Nu gaan we naast de witte regel naar de knop bladeren.
Er verschijnt een nieuw tabblad, waarboven staat: Achtergrondfiguur selecteren.



Als er al meerdere plaatjes en achtergronden in je web zijn ingebracht, dan zie je die vermeld staan in het witte veld.(Zoals hier bij mij)
Nu zien we echter alleen 2 mapjes, en die zijn ook nog leeg. Daar hebben we dus niets aan.
Klik daarom rechtsonder op het gele mapje met het vergrootglas.
En we zijn op bekend terrein. In de Verkenner. 
Zoek je nieuwe mapje op waarin je de achtergronden en wat plaatjes voor web 1 hebt gezet.

Dubbelklik op het mapje zodat het zich opent.
Zoek je achtergrondje. klik erop en dan op ok.

We zijn terug op tabblad Eigenschappen voor pagina en je ziet het pad naar je plaatje nu in de witte regel staan.
We laten de rest even voor wat het is en klikken  rechts onder op OK.
Je achtergrondje verschijnt op je pagina.

*******************

Nu is het vaak zo dat het eventjes duurt alvorens een pagina op het web opstart.
Je ziet dan ook met doorschakelen naar andere pagina's een wit vlak.
Niet mooi. Dat willen we niet, dus gaan we iets aan doen.
Ook de links,  terug naar de index en naar de volgende pagina's,  moeten we op deze pagina  zetten en we willen die niet in die lelijke kleur blauw, want dan vloekt het
misschien met de achtergrond.
Je hebt kunnen zien dat we dat op hetzelfde "Eigenschappen voor Pagina - tabblad"
kunnen regelen. Dus daar gaan we naar terug.
Kijk nog even naar het voorbeeld bovenaan.
*******************

Klik in de werkbalk  op Opmaak en dan achtergrond.
Het tabblad verschijnt weer. Met de achtergrondregel nog steeds gevuld met tekst, want we hebben ten slotte nog niets opgeslagen.

We gaan nu naar halverwege dat tabblad : Kleuren.
en wel Achtergrond. Klik op het zwarte pijltje ernaast en de kleuren verschijnen.
Echt mooi vinden we die niet dus ga naar beneden en klik op : Meer Kleuren.

Een groter blad verschijnt. Hier kun je een kleur kiezen.

Maar wij willen er een die precies bij de achtergrond past.
Rechts zie je een pipetje dat precies op die in psp lijkt. Klik erop en ga ermee over de achtergrond tot aan  de kleur die je aanstaat. 

Klik met links en de kleur is vastgezet. 
Klik ok en we zijn terug op het tabblad.

********************
Nu doen we hetzelfde voor de tekst die erop moet komen.
Klik dus op het zwarte pijltje naast Tekst - automatisch en zoek weer met je pipetje de juiste kleur op. Klik ok.

Rechts op dit tabblad zie je de kleuren voor de hyperlinks. 
Precies als voor achtergrondkleur en tekstkleur kan je ook deze aanpassen.
Allemaal gedaan? Klik dan rechtsonder op ok. en je bent terug op je pagina, waar, behalve dat de achtergrond er nu staat, verder nog niets is veranderd.

**********************

We gaan nu eerst wat we hebben gedaan opslaan.
Dus naar Bestand - Opslaan Als - antwoorden op vraag met Ja.
En nu komt er plotseling een nieuw tabblad tevoorschijn waarop in het klein je achtergrondje staat.

Onderop zie je ook een knop naam wijzigen. 
Dus is je naam te lang, of niet aan elkaar geschreven, of begint met een Hoofdletter, kan je dat hier mooi
nog even veranderen.
In orde? klik ok.

***********************

Ik weet niet of ik dat al heb gezegd maar aan hoofdletters en kleine letters door elkaar hebben alle providers een hekel. 
Dus wen je aan dat alles wat in je mappenlijst komt te staan en dus straks naar de provider moet met kleine letters is geschreven.

********************
We zijn weer terug op de werkpagina Normaal.

Nu gaan we de eigenlijke tekst en plaatjes inbrengen.
We willen echter dat die in iedere browser, en op wat voor grootte de mensen hun schermbeeld ook hebben afgesteld, op de plek komt te staan waar wij dat willen.

Om dat voor elkaar te krijgen gebruiken we tabellen.
Klink ingewikkeld maar is het niet hoor. We hoeven alleen maar op wat knopjes te drukken.

*********************

Misschien  vinden we alleen deze achtergrond een beetje saai en een randje zou wel aardig staan.
Dat gaan we dus nu het eerste doen.
Voor je dus plaatjes en tekst gaat invoegen, besluit je
dus eerst of je wel of geen randen op de achtergrond erbij wilt.
We besluiten tot  Ja.

*******************

We gaan naar de bovenste werkbalk en klikken op 
Tabel - Invoegen - tabel.
Het tabblad verschijnt.
Bekijk het eerst even rustig, je ziet we kunnen het aantal rijen en kolommen instellen, randdiktes, en aangeven of het in procenten of in exacte aantallen
pixels moet.

*****************
Wij willen een rand maken rondom de hele pagina.
Klik daarom bij rijen op het zwarte pijltje en stel in op 1 rij.
Bij kolommen hetzelfde: 1 kolom.

Het achtergrondje dat we erop hebben gezet vinden we leuk, dus daar mag best
een stukje van gezien worden. Daarom kiezen we  96 procenten en klikken ok.

**********************
Bovenaan je pagina verschijnt je eerste tabel.
Tik nu even het woordje "eerste" erin.

(als de randen klaar zijn wordt dat weer weggehaald)
Klik nu een aantal keren op de Enterknop op het toetsenbord en je ziet, je kunt hem zo groot maken als je wilt.
Als je een tabel groter wilt maken moet je er eerst altijd een woordje intikken en dan op de enter knop klikken.
Zodra er iets anders in de tabel is geplaatst kan je dat woordje weer weghalen.

***********************

Aangezien dit een sierrand wordt willen we hem een kleurtje geven.
Zet je cursor op de rechtse rand van de tabel en klik met rechts.
Er verschijnt een uitrolmenu. En we kiezen: Eigenschappen voor Tabel.
Het tabblad Eigenschappen voor tabel verschijnt.



******************
Bovenin kiezen we de uitlijning.
 Aangezien we het rondom willen hebben 
nemen we:  Centreren. Staat dat er nog niet, klik op het zwarte pijltje en haal het tevoorschijn.
Bij Laten Zweven, zetten we : Standaard.(ik heb dat nog nooit veranderd, dus blijft altijd standaard)

Onze 96 procent  staat al aangegeven en aan Celopvullig en  Afstand tussen Cellen doen we nu niets.

Daaronder staan de randen. Je ziet dat je de dikte kunt veranderen,
of ook (aan de rechterkant)  voor lichte of donkere randen kunt kiezen. Dat wordt dan met
schaduwwerking.
Voor nu kiezen we gewoon een randdikte van 3. 
Daaronder kan je de kleur weer uitkiezen. En ook hier kan je dat via: Meer Kleuren en met het pipetje doen.

Klik nu op Toepassen en OK.

Je hebt nu een leuke rand die je achtergrond doorbreekt. 

****************
We klikken nu met Rechts midden in de tabel. Want we willen ook nog een gekleurde rand. 
Het middengedeelte van een tabel noemen we:  Cel.
Deze cel moet dus een ander achtergrondje krijgen.
Dat kan nu NIET via Opmaak - Achtergrond, want dan zou je andere achtergrond plotseling verdwenen zijn.
We willen alleen maar in die Cel een andere achtergrond. Daarom klikken we nu  met rechts en kiezen nu: Eigenschappen van Cel.

Het tabblad Eigenschappen voor Cel komt tevoorschijn.
Het bovenste gedeelte van dit tabblad laten we even zo , maar het onderste gedeelte komt bekend voor, dat zagen we op het tabblad voor tabel ook.



***********************
Je kunt deze cel gewoon een kleurtje geven. Maar wij zetten een vinkje voor achtergrondfiguur gebruiken en klikken op bladeren.

Je ziet het bekende tabblad van je nog lege web, maar daarin nu wel al het jpg bestandje van je eerste achtergrond.
Dat willen we  niet hebben, dus klik weer rechtsonder op het gele mapje en je bent weer in de Verkenner.


Zoek je mapje weer op. Dubbelklik om te openen . klik op achtergrondje 2 en dan op ok. En je 2e achtergrond staat nu netjes in het omrande vlak.

Om het niet meer kwijt te raken ga we onmiddellijk naar Bestand - Opslaan Als - opslaan en Ja.
Ook hier komt meteen het 2e tabblaadje om achtergrondje 2 op te slaan.
Klik op Opslaan en ok.

In je mappenlijst zie je ook de 2 achtergrondjes staan.

******************

Zet je cursor bovenaan naast het woordje "eerste" (dat we voor even in de tabel hebben getik), en klik 1 keer op Enter.

Dan gaan we weer naar boven naar Tabel - Invoegen - tabel en we kiezen weer voor 1 rij en 1 kolom.
Tik in deze tabel woordje twee.

*********************
Maak met tikken op de Enter knop de tabel groter klik met rechtermuisknop weer op de rechtse lijn van de tabel en kies:  Eigenschappen Tabel.
Het tweede achtergrondje hoeft niet zo'n brede rand te worden als het eerste, dus kan je kiezen voor 98 procenten. Of je vindt het wel leuk ze allebei
even breed te houden en dan kies je weer voor 96 procenten, of misschien nog breder dan randje no 1 en dan kies je bv 94 procenten.
Je stelt de randdikte in. En als je nu klikt op Kleuren zie je
dat de kleur die je daarnet voor de rand had uitgezocht er nu al bij staat.
We nemen dezelfde kleur dus klik erop en dan op Toepassen en OK.

**********************
We klikken weer met rechts in de Cel en gaan nu via het tabblad:  Eigenschappen voor Cel ", de achtergrond opzoeken waar we straks de plaatjes en tekst op
willen zetten. Dus kies nu een achtergrondje wat niet te druk is.

Dus Achtergrondje voor Cel  aanvinken - bladeren - naar gele mapje rechtsonder.
In de verkenner je mapje opzoeken en op je achtergrondje klikken.
Ok. En het staat er.

We gaan weer naar Bestand-Opslaan Als enz.

****************
Maar nu willen we wel eens bekijken wat onze kijkers straks te zien krijgen.
Dus ga weer naar Bestand en nu naar Voorbeeld in Browser.
En ja hoor een mooi middenstuk voor tekst en plaatjes zie je omgeven door 2 randjes en wat lijnen.

Klik eens op F11 op je toetsenbord en je ziet het nog beter.
Sluit met kruisje rechts boven.

******************
Je bent terug op je pagina.
Maar nu  ga je even naar onderen scrollen. Daar staan de afstanden bij de randen nog niet zo mooi als aan de zijkanten.
Zet je cursor pal onder de rand van het middelste tabel. Klik nu steeds even op de delete knop.
De andere rand komt naar boven.
Dan pal onder rand 2 zetten en weer de delete knop drukken.
Tot ook de laatste rand netjes staat.

Jammer, soms steken de scrollbalken ernaast lelijk
af bij de leuke rand die je net hebt gemaakt.
Dat lossen we zo op:

Selecteer, door er met ingedrukte linker muisknop overheen te gaan, onderstaande code en plak die even in het kladblok.
Sla het gelijk op in een van je nieuwe mapjes, dan kan je dat steeds opnieuw gebruiken.

Ga nu naar de Htmlknop onderaan bij je pagina.
Je komt in de bron en daarin zie je bovenaan staan
het Head gedeelte (sectie).
Dat is het stuk tussen <Head> en </Head>
Daaronder begint het <Body> gedeelte.

Zet nu je cursor achter het woordje </titel> in het 
de headsectie en voor het woordje </Head>.
Klik een keer op Enter om wat ruimte te maken.
Plak daar door met rechtermuisknop te klikken en dan - Plakken - te kiezen uit het menu wat je te zien krijgt, 
Het ziet er dan zo uit:



Klik onderaan op de knop -  Normaal -.
Er is niets veranderd, de scrollbalken zien nog steeds grijs.
Ga nu naar Bestand - Opslaan Als - Ja
 en dan Weer naar Bestand - Voorbeeld in Browser.
En nu zie je dat de scrollbalken wel degelijk een andere kleur hebben gekregen.

*****************
Of het de juiste kleur is maakt niet uit.
Is het niet de juiste kleur sluit je met het kruisje bovenaan en je bent weer op je werkpagina.
Ideaal is als je nu het programmaatje colorpad hebt.
Heb je dat nog niet kan je het hier downloaden


Na unzippen komt er een exe bestandje tevoorschijn.
Dubbelklik erop en het installeert zichzelf in de map Program Files.
Bovendien heb je er een leuk klein blauw bloemetje op je bureaublad bij gekregen.
Sleep dat met ingedrukte linkermuisknop naar de
werkbalk onderaan en je hebt het altijd bij de hand.

******************

We zijn weer op onze pagina en we willen dus de kleur
van de scrollbalken veranderen.
Klik op het blauwe bloemetje wat dus nu in de onderste werkbalk staat. Er komt een piepklein schermpje tevoorschijn. Ga met je cursor over je pagina en je ziet
dat onderin dat schermpje onmiddellijk het kleur nummer verschijnt.
Als je de juiste kleur voor de scrollbalken hebt gevonden,
stop je met het bewegen van de cursor en schrijf je dat nummer even op een papiertje.

Klik weer op de HTML knop en verander nu 
de nummers achter het # tekentje.
Doe dit eerst bij "scrollbar-face-color" en bij
"scrollbar-tracl-color " (bijna op het einde) .
Dus wat er staat selecteren en dan jouw nummer er voor in de plaats tikken.

Ga even terug naar Normaal en Sla het op via Bestand.
Of klik even op de  kleine diskette in de werkbalk bovenaan.
Ga nu naar Bestand - Voorbeeld in Browser en je kunt zien of het naar je zin is.
Zo kan je alle kleuren in deze broncode achter het # tekentje veranderen in de kleur die jij wilt hebben.

********************

Huiswerk: Maak in je oefenweb zelf nog een pagina (of meerdere)
met randen. Dikke of dunne met of zonder schaduwkant enz. n bijpassende scrollbalken.
Succes,  Maud.

******************
Op de volgende pagina gaan we naar
de plaatjes en de tekst invoegen.