Uitleg van Diederik
advertisement
Iets algemeens over website’s
WEBPAGINA’S (html)
-
-
Website’s zijn opgebouwd uit webpagina’s.
Webpagina’s (html files) zijn textfiles die eindigen op .html of .htm (extensie).
Een textfile is een verzameling tekens, spaties en lege regels.
html files bevatten naast tekst ook html code (html tags).
Deze code helpt de browser bij het juist weergeven van de pagina.
- van welke lokatie bijvoorbeeld een plaatje kan worden gedownload.
- op welke plek van de pagina het plaatje zichtbaar wordt.
Plaatjes hebben vaak een eigen map (=verstandig).
(HYPER)LINKS (dat waar je op klikt)
-
Een (hyper)link is een plaatje of een stukje tekst waar je op kunt klikken.
Webpagina’s (html files) kunnen naar elkaar verwijzen via hyperlinks.
Na klikken opent de in de link gespecificeerde html file in het browser venster.
BROWSER (websites bekijken)
-
Met behulp van browser-software bekijkt men websites (html pagina’s).
Browser software interpreteert html files. (Webpagina’s weet u nog?)
Microsoft Internet Explorer is een browser.
Mozilla firefox is ook een browser.
Waar deze html pagina’s staan maakt voor de browser niet uit.
Ze kunnen op uw eigen computer of op een webserver staan.
In het eerste geval staan ze offline, in het laatste geval staan ze online.
WEBSERVER (website online zetten)
-
Een webserver is een harddisk die 24/7 bereikbaar is via internet.
Deze service wordt geboden door een webhosting-provider.
Hosting-providers verhuren de harddiskruimte van hun webservers.
Je huurt een stukje harddisk en krijgt een sleutel.
Alleen de bezitter van deze sleutel kan de inhoud van deze ruimte aanpassen.
Kijken in deze ruimte kan immers iedereen. (via internet)
De sleutel is het ftp-adres plus bijbehorend username en password.
Voor aanpassingen aan de inhoud van deze (web)ruimte gebruikt men ftp-software
De ftp software van onze keuze is filezilla.
We maken een connectie via het ftp protocol (ftp adres, username, password)
We kopiëren de pagina's van onze computer naar de host
Local site is je eigen computer.
Remote site is de webserver of host.
De pagina’s staan nu online.
Bij deze ruimte hoort ook een http adres of een domeinnaam.
Tik dit adres in de adresbalk van een browser naar keuze en zie het resultaat.
WEDEROM HTML PAGINA’S (bewerken)
-
Het bewerken van html pagina’s kan met elke tekst editor
Een html editor is handig.
De html editor van onze keuze is matrix y2k 2005se.
1-14
HTML – En de HTML editor.
Dit is de software waar mee de afzonderlijke html files waar uit de website is opgebouwd
kunnen worden aangepast. Wij adviseren Matrix y2k. Deze freeware html-editor vind je
in de y2k map. Dubbel klikken en het pakket installeert zich vanzelf.
Start het pakket. Open home.html en tik wat tekst tussen <body> en </body>
Sla dit op. (Ctrl S)
Als uw veranderingen niet worden opgeslagen selecteer dan in de verkenner
van windows alle html files van de website, klik rechts, klik eigenschappen en
haal het vinkje weg bij alleen lezen.
Klik op tabblad bekijken (het tabblad naast editor zie figuur) Nu ziet u een voorbeeld van
hoe een browser deze html file zou weergeven.
2-14
Druk nu op f12 dan zie je een voorbeeld van de webpagina in een browser venster. Het
kan zijn dat er nog geen browserpad is gedefinieerd. Ga naar browserpad configuratie in
het configuratie scherm. (Ctrl F5) Klik op de drie puntjes. Zoek dan naar Internet
Explorer in de map program (-files.)
Actie- Bekijk en bestudeer de tools sectie van matrix y2k en maak een
homepage naar eigen inzicht.
- HTML code
Een Html file is een tekst file en kan dus worden gemaakt in elke tekst-editor die u maar
ter uw beschikking heeft. Een html editor is wel handig.
- De standaard opmaak van een html pagina is:
<html>
<head>
</head>
<body>
</body>
</html>
Alle dingen die zichtbaar en of hoorbaar zijn voor de bezoekers van uw website staan
tussen <body> en </body>. Als je dus op zoek bent naar een stukje code, dan zoek je
altijd eerst naar de <body> tag, want pas daarna kom je relevante informatie tegen.
Spaties (zie tekst.html)
Html geeft je standaard slechts 1 spatie kado. De rest moet je er met geweld in zetten
via de code &nbsp; (Kan ook worden gebruikt om plaatjes naar rechts te laten
schuiven.)
Witte regels (ziek tekst.html)
Als je dwingend naar een volgende regel wilt of je wilt een witte regel invoeren gebruik je
de code <BR>
Koppen
Voor het gebruik van een koptekst kan gebruik worden gemaakt van zogenaamde header
tags. Deze tags zet u aan beide zijden van de kop als volgt dus:
<h1>Dit is een kop tekst</h1>
Voor de vormgeving van de kop moet u in de style sheet zijn. Deze staat in de map
styles en heet standaard.css
Lettertypen (zie lettertypen.html)
Lettertypen kunnen lokaal geplaatst worden via lokale code of voor de hele website in 1
keer aangepast in de stylesheet (standaard.css). Let op! Alleen lettertypen kunnen
worden gebruikt waarvan je zeker weet dat uw bezoeker ze ook bezit. Anders wordt het
standaard lettertype weergegeven. Zie voor meer info de tools afdeling van uw html
editor.
Plaatjes (zie plaatje.html)
3-14
Om een plaatje zichtbaar te maken op het scherm, wordt een regel HTML-code
opgenomen tussen <body> en </body>.
De plek waar de code staat bepaald waar het plaatje zichtbaar wordt. In de code zelf is
opgenomen waar de browser het plaatje vandaan moet halen.
Aangezien al onze plaatjes in de beeld map staan, is dit dus de locatie waar naar toe
moet worden verwezen.
<IMG SRC="beeld/moonbanjok.jpg" WIDTH="164" HEIGHT="147" ALT="Man op maan
met banjo">
Daarnaast wordt aangegeven hoe groot dit plaatje is en welke tekst op het scherm moet
worden weergegeven als het plaatje om wat voor reden ook niet gevonden kan worden.
-
Links
Een link is een stukje tekst waar je op kunt klikken. Het resultaat hiervan is dat er een
nieuwe html pagina wordt geladen. Stel we willen kunnen klikken op de tekst “klik hier”
en dan moet de pagina plaatje.html geopend worden.
<a href=”plaatje.html”>
klik hier
</a>
Je ziet dat “klik hier” nu tussen twee <a> tags in staat. Aan de eerste <a> tag is de
code href toegevoegd. De tekst achter href is de html pagina die geopend moet worden
als er op “klik hier” wordt geklikt.
Je kunt nu ook een plaatje linken. Vervang doodeenvoudig de tekst “klik hier” voor de
code van een plaatje zoals hierboven bij plaatjes vermeld.
De knoppen op onze lege website zijn ook gewoon links maar dan zijn ze zo
vormgegeven dat ze lijken op knoppen. De parameters voor deze vormgeving zijn terug
te vinden in de stylesheet standaard.css die staat in de map styles
-
Lokatie van de html file
Als je in de file home.html een link wilt maken naar tekst.html en beide html files staan
in dezelfde map volstaat de naam van de file als verwijzing. Dat wordt dus
href=”tekst.html”.
Is dit niet het geval dan zul je het te volgen pad moeten aangeven. Dus als tekst.html
bijvoorbeeld in de map beeld zou staan wordt dit href=”beeld/tekst.html.
-
Knoppen (zie knoplinks.html)
Hieronder is weergegeven de code voor de home knop.
<A class="knoplinks" href="home.html" target="inhoud">Home</A>
Weer zien we dat de tekst “Home” word ingesloten door twee a-tags. Alleen is nu de
eerste a-tag een stukje langer geworden.
class="knoplinks" verwijst naar de vormgevingscodes in de stylesheet standaard.css
target="inhoud" verwijst naar het indexframe waarin de nieuwe html pagina geladen
moet worden. Deze pagina moet namelijk niet de knoppen vervangen maar de html
pagina in het frame dat we als “inhoud” hebben gedefinieerd bij index.html.
4-14
De lege website:
-html files
-mappen
audio = voor mp3 files (geluid op je website)
beeld = Voor jpg, gif of png files (plaatjes op je website)
script = Voor script (tekst selecteren uit/aanzetten of rechtsklikken aan/uitzetten)
style = Voor de css style sheet (voor al je kleuren, lettertypen, formaat, marges )
Opdracht - Kopieer de map website van de cd rom naar de harddisk van uw
computer in de map mijndocumenten.
-schema van index.html
KOP.HTML
Name=titel
Name=knoplinks
Name=inhoud
HOME.HTML
KNOPLINKS.HTML
Name=balk
BALK.HTML
Index.html is de hoofdpagina van onze lege website. Browsers zoeken altijd naar de
index.html en laden die als eerste. De index bevat behalve het logo zelf geen informatie.
De functie van de index is het gelijktijdig weergeven van 4 verschillende html files. Dit
vereenvoudigt het onderhouden van de website aanzienlijk. De losse onderdelen zijn
eenvoudig aan te passen.
5-14
Kop.html bevat de titel van je site en de knoppen die naast elkaar boven aan het
scherm staan.
Knoplinks.html bevat enkel en alleen de knoppen aan de linkerzijde van het scherm.
Balk.html bevat het copyright statement
De overige html files verschijnen in het frame met de naam inhoud als op 1 van de
knoppen van knoplinks.html wordt gedrukt.
In een browser venster ziet de index er ongeveer zo uit:
Een knop is dus niet meer dan een fraai vormgegeven link naar een van de hierboven
vermelde html pagina’s. In elk van deze pagina’s vind je voorbeelden van html code
over dingen als tekst, plaatjes, links, tabellen. Ook is in de code zelf extra informatie te
vinden over deze zaken.
6-14
FTP - Het online plaatsen van de website
De ftp software wordt gebruikt om de website van uw computer naar de host te kopiëren
of om aanpassingen online te krijgen.
Installeer de ftp-software filezilla. Deze vind u in de map ftp op uw cd rom. Zoek met de
verkenner deze map en klik 2x op het Filezilla icoon. Het programma installeert zichzelf.
U heeft nodig:
-
ftp adres, username en password
Nadat u filezilla geinstaleerd hebt opent u het programma door op het iccoontje op de
desktop te klikken. Daarna klikt u op het computer icoontje linksboven. (Zie pijl )
7-14
Klik op nieuwe site, vul in (bij de pijlen) en druk op verbinden.
Gebruik in het vervolg het kleine driehoekje naast het computertje
links boven om in te loggen.
Zet de lege website online:
Actie - Sleep de inhoud van de map website van links naar rechts.
Opdrachten:
De voorbereiding
1. Homepage ruimte
Activeer de homepage ruimte van uw internet account.
of registreer bij lycos-tripod voor een gratis hosting account.
Achterhaal het ftp adres, username & paswoord van uw home page.
2. Installeer de software
Stop de cd in de computer.
Start de file manager (windows + E) Mijn computer -> folders
Bekijk de mappen op de cd rom.
Installeer HTML editor Matrix Y2k (map html editors)
(mac gebruikers installeren hier bluefish)
Installeer FTP client Filezilla (map ftp --> map filezilla --> setup.exe
(mac gebruikers installeren hier Cyberduck)
Installeer fotobewerkingssoftware Irfanview (map grafix)
(mac gebruikers installeren hier Xee 2.0)
3. Kopieer de lege website van de cd rom naar uw computer
Maak een map 'website' in de map mijn documenten.
Open de map 'website' op de cd.
Kopieer de inhoud van die map de map website in mijn documenten.
4. Read only van html files verwijderen (alleen windows 98)
Selecteer alle html files in de map website op uw computer. (blauw maken)
Klik rechts. Selecteer properties/eigenschappen en haal het vinkje weg bij read
only/alleen lezen. Druk op apply/toepassen.
Webpagina's maken.
5. Home.html aanmaken.
Start Matrix y2k door op het icoontje op de desktop te klikken.
Zoek in de filemanager van Matrix y2k naar de map 'website' in mijn documenten.
Open deze map en zoek de html file genaamd 'leeg.html'
Open leeg.html in Matrix Y2k.
Tik een welkomsttekst tussen <body> en </body>.
Sla deze file op als home.html.
Bekijk nu het resultaat door op het tabblad bekijken te klikken.
6. Bio.html maken
Open leeg.html opnieuw.
8-14
Tik of kopieer de tekst van uw biografie tussen <body></body>
Sla deze file op als bio.html.
Bekijk het resultaat
Zet de tekst van uw bio tussen <pre></pre> en bekijk het resultaat.
Zet een foto van uwzelf in de map beeld.
Zet deze foto in bio.html.
Bekijk het resultaat.
Blijf aanpassen tot je tevreden bent met het resultaat.
7. Home linken naar bio
Open home.html in Matrix y2k of ga als deze file nog open is naar deze file toe door op
het tabblad home.html te kllikken.
Zet de code <a href=”bio.html”>Ga naar mijn biografie</a> ín home
en bekijk het resultaat.
Klik op Ga naar mijn biografie. Uw biografie verschijnt.
8. Bio.html en home.html online zetten.
Start Filezilla.
Tik ftp adres username password in en druk op connect. Zie handleiding.
Het programma maakt verbinding met uw server/host waarna u files kunt kopiëren van
uw computer naar uw server door te slepen of dubbel te klikken.
Sleep bio.html en home.html van local site (uw computer) naar remote site (de server)
Maak een map beeld aan op remote site.
Open deze map door erop te klikken.
Open dezelfde map op localsite en kopieer uw foto van beeld naar beeld.
Nu zijn uw beide html pagina's zichtbaar voor iedereen in de wereld en kent u het basis
principe waarop alle websites ter wereld zijn gebaseerd.
Neem een welverdiende pauze en ga dromen van de mogelijkheden.
(Er zijn altijd mensen die nu willen weten hoe je achtergrondkleur aanpast, hoe je een achtergrond plaatje
plaatst. Alhoewel dit niet het moment is en ik het afraad om je er nu mee bezig te houden ga ik wel
vertellen hoe je dit kan doen, alhoewel ik dit niet de meest charmante manier is.
<body bgcolor=”#000000” background=”beeld/img.jpg ” text=”#000000”>
bgcolor is achtergrondkleur
background is achtergrond plaatje
text is tekst kleur.)
Oke nu verder met de cursus.
Werken met de 'lege website'
9. Zet de hele lege website online.
Kopieer alle html files van localsite naar remote met behulp van filezilla.
Zorg altijd dat de website op remote een 100% kopie is van de site op localsite.
Zorg ten alle tijde dat de website op je eigen computer een 1 op 1 kopie is van de
website op de host. Dit voorkomt overschrijf fouten. Bij het plaatsen van plaatjes in de
beeldmap van je host open je in Filezilla eerst de beeldmap op je computer (localsite) en
daarna ook op je host (remote site). Nu kan je de beelden van links naar rechts (van
beeldmap naar beeldmap) slepen.
10. Ontwikkel je website
Verzamel de inhoud van je website. (plaatjes, teksten, video)
Bedenk uit hoeveel categorieën (knoppen) webpagina's je website moet bestaan.
9-14
Voor iedere knop of catagorie open je leeg.html en je slaat hem iedere keer op onder een andere
naam: foto.html, optredens.html, nieuws.html, lessen.html, projecten.html, muziek.html
11. Verzamel plaatjes
Zet alle plaatjes die je wilt gebruiken in de beeldmap van je website. Open deze plaatjes in
infranview en geef deze plaatjes het juiste formaat.
Dit kan door het plaatje groter of kleiner te maken.
- Image --> resize/resample
- Opslaan als
(in de map beeld)
of door het gewenste stuk uit de foto te snijden en dit als nieuw document op te slaag.
-
Selecteer een gedeelte door met de linker muisknop ingedrukt over het document te bewegen.
Snij dit uit met Ctrl-X
Image --> Create new (empty) image --> OK
Plak de uitsnede in het lege document met Ctrl- V
Opslaan als
(in de map beeld)
Een scherm van een bezoeker is gemiddeld 1000 beeldpunten breed en daarom kan als duimregel
worden aanghouden dat een plaatje dat de helft van het scherm moet beslaan maximaal 500
beeldpunten breed zou moeten zijn. Voor een kwart pagina zou je dan 250 aankunnen houden.
11. Ontwikkel je knoppen.
De knoppen bovenaan zitten in kop.html vb:
<td><a href=”home.html”>home </a></td>
Om een knop te verwijderen delete je van <td></td>
Kopieer deze code om een knop toe te voegen.
De knoppen links zijn terug te vinden in knoplinks.html vb:
<tr><td><a href=”home.html”>home </a></td></tr>
Om een knop te verwijderen delete je van <tr></tr>
kopieer de code om een knop toe te voegen.
12. Vullen
Vul de nu nog lege html-pagina's met content zoals je bij bio hebt gedaan.
13. Logo plaatsen
Het logo bevind zich in index.html boven de tabel.
<div id="logo">
<a href="index.html"><img src="beeld/jouwlogo.gif" width=128 height=67
alt="" border=0></a>
</div>
Het logo staat tussen div tags waardoor het boven op de website geplaatst kan worden
op een lokatie die staat gedefinieerd in de stylesheet. Zet jouw eigen logo in de map
beeld van de website en upload hem naar de map beeld van de host. Zorg dat je logo
dezelfde afmetingen heeft (128 bij 67 beeldpunten) of pas de afmetingen aan. Verander
jouwlogo.gif in de naam die jij aan het plaatje van jouw logo hebt gegeven.
10-14
HTML Extra
Tabellen
Hier onder ziet u het voorbeeld van een tabel. Tabellen worden in websites gebruikt om
dingen op zijn plaats te houden.
Bovenstaande tabel heeft 3 kolommen en 2 rijen
In html wordt een tabel gedefinieerd tussen table tags
<table></table>
en hij wordt gezien als een verzameling rijen met tabel cellen erin.
Een rij word gedefinieerd tussen table row tags
<TR></TR>
En tabel cellen worden gedefinieerd tussen table data tags
<TD></TD>
De kode voor bovenstaande tabel wordt dan
<table>
<TR><TD></TD>
<TR><TD></TD>
</table>
<TD> </TD>
<TD> </TD></TR>
<TD> </TD>
<TD> </TD> </TR>
Zoals altijd kan ook hier aan elke html tag een width worden meegeven in absolute zin of
in procenten. width=”300” of width=”80%”
Formulieren
Bij de lege website zijn een aantal formulieren meegeleverd. Het zijn gewoon html
pagina maar met een aantal bijzondere elementen erin.
Het enige dat je hoeft te doen om die dingen werkend te krijgen is je eigen email adres
in te vullen achter het form statement bovenaan het formulier.
Kleuren
De kleurcode in HTML is een 6 cijferig hexadecimaal getal. Dit betekend dat men bij
negen door telt met a t/m f. De eerste twee cijfers staan voor het rode licht, volgende
twee voor het groene en de laatste twee voor het blauwe. Ook staat er altijd een # voor.
Dus #000000 is zwart en #FFFFFF is wit. Kan iemand mij vertellen wat de code van rood
is en daarna van donkergroen? Zie einde handleiding.
Zie kleuren.html
11-14
De stylesheet
Dan dus nu de manier waarop je wel de vormgeving aanpast.
De volgende regel die in de head van elke lege of volle pagina moet staan geeft aan dat
de pagina gebruik maakt van de stylesheet 'standaard.css'.
<LINK HREF="styles/standaard.css" TYPE="text/css" REL=StyleSheet>
Dit document stelt je instaat om elke html tag te stylen volgens de regels van css.
Standaard.css is te vinden in de map styles van je website. De syntax regels luiden als
volgt.
Tag {property:value; property:value; property:value; property:value; }
Een overzicht van css properties vind je op :
http://htmlhelp.com/reference/css/properties.html
vb h1 {FONT-SIZE: 40px; COLOR: #111111; Word-spacing: 10px; Letter-spacing: 5px; FONT-WEIGHT: bold; FONTSTYLE: normal; background: none; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; }
Tags kunnen ook voorzien zijn van een class statement zoals bij de knoppen.
<tr><td><a class=”knoplinks” href=”home.html”>home </a></td></tr>
Elke link voorzien van dit class statement wordt als volgt gestijld
Tag.class {property:value; property:value; property:value; property:value; }
vb A.knoplinks { display: block; width: 119px;text-align: center;text-decoration: none;font-family:verdana;fontsize:12px;color: #dddddd;background:darkolivegreen; BORDER-RIGHT: #222222 1px solid;
BORDER-TOP: #888888 1px solid; BORDER-LEFT: #888888 1px solid;
BORDER-BOTTOM: #222222 1px solid; }
Als je het body statement voorziet van een class statement en dat is in onze lege website
bij elke pagina het geval dan gelden de style gegevens voor de hele pagina en hoeft niet
naar de tag te worden verwezen. Dan krijg je:
.class {property:value; property:value; property:value; property:value; }
vb .inhoud { background: #449900 ; background-color: transparent;FONT-WEIGHT: normal; FONT-SIZE: 12px; TEXTTRANSFORM: none; COLOR: #222222; FONT-STYLE: normal; FONT-FAMILY: Verdana, Arial, Helvetica,
sans-serif; FONT-VARIANT: normal }
Standaard.css De stylesheet van de lege website ontrafeld.
1. Vormgeving van de header tags
h1 (t/m h4) {FONT-SIZE: 40px; COLOR: #111111; Word-spacing: 10px; Letter-spacing: 5px; FONTWEIGHT: bold; FONT-STYLE: normal; background: none; FONT-FAMILY: Verdana, Arial,
Helvetica, sans-serif; }
Font-size: is de grote van het lettertype
color: is de kleur van de letter. (zie kleurcode)
Font-family: Eerst word er gezocht naar Verdana daarna naar Arial enz enz.
12-14
2. Vormgeving van index.html
BODY.index { background: #fff url(../beeld/kopbanner3.jpg) no-repeat top left;
MARGIN: 5px; color:#000000;MARGIN: 0px 0px 0px 0px; }
Marges volgorde: boven, rechts, onder, links
Background: is achtergrond kan een plaatje of een kleur zijn.
3. Vormgeving van de pre tags
pre
{FONT-WEIGHT: normal; FONT-SIZE: 12px; TEXT-TRANSFORM: none; COLOR: #222222; FONTSTYLE: normal; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-VARIANT: normal}
font-weight: bold of normal
4. Vormgeving van alle content pagina's (body class=”inhoud”)
.inhoud {background: #449900 ; background-color: transparent; FONT-WEIGHT: normal; FONT-SIZE:
12px; TEXT-TRANSFORM: none; COLOR: #222222; FONT-STYLE: normal; FONT-FAMILY: Verdana,
Arial, Helvetica, sans-serif; FONT-VARIANT: normal }
5. Vormgeving Marges en Scrollbalken van alle content pagina's.
BODY.inhoud { MARGIN: 50px 10px 5px 50px; SCROLLBAR-FACE-COLOR: #dddddd; SCROLLBARHIGHLIGHT-COLOR: #dddddd; SCROLLBAR-SHADOW-COLOR: #dddddd; SCROLLBAR3DLIGHT-COLOR: #cccccc; SCROLLBAR-ARROW-COLOR: #ff0000; SCROLLBAR-TRACKCOLOR: #ffeeee; SCROLLBAR-DARKSHADOW-COLOR: #aaaaaa }
6. Vormgeving van de linken op inhoud pagina's.
A.inhoud {FONT-WEIGHT: bold; FONT-SIZE: 12px; background: none; COLOR: #008844; TEXTDECORATION: none }
A.inhoud:hover {FONT-WEIGHT: bold; FONT-SIZE: 12px; TEXT-TRANSFORM: none; background: none;
COLOR: #ff0000; FONT-STYLE: normal; FONT-FAMILY: Verdana, Arial, Helvetica, sansserif; FONT-VARIANT: normal }
7. Vormgeving van de knoplinks.html pagina
.knoplinks {background: #44aa00 ; background-color: transparent; FONT-WEIGHT: normal; FONT-SIZE:
14px; TEXT-TRANSFORM: none; COLOR: #ffffff; FONT-STYLE: normal; FONT-FAMILY: Verdana,
Arial, Helvetica, sans-serif; FONT-VARIANT: normal; }
BODY.knoplinks {MARGIN: 10px 0px 0px 10px; SCROLLBAR-FACE-COLOR: #dddddd; SCROLLBARHIGHLIGHT-COLOR: #dddddd; SCROLLBAR-SHADOW-COLOR: #dddddd; SCROLLBAR3DLIGHT-COLOR: #cccccc; SCROLLBAR-ARROW-COLOR: #ff0000; SCROLLBAR-TRACKCOLOR: #ffeeee; SCROLLBAR-DARKSHADOW-COLOR: #aaaaaa }
8. Vormgeving van de knoppen in knoplinks.html
A.knoplinks { display: block; width: 119px;text-align: center;text-decoration: none;fontfamily:verdana;font-size:12px;color: #dddddd;background:darkolivegreen; BORDER-RIGHT:
#222222 1px solid; BORDER-TOP: #888888 1px solid; BORDER-LEFT: #888888 1px solid;
BORDER-BOTTOM: #222222 1px solid; }
13-14
A.knoplinks:hover { BORDER-RIGHT: #eeeeee 1px solid; BORDER-TOP: #666666 1px solid; BORDERLEFT: #666666 1px solid; BORDER-BOTTOM: #eeffff 1px
solid;background:lightgreen;font-size:12px;font-style:italic;color:#000000;
}
A.knoplinks:active { BORDER-RIGHT: #eeeeee 1px solid; BORDER-TOP: #666666 1px solid; BORDERLEFT: #666666 1px solid; BORDER-BOTTOM: #eeffff 1px
solid;background:lightgreen;font-size:12px;font-style:italic;color:#000000;
}
8. Vormgeving van kop.html
.kop {background: #44bb00; background-color: transparent;
FONT-WEIGHT: bold; FONT-SIZE: 30px;
TEXT-TRANSFORM: none; COLOR: #222222; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
FONT-VARIANT: normal }
BODY.kop {MARGIN: 0px 0px 0px 0px;}
8. Vormgeving van de knoppen in kop.html
A.knopkop {display: block; width: 70px;text-align: center;text-decoration: none;font-family:verdana;fontsize:10px;color: #dddddd;background:darkolivegreen; BORDER-RIGHT: #222222 1px solid;
BORDER-TOP: #888888 1px solid; BORDER-LEFT: #8888888 1px solid; BORDER-BOTTOM:
#222222 1px solid; }
A.knopkop:hover {BORDER-RIGHT: #eeeeee 1px solid; BORDER-TOP: #666666 1px solid; BORDER-LEFT:
#666666 1px solid; BORDER-BOTTOM: #eeffff 1px solid;background:lightgreen;fontsize:10px;font-style:italic;color:#000000; }
A.knopkop:active {BORDER-RIGHT: #eeeeee 1px solid; BORDER-TOP: #666666 1px solid; BORDER-LEFT:
#666666 1px solid; BORDER-BOTTOM: #eeffff 1px solid;background:lightgreen;fontsize:10px;font-style:italic;color:#000000; }
8. Vormgeving van balk.html
.balk {background: #44cc00; background-color: transparent; MARGIN: 5px 0px 0px ;FONT-WEIGHT: bold;
FONT-SIZE: 10px; TEXT-TRANSFORM: none; COLOR: #222222; FONT-STYLE: normal; FONT-FAMILY:
Verdana, Arial, Helvetica, sans-serif; FONT-VARIANT: normal}
9. Plaats van het logo
#logo {LEFT: 15px; POSITION: absolute; TOP: 10px; }
9. Plaats van de knoppen in de kop
#knopkop {
RIGHT: 4px; POSITION: absolute; TOP: 60px;
}
9. Plaats van de titel in de kop
#plaatstitel { LEFT: 250px; POSITION: absolute; TOP: 10px; }
Meer over stylesheets is te vinden via:
http://htmlhelp.com/
14-14
