• De afgelopen dagen zijn er meerdere fora waarop bestaande accounts worden overgenomen door spammers. De gebruikersnamen en wachtwoorden zijn via een hack of een lek via andere sites buitgemaakt. Via have i been pwned? kan je controleren of jouw gegeven ook zijn buitgemaakt. Wijzig bij twijfel jouw wachtwoord of schakel de twee-staps-verificatie in.

[OPGELOST] Websites Stylen Met CSS (no Frames or Tables)

Heb je wat aan deze tutotial gehad ?


  • Totaal aantal stemmers
    5
Status
Niet open voor verdere reacties.
N

nano

Gast
!!! Tutorial in Progress !!!

[hand]
Websites Stylen met CSS



In deze tutorial gaan we het hebben over het Stylen met CSS. Ik verwacht wel van je dat je enige kennis (X)HTML in huis hebt. Er is op dit forum zelf ook nog een goeie tutroial over XHTML geschreven [linkie nog effe zoeken]



* Inleiding *

Ik zie nog vaak dat veel mensen de main layout van een website opzetten doormiddel van tables of frames. Dit gebeurde vroeger.. er is al een tijdje nieuwere/betere methoden om dit aan te pakken.

CSS is een taal ontwikkeld voor websites. Het steld je in staat om een webpagina vorm te geven zonder in de bron van de site je opmaak te zetten.

Je zult mischien wel denken, ja hoor.. zal allemaal wel.

Voor de mensen die nog niet overtuigd zijn heb ik even snel een voorbeeldje gemaakt om te laten zien tot wat css in staat is. Ik zal jullie van het begin tot het eind gaan uitleggen hoe de site is opgebouwd en wat alle CSS Regels inhouden.

Hier eerst een voorbeeldje van een site waar de externe css file ingeladen word (alle opmaak word dus uit deze externe file getrokken)

* Voorbeeld Met styles

Ziet er opzig niet echt bijzonder uit, als een gewone normale site zou je zeggen. Maar bekijk presies dezelfde html file eens als ik de CSS niet in geladen word. Vergelijk de source van alle bij de pages als je me niet gelooft, de HTML is in allebij de pages presies het zelflde op de <link> tag na

* Voorbeeld Zonder Styles


Aardig verschilletje zou ik denken toch ?? :p

Ik heb nu wel het idee dat ik je aandacht getrokken heb. Wees maar gerust, ik zal je haarfijn uit gaan leggen hoe ik alles heb opgezet om dit resultaat te krijgen. Maar eerst nog wat verder infomatie over css.

CSS of te wel Cascade Style Sheet kan je op 3 manieren in een webpagina gebruiken, de eerste is inline. Dit betekend dat je de style op de tag zelf zet. Een voorbeeld hiervan is :
HTML:
<span style="font-weight:bold; font-size:18px; color:#369;">Voorbeel text</span>

Hier heb ik gebruik gemaakt van de span tag, deze tag is gewoon een losse container die verder nix aan de opmaak van de text doet die er tussen staat. Doormiddel van de style= geef ik de tag properties mee.. deze properties zeggen de browser dat alles wat in deze span tag staat Dik / 18 Pixes Groot / En met een kleur van #336699 moet worden weergegeven

Deze manier van styling heeft de overhand over de andere.


De 2e manier is embedded styling. Dit gebeurd tussen de <style type="text/css"> </style> in de head tags
Een voorbeeld hiervan is:

HTML:
<style type="text/css">
body {
    font-family:Verdana;
    font-size:12px;
    margin:0px;
}
a {
    color:#00f;
    text-decoration:none;
}
a:hover {
    color:#f00;
    text-decoration:underline;
}
</style>

Hiermee zeggen we tegen de browser dat alle text tussen de body tags het font in Verdana moet weergeven met een groote van 12 pixels, de margin geven we een waarde van 0 pixels wat betekend dat je alles netjes tegen de randen van de browser kan plaatsen. De browser heeft namelijk standaar wel een margin. De link tags heb ik een kleur blauwe kleur gegeven, als je over de link hovert met je muis zal de kleur veranderen in rood en er een lijn onder komen te staan. Bij embedded styling moet dit stuk met code tussen de <head> tags geplaats worden.


De 3e (en beste) manier is een external style-sheet.
Dit betekend dat je een apparte file met de extentie .css aanmaakt en die linked vanuit je html document.
Het voordeel hiervan is dat je het zelfde css style sheet in meerdere pagina's kan linken. Stel je voor dat je een website hebt die uit 30 verschillende html pagina's bestaat. Als je bv op een dag het besluit neemt om de achtergrond kleur van de body te veranderen kan je je voorstellen dat je daar zomaar een paar uurtjes mee bezig zult zijn. Hier komt het grote wonder van de external stylesheet om de hoek kijken. :D
Omdat je telkens dezelfde style-sheet in de pagina's laat is het veranderen van je hele website een kwestie van alleen dat ene kleine maar o zo krachtige .css bestandje aan te passen.

Een ander groot voordeel van een extern stylesheet is dat als een gebruiker voor het eerst op je pagina komt, de browser van de gebruiker de .css file cashed. Dit betekend dat als ie op een link op je website klikt niet het bestand nog een keer van je server hoeft te downloaden omdat het al in de cash staat wat zal resulteren dat de pagina sneller geladen zal worden..

Een voorbeeld van het inladen van extene stylesheets is:

HTML:
<link rel="stylesheet" type="text/css" href="style.css" />

Deze code moet ook weer tussen de <head> tags in je HTML document geplaatst worden.




* The Box Model *

CSS heeft meerdere regels om bijvoorbeeld een <div> tag te kunnen vorm geven. Hiermee doel ik vooral op de width, margin, padding, en border regels. Het zou zeker in het begin dat je met css gaat werken verwarrend kunnen zijn wat het verschil nu tussen de margin padding is.




blablablabla meer info, quirks mode met doctypes in IE enz..





Maar nu genoeg theorie, we gaan nu kijken hoe we dit krachtige monster kunnen temmen zodat we het zelf ook kunnen gaan toepassen in de websites die we in de toekomst gaan bouwen.




* Het maken van de Site *


bla bla bla hoop text en uitleg (div, span, enz.. incline embedded en external)

De HTML Die ik in de volgende 5 voorbeelden zal gaan gebruiken is als volgd:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Websites opmaken met CSS - Page 1</title>
<link rel="stylesheet" type="text/css" href="1.css" />
</head>
<body>
<div id="conainer">

    <!-- header -->
    <div id="header">
        hier de header
    </div>
		
    <!-- nav -->
    <div id="nav">
        hier de nav
    </div>
		
    <!-- content -->
    <div id="content">
        hier de content
    </div>
		
    <!-- footer -->
    <div id="footer">
        hier de footer
    </div>

</div>
</body>
</html>

Hier ga ik niks aan veranderen, het enigste wat ik verander is de <link rel="stylesheet" type="text/css" href="1.css" /> om elke keer een ander CSS bestand in te laden om de vooruitgang en de methode van de site te laten zien. Verder komt er in de source van de HTML nix anders bij te staan. We hebben het tenslotte in deze tutorial over het stylen met CSS :D


Stap 1
We beginnen XHTML van hierboven. Je zal opvallen dat er aan de site er nog niet echt boeiend uit zal zien. Niet veel dan een paar lijnen text op hun eigen regel. Bekijk even de Bron van de pagina. In de External CSS file staat verder ook nog helemaal geen opmaak gedefineerd.

HTML Voorbeeld 1
De CSS

Stap 2
Voor de duidelijkheid (dat we weten wat de divs strax doen) heb ik elke div even een apparte achtergrond kleur gegeven.

HTML Voorbeeld 2
De CSS


Stap 3
In deze stap gaan we al beginnen met de opmaak van de pagina zoals we um uiteindelijk willen hebben, ik heb op de div met het ID "content" een margin-left van 120px gegeven, dit zorgd ervoor dat de div zelf 120 pixels van de linkerkant word geschoven.

HTML Voorbeeld 3
De CSS


Stap 4
Hier gaan we de Div met het ID "nav" op zijn plaats zetten. De methode die ik hiervoor heb gebruikt is de position:absolute;
Dit zorgd ervoor dat de div gaat zweven, doormiddel van de top: en left: kunnen we hem netjes op zijn plaats zetten waar we hem willen hebben. Doordat de (in de vorige stap de div "content" 120 pixels van de linker kant hebben gezet zal de floating "nav" div netjes in de lege plek kunnen komen te staan.

HTML Voorbeeld 4
De CSS


Stap 5
Bla bla bla, de kleurtjes en andere dingentjes

HTML Voorbeeld 5
De CSS

[/hand]


~~~~~~~~~~~~~~

Effe Helemaal nalezen nog, layout en de flow van het verhaal goed opzetten

(hoofdstukkies waar ik ze door heen wil loodsen)

* de box model (en de ramp met IE < 6.0) (doctypes)
* beginnen met de HTML en divs
* Classes en id's
* Simpele style regels (de kleuren)
* Stapje verder, het posistioneren
* Geavanceerde regels en regels op meerdere classes
* Achter grond plaatjes
* Klaar, het resultaat
* (javascript en css mischien erbij nog :unsure:)

NOTES:
* css parser gemaakt (layout nog wel effe naar kijken, vandaag geen crea bui :()
* effe parser maken nog voor de voorbeeldshit mischien :unsure:
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan