ࡱ > ] _ \ ` jbjb *2 d d w d 8 D X $ d N : ( M M M M M M M , P R R M M f M f f f P M f 4 B " M f f 2 eJ M | pu : , 0L . M M 0 N ^L * S f S \ M f d d $ d d Beeldmateriaal Beeldmateriaal bewaren voor het web Dit gaat het makkelijkst en het best in het grafische programma Photoshop. Het kan ook in andere programmas. Bekijk de resolutie via Afbeelding > Afbeeldingsgrootte. De resolutie moet 72 dpi zijn. Om te resampelen vink je nieuwe beeldpixels berekenen aan. Resample alleen omlaag, omhoog heeft geen zin. In het paneel kan je meteen zien hoe groot het beeld wordt in centimeters. Oefen dit met foto.jpg. Bewaar als foto2.jpg Calibreren Zorg dat je monitor gecalibreerd is, bijvoorbeeld via het Adobe Gamma paneel in Start > instellingen >configuratie (op Windows). Doorgaans zijn pcs altijd donkerder dan Macs. Voor Mac-gebruikers is er gamma-toggle HYPERLINK "http://www.thankyouware.com/gammatoggle.html" http://www.thankyouware.com/gammatoggle.html Mac-gebruikers calibreren via het regelpaneel monitors. Bestandsformaten Op het web zijn de belangrijkste twee bestandsfromaten voor beeld: jpg en gif. Jpg: miljoenen kleuren, lossy compressie. Gif: max 256 kleuren, transparantie (op 1 kleur), lossless compressie, animatie mogelijk. Png (spreek uit ping) heeft ook een bewegende variant mng (ming) Met alpha-kanaal, dus volledige transparantie, lossless compressie, miljoenen kleuren. Maar het wordt nog niet door alle browsers volledig ondersteund. Een opkomend formaat is SVG, scalable vector graphic. Lijkt een beetje op Flash. Oneindig schaalbaar, want vector-formaat. PDF is ook een vector-formaat, dat gebruik je om opgemaakt drukwerk zoals folders, boeken, manuals of zelfs word-documenten op het web aan te bieden. Je kunt er op inzoomen, je kunt het printen, het is zeer compact qua bestandsgrootte. Je kunt er ook via links snel in navigeren. Fotos: jpeg Fotos bevatten miljoenen kleuren en kun je daarom het best bewaren in het jpg-formaat. Kies in Photoshop Bestand > Opslaan voor web. Bekijk alle opties uitgebreid. Oefen met foto.jpg. Maak de bestandsgrootte zo klein mogelijk. Behoud je originele beeld ook, want elke keer bewaren verslechtert de kwaliteit bij jpg. Logos en ander grafisch materiaal: gif Als er niet veel kleuren nodig zijn, zoals bij veel logos, dan kies je gif. Voordeel hierbij is de losless compressie, en de transparante kleur (alhoewel dat maar 1 kleur kan zijn, en niet een heel alpha-kanaal). Kies in Photoshop Bestand > Opslaan voor web. Bekijk alle opties uitgebreid. Oefen met je eigen logo, tekening of met het IDEA-logo. Zet nu al je beelden om met Photoshop en bewaar het in een nieuwe map genaamd: ima in je websitefolder. Plaats het beeldmateriaal in Dreamweaver Nu kun je nu het beeld (behalve de beeldgalerie; dit komt later) inplakken in Dreamweaver. Vergeet niet de alt-tag overal in te vullen, desnoods leeg: alt= Clickable imagemap: hotspots Je kan in een plaatje hotspots aangeven: clickable areas. Zo kan je bijvoorbeeld in een site die ontworpen is in Photoshop verschillende onderdelen clickable maken. Probeer het uit met imagemap.jpg. Maak eerst een nieuw document en save die. Beeldmateriaal en stylesheets Met stylesheets heb je betere controle over hoe plaatjes eruit zien. Bijvoorbeeld de borders voor alle plaatjes tegelijk: Img {border: 1px solid black;} Zo kun je ook de border op 0 zetten als veel van je plaatjes links zijn (die krijgen namelijk in Explorer standaard een blauwe border) Tip: Text-wrap om een plaatje heen: .leftimg {float:left; margin 0px 20px 5px 0px} In de html roep je deze stijl zo aan: Probeer het met het plaatje foto.jpg Tip: zet al je plaatjes in een DIV en geef die zo een border: #album img {1px solid black} Dan hoef je niet de class toe te voegen aan alle plaatjes, en alle plaatjes die in de