Doelpubliek

• Bedrijven

• Verenigingen

• Iedereen die reclame voor zijn bedrijf of product wenst te makenFictieve tekst op de indexpagina

Inspiratie

• Eerste inspiratie

Gebruikte programma’s

• Macromedia Dreamweaver 2004• Photoshop • dynamicdrive.com voor scripts• Jouwachternaam.nl voor FormMail

Mappenstructuur

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

Schermresolutie

• 800px op 600pxte groot

• 1024px op 768pxpast

• 1152px op 864pxGoed

Schermresolutie

• Laptop 1440px op 900pxklein maar aanvaardbaar

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!!

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.

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

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.

• 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

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.

Kleuren

UITEINDELIJK!!!koos ik voor neutraal blauw

• 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

Nota