=====================
Instrukties Optimaliseren voor WebWizard
Aangeboden door Peter Vazed
http://www.vazed.vinden.nl/
http://home.12move.nl/~sh230091/site_map.html
http://www.vazed.tmfweb.nl/sitemap.html
http://people.zeelandnet.nl/vazed
vazed@zeelandnet.nl
======================
Eerst halen we webwizard op. ( vindt ie leuk dat ie mee mag ;-) )
Dit is het adres
http://www.arta.com/webwizard
======================
=== Begin ====
Werken met Webwizard Optimaliseren
Met de webwizard zet je vlot een site op.
Eerst wel noteren hoe je diverse pagina's
moeten gaan heten.
Dus:
index.html (dit is altijd je eerste pagina)
hobby.html
school.html
foto.html
etc
want deze linken zijn belangrijk, later
corrigeren kan, maar is moeilijker.
Je moet eerst een nieuwe map voor
je site aanmaken.
Daarin zet je de aangemaakte pagina's.
Met webwizard maak je iedere keer
maar één pagina.
Als je via de wizard klaar bent, kies je
de map waar het in moet, en dan dien je
wel voor de goede naam van de file
te kiezen.
Tekst inplakken is beter dan in de
wizard in te voeren, hetzelfde geld voor de
linken naar andere sites.
Alleen een in Word opgeslagen document
kan goed worden weergegeven
in je html pagina, anders moet je zelf
de breaks en paragraphs invoeren.
Let op:
in Word druk je op de SHIFT toets als je de Enter indrukt
voor een volgende regel. Dan krijg je geen lege regel er tussen.
Met alleen de ENTER krijg je één lege regel, en is alleen nuttig
als je met paragrafen wilt werken.
Dus een deel van je Word document
kopieren en in het venstertje inplakken
Dan krijg je dus dit resultaat.
Althans bijna, want je zult zien dat
het niet naar je zin is.
Je moet je tekst nl laten voorafgaan
door en afsluiten door
om de enters (=beginnen op nieuwe regel)
van je Word document weer te geven.
Later leren we om het uiterlijk van je pagina
fraaier te maken. ;-)
*********
Of je haalt NoteTab op....
http://www.notetab.com
Met deze teksteditor kun je standaard korte regels
aangeven voor een pagina.
Nog makkelijker is het om de tekt die je gemaakt hebt in Notetab
om te laten zetten naar html.
Notetab is ook een html editor, dus kun je met kladblok werken,
dan stap je op een gegeven moment over op NoteTab.
*********
==== TABEL ===
Nu we met de Webwizard een pagina kunnen maken moeten we nog
op de vormgeving letten.
Dus we gaan onze tekst in een cel zetten om een betere positie op
onze pagina te krijgen.
Wat is nu een cel?
Een cel is één hokje van een Tabel.
Wat is een tabel?
Een tabel is een bij elkaar horende blok gegevens.
Verduidelijken?
Neem een A4tje, zet een lijn van links naar rechts op ca 1/3 van de
bovenkant en ook een lijn op 1/3 de vanaf de onderkant.
Trek nu ook 2 lijnen van boven naar onder.
Je hebt nu 9 hokken op je A4tje.
Ieder hok heet cel, alle cellen bij elkaar heet tabel.
In ieder hok kun je nu een tekst of plaatje zetten.
Op die manier gaan wij onze webpagina optimaliseren.
De eenvoudigste tabel heeft één cel.
We kunnen ook een tabel hebben met drie cellen naast elkaar.
Cellen naast elkaar noemen we een rij.
Eerst nemen we de tekst op onze met webwizard gemaakte
pagina onder handen. Dan het plaatje.
We maken een tabel met drie cellen.
Alleen in de middelste cel zetten we onze tekst.
Dit wordt de stuktuur van onze tabel:
| linkerhok |
midden hok voor onze tekst |
rechter hok |
Let op:
je hebt een begin tag
en een eind tag
let op de /
Als je de bron bekijkt zul je P zien, dit is wat Word
toevoegd en staat voor paragraph.
De P hoeft dus niet in je code voor te komen.
Met P krijg je een lege tussenregel, anders worden
de regels net als nu weergegeven.
----------------
=== WIDTH ===
2-o_width.html opzet
Dit is een verbeterde uitvoering van het voorafgaande:
=========Open kladblok en voer
bovenstaande code in en sla op als tabel1.txt
Het werken met een tabel gaan we nu toepassen op
een pagina die we met Webwizard hebben gemaakt.
Ik neem hier als voorbeeld mijn pagina:
w_info.html (de pagina met de ridder)
We openen deze pagina via de verkenner door er op
te klikken. Nu zien we deze pagina. We klikken nu op
Beeld en kiezen dan Bron. De html code wordt weergegeven.
Nu zetten we de cursor voor de tekst en voeren
daar in:
| |
(je kunt ook in je kladblok document tabel1.txt
dat deel markeren en kopieren en plakken in je
kladblok html pagina)
Codes voor het opzetten van tabellen kun je in een
kladblok txt bestand zetten, dan is het een kwestie
van kopieren
We slaan gelijk op onder een andere naam.
De originele pagina blijft zo bestaan.
Nu zetten we dit achter de tekst in onze pagina:
|
|
Sla op (onder de nieuwe naam ) en bekijk via je
verkenner.Je kunt nu schakelen via de taakbalk tussen de
originele file en de nieuwe.
Verdere verbeteringen:
info:
border: laat een omkadering zien (normaal=1)
align=center plaatst onze tabel in het centrum
van de pagina.
table width=60% = % van de schermbreedte
td width=20% = % van de tabel
is een onzichtbare spatie, daardoor
is er wel iets in de tabel ingevuld, anders werkt
de width niet goed. Bekijk nu na iedere wijziging je pagina.
Let op: denk niet dat de width voor je cellen
niet werken. Je tekst breedte dient ook aangepast te worden,
door in kladblok voor kortere regels te kiezen.
Dus een enter geven na ca 7 woorden. Is je tekst
te breed of een plaatje in een cel breder dan de
opgegeven waarde, dan overheerst de
originele breedtemaat.
Dit is in feite heel het eieren eten ten
aanzien van positionering van tekst in een cel.
------------
=== ACHTERGRONDPLAATJE ===
3-o_bgplaatje
Nu gaan we de linker en rechter cel van een
achtergrondplaatjevoorzien. (je plaatje zit in dezelfde Map)
Let op:
heb je een wijziging aangebracht en de file
opgeslagen en wil je die zien, klik op de file onder
in je taakbalk, en klik dan op vernieuwen in je browser.
De wijzigingen zijn dan te zien.
Zo zetten we een achtergrondplaatje neer:
Het middenvlak geven we een kleurtje:
| tekst midden hok |
en dat wordt dan:
tekst middenhok |
Op de bovenstaande wijze kun je dus je tabel netjes
aanpassen.Wil je er nog een kolom voor of achter dan kan dat
ook.Zet gewoon achter de openingstag een cel tag
| |
Je zit nu met het probleem dat je % niet meer klopt,
dit moet je voor de diverse cellen en eventueel de tabel
aanpassen.Dan kunnen we natuurlijk tekst in onze cellen zetten.
Op een zwarte achtergrond zie je geen zwarte letters,
dus voegen we een kleur toe:
cel 1
Gewoon de kleur naam -in het engels-werkt ook, normaal
gebruik je de uit 6 letters/cijfers bestaande
kleuraanduiding:
ff0000=rood
00ff00=groen en
0000ff=blauw.
ffff00=geel
00ffff=licht blauw en
ff00ff=paars
-------------
=== PLAATJES ===
4-o_plaatjes
Nu gaan we de twee plaatjes in een tabel zetten.
(normaal heb je bij de webwizard één plaatje,
maar ik had er al een bij gezet)
Onze tabel maken we 80 % breed:
Doordat de afmeting van de
plaatjes verschillend is, zijn de
weergave van de cellen verschillend, dus we passen de % aan.De
eerste zetten we op 30 % en de andere op 60 %.
Nu geven we de ridder een achtergrondplaatje.
background=bg_sterren.jpg
en zetten er een tekst in:
Dit is de code:
![[IMAGE]](ridder_koper.gif)
Ridder |
Nu de rechter cel een kleurtje geven:
 |
Zo zie je dat je het uiterlijk van een pagina kunt wijzigen.
Let op:
heb je iets gewijzigd, kies dan opslaan.
Niet naar je zin, kies Bewerken: Ongedaan maken of Ctrl Z.
Krijg je bij het bekijken iets wat nergens op lijkt, dan heb je
een tikfoutje gemaakt. Als je pagina naar je zin is kun je de
borders op 0 zetten, dan ben je de omkadering kwijt.
That's all fokes.
Moet je pagina langer, gewoon nieuwe tabel er onder zetten.
Have a Nice Day
Peter V