|
|
||||
|
|
||||
|
|
||||
|
|
||||
 |
CASCADING STYLE SHEETS Cascading staat voor waterval (Eng: cascade). Style staat voor opmaakstijl of opmaakprofiel. Sheet is blad. Inderdaad, met een beetje goede wil kan de vergelijking met een waterval gemaakt worden. Als je de opmaak van de body instelt op bvb letterkleur 'grijs', dan zal dit effect hebben op H1 (kop1) en H2 (kop2),... Deze H1, H2 zijn namelijk onderdeel van de body. Je zou kunnen voorstellen dat het grijze water van boven komt en de onderliggende gedeelten mee kleurt. Je kan dit wijzigen natuurlijk, maar dan moet je dit specifiek opgeven (zie figuren). Automatisch zal alles wat je instelt op een hoger niveau, doorgegeven worden aan een lager niveau, net zoals het water dat van boven komt vloeit over de lager gelegen gedeelten en de opmaak meeneemt. Hieronder een voorbeeld: aan het grijs wordt niet geraakt en dit blijft dus van toepassing. Enkel de lettergrootte heeft men verschillend ingesteld.
Hier wijzigt men ook de kleur bij H2 die standaard op grijs stond, maar nu heringesteld werd naar groen. Er zijn twee werkwijzen om tekst, alinea's, opsommingstekens, figuren,... een opmaak te geven: 1) Via opmaak knoppenbalk of Opmaak à Lettertype Dit is opgemaakte tekst
Dit levert volgende code op: Deze code bevat in-line CSS (in dezelfde regel), te herkennen aan het style gedeelte, de rest is html. 2) Via een opmaakprofiel. Opmaak à opmaakprofiel à nieuw en daarna het profiel toepassen op de selectie.
Dit is opgemaakte tekst Dit levert volgende CSS 'style' code op in het head gedeelte: In het body gedeelte wordt het profiel
op de selectie toegepast:
Een groot voordeel van CSS bestaat erin dat het style gedeelte als apart bestand kan gekoppeld worden. Zo kan je bij wijzigen van het bron bestandje alle pagina's in één keer aanpassen.... Bewaar het style gedeelte als bvb opmaak.css en link de pagina's met de wizard (Opmaak à Koppelen in het opmaakmodel ): of schrijf de code: De opmaak via de opmaakprofielen (CSS) geeft soms meer mogelijkheden dan met de gewone instellingen: 1) Achtergrondfiguur verticaal of horizontaal herhalend Via opmaakprofiel à Nieuw à Opmaak à randen en arcering:
kan men een webpagina bvb volgend uitzicht geven:
2) Hyperlinks animeren Dit is een link met aanwijseffect
Vb van de css code 'link' is de gewone kijkstand, 'hover' de aanwijsstand, 'active' het uitzicht tijdens het klikken en 'visited' kleurt de laatst gebruikte link. 3) Verschillende randen zetten aan dezelfde figuur. Via onderstaand dialoogvenster kan men per richting een andere rand zetten...
Frontpage genereert de CSS code.
Soms is het nodig om rechtstreeks in de CSS code te schrijven omdat er (nog) geen Frontpage dialoogvensters zijn om de instellingen te verkrijgen. 1) schuifbalken Het is mogelijk om de saaie schuifbalken op te smukken met je eigen kleuren... De film horend bij dit onderwerp toont u hoe je dit doet. Deze pagina heeft volgende instellingen...
Een schuifbalk heeft volgende onderdelen.... 2) display: block Merk op dat de hyperlinks actief worden vanaf het ogenblik dat op dezelfde hoogte van de link wordt gekomen met de muis. 3) first-letter en first-line
CSS heeft nog veel meer mogelijkheden... die echter buiten deze cursus vallen.
|
Stel in met de wizard.
