Deel 1 Deel 2* zie ook versie CS5 - versie CS3

In deze leer je een professioneel ogende website maken volgens de huidige webstandaarden. Daarvoor moeten we ook leren werken met Dreamweaver (divs en CSS). Je website zal supersnel inladen en een zelfde resultaat geven in de verschillende browsers (Internet Explorer 6, 7, 8, Firefox 2, 3, Chrome, Opera, Safari, ...).

Inhoudsopgave

• Hoe zit een website in mekaar?
    > Hoe maak je een website volgens de huidige webstandaarden? Werk via divs in XHTML, CSS en Fireworks.
• Het browserprobleem
    > Welke problemen kan je hebben wanneer een website getoond wordt in verschillende browsers (internet explorer, firefox, chrome, safari, opera, mozilla, netscape, enz)
• Werken met XHTML
    > Hoe kan je van HTML overgaan naar XHTML. Aan welke regels moet je je houden?
• Divs - Layers
    > Hoe maak je divs in Dreamweaver? Wat is het verschil tussen een div en een layer?
• Wat is CSS?
    > Waar staat CSS voor? Waarom heb je het nodig bij het maken van een website?
• Een CSS-bestand maken
    > Hoe maak je een nieuw css-bestand?
• CSS bewerken - koppelen en hergebruiken
    > Hoe kan je de CSS bewerken? Hoe koppel je het met een nieuwe pagina? Hoe kan je bestaande CSS herbruiken?
• Klassen en id's
    > Wat zijn klassen en id's in CSS?
• Hyperlinks in CSS
    > Hoe wijzig je de opmaak van hyperlinks in CSS?
• Van tabellen tot layers
    > Hoe zet je een bestaande website om van tabellen naar layers/divs?
• Layers combineren met CSS
    > Hoe combineer je divs met CSS?
• Absolute plaatsing (divs)
    > Hoe kan je divs absoluut plaatsen in Dreamweaver CS4?
• Relatieve plaatsing (divs)
    > Hoe kan je divs relatief plaatsen in Dreamweaver CS4?
• Een praktisch voorbeeld
    > Oefening Lorem Ipsum. Hoe kan je divs positioneren via CSS in Dreamweaver?
• Het browserprobleem
    > Wat is nu precies het probleem bij browsers? Waarom krijg je verschillende resultaten?
• Een laatste probleem: de wrapper
    > Wat is een wrapper? Waarom moet je deze extra div aanmaken?
• Een lay-out maken in Fireworks en deze afstemmen op layers
    > Hoe kan je een lay-out maken in Fireworks en deze omzetten naar absolute/relatieve divs in Dreamweaver?
• Fireworks: de hoofding
    > Hoe maak je een hoofding in fireworks cs4?
• Fireworks: de herhalende lay-out
    > Hoe maak je een herhalende lay-out in Fireworks? Hoe werk je met slices/segmenten?
• De alternatieve lay-out
    > Wat is een alternatieve lay-out?
• Enkele weblay-outs onder de loep
    > We bekijken enkele bestaande websites en bestuderen hun opbouw.
• Menu’s maken via layers en CSS
    > Hoe kan je navigaties maken in CSS en divs?
• Formulieren weergeven met CSS
    > Hoe kan je een formulier juist weergeven in CSS?
• Een printvriendelijke website
    > Hoe maak je een printvriendelijke site via CSS?
• Een website vergelijken in verschillende browsers
    > Hoe kan je zien hoe je site eruit zien in verschillende browsers (internet explorer, firefox, chrome, safari, enz)?
• STAPPENPLAN: een website maken met absoluut gepositioneerde divs
    > Hoe kan je een website maken met absoluut gepositioneerde divs?
• STAPPENPLAN: een website maken met relatief gepositioneerde divs
    > Hoe kan je een website maken met divs die relatief gepositioneerd zijn (gecentreerde divs met wrapper en container)
• Een menu in CSS
    > Hoe maak je een geavanceerd rollover menu in CSS?

 

Is dit iets voor jou?

Dit leer je maken:

Voorbeeldhoofdstuk

Oefeningen

• Oefeningen

129 A4-bladzijden

deel 1: vectorieel tekenen, bitmaps bewerken en segmenteren

Ook voor Mac-gebruikers

conform het leerplan dat gehanteerd
wordt in het Volwassenenonderwijs

---

Download

• Download een probeerversie
  (30 dagen gratis)

---

Gerelateerde cursussen

• Dreamweaver
• Drupal Templates
• Joomla Templates
• Wordpress Templates

---

Gebruik in schoolverband

• U kan deze cursus ook aanschaffen voor uw studenten.

---

Verwante tutorials

• Hoe ziet mijn site eruit in andere browsers?
• Een eigen Favicon maken
• 25 zonden bij webdesign
• Van concept tot realisatie: de fruitshop
• Fireworks versus Photoshop: maak je eigen weblay-out
• Lorem Pixum: de Ipsum van de afbeeldingen
• Gepersonaliseerde en verkorte urls bij bit.ly
• Gratis figuren, iconen en texturen
• Google Analytics Real-Time
• Hoe bekom je een snelle website?
• Hoe worden websites gehackt?
• Conversie
• Maak je eigen 404-foutpagina
• Webdesign Trends voor 2012

---

Webhosting

Krijg als lid van zelfstudie.be 10% korting op webhosting bij zelfhosting.com!