Portret van de webmaster Image Logo Portret van de webmeesteres Reageer per E-mail
Ontwerpen: deel 1 Ontwerpen: deel 2 Ontwerpen: deel 3

Home
Screenreaders
Inleiding
Webhosting
Een eigen domeinnaam
Publiceren
Ontwerpen: deel 1
Ontwerpen: deel 2
Ontwerpen: deel 3
Promotie (metatags.nl)
Interactie en Dynamiek
Doctypes
Alle kleuren
Contact
Disclaimer


Experiment online
Web ontwerpen


Ontwerpen: deel 2

Even controleren, wat we er tot nu toe van hebben gebakken.
Op je harde schijf staat een map met de naam van je website. Laten we die map maar even: 'www.coco.nl' noemen.
In die map staat een bestand met de naam: 'index.html'. Als je daarop klikt, start Internet Explorer, en toont Coco's website, die nog steeds onder constructie is.
Als je met je FTP cliŽnt de aan jouw toegewezen ruimte op de schijf van je host bekijkt, dan staat daar hetzelfde index.html-bestand. Via de adresbalk van Internet Explorer verschijnt Coco's Home Page op het scherm.
Klopt dit allemaal? Dan gaan we door.

Je moet weten, dat het zinnetje 'onder constructie' een absolute doodzonde is.
Dat moet dus snel weg. Ook willen we de pagina een beetje opfleuren met wat kleur.
Een foto'tje is leuk, en wat is een website zonder links?
Net zoiets als bier zonder schuim.

CSS
In de door Arachnophilia gegenereerde pagina zie je in de <body> tag nog een aantal codes staan. Dit is de oude manier, om het uiterlijk van de pagina aan te geven. Je ziet hier codes voor achtergrondkleur, tekstkleur en grootte, en kleurinformatie voor de links. Tegenwoordig zetten we die informatie in een zogenaamd 'stylesheet'. Omdat we meerdere 'stylesheets'op een webpagina los kunnen laten, wordt er gesproken van 'Cascading Style Sheets' ofwel CSS. Zo'n 'stylesheet' is niet veel meer dan een tekstdocument, waarin we voor de verschillende containers aangeven hoe ze moeten worden gepresenteerd. Je herkent een 'stylesheet' aan de extentie 'css'.
Open het Kladblok en kopieer het volgende daar naartoe.

body { background-color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-style:normal; font-size:100%; color: #000000; }
h1 { font-family: Arial, Helvetica, sans-serif; font-size: 160%; color: #ff0000; }
h2 { font-family: Arial, Helvetica, sans-serif; font-size: 140%; color: #008000; }
h3 { font-family: Arial, Helvetica, sans-serif; font-size: 120%; color: #0000ff; }
a:link { color: #0000FF; text-decoration: underline; }
a:visited { color: #009966; text-decoration: underline; }
a:hover { color: #ff0000; text-decoration: underline; }

Sla dit bestand op als coco.css in de Cocomap.
In deze stylesheet hebben we de achtergrond van de pagina op wit (ffffff) gezet, een zwart sans serif font gekozen (000000), de grootte op 100% gezet en er een normaal lettertype van gemaakt. We hebben de eerste 3 headings een kleur en een afmeting gegeven. Verder hebben we de links van een kleurtje voorzien, en gezegd, dat ze 'underlined' moeten worden getoond.
Informatie over wat er allemaal nog meer kan met CSS vind je bij de links onder aan deze pagina, even als informatie over kleur codering.

Metatags
Nu moeten we in index.html nog aangeven dat het document gebruik moet maken van een stylesheet. Start Arachnophilia op en vervang in index.html de twee door het programma gegenereerde metatags (generator en formattor) door de onderstaande code:

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<link href="coco.css" rel="stylesheet" type="text/css">

De eerste metatag definieert dit document als webdocument dat gebruik maakt van een vastgestelde karakterset, de tweede tag coppelt het stylesheet 'coco.css' aan dit document.
Op de lokale computer heeft Coco's website nu al wat kleur gekregen. Nog een paar kleine veranderingen. Vervang: <html> door:
<html lang="nl">.
Nu is de taal van de pagina vastgelegd.
Haal de codes uit de body tag weg, zodat alleen: <body> over blijft.
Die codes staan nu immers in het stylesheet.
Helemaal bovenaan de pagina vinden we de document header. Arachnophilia genereert een verouderde code, die we gaan vervangen door:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


Verwijder nu alle tekst tussen <body> en </body>.
Wat we nu over houden is een nieuwe sjabloon, aangepast aan de eigen website.
Bewaar dit document nu eerst als index.html. Vervang vervolgens de tekst tussen <title> en </title> door het 'verticale streepteken'. Bewaar deze versie als 'template.html'.
Minimaliseer Arachnophilia, en ga naar de cocomap. Selecteer 'template.html' en kies in het snelmenu voor kopiŽren. Ga nu naar C:\Program Files\Arachnophilia en open deze map. Zoek de template map op, en hernoem hierin het bestand 'template.html'in bij voorbeeld 'oldplate.html'.
Plak nu het gekopieerde 'template.html' bestand in deze map. Sluit af en zet Arachnophilia weer op het scherm. Als je nu een nieuw html-document opent, kun je direct met de inhoud beginnen. De cursor springt automatisch naar het verticale streepteken tussen de 'title tags', en wist dit teken uit.

Plaatjes en Links
Nu kunnen we de index pagina een wat zinvollere inhoud geven. We beginnen met een 'heading level 1', groot en vet. daaronder zetten we Coco's foto, en vermelden in de 'alt tag' wat er op het plaatje te zien is. Dan volgt een stukje tekst, waarin Coco de bezoeker welkom heet.
We beŽindigen de pagina met een 'link' naar de volgende paginawaarop Coco zich nog wat verder voorstelt. Om het plaatje te kunnen tonen, en de link te laten werken, moeten er nog 2 bestanden naar de Coco map. Het plaatje heet: coco.jpg, en is onder aan deze pagina te downloaden. Coco's verdere introductie staat op een pagina, die we eerst moeten aanmaken. Open een nieuw html document, en bewaar het alvast als: intro.html.
Al weer knip en plaktijd. Het onderstaande moet tussen de 'body tags'van index.html komen:

<h1>Coco's Home Page</h1>

<p>
<IMG src="coco.jpg" height=142 width=111 alt="Portret van de webmaster">
</p>

<p>
Welkom op Coco's webstek. Leuk dat je langs komt. Deze site is nog klein, maar uitbreiding valt spoedig te verwachten.
Door hieronder te klikken, kun je de tweede pagina al bekijken.
</p>

<p>
<A HREF="intro.html">Naar de volgende pagina</a>
</p>

We wachten nog even met het uploaden naar de server, tot we in deel 3 de intro pagina van tekst hebben voorzien, en de index pagina nog wat hebben verfraaid.

CSS mogelijkheden - Overzicht

Portret van Coco. Klik met rechts en kies: doel opslaan als



Kalender Datum:
Laatste wijziging:

Corrie Looijen
© 2010-2015