Thuis
Contacten

    Hoofdpagina


Webdesign 7

Dovnload 9.6 Kb.

Webdesign 7



Datum31.10.2018
Grootte9.6 Kb.

Dovnload 9.6 Kb.

Webdesign 7 | CSS

Aart Jan Bergshoeff

Dit is het vervolg op les 6. We gaan oefenen met CSS-positioning.

Met behulp van CSS kun je ook kolommen maken, en items exact positioneren, zonder tabellen en trans-gifjes te hoeven gebruiken.

Tabellen maken een site trager, maken de code minder overzichtelijk en daardoor slechter aanpasbaar / overdraagbaar.



Window > css styles


Dit toont de stijlen van het open document. Dubbelklik eventueel hier op een stijl-hoofdgroep om de code te openen en direct te bekijken/editen.

Rechts-klik per stijl om die te editen.



Window > tag inspector > tabblad relevant css


Hier kun je makkelijker de stijl definieren en veranderen. Als je in het Preview-venster iets aanklikt, springt-ie hier (meestal) meteen naar de gebruikte stijl. Sorteer de stijlen via de ikoontjes op categorie of alfabetisch.

Klap categorieen open of dicht.



Maak een linker en rechter marge via een Div-tag met een id


Open les5start.htm. Selecteer alles in de Preview: Ctrl-A.

Zet er DIV-tags omheen en hang daar een style aan.



Dat kan via een class:
maar handiger hier is via een uniek id


Een class in het stylesheet wordt voorafgegaan door een punt: .kolom {}

En een unieke id wordt voorafgegaan door een hekje: #kolom {}

Insert > layout objects >Div tag > tik bij id: kolom.

(wrap around selection is ook aan)
Maak nu een stijl aan via het +ikoontje in het stijlenpalet.

Kies “advanced” , tik bij selector “#kolom” en define in “this document”.

Kies bij Box een linker- en rechtermarge van 20% (vink Same for all uit)

Save en preview. Probeer verschillende venster-groottes.



3 koloms-layout


Oefening: bekijk oefening4_3coldemo.html en pas ‘m hier en daar aan.

Pas het direct aan in het geopende stylesheet, of in de tag inspector.


Bekijk dan oefening4_3coldemo2.html

Lees in de comments inde code over de hack voor IE5/win


Wil je andere indelingen gebruik dan gewoon voorbeeldcode die je vind op:

http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

Een linkmenu (navigation bar) maken


Hiervoor volgen we een van de vele tutorials die in de Dreamweaver Help zitten.

Help > getting started and tutorials > Tutorial: Linking and Previewing Pages.

We volgen deze tutorial vanaf stap 10.

Maak site aan


Maak een site aan via Site > Manage sites > New > Site.

Kies tabblad Advanced om alles in 1 schermpje te doen.

Geef een naam aan je site bijv. Les7 en kies als local root folder jouw eigen folder en dan 3-link.

Tutorial volgen vanaf stap 10


In de vorige tutorials zijn al 2 pagina’s gemaakt.

Open index.htm en news.htm



Volg de tutorial vanaf stap 10.


Webdesign Les 7 | docent: Aart Jan Bergshoeff | IDEA Soest 2004 Pag. van

  • Window > css styles
  • Maak een linker en rechter marge via een Div-tag met een id
  • 3 koloms-layout
  • Een linkmenu (navigation bar) maken
  • Tutorial volgen vanaf stap 10

  • Dovnload 9.6 Kb.