Doelpubliek • Bedrijven • Verenigingen • Iedereen die reclame voor zijn bedrijf of product wenst te maken Fictieve tekst op de indexpagina.

Presentatie over: "Doelpubliek • Bedrijven • Verenigingen • Iedereen die reclame voor zijn bedrijf of product wenst te maken Fictieve tekst op de indexpagina."— Transcript van de presentatie:

1 Doelpubliek • Bedrijven • Verenigingen • Iedereen die reclame voor zijn bedrijf of product wenst te maken Fictieve tekst op de indexpagina

2 Inspiratie •Eerste inspiratie

3 Gebruikte programma’s •Macromedia Dreamweaver 2004 •Photoshop •dynamicdrive.com voor scriptsdynamicdrive.com •Jouwachternaam.nl voor FormMailJouwachternaam.nl

4 Mappenstructuur Eerste schema voor de navigatie van de website. Uiteindelijk heb ik deze nog kunnen vereenvoudigen tot 1 niveau

5 Schermresolutie •800px op 600px te groot •1024px op 768px past

6 •1152px op 864px Goed Schermresolutie •Laptop 1440px op 900px klein maar aanvaardbaar

7 Frames – Tabellen – Div’s •Tabellen: De achtergrondafbeeldingen staan in tabellen •Div: de grafische werken staan op layers om het aantal mappen en pagina’s te beperken •Frames: geen frames!!

8 CSS •Alle tekstopmaak staat in opmaak.css •Uitschuifbare navigatie staat in twee aparte scripts –ssm.js: Het script voor het uitschuiven van de navigatie –smmItems.js: de inhoud (links) van het uitschuifbare menu met de opmaak. Dit bestand zit er op twee verschillende niveaus in omdat de links niet identiek zijn.

9 Template •Er is 1 template gemaakt die op alle pagina’s is toegepast, uitgezonderd de indexpagina omdat de links van het uitschuifbare menu op de indexpagina op een ander niveau liggen dan de andere pagina’s •2 editable regions: de bovenste navigatie om makkelijk uit te breiden en de layers om gemakkelijk nieuwe werken toe te voegen

10 Klein medium •Omdat de website hoofdzakelijk grafisch is opgebouwd leent het zich niet goed voor kleine mediums. De uitschuifbare navigatie staat op een.js-script i.p.v. in de html pagina en kon dus niet op de manier omgezet worden zoals we in de cursus hebben geleerd met een aparte css-stijl. •Het is echter toch wel nuttig om informatie en contactgegevens te voorzien omdat dit fictieve bedrijf toch door andere bedrijven gevonden wil worden. Daarom het javascript op de index pagina dat PDA detecteert en door linkt naar een pagina met uitsluitend tekst.

11 •PHP of FormMail.pl? Ik heb gekozen voor FormMail omdat mijn Webhost geen PHP ondersteund voor het pakket dat ik heb. Nadeel: het gebeurt dat zoekmachines het emailadres uit de broncode genereren!! Om het probleem te minimaliseren heb ik het emailadres omgezet in decimale eenheden. Deze techniek is niet waterdicht maar beperkt de ‘zichtbaarheid’ van het emailadres toch enigszins. Contact Formulier

12 Problemen die ik tegen kwam •De eigenschappen van de layers heb ik niet in CSS opgenomen omdat deze verschillende afmetingen en posities hadden. De eigenschappen van de layers staan dus in de HTML van de bijbehorende pagina. •Het smmItems.js-script in Safari: –De achtergrond van de links uit het uitschuifbare hoort te verkleuren bij ‘mouse-over’. Bij Safari veranderde de achtergrondkleur van de website ook. –De grootte van het lettertype in het uitschuifbare menu is relatief. Op mijn laptop werd het uitschuifbare menu anders weergegeven. Puntgrootte in PUNTEN en PIXELS zetten werd niet geaccepteerd door dit script.

13 Kleuren UITEINDELIJK!!! koos ik voor neutraal blauw

14 •Mijn voorkeur gaat naar websites die horizontaal gecentreerd op het scherm staan maar in dit geval, met het uitschuifbare menu was dat geen optie. •Een voorbeeld van een eenvoudige website horizontaal gecentreerd (1 pagina in tabellen en layers ) Braziliaans Zomercarnaval Braziliaans Zomercarnaval Nota