MENU
 
Home
Nieuwsbrief
GC in de media
SiteMap
 
Tips en Tricks
Excel
Word
Photoshop
PowerPoint
Surf Tips
Gmail
Android
iPad
Excel ClipTips
 
cursus Office 2016
Access
Excel
Outlook
PowerPoint
Word
 
cursus Office 2013
Excel
PowerPoint
Word
Nieuw in Excel 2013
Nieuw in Word 2013
Nieuw in PowerPoint 2013
 
cursus Office 2010
Access
Nieuw in Excel 2010
Excel automatiseren
Excel
OneNote
Outlook
PowerPoint
Word
 
cursus Office 2007
Access
Excel
Outlook
PowerPoint
Publisher
Visio
Word
 
cursus Office
2000-2002-2003-XP
Access
Excel
PowerPoint
Outlook
Word
 
cursus Photoshop
CC -3D
Animatie
CS6
CS5
CS4
CS2 - CS3
Lightroom 3
Elements 6
Mask Pro
Nik Collection
 
cursus Dreamweaver
CS3
 
cursus Illustrator
CS4
 
cursus Flash
CS4
 
cursus Fireworks
CS4
 
cursus Paint Shop Pro
X en X2
 
cursus Premiere
Elements 7-8
 
cursus Joomla
Joomla 1.5
 
Sociale Netwerk sites
Facebook
LinkedIn
Twitter
 
iPad
Apps
 
Diversen
Celtx
CSS
DropBox
Firefox 3.6
GIMP
Internet Explorer 9
LIME
Linux
OpenSUZE
PREZI
ProShow Producer
YouTube
 
cursus Google
Agenda
Analytics
Gmail
Zoeken
Picasa 3
SketchUp
Chrome
Street View
 
cursus Windows
Live Movie Maker
Windows 10
Windows 8
Windows 7
XP
Vista
 
cursus Office '97
Word
Excel
 
 

 

Cursus Dreamweaver   Index - vorige - volgende
       
Les 19 CSS (Cascading Style Sheets) (1)  
     
Wat is CSS?
CSS zijn een aantal opmaakregels, die het uiterlijk van een webpagina bepalen.

Wanneer we CSS-stijlen gebruiken voor de opmaak van onze pagina, wordt de inhoud van de pagina gescheiden van de opmaak van de pagina.
De inhoud van onze pagina, dat zijn de teksten, afbeeldingen, tabellen, formulieren, etc..., bevindt zich in de HTML-code, terwijl de CSS-regels zich bevinden in een ander bestand (extern), of in een ander deel (meestal het bovenste deel) van de HTML-code (intern).

Je kunt ook beide gebruiken, zowel intern als extern.
Mocht om één of andere reden beide CSS-styles met elkaar in conflict komen, bijvoorbeeld de interne style sheet zegt dat de achtergrondkleur groen moet zijn, en de externe style sheet zegt dat de achtergrondkleur geel moet zijn, dan zal de interne style sheet worden toegepast.

 

Het gebruiken van CSS-regels geeft ons twee voordelen:

  1. je hoeft niet steeds elke wijziging die je aanbrengt aan het uiterlijk van een pagina, te herhalen voor elke pagina. Althans toch niet wanneer je met externe CSS werkt.
  2. het scheiden van de inhoud van de pagina met de opmaak van de pagina geeft een meer eenvoudige HTML-code, hetgeen dan weer leidt tot kortere laadtijden in de browser.
 
Door gebruik te maken van CSS-regels hebben we controle over een (groot) aantal teksteigenschappen, achtergrondkleuren, kleur van koppelingen, positionering van elementen, en nog veel meer
 
Het is onmogelijk alle mogelijkheden van CSS in deze cursus te bespreken, maar toch zal deze cursus je al een heel eind op weg helpen.
Voor diegenen onder jullie die meer willen weten over CSS-styles kunnen misschien eens Googelen naar dit onderwerp.
 
Interne CSS      

Om een pagina te voorzien van interne CSS open je eerst deze pagina.
Klik "Wijzigen" in de menubalk, en kies "Pagina-eigenschappen" in het drop-downmenu.
Dit opent het Pagina-eigenschappen dialoogvenster.
Aan de linkerzijde van het dialoogvenster hebben we verschillende categorieën, en aan de rechterzijde hebben we de instellingen voor de aan de linkerzijde geselecteerde categorie.

Zo hebben we in de categorie "Weergave" de instelling voor het te gebruiken lettertype op deze pagina, de tekstkleur, de tekstgrootte etc.
We hebben de categorie "Koppelingen" waar we de instellingen voor de weergave van de koppelingen ingeven.

We hebbende categorie "Koppen", waar we de instellingen voor de weergave van de gebruikte koppen in deze pagina wijzigen.

Mocht je niet meer weten wat de "Koppen" zijn, wel die vind je in het "Eigenschappenvenster" onder het vak "Formaat".

Dus door de categorie "Koppen" te kiezen, kunnen we de standaardinstellingen van deze verschillende koppen wijzigen.

De twee overige categorieën hebben weinig te maken met de opmaak van uw pagina. Het enige wat ik hierover kwijt wil is dat de categorie "Titel/Codering" te maken heeft met het documentcoderingstype, en dat de categorie "Overtrekafbeelding" gebruikt wordt wanneer je een afbeelding wenst te gebruiken als richtlijn bij het ontwerpen van je pagina.

We gaan verder met de categorie "Weergave".
In het bovenste vak kies je door te klikken op het naar benedenwijzend pijltje, het te gebruiken lettertype voor deze pagina. In dit geval kies ik voor het lettertype Verdana. Als grootte kies ik 12 pixels, voor de tekstkleur kies ik blauw. En voor de achtergrondkleur kies ik een kakikleurtje.
Je kan deze kleuren aanpassen door op de kleurkiezer te klikken, of door de HEX-code, dit is een Internetkleurcode, in te typen in het invulvak. Typ voor de kleurcode een hekje (#), zo voorkom je problemen in sommige Browsers.
Klik de knop OK wanneer je klaar bent.

 

Met dit allemaal ingesteld gaan we eens kijken wat dit heeft toegevoegd in de HTML-code van deze pagina. Selecteer hiervoor het tabblad "Code" voor de weergave van je document.

Zoals je kunt zien in onderstaande afbeelding, is er bovenaan de pagina een interne CSS-Style toegevoegd, waarin de vier zojuist ingegeven instellingen zijn opgenomen.

Een CSS-style wordt ingedeeld volgens CSS-Regels, of een samenstelling van verschillende Regels. Meer over CSS-regels in de volgende les.

 
Wanneer we de weergave van ons document terug wijzigen naar "Ontwerp", zien we het volgende:
de achtergrondkleur heeft een kakikleurtje, de tekst is Verdana, 12 pixels groot, en de kleur is blauw.
 

Nu gaan we eens kijken wat we kunnen doen met de categorie "Koppelingen".
Open opnieuw het dialoogvenster "Pagina-eigenschappen", en kies de categorie "Koppelingen".
In het bovenste vak kunnen we eventueel het lettertype voor de koppelingen wijzigen.
In het tweede vak kunnen we de grootte aanpassen.
En we hebben de kleurvakken "Kleur van koppeling", "Bezochte koppelingen", "Koppelingen die worden aangewezen", en het vak "Actieve koppelingen".

Het eerste, "Kleur van koppeling", bepaald de kleur van de koppeling.
Het tweede, "Bezochte koppelingen", bepaald de kleur van de koppeling die reeds is geklikt door de bezoeker.
De derde "Koppelingen die worden aangewezen", bepaald de kleur van de koppeling bij rollover.
En de vierde "Actieve koppelingen", bepaald de kleur van de koppeling wanneer de bezoeker zich op deze pagina bevindt.

En in het laatste vak "Onderstrepingsstijl" bepalen we hoe en wanneer we de koppeling willen onderstrepen. Standaard staat deze ingesteld op "Altijd onderstrepen", maar we hebben ook de mogelijkheid onze koppelingen "Nooit te onderstrepen", "Alleen te onderstrepen bij rollover", of de onderstreep te verbergen bij rollover.

Klik OK wanneer je klaar bent.

Wanneer we terug een kijkje nemen in de broncode van ons document, zien we dat de CSS-style is aangepast.
De vier zojuist ingestelde regels zijn toegevoegd aan de CSS-style.
a:link, a:visited, a:hover, a:active.
 
Wanneer we de pagina bekijken in onze Browser, klik hiervoor de F12 toets op je toetsenbord, zie je de verschillende zojuist aangemaakte CSS-styles in werking.
 

Wanneer we één of meer stijlen willen aanpassen, hebben we hiervoor verschillende mogelijkheden.
De eerste is terug het dialoogvenster "Pagina-eigenschappen" te openen.
De tweede manier is de eigenschappen te wijzigen in de broncode van je document.

En de derde manier is het CSS-paneel te openen, en het tabblad CSS-stijlen te kiezen.
Onder het tabblad "Alles" de stijl te selecteren, en in het deel "Eigenschappen voor **** " deze te wijzigen. Maar meer hierover in de volgende lessen.

 
 
Index - vorige - volgende

copyright © 2012 - gratiscursus.be