Websites maken met HTML, CSS en Dreamweaver en zonder JAVA, of JAVA-script of Flash

Transcriptie

1 Websites maken met HTML, CSS en Dreamweaver en zonder JAVA, of JAVA-script of Flash INHOUDSOPGAVE Inleiding DEEL I: THEORIE Hoofdstuk 1: Richtlijnen Webstandaarden Voordelen Hoofdstuk 2: HTML De geschiedenis Hypertext Markup Language o Hypertext o Markup o Language XHTML HTML-elementen o Attributen o Vormgeving De HTML-pagina o Het DocType o Het element HTML o De head o De body Pagina 1 van 11

2 Hoofdstuk 3: CSS De geschiedenis Cascading Stylesheets o Stylesheets o Cascading De schrijfwijze o Stylesheet o CSS-regel o Kiezer o Eigenschap o Waarde o Declaratie o Commentaar Hoofdstuk 4: Dreamweaver Het programma o Dreamweaver op zicht De werkruimte o Het welkomstscherm o Een werkruimte kiezen o Het menu o Vensters en panelen Het documentvenster o Gedeelde modus o Werkbalk Gerelateerde bestanden o Werkbalk Document o Werkbalk Codering o Andere werkbalken o Tagkiezer o Codenavigator De panelen o Paneel Eigenschappen o Paneel Invoegen o PaneelCSS o Paneel Bestanden Sitebeheer o FTP Uw Dreamweaver o Voorkeuren o Extensies Pagina 2 van 11

3 DEEL II: OEFENEN Hoofdstuk 5: Sitebeheer Bestandsbeheer o Mappenstructuur o De map originelen o De lokale hoofdmap o Een werkmodel o Onderhoud o Paden Oefening 5.1- Een site maken in Dreamweaver Online bestandsbeheer o Subsites o De hoofdsite Hoofdstuk 6: Tekst Tekst in HTML o Tekst indelen o Tekst markeren o De volgorde van tekstelementen o Tekst uit Microsoft Word plaatsen van tekstelementen Tekst opmaken met CSS o Lettertype o Tekengrootte o Kiezers, eigenschappen en waarden Oefening 6.1- Werken met tekst o Sitebeheer o HTML-code invoeren o CSS toepassen o De site publiceren Oefening Tekst uit Word plaatsen o Tekst voorbereiden in Word o Dreamweaver-voorkeuren voor geplakte tekst Pagina 3 van 11

4 Hoofdstuk 7: Klassen, padding, margin en randen Klassen in HTML Elementen voor superscript en subscript Overzicht Klassen in CSS Pseudoklassen Pseudo-elementen Padding, margin en border Overzicht Oefening 7.1- Werken met klassen, padding, margin en border Hoofdstuk 8: Afbeeldingen en tekst Typen afbeeldingen o Resolutie o Bandbreedte Afbeeldingen in HTML o Het pad van afbeeldingen Afbeeldingen en CSS o Inline o Block-Ievel o Float o Clear Afbeeldingen in Dreamweaver o Beeld bewerken o Vergroten en verkleinen o Slim object Werken met Afbeeldingen en tekst o Oefening 8.1- Afbeeldingen en tekst o Oefening Tekst in kolommen Pagina 4 van 11

5 Hoofdstuk 9: CSS-Iay-outs CSS-Iay-out voorbereiden in HTML o Div o Span o Id o Commentaar o Conditional comment De lay-out in CSS o Float o Verschillende vormen van lay-out o De afmetingen van een website o Het boxmodel o Het erven van eigenschappen o Commentaar Een lay-out maken in Dreamweaver o Oefening 9.1- Een CSS-Iay-out maken o Oefening Liquid design o Oefening Elastic design o Oefening Doorlopende kolommen o Oefening De standaard-css-iay-outs in Dreamweaver o Oefening Spelen met span Hoofdstuk 10: Tabellen Tabellen in HTML o Kolommen o Cellen o Scope en caption o Tabel in een tabel Tabellen vormgeven met CSS o Breedte en hoogte o Randen o Samengestelde kiezers Tabellen maken in Dreamweaver o Oefening Een basistabel o Oefening Een uitgewerkte tabel Pagina 5 van 11

6 Hoofdstuk 11: Lijsten Genummerde en ongenummerde lijsten in HTML o Opbouw van een Lijst o Een lijst in een lijst o Definitielijst Lijsten opmaken met CSS o Problemen met de weergave van lijsten o Browserverschillen oplossen o Het opsommingsteken o Definitielijst Lijsten maken in Dreamweaver o Oefening 11.1-Werken met lijsten o Oefening Een achtergrondafbeelding als opsommingsteken o Oefening Een definitielijst Hoofdstuk 12: Menu Quirks-modus in HTML Positioneren met CSS o Display o Top, right, bottom en left o Position Een menu van lijstitems maken in Dreamweaver o Oefening Een horizontaal menu o Oefening Een verticaal menu o Oefening Een uitklapmenu o Oefening Spelen met span Pagina 6 van 11

7 Hoofdstuk 13: Lagen HTML valideren Lagen maken met CSS o Z-index o Overflow o Visibility Een elastic design in CSS met em o Padding en margin o Afbeeldingen o Achtergrond afbeeldingen Elastic design in Dreamweaver o Oefening Werken met lagen o Oefening Een elastic lay-out o Oefening De inhoud vormgeven o Oefening Valideren Hoofdstuk 14: Contact Formulieren in HTML o Form o Name en id o Input Tekstgebied o Lijst of menu o Label o Fieldset o Semantiek o Een formulier verwerken o De link o Nieuwsbrief Formulieren opmaken met CSS o Kiezer o Formulieritems Een formulier maken in Dreamweaver o Oefening Een formulier opmaken in HTML o Het formulier vormgeven met CSS o Het formulier verwerken met een script Pagina 7 van 11

8 Hoofdstuk 15: Sjablonen Een favicon maken o Een favicon plaatsen o Een favicon vervangen Stylesheet per mediatype o Print o Handheld Sjablonen in Dreamweaver o Afgeschermd gebied o Bewerkbaar gebied o Paginatitel, description en keywords o Head o Body o Tag-attribuut o Optioneel gebied o Herhalingsgebied o Afgeleide pagina's o Bestandsbeheer o Synchroniseren o Oefening Werken met sjablonen o Ingesloten sjabloon o Oefening Een sjabloon insluiten Pagina 8 van 11

9 DEEL 111: PRAKTIJK Hoofdstuk 16: Het ontwikkelen van een website Het projectplan Gebruiksvriendelijkheid Toegankelijkheid o Gebruikersstylesheets Ontwerpen o Het concept Het ontwerp o Functioneel ontwerp o Interaction Design o Storyboard o Visueel ontwerp o Kleur o Beeldmateriaal o Interne consistentie o Afmetingen De navigatie o Waar ben ik? o Waar kan ik naartoe? o Waar kom ik vandaan? o Waar ben ik geweest? o De knop Terug o De informatie van het menu o De indeling van het menu Van ontwerp naar bouw Tekst schrijven o Structuur o Hoeveelheid o Stijl o Controle Pagina 9 van 11

10 Hoofdstuk 17: Zoekmachineoptimalisatie De site optimaliseren voor zoekmachines Zoekwoorden gebruiken Zoekwoorden in de content o De inhoud van de tekst o Koppen o Tekstlinks o Intro o Afbeeldingen, Flash en JavaScript o Menu's o Rangschikking De head o Beschrijving o Zoekwoorden o De hoeveelheid informatie en de rangschikking De URL, dynamische sites en bestandsgrootte Pagerank Aanmelden Promotie o Statistieken o Google Adwords Pagina 10 van 11

11 Hoofdstuk 18: Contentmanagement Contentmanagementsysteem o Script o Webapplicatie o Gebruiksomgeving o Mogelijkheden van het CMS o Programmeren o Front-end Contentmanagement met Adobe Contribute o Beheer van webpagina's Adobe Contribute instellen o Verbindingsleutel Bestandsbeheer en Contribute Contribute en Dreamweaver Werken met Adobe Contribute o Pagina bewerken o Afbeeldingen bewerken o Tabellen o Snippets gebruiken en koppelingen toevoegen Adobe Incontext Editing Includes o Een included menu Conclusie Hoofdstuk 19: Veelgevraagde oplossingen CSS als oplossing voor HTML-vraagstukken Menu met achtergrondafbeeldingen Gepositioneerd menu Een elastic menu Een afbeelding als kop De koppeling van de actieve pagina markeren Een foto als achtergrond Een schuifbalk in de vormgeving Hotspots Pagina 11 van 11