Ontwerpen met webstandaarden

1
CSS cascading stylesheets

• Ontwerpen met webstandaarden

2
Wat is een cascading stylesheet?

• Opmaakinstructie (stijl), gescheiden van content
• Cascading Trapsgewijs opmaakmodel
• de laatstgekregen instructie overruled de vorige,
  nakomelingen erven eigenschappen van (voor)ouders
• Voorbij de beperkingen van HTML
• Toepassen kan op 3 manieren extern, embedded,
  inline
• Oefening embedded stijl bekijken en wijzigen,
  inline stijl bekijken

3
Beperkingen van HTML

• Niet uniform cross-platform (bijv. Font-size)
• Interlinie, spatiering, fontgrootte, stijl van
  links
• Images, bijv. niet clipbaar
• Positionering via geneste tabellen en trans.gifs
• Border-mogelijkheden zeer beperkt
• Oefening wijzig van p de interlinie,
• Wijzig van h1 fontgrootte, spatiering, border
• Maak een bijpassende unordered list-stijl
  (ul)(zo simpel mogelijk!)

4
Waarom stylesheets?

• Design scheiden van content via een extern css
  is de hele site snel aanpasbaar
• Zelfde site, andere css (media print of
  handheld)
• Structured text semantiek SEO database
• Toegankelijkheid
• Webstandaard, cross-platform, cross-browser
• Meer controle over het ontwerp, voorheen
  onmogelijk in HTML
• Oefening externe CSS in Dreamweaveraanroepen en
  marges en kleuren aanpassen

5
Wat is de syntax?

• H1, h2, h3, h4 font-size 175 text-transform
  uppercase color yellow
• H1 is de selector en zijn properties staan tussen
  
• Oefening tik deze code in
• maak de h1 groter

6
Mogelijke selectors

• Alle html-tags h1, p, body, etcetera
• Een custom class of een
  unieke id in de css .menu
  uniek in de html ltp classmenugt ltp
  iduniekgt
• pseudo-class (bijv. links) alink,
  ahover (let op de volgorde link, visited,
  hover, active)
• Combinaties, zoals h4 ul uluniek li
  a.menulink
• Oefening links zonder onderstreping, met
  hover-effect

7
En hoezo geen tabellen?

• Traag
• Excessief gebruik van trans.gif
• Drama qua onderhoud
• Bedoeld voor tabulaire data (schemaatjes)
• Maar wat dan?

8
CSS-positioning

• Tabellen zijn niet meer nodig om te positioneren
• Spacer-gifs ook niet
• Oefening bekijk oefening4_3coldemo.html en pas
  m hier en daar aan. (Go to Code in Dreamweaver)
• Bekijk dan oefening4_3coldemo2.html
• Bekijk thenoodleincident.com

9
Zijn er ook nadelen?

• Verschillen in browsers (bijv. met meerkoloms)Op
  te lossen met truukjes en hacks
• Oude browsers (IE4 etc) ondersteunen cssslecht
  of niet
• Moeilijker te leren en toe te passen dan HTML
• Wysiwyg editors previewen (nog) niet perfect

10
Tips

• Groeperen h1, h2, h2 ul, p.special
• Fontgrootte in (of em) zorgt dat IE/win kan
  schalen. Let wel op overerven!
• Numerieke interlinie werkt het best 85/1.5
• Shorthand voorbeeld font bold italic
  small-caps 28px/1.5 Arial, "Lucida Console"
• Shorthand margin/padding/border (clockwise)
  margin 0, 10, 0, 10px (Top Right Bottom Left)
  margin 0, 10 (TB, RL)
• Display block, inline, list-item, none

11
Handige sites

• csszengarden.com
• sitepoint.com (o.a. het boek)
• alistapart.com
• thenoodleincident.com (bijv. 3-koloms-layout)
• glish.com (bijv. dynamische menu's)
• hotscripts.com (sniffer scripts)
• positioniseverything.net (bugs en css)
• w3.org css validator
• handleidinghtml.nl, blooberry.com(reference)

12
(No Transcript)