Studio Webdesign 4 Pro - Brownie Camera
Studio Webdesign 4 Pro - Brownie Camera
Studio Webdesign 4 Pro - Brownie Camera
You also want an ePaper? Increase the reach of your titles
YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.
Handleiding<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4<br />
<strong>Pro</strong>
Copyrights © Copyrights 2008 Serif (Europe) Ltd, alle Serif-producten en afgeleiden zijn<br />
eigendom van Serif (Europe) Ltd. Microsoft, Windows, en het Windows logo<br />
zijn geregistreerde handelsmerken van Microsoft Corporation. Alle rechten<br />
voorbehouden.<br />
© 2008 Easy Computing<br />
1ste druk 2008<br />
Uitgever<br />
Website<br />
<strong>Pro</strong>ductmanagement<br />
Vormgeving<br />
Easy Computing Publishing n.v.<br />
Horzelstraat 100<br />
1180 Brussel<br />
Easy Computing b.v.<br />
Jansweg 40<br />
2011 KN Haarlem<br />
www.easycomputing.com<br />
Stefaan Hendrickx<br />
Phaedra creative communications, Westerlo<br />
ISBN 9789045644240<br />
NUR 043<br />
Wettelijk Depot D/2008/6786/71<br />
Alle rechten voorbehouden. Zonder voorafgaande schriftelijke toestemming van<br />
Easy Computing mag niets van deze uitgave worden verveelvoudigd, bewerkt en/<br />
of openbaar gemaakt door middel van druk, fotokopie, microfilm, magnetische<br />
media of op welke andere wijze dan ook.
Belangrijke opmerking<br />
De methodes en programma’s in deze handleiding worden zonder inachtneming van enige patenten vermeld.<br />
Ze dienen enkel voor amateur- en studiedoeleinden.<br />
Alle technische gegevens en programma’s in dit boek werden door de auteurs met de grootste zorgvuldigheid<br />
samengesteld en na een grondige controle gereproduceerd. Toch zijn fouten niet volledig uit te sluiten.<br />
Easy Computing ziet zich daarom gedwongen erop te wijzen dat ze noch enige garantie, noch enige juridische<br />
verantwoordelijkheid of welke vorm van aansprakelijkheid dan ook op zich kan nemen voor gevolgen<br />
die voortvloeien uit foutieve informatie. Het melden van eventuele fouten wordt door de auteurs altijd op<br />
prijs gesteld.<br />
Wij willen u erop wijzen dat de soft- en hardwarebenamingen die in dit boek worden vermeld, evenals de<br />
merknamen van de betreffende firma’s over het algemeen door fabrieksmerken, handelsmerken of door het<br />
patentrecht zijn beschermd.<br />
Easy Computing TECHNICAL SUPPORT<br />
Om te kunnen genieten van Technical Support dient u zich zo snel mogelijk te registreren.<br />
Dit kunt u doen tijdens de installatie van het programma (On-line via internet of Off-line via fax/post).<br />
SNEL, GRATIS en 24 UUR/dag support via Internet<br />
http://www.easycomputing.com/nl/support/<br />
Indien u geen internetverbinding heeft, dan kunt u contact opnemen<br />
met onze technische dienst per post of per fax.<br />
België: Easy Computing Nederland: Easy Computing<br />
Technical Support<br />
Technical Support<br />
Horzelstraat 100<br />
Jansweg 40<br />
1180 Brussel<br />
2011 KN Haarlem<br />
fax: 02/ 346 01 20<br />
fax: 023/ 542 08 36<br />
Meer dan 90% van de meest gestelde vragen en bekende problemen worden 24 uur per dag<br />
op de support-pagina’s van onze website beantwoord en/of opgelost (www.easycomputing.com).<br />
Voor technische vragen die nog niet op onze website worden beantwoord,<br />
kunt u een supportformulier invullen (te vinden op de support-pagina’s van onze website).<br />
Het antwoord op uw vraag volgt snel.
inhoud<br />
1 Welkom bij <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>! 13<br />
Nieuw in <strong>Studio</strong> <strong>Webdesign</strong>... 14<br />
Het programma installeren 17<br />
2 Basisbeginselen 19<br />
Over websites 19<br />
Wat komt er zoal kijken bij het ontwerpen van een website? 19<br />
Wat is een website? 19<br />
Wat hebt u nodig om een voorbeeld te bekijken van uw site of deze te publiceren? 20<br />
Over HTML 20<br />
De startpagina van het programma 21<br />
Opties op de startpagina 21<br />
Een website maken op basis van een sjabloon 22<br />
Een bestaande website openen 24<br />
Ontbrekende lettertypen vervangen 25<br />
Een volledig nieuwe website maken 25<br />
Met meerdere sites werken 25<br />
Uw project opslaan 26<br />
3 Sites en pagina’s ontwikkelen 27<br />
Over sitestructuur en navigatiehulpmiddelen 27<br />
Structuur van de site 27<br />
Navigatiehulpmiddelen 29<br />
Pagina’s versus stramienpagina’s 30<br />
Pagina’s weergeven 32<br />
Van pagina wisselen 33<br />
Pagina’s toevoegen, verwijderen en de volgorde ervan wijzigen 35<br />
De volgorde van pagina’s wijzigen 38<br />
Stramienpagina’s toewijzen 39<br />
Met frames werken 39<br />
Absolute URL’s 41<br />
De lay-outhulpmiddelen gebruiken 42<br />
Met de linialen werken 43<br />
De linialen als meetlat gebruiken 44<br />
Kleverige hulplijnen 45<br />
Het puntraster gebruiken 46<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 5
Thema-afbeeldingen toevoegen en bewerken 47<br />
De galerij gebruiken 50<br />
Site-eigenschappen instellen 52<br />
De standaard bestandsextensie instellen 53<br />
De paginagrootte en het type uitlijning instellen 54<br />
Auteurs- en copyrightinformatie opgeven 55<br />
De projecteigenschappen weergeven en/of wijzigen 55<br />
Een pictogram instellen voor de lijst met Favorieten 55<br />
Uitvoeropties instellen 56<br />
Gebruikersstatistieken bijhouden 57<br />
Een absolute URL instellen 59<br />
Pagina-eigenschappen instellen 60<br />
Pagina-eigenschappen instellen via Sitebeheer 62<br />
Sitebeheer gebruiken 63<br />
Toegangscontrole 65<br />
Eenvoudige toegangscontrole 66<br />
Geavanceerde toegangscontrole 69<br />
Gebruikers toevoegen aan een groep 71<br />
Gebruikers de mogelijkheid bieden zich te registreren 74<br />
Uw site optimaliseren voor zoekmachines 75<br />
Metatags gebruiken 76<br />
Voorkomen dat pagina’s worden geïndexeerd (Robots-metatags) 77<br />
Pagina’s van het indexeringsproces uitsluiten (Robots-bestand) 78<br />
Pagina’s in het indexeringsproces opnemen 78<br />
Een prioriteit toekennen aan tekst met HTML-tags voor koppen 80<br />
Een zoekfunctie implementeren 80<br />
4 Met tekst werken 83<br />
Met tekstframes werken 83<br />
Wat is een tekstframe? 83<br />
HTML-frames versus aangepaste frames 84<br />
Frames toevoegen aan een pagina 85<br />
Tekst invoeren in een frame 86<br />
De lay-out van aangepaste frames instellen 86<br />
Tekst laten overvloeien in aangepaste frames 88<br />
De voorziening Automatisch overvloeien gebruiken 88<br />
Tekst aan de grootte van een frame aanpassen 89<br />
Aangepaste frames aan elkaar koppelen 89<br />
Grafische eigenschappen van frames 91<br />
Overvloeiopties voor tekst in HTML-frames 91<br />
6 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Artistieke tekst gebruiken 92<br />
Tekst langs een pad plaatsen 94<br />
Tekst rechtstreeks op de pagina bewerken 96<br />
Tekst selecteren en invoeren 96<br />
Tekst kopiëren, plakken en verplaatsen 97<br />
Alinea’s laten inspringen 98<br />
Met Unicode-tekst werken 99<br />
Tekst zoeken en vervangen 99<br />
5 Tekens en alinea’s opmaken 101<br />
Tekst opmaken 101<br />
Met lettertypen werken 102<br />
Met opmaakprofielen werken 103<br />
Alineaopmaakprofielen versus tekenopmaakprofielen 103<br />
Met benoemde opmaakprofielen werken 104<br />
Genummerde of niet-genummerde lijsten maken 105<br />
Symbolen invoegen 107<br />
De huidige datum/tijd invoegen 108<br />
Persoonlijke gegevens invoegen 108<br />
6 Met tabellen werken 110<br />
Teksttabellen maken 110<br />
HTML-tabellen versus aangepaste tabellen 110<br />
Tabellen bewerken 112<br />
De voorziening AutoOpmaak gebruiken 116<br />
Celeigenschappen instellen 116<br />
Een kalender invoegen 117<br />
Officiële feestdagen toevoegen 118<br />
Persoonlijke gebeurtenissen toevoegen 118<br />
7 Objecten bewerken op de pagina 120<br />
Een object selecteren 120<br />
Over de blauwe balken in de linialen 121<br />
Meerdere objecten selecteren 121<br />
Objecten kopiëren, plakken en dupliceren 122<br />
Objecten dupliceren 123<br />
De opmaak van een object kopiëren en plakken 124<br />
Objecten verplaatsen 124<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 7
Objecten schalen 125<br />
Afbeeldingen schalen 126<br />
Gegroepeerde objecten en meervoudige selecties schalen 126<br />
Objecten roteren 126<br />
Objecten bijsnijden 127<br />
Objecten tot de vorm van een ander object bijsnijden 128<br />
Lijnen en vormen samenvoegen 129<br />
De volgorde van objecten wijzigen 130<br />
Objecten uitlijnen en spatiëren 130<br />
Objecten groeperen 132<br />
Objecten vergrendelen 132<br />
Het magnetische raster gebruiken 132<br />
Objecten selectief uitlijnen 133<br />
De standaardwaarden voor objecten bijwerken 133<br />
8 Met lijnen, vormen en effecten werken 135<br />
Lijnen tekenen en bewerken 135<br />
Lijnen tekenen 136<br />
Lijneigenschappen instellen 138<br />
Vormen tekenen en bewerken 139<br />
AutoVormen 140<br />
Gesloten vormen 141<br />
2D-filtereffecten gebruiken 142<br />
Reflecties maken 143<br />
Contouren maken 143<br />
Objecten vervagen 144<br />
Het gereedschap Schaduw gebruiken 145<br />
3D-filtereffecten gebruiken 146<br />
Overzicht 146<br />
3D-bumpmap 147<br />
2D-bumpmap 149<br />
3D-patroon 149<br />
2D-patroon 149<br />
Transparantie 149<br />
3D-belichting 150<br />
Diepte toevoegen (Instant 3D) 150<br />
Randen toevoegen 152<br />
Objectstijlen gebruiken 153<br />
8 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
9 Afbeeldingen, animaties en multimedia-elementen toevoegen 155<br />
Afbeeldingen importeren 155<br />
Afbeeldingen invoegen 155<br />
Afbeeldingen vervangen 157<br />
Bijgesneden afbeeldingen aanpassen 157<br />
Insluiten versus koppelen 158<br />
De mediabalk gebruiken 159<br />
Foto’s toevoegen aan de pagina 162<br />
Exportopties instellen voor afbeeldingen 162<br />
Exportopties, een titel en alternatieve tekst instellen voor afzonderlijke afbeeldingen 163<br />
Tekortkomingen in afbeeldingen verhelpen 165<br />
Een aanpassingsfilter toevoegen 166<br />
Aanpassingsfilters in-/uitschakelen 167<br />
De instellingen voor een filter veranderen 167<br />
De volgorde van de filters wijzigen 168<br />
Meerdere filters tegelijk toepassen 168<br />
TWAIN-afbeeldingen importeren 168<br />
Animatie toevoegen 168<br />
Geanimeerde lichtkranten toevoegen 169<br />
Animated GIF’s toevoegen 169<br />
Flash-bestanden gebruiken 170<br />
Beeld- en geluidsfragmenten toevoegen 171<br />
Geluid 171<br />
Video 171<br />
Een Flash-fotogalerij maken 174<br />
Een fotogalerij maken 175<br />
Een fotogalerij bewerken 177<br />
Externe afbeeldingen koppelen 178<br />
10 Met kleuren, verlopen en transparantie werken 179<br />
Effen kleuren instellen 179<br />
Kleurenschema’s gebruiken 180<br />
Schemakleuren toepassen op objecten 183<br />
Nieuwe kleurenschema’s definiëren en bestaande schema’s bewerken 183<br />
Met kleur- en bitmapverlopen werken 184<br />
Een kleur- of bitmapverloop toepassen 184<br />
Met transparantie werken 185<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 9
11 Hyperlinks en Interactiviteit toevoegen 187<br />
Hyperlinks en bladwijzers toevoegen 187<br />
Een bladwijzer invoegen 188<br />
Hotspots toevoegen aan een pagina 189<br />
Hotspots bewerken 190<br />
Rollovers toevoegen 191<br />
Opties voor rollovers 192<br />
De vereiste bronafbeeldingen maken voor een rollover 194<br />
Pop-uprollovers toevoegen 195<br />
Navigatie-elementen toevoegen 198<br />
Een sitemap toevoegen 201<br />
12 Dynamische content toevoegen 203<br />
HTML-pagina’s maken 203<br />
HTML-code toevoegen 204<br />
HTML-code toevoegen aan een pagina 205<br />
ID’s gebruiken 206<br />
Tokens gebruiken 207<br />
Formulieren toevoegen 207<br />
Structuur van een formulier 207<br />
Formulieren maken 209<br />
Besturingselementen voor formulieren 211<br />
Besturingselementen bewerken 212<br />
Formulieren verzenden 213<br />
RSS-feeds en podcasts 213<br />
Browserondersteuning voor feeds 214<br />
Een RSS-feed of podcast maken 214<br />
Podcasts naar iTunes doorsturen 215<br />
E-commerce 216<br />
Over e-commerce 216<br />
Een e-commerceobject toevoegen (PayPal) 217<br />
Gegevens samenvoegen 221<br />
Databasegegevens samenvoegen 221<br />
E-commercegegevens samenvoegen 225<br />
Overige samenvoegfuncties 229<br />
Met intelligente objecten werken 230<br />
Intelligente objecten maken 233<br />
Intelligente objecten bewerken 234<br />
Intelligente objecten beheren 235<br />
Intelligente objecten verwijderen 238<br />
10 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
13 Een voorbeeld bekijken en de site publiceren 239<br />
Een voorbeeld bekijken van uw website 239<br />
Uw site op het web publiceren 240<br />
Een website automatisch uploaden 243<br />
<strong>Pro</strong>bleemoplossing 243<br />
De gepubliceerde site bekijken 244<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 11
12 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
1 Welkom bij <strong>Studio</strong><br />
<strong>Webdesign</strong> 4 <strong>Pro</strong>!<br />
Welkom bij <strong>Studio</strong> <strong>Webdesign</strong> – de snelste en eenvoudigste manier om uw eigen website te<br />
bouwen!<br />
Als u eerder al met <strong>Studio</strong> <strong>Webdesign</strong> hebt gewerkt, hoeven we u waarschijnlijk niet meer te<br />
vertellen dat dit programma alle hulpmiddelen biedt die u nodig hebt om snel en eenvoudig<br />
uw eigen website te ontwikkelen en deze op het web te publiceren, hetzij op basis van de<br />
ingebouwde designsjablonen hetzij door zelf een volledig nieuwe site te maken. Gewapend<br />
met een internetaccount en <strong>Studio</strong> <strong>Webdesign</strong> staat uw site binnen de kortste keren online –<br />
zonder dat hiervoor enige ervaring is vereist!<br />
<strong>Studio</strong> <strong>Webdesign</strong> ondersteunt tientallen functies waarmee u moeiteloos de prachtigste websites<br />
ontwerpt!<br />
Gebruiksvriendelijk<br />
Contextgevoelige werkbalken waarborgen dat de meest gebruikte functies altijd binnen handbereik<br />
zijn. De soepele indeling van de studiotabs van zijn kant zorgt er dan weer voor dat u<br />
eenvoudig aangepaste werkruimtes kunt maken, zodat u zo doeltreffend mogelijk kunt werken.<br />
Bekijk enkele van de vooraf gedefinieerde profielen die toegankelijk zijn vanaf de startpagina<br />
van het programma als u alvast een voorsmaakje wilt.<br />
Krachtige tekstverwerkingsfuncties<br />
Met de geavanceerde DTP-functies in <strong>Studio</strong> <strong>Webdesign</strong> hebt u voortaan 100% controle over<br />
uw teksten. HTML-tekstframes waarborgen dat uw tekst volledig compatibel is met de HT-<br />
ML-standaard, terwijl u uw site met behulp van artistieke tekst snel en eenvoudig een unieke<br />
uitstraling kunt geven. En dan hebben we het nog niet gehad over de krachtige functies om<br />
tekst te bewerken!<br />
Verbluffende grafische effecten<br />
Geef afbeeldingen in uw website een volledig nieuwe dimensie met de gebruiksvriendelijke<br />
Instant 3D-functie – ideaal om driedimensionale logo’s, banners en knoppen te maken. Voeg<br />
moeiteloos prachtige belichtingseffecten toe, geef objecten in een oogwenk diepte om 3Dafbeeldingen<br />
te creëren die uw website duidelijk onderscheiden van de rest, en verfraai uw<br />
tekst, foto’s, afbeeldingen en vormen met oogverblindende filtereffecten, zoals een schuine<br />
rand, reliëf, schaduw of gloed. U kunt ook meteen meerdere effecten tegelijk toepassen en<br />
de instellingen ervoor wijzigen totdat u tevreden bent over het eindresultaat. Elk object kan<br />
worden bewerkt nadat u er filtereffecten op hebt toegepast. Desgewenst kunt u de toegepaste<br />
effecten zelfs weer uitschakelen. Met al deze grafische effecten binnen handbereik hoeft u<br />
voortaan dus niet langer uw toevlucht te nemen tot een afzonderlijk designprogramma om<br />
unieke 3D-objecten te ontwerpen.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 13
Krachtige aanpassingsfilters<br />
Gebruik de talrijke ingebouwde aanpassingsfilters om afbeeldingen snel en eenvoudig te corrigeren<br />
en/of de kwaliteit ervan te verbeteren. Verwijder de gevreesde rode ogen in foto’s die<br />
met een flits zijn genomen met het gereedschap Rode ogen verwijderen, verhelp tekortkomingen<br />
in uw afbeeldingen met gereedschappen als Helderheid/contrast, Stof en krassen verwijderen,<br />
Kanaalmixer en Kleurtoon/verzadiging/helderheid, of geef ze een unieke uitstraling<br />
met verbluffende effecten zoals Diffuse gloed, Bewegingsonscherpte en Ruis toevoegen. Met<br />
al deze krachtige en gebruiksvriendelijke filters tovert u uw foto’s moeiteloos in professioneel<br />
ogende afbeeldingen om!<br />
Kant-en-klare navigatie-elementen<br />
Maak een keuze uit tientallen thema-afbeeldingen met kant-en-klare knoppen, scheidingslijnen,<br />
banners, bullets, navigatiebalken, enzovoort die u eenvoudig aan uw websites kunt<br />
toevoegen. Met een fantastische collectie aan stijlen waaruit u kunt kiezen, vindt u ongetwijfeld<br />
wel een thema-afbeelding die aan uw behoeften voldoet. Door thema-afbeeldingen<br />
te gebruiken, bespaart u niet alleen zeer veel tijd, maar waarborgt u ook dat uw site een uniforme<br />
‘look-and-feel’ heeft. Aan de hand van de boomstructuur op het tabblad Site ziet u in<br />
één oogopslag de structuur van de volledige site. Voeg daar nog de krachtige functies voor<br />
hyperlinks, bladwijzers en hotspots aan toe, en u beschikt over een webdesignprogramma dat<br />
meegroeit met uw behoeften.<br />
Deze nieuwe editie van <strong>Studio</strong> <strong>Webdesign</strong> ondersteunt allerlei nieuwe functies . Als u al<br />
met eerdere versies van het programma hebt gewerkt, zult u de nieuwe functies beslist naar<br />
waarde weten te schatten. Als u voor het eerst met dit programma werkt, zult u snel merken<br />
dat <strong>Studio</strong> <strong>Webdesign</strong> alle hulpmiddelen biedt die u nodig hebt om professionele websites te<br />
ontwerpen.<br />
Nieuw in <strong>Studio</strong> <strong>Webdesign</strong>...<br />
* Databasegegevens samenvoegen<br />
Geef gegevens uit Serif-databases (*.sdb), Microsoft Access (*.mdb), dBASE en andere bekende<br />
databaseprogramma’s, ODBC-servergegevens, evenals gegevens uit Microsoft Excel,<br />
HTML en tekstbestanden met scheidingstekens weer op uw webpagina’s. <strong>Pro</strong>ductcatalogi,<br />
verzendlijsten, inventarissen en noem maar op, voortaan kunt u om het even welke<br />
databasegegevens in uw site integreren. Plaats tekst of afbeeldingen in samenvoeggebieden,<br />
samenvoegformulieren voor e-commercegegevens, of zelfs in HTML-fragmenten, of<br />
maak uw eigen fotodatabase (met EXIF-velden) waaruit u gegevens kunt samenvoegen.<br />
* Gecentraliseerd sitebeheer<br />
Beheer vanuit één dialoogvenster al uw pagina-/stramienpagina-eigenschappen, bronnen,<br />
lettertypen, tekst, hyperlinks en bladwijzers. Met het nieuwe Sitebeheer kiest u eenvoudig<br />
de gewenste instellingen voor specifieke pagina’s of de volledige site. Gebruik het vernieuwde<br />
Bronbeheer om afbeeldingen, media, links, HTML-code en allerlei andere bronnen<br />
te beheren, of de nieuwe functie Site op fouten controleren om potentiële problemen<br />
met navigatiehulpmiddelen, tekst of formulieren/e-commercegegevens op te sporen en<br />
14 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
die indien mogelijk automatisch te verhelpen.<br />
* Nieuwe intelligente objecten<br />
<strong>Studio</strong> <strong>Webdesign</strong> bevat allerlei nieuwe intelligente objecten:<br />
* Forums: breng levendige op threads gebaseerde discussies op gang door meerdere forums<br />
te maken die u onafhankelijk van elkaar kunt beheren en door een moderator kunt laten<br />
leiden.<br />
* Toegangscontrole: beperk de toegang tot uw site of specifieke pagina’s door gebruikerslijsten<br />
te beheren. Bezoekers kunnen zich snel en eenvoudig registreren via een aanmeldingspagina<br />
(met de mogelijkheid gebruikersaccounts te activeren via e-mail).<br />
* Bezoekersstatistieken: verzamel moeiteloos allerlei statistische gegevens over uw site, zoals<br />
het aantal hits, het aantal bezoekers dat door andere sites naar uw site is doorverwezen,<br />
enzovoort.<br />
* Nieuws: ideaal om belangrijke nieuwigheden zoals website-updates of geplande bijeenkomsten<br />
aan te kondigen.<br />
Alle intelligente objecten ondersteunen voortaan meerdere talen!<br />
* Mediabalk en fotogalerij<br />
Voortaan hoeft u foto’s maar één keer te importeren! Houd uw foto’s binnen handbereik<br />
met behulp van de nieuwe mediabalk en sleep ze van hieruit naar een bestaande foto in<br />
uw site om deze te vervangen! Zoek naar foto’s op basis van hun metagegevens. Beheer<br />
moeiteloos de grootte en uitlijning van foto’s in frames. Importeer meerdere afbeeldingen<br />
tegelijk en plak die een voor een op de gewenste positie!<br />
Verbaas uw vrienden, familie en collega’s met prachtige op Flash gebaseerde fotogalerijen,<br />
waardoor gebruikers eenvoudig kunnen navigeren door op een miniatuur of rollover te<br />
klikken.<br />
* <strong>Pro</strong>fessionele designsjablonen<br />
Maak in een oogwenk een website ‘op maat’ met behulp van talrijke ingebouwde sjablonen<br />
die overzichtelijk zijn ingedeeld in categorieën (Zakelijk, E-commerce, Hobby, Vrije<br />
tijd...). Selecteer gewoon de sjabloonpagina’s die u wilt gebruiken en voeg er later eventueel<br />
extra pagina’s uit dezelfde of een andere sjabloon aan toe.<br />
* Uw site optimaliseren voor zoekmachines<br />
Bepaal hoe zoekmachines uw website indexeren! Voorkom dat bepaalde pagina’s worden<br />
geïndexeerd door gebruik te maken van een sitemap-bestand of Robots-bestanden, zodat<br />
potentiële bezoekers alleen relevante zoekresultaten te zien krijgen met betrekking tot uw<br />
site.<br />
* Een zoekfunctie implementeren<br />
Maak gebruik van het krachtige gereedschap om een zoekfunctie in uw site te implementeren,<br />
zodat gebruikers eenvoudig op tekst kunnen zoeken.<br />
* Extra navigatiefuncties<br />
De nieuwste versie van <strong>Studio</strong> <strong>Webdesign</strong> bevat ook allerlei nieuwe navigatiebalken die<br />
zich uitstekend lenen voor het samenvoegen van e-commercegegevens, inclusief een<br />
nieuwe verzameling vervolgkeuzelijsten, zodat gebruikers via een vervolgkeuzelijst de pa-<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 15
gina kunnen selecteren die ze willen bekijken. Daar komt nog bij dat alle navigatiebalken<br />
voortaan het gebruik van bladwijzers ondersteunen.<br />
* Sitemaps<br />
Voeg snel en eenvoudig een sitemap toe om de structuur van uw site weer te geven.<br />
* Actieve documentframes<br />
Voortaan kunt u een hyperlink naar een specifieke pagina in uw site ook in een documentframe<br />
op een andere pagina openen. Maak gebruik van absolute URL’s, zodat gebruikers<br />
doelgericht van frame naar frame kunnen navigeren.<br />
* YouTube®-video’s insluiten<br />
Sluit uw favoriete YouTube®-video’s in uw webpagina’s in!<br />
* Podcasts<br />
Maak uw eigen podcastfeeds waarop bezoekers zich eenvoudig kunnen abonneren door<br />
op een Google Reader®, My Yahoo!® of Apple iTunes® link te klikken.<br />
* Pop-uprollovers<br />
Maak uw eigen fotogalerij bestaande uit een reeks miniaturen waarover gebruikers slechts<br />
hun muisaanwijzer hoeven te bewegen om een versie op ware grootte weer te geven.<br />
* Nieuwe 2D/3D-filtereffecten<br />
Voeg prachtige reflecties toe aan een object – ideaal voor paginatitels en afbeeldingen! Pas<br />
een van de talrijke realistisch ogende 3D-effecten toe op uw objecten, met de mogelijkheid<br />
de transparantie van reflecterende/niet-reflecterende oppervlakken in te stellen en meerdere<br />
lichtbronnen toe te voegen voor verbluffende belichtingseffecten. Alle filtereffecten<br />
kunnen in de voorvertoningsmodus of op het object op de pagina worden toegepast.<br />
* Instant 3D<br />
Transformeer 3D-objecten rechtstreeks op de pagina, of pas indrukwekkende veelkleurige<br />
belichtingseffecten toe (met de mogelijkheid nauwkeurig de richting van de lichtbron in te<br />
stellen), samen met aangepaste schuine randen en draaiprofielen om unieke contouren te<br />
creëren.<br />
* Kalenders met persoonlijke gebeurtenissen en feestdagen<br />
Ontwerp moeiteloos aangepaste kalenders waarop behalve alle officiële feestdagen ook<br />
belangrijke persoonlijke gebeurtenissen zoals verjaardagen, afspraken, enzovoort worden<br />
weergegeven.<br />
* Verbeterde tekst- en opmaakfuncties<br />
Maak gebruik van kleurverlopen en transparantie in tabellen en frametekst, selecteer snel<br />
en eenvoudig meerdere woorden of alinea’s en pas er via het nieuwe tabblad Opmaakprofielen<br />
de gewenste opmaak op toe. Gebruik het tabblad Lettertypen om na te gaan welke<br />
lettertypen zijn geïnstalleerd op uw systeem, om naar lettertypen te zoeken en een voorbeeld<br />
te bekijken van specifieke lettertypen op geselecteerde tekst.<br />
* Nieuwe weergaveopties voor tabbladen<br />
Voortaan kunt u tabbladen automatisch laten samenvouwen wanneer u ze niet gebruikt.<br />
U kunt ze zelfs animeren, zodat ze schuivend of rollend uit beeld verdwijnen!<br />
16 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
* Lay-outhulpmiddelen<br />
Maak gebruik van ‘magnetische’ hulplijnen – ideaal als u alle objecten die op uw liniaalhulplijnen<br />
zijn uitgelijnd in één keer wilt verplaatsen. De objecten volgen automatisch de<br />
hulplijnen wanneer u die verplaatst!<br />
* Tabblad Nuttige info<br />
Het nieuwe tabblad Nuttige info maakt een reeks rijkelijk geïllustreerde onderwerpen toegankelijk<br />
waarin u stap voor stap met belangrijke programmafuncties leert werken en<br />
doelgericht de structuur van uw site leert plannen en ontwerpen.<br />
... en allerlei andere nuttige voorzieningen!<br />
Zo kunt u voortaan profielen met aangepaste sneltoetsen maken voor de verschillende programmafuncties<br />
en de ingebouwde werkbalken en menu’s eenvoudiger aanpassen. Nieuw is<br />
ook dat u intelligente objecten zoals formulieren en blogs voortaan tegen spam kunt beveiligen<br />
met behulp van CAPTCHA-elementen, en uw website automatisch kunt uploaden zonder<br />
dat u elke stap met OK hoeft te bevestigen. En dan hebben we het nog niet gehad over de nieuwe<br />
functies om rechtstreeks op de pagina een voorbeeld te bekijken van intelligente objecten,<br />
het volledig vernieuwde tabblad Transformeren van waaruit u objecten voortaan op basis van<br />
een vooraf gedefinieerd ankerpunt kunt verplaatsen, schalen of roteren, en de mogelijkheid<br />
het uiterlijk van de gebruikersinterface naar behoefte aan te passen.<br />
Vergeet uw exemplaar van <strong>Studio</strong> <strong>Webdesign</strong> niet te registreren. Dan hebt u<br />
recht op technische ondersteuning en kunnen we u op de hoogte houden over<br />
nieuwe ontwikkelingen en toekomstige upgrades.<br />
Het programma installeren<br />
Om <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> te installeren, dient u de programma-cd in uw cd-romspeler te<br />
plaatsen. Sluit alle andere toepassingen voordat u het programma installeert, zodat de software<br />
probleemloos wordt geïnstalleerd.<br />
* Als de Autorun-functie is ingeschakeld op uw computer, wordt het installatieprogramma<br />
automatisch gestart zodra u de cd-rom in uw cd-romspeler plaatst. Volg de aanwijzingen<br />
op het scherm om de installatie te voltooien en start de computer daarna opnieuw.<br />
* Als de Autorun-functie niet is ingeschakeld op uw computer, moet u als volgt te werk gaan<br />
om het programma te installeren:<br />
1. Kies in het menu Start de opdracht Uitvoeren.<br />
2. Typ D:\ECSETUPX.EXE (waarbij de letter D voor de stationsletter staat die op uw systeem<br />
aan de cd-romspeler is toegewezen).<br />
U komt nu in de installatiebrowser.<br />
Via de installatiebrowser kunt u drie dingen doen:<br />
* <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> installeren<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 17
* naar onze supportpagina’s gaan<br />
* de cd-rom verkennen<br />
Om het programma te installeren, dubbelklikt u op de desbetreffende knop in de browser en<br />
volgt u de aanwijzingen op het scherm.<br />
Zodra de installatie is voltooid, kunt u het programma starten door op het overeenkomstige<br />
bureaubladpictogram te dubbelklikken, of door Start > Alle programma’s > Easy Computing<br />
> <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> te kiezen en op de naam van het programma te klikken in<br />
het vervolgmenu.<br />
18 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
2 Basisbeginselen<br />
Over websites<br />
In dit hoofdstuk worden enkele belangrijke basisconcepten beschreven waarmee u vertrouwd<br />
moet zijn om een professionele website te maken met <strong>Studio</strong> <strong>Webdesign</strong>.<br />
Wat komt er zoal kijken bij het ontwerpen van een website?<br />
Het enige wat u in principe hoeft te doen, is een van de meegeleverde sjablonen openen en<br />
aanpassen met het programma. U kunt natuurlijk ook een volledig nieuwe website maken<br />
zonder gebruik te maken van sjablonen. Aan u de keuze! Hoe dan ook, in beide gevallen zult u<br />
ongetwijfeld de talrijke voorzieningen op prijs stellen die <strong>Studio</strong> <strong>Webdesign</strong> biedt om tekst en<br />
afbeeldingen te bewerken en de lay-out van elke pagina aan te passen. <strong>Studio</strong> <strong>Webdesign</strong> is op<br />
het DTP-model gebaseerd, zodat u de verschillende elementen op elke pagina naar wens kunt<br />
schikken en precies die lay-out kunt creëren die u in gedachten hebt. Een website maken met<br />
<strong>Studio</strong> <strong>Webdesign</strong> vertoont veel overeenkomsten met het opstellen van een nieuwsbrief. Als u<br />
vertrouwd bent met de basisbeginselen van DTP, zult u merken dat een eigen website bouwen<br />
eenvoudiger is dan op het eerste gezicht lijkt. Als u hier nog geen ervaring mee hebt, kunt u<br />
gaandeweg met de verschillende gereedschappen in <strong>Studio</strong> <strong>Webdesign</strong> leren werken.<br />
Met <strong>Studio</strong> <strong>Webdesign</strong> kunt u alle elementen van uw site in wording in één gebruiksvriendelijk<br />
document onderbrengen dat uit meerdere pagina’s bestaat en dit document met één<br />
handeling als projectbestand opslaan. Dit project kunt u op elk moment publiceren als een<br />
reeks afzonderlijke pagina’s die samen uw website vormen.<br />
Wat is een website?<br />
Het internet is een wereldwijd netwerk dat computers over de hele wereld met elkaar verbindt.<br />
Het web was aanvankelijk een manier om via internet toegang te krijgen tot informatie<br />
die is opgeslagen in een bestandsindeling die bekendstaat als HTML of Hypertext Markup<br />
Language. In de ruime zin van het woord is een website (hoofdzakelijk) een verzameling<br />
HTML-bestanden die zijn opgeslagen op een fileserver waartoe iedereen die over een webbrowser<br />
beschikt toegang kan krijgen. In feite zijn websites echter helemaal niet van internet<br />
afhankelijk. Vaak zijn ze ook toegankelijk vanuit een lokaal netwerk of particulier intranet.<br />
Denk eraan dat een website uiteindelijk maar een verzameling HTML-bestanden is.<br />
HTML is een methode om de lay-out van een webpagina te beschrijven. Een HTML-bestand<br />
bestaat uit platte tekst waarin allerlei zogeheten ‘tags’ zijn verweven die de betreffende webpagina<br />
beschrijven. Behalve HTML-bestanden bevat een website doorgaans echter nog andere<br />
bestanden (zoals afbeeldingen) die de webdesigner in de site heeft geïntegreerd. Een<br />
webbrowser als Microsoft Internet Explorer of Mozilla Firefox is een programma dat HT-<br />
ML-bestanden kan lezen en webpagina’s kan weergeven zoals de designer oorspronkelijk in<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 19
gedachten had.<br />
Elke website heeft een startpagina, die meestal index.html heet. Dit is de eerste pagina die<br />
internetgebruikers te zien krijgen wanneer ze een website bezoeken. De startpagina bevat<br />
doorgaans hyperlinks naar andere pagina’s in de site, die op hun beurt hyperlinks bevatten<br />
naar weer andere pagina’s, enzovoort. Voor internetgebruikers die de website bekijken via een<br />
browser, lijkt het alsof al deze informatie naadloos aan elkaar is gekoppeld. Het enige wat ze<br />
hoeven te doen om verwante of aanvullende informatie weer te geven, is op de overeenkomstige<br />
hyperlink klikken.<br />
<strong>Studio</strong> <strong>Webdesign</strong> converteert de verschillende pagina’s in uw project automatisch naar HT-<br />
ML-bestanden wanneer u de website publiceert, zodat u zich zelf niet om de HTML-code<br />
hoeft te bekommeren.<br />
Wat hebt u nodig om een voorbeeld te bekijken van uw site of deze te<br />
publiceren?<br />
U kunt op elk moment een voorbeeld bekijken van een of meer pagina’s in uw site, ofwel<br />
rechtstreeks in het programma (in een afzonderlijk venster dat sterk op dat van Internet Explorer<br />
lijkt) ofwel met een willekeurige browser die op uw systeem is geïnstalleerd.<br />
Een website publiceren met <strong>Studio</strong> <strong>Webdesign</strong> is een proces dat slechts uit één stap bestaat,<br />
waarbij: (1) uw project automatisch naar afzonderlijke bestanden wordt geconverteerd, (2) de<br />
bestanden voor uw website naar de opgegeven locatie worden gekopieerd (een lokale map of<br />
een webserver).<br />
* Om uw website naar een lokale map te publiceren, hoeft u zelfs niet eens met internet<br />
verbonden te zijn.<br />
* Als u de website op het web wilt publiceren, zodat iedereen deze kan bekijken, hebt u een<br />
host nodig (schijfruimte op een server die met internet is verbonden). Hiervoor moet<br />
u gewoonlijk een account aanvragen bij een gespecialiseerde Internet Service <strong>Pro</strong>vider<br />
(ISP). Bij de meeste internetaanbieders krijgt u automatisch verschillende megabytes<br />
schijfruimte toegewezen op de server om een ‘persoonlijke website’ te publiceren wanneer<br />
u een abonnement neemt. Zodra u uw account hebt ingesteld en verbinding kunt maken<br />
met de webserver van uw internetaanbieder, hoeft u alleen nog de juiste bestanden naar<br />
de server over te dragen om uw website te publiceren. Hiervoor kunt u de functie Op het<br />
web publiceren in <strong>Studio</strong> <strong>Webdesign</strong> gebruiken.<br />
Over HTML<br />
Een groot voordeel van <strong>Studio</strong> <strong>Webdesign</strong> in vergelijking met andere programma’s die speciaal<br />
zijn ontwikkeld om websites te maken, is dat u uw nieuwsbrief of een gedrukte advertentie<br />
met allerlei kleurrijke afbeeldingen en exotische lettertypen ongewijzigd op het web kunt<br />
publiceren – zonder dat de oorspronkelijke opmaak of vormgeving verloren gaat. Een van de<br />
grote troeven van dit programma is immers dat uw publicatie er op het web even goed uitziet<br />
als op het scherm!<br />
Hoewel u geen ervaring hoeft te hebben met HTML om met <strong>Studio</strong> <strong>Webdesign</strong> aan de slag te<br />
gaan, zijn er wel enkele zaken waarop u moet letten:<br />
20 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
1. Denk eraan dat de downloadtijd van uw webpagina’s rechtstreeks afhankelijk is van de bestandsgrootte<br />
van de HTML-bestanden en van de bijbehorende afbeeldingen of multimediabestanden.<br />
Omdat dergelijke bestanden veel meer schijfruimte innemen dan HTMLbestanden,<br />
kunnen ze de downloadtijd van uw website aanzienlijk beïnvloeden.<br />
2. Alle onderdelen van uw site die het programma niet naar HTML kan converteren, worden<br />
automatisch als afbeeldingen geëxporteerd wanneer u de website publiceert. Hoe meer<br />
onderdelen het programma naar HTML kan converteren, hoe beter.<br />
Als u gewend bent in een DTP-omgeving te werken, zult u uw typografische verwachtingen<br />
wellicht wat moeten temperen als u websites ontwerpt voor het web. <strong>Studio</strong> <strong>Webdesign</strong> biedt<br />
u echter heel wat bewegingsvrijheid op het gebied van design. Zo kunt u een willekeurige<br />
tekengrootte gebruiken voor uw teksten, een aangepaste teken- en regelafstand instellen voor<br />
afzonderlijke alinea’s en alinea’s zelfs uitvullen! De WYSIWYG-benadering waarborgt dat de<br />
website die u op het scherm ziet vrijwel volledig overeenkomt met datgene wat internetgebruikers<br />
uiteindelijk te zien krijgen in hun browser. Omdat in HTML absolute coördinaten<br />
worden gebruikt om de positie te bepalen van elementen, kunt u objecten zo indelen dat ze<br />
elkaar gedeeltelijk overlappen – zonder dat dit een invloed heeft op de uiteindelijke bestandsgrootte.<br />
In theorie kunt u een willekeurig lettertype gebruiken. Denk er echter aan dat het gebruikte<br />
lettertype automatisch wordt vervangen door een lettertype dat het oorspronkelijke zoveel<br />
mogelijk benadert wanneer het niet beschikbaar is op de computer van de gebruiker. Het<br />
resultaat hiervan is niet altijd voorspelbaar. Het is dus best mogelijk dat uw zorgvuldig ontworpen<br />
lay-out er plots helemaal anders uitziet! Onthoud daarom als algemene vuistregel dat<br />
u zich het beste tot de zogeheten ‘webveilige’ lettertypen in <strong>Studio</strong> <strong>Webdesign</strong> kunt beperken.<br />
Dit zijn de lettertypen die standaard worden weergegeven op het tabblad Lettertypen.<br />
De ingebouwde voorziening Site op fouten controleren waarschuwt u als in<br />
uw site onveilige (andere dan webveilige) lettertypen worden gebruikt, of als<br />
bepaalde navigatie-elementen of formulieren/e-commercefuncties problemen<br />
veroorzaken.<br />
De startpagina van het programma<br />
Zodra u <strong>Studio</strong> <strong>Webdesign</strong> hebt geïnstalleerd, kunt u meteen aan de slag. Tijdens de installatie<br />
van het programma wordt automatisch de programmagroep <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong><br />
toegevoegd aan het menu Start van Windows.<br />
* Kies Start > Alle programma’s > Easy Computing > <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> en klik op<br />
de naam van het programma in het vervolgmenu om het programma te starten.<br />
Opties op de startpagina<br />
Op de startpagina kunt u uit verschillende opties kiezen:<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 21
Hier kunt u aangeven of u een nieuwe website wilt maken (al dan niet op basis van een sjabloon),<br />
een project wilt openen dat u eerder hebt opgeslagen of bestaande webpagina’s in uw<br />
project wilt importeren. Vanaf de startpagina kunt u ook rechtstreeks enkele voorbeeldsites<br />
bekijken die door professionele designers zijn gemaakt, of een van de vele workshops openen<br />
die bij het programma worden geleverd.<br />
Standaard wordt bij het starten van <strong>Studio</strong> <strong>Webdesign</strong> altijd de startpagina<br />
weergegeven. U kunt dit echter voorkomen door het selectievakje Startpagina<br />
niet meer weergeven in te schakelen linksonder op de startpagina. Als u de<br />
startpagina later opnieuw wilt inschakelen, kiest u Extra > Opties > Algemeen<br />
en activeert u het selectievakje Startpagina weergeven bij starten van programma.<br />
Een website maken op basis van een sjabloon<br />
Het eerste wat u te zien krijgt wanneer u <strong>Studio</strong> <strong>Webdesign</strong> start, is de startpagina van het<br />
programma, waar u uit verschillende opties kunt kiezen. Een van deze opties is Nieuwe website<br />
maken. Door gebruik te maken van een designsjabloon, kunt u snel en eenvoudig een<br />
professionele website ontwerpen. Ongeacht of u een beginner bent of al jaren actief bent op<br />
het gebied van webdesign maar naar nieuwe designmogelijkheden zoekt, laat de sjablonen in<br />
<strong>Studio</strong> <strong>Webdesign</strong> het werk voor u doen!<br />
22 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
De verschillende sjablonen zijn overzichtelijk ingedeeld in categorieën. Voor elke sjabloon<br />
kunnen diverse opties worden ingesteld, zoals:<br />
* het thema voor knoppen, bullets, scheidingslijnen en navigatiebalken (bijvoorbeeld Modern);<br />
* het kleurenschema dat u wilt gebruiken om de website een specifieke ‘look-and-feel’ te<br />
geven (bijvoorbeeld Atlantis);<br />
* de sjabloonpagina’s die u wilt gebruiken om een nieuwe site te bouwen (bijvoorbeeld alleen<br />
de startpagina en de pagina’s <strong>Pro</strong>ducten, Downloads, en Contact).<br />
Sommige sjablonen bevatten intelligente objecten (zie hoofdstuk 12) zoals opiniepeilingen en<br />
blogs. Omdat dergelijke objecten uitsluitend toegankelijk zijn via Serif Web Resources (een<br />
online service die wordt aangeboden door Serif), dient u ze aan een geldige Serif Web Resources-account<br />
te koppelen. Als u het desbetreffende intelligente object wilt behouden in uw site,<br />
dubbelklikt u er op en meldt u zich aan bij Serif Web Resources. Hierdoor koppelt u het object<br />
aan uw account. (Als u het object niet wilt gebruiken, verwijdert u het gewoon.)<br />
U hoeft zich overigens niet noodzakelijk tot pagina’s uit één enkele sjabloon te beperken in<br />
<strong>Studio</strong> <strong>Webdesign</strong>. U kunt eenvoudig een of meer pagina’s uit een andere sjabloon toevoegen<br />
om enige variatie aan te brengen in uw site. Zo zou u bijvoorbeeld webpagina’s met een welbepaalde<br />
grafische vormgeving kunnen maken, maar een apart gedeelte van uw site dat alleen<br />
toegankelijk is voor leden een andere vormgeving kunnen geven door hiervoor pagina’s uit<br />
een andere sjabloon te gebruiken. Hierbij kunt u aangeven of u ook de bijbehorende stramienpagina’s<br />
aan het huidige project wilt toevoegen. Lees ‘Pagina’s toevoegen, verwijderen en de<br />
volgorde ervan wijzigen’ in hoofdstuk 3 voor meer informatie.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 23
Zo maakt u een nieuwe website op basis van een sjabloon:<br />
1. Start <strong>Studio</strong> <strong>Webdesign</strong> of kies Bestand > Startpagina om de startpagina van het programma<br />
weer te geven.<br />
2. Klik op Designsjabloon gebruiken.<br />
3. Selecteer een sjabloon in het deelvenster aan de linkerkant. Merk op dat de sjablonen<br />
in verschillende categorieën zijn ingedeeld. Gebruik de schuifbalk of vouw een categorie<br />
samen door op het symbool naast de naam van die categorie te klikken om de overige<br />
sjablonen te bekijken. Let erop dat in het deelvenster aan de rechterkant miniaturen worden<br />
weergegeven van de pagina’s waaruit de geselecteerde sjabloon bestaat.<br />
4. Selecteer in het deelvenster Pagina’s aan de rechterkant de sjabloonpagina’s die u wilt gebruiken<br />
in de nieuwe website door het bijbehorende selectievakje in te schakelen. Klik op<br />
Alles selecteren of Niets selecteren als u alle dan wel geen enkele pagina wilt selecteren.<br />
5. Selecteer via de vervolgkeuzelijsten bovenaan een thema voor knoppen en een kleurenschema<br />
voor de nieuwe site. De paginaminiaturen in het rechterdeelvenster worden automatisch<br />
bijgewerkt, zodat u meteen het resultaat van uw instellingen kunt controleren.<br />
Gebruik de zoomknoppen of de schuifregelaar onder in het dialoogvenster als u de gekozen<br />
sjabloon aandachtiger wilt bestuderen.<br />
6. Klik op Openen.<br />
Het programma geeft automatisch de startpagina van de voorbeeldsite weer in de werkomgeving.<br />
Activeer het tabblad Site in de studio aan de rechterkant als u een overzicht wilt van de<br />
inhoud en structuur van de website.<br />
Een bestaande website openen<br />
U kunt zowel de startpagina, het menu Bestand als de standaardwerkbalk gebruiken om een<br />
bestaande website te openen. Merk op dat u behalve een website die u eerder hebt gemaakt<br />
met dit programma ook een sjabloonbestand of een <strong>Studio</strong> DTP <strong>Pro</strong>-publicatie kunt openen.<br />
Daarnaast kunt ook pagina’s van een bestaande website importeren. (Raadpleeg het Helpbestand<br />
van het programma voor meer informatie.)<br />
Zo opent u een bestaande website vanaf de startpagina:<br />
1. Klik op Opgeslagen site openen op de startpagina. Klik in het deelvenster Documenten<br />
van het dialoogvenster Opgeslagen site openen op de tab Mappen als u door de mappen<br />
op uw computer wilt bladeren. Klik op de tab Geschiedenis als u een overzicht wilt<br />
van alle websites die u onlangs hebt bewerkt met het programma. Let erop dat rechts in<br />
het dialoogvenster miniaturen van de beschikbare websites of allerlei bestandsinfo wordt<br />
weergegeven, afhankelijk van de weergave die momenteel is ingesteld.<br />
2. Selecteer de website die u wilt openen en klik op Openen. De startpagina van de site verschijnt<br />
in de werkomgeving.<br />
24 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Zo opent u een bestaande website terwijl u met het programma werkt:<br />
1. Klik op Openen op de standaardwerkbalk.<br />
2. Navigeer in het dialoogvenster Openen naar de map waarin het projectbestand is opgeslagen<br />
dat u wilt openen, selecteer het en klik op Openen.<br />
Zo keert u naar de laatst opgeslagen versie van een geopende site terug:<br />
* Kies Vorige versie in het menu Bestand.<br />
Ontbrekende lettertypen vervangen<br />
<strong>Studio</strong> <strong>Webdesign</strong> biedt u de mogelijkheid ontbrekende lettertypen te vervangen door lettertypen<br />
die de oorspronkelijke zoveel mogelijk benaderen wanneer u een website opent waarin<br />
lettertypen zijn gebruikt die niet beschikbaar zijn op uw computer. U kunt dergelijke lettertypen<br />
naar keuze automatisch laten vervangen door het programma, of u kunt dit handmatig<br />
doen. Raadpleeg het Help-bestand van het programma voor meer informatie.<br />
Een volledig nieuwe website maken<br />
Hoewel het gebruik van een designsjabloon het designproces aanzienlijk kan vereenvoudigen,<br />
kunt u net zo goed vanaf een lege site vertrekken en zelf een nieuwe website maken.<br />
Zo maakt u een nieuwe website vanaf de startpagina:<br />
* Start het programma (of kies Bestand > Startpagina) en klik op Nieuwe website maken.<br />
Merk op dat de nieuwe site aanvankelijk uit één pagina bestaat, waarvoor de standaard pagina-eigenschappen<br />
zijn ingesteld.<br />
U verkrijgt hetzelfde resultaat wanneer u op Annuleren klikt (of op Esc<br />
drukt) terwijl de startpagina wordt weergegeven.<br />
Zo maakt u een nieuwe site terwijl u met het programma werkt:<br />
* Kies Nieuw in het menu Bestand.<br />
Met meerdere sites werken<br />
U kunt meerdere sites tegelijkertijd openen in <strong>Studio</strong> <strong>Webdesign</strong>. Elke site die u opent, verschijnt<br />
in een afzonderlijk venster met zijn eigen instellingen. Met behulp van de venstertabs<br />
boven in het programmavenster kunt u snel tussen de geopende documentvensters wisselen.<br />
Door de vensters trapsgewijs te schikken of ze horizontaal of verticaal te splitsen, kunt u objecten<br />
zelfs eenvoudig via slepen-en-neerzetten van het ene naar het andere venster kopiëren.<br />
U kunt ook een afzonderlijk venster openen om een voorbeeld te bekijken van de huidige site<br />
(zie ‘Een voorbeeld bekijken van uw website’ in hoofdstuk 13).<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 25
Zo sluit u het actieve venster:<br />
* Kies Sluiten in het menu Bestand of klik op de knop Sluiten uiterst rechts in de titelbalk<br />
van het documentvenster. Als dit het enige geopende venster is voor de site, wordt het<br />
huidige projectbestand gesloten en wordt automatisch gevraagd of u uw wijzigingen wilt<br />
opslaan.<br />
Merk op dat onder aan het menu Venster de namen worden weergegeven van de documentvensters<br />
die momenteel zijn geopend. Het actieve venster is met een vinkje gemarkeerd. De<br />
eenvoudigste manier om naar een ander venster te wisselen, is vanzelfsprekend op de overeenkomstige<br />
venstertab (of rechtstreeks in het venster) klikken. Wanneer het ene venster echter<br />
het andere verbergt, moet u op Ctrl+Tab drukken of op een vensternaam klikken in het<br />
menu om een ander venster te activeren.<br />
Uw project opslaan<br />
Zo slaat u het huidige project op:<br />
* Klik op Opslaan op de standaardwerkbalk of kies Bestand > Opslaan.<br />
OF<br />
* Kies Bestand > Opslaan als als u het project onder een andere naam wilt opslaan.<br />
26 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
3 Sites en pagina’s<br />
ontwikkelen<br />
Over sitestructuur en navigatiehulpmiddelen<br />
In tegenstelling tot een gedrukte publicatie is een website geen lineair document waarin de<br />
ene pagina gewoon op de andere volgt. U kunt de structuur van uw site beter vergelijken<br />
met die van een museum waarin mensen vrij kunnen rondwandelen. U kunt er doorgaans<br />
wel vanuit gaan dat bezoekers langs de voordeur binnenkomen (de startpagina), maar waar<br />
ze daarna naartoe gaan, is afhankelijk van de hyperlinks die u hebt voorzien. Deze navigatiehulpmiddelen<br />
zijn als het ware de gangen die de verschillende ruimtes in het museum met<br />
elkaar verbinden. Het is aan u als ‘architect’ om de pagina’s op een logische manier in te delen<br />
en op de juiste plaatsen hyperlinks te voorzien, zodat gebruikers eenvoudig hun weg vinden<br />
in uw site – zonder dat ze verdwalen.<br />
In <strong>Studio</strong> <strong>Webdesign</strong> kunt u de boomstructuur op het tabblad Site gebruiken om de structuur<br />
van uw website visueel in te delen en er vervolgens de vereiste navigatie-elementen aan<br />
toe te voegen (speciale thema-afbeeldingen die zich automatisch aan de structuur van uw<br />
site aanpassen). U zult deze boomstructuur regelmatig nodig hebben wanneer u met pagina’s<br />
leert werken.<br />
Structuur van de site<br />
In tegenstelling tot de structuur van een museum staat deze van een website volledig los van<br />
de fysieke indeling (de plaats waar de pagina’s zijn opgeslagen). De structuur van een website<br />
is veeleer een methode om de inhoud van de site logisch in te delen, zodat gebruikers er eenvoudiger<br />
door kunnen navigeren. Het meest bruikbare concept op dit gebied – dat overigens<br />
in <strong>Studio</strong> <strong>Webdesign</strong> is geïmplementeerd – is dat van de ‘omgekeerde boomstructuur,’ die<br />
begint bij de startpagina en van daaruit naar de andere pagina’s vertakt. Het voordeel voor internetgebruikers<br />
die door uw website navigeren, is dat de inhoud van de site aan de hand van<br />
deze indeling op een vertrouwde en overzichtelijke manier wordt weergegeven – hiërarchisch<br />
gestructureerd in secties en niveaus.<br />
Een sectie of rubriek is een categorie met verwante informatie, zoals ‘Nieuwsbrief,’ ‘<strong>Pro</strong>ducten,’<br />
‘Contact’ of ‘Links.’ De verschillende hoofdrubrieken van een site zijn gewoonlijk toegankelijk<br />
vanuit een navigatiebalk op de startpagina van de site. In het ideale geval behoort elke<br />
pagina in de site tot een specifieke rubriek. Elke rubriek heeft doorgaans zijn eigen hoofdpagina,<br />
tenzij de desbetreffende rubriek slechts uit één pagina bestaat. Deze pagina (hierna<br />
de ‘parent’ of bovenliggende pagina genoemd) wordt gewoonlijk als menu voor de onderliggende<br />
pagina’s gebruikt.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 27
Met de term niveau wordt het aantal stappen (links) bedoeld dat een bepaalde pagina van de<br />
startpagina is verwijderd. De startpagina bevindt zich altijd op het hoogste niveau (niveau 1),<br />
net als de hoofdpagina’s van de verschillende rubrieken. De onderliggende pagina’s bevinden<br />
zich doorgaans op het tweede niveau (zie schema), enzovoort.<br />
De boomstructuur van uw site (op het tabblad Site) is een handig visueel hulpmiddel om de<br />
inhoud van uw site in rubrieken en niveaus in te delen – meerbepaald als een hiërarchie van<br />
‘parents’ (bovenliggende pagina’s) en ‘childs’ (onderliggende pagina’s). In de volgende figuur<br />
ziet u een soortgelijke indeling, maar dan in de vorm van een boomstructuur in <strong>Studio</strong> <strong>Webdesign</strong>:<br />
Via deze boomstructuur kunt u eenvoudig nagaan hoe de verschillende pagina’s in uw site<br />
aan elkaar zijn gerelateerd en uw content op een logische manier indelen. Omdat een website<br />
in werkelijkheid echter uit verschillende pagina’s bestaat die allemaal op de een of andere<br />
manier aan elkaar zijn gerelateerd, is er natuurlijk niets dat u ervan weerhoudt naar behoefte<br />
hyperlinks toe te voegen om tussen specifieke pagina’s te navigeren. De boomstructuur legt<br />
28 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
echter wel de belangrijkste ‘paden’ vast om in uw website rond te kuieren. Als u voor een logische<br />
indeling in rubrieken en niveaus kiest, kunnen internetgebruikers eenvoudiger door uw<br />
site navigeren. Met <strong>Studio</strong> <strong>Webdesign</strong> is dit kinderspel. Met dit programma kunt u immers<br />
eenvoudig navigatiebalken maken die perfect de structuur van uw site weerspiegelen en bezoekers<br />
automatisch langs de ‘hoofdwegen’ leiden.<br />
Klik op vlak boven de boomstructuur op het tabblad Site als u de bestandsnamen<br />
van de pagina’s wilt weergeven in de boomstructuur in plaats van<br />
hun interne paginanamen.<br />
U kunt ook zuivere HTML-pagina’s en offsite links opnemen in de boomstructuur van uw<br />
site. U kunt deze pagina’s op dezelfde manier toevoegen als standaard webpagina’s. Merk op<br />
dat dergelijke pagina’s met een ander symbool worden aangeduid dan standaard webpagina’s<br />
in de boomstructuur, om aan te geven dat ze louter uit HTML-code bestaan (zie ‘HTMLpagina’s<br />
maken’ in hoofdstuk 12) of naar een locatie buiten de website leiden.<br />
Vergelijk de HTML-pagina ‘Overzicht’ met de standaardpagina ‘Verkoop’ en de offsite link<br />
‘Forum’ in de nevenstaande figuur.<br />
Navigatiehulpmiddelen<br />
Bepaalde typen thema-afbeeldingen in <strong>Studio</strong> <strong>Webdesign</strong> zijn zogeheten ‘navigatie-elementen.’<br />
Dat geldt onder andere voor Vorige/Volgende-knoppen en de diverse vooraf gedefinieerde<br />
navigatiebalken. Kenmerkend voor deze elementen is dat ze zich automatisch aan de<br />
structuur van uw site aanpassen, zodat u eenvoudig een site kunt ontwerpen waardoor internetgebruikers<br />
vlot kunnen navigeren. Het enige wat u hoeft te doen, is de gewenste thema-afbeelding<br />
selecteren op het tabblad Thema-afbeeldingen. <strong>Studio</strong> <strong>Webdesign</strong> doet de rest! Merk<br />
op dat Vorige/Volgende-knoppen automatisch aan aangrenzende pagina’s op hetzelfde niveau<br />
worden gekoppeld. Navigatiebalken zijn een combinatie van knoppen en pop-upmenu’s die<br />
waarborgen dat gebruikers eenvoudig door de verschillende rubrieken en niveaus in uw site<br />
kunnen navigeren.<br />
In de volgende figuur ziet u de navigatiebalk die wij hebben gekozen voor de sitestructuur<br />
die we hiervoor hebben beschreven. De knoppen fungeren als hyperlinks naar de startpagina<br />
en de hoofdpagina’s van de verschillende rubrieken (niveau 1). De pop-upmenu’s zijn telkens<br />
aan de onderliggende pagina’s van de desbetreffende rubrieken gekoppeld (niveau 2 in dit<br />
voorbeeld).<br />
Hier is een beknopt overzicht van de voordelen die dergelijke navigatie-elementen bieden:<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 29
* U kunt op een willekeurig niveau in de site navigatie-elementen invoegen. Bij navigatiebalken<br />
kunt u bovendien eenvoudig de delen van de sitestructuur instellen waaraan u elke<br />
navigatiebalk wilt koppelen, bijvoorbeeld aan pagina’s op het eerste of hetzelfde niveau,<br />
aan onderliggende pagina’s, enzovoort.<br />
* Omdat de navigatie-elementen thema-afbeeldingen zijn, kunt u via het tabblad Themaafbeeldingen<br />
in de studio eenvoudig designelementen (knoppen, scheidingslijnen, enzovoort)<br />
met dezelfde grafische vormgeving kiezen, zodat de navigatiestructuur doorheen<br />
de gehele website uniform is.<br />
* Standaard worden alle pagina’s in de boomstructuur van uw site in de navigatiestructuur<br />
opgenomen. Concreet betekent dit dat u voor al deze pagina’s navigatie-elementen kunt<br />
toevoegen. Desgewenst kunt u bepaalde pagina’s echter uitsluiten van de navigatiestructuur.<br />
Dergelijke pagina’s worden dan genegeerd als u navigatie-elementen toevoegt. Pagina’s<br />
die in de navigatiestructuur zijn opgenomen, worden met een vinkje aangeduid<br />
op het tabblad Site. Bij pagina’s die u van de navigatiestructuur hebt uitgesloten, wordt dit<br />
vinkje niet weergegeven. Stel dat uw site een rubriek met referentiepagina’s bevat die u niet<br />
in de navigatiestructuur wilt opnemen, zodat gebruikers ze niet van begin tot eind kunnen<br />
doorlopen. Door de bovenliggende pagina van deze rubriek van de navigatiestructuur uit<br />
te sluiten, verwijdert u de overeenkomstige koppeling uit de navigatiebalk. U kunt vanzelfsprekend<br />
nog altijd hyperlinks toevoegen naar die pagina. De pagina wordt alleen niet<br />
weergegeven in navigatie-elementen.<br />
* Een van de belangrijkste voordelen van de navigatie-elementen in <strong>Studio</strong> <strong>Webdesign</strong> is<br />
ongetwijfeld dat ze automatisch worden bijgewerkt als u achteraf de relaties tussen pagina’s<br />
wijzigt, bepaalde pagina’s een andere naam geeft of de navigatiebalk via knippen-en-plakken<br />
naar een andere pagina verplaatst. Zo is ‘Archief 1’ in de bovenstaande figuur bijvoorbeeld<br />
slechts een plaatshouder voor de echte titel van de overeenkomstige pagina. (Bij<br />
het ontwerpen van een website worden doorgaans altijd beschrijvende namen gebruikt<br />
om de verschillende delen van de site te benoemen voordat de eigenlijke inhoud wordt<br />
toegevoegd.) Als u de naam van deze pagina bijvoorbeeld in ‘Smit tot algemeen directeur<br />
benoemd’ verandert, is de wijziging meteen zichtbaar in de navigatiebalk!<br />
Pagina’s versus stramienpagina’s<br />
De pagina’s zijn de basiselementen van een site. In <strong>Studio</strong> <strong>Webdesign</strong> kunt u de inhoud van<br />
uw site structureren door pagina’s in de vorm van een boomstructuur te ordenen. Op deze<br />
manier kunt u een overzichtelijke indeling creëren, zodat bezoekers vlot door uw site kunnen<br />
navigeren. Onthoud in dit verband dat elke pagina uit een paginalaag (‘voorgrond’) en<br />
stramienpaginalaag (‘achtergrond’) bestaat.<br />
De stramienpagina’s zijn een onderdeel van de structuur van uw webproject. Hier kunt u<br />
30 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
alle achtergrondelementen plaatsen die op meerdere pagina’s in uw site moeten verschijnen,<br />
zoals een logo, achtergrondafbeelding, kop-/voettekst of zelfs een navigatie-element. Zoals u<br />
in de onderstaande figuur ziet, wordt een stramienpagina doorgaans voor meerdere pagina’s<br />
in de site gebruikt. Door een specifiek designelement op een stramienpagina te plaatsen en<br />
deze stramienpagina vervolgens aan verschillende pagina’s toe te wijzen, waarborgt u dat dit<br />
element op al deze pagina’s wordt weergegeven. Vanzelfsprekend kunt u op elke pagina andere<br />
elementen op de ‘voorgrondlaag’ plaatsen.<br />
Merk op dat het tabblad Site in de studio uit twee delen bestaat. In het vak Stramienpagina’s<br />
bovenaan worden pictogrammen weergegeven voor alle stramienpagina’s die u hebt ingesteld<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 31
voor uw site. In het vak Pagina’s onder aan het tabblad wordt een boomstructuur van de pagina’s<br />
in uw site weergegeven. Let erop dat hier de stramienpagina wordt aangegeven waarop<br />
elke pagina is gebaseerd (met een letter aangeduid):<br />
Pagina’s weergeven<br />
De werkomgeving van <strong>Studio</strong> <strong>Webdesign</strong> bestaat uit een ‘paginagebied’ en het ‘plakbord’ er<br />
rond.<br />
De pagina is het witte werkblad waarop u tekst, afbeeldingen en alle andere elementen plaatst<br />
die op de uiteindelijke webpagina moeten verschijnen. Het plakbord is het grijze gebied rondom<br />
de pagina waar u elementen voorlopig kunt onderbrengen in afwachting dat u ze definitief<br />
aan de webpagina toevoegt. Merk op dat ook elementen die de pagina overlappen worden<br />
geëxporteerd wanneer u de website publiceert. Elementen die zich volledig op het plakbord<br />
bevinden, worden niet geëxporteerd en zijn bijgevolg niet zichtbaar in de uiteindelijke website.<br />
Het plakbord is overigens altijd beschikbaar, ongeacht de pagina of stramienpagina die<br />
momenteel actief is. Aan de hand van deze voorziening kunt u elementen eenvoudig van de<br />
ene naar de andere pagina kopiëren of verplaatsen.<br />
Zo kopieert of verplaatst u een object naar een andere pagina via het plakbord:<br />
1. Sleep het object vanaf de bronpagina naar het plakbord. (Houd de Ctrl-toets ingedrukt<br />
terwijl u sleept als u een kopie wilt maken van het object.)<br />
2. Geef de pagina weer waarheen u het object wilt kopiëren of verplaatsen (zie ‘Van pagina<br />
wisselen’ hierna).<br />
3. Sleep het object vanaf het plakbord naar de doelpagina. (Houd de Ctrl-toets ingedrukt als<br />
u een kopie wilt maken.)<br />
U kunt diverse weergaven instellen in <strong>Studio</strong> <strong>Webdesign</strong>. Zo kunt u bijvoorbeeld naar behoefte<br />
de volledige pagina weergeven in de werkomgeving of op een specifiek gedeelte van de<br />
pagina inzoomen, zodat u nauwkeurig kunt werken. Gebruik de schuifbalken onder in en aan<br />
de rechterkant van de werkomgeving als u de pagina en het plakbord wilt verplaatsen in het<br />
hoofdvenster. Merk op dat de weergave automatisch wordt gecentreerd wanneer u objecten<br />
naar de randen van het scherm sleept.<br />
U kunt ook het Pangereedschap op de werkbalk Beeld gebruiken om door het werkgebied<br />
te navigeren. Merk op dat deze werkbalk ook knoppen bevat waarmee u naar behoefte in of<br />
uit kunt zoomen op de pagina om deze op verschillende niveaus van detail te bewerken.<br />
32 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
U kunt ook het muiswieltje gebruiken om door de pagina te schuiven en het<br />
zoompercentage te wijzigen. Om in verticale richting te bladeren, draait u gewoon<br />
aan het muiswieltje. Als u in horizontale richting wilt bladeren, houdt u<br />
de Shift-toets ingedrukt terwijl u het muiswieltje gebruikt. Houd de Ctrl-toets<br />
ingedrukt terwijl u aan het muiswieltje draait om in of uit te zoomen.<br />
Van pagina wisselen<br />
U kunt op verschillende manieren te werk gaan om het gedeelte van de site weer te geven dat<br />
u wilt bewerken in <strong>Studio</strong> <strong>Webdesign</strong>. Het tabblad Site in de studio speelt hierbij als het ware<br />
een centrale rol. Hier vindt u behalve een boomstructuur van de website die de indeling van<br />
de pagina’s in uw site weergeeft (zie ‘Over sitestructuur en navigatiehulpmiddelen’ eerder in<br />
dit hoofdstuk) ook pictogrammen voor de verschillende stramienpagina’s die u hebt ingesteld<br />
voor uw site.<br />
Met de knop Tussen paginatitel en bestandsnaam wisselen kunt u naar behoefte de<br />
titels van de pagina’s (de standaardinstelling) of de bestandsnamen van de pagina’s weergeven<br />
in de boomstructuur. Via het tabblad Site kunt u eenvoudig een andere pagina selecteren,<br />
een specifieke pagina weergeven in de werkomgeving of de eigenschappen van een pagina<br />
wijzigen.<br />
U kunt natuurlijk ook het dialoogvenster Structuur van site (toegankelijk via de knop<br />
Structuur van site) of de paginakiezer in de statusbalk gebruiken om een specifieke pagina<br />
weer te geven in de werkomgeving.<br />
Verwar het selecteren van een pagina overigens niet met het weergeven van een pagina! Als<br />
u één keer klikt op een pagina/stramienpagina op het tabblad Site, wordt deze alleen geselecteerd.<br />
Dat is bijvoorbeeld zinvol als u de pagina wilt verwijderen uit de site. Als u de desbetreffende<br />
pagina/stramienpagina wilt weergeven in de werkomgeving, moet u er op dubbelklikken<br />
of een van de methoden gebruiken die hierna worden beschreven. Uit het uiterlijk<br />
van de pagina-ingangen op het tabblad Site kunt u snel afleiden of een pagina momenteel is<br />
geselecteerd en/of wordt weergegeven:<br />
Als een pagina is geselecteerd, heeft de overeenkomstige<br />
ingang in de boomstructuur een oranje kleur en<br />
wordt de paginanaam vet weergegeven.<br />
Een pagina die momenteel wordt weergegeven (zodat<br />
u deze kunt bewerken in de werkomgeving), is met<br />
een oogpictogram gemarkeerd. In dit voorbeeld is de<br />
pagina geselecteerd én wordt deze weergegeven in de<br />
werkomgeving. Let er ook op dat we in dit voorbeeld<br />
een andere stramienpagina hebben ingesteld voor de<br />
pagina (stramien B in plaats van stramien A).<br />
Als het pictogram van een stramienpagina boven aan<br />
het tabblad Site is gemarkeerd, is deze stramienpagina<br />
momenteel geselecteerd.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 33
Een stramienpagina die momenteel wordt weergegeven<br />
(zodat u deze kunt bewerken in de werkomgeving),<br />
is met een oogpictogram gemarkeerd. In dit<br />
voorbeeld wordt de stramienpagina wel weergegeven,<br />
maar is deze niet geselecteerd.<br />
Zo geeft u een specifieke pagina/stramienpagina weer:<br />
U kunt op verschillende manieren te werk gaan als u een welbepaalde pagina wilt weergeven<br />
in de werkomgeving:<br />
* Gebruik de knoppen in de statusbalk om van de ene naar de andere pagina te navigeren.<br />
OF<br />
Klik op de naam van de pagina of stramienpagina die u wilt weergeven in de paginakiezer.<br />
* Dubbelklik op de desbetreffende pagina/stramienpagina op het tabblad Site. Merk op dat<br />
in het vak Pagina’s onder aan het tabblad een boomstructuur wordt weergegeven van alle<br />
pagina’s in uw site, terwijl in het vak Stramienpagina’s bovenaan alleen pictogrammen<br />
worden weergegeven voor de stramienpagina’s die u hebt ingesteld voor de site. (Wellicht<br />
moet u op Stramienpagina’s klikken om dit vak uit te vouwen.)<br />
* Klik op de knop Structuur van site in de statusbalk of vlak boven het vak Pagina’s op<br />
het tabblad Site. Selecteer in het dialoogvenster dat daarop verschijnt de pagina die u wilt<br />
weergeven. (Dubbelklik zo nodig op een paginavermelding om de desbetreffende tak uit<br />
te vouwen.) Klik vervolgens op Weergeven.<br />
Ga als volgt te werk om een specifieke stramienpagina weer te geven:<br />
1. Klik op op het tabblad Site om het vak Stramienpagina’s uit te vouwen. Afhankelijk<br />
van het aantal stramienpagina’s dat u hebt ingesteld, worden hier een of meer<br />
pictogrammen weergegeven.<br />
2. Dubbelklik op het pictogram van de stramienpagina die u wilt weergeven.<br />
Zo wisselt u tussen de stramienpagina- en paginalaag voor de huidige pagina:<br />
* Klik op Pagina/stramienpagina in de statusbalk.<br />
OF<br />
34 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
* Kies Naar stramienpagina in het menu Beeld (of Pagina om naar de paginalaag terug te<br />
keren).<br />
Zo geeft u de startpagina van de site weer:<br />
* Klik op Startpagina uiterst links in de statusbalk.<br />
Pagina’s toevoegen, verwijderen<br />
en de volgorde ervan wijzigen<br />
Via het tabblad Site in de studio kunt u eenvoudig standaardpagina’s of HTML-pagina’s toevoegen<br />
en verwijderen op een willekeurig niveau in de sitestructuur, of via slepen-en-neerzetten<br />
de volgorde van de pagina’s wijzigen. Via dit tabblad kunt u ook nieuwe stramienpagina’s<br />
instellen voor de site, een andere stramienpagina toewijzen aan specifieke pagina’s en offsite<br />
links toevoegen. Gebruik het vak Stramienpagina’s boven aan het tabblad om met stramienpagina’s<br />
te werken en het vak Pagina’s (het vak met de boomstructuur van uw site) om bewerkingen<br />
uit te voeren op specifieke pagina’s. Merk op dat u behalve standaardpagina’s, HTMLpagina’s<br />
en offsite links ook een of meer pagina’s uit een sjabloon aan uw site kunt toevoegen<br />
(zie ‘Een website maken op basis van een sjabloon’ in hoofdstuk 2).<br />
Behalve het tabblad Site kunt u ook het dialoogvenster Structuur van site of Stramienpagina’s<br />
beheren en zowel de standaardmenu’s als snelmenu’s gebruiken om met pagina’s en<br />
stramienpagina’s te werken.<br />
Zo voegt u een nieuwe lege pagina toe:<br />
1. Klik op het pijltje naast de knop Toevoegen vlak boven het vak Pagina’s op het tabblad<br />
Site om het bijbehorende vervolgmenu te openen en kies Nieuwe lege pagina.<br />
2. Stel in het dialoogvenster Pagina invoegen de gewenste opties in voor de nieuwe pagina:<br />
• Typ in het invoervak Paginanaam een naam voor de nieuwe pagina. (Als u geen naam<br />
opgeeft, kent het programma er een standaardnaam aan toe.)<br />
• Selecteer in de vervolgkeuzelijst Stramienpagina de stramienpagina waarop u de nieuwe<br />
pagina wilt baseren (bijvoorbeeld Stramien A), of als u een sjabloon bewerkt, de<br />
stramienpagina van de sjabloon (bijvoorbeeld Standaardwaarden sjabloon).<br />
• Activeer het selectievakje Objecten kopiëren van pagina en selecteer een bronpagina<br />
in de bijbehorende vervolgkeuzelijst als u de designelementen van een andere pagina<br />
wilt kopiëren.<br />
• Geef in het groepsvak Positie aan waar u de nieuwe pagina wilt invoegen in de boomstructuur<br />
van de site. U hebt de keuze uit Voor, Na en Subpagina van. Activeer de<br />
gewenste optie en selecteer vervolgens een pagina in de vervolgkeuzelijst.<br />
3. Klik op OK.<br />
De nieuwe pagina wordt op de opgegeven positie ingevoegd in de boomstructuur. Indien<br />
nodig kunt u de pagina echter altijd naar een andere positie of naar een hoger of lager niveau<br />
verplaatsen, of er een andere stramienpagina aan toewijzen (zie ‘De volgorde van pagina’s’<br />
wijzigen en ‘Stramienpagina’s toewijzen’ verderop in dit hoofdstuk).<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 35
Merk op dat automatisch de laatst gekozen menuopdracht wordt uitgevoerd<br />
wanneer u op de knop Toevoegen klikt op het tabblad Site. De volgende<br />
keer dat u op deze knop klikt, verschijnt dus automatisch het dialoogvenster<br />
om een nieuwe lege pagina aan de site toe te voegen.<br />
In plaats van lege standaardpagina’s in te voegen, kunt u zich het leven natuurlijk ook een<br />
stuk gemakkelijker maken door ‘kant-en-klare’ pagina’s uit de meegeleverde sjablonen in te<br />
voegen. Als u de oorspronkelijke vormgeving van een sjabloonpagina wilt behouden, kunt u<br />
behalve de pagina zelf ook de bijbehorende stramienpagina in uw project ‘importeren.’<br />
Zo voegt u een nieuwe pagina toe uit een sjabloon:<br />
1. Selecteer in het vak Pagina’s (de boomstructuur van uw site) op het tabblad Site de pagina<br />
waarna u een nieuwe pagina wilt invoegen.<br />
2. Klik op het pijltje naast de knop Toevoegen vlak boven de boomstructuur om het<br />
bijbehorende vervolgmenu te openen en kies Nieuwe pagina op basis van sjabloon.<br />
3. Selecteer links in het dialoogvenster Nieuwe pagina toevoegen op basis van sjabloon<br />
een sjabloon. Selecteer vervolgens aan de rechterkant de pagina die u in uw project wilt<br />
invoegen door het bijbehorende selectievakje te activeren. (Activeer meerdere selectievakjes<br />
als u meer dan een sjabloonpagina wilt invoegen.) Gebruik indien nodig de zoomgereedschappen<br />
onder in het dialoogvenster om de afzonderlijke pagina’s aandachtiger te<br />
bestuderen.<br />
4. Via de vervolgkeuzelijst linksboven in het dialoogvenster kunt u aangeven of u ook de<br />
stramienpagina van de geselecteerde sjabloonpagina aan uw project wilt toevoegen. Kies<br />
een van de volgende opties:<br />
* Stramienpagina kopiëren: selecteer deze optie als u behalve de pagina zelf ook de bijbehorende<br />
stramienpagina aan uw project wilt toevoegen.<br />
* Stramienpagina vergelijken en kopiëren: als u deze optie selecteert, gaat het programma<br />
na of de desbetreffende stramienpagina al voorkomt in uw project. Als dat niet zo<br />
is, wordt deze aan uw project toegevoegd.<br />
* Geen stramienpagina: selecteer deze optie als u de stramienpagina van de pagina niet<br />
aan uw project wilt toevoegen.<br />
5. Klik op Openen. De geselecteerde pagina’s worden aan de boomstructuur toegevoegd.<br />
Behalve lege pagina’s en sjabloonpagina’s kunt u ook HTML-pagina’s aan uw sitestructuur<br />
toevoegen. Ook dergelijke pagina’s kunt u in de navigatiestructuur van uw site opnemen, net<br />
als gewone pagina’s.<br />
Zo voegt u een HTML-pagina toe:<br />
1. Selecteer in het vak Pagina’s (de boomstructuur van uw site) op het tabblad Site de pagina<br />
waarna u een nieuwe pagina wilt invoegen.<br />
2. Klik op het pijltje naast de knop Toevoegen vlak boven de boomstructuur om het<br />
bijbehorende vervolgmenu te openen en kies Nieuwe HTML-pagina.<br />
36 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Er wordt een nieuwe HTML-pagina toegevoegd aan de sitestructuur. Lees ‘HTML-pagina’s<br />
maken’ in hoofdstuk 12 voor meer informatie.<br />
U kunt ook een offsite link toevoegen aan de sitestructuur. Doorgaans gaat het hierbij om<br />
een afzonderlijke pagina of bron die losstaat van uw site, maar die u in de navigatiestructuur<br />
van uw site wilt opnemen (bijvoorbeeld een forum of blog die u beheert via Serif Web Resources).<br />
Dergelijke offsite links verschijnen zowel in de boomstructuur van uw website als in<br />
navigatie-elementen, zodat u ze kunt bewerken alsof het pagina’s zijn in uw site.<br />
Zo voegt u een offsite link toe:<br />
1. Selecteer in het vak Pagina’s op het tabblad Site de pagina waarna u een nieuwe pagina<br />
wilt invoegen.<br />
2. Klik op het pijltje naast de knop Toevoegen vlak boven de boomstructuur om het<br />
bijbehorende vervolgmenu te openen en kies Nieuwe offsite link.<br />
3. Selecteer links in het dialoogvenster Offsite link invoegen het type offsite link dat u wilt<br />
invoegen (naar een internetpagina, e-mailadres, enzovoort). Stel vervolgens aan de rechterkant<br />
het doel van de offsite link in (zie ‘Het doel van een hyperlink instellen’ in hoofdstuk<br />
11), en het venster waarin u het doel van de link wilt weergeven (als u Standaard<br />
kiest, wordt het ingestelde doelframe voor een navigatiebalk gebruikt).<br />
4. Typ in het invoervak Menunaam de naam die u de offsite link wilt geven in uw sitestructuur<br />
(het equivalent van de paginanaam).<br />
5. Klik op OK.<br />
Zo voegt u een nieuwe stramienpagina toe:<br />
1. Klik op boven aan het tabblad Site om het vak Stramienpagina’s uit te vouwen.<br />
2. Klik op Toevoegen vlak boven het vak met stramienpagina’s.<br />
OF<br />
1. Klik op Stramienpagina’s beheren.<br />
2. Klik in het dialoogvenster Stramienpagina’s beheren op Toevoegen en geef de gewenste<br />
breedte en hoogte op voor de stramienpagina als u aangepaste afmetingen wilt gebruiken.<br />
3. (Facultatief) Geef op het tabblad Achtergrond aan of u de instellingen van het kleurenschema<br />
voor de site wilt gebruiken of als u een aangepaste achtergrondkleur en/of paginakleur<br />
wilt instellen voor de stramienpagina. Activeer het selectievakje Afbeelding gebruiken<br />
als u een afbeelding als pagina-achtergrond wilt gebruiken.<br />
4. (Facultatief) Selecteer op het tabblad Overgangen de overgang die u wilt gebruiken bij het<br />
weergeven en/of verlaten van pagina’s die op deze stramienpagina zijn gebaseerd. Merk op<br />
dat u het selectievakje Instellingen voor stramienpagina negeren moet activeren voordat<br />
u een overgang kunt instellen.<br />
5. Klik op OK.<br />
Er verschijnt een nieuwe stramienpagina in het vak Stramienpagina’s boven aan het tabblad<br />
Site.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 37
Zo maakt u een kopie van een pagina:<br />
* Klik met de rechtermuisknop op een geselecteerde pagina op het tabblad Site en kies Pagina<br />
klonen in het snelmenu. Vlak onder de geselecteerde pagina wordt een identieke<br />
kopie van deze pagina ingevoegd.<br />
Zo verwijdert u een pagina of stramienpagina:<br />
1. Selecteer de pagina (of stramienpagina) die u wilt verwijderen op het tabblad Site.<br />
2. Klik op Verwijderen boven het vak Pagina’s of Stramienpagina’s, naargelang u een<br />
pagina dan wel een stramienpagina hebt geselecteerd.<br />
Wanneer u een pagina verwijdert, wordt automatisch gevraagd wat u wilt doen<br />
met hyperlinks die naar deze pagina verwijzen in uw site. U kunt dergelijke<br />
hyperlinks naar behoefte verwijderen of ze naar een andere pagina in uw site<br />
omleiden. (Desgewenst kunt u ook alle hyperlinks naar bladwijzers op deze<br />
pagina verwijderen.)<br />
De volgorde van pagina’s wijzigen<br />
De boomstructuur van uw site is niet alleen handig om pagina’s toe te voegen of te verwijderen,<br />
maar ook om de volgorde van uw pagina’s te wijzigen. Zoals eerder in dit hoofdstuk<br />
al werd uitgelegd, is deze boomstructuur een visueel hulpmiddel om de inhoud van uw site<br />
in ‘rubrieken’ en ‘niveaus’ in te delen, meerbepaald als een hiërarchie van bovenliggende pagina’s<br />
of ‘parents’ die naar onderliggende pagina’s of ‘childs’ vertakken. Ze helpt u niet alleen<br />
het overzicht te behouden over de inhoud van uw site, maar stelt het programma ook in staat<br />
uw logische pagina-indeling te vertalen naar een site waardoor internetgebruikers later vlot<br />
kunnen navigeren. Wanneer u speciale thema-afbeeldingen (‘navigatie-elementen’ genoemd)<br />
zoals Vorige/Volgende-knoppen en navigatiebalken hebt gebruikt, zult u merken dat deze<br />
zich automatisch aan de structuur van uw site aanpassen en meteen worden bijgewerkt als u<br />
de indeling van de pagina’s wijzigt!<br />
Op basis van deze parent/child-structuur kunt u eenvoudig de volgorde en indeling van de<br />
pagina’s in uw site wijzigen, ofwel via slepen-en-neerzetten ofwel met behulp van knoppen.<br />
Hierbij kunt u een pagina:<br />
* naar een andere positie op hetzelfde niveau verplaatsen;<br />
* naar een hoger niveau verplaatsen (parent);<br />
* naar een lager niveau verplaatsen (child).<br />
Zo verplaatst u een pagina:<br />
1. Geef het tabblad Site weer.<br />
2. Klik op de pagina die u wilt verplaatsen in de boomstructuur van uw site om deze te selecteren.<br />
38 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
3. Sleep de pagina naar een andere positie in de boomstructuur. Let op het symbool dat in<br />
plaats van de klassieke muisaanwijzer wordt weergegeven. Dit symbool geeft het niveau<br />
aan waarop de pagina zal worden ingevoegd:<br />
Wanneer als aanwijzer verschijnt, wordt de pagina op hetzelfde niveau ingevoegd (onder<br />
de pagina waarboven de aanwijzer zich momenteel bevindt).<br />
Wanneer als aanwijzer wordt weergegeven, wordt de pagina een child van de pagina<br />
waarboven de aanwijzer zich momenteel bevindt.<br />
Stramienpagina’s toewijzen<br />
U kunt op verschillende manieren te werk gaan om een andere stramienpagina toe te wijzen<br />
aan afzonderlijke pagina’s als u meerdere stramienpagina’s hebt ingesteld voor uw site. Merk<br />
op dat u een pagina niet noodzakelijk op een stramienpagina hoeft te baseren. Misschien wilt<br />
u op een geïmporteerde webpagina bijvoorbeeld alleen de oorspronkelijke designelementen<br />
zien, en niet de elementen die u op een van de stramienpagina’s voor de site hebt geplaatst.<br />
Onthoud in ieder geval dat u aan elke pagina in uw site maar één stramienpagina kunt toewijzen.<br />
(Lees ‘Pagina’s versus stramienpagina’s’ eerder in dit hoofdstuk voor meer informatie.)<br />
Zo wijst u een stramienpagina toe aan een pagina:<br />
* Klik in het vak Stramienpagina’s boven aan het tabblad Site op het pictogram van de<br />
stramienpagina en sleep het naar de pagina waaraan u deze stramienpagina wilt toewijzen<br />
in de boomstructuur van uw site.<br />
Met frames werken<br />
U kunt in <strong>Studio</strong> <strong>Webdesign</strong> een of meer frames, ook wel iFrames genoemd, op een pagina<br />
plaatsen die elk een andere pagina in uw website toegankelijk maken. Net als afbeeldingen<br />
kunt u deze frames op een willekeurige positie op de pagina plaatsen en er willekeurige afmetingen<br />
voor instellen. Hoewel dergelijke frames doorgaans aan een specifieke pagina in uw<br />
site zijn gekoppeld, kunt u er ook allerlei andere gekoppelde documenten in weergeven (zoals<br />
een pagina van een andere website op internet, een lokaal bestand, een intelligent object of<br />
opgeslagen gebruikersgegevens).<br />
iFrames zijn bijvoorbeeld handig als u op elke pagina in uw website steeds dezelfde informatie<br />
wilt weergeven (bijvoorbeeld een lijst met producten). Het enige wat u hiervoor hoeft te doen,<br />
is een iFrame op de stramienpagina van uw site plaatsen. U kunt zelfs nog een stapje verder<br />
gaan en selectieknoppen (of menuopties) aan het frame toevoegen, zodat gebruikers kunnen<br />
kiezen wat er wordt weergegeven in het frame. Als elke knop aan een andere pagina (maar telkens<br />
aan hetzelfde frame) is gekoppeld, kunt u de inhoud van het frame laten wijzigen, afhankelijk<br />
van de knop waarop wordt geklikt. Hiervoor kunt u gebruikmaken van de automatisch<br />
gegenereerde HTML-id (zie hoofdstuk 12) die u als doelframe (van het type Documentframe)<br />
moet opgeven bij het instellen van de hyperlinks voor de knoppen.<br />
Zorg ervoor dat de pagina die u in het frame wilt weergeven niet op dezelfde<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 39
stramienpagina is gebaseerd als de pagina waarop het frame zich bevindt wanneer<br />
u een iFrame op een stramienpagina plaatst. (Zo voorkomt u ongewenste<br />
pagina-in-pagina effecten.)<br />
Om een iFrame aan uw site toe te voegen, gebruikt u het gereedschap Frame met gekoppeld<br />
document. Merk op dat in het programma doelbewust de term ‘frame met gekoppeld document’<br />
wordt gebruikt om het concept van iFrames duidelijk te onderscheiden van dat van<br />
HTML-tekstframes en aangepaste tekstframes (waarmee u de positie van tekst op de pagina<br />
kunt bepalen).<br />
<strong>Studio</strong> <strong>Webdesign</strong> ondersteunt ook actieve documentframes. Dergelijke documentframes<br />
zijn handig wanneer u met frames werkt in uw website en een bepaalde pagina in een specifiek<br />
frame wilt openen. De naam van het actieve documentframe is een combinatie van de<br />
paginanaam en de naam van het frame. Zo verwijst ‘Startpagina’ in “Startpagina: ifrm_6”<br />
bijvoorbeeld naar de startpagina van uw site en ‘ifrm_6’ naar de naam van een frame dat automatisch<br />
is gegenereerd. U kunt pagina’s omleiden naar het frame waarin ze moeten worden<br />
weergegeven als u dat wilt. Dat is bijvoorbeeld handig wanneer ze worden gevonden door een<br />
zoekmachine. Om deze voorziening in te schakelen voor elke pagina die u in een frame wilt<br />
openen, kiest u Bewerken > Eigenschappen van pagina > Openen in actief documentframe<br />
en activeert u de optie Indien nodig naar dit frame omleiden.<br />
Zo maakt u een frame met een gekoppeld document:<br />
1. Selecteer de pagina waaraan u het frame wilt toevoegen.<br />
2. Klik op de werkbalk Webobjecten aan de linkerkant op Frame met gekoppeld document<br />
toevoegen. Let erop dat de muisaanwijzer een andere vorm krijgt. De handeling die<br />
u nu uitvoert, bepaalt de aanvankelijke grootte en positie van het frame.<br />
3. Klik met de muis op de positie waar u het frame wilt invoegen als u de standaardafmetingen<br />
wilt gebruiken voor het frame.<br />
40 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
OF<br />
Sleep met de muis op de pagina als u aangepaste afmetingen wilt instellen voor het frame.<br />
4. Zodra u het frame hebt toegevoegd, verschijnt er een dialoogvenster waarin u kunt instellen<br />
wat u precies wilt weergeven in dit frame. Geef via de lijst links in het dialoogvenster<br />
aan of u een pagina in uw site, een internetpagina, een intelligent object, een lokaal bestand,<br />
een bladwijzer, RSS-feed of gebruikersgegevens wilt weergeven in het frame.<br />
5. Kies de gewenste instellingen in het groepsvak Inhoud van frame (paginanaam, webadres,<br />
enzovoort). Welke informatie u hier precies moet opgeven, is afhankelijk van de<br />
optie die u hiervoor hebt geselecteerd.<br />
6. Kies in het groepsvak Instellingen voor inhoud van frame de gewenste weergaveopties<br />
voor het frame:<br />
* Actief documentframe: vink dit selectievakje aan als u wilt toestaan dat een pagina<br />
in een frame op een andere pagina wordt geopend wanneer op de overeenkomstige<br />
hyperlink wordt geklikt.<br />
* Randen weergeven: activeer dit selectievakje als u een dunne rand wilt weergeven rond<br />
het frame om de positie ervan aan te geven.<br />
* Transparante achtergrond: als de pagina die u in het frame wilt weergeven een transparante<br />
achtergrond heeft, kunt u er door deze optie in te schakelen voor zorgen dat de<br />
achtergrond die u hebt ingesteld voor uw site wordt weergegeven wanneer deze pagina<br />
wordt geopend in het frame. Als u deze optie uitschakelt, wordt voor een pagina met<br />
een transparante achtergrond standaard wit als achtergrondkleur ingesteld wanneer de<br />
pagina wordt geopend in het frame.<br />
* Schuifbalken: geef aan of u indien nodig automatisch schuifbalken wilt weergeven<br />
(Auto), of als u altijd (Ja) dan wel nooit (Nee) schuifbalken wilt weergeven in het<br />
frame.<br />
7. Klik op OK.<br />
Absolute URL’s<br />
Omdat frames een webpagina in een of meer deelvensters onderverdelen en in elk van deze<br />
deelvensters een ander HTML-document wordt weergegeven, dient u ervoor te zorgen dat<br />
met behulp van absolute URL’s naar elk onderdeel van het frame wordt verwezen. Zo stelt<br />
u zeker dat ook de pagina in het frame aan de lijst met favorieten wordt toegevoegd als een<br />
bezoeker deze pagina van uw site aan zijn favorieten toevoegt. Als u geen absolute URL’s gebruikt,<br />
is dat niet noodzakelijk het geval. Merk op dat u de basis-URL van uw site moet instellen<br />
als u gebruik wilt maken van absolute URL’s (het gedeelte van de URL dat alle pagina’s in<br />
uw site met elkaar gemeen hebben), bijvoorbeeld:<br />
https://www.easycomputing.com/URL/voorbeeld/<br />
Het programma gebruikt deze basis-URL om de rest van de URL samen te stellen.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 41
De lay-outhulpmiddelen gebruiken<br />
Lay-outhulplijnen zijn hulplijnen die u als visueel hulpmiddel kunt gebruiken om elementen<br />
nauwkeurig op de gewenste positie te plaatsen, ofwel ‘met het blote oog’ ofwel door het magnetische<br />
raster in te schakelen. Als het magnetische raster is ingeschakeld, wordt elk object<br />
dat u maakt, verplaatst of schaalt automatisch op de dichtstbijzijnde, zichtbare lay-outhulplijn<br />
uitgelijnd. U kunt verschillende soorten lay-outhulplijnen instellen in <strong>Studio</strong> <strong>Webdesign</strong> om<br />
elementen nauwkeurig uit te lijnen: paginamarges, rij-/kolomhulplijnen en liniaalhulplijnen.<br />
* Een van de hulpmiddelen die ongetwijfeld een grote invloed hebben op de uiteindelijke<br />
paginalay-out zijn vanzelfsprekend de ingestelde paginamarges. Doorgaans is dit een van<br />
de eerste zaken die u moet instellen wanneer u een volledig nieuwe site maakt. Stel altijd<br />
eerst de paginamarges in voordat u een webpagina begint te ontwerpen. Merk op dat de<br />
paginamarges met een blauw kader worden aangeduid op de pagina en dat het in feite om<br />
vier afzonderlijke hulplijnen gaat aan de boven-, onder-, linker- en rechterkant van de<br />
pagina. Desgewenst kunt u de afdrukmarges van uw printer als paginamarges instellen.<br />
* Een ander belangrijk lay-outhulpmiddel zijn de rij- en kolomhulplijnen, waarmee u een<br />
pagina in meerdere rijen of kolommen kunt onderverdelen (met blauwe stippellijnen aangeduid<br />
op de pagina).<br />
* Liniaalhulplijnen ten slotte zijn ‘kleverige’ rode hulplijnen die u kunt instellen door op<br />
een van de linialen te klikken (zie hierna). Deze hulplijnen zijn een handig hulpmiddel om<br />
objecten horizontaal of verticaal uit te lijnen.<br />
In tegenstelling tot framemarges en de kolommen in een frame hebben deze<br />
hulplijnen geen invloed op de indeling van de tekst in tekstframes. Het zijn<br />
veeleer visuele hulpmiddelen om de verschillende frames op een pagina op de<br />
kolomindeling van die pagina af te stemmen. De kolombreedte voor een frame<br />
komt doorgaans overeen met de breedte van de kolommen waarin de onderliggende<br />
pagina is onderverdeeld. Soms is een kolom in een frame echter twee tot<br />
drie keer zo breed als de kolommen op de onderliggende pagina.<br />
Zo stelt u de vereiste lay-outhulplijnen in:<br />
* Zorg ervoor dat er niets is geselecteerd en klik op op de optiebalk.<br />
Op het tabblad Marges kunt u de paginamarges instellen en hulplijnen definiëren om de<br />
pagina in rijen en kolommen onder te verdelen. Merk op dat u de linker-, rechter-, boven- en<br />
ondermarge afzonderlijk kunt instellen. Desgewenst kunt u zelfs uitgebalanceerde marges<br />
instellen (bovenaan evenveel witruimte als onderaan en links evenveel witruimte als rechts).<br />
In het groepsvak Rij- en kolomhulplijnen kunt u hulplijnen instellen om de pagina in rijen<br />
en kolommen in te delen. Hierbij kunt u nauwkeurig de afstand tussen de afzonderlijke rijen<br />
en kolommen instellen. Als u voor bepaalde rijen of kolommen een andere breedte wilt instellen<br />
dan voor andere, moet u eerst hulplijnen definiëren die gelijkmatig zijn gespreid over de<br />
pagina en deze vervolgens handmatig naar de gewenste positie slepen op de pagina.<br />
Op het tabblad Hulplijnen kunt u nauwkeurig de gewenste horizontale en verticale liniaal-<br />
42 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
hulplijnen instellen door absolute pixelcoördinaten op te geven. U kunt deze hulplijnen ook<br />
rechtstreeks instellen door op een van beide linialen te klikken in de werkomgeving en een<br />
horizontale dan wel verticale hulplijn vanuit de liniaal naar de pagina te slepen (zie ‘Hulplijnen<br />
instellen via de linialen’ verderop in deze paragraaf).<br />
Zo geeft u de ingestelde hulplijnen weer of verbergt u ze:<br />
* Schakel de optie Hulplijnen in of uit in het menu Beeld.<br />
Merk op dat u door deze optie in te schakelen ook de ingestelde liniaalhulplijnen weergeeft.<br />
Met de linialen werken<br />
De linialen kunnen voor verschillende doeleinden worden ingezet in <strong>Studio</strong> <strong>Webdesign</strong>:<br />
* als meetinstrument;<br />
* om liniaalhulplijnen te tekenen, zodat u objecten eenvoudig kunt uitlijnen;<br />
* om het puntraster en (onrechtstreeks) het magnetische raster te definiëren.<br />
De werkelijke afstand tussen de verschillende maatstreepjes op de linialen is afhankelijk van<br />
het huidige zoompercentage. Als het zoompercentage bijvoorbeeld op 50% is ingesteld, zijn<br />
de streepjes verder van elkaar verwijderd dan wanneer een zoompercentage van 150% is ingesteld.<br />
Als u nauwkeuriger wilt werken, moet u inzoomen op de pagina.<br />
De linialen aanpassen<br />
Standaard bevinden de horizontale en verticale liniaal zich respectievelijk boven aan en aan<br />
de linkerkant van het programmavenster. Het snijpunt tussen beide linialen bevindt zich in<br />
de linkerbovenhoek van het plakbord. Het nulpunt bevindt zich standaard in de linkerbovenhoek<br />
van de pagina (het witte werkblad). U kunt deze instellingen echter wijzigen.<br />
Zo wijzigt u het nulpunt van de linialen:<br />
* Klik op het driehoekje in het snijpunt van beide linialen en sleep het naar een nieuwe<br />
positie op de pagina of het plakbord. (Zorg ervoor dat u alleen het driehoekje versleept!)<br />
OF<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 43
1. Kies Extra > Opties > Linialen.<br />
2. Stel een nieuwe oorsprong in voor de horizontale en/of verticale liniaal.<br />
Zo verplaatst u de linialen:<br />
* Sleep het driehoekje in het snijpunt van beide linialen naar een andere positie terwijl u de<br />
Shift-toets ingedrukt houdt. Merk op dat het nulpunt hierdoor ongewijzigd blijft.<br />
OF<br />
* Dubbelklik op het snijpunt van beide linialen om de linialen en het nulpunt naar de linkerbovenhoek<br />
van de pagina te verplaatsen. Als er een object is geselecteerd, worden de<br />
linialen en het nulpunt naar de linkerbovenhoek van het object verplaatst. Deze voorziening<br />
is handig als u objecten op de pagina wilt meten.<br />
Zo herstelt u het oorspronkelijke nulpunt en de oorspronkelijke positie van de<br />
linialen:<br />
* Dubbelklik op het driehoekje in het snijpunt van beide linialen.<br />
Zo voorkomt u dat de linialen per ongeluk worden verplaatst:<br />
* Kies Extra > Opties, klik op Linialen en activeer het selectievakje Linialen vergrendelen.<br />
De linialen als meetlat gebruiken<br />
U kunt de linialen vanzelfsprekend ook als meetlat gebruiken. Wanneer u de muisaanwijzer<br />
verplaatst, verschijnt in beide linialen een volle lijn die de huidige horizontale en verticale<br />
positie van de aanwijzer aangeeft. Als u op een object klikt om het te selecteren, verschijnen<br />
er in beide linialen blauwe balken die de linker-, rechter-, boven- en onderrand van het geselecteerde<br />
object aangeven. Elk van deze balken heeft een nulpunt dat relatief is ten opzichte<br />
van de linkerbovenhoek van het object, zodat u in één oogopslag de afmetingen van het object<br />
kunt controleren.<br />
Hulplijnen instellen via de linialen<br />
U kunt horizontale en verticale liniaalhulplijnen instellen via de linialen. Het gaat hierbij om<br />
rode lijnen die niet worden afgedrukt en die u kunt gebruiken om koptitels, afbeeldingen en<br />
andere lay-outelementen op de pagina nauwkeurig uit te lijnen.<br />
44 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
1. Klik op de horizontale of verticale liniaal op de positie waar de hulplijn moet verschijnen<br />
om een horizontale respectievelijk verticale hulplijn te tekenen. Houd de Alt-toets<br />
ingedrukt voordat u op een liniaal klikt om een horizontale hulplijn te tekenen vanuit de<br />
verticale liniaal en omgekeerd.<br />
2. Sleep de aanwijzer vanuit de liniaal naar de positie waar u de horizontale of verticale hulplijn<br />
wilt toevoegen in het werkgebied. Merk op dat de huidige positie van de hulplijn met<br />
een rode stippellijn wordt aangeduid terwijl u sleept. Zodra u de muisknop loslaat, verschijnt<br />
een volle rode lijn. Bekijk de informatie in de statusbalk terwijl u sleept om nauwkeurig<br />
de positie van de hulplijn te bepalen.<br />
U kunt de hulplijnen achteraf naar behoefte bewerken:<br />
* Als u een hulplijn wilt verplaatsen, beweegt u met de muisaanwijzer boven de hulplijn<br />
totdat deze de vorm krijgt van een dubbele pijl en sleept u de hulplijn terwijl u de linkermuisknop<br />
ingedrukt houdt naar de gewenste positie.<br />
* Om een hulplijn te verwijderen, sleept u deze gewoon naar het plakbord rondom de pagina.<br />
* Kies Extra > Opties, klik op Lay-out en activeer het selectievakje Hulplijnen vergrendelen<br />
als u de hulplijnen wilt vergrendelen.<br />
* Als u nauwkeurig de positie van de hulplijnen wilt instellen, klikt u op op de<br />
optiebalk terwijl er niets is geselecteerd en activeert u het tabblad Hulplijnen. Hier kunt<br />
u hulplijnen toevoegen en verwijderen en/of de positie van bepaalde hulplijnen wijzigen.<br />
Klik op Alle verwijderen als u in één keer alle hulplijnen wilt verwijderen.<br />
Kleverige hulplijnen<br />
Hulplijnen zijn standaard ‘kleverig’ in die zin dat wanneer u ze naar een andere positie sleept<br />
op de pagina automatisch ook alle objecten worden verplaatst die erop zijn uitgelijnd. U kunt<br />
deze voorziening indien nodig echter op elk moment uitschakelen, of ervoor zorgen dat afzonderlijke<br />
objecten niet aan een hulplijn blijven ‘kleven’ wanneer u deze verplaatst.<br />
Zo zorgt u ervoor dat afzonderlijke objecten niet aan een hulplijn blijven kleven:<br />
1. Selecteer het desbetreffende object.<br />
2. Klik op een van beide rode driehoekjes die worden weergegeven op het punt waar het<br />
object aan de hulplijn is verankerd. Let erop dat het symbool verschijnt wanneer u de<br />
aanwijzer boven een van deze driehoekjes plaatst.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 45
Klik op het rode driehoekje om het object<br />
van de hulplijn los te maken<br />
Het driehoekje wordt zwart en het object is niet<br />
langer aan de hulplijn verankerd<br />
3. Als u de rode hulplijn nu naar een andere positie sleept, blijft het object niet meer aan de<br />
hulplijn kleven.<br />
U kunt het object weer aan een hulplijn doen kleven door het tegen de desbetreffende<br />
hulplijn te plaatsen.<br />
Zo schakelt u deze voorziening in en uit:<br />
* Kies Extra > Opties > Lay-out en schakel het selectievakje Kleverige hulplijnen uit.<br />
Merk op dat objecten die voorheen aan een hulplijn waren verankerd aan deze hulplijn verankerd<br />
blijven, zelfs nadat u de voorziening hebt uitgeschakeld. Als u dit wilt voorkomen, moet<br />
u deze objecten een voor een van de hulplijnen losmaken.<br />
Het puntraster gebruiken<br />
Het puntraster is een matrix van punten of lijnen die is gebaseerd op de<br />
maateenheid die voor de linialen is ingesteld. Dit raster bedekt de pagina<br />
en het plakbord rondom de pagina en is net als de hulplijnen die u via de<br />
linialen kunt tekenen een handig visueel hulpmiddel om objecten uit te<br />
lijnen.<br />
Zo schakelt u het puntraster in of uit:<br />
* Schakel de optie Puntraster in of uit in het menu Beeld.<br />
OF<br />
* Kies Extra > Opties > Vangen en schakel het selectievakje Puntraster in of uit.<br />
U kunt ook de afstand tussen de rasterlijnen, de rasterstijl en de rasterkleur instellen via het<br />
dialoogvenster Opties.<br />
46 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Thema-afbeeldingen toevoegen en bewerken<br />
Het tabblad Thema-afbeeldingen in de studio bevat tientallen kant-en-klare objecten die<br />
overzichtelijk zijn ingedeeld volgens thema en die u eenvoudig via slepen-en-neerzetten<br />
aan uw pagina’s kunt toevoegen. (U kunt natuurlijk ook het overeenkomstige dialoogvenster<br />
gebruiken om deze objecten toe te voegen.) Het gaat hierbij om vooraf gedefinieerde<br />
objecten, gaande van statische designelementen zoals opsommingstekens en scheidingslijnen<br />
tot interactieve navigatie-elementen zoals Vorige/Volgende-knoppen en navigatiebalken die<br />
zich automatisch aan de structuur van uw site aanpassen. Thema-afbeeldingen gedragen zich<br />
als afzonderlijke objecten, die zo zijn geprogrammeerd dat automatisch een specifieke actie<br />
wordt uitgevoerd als u ze schaalt, er met de muisaanwijzer over beweegt op een webpagina,<br />
enzovoort. Waar mogelijk kunt u de tekst en allerlei andere eigenschappen van een themaafbeelding<br />
bewerken nadat u deze aan een pagina hebt toegevoegd. U kunt ook eenvoudig een<br />
ander visueel thema instellen voor de thema-afbeeldingen die u aan uw site hebt toegevoegd.<br />
Hierbij kunt u naar behoefte alle thema-afbeeldingen in de site of alleen specifieke afbeeldingen<br />
bijwerken.<br />
U kunt thema-afbeeldingen op twee manieren selecteren en weergeven op het tabblad Thema-afbeeldingen:<br />
volgens type of volgens set. Een ‘type’ duidt een bepaalde categorie designelementen<br />
aan. Zo zijn bullets en knoppen bijvoorbeeld twee verschillende typen thema-afbeeldingen.<br />
Een ‘set’ is een verzameling elementen met dezelfde grafische vormgeving,<br />
waarbij van elk type één element beschikbaar is. Elke set heeft een beschrijvende naam, zoals<br />
Helder, Snoep, Zuiver, enzovoort. In het onderstaande schema ziet u het verband tussen deze<br />
sets en typen:<br />
Gebruik altijd thema-afbeeldingen uit dezelfde set, zodat alle designelementen in uw site dezelfde<br />
grafische vormgeving hebben. Als u later een andere ‘look’ wilt, selecteert u gewoon<br />
een andere set op het tabblad Thema-afbeeldingen. Dan worden alle thema-afbeeldingen in<br />
de site automatisch bijgewerkt.<br />
Zo voegt u een thema-afbeelding toe aan een pagina:<br />
1. Geef het tabblad Thema-afbeeldingen weer in de studio.<br />
2. Selecteer via de vervolgkeuzelijst boven aan het tabblad de gewenste categorie themaafbeeldingen.<br />
Klik op Huidige site om alle thema-afbeeldingen weer te geven die u al hebt gebruikt in<br />
de site. Dat is bijvoorbeeld zinvol als u een bepaalde thema-afbeelding wilt hergebruiken.<br />
OF<br />
Vouw de lijst Sets of Typen uit en selecteer een categorie.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 47
OF<br />
Selecteer Thema-afbeeldingen als categorie en klik vervolgens op Huidige site, Sets of<br />
Typen in de galerie onder aan het tabblad. Klik tot slot op de miniatuurweergave van de<br />
set of het type thema-afbeeldingen dat u wilt weergeven.<br />
3. Blader door de lijst met beschikbare elementen nadat u een categorie hebt geselecteerd<br />
en klik op een miniatuur om de overeenkomstige thema-afbeelding in het midden van de<br />
pagina in te voegen in de werkomgeving. U kunt de miniatuur ook vanuit de galerie naar<br />
een specifieke positie op de pagina slepen.<br />
OF<br />
1. Klik op Thema-afbeelding invoegen in het vervolgmenu Navigatiehulpmiddelen<br />
toevoegen op de werkbalk Webobjecten aan de linkerkant.<br />
2. Selecteer het gewenste type thema-afbeeldingen in de vervolgkeuzelijst boven in het dialoogvenster<br />
en klik vervolgens op een van de thumbnails in de galerie om een set te kiezen.<br />
3. Klik op OK.<br />
Als u op de miniatuur van een thema-afbeelding klikt in de galerie op het<br />
tabblad Thema-afbeeldingen, wordt de standaardbewerking voor die themaafbeelding<br />
uitgevoerd (doorgaans de afbeelding toevoegen). Klik met de rechtermuisknop<br />
op een miniatuur of klik op het pijltje in de rechterbenedenhoek<br />
om het vervolgmenu met andere mogelijke bewerkingen weer te geven, zoals<br />
Invoegen, Vervangen in selectie en Vervangen in site.<br />
Nadat u thema-afbeeldingen hebt toegevoegd aan uw site, kunt u er snel en eenvoudig een<br />
ander visueel thema voor instellen. Hierbij kunt u naar behoefte alle thema-afbeeldingen in<br />
de site of alleen specifieke afbeeldingen bijwerken.<br />
Zo stelt u een ander thema in voor de thema-afbeeldingen in uw site:<br />
1. Geef het tabblad Thema-afbeeldingen weer in de studio.<br />
2. Vouw via de vervolgkeuzelijst bovenaan de lijst Sets uit en selecteer het thema dat u wilt<br />
gebruiken.<br />
OF<br />
Selecteer Thema-afbeeldingen als categorie en klik vervolgens op Sets in de galerie. Klik tot<br />
slot op de miniatuur van het thema dat u wilt toepassen.<br />
3. In plaats van op een miniatuur te klikken in de galerie, kunt u ook het snelmenu of het<br />
vervolgmenu voor de desbetreffende thema-afbeelding openen. Via dit menu kunt u verschillende<br />
bewerkingen uitvoeren:<br />
* Een specifieke thema-afbeelding bijwerken: selecteer de thema-afbeelding en let op<br />
het type dat in de statusbalk wordt weergegeven. Klik vervolgens met de rechtermuisknop<br />
op de miniatuur van hetzelfde type element in de galerie en kies Vervangen in<br />
selectie in het snelmenu.<br />
48 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
* Een bepaald type elementen bijwerken: selecteer een thema-afbeelding die representatief<br />
is voor het type elementen dat u wilt bijwerken, klik met de rechtermuisknop op<br />
de miniatuur van hetzelfde type elementen in de galerie en kies Vervangen in site in het<br />
snelmenu.<br />
* Alle thema-afbeeldingen in uw site bijwerken: klik op de miniatuur toepassen<br />
in de galerie onder aan het tabblad. Hiermee werkt u alle thema-afbeeldingen<br />
in de site bij, ongeacht hun type.<br />
Elk thema dat u kiest, neemt automatisch het huidige kleurenschema voor de<br />
site over. U kunt dit kleurenschema op elk moment wijzigen, maar dan verandert<br />
ook het uiterlijk van uw thema-afbeeldingen.<br />
Zo verplaatst of schaalt u een thema-afbeelding:<br />
* Sleep vanuit het midden van het selectiekader als u een thema-afbeelding wilt verplaatsen.<br />
Om de grootte van een thema-afbeelding te wijzigen, versleept u een van de grepen of<br />
randen van het selectiekader.<br />
U kunt de tekst van afzonderlijke thema-afbeeldingen bewerken, en allerlei eigenschappen<br />
instellen voor een specifieke thema-afbeelding of voor alle thema-afbeeldingen van een bepaalde<br />
set of een bepaald type.<br />
Zo bewerkt u een of meer thema-afbeeldingen:<br />
1. Dubbelklik op het desbetreffende element. (Als u een type of set wilt bijwerken, selecteert<br />
u een thema-afbeelding die representatief is voor dat type of die set.)<br />
OF<br />
Selecteer het element en klik op de knop Bewerken.<br />
2. Gebruik het dialoogvenster om de instellingen voor de rollover-modi Standaard en Over<br />
van de thema-afbeelding te wijzigen. Welke eigenschappen u precies kunt wijzigen, hangt<br />
af van het type thema-afbeelding dat u hebt geselecteerd. Doorgaans kunt u echter de<br />
tekst, de tekstkleur en het lettertype wijzigen. Op de meeste tabbladen (op die voor tekst<br />
na) kunt u afzonderlijke instellingen kiezen voor de geselecteerde thema-afbeelding, thema-afbeeldingen<br />
van dit type en/of thema-afbeeldingen in de huidige set. Merk op dat<br />
de gewijzigde instellingen alleen op thema-afbeeldingen in de huidige site worden toegepast.<br />
3. Klik op OK om de wijzigingen toe te passen.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 49
De galerij gebruiken<br />
Het tabblad Galerij is een soort container waarin u designelementen (zoals Flash-banners,<br />
tekstblokken en zelfs niet-gekoppelde tekstframes en HTML-fragmenten) kunt opslaan die<br />
u wilt hergebruiken, hetzij in dezelfde site hetzij in andere sites. Zodra u een ontwerp aan<br />
de galerij hebt toegevoegd, is het ook beschikbaar voor alle toekomstige sites die u met dit<br />
programma ontwerpt!<br />
De galerij bevat ook allerlei kant-en-klare designelementen die u naar behoefte kunt aanpassen<br />
en als uitgangspunt voor uw eigen ontwerpen kunt gebruiken. Deze designelementen zijn<br />
overzichtelijk ingedeeld in categorieën, zodat u het gezochte element snel terugvindt. (Op de<br />
resource-cd bij het programma zijn nog meer designelementen beschikbaar.)<br />
Zo geeft u het tabblad Galerij weer:<br />
* Het tabblad Galerij is standaard in de tabgroep met de tabbladen Site, Objectstijlen en<br />
Thema-afbeeldingen ondergebracht in de studio. Kies Beeld > <strong>Studio</strong>tabs en activeer de<br />
optie Tabblad Galerij als dit tabblad bij u niet wordt weergegeven.<br />
De galerij bestaat uit twee delen: (1) een lijst met categorieën (bovenaan) en (2) een lijst met<br />
ontwerpen (onderaan) waar miniaturen worden weergegeven van de ontwerpen die beschikbaar<br />
zijn in de geselecteerde categorie. Als u een ontwerp wilt gebruiken op een pagina, sleept<br />
u het gewoon naar de gewenste positie op de pagina vanuit de galerij.<br />
U kunt ook uw eigen ontwerpen opslaan in de galerij (onder Persoonlijke ontwerpen of in<br />
een gebruikergedefinieerde categorie) als u die later wilt hergebruiken in andere projecten.<br />
Wanneer u het product pas hebt geïnstalleerd, is de galerie Persoonlijke ontwerpen vanzelfsprekend<br />
leeg. U kunt echter naar behoefte items toevoegen aan de galerij, die u indien nodig<br />
op elk moment weer kunt verwijderen. Hierbij kunt u elk element een specifieke naam geven,<br />
zodat u het later sneller terugvindt.<br />
U kunt noch ontwerpen toevoegen aan de vooraf gedefinieerde categorieën<br />
noch er ontwerpen uit verwijderen.<br />
50 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Zo gebruikt u een ontwerp uit de galerij:<br />
* Selecteer het ontwerp dat u wilt gebruiken en sleep het vanuit de galerij naar de pagina.<br />
Merk op dat het ontwerp hierbij niet uit de galerij wordt verwijderd.<br />
Zo geeft u een specifieke categorie elementen weer:<br />
1. Klik op de tab Galerij in de studio.<br />
2. Open de vervolgkeuzelijst boven aan het tabblad en selecteer een map of categorie. Standaard<br />
worden de items uit de eerste categorie in de geselecteerde map weergegeven.<br />
Zo creëert, verwijdert of hernoemt u categorieën in uw lijst met persoonlijke ontwerpen:<br />
* Klik terwijl het tabblad Galerij actief is op de knop uiterst rechts om het vervolgmenu<br />
voor het tabblad te openen en kies Categorie toevoegen, Categorie verwijderen of Naam<br />
van categorie wijzigen.<br />
Als u een categorie toevoegt, verschijnt er een dialoogvenster waarin u de nieuwe categorie<br />
een naam kunt geven. Als u een categorie wilt verwijderen of deze een andere naam wilt geven,<br />
selecteert u die categorie voordat u de overeenkomstige optie kiest in het vervolgmenu.<br />
Wanneer u een categorie verwijdert, worden ook alle ontwerpen verwijderd die<br />
in die categorie zijn opgeslagen!<br />
Zo kopieert of verplaatst u een object naar de galerij:<br />
1. Selecteer via de vervolgkeuzelijst boven aan het tabblad Galerij de categorie Persoonlijke<br />
ontwerpen of een van de subcategorieën van deze categorie.<br />
2. Sleep het object vanaf de pagina naar de lijst met ontwerpen onder aan het tabblad als u<br />
het naar de galerij wilt verplaatsen. Om een object naar de galerij te kopiëren, houdt u de<br />
Ctrl-toets ingedrukt voordat u begint te slepen.<br />
3. Als de optie Om naam vragen is ingeschakeld in het vervolgmenu voor het tabblad (toegankelijk<br />
via de knop ), wordt automatisch gevraagd een naam op te geven voor het<br />
nieuwe ontwerp. (U kunt de naam van het ontwerp later altijd nog wijzigen.) Als u geen<br />
naam opgeeft, wordt standaard ‘Naamloos’ toegekend als naam.<br />
4. Er verschijnt een miniatuur van uw ontwerp in de lijst met ontwerpen onder aan het tabblad.<br />
Merk op dat onder deze miniatuur de naam wordt weergegeven die u hiervoor hebt<br />
opgegeven.<br />
Zo verwijdert u een ontwerp uit de galerij:<br />
* Plaats de muisaanwijzer boven de miniatuur van het ontwerp, klik op het pijltje in de<br />
rechterbenedenhoek en kies Ontwerp verwijderen in het vervolgmenu.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 51
Site-eigenschappen instellen<br />
Site-eigenschappen zijn globale instellingen die doorheen de gehele website worden toegepast.<br />
Tot deze eigenschappen behoren onder andere de pagina-instellingen, de gekozen instellingen<br />
voor de HTML-uitvoer en het bijhouden van gebruikersstatistieken, identificatiegegevens<br />
zoals de naam van de auteur en een copyrightvermelding, en de gekozen instellingen<br />
om uw site te optimaliseren voor zoekmachines. Doorgaans dient u deze eigenschappen in<br />
te stellen bij het plannen van uw website. Eenmaal u de gewenste instellingen hebt gekozen,<br />
hoeft u ze normaal gesproken niet meer te veranderen (hoewel u deze instellingen achteraf<br />
natuurlijk op elk moment kunt wijzigen).<br />
Merk op dat bepaalde site-eigenschappen, zoals de pagina-instellingen en de instellingen om<br />
uw site te optimaliseren voor zoekmachines, ook toegankelijk zijn vanuit het dialoogvenster<br />
Eigenschappen van pagina (zie verderop in dit hoofdstuk). Zo kunt u bepaalde eigenschappen<br />
die op de gehele site van toepassing zijn indien nodig onderdrukken voor specifieke pagina’s,<br />
of die aanvullen met lokale instellingen die uitsluitend voor welbepaalde pagina’s gelden.<br />
Zo controleert en/of wijzigt u de site-eigenschappen:<br />
* Kies Eigenschappen van site in het menu Bestand. Het dialoogvenster Eigenschappen<br />
van site verschijnt.<br />
Dit dialoogvenster is in verschillende tabbladen onderverdeeld. Op elk van deze tabbladen<br />
kunt u specifieke site-eigenschappen instellen.<br />
Tabblad<br />
Opties<br />
Eigenschap<br />
Standaard bestandsextensie<br />
De webpagina’s die u publiceert met dit programma hebben standaard<br />
de bestandsextensie .html. Op sommige webservers moet u mogelijk<br />
echter een andere extensie gebruiken. Via deze vervolgkeuzelijst kunt u<br />
de standaardextensie wijzigen.<br />
Standaarduitlijning pagina’s<br />
Hier kunt u een standaarduitlijning kiezen voor uw pagina’s.<br />
Absolute tekengrootte afdwingen<br />
De tekengrootte van de tekst op uw webpagina’s is standaard afhankelijk<br />
van de browserinstellingen die de gebruiker heeft gekozen. U kunt<br />
er echter voor zorgen dat tekst altijd met dezelfde tekengrootte wordt<br />
weergegeven.<br />
Standaardafmetingen van pagina’s<br />
De standaardinstellingen die u hier kiest, bepalen de breedte en hoogte<br />
van nieuwe stramienpagina’s, die op hun beurt de grootte bepalen van<br />
de pagina’s die erop zijn gebaseerd.<br />
HTML-uitvoer<br />
U kunt uit verschillende coderingsmethoden kiezen en aangeven of u<br />
al dan niet automatisch HTML-id’s wilt genereren voor elk object op<br />
een pagina.<br />
52 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Tabblad<br />
Zoeken<br />
Zoekmachines<br />
Identificatie<br />
Afbeeldingen<br />
Favorieten<br />
Samenvatting/<br />
Statistieken<br />
Analyse van site<br />
Basis-URL<br />
Eigenschap<br />
Beschrijving voor zoekmachines<br />
Hier kunt u een beschrijving van uw site en trefwoorden opgeven.<br />
Instellingen voor zoekmachines<br />
Hier kunt u aangeven of zoekmachines en robots pagina’s in uw site<br />
mogen analyseren en indexeren. Een sitemap-bestand bevat webpagina’s<br />
die mogen worden geïndexeerd, terwijl een Robots-metatag of een<br />
Robots-bestand (robots.txt) bepaalt welke pagina’s niet mogen worden<br />
geïndexeerd.<br />
Naam van auteur/copyrightvermelding<br />
Hier kunt u metatags met de naam van de auteur, een copyrightvermelding<br />
en de publicatiedatum van uw site aan de headers van uw webpagina’s<br />
toevoegen.<br />
Algemene exportopties voor afbeeldingen<br />
Hier kunt u de standaardinstellingen kiezen voor het exporteren van<br />
afbeeldingen.<br />
Favorieten<br />
Hier kunt u het pictogram (*.ico) instellen dat u wilt weergeven wanneer<br />
internetgebruikers uw website aan hun lijst met Favorieten toevoegen.<br />
<strong>Pro</strong>jecteigenschappen en statistieken<br />
Hier kunt u de huidige projecteigenschappen weergeven en/of wijzigen.<br />
Gebruikersstatistieken<br />
Op dit tabblad kunt u aangeven of u gebruikersstatistieken wilt bijhouden<br />
voor uw site.<br />
Absolute URL’s<br />
Hier kunt u de basis-URL van uw site opgeven. Dat is bijvoorbeeld nodig<br />
bij het instellen van absolute URL’s voor RSS-feeds of als u een sitemap-bestand<br />
gebruikt om uw site te optimaliseren voor zoekmachines.<br />
De standaard bestandsextensie instellen<br />
Standaard worden de verschillende pagina’s in uw site als HTML-bestanden geëxporteerd<br />
op het moment dat u uw project publiceert. U kunt uw webpagina’s echter ook in een andere<br />
indeling exporteren als u bij uw webhost een andere bestandsextensie moet gebruiken. Zo<br />
wijzigt u de standaard bestandsextensie:<br />
1. Kies Eigenschappen van site in het menu Bestand.<br />
2. Klik op de tab Opties en selecteer een andere bestandsextensie in de overeenkomstige<br />
vervolgkeuzelijst.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 53
De paginagrootte en het type uitlijning instellen<br />
De standaardafmetingen die u op het tabblad Opties van het dialoogvenster Eigenschappen<br />
van site instelt, bepalen de breedte en hoogte van stramienpagina’s, die op hun beurt<br />
de grootte bepalen van pagina’s die erop zijn gebaseerd. Analoog hieraan bepaalt de standaarduitlijning<br />
die u instelt voor de site (Links of Centreren) hoe de inhoud van uw pagina’s<br />
wordt uitgelijnd wanneer ze in een browser worden weergegeven.<br />
Een van de eerste dingen die u wellicht moet doen als u een nieuwe site maakt, is de ingestelde<br />
standaardafmetingen controleren en die zo nodig aanpassen. Merk op dat u de standaardafmetingen<br />
kunt negeren voor afzonderlijke stramienpagina’s en dat u een aangepaste<br />
breedte en hoogte kunt instellen voor pagina’s die niet op een stramienpagina zijn gebaseerd<br />
(bijvoorbeeld voor geïmporteerde webpagina’s). U kunt de afmetingen van uw pagina’s op elk<br />
moment aanpassen, maar onthoud dat u beter van meet af aan de juiste afmetingen instelt om<br />
te voorkomen dat dergelijke wijzigingen een nefaste invloed hebben op de paginalay-out!<br />
Doorgaans kunt u het beste een breedte van 750 tot 800 pixels instellen voor uw stramienpagina’s,<br />
zodat ze volledig worden weergegeven op een standaardbeeldscherm. Zo voorkomt u<br />
dat gebruikers horizontaal moeten schuiven.<br />
Wat de hoogte van uw stramienpagina’s betreft, kunt u het beste de paginalengte van de<br />
kortste pagina waarvoor u deze stramienpagina’s wilt gebruiken als waarde instellen. <strong>Studio</strong><br />
<strong>Webdesign</strong> baseert zich immers altijd op de paginalengte die in de pagina-eigenschappen is<br />
ingesteld bij het exporteren van de afzonderlijke pagina’s in uw site, zodat pagina’s dus gerust<br />
langer kunnen zijn dan de stramienpagina waarop ze zijn gebaseerd. Uw pagina’s worden dus<br />
altijd volledig geëxporteerd door het programma. U hoeft met andere woorden niet te vrezen<br />
dat pagina’s die langer zijn dan de lengte die u hier hebt ingesteld niet volledig zichtbaar zullen<br />
zijn in de uiteindelijke website.<br />
<strong>Studio</strong> <strong>Webdesign</strong> biedt u de mogelijkheid bepaalde elementen op een stramienpagina onder<br />
aan de pagina te verankeren (met de opdracht Onder aan pagina plaatsen in het menu<br />
Schikken). Zo stelt u zeker dat elementen die onder aan de pagina thuishoren, zoals copyrightvermeldingen<br />
en navigatiebalken of navigatieknoppen die u onderaan hebt geplaatst,<br />
altijd onder aan uw webpagina’s worden weergegeven, ongeacht de paginahoogte.<br />
Zo stelt u de standaardafmetingen van uw pagina’s in:<br />
* Kies Eigenschappen van site in het menu Bestand, klik op de tab Opties en stel de gewenste<br />
breedte en/of hoogte in voor stramienpagina’s.<br />
U kunt ook de standaarduitlijning van pagina’s wijzigen of een aangepaste uitlijning instellen<br />
voor specifieke pagina’s.<br />
Zo stelt u de standaarduitlijning van pagina’s in:<br />
* Kies Eigenschappen van site in het menu Bestand, klik op de tab Opties en kies de gewenste<br />
instelling in de vervolgkeuzelijst Standaarduitlijning pagina’s.<br />
U kunt de standaardinstellingen voor de afmetingen en uitlijning van pagina’s negeren voor<br />
specifieke pagina’s. Hoe u dat doet, leest u in ‘Pagina-eigenschappen instellen’ verderop in dit<br />
hoofdstuk.<br />
54 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Auteurs- en copyrightinformatie opgeven<br />
* Gebruik het tabblad Identificatie als u de content van uw site auteursrechtelijk wilt beschermen.<br />
Typ de naam van de auteur en een copyrightvermelding in de overeenkomstige<br />
invoervakken. Merk op dat deze informatie niet rechtstreeks op de pagina wordt weergegeven,<br />
maar naar de header van elke pagina wordt geschreven.<br />
<br />
<br />
* Activeer het selectievakje Publicatiedatum in header opnemen als u behalve de auteursnaam<br />
en copyrightinformatie ook de publicatiedatum van uw webpagina’s in de header<br />
wilt opnemen.<br />
<br />
De projecteigenschappen weergeven en/of wijzigen<br />
<strong>Studio</strong> <strong>Webdesign</strong> houdt allerlei eigenschappen en gegevens bij voor elk projectbestand.<br />
Zo wijzigt u de projecteigenschappen:<br />
1. Kies Eigenschappen van site in het menu Bestand.<br />
2. Klik op de tab Samenvatting als u algemene informatie zoals de auteursnaam, trefwoorden,<br />
opmerkingen en de titel of het onderwerp van het project wilt wijzigen.<br />
3. Klik op de tab Statistieken als u wilt nagaan wanneer het project is gemaakt, wanneer het<br />
voor het laatst is gewijzigd of opgeslagen, enzovoort.<br />
Als u met meerdere gebruikers aan een website werkt, wilt u misschien allerlei informatie over<br />
het huidige project weergeven op het scherm of op een afdruk, zoals de titel en bestandsnaam<br />
van de site, de naam van de auteur, de datum waarop de site voor het laatst is bewerkt, het<br />
aantal revisies en het aantal pagina’s.<br />
Zo voegt u informatie over het project toe:<br />
1. Activeer het selectiegereedschap en klik op een tekstframe om de invoegpositie in de tekst<br />
te plaatsen.<br />
2. Kies Invoegen > Informatie > Informatie over site. Selecteer in het dialoogvenster de<br />
informatie die u wilt invoegen, activeer zo nodig het selectievakje Automatisch bijwerken<br />
en klik op OK.<br />
Als u het bovengenoemde selectievakje hebt geactiveerd, wordt de ingevoegde informatie automatisch<br />
bijgewerkt wanneer de projectgegevens wijzigen.<br />
Een pictogram instellen voor de lijst met Favorieten<br />
<strong>Studio</strong> <strong>Webdesign</strong> biedt u de mogelijkheid een aangepast pictogram weer te geven wanneer<br />
internetgebruikers uw site aan de lijst met Favorieten toevoegen in hun webbrowser. U kunt<br />
hiervoor een grafische representatie van uw website, een bedrijfslogo of elk ander symbool<br />
gebruiken.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 55
Merk op dat u deze voorziening pas kunt gebruiken nadat u een pictogrambestand (*.ico)<br />
hebt gemaakt voor uw site.<br />
Zo stelt u een pictogram in voor uw site:<br />
1. Kies Eigenschappen van site in het menu Bestand.<br />
2. Klik op de tab Favorieten en activeer het selectievakje Favorieten-symbool weergeven<br />
voor site.<br />
3. Klik op Bladeren, navigeer naar de map waarin het ico-bestand is opgeslagen dat u als<br />
pictogram wilt gebruiken, selecteer het en klik op Openen.<br />
4. Activeer het selectievakje Bestand insluiten als u het pictogrambestand in het projectbestand<br />
wilt insluiten.<br />
5. (Facultatief) Klik op Exportopties als u een aangepaste bestandsnaam en map wilt gebruiken<br />
bij het exporteren van het bestand (zie ‘Exportopties instellen voor afbeeldingen’<br />
in hoofdstuk 9).<br />
Uitvoeropties instellen<br />
U kunt een coderingstype dat specifiek is voor uw taal instellen voor de HTML-uitvoer die<br />
het programma genereert en aangeven of browsers automatisch regelterugloop mogen toepassen<br />
na afbreekstreepjes. Daarnaast kunt u ook instellen of u spaties en speciale tekens wilt<br />
verwijderen uit de bestandsnamen van uw bronbestanden bij het genereren van de HTMLuitvoer,<br />
en of u automatisch HTML-id’s wilt genereren voor de afzonderlijke objecten op een<br />
pagina.<br />
Zo stelt u het coderingstype in:<br />
1. Kies Eigenschappen van site in het menu Bestand.<br />
2. Klik op de tab Opties en kies een coderingstype in de vervolgkeuzelijst Codepagina. Een<br />
codepagina kiezen die specifiek is voor uw taal is erg belangrijk als u wilt dat formulieren<br />
op geëxporteerde pagina’s die in een welbepaalde taal zijn gemaakt probleemloos worden<br />
verwerkt.<br />
Mogelijk moet u de spaties uit bestandsnamen verwijderen bij het exporteren van bestanden<br />
(afbeeldingen, videobestanden, JavaScript-bestanden, enzovoort), bijvoorbeeld omdat<br />
bestandsnamen met spaties niet worden ondersteund op de webserver van uw ISP. Standaard<br />
worden dergelijke spaties behouden, maar zo nodig kunt u ze verwijderen uit de namen van<br />
bronbestanden.<br />
Zo verwijdert u spaties in de bestandsnamen van bronbestanden of converteert<br />
u bestandsnamen naar kleine letters:<br />
1. Kies Eigenschappen van site in het menu Bestand.<br />
2. Klik op de tab Opties en activeer het selectievakje Spaties verwijderen en/of Bestandsnamen<br />
naar kleine letters converteren.<br />
U kunt het programma een -tag laten exporteren overal waar een afbrekingsteken<br />
wordt aangetroffen in uw tekst, zodat browsers een regeleinde kunnen invoegen na een af-<br />
56 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
eekstreepje. Als dit geen vereiste is, kunt u de tekst gewoon ongewijzigd exporteren (zonder<br />
na elk afbrekingsteken een -tag in te voegen). Zo voorkomt u veelvoorkomende<br />
fouten bij het valideren van de HTML-code (aangezien WBR-tags een extensie van Microsoft<br />
zijn), maar kan het wel gebeuren dat tekst waarop woordafbreking is toegepast de grenzen van<br />
het frame overschrijdt.<br />
Zo voorkomt u dat tags voor het afbreken van woorden worden geëxporteerd:<br />
1. Kies Eigenschappen van site in het menu Bestand.<br />
2. Klik op de tab Opties en schakel het selectievakje -tags schrijven voor afbreekstreepjes<br />
uit.<br />
Als u geavanceerde bewerkingen wilt uitvoeren op objecten (bijvoorbeeld met behulp van<br />
scripts), kunt u aangeven of het programma al dan niet automatisch HTML-id’s moet genereren<br />
voor de verschillende objecten, tekstkolommen, tabelrijen en tabelcellen in uw site.<br />
Zo wijzigt u de standaardinstellingen voor het genereren van HTML-id’s:<br />
1. Kies Eigenschappen van site in het menu Bestand.<br />
2. Klik op de tab Opties. Standaard wordt voor alle objecten, tekstkolommen, tabelrijen en<br />
tabelcellen automatisch een id gegenereerd. Schakel het overeenkomstige selectievakje uit<br />
onder aan het tabblad als u wilt voorkomen dat automatisch een id wordt toegewezen aan<br />
het desbetreffende type object.<br />
Gebruikersstatistieken bijhouden<br />
U kunt gedurende een of meer maanden (en desgewenst zelfs gedurende verschillende jaren!)<br />
allerlei statistische gegevens verzamelen en weergeven met betrekking tot uw site. Zo kunt u<br />
beoordelen of uw website wel de doelstellingen haalt die u had vooropgesteld, en mogelijk ook<br />
hoe succesvol deze is. Op basis van deze statistische gegevens kunt u eenvoudiger nagaan hoe<br />
u uw website nog kunt verbeteren.<br />
U kunt verschillende soorten gebruikersstatistieken verzamelen over uw site, meerbepaald:<br />
* Bezoekersstatistieken: u kunt het aantal hits per dag in een grafiek uitzetten en zo de<br />
populariteit van uw site meten.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 57
Daarnaast kunt u ook informatie verzamelen over de meest bekeken pagina’s, de top vijf landing-pagina’s<br />
(de eerste pagina waarop een bezoeker terechtkomt vanaf een andere website)<br />
en de top vijf exit-pagina’s (de laatste pagina die een bezoeker bekijkt voordat hij uw website<br />
verlaat).<br />
* Browserinformatie: hiermee kunt u nagaan wat voor browser, beeldschermresolutie en<br />
besturingssysteem uw bezoekers gebruiken, en of het weergeven van Flash-animaties is<br />
ingeschakeld in hun browser.<br />
* Referrers: hiermee kunt u nagaan wie de belangrijkste en meest standvastige referrers<br />
zijn, dat wil zeggen vanaf welke webpagina’s internetgebruikers op uw pagina’s belanden.<br />
* Zoektermen: hiermee kunt u nagaan wat de meest gebruikte zoekmachines en zoektermen<br />
zijn om uw website te vinden.<br />
Het bijhouden van gebruikersstatistieken kan worden ingeschakeld via het dialoogvenster<br />
Eigenschappen van site door een profiel te selecteren dat speciaal voor de site is aangemaakt.<br />
De gegenereerde statistieken zijn op elk moment toegankelijk via het gereedschap om intelligente<br />
objecten toe te voegen op de werkbalk Webobjecten in het programma, of rechtstreeks<br />
via serifwebresources.com.<br />
Gebruik de grafiek van het aantal hits per dag om na te gaan wanneer de<br />
webserver niet beschikbaar was. Dagen zonder hits kunnen erop wijzen dat de<br />
server op dat moment niet beschikbaar was.<br />
Zo schakelt u het bijhouden van gebruikersstatistieken in:<br />
1. Kies Eigenschappen van site in het menu Bestand.<br />
2. Activeer op het tabblad Analyse van site het selectievakje Verzamelen van gebruikersstatistieken<br />
inschakelen.<br />
3. Klik op de knop <strong>Pro</strong>fiel instellen en doe het volgende:<br />
* Typ een naam in het invoervak Nieuw profiel maken en klik op de knop Nieuw profiel<br />
toevoegen als u tot nu toe geen profiel hebt aangemaakt. Selecteer dit profiel vervolgens<br />
in de lijst aan de linkerkant.<br />
OF<br />
Als u eerder al een profiel hebt aangemaakt, selecteert u het in de lijst.<br />
4. Klik op OK en bevestig ook het dialoogvenster Eigenschappen van site met OK.<br />
Zo geeft u de verzamelde statistieken weer:<br />
1. Klik op het gereedschap Intelligent object toevoegen op de werkbalk Webobjecten en<br />
meld u aan bij Serif Web Resources.<br />
2. Selecteer het object voor het verzamelen van gebruikersstatistieken in uw lijst met intelligente<br />
objecten.<br />
3. Klik in het deelvenster aan de rechterkant op de knop .<br />
58 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
4. Selecteer een categorie in de vervolgkeuzelijst bovenaan en kies vervolgens de periode<br />
waarvoor u de verzamelde statistieken wilt bekijken.<br />
Een absolute URL instellen<br />
Normaal gesproken is er niet echt een reden om de basis-URL van uw website op te geven<br />
in het programma. Soms dient u deze URL echter wel op te geven, met name in de volgende<br />
situaties:<br />
* Als uw ISP websites in een iFrame host, kunt u absolute URL’s gebruiken bij het instellen<br />
van hyperlinks naar pagina’s in uw site, bestanden, bladwijzers en navigatie-elementen.<br />
* Als u gebruikmaakt van een sitemap-bestand om uw site te optimaliseren voor zoekmachines,<br />
moet u de basis-URL van de site opgeven, zodat internetgebruikers vanuit de lijst<br />
met zoekresultaten in een zoekmachine naar uw site kunnen gaan.<br />
* Als op een andere website naar een RSS-feed/podcast op uw site wordt verwezen, kan deze<br />
feed/podcast via de absolute URL in een browser worden weergegeven (zie ‘RSS-feeds en<br />
podcasts’ in hoofdstuk 12).<br />
Zo stelt u een absolute URL in:<br />
1. Kies Eigenschappen van site in het menu Bestand.<br />
2. Geef op het tabblad Basis-URL de basis-URL van uw site op, bijvoorbeeld www.easycomputing.com,<br />
www.mijnsite.com, enzovoort.<br />
3. (Facultatief) Activeer het selectievakje Alle lokale URL’s naar absolute URL’s converteren<br />
als u absolute URL’s wilt gebruiken in plaats van relatieve URL’s.<br />
U kunt van een hyperlink een absolute hyperlink maken door de optie Volledige<br />
URL exporteren aan te vinken bij het instellen van hyperlinks naar pagina’s<br />
in uw site, bestanden, bladwijzers of navigatie-elementen. Als u geen basis-URL<br />
hebt opgegeven voor uw site, wordt automatisch gevraagd dit te doen op het<br />
moment dat u de site publiceert.<br />
Gebruik geen URL’s waarin een submap of paginanaam is toegevoegd aan het<br />
basisadres.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 59
Pagina-eigenschappen instellen<br />
Elke website die u maakt, heeft zijn eigen ‘geraamte’ of structuur – bestaande uit de site zelf;<br />
een of meer stramienpagina’s en een aantal afzonderlijke pagina’s. Elk aspect van dit geraamte<br />
heeft bepaalde eigenschappen die samen het uiterlijk van de uiteindelijke site bepalen.<br />
U kunt deze standaardeigenschappen behouden of ze naar behoefte aanpassen, ongeacht of<br />
u een van de ingebouwde designsjablonen als uitgangspunt gebruikt of een volledig nieuwe<br />
site ontwerpt.<br />
U kunt zowel het tabblad Site, het snelmenu voor de actieve pagina in de werkomgeving als<br />
het dialoogvenster Sitebeheer gebruiken om de pagina-eigenschappen van afzonderlijke pagina’s<br />
weer te geven. Het voordeel wanneer u hiervoor het dialoogvenster Sitebeheer gebruikt,<br />
is dat u de eigenschappen van meerdere pagina’s tegelijkertijd kunt wijzigen. Het enige wat u<br />
hoeft te doen, is de desbetreffende pagina’s selecteren en er de gewenste pagina-eigenschappen<br />
voor instellen. De nieuwe instellingen worden automatisch op alle geselecteerde pagina’s<br />
toegepast.<br />
Zo geeft u de eigenschappen van een stramienpagina weer:<br />
* Klik op Stramienpagina’s beheren vlak boven het vak Stramienpagina’s boven aan<br />
het tabblad Site. Selecteer in het dialoogvenster de stramienpagina waarvan u de eigenschappen<br />
wilt weergeven en klik op Eigenschappen.<br />
Zo geeft u de eigenschappen van afzonderlijke pagina’s in uw site weer:<br />
* Klik met de rechtermuisknop op de pagina waarvan u de eigenschappen wilt weergeven in<br />
de werkomgeving en kies Eigenschappen van pagina in het snelmenu.<br />
Het dialoogvenster Eigenschappen van pagina verschijnt. Dit dialoogvenster is in verschillende<br />
tabbladen onderverdeeld. Op elk van deze tabbladen kunt u specifieke pagina-eigenschappen<br />
instellen.<br />
Tabblad<br />
Algemeen<br />
Eigenschap<br />
Paginanaam en bestandsnaam<br />
Elke pagina heeft een ‘zichtbare’ paginatitel of bestandsnaam. Deze titel<br />
of bestandsnaam wordt in de boomstructuur op het tabblad Site weergegeven.<br />
Op dit tabblad kunt u een pagina een andere naam geven, er een<br />
aangepaste titel voor instellen en/of de bestandsnaam van een pagina wijzigen.<br />
Toevoegen aan navigatiestructuur<br />
Standaard worden alle pagina’s in uw site in de navigatiestructuur opgenomen.<br />
Dat wil zeggen dat u ze toegankelijk kunt maken vanuit navigatieelementen<br />
zoals navigatiebalken.<br />
Pagina-uitlijning<br />
De instelling die u hier kiest, bepaalt hoe de inhoud van een pagina wordt<br />
weergegeven in een browser. Gebruik deze optie als u een aangepaste uitlijning<br />
wilt instellen voor afzonderlijke pagina’s in uw site.<br />
60 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Tabblad<br />
Eigenschap<br />
Stramienpagina<br />
Via deze vervolgkeuzelijst kunt u een specifieke stramienpagina toewijzen<br />
aan een pagina, of aangeven dat u een pagina niet op een stramienpagina<br />
wilt baseren.<br />
Breedte en Hoogte<br />
De grootte van pagina’s wordt bepaald door de stramienpagina waarop ze<br />
zijn gebaseerd. Gebruik het dialoogvenster Stramienpagina’s beheren als u<br />
aangepaste afmetingen wilt instellen voor afzonderlijke stramienpagina’s.<br />
Hier kunt u aangepaste afmetingen instellen voor pagina’s die niet op een<br />
stramienpagina zijn gebaseerd. Bij pagina’s die wel op een stramienpagina<br />
zijn gebaseerd, kunt u alleen de hoogte instellen.<br />
Openen in actief documentframe<br />
Met deze optie kunt u pagina’s in een actief documentframe openen als<br />
eerder een dergelijk frame is gemaakt.<br />
Achtergrond<br />
Achtergrond<br />
Zoeken<br />
Achtergrondgeluid<br />
Hier kunt u aangeven of u automatisch een bepaald geluidsfragment wilt<br />
laden en afspelen wanneer een pagina voor het eerst wordt weergegeven.<br />
Achtergrondkleur/achtergrondafbeelding/paginakleur<br />
Wanneer internetgebruikers het formaat van hun browservenster wijzigen<br />
of het maximaliseren, kan het gebeuren dat rond uw pagina’s witruimte<br />
wordt weergegeven. Dat is bijvoorbeeld het geval wanneer een website die<br />
in de eerste plaats is bedoeld voor gebruikers die met een beeldschermresolutie<br />
van 800 x 600 pixels werken, wordt bekeken door gebruikers die<br />
met een hogere beeldschermresolutie werken. Hier kunt u een aangepaste<br />
kleur/afbeelding instellen voor dit gebied, evenals een kleur voor de pagina-achtergrond.<br />
Gebruik deze voorziening voor pagina’s die niet op een<br />
stramienpagina zijn gebaseerd. (Bij pagina’s die op een stramienpagina zijn<br />
gebaseerd, worden standaard de instellingen van het kleurenschema voor<br />
de site gebruikt.)<br />
Beschrijving voor zoekmachines<br />
Via dit tabblad kunt u desgewenst een aangepaste beschrijving en aangepaste<br />
trefwoorden opgeven voor afzonderlijke pagina’s, die de overeenkomstige<br />
instellingen in het dialoogvenster Eigenschappen van site onderdrukken.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 61
Tabblad<br />
Zoekmachines<br />
Beveiliging<br />
Omleiden<br />
Overgangen<br />
Eigenschap<br />
Sitemaps en robots<br />
Hier kunt u aangeven of zoekmachines en robots deze pagina van uw site<br />
mogen analyseren en indexeren. Als u gebruikmaakt van een sitemapbestand,<br />
wordt de pagina geïndexeerd. Gebruikt u een Robots-metatag<br />
(robots.txt), dan wordt in dit bestand aangegeven dat de pagina niet mag<br />
worden geïndexeerd. Merk op dat deze instellingen de overeenkomstige<br />
site-eigenschappen onderdrukken.<br />
Paginabeveiliging<br />
Hier kunt u de toegang tot bepaalde pagina’s beperken door er een gebruikerslijst<br />
of gebruikersgroep aan toe te wijzen (via een intelligent object<br />
voor toegangscontrole).<br />
Pagina’s omleiden<br />
U kunt bezoekers na bepaalde tijd automatisch ergens anders heen leiden<br />
vanaf een bepaalde pagina (naar een andere pagina, een e-mailadres, enzovoort).<br />
Paginaovergangen<br />
U kunt overgangseffecten weergeven wanneer internetgebruikers een specifieke<br />
pagina in uw site bekijken of deze verlaten.<br />
Pagina-eigenschappen instellen via Sitebeheer<br />
Via Sitebeheer kunt u snel en eenvoudig de eigenschappen wijzigen van een of meer<br />
stramien(pagina’s) in uw site. Hier kunt u onder andere instellen of u pagina’s al dan niet in<br />
de navigatiestructuur wilt opnemen, er eventueel een andere stramienpagina aan toewijzen<br />
of de uitlijning en grootte ervan aanpassen, pagina’s een andere naam geven, een aangepaste<br />
achtergrondkleur of paginakleur instellen voor specifieke pagina’s, en aangeven of u al dan<br />
niet een geluidsfragment wilt afspelen wanneer een pagina voor het eerst wordt weergegeven.<br />
Voorts kunt u pagina’s van hieruit ook optimaliseren voor zoekmachines, ze indien nodig<br />
omleiden, of er overgangseffecten en een vorm van toegangscontrole voor instellen. Tot slot<br />
kunt u via Sitebeheer ook de paginagrootte van stramienpagina’s beheren, en er zo nodig een<br />
andere achtergrond of overgang voor instellen.<br />
Zo geeft u de eigenschappen van pagina’s/stramienpagina’s weer via Sitebeheer:<br />
1. Kies Extra > Sitebeheer > Pagina-eigenschappen of Extra > Sitebeheer > Stramienpagina-eigenschappen,<br />
naargelang u de eigenschappen van een of meer pagina’s in uw site<br />
dan wel de eigenschappen van de stramienpagina’s voor uw site wilt wijzigen. Het dialoogvenster<br />
Sitebeheer verschijnt, waarin afhankelijk van de menuopdracht die u hiervoor<br />
hebt gekozen standaard al de categorie Pagina-eigenschappen of Stramienpagina-eigenschappen<br />
is geselecteerd.<br />
OF<br />
Klik op de knop Sitebeheer in de statusbalk onder in het programmavenster en kies<br />
Pagina-eigenschappen of Stramienpagina-eigenschappen in de lijst aan de linkerkant.<br />
62 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
2. Selecteer links in het dialoogvenster het type pagina-eigenschappen dat u wilt wijzigen<br />
(bijvoorbeeld Achtergrond als u een andere achtergrond wilt instellen).<br />
3. U kunt naar behoefte de eigenschappen van afzonderlijke pagina’s of die van meerdere<br />
pagina’s tegelijk wijzigen.<br />
* Als u de eigenschappen van een specifieke pagina wilt wijzigen, klikt u gewoon in de<br />
relevante kolom voor de desbetreffende pagina. Afhankelijk van de eigenschap die u<br />
wilt wijzigen, kunt u gebruikmaken van een invoervak, vervolgkeuzelijst, selectievakje,<br />
pop-upvenster, enzovoort om de gewenste instellingen te kiezen.<br />
* Als u meteen de eigenschappen van meerdere pagina’s wilt wijzigen, activeert u het selectievakje<br />
naast de desbetreffende pagina’s. (Activeer het selectievakje in de kolomkop<br />
Pagina als u alle pagina’s wilt selecteren.) Gebruik het invoervak, de vervolgkeuzelijst,<br />
het selectievakje, enzovoort onder aan de kolom voor de eigenschap die u wilt wijzigen<br />
om de gewenste instellingen te kiezen.<br />
4. Klik op Sluiten.<br />
Sitebeheer gebruiken<br />
Sitebeheer maakt vanuit één dialoogvenster allerlei hulpmiddelen toegankelijk waarmee u<br />
de gehele site eenvoudig kunt beheren. Zo kunt u met deze voorziening bijvoorbeeld rechtstreeks<br />
de pagina-eigenschappen van een of meer (stramien)pagina’s in uw site weergeven<br />
en/of wijzigen, controleren of bepaalde onderdelen van de site problemen veroorzaken en<br />
die automatisch verhelpen, en alle bronnen, hyperlinks, bladwijzers, lettertypen, enzovoort<br />
beheren die u hebt gebruikt in uw site.<br />
Enkele krachtige voorzieningen van Sitebeheer zijn:<br />
* de mogelijkheid de eigenschappen van afzonderlijke, specifieke of alle pagina’s in uw site<br />
te beheren en de instellingen voor bladwijzers, e-commerceobjecten, lettertypen, enzovoort<br />
op alle of alleen op specifieke pagina’s in uw site toe te passen;<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 63
* de mogelijkheid de weergegeven informatie snel opnieuw te ordenen door kolommen oplopend<br />
of aflopend te sorteren;<br />
* de mogelijkheid naar specifieke tekst te zoeken en deze meteen op alle pagina’s in uw site<br />
door andere tekst te vervangen.<br />
Terwijl de meeste hulpmiddelen tijdens een willekeurige fase van het designproces kunnen<br />
worden gebruikt, zijn deze om bronnen en tekst te beheren en uw site op fouten te controleren<br />
essentieel om potentiële problemen op te sporen vlak voordat u uw site op het web<br />
publiceert.<br />
Zo opent u Sitebeheer:<br />
* Klik op de knop Sitebeheer in de statusbalk onder aan de werkomgeving.<br />
OF<br />
Zorg ervoor dat er niets is geselecteerd op de pagina en klik op<br />
op de optiebalk.<br />
OF<br />
Kies Extra > Sitebeheer en klik op de gewenste optie in het submenu (bijvoorbeeld Bronnen<br />
beheren als u de bronnen wilt beheren die u hebt gebruikt in uw site). Hiermee opent<br />
u het dialoogvenster Sitebeheer, waarin automatisch al het gekozen onderdeel is geselecteerd.<br />
In de volgende tabel vindt u een overzicht van de verschillende hulpmiddelen en hun functie:<br />
Hulpmiddel<br />
Pagina-/ Stramienpagina-eigenschappen<br />
Hyperlinks<br />
Bronnen<br />
Tekst<br />
Lettertypen<br />
E-commerce<br />
Functie<br />
De pagina-eigenschappen van een of meer pagina’s of stramienpagina’s<br />
in uw site beheren, zoals de uitlijning en grootte van pagina’s<br />
aanpassen, pagina’s een andere naam geven of er een aangepaste<br />
achtergrondkleur of paginakleur voor instellen, overgangseffecten<br />
en een vorm van toegangscontrole instellen voor pagina’s, of ze indien<br />
nodig omleiden.<br />
Hyperlinks beheren en bewerken, rechtstreeks naar de pagina gaan<br />
waarop een hyperlink is ingesteld voor een element, woorden zoeken<br />
en vervangen in het doel van hyperlinks.<br />
Afbeeldingen, video’s, scripts, applets en allerlei andere bronnen in<br />
uw site beheren, naar de pagina gaan waarop een bron is geplaatst,<br />
de status van ingesloten/gekoppelde afbeeldingen veranderen, afbeeldingen<br />
vervangen of ze herbemonsteren en nog veel meer.<br />
Tekst weergeven en bewerken (met <strong>Studio</strong> Write), tekstframes een<br />
naam geven, de tekenopmaak van tekst wijzigen, opmaakprofielen<br />
toepassen, aangepaste frames en tabellen naar HTML-compatibele<br />
tekst converteren, enzovoort.<br />
De status van lettertypen beheren, naar de pagina gaan waarop een<br />
bepaald lettertype is gebruikt en lettertypen vervangen.<br />
De gebruikte e-commerceobjecten in uw site beheren.<br />
64 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Hulpmiddel<br />
Bladwijzers<br />
Bestanden<br />
Site op fouten controleren<br />
Functie<br />
Bladwijzers weergeven en bewerken, naar de pagina gaan waarop<br />
een bladwijzer is ingesteld voor een element, enzovoort.<br />
De map- en bestandsstructuur van uw site beheren (specifieke<br />
pagina’s een andere bestandsnaam geven, mappen toevoegen of<br />
verwijderen, bestanden naar een andere map verplaatsen, enzovoort).<br />
Veelvoorkomende lay-outproblemen opsporen in uw site en die<br />
indien mogelijk automatisch of handmatig verhelpen.<br />
Toegangscontrole<br />
U kunt pagina’s met vertrouwelijke informatie in uw site beveiligen, zodat ze alleen toegankelijk<br />
zijn voor bevoegde gebruikers. Hoe u de toegang tot dergelijke pagina’s precies moet<br />
beperken, is afhankelijk van de aard en complexiteit van uw website. Zo volstaat voor eenvoudige<br />
websites doorgaans een eenvoudige vorm van toegangscontrole, terwijl voor grotere<br />
multifunctionele websites vaak een geavanceerde vorm van toegangscontrole is vereist. Beide<br />
methoden kunnen als volgt worden beschreven:<br />
* Eenvoudige toegangscontrole: als u voor deze methode kiest, moeten gebruikers zich<br />
met een gebruikersnaam en wachtwoord aanmelden via een aanmeldingsvenster voordat<br />
ze toegang krijgen tot een beveiligde pagina. De aanmeldingsgegevens zijn opgeslagen in<br />
een gebruikerslijst die aan de desbetreffende pagina is gekoppeld. Het gaat hierbij om<br />
eenvoudige lijsten die louter een combinatie van gebruikersnamen en wachtwoorden bevatten.<br />
* Geavanceerde toegangscontrole: als u voor deze vorm van toegangscontrole kiest, kunt<br />
u op twee manieren te werk gaan. Ofwel:<br />
* moeten gebruikers zich met een gebruikersnaam en wachtwoord aanmelden via een<br />
aanmeldingsvenster voordat ze toegang krijgen tot een beveiligde pagina. De aanmeldingsgegevens<br />
zijn opgeslagen in een gebruikersgroep die een vaste lijst met gebruikers<br />
bevat en aan de desbetreffende pagina is gekoppeld. Deze lijst wordt door de webmaster<br />
van de site beheerd. Door gebruik te maken van groepen, kunt u aan bepaalde gebruikers<br />
dezelfde toegangsrechten toekennen voor specifieke pagina’s in uw site.<br />
OFWEL<br />
* moeten gebruikers zich eerst registreren door op de overeenkomstige link te klikken<br />
op de pagina. Nadat ze zich hebben geregistreerd, kunnen ze zich rechtstreeks vanaf de<br />
pagina aanmelden door hun gebruikersnaam en wachtwoord in te voeren in de invoervakken<br />
die speciaal voor dat doel zijn voorzien. Als u voor deze methode kiest, heeft<br />
iedere gebruikersgroep waarvoor de optie Nieuwe gebruikers toevoegen bij registratie<br />
is ingesteld toegang tot de pagina’s die aan die groep zijn gekoppeld. Het voordeel<br />
van deze methode is dat u de lijst met gebruikers die toegang hebben tot uw pagina’s<br />
normaal gesproken niet handmatig hoeft te beheren.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 65
Wellicht kunnen we dit concept het beste verduidelijken aan de hand van een figuur. In de<br />
volgende figuur ziet u de relaties tussen gebruikers, webpagina’s, gebruikerslijsten en gebruikersgroepen.<br />
Geavanceerde vormen van toegangscontrole worden afgehandeld via Serif Web Resources.<br />
Als u deze methode wilt gebruiken om de toegang tot bepaalde pagina’s te beperken, moet u<br />
gebruikmaken van het intelligente object Toegangscontrole, dat u in staat stelt gebruikersgroepen<br />
en gebruikers te beheren, en desgewenst rechtstreeks op de pagina de vereiste voorzieningen<br />
in te voegen waarmee gebruikers zich kunnen aanmelden (nadat ze zich hebben<br />
geregistreerd).<br />
Ter herinnering: Serif Web Resources is een beveiligde online service van Serif waar alle intelligente<br />
objecten worden opgeslagen die u aanmaakt, evenals de gegevens die door deze objecten<br />
worden gegenereerd (zie hoofdstuk 12). U kunt het intelligente object voor toegangscontrole<br />
op dezelfde manier beheren als elk ander intelligent object, ofwel rechtstreeks via<br />
www.serifwebresources.com ofwel via het gereedschap Intelligent object toevoegen in het<br />
programma.<br />
Eenvoudige toegangscontrole<br />
De eenvoudigste vorm van toegangscontrole in <strong>Studio</strong> <strong>Webdesign</strong> is deze op paginaniveau,<br />
die u kunt beheren met behulp van gebruikerslijsten die u op elk moment kunt aanpassen.<br />
Deze vorm van toegangscontrole wordt gewoonlijk gebruikt voor persoonlijke websites of<br />
kleine bedrijfssites. Kenmerkend voor deze methode is dat het grootste gedeelte van de site<br />
doorgaans voor iedereen toegankelijk is, terwijl een beperkt aantal pagina’s uitsluitend voor<br />
bevoegde gebruikers toegankelijk is. Zo kunt u een pagina met een fotogalerij van uw familie<br />
66 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
ijvoorbeeld alleen toegankelijk maken voor uw familieleden, maar niet voor andere internetgebruikers<br />
door deze met een wachtwoord te beveiligen.<br />
Hierbij kunt u tijdens het instellen van de paginabeveiliging een gebruikerslijst aanmaken.<br />
Het enige wat u hoeft te doen, is de toegangscontrole inschakelen en vervolgens een nieuwe<br />
gebruikerslijst aanmaken en daar de vereiste gebruikersnamen en wachtwoorden aan toevoegen.<br />
Aan de hand van deze gebruikersnamen en wachtwoorden kunnen bevoegde gebruikers<br />
toegang krijgen tot de beveiligde pagina.<br />
U kunt op twee manieren te werk gaan bij het instellen van gebruikersnamen en wachtwoorden.<br />
Als u geen controle wilt over wie uw pagina zoal bekijkt, kunt u één gebruikersnaam<br />
en wachtwoord instellen. In dat geval gebruikt iedereen dezelfde aanmeldingsgegevens om<br />
toegang te krijgen tot de pagina. Als u de pagina echter voor een bekende groep gebruikers<br />
toegankelijk wilt maken, bijvoorbeeld een ledenlijst, kunt u aan iedere gebruiker wellicht beter<br />
zijn eigen gebruikersnaam en wachtwoord toekennen. Zo kunt u de lijst met aanmeldingsgegevens<br />
eenvoudig bijwerken (aanmeldingsgegevens toevoegen of verwijderen) naarmate er<br />
nieuwe leden bijkomen of bepaalde leden hun lidmaatschapschap opzeggen, zonder dat dit<br />
een invloed heeft op bestaande leden.<br />
Als het om bekende gebruikers gaat, kunt u wellicht beter e-mailadressen als<br />
gebruikersnaam gebruiken. Zo kunt u eenvoudiger nagaan wie uw pagina<br />
bekijkt en wanneer.<br />
Als u voor deze vorm van toegangscontrole kiest, hoeft u noch een intelligent<br />
object voor toegangscontrole te gebruiken noch gebruikersgroepen aan te<br />
maken. Dat is alleen nodig als u een meer geavanceerde vorm van toegangscontrole<br />
wilt om de toegang te beperken tot specifieke ‘zones’ en nieuwe gebruikers<br />
eventueel de mogelijkheid wilt bieden zich te registreren vooraleer ze toegang<br />
krijgen (zie ‘Geavanceerde toegangscontrole’ hierna).<br />
Zo schakelt u de toegangscontrole in:<br />
1. Geef de pagina die u wilt beveiligen weer in de werkomgeving en klik op op de<br />
optiebalk.<br />
OF<br />
Klik met de rechtermuisknop op de pagina in de boomstructuur op het tabblad Site en<br />
kies Eigenschappen van pagina in het snelmenu om het gelijknamige dialoogvenster te<br />
openen. Klik vervolgens op de tab Beveiliging.<br />
2. Activeer het selectievakje Pagina met wachtwoord beveiligen om de toegangscontrole in<br />
te schakelen. Let erop dat de knop Wijzigen / beheren beschikbaar wordt. Klik op deze<br />
knop.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 67
3. Maak in het dialoogvenster dat daarop verschijnt een nieuwe gebruikerslijst aan door een<br />
naam (bijvoorbeeld ‘Aanmelding fotogalerij’) en beschrijving (bijvoorbeeld ‘Toegangscontrole<br />
voor fotogalerij’) in te voeren in de overeenkomstige invoervakken en klik vervolgens<br />
op de knop Lijst toevoegen.<br />
4. Geef in het volgende dialoogvenster een gebruikersnaam en wachtwoord op en klik op<br />
Gebruiker toevoegen. Herhaal dit voor alle andere gebruikers voor wie u de pagina toegankelijk<br />
wilt maken. De gebruikerslijst wordt meteen bijgewerkt naarmate u nieuwe gebruikersnamen<br />
en wachtwoorden toevoegt. Merk op dat u de naam van de gebruikerslijst<br />
op elk moment kunt wijzigen door de huidige naam te bewerken in het invoervak Gebruikerslijst<br />
bovenaan en vervolgens op OK te klikken.<br />
5. Klik op OK en klik ook in het volgende dialoogvenster op OK om alle geopende dialoogvensters<br />
te sluiten.<br />
Op het tabblad Beveiliging wordt nu aangegeven dat deze pagina met een wachtwoord is<br />
beveiligd en dat er een gebruikerslijst (met de aanmeldingsgegevens van iedere gebruiker)<br />
is aan toegewezen.<br />
Zo bewerkt u een gebruikerslijst:<br />
* Selecteer boven in het dialoogvenster Gebruikerslijsten en -groepen de gebruikerslijst<br />
die u wilt bewerken en klik op Beheren. In het volgende dialoogvenster kunt u:<br />
* Nieuwe gebruikers toevoegen: voer hiertoe een gebruikersnaam en wachtwoord in<br />
voor de nieuwe gebruiker en klik op Gebruiker toevoegen. Herhaal dit voor de andere<br />
gebruikers die u toegang wilt verlenen tot de pagina. De lijst wordt meteen bijgewerkt<br />
naarmate u nieuwe gebruikersnamen en wachtwoorden toevoegt.<br />
* Bestaande gebruikers verwijderen: selecteer hiertoe een gebruiker in de lijst en klik op<br />
Verwijderen.<br />
Schakel het selectievakje Pagina met wachtwoord beveiligen uit als u gebruikerslijsten<br />
wilt instellen zonder de huidige pagina te beveiligen.<br />
68 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Geavanceerde toegangscontrole<br />
Voor complexere beveiligingsscenario’s waarin bepaalde webpagina’s uitsluitend toegankelijk<br />
zijn voor de ene gebruikersgroep en andere webpagina’s voor een andere gebruikersgroep,<br />
is een geavanceerde vorm van toegangscontrole vereist. Hierbij wordt aan iedere gebruikersgroep<br />
een aantal gebruikers toegewezen, die allemaal dezelfde machtigingen hebben om toegang<br />
te krijgen tot de pagina’s die aan de desbetreffende gebruikersgroep zijn gekoppeld. Door<br />
verscheidene gebruikersgroepen in te stellen, die de verschillende ‘zones’ in uw site weerspiegelen,<br />
hebt u 100% controle over wie al dan niet toegang heeft tot bepaalde pagina’s in uw site.<br />
Zo zou u bijvoorbeeld een zakelijke website kunnen ontwerpen die uit verschillende zones bestaat<br />
(pagina’s met vertrouwelijke informatie, pagina’s voor VPN-toegang, downloadpagina’s,<br />
enzovoort) en elk van deze zones apart met een wachtwoord kunnen beveiligen.<br />
Nog krachtiger is de mogelijkheid om doorheen de gehele site een algemene aanmeldings-/<br />
afmeldingsprocedure te gebruiken (doorgaans door deze op een stramienpagina te plaatsen).<br />
Op die manier kan iedere gebruiker toegang krijgen tot om het even welke beveiligde pagina<br />
door zich te registreren en zich vervolgens bij de site aan te melden.<br />
Als u een geavanceerde vorm van toegangscontrole wilt inschakelen voor uw site, dient u zich<br />
bij Serif Web Resources aan te melden (zie hoofdstuk 12). Zodra u bent aangemeld, kunt u<br />
een intelligent object voor toegangscontrole maken, dat u kunt gebruiken om nieuwe gebruikersgroepen<br />
en gebruikers aan te maken (en die vervolgens te beheren). Desgewenst kunt u<br />
dit object op de pagina plaatsen, zodat geregistreerde gebruikers zich rechtstreeks vanaf de<br />
pagina kunnen aanmelden (zie ‘Gebruikers de mogelijkheid bieden zich te registreren’ verderop<br />
in dit hoofdstuk).<br />
Zo schakelt u een geavanceerde toegangscontrole in:<br />
1. Klik op het gereedschap Intelligent object toevoegen op de werkbalk Webobjecten.<br />
2. Meld u aan bij Serif Web Resources (zie ‘Intelligente objecten gebruiken’ in hoofdstuk 12).<br />
Mocht u nog geen gebruikersaccount hebben aangemaakt voor Serif Web Resources, dient<br />
u zich eerst te registreren.<br />
3. Klik onder de lijst met intelligente objecten links in het dialoogvenster op Nieuw.<br />
4. Gebruik de schuifbalk in het dialoogvenster Intelligent object maken om door de lijst<br />
met beschikbare intelligente objecten te bladeren, klik op Toegangscontrole en klik vervolgens<br />
op OK.<br />
5. (Facultatief) Geef uw intelligente object voor toegangscontrole een naam en stel eventueel<br />
een aangepaste kleur in voor de tekst, knoppen, achtergrond of randen. Klik vervolgens op<br />
Maken. Het nieuwe intelligente object wordt nu weergegeven in uw persoonlijke lijst met<br />
intelligente objecten.<br />
6. Doe het volgende:<br />
* Klik op Afsluiten om u af te melden bij Serif Web Resources als u gebruikers niet de<br />
mogelijkheid wilt bieden zich rechtstreeks vanaf de pagina te registreren en aan te melden.<br />
OF<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 69
* Klik op Invoegen als u gebruikers wel in staat wilt stellen zich rechtstreeks vanaf de<br />
pagina te registreren en aan te melden (zie ‘Gebruikers de mogelijkheid bieden zich te<br />
registreren’ verderop in dit hoofdstuk).<br />
Zo maakt u een gebruikersgroep aan:<br />
1. Klik op het gereedschap Intelligent object toevoegen op de werkbalk Webobjecten.<br />
2. Selecteer uw intelligente object voor toegangscontrole in de lijst aan de linkerkant en klik<br />
vervolgens onder het voorbeeld aan de rechterkant op Beheren.<br />
3. (Facultatief) Als gebruikers zich moeten registreren voordat ze zich kunnen aanmelden,<br />
schakelt u de CAPTCHA-functie in en klikt u op Bijwerken. CAPTCHA is een techniek<br />
om spam tegen te gaan die vereist dat gebruikers een willekeurig door de server gegenereerd<br />
woord typen dat in een figuur wordt weergegeven, om te voorkomen dat geautomatiseerde<br />
bots worden gebruikt om zich te registreren.<br />
4. Typ in het invoervak Naam in het vak Nieuwe groep maken een naam voor de nieuwe<br />
groep. Gebruik bij voorkeur een beschrijvende naam waaruit u later gemakkelijk kunt<br />
afleiden wat voor type gebruikers tot deze groep behoren (bijvoorbeeld ‘Downloads’).<br />
5. Met de overige opties in dit vak kunt u enkele groepsgerelateerde instellingen kiezen, zoals:<br />
* Gekoppeld aan intelligent object (niet zichtbaar in de figuur): gebruik deze optie alleen<br />
bij het instellen van een moderatorsgroep voor een forum of als u wilt dat alleen<br />
specifieke gebruikers reacties kunnen posten voor een blog. Selecteer in dat geval de<br />
juiste forum- of blognaam in de vervolgkeuzelijst.<br />
* Nieuwe gebruikers toevoegen bij registratie: activeer dit selectievakje als u gebruikers<br />
de mogelijkheid wilt bieden zich rechtstreeks te registreren. Als deze optie is ingeschakeld,<br />
worden de aanmeldingsgegevens van geregistreerde gebruikers automatisch aan<br />
de gebruikersgroep toegevoegd. Als deze optie is uitgeschakeld, moet u de e-mailadressen<br />
van de gebruikers handmatig aan de gebruikersgroep toevoegen. (U dient deze<br />
e-mailadressen vooraf aan de webmaster mee te delen.)<br />
* Automatisch aan-/afmelden: activeer deze optie als zich op dezelfde pagina een forum<br />
bevindt. Dan kunnen gebruikers zich automatisch bij het forum aanmelden nadat ze<br />
zich hebben geregistreerd. Merk op dat u de website moet publiceren als u deze voorziening<br />
wilt testen (vanwege de beveiligingsbeperkingen die gebruikers mogelijk hebben<br />
ingesteld in hun browser).<br />
6. Klik op Groep maken, controleer in het volgende dialoogvenster of u de juiste instellingen<br />
hebt gekozen en klik op Gereed. Merk op dat de nieuwe groep automatisch aan de<br />
vervolgkeuzelijst Groep wordt toegevoegd in het vak Beheer van gebruikersgroep (zie<br />
verderop).<br />
70 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Zo beheert u een gebruikersgroep:<br />
* Selecteer de groep in de vervolgkeuzelijst Groep in het vak Beheer van gebruikersgroep<br />
en klik op Groep beheren.<br />
Vanuit het dialoogvenster dat daarop verschijnt, kunt u de gebruikersgroep een nieuwe naam<br />
geven, deze aan een bestaand forum/blog koppelen, instellen of u nieuwe gebruikers automatisch<br />
wilt toevoegen nadat ze zich hebben geregistreerd, en aangeven of gebruikers zich<br />
automatisch kunnen aanmelden bij pagina’s van waaruit een of meer forums toegankelijk zijn.<br />
Merk op dat in dit dialoogvenster ook het aantal gebruikers en de namen van de gebruikers<br />
in de groep worden weergegeven. Klik nadat u de vereiste wijzigingen hebt doorgevoerd op<br />
Groep bijwerken om de wijzigingen toe te passen, of op Groep verwijderen als u de gebruikersgroep<br />
wilt verwijderen.<br />
Gebruikers toevoegen aan een groep<br />
U kunt aan iedere gebruikersgroep die u hebt gemaakt een groep gebruikers toevoegen, ofwel<br />
handmatig (meestal wordt dit door de webmaster gedaan) ofwel door gegevens te importeren<br />
uit een tekstbestand met scheidingstekens (ook dit is meestal de taak van de webmaster),<br />
ofwel door gebruikers in staat te stellen zich automatisch te registreren. Hier is een overzicht<br />
van de opties waaruit u kunt kiezen bij het beheren van een intelligent object voor toegangscontrole:<br />
* Gebruikers handmatig toevoegen: deze optie spreekt voor zich. Als u voor deze methode<br />
kiest, moet u handmatig gebruikers toevoegen aan iedere groep.<br />
* Gebruikerslijsten importeren: ook bij deze methode dient u handmatig de vereiste gebruikers<br />
toe te voegen. In dit geval kunt u echter een bestaande lijst met gebruikers importeren<br />
uit een tekstbestand met scheidingstekens (*.csv).<br />
* Automatische registratie: als u voor deze methode kiest, kunnen gebruikers hun eigen<br />
gebruikersaccount aanmaken op het moment dat ze zich registreren. Zodra hun e-mailadres<br />
is geverifieerd, kunnen ze zich aanmelden. Het voordeel van deze methode is vanzelfsprekend<br />
dat u gebruikers niet handmatig hoeft toe te voegen.<br />
Aan u de keuze aan welk van de bovengenoemde methoden u de voorkeur geeft. De eerste<br />
twee methoden worden doorgaans gebruikt in kleine bedrijfsomgevingen, of door organisaties<br />
en verenigingen waar de leden ‘bekend’ zijn. De laatstgenoemde methode is veeleer bedoeld<br />
voor sites die openbaar toegankelijk zijn, maar waarbij het beheren van de afzonderlijke<br />
gebruikers praktisch gezien onmogelijk is, al was het maar omdat dit zeer veel tijd vergt. In<br />
dergelijke gevallen is het handiger gebruikers de mogelijkheid te bieden zich te registreren, en<br />
de gebruikers in iedere groep te beheren via het intelligente object voor toegangscontrole.<br />
U kunt meerdere gebruikers toevoegen aan een gebruikersgroep. Analoog hieraan<br />
kan een bepaalde gebruiker tot meerdere gebruikersgroepen behoren.<br />
Iedere gebruiker kan eenvoudig weer worden verwijderd, ongeacht of hij nu al dan niet tot<br />
een groep behoort. U kunt een gebruiker ook tijdelijk de toegang weigeren als hij de regels<br />
niet naleeft (bijvoorbeeld omdat hij lasterlijke berichten heeft gepost in een forum dat open-<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 71
aar toegankelijk is). Dan verschijnt de volgende keer dat deze gebruiker zich probeert aan te<br />
melden automatisch het bericht dat zijn account tijdelijk is geblokkeerd.<br />
Als drastischere maatregelen aan de orde zijn, kunt u ook het IP-adres van bepaalde gebruikers<br />
blokkeren. Mocht ook dat niet volstaan, dan kunt u als laatste redmiddel zelfs de ISP of<br />
organisatie blokkeren bij wie de desbetreffende gebruiker een abonnement heeft. De laatstgenoemde<br />
optie wordt niet aanbevolen, maar kan noodzakelijk zijn om grootschalige malafide<br />
praktijken zoals professionele spamming te voorkomen.<br />
Zo voegt u handmatig een gebruiker toe aan een groep:<br />
1. Klik op het gereedschap Intelligent object toevoegen op de werkbalk Webobjecten.<br />
2. Selecteer uw intelligente object voor toegangscontrole in de lijst aan de linkerkant en klik<br />
vervolgens onder het voorbeeld aan de rechterkant op Beheren.<br />
3. Typ in het invoervak E-mail in het vak Nieuwe gebruiker toevoegen onder in het dialoogvenster<br />
het e-mailadres van de gebruiker die u wilt toevoegen en klik op Gebruiker<br />
toevoegen.<br />
Merk op dat de nieuwe gebruiker aan de lijst Gebruikers wordt toegevoegd in het vak<br />
Beheer van gebruikersgroep.<br />
4. Als u het selectievakje Activering vereist inschakelt, wordt de gebruiker per e-mail een<br />
bericht toegestuurd met een link waarop hij moet klikken om zijn account te activeren en<br />
een wachtwoord dat automatisch is gegenereerd. Als u deze optie uitschakelt, wordt hem<br />
per e-mail alleen een automatisch gegenereerd wachtwoord toegestuurd.<br />
5. Om gebruikers toe te wijzen aan een groep, selecteert u de desbetreffende groep in de<br />
vervolgkeuzelijst Groep, selecteert u de gebruikers die u wilt toevoegen in de lijst aan de<br />
linkerkant en klikt u op Toevoegen. (Klik op Alle toevoegen als u meteen alle gebruikers<br />
aan de groep wilt toevoegen.) Als u een gebruiker weer wilt verwijderen uit een groep,<br />
gebruikt u de knop Verwijderen (of Alle verwijderen als u alle gebruikers uit de groep<br />
wilt verwijderen).<br />
Zo importeert u een gebruikerslijst uit een tekstbestand:<br />
1. Voer dezelfde stappen uit als hiervoor, maar klik in het vak Nieuwe gebruiker toevoegen<br />
onder in het dialoogvenster op Bladeren om een bestaand tekstbestand met gebruikersnamen<br />
en wachtwoorden te selecteren. Navigeer in het dialoogvenster dat daarop verschijnt<br />
naar de map waarin het bestand is opgeslagen, selecteer het en klik op Openen.<br />
2. Klik op Importeren om de gebruikerslijst te importeren en aan de lijst Gebruikers toe te<br />
voegen in het vak Beheer van gebruikersgroep.<br />
72 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Zo importeert u een gebruikerslijst uit een verzendlijst:<br />
1. Selecteer het intelligente object voor verzendlijsten in uw persoonlijke lijst met intelligente<br />
objecten en klik op Beheren.<br />
2. Klik op de knop Synchroniseren met toegangscontrole.<br />
3. Selecteer in het volgende dialoogvenster uw intelligente object voor toegangscontrole in<br />
de vervolgkeuzelijst en klik op Doorgaan. Hiermee kopieert u de opgeslagen e-mailadressen<br />
naar dit intelligente object.<br />
Zo verwijdert u een gebruiker:<br />
1. Klik terwijl uw intelligente object voor toegangscontrole is geselecteerd op Beheren.<br />
2. Selecteer in de vervolgkeuzelijst E-mail onder in het dialoogvenster de gebruiker die u<br />
wilt verwijderen.<br />
3. Klik op Gebruiker verwijderen.<br />
Zo blokkeert u een gebruiker:<br />
* Ga op dezelfde manier te werk als bij het verwijderen van een gebruiker (zie hiervoor),<br />
maar klik deze keer op Gebruiker blokkeren in plaats van op Gebruiker verwijderen.<br />
Klik op Gebruiker accepteren als u de account van de gebruiker niet langer wenst te blokkeren.<br />
Geblokkeerde gebruikers worden met een sterretje aangeduid in de lijst met<br />
gebruikers voor een gebruikersgroep.<br />
Zo bant u een gebruiker:<br />
* Op basis van IP-adres: ga op dezelfde manier te werk als bij het verwijderen van een gebruiker<br />
(zie hiervoor), maar selecteer de optie IP-adres in de vervolgkeuzelijst Blokkeren<br />
en klik vervolgens op Blokkeren.<br />
* Op basis van ISP/organisatie: ga op dezelfde manier te werk als bij het verwijderen van<br />
een gebruiker, maar klik eerst op Gebruiker opzoeken (om het netwerkadres van de ISP/<br />
organisatie bij wie de gebruiker een abonnement heeft weer te geven in het vak vlak boven<br />
de knop). Selecteer vervolgens de optie ISP/organisatie in de vervolgkeuzelijst en klik op<br />
Blokkeren.<br />
U kunt alleen gebruikers bannen die zich eerder bij Serif Web Resources hebben<br />
aangemeld.<br />
Gebruikers van wie het IP-adres of de ISP of organisatie is geblokkeerd, verschijnen in een<br />
afzonderlijke vervolgkeuzelijst. Zo kunt u eenvoudig nagaan welke gebruikersaccounts momenteel<br />
zijn geblokkeerd. U kunt gebruikers vanzelfsprekend op elk moment opnieuw toegang<br />
verlenen als een bepaald IP-adres of netwerk niet langer als verdacht wordt beschouwd.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 73
Zo geeft u geblokkeerde gebruikers opnieuw toegang:<br />
* Selecteer een specifiek IP-adres (voor afzonderlijke gebruikers) of netwerkadres (voor<br />
ISP’s/organisaties) in de vervolgkeuzelijst Accepteren. Onthoud dat het IP-adres van afzonderlijke<br />
gebruikers op een ander cijfer dan nul eindigt (bijvoorbeeld 80.6.91.234), terwijl<br />
een netwerkadres van een ISP/organisatie altijd op nul eindigt (bijvoorbeeld 80.6.91.0).<br />
Merk op dat ook wordt aangegeven wanneer het desbetreffende adres werd geblokkeerd.<br />
* Klik op Accepteren. Het IP-adres van de gebruiker wordt uit de lijst verwijderd.<br />
Gebruikers de mogelijkheid bieden zich te registreren<br />
U kunt een aanmeldingsvak toevoegen<br />
aan de pagina, zodat geregistreerde<br />
gebruikers zich kunnen aanmelden bij<br />
alle groepen waarvoor de optie Nieuwe<br />
gebruikers toevoegen bij registratie<br />
is ingeschakeld.<br />
Nieuwe gebruikers kunnen zich altijd<br />
registreren door op de link Registreren<br />
te klikken.<br />
Plaats het aanmeldingsvak op de stramienpagina voor uw site. Zo kunnen gebruikers<br />
zich vanaf elke webpagina in uw site registreren en aanmelden.<br />
Zo voegt u een aanmeldingsvak toe zodat gebruikers zich kunnen registreren:<br />
1. Volg de procedure voor het inschakelen van een geavanceerde toegangscontrole (zie eerder<br />
in deze paragraaf), maar klik deze keer op de knop Invoegen in plaats van op Afsluiten.<br />
2. Plaats de aanwijzer Plakken op de pagina op de positie waar u het aanmeldingsvak<br />
wilt invoegen en klik met de linkermuisknop om het object in te voegen.<br />
3. Klik met de rechtermuisknop op het aanmeldingsvak en kies Intelligent object beheren.<br />
4. Typ in het invoervak Naam in het vak Nieuwe groep maken een naam voor de nieuwe<br />
groep. Gebruik bij voorkeur een beschrijvende naam waaruit u later gemakkelijk kunt<br />
afleiden wat voor type gebruikers tot deze groep behoren (bijvoorbeeld ‘Thuiswerk’).<br />
5. Activeer het selectievakje Nieuwe gebruikers toevoegen bij registratie als u de aanmeldingsgegevens<br />
van nieuwe gebruikers automatisch aan de gebruikersgroep wilt toevoegen<br />
op het moment dat ze zich registreren.<br />
6. Klik op Groep maken, controleer in het volgende dialoogvenster of u de juiste instellingen<br />
hebt gekozen en klik op Gereed. Merk op dat de nieuwe groep automatisch aan de<br />
vervolgkeuzelijst Groep wordt toegevoegd in het vak Beheer van gebruikersgroep.<br />
74 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Omdat gebruikers zich zonder uw tussenkomst kunnen registreren, hoeft u ze niet handmatig<br />
toe te voegen via het vak Nieuwe gebruiker toevoegen (hoewel u dat natuurlijk altijd kunt<br />
doen, zoals beschreven in ‘Zo voegt u handmatig een gebruiker toe aan een groep’ eerder in<br />
deze paragraaf). Wanneer gebruikers zich registreren, verschijnen ze automatisch in iedere<br />
gebruikersgroep waarvoor de optie Nieuwe gebruikers toevoegen bij registratie is ingeschakeld<br />
(zie eerder).<br />
Zo registreert u zich als nieuwe gebruiker:<br />
1. Klik op de link Registreren.<br />
2. Aanvaard de gebruiksrechtovereenkomst van Serif door het selectievakje te activeren.<br />
3. Kies een e-mailadres (gebruikersnaam), schermnaam en wachtwoord. (Kies een wachtwoord<br />
dat minstens uit zes tekens bestaat.) Als CAPTCHA-verificatie is ingeschakeld, typt<br />
u in het invoervak onderaan het woord dat in de figuur wordt weergegeven.<br />
4. Klik op Signup of Registreren. Enige tijd later ontvangt u een e-mailbericht met een link<br />
waarop u moet klikken om uw account te activeren.<br />
Als u na enige tijd geen e-mailbericht met een activeringslink hebt ontvangen,<br />
controleert u de map voor ongewenste e-mail in uw Postvak IN. Mogelijk werd<br />
het e-mailbericht ten onrechte als spam beschouwd en bijgevolg naar deze map<br />
verplaatst.<br />
Zodra u bent aangemeld, kunt u uw schermnaam wijzigen, een ander wachtwoord instellen of<br />
u weer afmelden. Merk op dat met ‘schermnaam’ de naam wordt bedoeld die andere gebruikers<br />
te zien krijgen wanneer u berichten post in een forum of blog.<br />
Uw site optimaliseren voor zoekmachines<br />
Zoekmachines zoals Google, Yahoo!, Live Search, enzovoort verzamelen automatisch allerlei<br />
informatie over uw webpagina’s, ook wel het ‘indexeren’ van uw site genoemd. Deze geïndexeerde<br />
informatie zorgt ervoor dat internetgebruikers die gebruikmaken van een zoekmachine<br />
om uw site te vinden snel en doelgericht zoekresultaten verkrijgen die exact beantwoorden<br />
aan de zoekcriteria die ze hebben ingevoerd.<br />
Standaard worden alle webpagina’s geïndexeerd die u publiceert (vooral de tekst tussen de<br />
-tags). In een wereld waarin internet intussen is uitgegroeid tot een reusachtig netwerk<br />
bestaande uit miljoenen webpagina’s die voortdurend worden geïndexeerd, kunt u dit<br />
indexeringsproces echter zo optimaliseren dat uw pagina’s hoger verschijnen in de lijst met<br />
zoekresultaten dan die van een andere website.<br />
U kunt uw webpagina’s op verschillende manieren optimaliseren voor zoekmachines:<br />
* Metatags: het gaat hierbij om speciale tags die trefwoorden en een beschrijving van uw<br />
site en/of afzonderlijke pagina’s in uw site bevatten. Deze tags stellen zoekmachines in<br />
staat de zoekcriteria die een gebruiker heeft ingevoerd nauwkeuriger te vergelijken met de<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 75
trefwoorden die ze eerder hebben geïndexeerd voor uw site of afzonderlijke pagina’s in uw<br />
site, zodat gebruikers alleen accurate zoekresultaten te zien krijgen. Daarnaast kunt u ook<br />
gebruikmaken van Robots-metatags om aan te geven welke pagina’s mogen worden geïndexeerd<br />
door een zoekmachine en welke niet. Hierbij kunt u ook bepalen of zogeheten<br />
‘webcrawlers’ en ‘spiders’ hyperlinks naar andere pagina’s mogen volgen en indexeren.<br />
* Robots-bestand: u kunt voorkomen dat bepaalde pagina’s worden geïndexeerd door een<br />
zoekmachine door gebruik te maken van een Robots-bestand. Dit bestand lijkt sterk op de<br />
bovengenoemde Robots-metatag, alleen wordt in dit geval een tekstbestand (robots.txt)<br />
gebruikt om robots of spiders mee te delen welke pagina’s ze niet mogen indexeren. Een<br />
dergelijk bestand bevat dus gewoon een lijst met pagina’s die van het indexeringsproces<br />
moeten worden uitgesloten.<br />
* Sitemaps: dit is het tegenovergestelde van het Robots-concept. Aan de hand van een sitemap-bestand<br />
(sitemap.xml) kunt u aangeven welke pagina’s u in het indexeringsproces<br />
wilt opnemen, zodat ze optimaal worden geïndexeerd door zoekmachines.<br />
Of u nu gebruikmaakt van metatags, robots of sitemap-bestanden (of een willekeurige combinatie<br />
daarvan), in <strong>Studio</strong> <strong>Webdesign</strong> kunt u uw site snel en eenvoudig optimaliseren voor<br />
zoekmachines. Aangezien u deze instellingen voor de gehele site kunt configureren of wijzigen<br />
(via het tabblad Zoekmachines in het dialoogvenster Eigenschappen van Site), worden de<br />
gekozen instellingen ook op alle nieuwe pagina’s toegepast die u aan de site toevoegt. Als u<br />
de zoekmachine-instellingen voor de site wijzigt, worden de nieuwe instellingen automatisch<br />
op alle pagina’s in uw site toegepast. U kunt deze instellingen echter op elk moment onderdrukken<br />
voor een specifieke webpagina (via het tabblad Zoekmachines in het dialoogvenster<br />
Eigenschappen van pagina). In dat geval worden deze instellingen ook genegeerd wanneer u<br />
de zoekmachine-instellingen voor de site later wijzigt.<br />
Metatags gebruiken<br />
Hoewel dit geen strikte vereiste is, kunt u het beste een aantal trefwoorden en een korte beschrijving<br />
van uw site en/of afzonderlijke pagina’s in uw site opgeven als u de kans wilt vergroten<br />
dat uw website wordt ‘gevonden’ door zoekmachines. Zoals u wellicht weet, houden<br />
zoekmachines catalogi bij van webpagina’s. Vaak wordt hiervoor gebruikgemaakt van zogeheten<br />
‘webcrawlers’ of ‘spiders’ – geautomatiseerde computerprogramma’s die het web op een<br />
methodische manier doorbladeren en hierbij allerlei informatie indexeren over de gevonden<br />
websites en hun inhoud. Door een accurate beschrijving en trefwoorden op te geven, waarborgt<br />
u dat dergelijke programma’s uw website in de juiste categorie indelen. U kunt een beschrijving<br />
opgeven voor de volledige site en/of voor afzonderlijke pagina’s. Zo zou u voor een<br />
76 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
eenvoudige ornithologische website bijvoorbeeld de volgende beschrijving en trefwoorden<br />
kunnen opgeven:<br />
Site-eigenschappen<br />
Pagina-eigenschappen<br />
Beschrijving<br />
Website over reigers in Nederland<br />
en België<br />
Pagina met informatie over reigersoorten<br />
Trefwoorden Vogels, Reiger, Ardeidae Blauwe reiger, zilverreiger, withalsreiger,<br />
keizerreiger<br />
Overweeg vooraf welke beschrijving en trefwoorden u zult gebruiken voor de site en de verschillende<br />
pagina’s in uw site. <strong>Pro</strong>beer er hierbij voor te zorgen dat de algemene beschrijving<br />
van uw site deze van de afzonderlijke pagina’s aanvult.<br />
Zo geeft u een beschrijving en trefwoorden op:<br />
1. Kies Eigenschappen van site in het menu Bestand als u een beschrijving en trefwoorden<br />
wilt opgeven voor de volledige site. Om een beschrijving en trefwoorden op te geven voor<br />
een specifieke pagina in uw site, klikt u met de rechtermuisknop op die pagina in de werkomgeving<br />
of op het tabblad Site en kiest u Eigenschappen van pagina in het snelmenu<br />
(of kiest u de gelijknamige menuopdracht in het menu Bewerken).<br />
2. Klik op de tab Zoeken.<br />
3. Typ in het invoervak bovenaan een korte beschrijving van uw site of de pagina. Hoewel<br />
de lengte van deze beschrijving niet begrensd is, dient u voor ogen te houden dat de eerste<br />
tien woorden het belangrijkst zijn.<br />
4. Geef in het volgende invoervak enkele trefwoorden op (gescheiden door komma’s) die de<br />
site of pagina volgens u het beste omschrijven. <strong>Pro</strong>beer uzelf hierbij in de plaats te stellen<br />
van een potentiële bezoeker. Wat voor trefwoorden zou hij gebruiken als hij precies naar<br />
die informatie op zoek is die uw site of pagina te bieden heeft?<br />
5. Selecteer in de vervolgkeuzelijst onder in het dialoogvenster een taalcode voor uw site.<br />
Bij de meeste zoekmachines kunt u naar pagina’s in een specifieke taal zoeken. Door een<br />
taalcode te selecteren, bepaalt u of uw site al dan niet in de lijst met zoekresultaten wordt<br />
weergegeven, afhankelijk van de taal die de gebruiker heeft gekozen.<br />
Voorkomen dat pagina’s worden geïndexeerd (Robots-metatags)<br />
U kunt het gedrag van spiders en webcrawlers beïnvloeden met behulp van Robots-metatags.<br />
Aan de hand van deze tags kunt u aangeven of de volledige website en afzonderlijke pagina’s<br />
al dan niet mogen worden geïndexeerd, en/of spiders en webcrawlers hyperlinks naar andere<br />
pagina’s mogen volgen vanaf een geïndexeerde pagina. Met de opties Pagina’s in deze<br />
site indexeren en Links vanaf pagina’s volgen kunt u de gewenste zoekmachine-instellingen<br />
eenvoudig op de volledige site toepassen, en die vervolgens onderdrukken voor specifieke<br />
pagina’s.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 77
Zo genereert u Robots-metatags:<br />
1. Kies Eigenschappen van site in het menu Bestand als u voor de volledige site Robotsmetatags<br />
wilt genereren. Om een Robots-metatag te genereren voor een specifieke pagina<br />
in uw site, klikt u met de rechtermuisknop op die pagina in de werkomgeving of op het<br />
tabblad Site en kiest u Eigenschappen van pagina in het snelmenu.<br />
2. Klik op de tab Zoekmachines en activeer het selectievakje Robots-metatags genereren.<br />
(Om een Robots-metatag te genereren voor een specifieke pagina in uw site, moet u de<br />
zoekmachine-instellingen voor de gehele site onderdrukken.)<br />
3. Schakel de optie Pagina’s in deze site indexeren in of uit om aan te geven of zoekmachines<br />
de volledige site mogen indexeren, en de optie Links vanaf pagina’s volgen om<br />
te bepalen of ze al dan niet alle pagina’s mogen indexeren waarvoor een hyperlink werd<br />
aangetroffen op een geïndexeerde pagina. Om de gewenste instellingen te kiezen voor een<br />
specifieke pagina in uw site, moet u de selectievakjes Zoekmachine-instellingen voor<br />
site negeren en Robots-metatag genereren activeren en vervolgens de overeenkomstige<br />
subopties in- of uitschakelen voor deze pagina.<br />
Pagina’s van het indexeringsproces uitsluiten (Robots-bestand)<br />
Deze methode heeft dezelfde doelstelling als het gebruik van een Robots-metatag. Alleen<br />
wordt er in dit geval een tekstbestand gegenereerd (robots.txt) in plaats van een Robots-metatag,<br />
dat in de hoofdmap van de site wordt opgeslagen. Merk op dat u dit tekstbestand met<br />
een willekeurige teksteditor kunt openen als u wilt nagaan welke pagina’s en mappen in uw<br />
site niet zullen worden geïndexeerd.<br />
Zo genereert u een Robots-bestand voor zoekmachines:<br />
1. Kies Eigenschappen van site in het menu Bestand als u voor de volledige site een Robotsbestand<br />
wilt genereren. Om de gekozen instellingen te onderdrukken voor een specifieke<br />
pagina in uw site, klikt u met de rechtermuisknop op die pagina in de werkomgeving of<br />
op het tabblad Site en kiest u Eigenschappen van pagina in het snelmenu.<br />
2. Activeer het selectievakje Robots-bestand (robots.txt) genereren voor zoekmachines.<br />
3. Schakel de optie Pagina’s in deze site indexeren in of uit om aan te geven of zoekmachines<br />
de volledige site mogen indexeren. Als u wilt voorkomen dat zoekmachines een bepaalde<br />
pagina in uw site indexeren, activeert u het selectievakje Zoekmachine-instellingen voor<br />
site negeren in het dialoogvenster Eigenschappen van pagina en schakelt u de optie Toestaan<br />
dat zoekmachines deze pagina indexeren uit.<br />
Pagina’s in het indexeringsproces opnemen<br />
Tot nu toe hebben we ons in de eerste plaats geconcentreerd op methoden om te voorkomen<br />
dat bepaalde webpagina’s worden geïndexeerd. Als u deze methoden niet gebruikt, indexeren<br />
spiders en webcrawlers alle pagina’s in uw site door de hyperlinks op elke pagina te volgen en<br />
de trefwoorden, beschrijving en tekst te indexeren die ze op elke pagina aantreffen. Mogelijk<br />
wordt uw site op deze manier echter niet doeltreffend geïndexeerd. Het is immers best mogelijk<br />
dat u in uw site maar een beperkt aantal hyperlinks hebt gebruikt om pagina’s onderling<br />
78 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
aan elkaar te relateren. Om te waarborgen dat uw site ook in dergelijke gevallen optimaal<br />
wordt geïndexeerd, kunt u een sitemap-bestand (sitemap.xml) maken. Het gaat hierbij om een<br />
bestand waarin webcrawlers en spiders de pagina’s kunnen opzoeken die ze mogen indexeren.<br />
Dit bestand deelt zoekmachines ook mee wanneer pagina’s voor het laatst zijn gewijzigd, hoe<br />
vaak een pagina wijzigt en bijgevolg hoe vaak ze een pagina opnieuw moeten controleren, en<br />
hoe ‘belangrijk’ bepaalde pagina’s zijn in vergelijking met andere pagina’s.<br />
Deze methode leent zich uitstekend om de ‘ranking’ van uw webpagina’s te verbeteren. Door<br />
gebruik te maken van een sitemap-bestand, vergroot u de kans dat uw pagina’s hoger verschijnen<br />
in de lijst met zoekresultaten wanneer gebruikers een zoekmachine gebruiken om<br />
specifieke informatie terug te vinden op het web.<br />
Ook hier weer kunt u instellingen kiezen voor de gehele site en voor afzonderlijke pagina’s.<br />
Het sitemap-bestand wordt net als een Robots-bestand in de hoofdmap van uw website opgeslagen.<br />
Als u een sitemap-bestand wilt gebruiken om uw site te optimaliseren voor<br />
zoekmachines, moet u een absolute URL opgeven. Aan de hand van deze URL<br />
kunnen zoekmachines het juiste webadres van uw site indexeren (bijvoorbeeld<br />
www.easycomputing.com), zodat internetgebruikers vanuit de lijst met zoekresultaten<br />
naar uw site kunnen gaan.<br />
Zo genereert u een sitemap-bestand:<br />
1. Kies Eigenschappen van site in het menu Bestand om aan te geven of u een sitemapbestand<br />
wilt genereren voor uw site. Om een specifieke pagina in uw site aan het sitemapbestand<br />
toe te voegen (of te voorkomen dat een pagina in het sitemap-bestand wordt<br />
opgenomen), klikt u met de rechtermuisknop op die pagina in de werkomgeving of op het<br />
tabblad Site en kiest u Eigenschappen van pagina in het snelmenu.<br />
2. Activeer het selectievakje Sitemap-bestand genereren voor zoekmachines.<br />
3. (Facultatief) Wanneer u de bovengenoemde optie inschakelt, genereert het programma<br />
standaard het bestand sitemap.xml. U kunt dit bestand echter een willekeurige andere<br />
naam geven. Klik hiertoe op de knop Wijzigen en geef de gewenste naam op voor het<br />
bestand.<br />
4. Activeer het selectievakje Pagina’s in deze site indexeren als u alle pagina’s in uw site<br />
aan het sitemap-bestand wilt toevoegen (zodat ze gemakkelijker worden gevonden door<br />
zoekmachines). Schakel deze optie uit als u een leeg sitemap-bestand wilt maken. Om een<br />
specifieke pagina in uw site aan het sitemap-bestand toe te voegen, activeert u het selectievakje<br />
Zoekmachine-instellingen voor site negeren in het dialoogvenster Eigenschappen<br />
van pagina en schakelt u vervolgens de optie Toestaan dat zoekmachines deze pagina<br />
indexeren in (in de veronderstelling dat u niet de gehele site in het sitemap-bestand hebt<br />
opgenomen).<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 79
5. Kies de gewenste instellingen voor de sitemap:<br />
* Aangeven wanneer pagina’s voor het laatst zijn gewijzigd: activeer dit selectievakje<br />
als u in het sitemap-bestand informatie wilt opnemen over de datum waarop een pagina<br />
voor het laatst is gewijzigd.<br />
* Aangeven hoe vaak pagina’s wijzigen: hiermee kunt u zoekmachines meedelen hoe<br />
vaak een pagina naar verwachting zal wijzigen (om het uur, dagelijks, maandelijks, wekelijks,<br />
jaarlijks of nooit). Op basis van de instelling die u hier kiest, bepalen zoekmachines<br />
hoe vaak ze de pagina opnieuw moeten indexeren.<br />
* Prioriteit van pagina’s aangeven: met deze optie deelt u zoekmachines mee hoe belangrijk<br />
bepaalde pagina’s zijn in vergelijking met andere pagina’s in uw site waarvan<br />
de kans groot is dat ze die zullen indexeren. U kunt een waarde instellen gaande van<br />
0.0 (laagste prioriteit) tot 1.0 (hoogste prioriteit). In het dialoogvenster Eigenschappen<br />
van site kunt u de gewenste standaardinstellingen kiezen voor de gehele site, waarna u<br />
in het dialoogvenster Eigenschappen van pagina aan specifieke pagina’s een hogere of<br />
lagere prioriteit kunt toekennen.<br />
Een prioriteit toekennen aan tekst met HTML-tags voor koppen<br />
U kunt aan specifieke alinea’s (of opmaakprofielen) in HTML-frames en -tabellen een van de<br />
HTML-tags voor koppen (H1 tot en met H6) toekennen. Zo kunt u ervoor zorgen dat zoekmachines<br />
aan bepaalde tekst voorrang geven bij het indexeren van uw site, aangezien alinea’s<br />
waaraan dergelijke tags zijn toegewezen een hogere prioriteit hebben dan alinea’s waaraan<br />
‘bodytags’ zoals de -tag zijn toegewezen. Onthoud in dit verband dat de tag de<br />
hoogste prioriteit heeft en de tag de laagste prioriteit. U kunt deze tags toewijzen via de<br />
menuopdracht Alineaopmaak in het menu Tekst. Klik daartoe op Alineaopmaak > HTML<br />
in het dialoogvenster en selecteer vervolgens in de vervolgkeuzelijst de tag die u aan uw alinea<br />
wilt toewijzen.<br />
Een zoekfunctie implementeren<br />
U kunt in uw site een krachtige zoekfunctie implementeren die de zoekopdrachten van gebruikers<br />
vergelijkt met de tekst die in artistieke tekstobjecten, HTML-frames en -tabellen of<br />
aangepaste tekstframes verschijnt op uw pagina’s. Zo waarborgt u dat internetgebruikers snel<br />
de gezochte informatie terugvinden op uw webpagina’s.<br />
Merk op dat u twee gereedschappen dient te gebruiken om een zoekfunctie aan uw site toe<br />
te voegen: het gereedschap Zoekvak toevoegen en het gereedschap Veld voor zoekresultaten<br />
toevoegen. Beide gereedschappen zijn toegankelijk vanuit de werkbalk Webobjecten. Met<br />
deze twee gereedschappen kunt u de vereiste besturingselementen toevoegen om een zoekfunctie<br />
te implementeren.<br />
80 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Het zoekvak is het tekstvak waarin gebruikers het<br />
woord of de zin kunnen typen waar ze willen naar zoeken.<br />
Dit tekstvak wordt doorgaans op een stramienpagina<br />
geplaatst, zodat het op alle pagina’s van de site<br />
verschijnt.<br />
Het veld voor zoekresultaten is het venster waarin de<br />
resultaten van een zoekopdracht worden weergegeven.<br />
Dit veld wordt doorgaans op een afzonderlijke pagina<br />
geplaatst, die niet in de navigatiestructuur van de site<br />
is opgenomen.<br />
Zo kunt u met de zoekopdracht “vitae” bijvoorbeeld alle webpagina’s opvragen waarop dit<br />
woord voorkomt. Om de zoekopdracht te starten, klikt u gewoon op Zoeken nadat u de gezochte<br />
term hebt ingevoerd.<br />
In het venster met zoekresultaten worden automatisch alle pagina’s weergegeven waarop de<br />
gezochte tekst is gevonden (in de vorm van hyperlinks waarop u kunt klikken), evenals enige<br />
tekst die u als referentie kunt gebruiken. Om naar een specifieke pagina te gaan, klikt u gewoon<br />
op de overeenkomstige hyperlink in de lijst met zoekresultaten.<br />
Standaard kunnen alle webpagina’s in uw site worden doorzocht. Pagina’s die met een wachtwoord<br />
zijn beveiligd, worden echter altijd van de zoekresultaten uitgesloten. (Lees ‘Toegangscontrole’<br />
eerder in dit hoofdstuk voor meer informatie over hoe u pagina’s met een wachtwoord<br />
beveiligt.)<br />
Zo voegt u een zoekvak toe:<br />
1. Klik op het gereedschap Zoekvak toevoegen op de werkbalk Webobjecten.<br />
2. Plaats de aanwijzer op de positie waar u het zoekvak wilt invoegen op uw webpagina<br />
of stramienpagina en klik met de linkermuisknop.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 81
Plaats het zoekvak boven aan een stramienpagina als u de zoekfunctie vanaf<br />
alle webpagina’s in uw site toegankelijk wilt maken.<br />
Een zoekvak is pas nuttig als in de website ook een voorziening is geïmplementeerd om de<br />
resultaten van een zoekopdracht weer te geven voor de gebruiker. Hiervoor kunt u het gereedschap<br />
Veld voor zoekresultaten toevoegen gebruiken. Merk op dat u een willekeurige grootte<br />
kunt instellen voor het veld voor zoekresultaten. Doorgaans wordt voor dit object echter de<br />
volledige pagina gereserveerd (denk eraan dat er voldoende ruimte moet zijn om meerdere<br />
zoekresultaten te kunnen weergeven). Wellicht is het ook zinvol het veld voor zoekresultaten<br />
op een afzonderlijke pagina te plaatsen, die u desgewenst een andere grafische vormgeving<br />
kunt geven dan de overige pagina’s in uw site.<br />
Zo voegt u aan een nieuwe pagina een veld voor zoekresultaten toe:<br />
1. Klik in het vervolgmenu voor de knop Toevoegen op het tabblad Site op Nieuwe lege<br />
pagina.<br />
2. Klik met de rechtermuisknop op de nieuwe pagina en kies Eigenschappen van pagina<br />
in het snelmenu. Geef op het tabblad Algemeen van het dialoogvenster Eigenschappen<br />
van pagina een naam op voor de pagina met zoekresultaten en schakel het selectievakje<br />
Toevoegen aan navigatiestructuur uit.<br />
3. Klik op het gereedschap Veld voor zoekresultaten toevoegen op de werkbalk Webobjecten.<br />
4. Plaats de aanwijzer op de positie waar u het veld voor zoekresultaten wilt invoegen en<br />
klik en sleep om de gewenste grootte in te stellen voor het veld.<br />
82 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
4 Met tekst werken<br />
Met tekstframes werken<br />
Alle tekst die u toevoegt aan uw ontwerp, wordt in een tekstframe geplaatst, dat zowel een<br />
plaatshouder kan zijn voor afzonderlijke woorden, op zichzelf staande alinea’s als artikelen<br />
die meerdere pagina’s bestrijken. U kunt ook artistieke tekst gebruiken om stand-alone tekst<br />
te creëren waarop u allerlei speciale effecten kunt toepassen, of tabeltekst (zie ‘Teksttabellen<br />
maken’ in hoofdstuk 6) om een tekst in rijen en kolommen in te delen.<br />
Wat is een tekstframe?<br />
Een tekstframe is in feite een soort minipagina met:<br />
* marges en kolommen die de lay-out van de tekst in het frame bepalen;<br />
* frames die eraan voorafgaan en frames die erop volgen;<br />
* tekst en eventueel ook inline afbeeldingen die naadloos van het ene in het andere frame<br />
overvloeien.<br />
De tekst in een frame wordt in dit programma ook wel de plot genoemd. Onthoud in dit<br />
verband het volgende:<br />
* Als u een tekstframe verplaatst, wordt ook de tekst in het frame verplaatst.<br />
* Als u de grootte van een tekstframe wijzigt, wordt de tekst automatisch aan de nieuwe<br />
afmetingen van het frame aangepast.<br />
U kunt frames aan elkaar koppelen, zodat de tekst automatisch in het volgende frame wordt<br />
voortgezet zodra het einde van het vorige frame is bereikt, maar u kunt vanzelfsprekend ook<br />
een of meer stand-alone tekstframes gebruiken in uw site. In elke website kunt u dus afzonderlijke<br />
tekstframes gebruiken, een lange tekst over meerdere frames spreiden en/of een aantal<br />
frames gebruiken dat volledig onafhankelijk is van elkaar.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 83
Wanneer u een tekstframe selecteert, verschijnt er een begrenzingskader rond dit frame (zie<br />
frame 1 in de bovenstaande figuur). U herkent dit begrenzingskader aan de grijze rand en aan<br />
de grepen in de hoeken en langs de vier randen van het kader. Als u het frame met het selectiegereedschap<br />
hebt geselecteerd, verschijnt er bovendien een knipperende cursor in de tekst,<br />
de zogeheten invoegpositie. Als deze modus actief is, kunt u de tekst naar behoefte bewerken.<br />
Net als in een tekstverwerker moet u dubbelklikken om een woord te selecteren en drie keer<br />
na elkaar klikken om een volledige alinea te selecteren.<br />
HTML-frames versus aangepaste frames<br />
U kunt twee soorten tekstframes toevoegen aan een pagina: HTML-frames en aangepaste<br />
tekstframes. Verwar beide soorten frames niet met elkaar! In de volgende tabel vindt u een<br />
overzicht van de belangrijkste kenmerken van beide typen frames.<br />
HTML-frames<br />
Aangepaste frames<br />
Zoekmachines kunnen in de tekst zoeken <br />
Scripts invoegen om dynamische content te genereren<br />
<br />
<br />
Marges en kolomhulplijnen instellen <br />
Kolomeinde, pagina-einde of frame-einde invoegen <br />
Frame schalen/verplaatsen <br />
Frame bijsnijden <br />
Frame roteren 1<br />
Frame aan andere frames koppelen <br />
Frame in kolommen verdelen <br />
Als tekst exporteren 2<br />
Geëxporteerde tekst kopiëren en plakken <br />
Een lijn- en vulkleur instellen <br />
Een kleur- of bitmapverloop instellen <br />
HTML-compatibele opmaakprofielen gebruiken <br />
Transparantie instellen 1<br />
Een randstijl instellen 1<br />
Frame vervormen 1<br />
2D/3D-filtereffecten toepassen 1<br />
Instant 3D 1<br />
1 Als u deze voorziening gebruikt, wordt het frame als afbeelding geëxporteerd.<br />
2 Alleen als u het frame niet hebt bijgesneden of geroteerd, en er geen randstijl, transparantie-effect<br />
of filtereffect voor hebt ingesteld.<br />
84 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
De informatie in de bovenstaande tabel heeft alleen betrekking op het frame als object, en niet<br />
op de tekst in het frame. Lees ‘Tekst opmaken’ in hoofdstuk 5 voor meer informatie over het<br />
werken met tekst.<br />
Maar hoe onderscheidt u een HTML-frame nu van een aangepast frame? Dat kunt u gemakkelijk<br />
afleiden uit de kleur van de formaatgrepen wanneer u het frame selecteert. HTMLframes<br />
hebben donkerblauwe grepen, terwijl aangepaste frames grijze grepen hebben. Afgezien<br />
van de bovengenoemde verschillen hebben beide soorten frames echter ook een aantal<br />
zaken met elkaar gemeen.<br />
Zo selecteert u alleen het frame (geen invoegpositie in de tekst):<br />
* Klik op het begrenzingskader van het frame. Merk op dat u een tekstframe veel gemakkelijker<br />
kunt verplaatsen als alleen het frame is geselecteerd.<br />
Zo verplaatst u een tekstframe:<br />
* Klik op het begrenzingskader van het frame en sleep het naar de gewenste positie.<br />
OF<br />
* Gebruik de opties en op het tabblad Transformeren.<br />
Zo wijzigt u de grootte van een tekstframe:<br />
* Selecteer het frame en versleep een van de grepen in de hoeken of langs de randen van het<br />
begrenzingskader.<br />
OF<br />
* Gebruik de opties en op het tabblad Transformeren.<br />
Frames toevoegen aan een pagina<br />
Tekstframes kunnen op dezelfde manier worden toegevoegd als elk ander object in <strong>Studio</strong><br />
<strong>Webdesign</strong>. Onthoud in dit verband dat u de grootte van een frame achteraf naar behoefte<br />
kunt wijzigen, ongeacht of het om een HTML-frame of een aangepast frame gaat. Alleen bij<br />
aangepaste frames kunt u echter de basisvorm wijzigen.<br />
Zo maakt u een tekstframe:<br />
1. Selecteer het gereedschap HTML-frame toevoegen of Aangepast frame toevoegen<br />
in het vervolgmenu met tekstframegereedschappen op de werkbalk Standaardobjecten<br />
aan de linkerkant.<br />
2. Klik op de pagina of het plakbord om een nieuw frame met standaardafmetingen toe te<br />
voegen. Sleep met de muis als u een aangepaste grootte wilt instellen voor het frame.<br />
Kies Standaardwaarden object bijwerken in het menu Opmaak als u de instellingen<br />
voor het huidige frame als standaardinstellingen wilt gebruiken voor alle<br />
andere frames die u later eventueel aan de site toevoegt. Lees ‘De standaardwaarden<br />
voor objecten bijwerken’ in hoofdstuk 7 voor meer informatie.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 85
Zo verwijdert u een tekstframe:<br />
* Selecteer het frame en druk op Delete. (Als de invoegpositie zich in de tekst bevindt, worden<br />
de tekens rechts van de cursor gewist wanneer u op Delete drukt.)<br />
OF<br />
Kies Object verwijderen in het menu Bewerken, ongeacht of de invoegpositie zich al dan niet<br />
in de tekst bevindt.<br />
Tekst invoeren in een frame<br />
U kunt op verschillende manieren tekst toevoegen aan een HTML-frame of aangepast frame.<br />
Bij HTML-frames wordt de tekst automatisch naar HTML-compatibele code geconverteerd.<br />
Tekst invoeren via<br />
<strong>Studio</strong> Write<br />
Bestaande tekst<br />
importeren<br />
Rechtstreeks tekst<br />
invoeren in een<br />
frame<br />
Tekst plakken via het<br />
Klembord<br />
Tekst invoeren via<br />
slepen-en-neerzetten<br />
Klik met de rechtermuisknop op een frame en kies Tekst bewerken<br />
(of druk op Ctrl+E).<br />
OF<br />
Klik op Tekst bewerken op de optiebalk nadat u het frame hebt<br />
geselecteerd.<br />
Hiermee opent u de ingebouwde tekstverwerker <strong>Studio</strong> Write,<br />
waarmee u grote hoeveelheden tekst kunt invoeren, opmaken en<br />
proeflezen. Als het frame al tekst bevat, wordt deze automatisch<br />
geladen in <strong>Studio</strong> Write, zodat u de tekst naar behoefte kunt bewerken.<br />
Klik met de rechtermuisknop op een frame en kies Invoegen ><br />
Tekstbestand (of druk op Ctrl+T) als u bestaande tekst wilt importeren.<br />
Activeer het selectiegereedschap, klik in het tekstframe om de<br />
invoegpositie in het frame te plaatsen en begin uw tekst te typen of<br />
bewerk de bestaande tekst. (Lees ‘Tekst rechtstreeks op de pagina<br />
bewerken’ verderop in dit hoofdstuk.)<br />
Activeer het selectiegereedschap, klik in het tekstframe om de<br />
invoegpositie in de tekst te plaatsen en druk op Ctrl+V.<br />
Selecteer de tekst (bijvoorbeeld in een tekstverwerker) en sleep<br />
deze naar de pagina in <strong>Studio</strong> <strong>Webdesign</strong>.<br />
Als u de tekst in een geselecteerd frame neerzet, wordt deze onder<br />
de bestaande tekst ingevoegd. In het andere geval wordt een nieuw<br />
frame toegevoegd voor de tekst.<br />
De lay-out van aangepaste frames instellen<br />
De framelay-out van een aangepast frame bepaalt de indeling van de tekst in het frame. U<br />
kunt een aangepast tekstframe in meerdere kolommen indelen. Wanneer het frame is geselecteerd<br />
(en als de optie Randen van frames is ingeschakeld in het menu Beeld), worden de<br />
marges van deze kolommen met grijze stippellijnen aangeduid in het frame.<br />
86 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Merk op dat de kolommen die u instelt voor een tekstframe bepalen hoe de tekst wordt weergegeven<br />
in het frame. Om te voorkomen dat de tekst de ingestelde marges overschrijdt, wordt<br />
automatisch regelterugloop toegepast. Deze marges vervullen met andere woorden een andere<br />
functie dan de paginamarges en rij-/kolomhulplijnen, die veeleer lay-outhulpmiddelen<br />
zijn om de positie van elementen te bepalen op de pagina.<br />
U kunt de marges van de kolommen op twee manieren aanpassen: door ze te verslepen met<br />
de muis of via het dialoogvenster Eigenschappen van frame.<br />
Zo wijzigt u de eigenschappen van een frame rechtstreeks op de pagina:<br />
* Selecteer het frame (klik zo nodig op het begrenzingskader om alleen het frame te selecteren).<br />
Versleep vervolgens de kolomhulplijnen om de marges van de kolom aan te passen.<br />
(1) (2) (3)<br />
In de bovenstaande figuur ziet u duidelijk dat de muisaanwijzer een andere vorm krijgt naargelang<br />
deze zich boven het begrenzingskader van een tekstframe (1), boven de linker- of<br />
rechtermarge (2) of boven de boven- of ondermarge van een kolom bevindt (3).<br />
Zo wijzigt u de eigenschappen van een frame via het dialoogvenster:<br />
1. Selecteer het aangepaste frame en klik op Eigenschappen van frame op de optiebalk.<br />
2. Stel via het dialoogvenster het gewenste aantal kolommen, de afstand tussen de afzonderlijke<br />
kolommen, en de linker- en rechtermarge van de kolommen in.<br />
3. Om de breedte van de afzonderlijke kolommen en de boven- en ondermarge van het<br />
frame te wijzigen, klikt u in de overeenkomstige tabelcel en typt u een nieuwe waarde in<br />
het veld.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 87
Als het tekstframe meerdere kolommen bevat, hoeft u alleen de boven- en ondermarge<br />
van de eerste kolom in te stellen. Klik vervolgens op de kolomkoppen<br />
Boven en/of Onder om voor de andere cellen dezelfde waarden in te stellen.<br />
Tekst laten overvloeien in aangepaste frames<br />
Omdat u HTML-frames niet aan elkaar kunt koppelen, kunt u tekst niet van<br />
het ene in het andere frame laten overvloeien. Bij dergelijke frames kunt u alleen<br />
per frame instellen wat er moet gebeuren met tekst die niet volledig in het<br />
frame past.<br />
U kunt naar behoefte met één aangepast frame of met meerdere frames werken. In het laatstgenoemde<br />
geval kunt u de verschillende frames aan elkaar koppelen, zodat de tekst automatisch<br />
van het ene in het andere frame overvloeit.<br />
Een belangrijk verschil tussen een tekstverwerker en <strong>Studio</strong> <strong>Webdesign</strong> is dat het programma<br />
standaard geen frames toevoegt of verwijdert naargelang de hoeveelheid tekst die u invoert of<br />
importeert. De tekst wordt gewoon voortgezet in het volgende frame totdat het einde ervan<br />
is bereikt (sommige frames blijven leeg) of totdat er geen frames meer over zijn (een gedeelte<br />
van de tekst wordt niet weergegeven).<br />
Als de tekst eindigt voordat alle frames zijn gevuld, bevat de pagina enkele lege frames. Om<br />
deze frames te vullen, moet u ofwel extra tekst toevoegen ofwel de tekengrootte van de bestaande<br />
tekst wijzigen.<br />
Merk op dat u verschillende reeksen frames aan elkaar kunt koppelen in <strong>Studio</strong> <strong>Webdesign</strong> en<br />
in elke reeks frames een andere tekst kunt invoegen. Gebruik de voorziening Tekst beheren<br />
in Sitebeheer (toegankelijk via het menu Extra) als u een overzicht wilt van alle teksten die u<br />
hebt gebruikt in de site. Hier kunt u eenvoudig de tekst selecteren die u wilt bewerken.<br />
De voorziening Automatisch overvloeien gebruiken<br />
Bij het importeren van tekst kunt u het beste de voorziening Automatisch overvloeien gebruiken.<br />
Dan voegt het programma automatisch nieuwe tekstframes en pagina’s toe totdat de<br />
tekst volledig is geïmporteerd. Op deze manier stelt u zeker dat er voldoende frames zijn om<br />
de volledige tekst weer te geven. Zodra de tekst is geïmporteerd, kunt u proberen in te schatten<br />
in welke mate u de tekst moet aanpassen, zodat deze in de beschikbare ruimte past op uw<br />
website. Hierbij kunt u eerst de grote wijzigingen doorvoeren en vervolgens de puntjes op de<br />
i zetten.<br />
Zo laat u tekst automatisch overvloeien op de pagina:<br />
* Klik op de knop Automatisch overvloeien links van de knop Koppelen onder<br />
het frame.<br />
88 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Dan voegt het programma automatisch het vereiste aantal pagina’s en frames toe totdat de<br />
volledige tekst wordt weergegeven.<br />
Tekst aan de grootte van een frame aanpassen<br />
Als er meer tekst is dan in het beschikbare aantal frames past, slaat <strong>Studio</strong> <strong>Webdesign</strong> de<br />
tekst die niet kan worden weergegeven automatisch in een onzichtbaar overvloeigebied op<br />
en wordt onder het laatste frame de knop Koppelen weergegeven (vlak naast de knop<br />
Automatisch overvloeien). In dat geval kunt u de tekst natuurlijk altijd inkorten, of meer<br />
ruimte voorzien voor de tekst door enkele extra frames toe te voegen. Een andere mogelijkheid<br />
is op de knop Automatisch overvloeien klikken. Dan voegt het programma automatisch<br />
een aantal extra pagina’s en frames toe totdat de volledige tekst kan worden weergegeven.<br />
Wellicht bespaart u in dergelijke gevallen echter veel tijd door gebruik te maken van de gereedschappen<br />
op de optiebalk voor frames, waarmee u tekst eenvoudig aan de grootte van een<br />
frame kunt aanpassen:<br />
Automatisch schalen<br />
Klik op deze knop als u het programma automatisch de tekengrootte van de tekst<br />
wilt laten aanpassen, zodat deze netjes in de beschikbare frames past. U kunt deze<br />
functie gebruiken voordat u alle tekst hebt toegevoegd (om na te gaan hoe deze in de<br />
beschikbare frames past), of nadat u de vereiste tekst hebt toegevoegd (als ‘finishing<br />
touch’). Als u deze functie gebruikt, wordt eerst de tekengrootte aangepast, vervolgens<br />
de afstand tussen afzonderlijke regels en tot slot de witruimte onder alinea’s –<br />
totdat de tekst volledig in de beschikbare frames past. Merk op dat dit geen invloed<br />
heeft op de andere instellingen die u hebt gekozen voor de tekst.<br />
Tip: u kunt ook op Ctrl+Alt+X drukken om tekst automatisch te schalen.<br />
Tekst vergroten<br />
Klik op deze knop als u de tekengrootte van frametekst stapsgewijs wilt vergroten.<br />
Dubbelklik als u de tekengrootte in grotere stappen wilt vergroten.<br />
Tekst verkleinen<br />
Klik op deze knop als u de tekengrootte van frametekst stapsgewijs wilt verkleinen.<br />
Dubbelklik als u de tekengrootte in grotere stappen wilt verkleinen.<br />
Aangepaste frames aan elkaar koppelen<br />
Als u een tekstframe selecteert, verschijnt rechtsonder het begrenzingskader de knop Koppelen,<br />
waarmee u tekst uit het overvloeigebied kunt importeren of kunt bepalen hoe de tekst<br />
in de volgende frames overvloeit. Uit het pictogram dat op de knop wordt afgebeeld, kunt u<br />
snel de status van het frame en de bijbehorende tekst afleiden:<br />
Niet overvloeien<br />
Het frame is niet aan een volgend frame gekoppeld. (Het gaat om een op zichzelf<br />
staand frame of het laatste tekstframe van een reeks gekoppelde frames.) De tekst<br />
wordt volledig weergegeven.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 89
Overvloeien<br />
Het frame is niet aan een volgend frame gekoppeld (het gaat om een op zichzelf<br />
staand frame of het laatste frame van een reeks gekoppelde frames) en het overvloeigebied<br />
bevat tekst die nog niet werd ingevoegd.<br />
Voortgezet<br />
Het frame is aan een volgend frame gekoppeld. Ofwel is het einde van de tekst zichtbaar,<br />
ofwel wordt de tekst in het volgende frame voortgezet.<br />
Opmerking: als het overvloeigebied van het laatste frame nog tekst bevat, heeft het<br />
pictogram een rode kleur. Als het overvloeigebied geen tekst meer bevat, heeft het<br />
pictogram een groene kleur.<br />
U kunt op twee manieren te werk gaan als u tekstframes aan elkaar wilt koppelen:<br />
* U kunt een reeks lege frames aan elkaar koppelen en vervolgens de tekst importeren.<br />
OF<br />
* U kunt de tekst in één frame importeren en vervolgens extra frames toevoegen en die<br />
telkens aan de bestaande frames koppelen. Dan vloeit de tekst automatisch van het ene in<br />
het andere frame over.<br />
Frames die via de voorziening Automatisch overvloeien worden toegevoegd bij<br />
het importeren van tekst worden automatisch aan elkaar gekoppeld.<br />
U kunt zowel de knop Koppelen als de gereedschappen op de optiebalk voor frames gebruiken<br />
om bestaande frames aan elkaar te koppelen of de volgorde van gekoppelde frames te<br />
wijzigen. Let hierbij op het symbool dat wordt weergegeven voor de muisaanwijzer.<br />
Zo koppelt u het geselecteerde frame aan een ander frame:<br />
* Klik op de knop Koppelen onder het frame.<br />
OF<br />
Selecteer het frame en klik op<br />
Frame koppelen op de optiebalk.<br />
* Klik vervolgens op het frame waaraan u het geselecteerde frame wilt koppelen. Merk op<br />
dat u alleen lege frames aan het geselecteerde frame kunt koppelen.<br />
Zo verbreekt u de koppeling met het geselecteerde frame:<br />
* Klik op Koppeling verbreken op de optiebalk.<br />
OF<br />
Klik op de knop Koppelen onder het frame en klik vervolgens nogmaals op hetzelfde<br />
frame.<br />
Merk op dat de tekst in de ‘oude’ frames altijd behouden blijft. Als u bijvoorbeeld de koppeling<br />
met het tweede frame verbreekt in een tekst die uit drie frames bestaat, blijft de tekst<br />
in het eerste en derde frame behouden. Deze twee frames zijn nu aan elkaar gekoppeld. Het<br />
losgekoppelde frame is altijd leeg.<br />
90 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Druk op Esc of klik op een leeg gedeelte van de pagina of het plakbord om de<br />
bewerking te annuleren als u per ongeluk op de knop Koppelen hebt geklikt.<br />
Zo navigeert u tussen frames:<br />
* Klik op Vorig frame of Volgend frame op de optiebalk.<br />
Grafische eigenschappen van frames<br />
Net als afbeeldingen hebben ook frames een lijndikte/-kleur en een vulkleur (aanvankelijk<br />
is een lijndikte van nul pixels en transparant als vulkleur ingesteld voor een frame). Dat<br />
geldt zowel voor HTML-frames als voor aangepaste frames. Bij aangepaste frames kunt u<br />
ook de transparantie instellen (HTML-frames ondersteunen geen transparantie). U kunt deze<br />
lijn- en vuleigenschappen op elk moment aanpassen, net als bij afbeeldingen. Zo kunt u bijvoorbeeld<br />
een verloop dat uit grijstinten of lichte kleurtonen bestaat als achtergrond instellen<br />
voor de tekst. U kunt ook afbeeldingen importeren en die als inline figuren op de frametekst<br />
uitlijnen.<br />
Merk op dat u voor de frametekst alleen een effen kleur kunt instellen. Als u allerlei rand-/<br />
vuleffecten wilt toepassen op de tekst, moet u artistieke tekst gebruiken (zie verderop in dit<br />
hoofdstuk).<br />
Overvloeiopties voor tekst in HTML-frames<br />
Omdat HTML-frames aan de HTML-standaard moeten voldoen, kunt u ze niet aan elkaar<br />
koppelen (zoals aangepaste frames). Als u dit type tekstframes gebruikt, moet u beslissen wat<br />
u wilt doen met tekst die niet volledig kan worden weergegeven. Merk op dat de knop Koppelen<br />
rechtsonder een geselecteerd HTML-frame de status Overvloeien heeft als het<br />
frame meer tekst bevat dan kan worden weergegeven.<br />
In dat geval hebt u verschillende mogelijkheden: de tekst in het overvloeigebied verbergen, de<br />
grootte van het frame aan die van de tekst aanpassen of een schuifbalk toevoegen waarmee<br />
gebruikers de rest van de tekst kunnen weergeven.<br />
Zo stelt u een overvloeioptie in voor de tekst:<br />
1. Selecteer het HTML-tekstframe.<br />
2. Klik met de rechtermuisknop op het frame, kies Tekst opmaken > Overvloeiende tekst<br />
en selecteer een van de volgende opties:<br />
* Verbergen: als u voor deze optie kiest, wordt de tekst die niet kan worden weergegeven<br />
in het frame verborgen (ook op de webpagina die internetgebruikers uiteindelijk te zien<br />
krijgen in hun browser).<br />
* Overvloeien: selecteer deze optie als u de grootte van het frame wilt aanpassen, zodat<br />
alle tekst zichtbaar is.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 91
* Vaste schuifbalk: als u deze optie selecteert, wordt er altijd een schuifbalk weergegeven<br />
in het frame. Als alle tekst in het frame zichtbaar is, heeft deze schuifbalk echter een<br />
grijze kleur (is hij niet beschikbaar).<br />
* Automatisch schuifbalk weergeven: selecteer deze optie als u alleen een schuifbalk<br />
wilt toevoegen wanneer niet alle tekst kan worden weergegeven.<br />
Geef altijd een voorbeeld van uw site weer (rechtstreeks in het programma of<br />
in uw browser) om het effect van uw instellingen te controleren, vooral als u de<br />
optie Overvloeien gebruikt.<br />
Artistieke tekst gebruiken<br />
Artistieke tekst is op zichzelf staande tekst die u rechtstreeks aan een pagina kunt toevoegen.<br />
Dergelijke tekst leent zich uitstekend voor koppen, citaten en allerlei andere tekst die een<br />
speciale functie vervult in uw site. Artistieke tekst kan eenvoudig worden opgemaakt met de<br />
standaardgereedschappen voor het bewerken van tekst.<br />
Hier is een overzicht van enkele gelijkenissen tussen frametekst en artistieke tekst. Bij beide<br />
typen tekst kunt u:<br />
* de teken- en alineaopmaak wijzigen, opmaakprofielen toepassen, de tekst bewerken in<br />
<strong>Studio</strong> Write en tekst importeren;<br />
* een andere lijnstijl en/of vulkleur (met inbegrip van kleur- en bitmapverlopen) instellen<br />
en de transparantie wijzigen;<br />
* inline afbeeldingen insluiten;<br />
* filtereffecten toepassen en de tekst een specifiek aantal graden roteren;<br />
* een spellingcontrole uitvoeren, de tekst proeflezen en de synoniemenlijst gebruiken;<br />
* de tekst en gebruikte lettertypen beheren via Sitebeheer.<br />
Daarnaast zijn er echter ook enkele verschillen tussen artistieke tekst en frametekst:<br />
* U kunt de tekengrootte van artistieke tekst achteraf naar behoefte aanpassen door een van<br />
de grepen van het begrenzingskader te verslepen. Bij frametekst wijzigt alleen de manier<br />
waarop de tekst overvloeit in het frame als u de grootte van het tekstframe wijzigt.<br />
* U kunt artistieke tekst langs een pad plaatsen. Bij frametekst kunt u dat niet.<br />
* In tegenstelling tot bij frametekst wordt op artistieke tekst niet automatisch regelterugloop<br />
toegepast.<br />
92 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
* Omdat u artistieke tekst noch kunt laten overvloeien noch aan andere artistieke tekst kunt<br />
koppelen, zijn ook de opties om de tekengrootte van de tekst aan de grootte van het object<br />
aan te passen niet beschikbaar op de optiebalk voor frames.<br />
Zo voegt u artistieke tekst toe:<br />
1. Selecteer het gereedschap Artistieke tekst toevoegen op de werkbalk Standaardobjecten<br />
aan de linkerkant.<br />
2. Klik op een willekeurige positie op de pagina als u de standaardtekengrootte wilt gebruiken<br />
voor de tekst. Sleep met de muis als u een aangepaste tekengrootte wilt instellen, zoals<br />
in de volgende figuur.<br />
3. Stel voordat u begint te typen de eigenschappen van de tekst in (lettertype, tekenstijl, enzovoort).<br />
Gebruik hiervoor de optiebalk voor tekst, de opties in het menu Tekst, of het<br />
snelmenu voor tekst (optie Tekst opmaken).<br />
4. Typ rechtstreeks op de pagina de gewenste tekst.<br />
U kunt artistieke tekst op dezelfde manier selecteren, verplaatsen, schalen, verwijderen en<br />
kopiëren als een tekstframe nadat u deze aan een pagina hebt toegevoegd. Desgewenst kunt u<br />
er een effen kleur, kleur-/bitmapverloop en/of transparantie-effect voor instellen.<br />
Zo schaalt u een artistiek tekstobject:<br />
* Versleep de grepen rond het object als u de tekst proportioneel wilt schalen. Houd de<br />
Shift-toets ingedrukt terwijl u sleept als u de tekst niet-proportioneel wilt schalen.<br />
Zo bewerkt u artistieke tekst:<br />
* Sleep met de muis om het fragment te selecteren dat u wilt bewerken. Dubbelklik om een<br />
woord te selecteren. Klik drie keer als u een volledige alinea wilt selecteren.<br />
U kunt nu nieuwe tekst invoeren, de teken- en alineaopmaak wijzigen, de tekst bewerken in<br />
<strong>Studio</strong> Write, enzovoort.<br />
Bij artistieke tekst verankert u met de opties in het submenu Tekst > Verticaal<br />
uitlijnen een specifiek deel van het object. Als u bijvoorbeeld Bovenaan kiest,<br />
wordt de bovenste regel verankerd en wordt de nieuwe tekst die u typt automatisch<br />
eronder ingevoegd. Kiest u Onderaan, dan wordt de onderste (meest<br />
recente) regel verankerd en worden de regels erboven omhoog geschoven als u<br />
nieuwe regels tekst toevoegt.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 93
Tekst langs een pad plaatsen<br />
‘Gewone’ rechtlijnige artistieke tekst is verre van gewoontjes, zeker niet als u nog een stapje<br />
verder gaat en deze langs een gebogen pad laat vloeien. Het object dat op deze manier ontstaat,<br />
heeft dezelfde eigenschappen als artistieke tekst. Alleen heeft het een pad (Bézier-curve) dat<br />
u met behulp van het selectiegereedschap net zo eenvoudig kunt bewerken als om het even<br />
welke andere lijn! Daar komt nog bij dat padtekst enkele unieke voorzieningen ondersteunt<br />
die u tevergeefs zult zoeken bij andere soorten tekst. Daarover leest u verderop meer.<br />
Zo stelt u een vooraf gedefinieerd gebogen pad in voor tekst:<br />
1. Voeg enige artistieke tekst toe aan de pagina.<br />
2. Klik terwijl de tekst is geselecteerd op het pijltje naast de knop Padtekst bewerken op<br />
de optiebalk om het bijbehorende vervolgmenu te openen en kies een vooraf gedefinieerd<br />
pad.<br />
De tekst vloeit nu langs het ingestelde pad.<br />
Zo voegt u artistieke tekst toe aan een bestaande lijn of vorm:<br />
1. Teken een vrije vorm, een rechte of gebogen lijn (zie ‘Lijnen tekenen en bewerken’ in<br />
hoofdstuk 8) of een AutoVorm (zie ‘Vormen tekenen en bewerken’ in hoofdstuk 8).<br />
2. Selecteer het gereedschap Artistieke tekst toevoegen op de werkbalk Standaardobjecten.<br />
3. Beweeg met de muisaanwijzer over de lijn totdat onder de aanwijzer het symbool van een<br />
curve verschijnt en klik op de positie waar u de tekst wilt laten beginnen. Zoals u in de<br />
onderstaande figuur ziet, verandert de lijn in een stippellijn wanneer u klikt.<br />
94 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
4. Typ enige tekst op de huidige invoegpositie. Let erop dat de tekst automatisch langs de lijn<br />
vloeit, die naar een pad is geconverteerd.<br />
Het oorspronkelijke lijnobject gaat hierbij verloren. Kies Bewerken > Ongedaan<br />
maken als u de lijn weer in zijn originele hoedanigheid wilt herstellen.<br />
Zo lijnt u bestaande tekst op een bestaande lijn of vorm uit:<br />
1. Voeg enige artistieke tekst toe aan de pagina.<br />
2. Teken een vrije vorm, een rechte of gebogen lijn, of voeg een AutoVorm toe.<br />
3. Selecteer beide objecten en kies Tekst op pad uitlijnen in het menu Extra. De tekst vloeit<br />
nu langs het ingestelde pad.<br />
Zo voegt u rechtstreeks padtekst toe aan een pagina:<br />
1. Kies een van de padgereedschappen in het vervolgmenu voor artistieke tekst op de werkbalk<br />
Standaardobjecten:<br />
Gebruik het gereedschap Vrije padtekst toevoegen als u het pad van de tekst met de<br />
vrije hand wilt definiëren.<br />
Met het gereedschap Rechte padtekst toevoegen kunt u tekst langs een rechte lijn<br />
plaatsen.<br />
Met het gereedschap Gebogen padtekst toevoegen kunt u afzonderlijke lijnsegmenten<br />
met elkaar verbinden door herhaaldelijk te klikken. (Deze lijnsegmenten kunnen<br />
recht of gebogen zijn.)<br />
Deze drie gereedschappen werken ongeveer op dezelfde manier als de overeenkomstige<br />
lijngereedschappen. Bij de eerste twee gereedschappen hoeft u alleen<br />
maar te slepen met de muis om een lijn te tekenen. Het gereedschap Gebogen<br />
padtekst is iets complexer, maar biedt u wel de mogelijkheid afzonderlijke lijnsegmenten<br />
te definiëren via de optiebalk.<br />
1. Teken een lijn op de pagina. Zodra u de muisknop loslaat, verschijnt aan het begin van<br />
het pad automatisch de invoegpositie. (Bij het tekenen van een gebogen pad kunt u ofwel<br />
rechtstreeks tekst beginnen te typen op een willekeurige positie langs het pad ofwel op Esc<br />
drukken of dubbelklikken om de invoegpositie aan het begin van het pad te plaatsen.)<br />
2. Typ enige tekst op de huidige invoegpositie. De tekst wordt automatisch langs het pad<br />
geplaatst.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 95
Tekst rechtstreeks op de pagina bewerken<br />
U kunt frametekst, tabeltekst of artistieke tekst rechtstreeks op de pagina bewerken met het<br />
selectiegereedschap. Zo kunt u bijvoorbeeld een tekstfragment selecteren en nieuwe tekst invoeren,<br />
de eerste regel van een alinea laten inspringen, tabstops instellen, de teken- en alineaopmaak<br />
wijzigen, allerlei opmaakprofielen toepassen, en tekst zoeken en vervangen (zie<br />
verderop in dit hoofdstuk). Als u langere teksten wilt bewerken en allerlei geavanceerde opties<br />
wilt instellen, kunt u beter <strong>Studio</strong> Write gebruiken.<br />
Tekst selecteren en invoeren<br />
De procedure voor het selecteren van frametekst, artistieke tekst en tabeltekst is op deze van<br />
de modernste tekstverwerkers gebaseerd. Het geselecteerde gebied heeft een halftransparante<br />
blauwe achtergrondkleur, zodat de tekst die u wilt bewerken duidelijk zichtbaar is.<br />
Dubbelklik of klik drie keer als u een woord dan wel een volledige alinea wilt selecteren. U<br />
kunt ook terwijl u de Ctrl-toets ingedrukt houdt klikken of slepen om niet-aaneengesloten<br />
woorden te selecteren, of slepen terwijl u de Shift-toets ingedrukt houdt om een tekstfragment<br />
te selecteren.<br />
Gebruik de functie Alles selecteren van de voorziening Zoeken en vervangen<br />
als u meerdere identieke woorden of zinnen wilt selecteren (zie verderop in dit<br />
hoofdstuk).<br />
Zo bewerkt u tekst rechtstreeks op de pagina:<br />
1. Selecteer het selectiegereedschap en klik in het tekstobject om de invoegpositie in de tekst<br />
te plaatsen (zie figuur).<br />
OF<br />
Selecteer een afzonderlijk woord, een volledige alinea of een tekstfragment.<br />
2. Begin te typen om nieuwe tekst in te voeren of de geselecteerde tekst te overschrijven,<br />
afhankelijk van de bewerking die u in stap 1 hebt uitgevoerd.<br />
96 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Zo begint u een nieuwe alinea:<br />
* Druk op Enter.<br />
Zo begint u een nieuwe regel in dezelfde alinea (een ‘regeleinde’ of ‘zachte<br />
return’ genoemd):<br />
* Druk op Shift+Enter.<br />
De volgende twee opties zijn uitsluitend van toepassing op frametekst. U kunt zowel deze<br />
sneltoetsen als de overeenkomstige opties in het submenu Invoegen > Eindemarkering gebruiken<br />
om een kolom- of frame-einde in te voegen.<br />
Zo laat u tekst in de volgende kolom (kolomeinde) of het volgende frame<br />
(frame-einde) overvloeien:<br />
* Druk respectievelijk op Ctrl+Enter of Alt+Enter.<br />
Zo wisselt u tussen de invoeg- en overschrijfmodus:<br />
* Druk op Insert.<br />
Zo voert u een bewerking opnieuw uit:<br />
* Kies Bewerken > Herhalen of druk op Ctrl+Y.<br />
Stel dat u zojuist de opmaak van een alinea hebt gewijzigd. Dan kunt u de ingestelde opmaak<br />
eenvoudig op een andere alinea toepassen door in die alinea te klikken en Bewerken > Herhalen<br />
te kiezen in de menubalk.<br />
Tekst kopiëren, plakken en verplaatsen<br />
U kunt frametekst naar het Klembord kopiëren en deze vervolgens vanaf het Klembord in<br />
hetzelfde of in een ander tekstframe plakken. U kunt de gekopieerde tekst ook in een nieuw<br />
frame plakken.<br />
Daarnaast kunt u frametekst ook via slepen-en-neerzetten naar een andere positie in hetzelfde<br />
frame of naar een ander tekstframe in uw site verplaatsen.<br />
Zo kopieert en plakt u tekst:<br />
1. Selecteer de tekst die u wilt kopiëren.<br />
2. Kies Kopiëren in het menu Bewerken. Hiermee plaatst u de geselecteerde tekst op het<br />
Klembord.<br />
3. Klik op de positie waar u de tekst wilt invoegen (in hetzelfde of in een ander tekstframe, of<br />
in artistieke tekst) om de invoegpositie in de tekst te plaatsen.<br />
4. Kies Plakken in het menu Bewerken.<br />
Als u de invoegpositie niet in bestaande tekst plaatst, kunt u de tekst op het<br />
Klembord rechtstreeks in een nieuw tekstframe plakken.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 97
Zo verplaatst u tekst via slepen-en-neerzetten (alleen van toepassing op tekstframes):<br />
1. Selecteer de tekst die u wilt verplaatsen.<br />
2. Plaats de muisaanwijzer boven de geselecteerde tekst en houd de linkermuisknop ingedrukt.<br />
Let erop dat de aanwijzer de volgende vorm krijgt: .<br />
3. Sleep de muisaanwijzer terwijl u de linkermuisknop ingedrukt houdt naar de locatie (in<br />
hetzelfde of in een ander frame) waarheen u de tekst wilt verplaatsen. Let erop dat er een<br />
invoegcursor verschijnt op de positie waar de tekst zal worden ingevoegd.<br />
4. Laat de muisknop los om de tekst op de huidige positie in te voegen.<br />
Alinea’s laten inspringen<br />
Wanneer u een tekstobject selecteert, verschijnen er in de horizontale liniaal bovenaan markeringen<br />
die aangeven hoe ver de huidige alinea naar links en naar rechts inspringt, en hoe<br />
ver de eerste regel van de alinea inspringt. Door deze markeringen naar een andere positie te<br />
slepen, kunt u de inspringing van een alinea eenvoudig vergroten of verkleinen. U kunt hiervoor<br />
natuurlijk ook het overeenkomstige dialoogvenster gebruiken.<br />
* De waarde om de alinea aan de linkerkant te laten inspringen, wordt ingesteld in verhouding<br />
tot de linkermarge van het object.<br />
* Hoe ver de eerste regel inspringt, is afhankelijk van de waarde die u hebt ingesteld om de<br />
alinea aan de linkerkant te laten inspringen.<br />
* De waarde om de alinea aan de rechterkant te laten inspringen, wordt ingesteld in verhouding<br />
tot de rechtermarge van het object.<br />
Lees ‘De lay-out van aangepaste frames instellen’ eerder in dit hoofdstuk voor meer informatie.<br />
Zo laat u de huidige alinea inspringen:<br />
* Versleep de overeenkomstige markering op de horizontale liniaal.<br />
OF<br />
98 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Klik op Hoger niveau of Lager niveau op de optiebalk om de inspringing aan de<br />
linkerkant stapsgewijs te vergroten of te verkleinen. Hoe ver de alinea wordt ingesprongen<br />
telkens als u klikt, is afhankelijk van de standaardwaarde die is ingesteld voor tabstops.<br />
OF<br />
Kies Tekst > Alineaopmaak in de menubalk (of Tekst opmaken > Alineaopmaak in het<br />
snelmenu) als u de huidige instellingen via een dialoogvenster wilt veranderen. Stel vervolgens<br />
via de kringvelden in het groepsvak Inspringen de gewenste waarden in. Hier<br />
kunt u nauwkeurig instellen hoe ver de alinea aan beide zijden moet inspringen. Desgewenst<br />
kunt u ook de eerste regel van de alinea laten inspringen, of alle regels behalve de<br />
eerste regel van de alinea laten inspringen.<br />
Met Unicode-tekst werken<br />
<strong>Studio</strong> <strong>Webdesign</strong> ondersteunt Unicode, zodat u ook tekens uit andere talen of speciale symbolen<br />
kunt gebruiken in uw teksten.<br />
* Kies Bewerken > Plakken speciaal en selecteer Niet-opgemaakte Unicode-tekst in het<br />
dialoogvenster als u tekst in Unicode-indeling wilt invoegen vanaf het Klembord.<br />
* U kunt ook rechtstreeks Unicode-tekens invoegen in een tekst door de overeenkomstige<br />
hexadecimale waarde te typen en op Alt+X te drukken. Met deze sneltoets wisselt u tussen<br />
het weergegeven teken (bijvoorbeeld @) en de overeenkomstige hexadecimale waarde<br />
(bijvoorbeeld U+0040).<br />
* Gebruik <strong>Studio</strong> Write als u tekst in Unicode-indeling wilt exporteren.<br />
Tekst zoeken en vervangen<br />
In <strong>Studio</strong> <strong>Webdesign</strong> is een krachtige functie geïmplementeerd waarmee u tekst snel en eenvoudig<br />
kunt zoeken en vervangen. Hierbij kunt u niet alleen naar specifieke woorden of tekens<br />
zoeken, maar ook naar allerlei teken- en alineaopmaakkenmerken. Zo kunt u bijvoorbeeld<br />
naar tekst zoeken waarvoor een specifiek lettertype of opmaakprofiel, of een welbepaald<br />
type opsommingstekens/nummering of uitlijning is ingesteld. U kunt zelfs naar ontbrekende<br />
lettertypen en inline afbeeldingen zoeken! Daarbij kunt u aangeven of u de gevonden tekst<br />
meteen doorheen de gehele site wilt vervangen of als u alleen specifieke instanties ervan wilt<br />
vervangen. Merk op dat het dialoogvenster Zoeken en vervangen geopend blijft totdat u op de<br />
knop Sluiten klikt, zodat u intussen rustig verder kunt werken aan uw site.<br />
Zo gebruikt u de functie Zoeken & vervangen:<br />
1. Kies Zoeken & vervangen in het menu Bewerken of druk op Ctrl+F.<br />
2. Typ in het invoervak Zoeken naar van het dialoogvenster de tekst waar u naar wilt zoeken.<br />
Typ vervolgens in het invoervak daaronder de tekst waardoor u de gezochte tekst<br />
wilt vervangen (als u deze wilt vervangen). Klik op het pijltje aan het rechteruiteinde van<br />
beide invoervakken om een lijst met items weer te geven die u onlangs hebt gezocht en/<br />
of vervangen. Klik op de knop rechts van beide invoervakken en gebruik de opties in het<br />
vervolgmenu als u naar tekst met specifieke opmaakkenmerken of speciale tekens wilt<br />
zoeken, of als u een standaardexpressie wilt gebruiken om naar tekst te zoeken.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 99
3. Geef in het groepsvak Zoeken in aan of u alleen in de huidige tekst (de tekst die momenteel<br />
is geselecteerd) of in alle tekst wilt zoeken. Merk op dat de optie Huidige selectie<br />
alleen beschikbaar is voor de functie Alles vervangen. Als u deze optie selecteert, wordt alleen<br />
het item dat momenteel is gemarkeerd door de opgegeven tekst vervangen wanneer u<br />
op Alles vervangen klikt. (Als deze optie niet is geselecteerd, worden alle gevonden items<br />
vervangen wanneer u op de knop klikt.)<br />
4. Activeer het selectievakje Heel woord als u alleen naar tekenreeksen wilt zoeken met<br />
witruimte (een spatie, tab, pagina-einde, enzovoort) of een leesteken ervoor of erna, of<br />
naar tekenreeksen die zich aan het begin of einde van een alinea bevinden. Als u een onderscheid<br />
wilt maken tussen kleine letters en hoofdletters, activeert u de optie Identieke<br />
hoofdletters/kleine letters. Selecteer Standaardexpressies als u de inhoud van het vak<br />
Zoeken naar als expressie wilt behandelen, en niet als letterlijke tekenreeks waarnaar moet<br />
worden gezocht.<br />
5. Klik op Volgende zoeken om naar het volgende item te zoeken dat aan de opgegeven<br />
zoekcriteria beantwoordt.<br />
OF<br />
Klik op Alles selecteren als u meteen alle items wilt selecteren die aan uw zoekcriteria<br />
beantwoorden.<br />
6. Klik op Vervangen als u de gevonden tekst door deze in het vak Vervangen door wilt<br />
vervangen, of klik nogmaals op Volgende zoeken als u naar het volgende item wilt zoeken<br />
zonder het huidige item te vervangen. Herhaal dit totdat u het einde van de tekst hebt<br />
bereikt.<br />
OF<br />
Klik op Alles vervangen als u alle gevonden items door de tekst in het vak Vervangen<br />
door wilt vervangen. Wanneer de zoekopdracht is voltooid, wordt u daar automatisch via<br />
een berichtvenster op attent gemaakt.<br />
7. Klik op Sluiten om het dialoogvenster Zoeken en vervangen te sluiten.<br />
U kunt ook geavanceerde zoekcriteria instellen in het dialoogvenster Zoeken en vervangen<br />
door gebruik te maken van een standaardexpressie (een formule om een tekenreeks te genereren).<br />
Hierover leest u meer in het Help-bestand van het programma.<br />
100 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
5 Tekens en alinea’s<br />
opmaken<br />
Tekst opmaken<br />
In <strong>Studio</strong> <strong>Webdesign</strong> kunt u nauwkeurig de gewenste teken- en alineaopmaak instellen voor<br />
tekst, ongeacht of u met frametekst, tabeltekst of artistieke tekst werkt.<br />
Zo wijzigt u de opmaak van tekst:<br />
1. Selecteer de tekst.<br />
2. Gebruik de besturingselementen op de optiebalk voor tekst om het lettertype, de tekengrootte,<br />
de tekenstijl en het type uitlijning te wijzigen, of de tekst verder naar links te laten<br />
inspringen.<br />
OF<br />
Klik met de rechtermuisknop op de tekst, kies Tekst opmaken en klik op Tekenopmaak,<br />
Alineaopmaak, Opsommingstekens & nummering of Verticaal uitlijnen in het submenu.<br />
(Deze opties zijn ook toegankelijk vanuit het menu Tekst.)<br />
OF<br />
Gebruik het tabblad Tekenopmaak om eigenschappen zoals de tekengrootte, tekenafstand,<br />
regelafstand en taal te wijzigen.<br />
Standaard wordt de tekengrootte van de tekst op uw webpagina’s automatisch aangepast naargelang<br />
de browserinstellingen die gebruikers hebben gekozen. U kunt deze instelling echter<br />
onderdrukken voor de volledige site, zodat tekst altijd in de tekengrootte wordt weergegeven<br />
die u tijdens het ontwerpen van de site hebt gebruikt. Kies hiertoe Eigenschappen van site in<br />
het menu Bestand, klik op de tab Opties en activeer het selectievakje Absolute tekengrootte<br />
afdwingen.<br />
Als een lettertype niet beschikbaar is en door een ander lettertype is vervangen,<br />
wordt de naam van dit lettertype in de vervolgkeuzelijst Lettertype op de<br />
optiebalk door een vraagteken (‘?’) voorafgegaan (zie ‘Ontbrekende lettertypen<br />
vervangen’ in hoofdstuk 2).<br />
Zo verwijdert u de lokale opmaak van tekst (stelt u opnieuw de standaardeigenschappen<br />
in):<br />
1. Selecteer de tekst.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 101
2. Klik op Opmaak wissen in de vervolgkeuzelijst Opmaakprofiel op de optiebalk (of op het<br />
tabblad Opmaakprofielen)<br />
Met lettertypen werken<br />
Het lettertype wijzigen, is ongetwijfeld een van de meest ingrijpende manieren om het uiterlijk<br />
van artistieke tekst, frametekst of tabeltekst te veranderen op uw webpagina’s. Door een<br />
ander lettertype in te stellen voor afzonderlijke tekens of een volledige alinea, draagt u vaak<br />
een heel andere boodschap over op uw doelgroep.<br />
In <strong>Studio</strong> <strong>Webdesign</strong> kunt u eenvoudig een ander lettertype instellen voor tekst. U kunt hiertoe<br />
naar behoefte het tabblad Lettertypen, de optiebalk voor tekst of een dialoogvenster gebruiken.<br />
Via het tabblad Lettertypen kunt u:<br />
* rechtstreeks het gewenste lettertype instellen zonder dat u hiervoor een omweg hoeft te<br />
maken langs een dialoogvenster;<br />
* lettertypen aan de lijst met webveilige of favoriete lettertypen toevoegen;<br />
* simultaan zowel uw lijst met favoriete lettertypen als een lijst met webveilige lettertypen<br />
en lettertypen die u onlangs hebt gebruikt weergeven;<br />
* aangeven of u lettertypen die niet webveilig zijn automatisch wilt rasteren bij het exporteren<br />
van uw site of er pas bij het uitvoeren van een foutcontrole de gewenste exportopties<br />
voor wilt instellen (door met de rechtermuisknop te klikken);<br />
* naar geïnstalleerde lettertypen zoeken;<br />
* een voorbeeld bekijken van het effect van een lettertype op geselecteerde tekst door er de<br />
muisaanwijzer boven te laten rusten;<br />
* een lettertype doorheen de gehele site door een ander lettertype vervangen (met de optie<br />
Alles selecteren in het snelmenu).<br />
Mogelijk is het tabblad Lettertypen samengevouwen aan de linkerkant van de werkomgeving.<br />
In dat geval klikt u op de pijlknop om het tabblad uit te vouwen. Als momenteel<br />
een ander tabblad in de tabgroep actief is, klikt u op de tab Lettertypen om het tabblad<br />
weer te geven.<br />
Let erop dat boven aan het tabblad een lijst met webveilige lettertypen wordt weergegeven. Het<br />
gaat hierbij om een zorgvuldig gekozen subset van lettertypen (die u overigens naar behoefte<br />
kunt uitbreiden) die de bestmogelijke overeenkomst waarborgen tussen het lettertype dat u<br />
tijdens het ontwerpen van uw site gebruikt en het lettertype dat internetgebruikers uiteindelijk<br />
te zien krijgen in hun browser. Webveilige lettertypen worden niet gerasterd bij het exporteren<br />
van uw site, omdat het programma ervan uitgaat dat ze op elk systeem beschikbaar zijn.<br />
102 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Doorgaans kunt u het beste de vooraf gedefinieerde lijst met webveilige lettertypen weergeven<br />
op het tabblad Lettertypen, tenzij u zeker weet dat het lettertype dat u gebruikt daadwerkelijk<br />
ook beschikbaar is op het systeem van uw doelgroep. U vindt deze lettertypen onder de categorie<br />
Webveilig op het tabblad (in de vervolgkeuzelijst Lettertype op de optiebalk voor tekst<br />
is dezelfde categorie beschikbaar).<br />
Met opmaakprofielen werken<br />
We raden u aan reeds in een vroeg stadium van het designproces de belangrijkste opmaakkenmerken<br />
in te stellen van de tekst en afbeeldingen die u wilt gebruiken in uw site. <strong>Studio</strong><br />
<strong>Webdesign</strong> steekt u op dit gebied een handje toe door u de mogelijkheid te bieden allerlei benoemde<br />
opmaakprofielen (zowel vooraf gedefinieerde als gebruikergedefinieerde opmaakprofielen)<br />
toe te passen op frametekst, tabeltekst of artistieke tekst. Door een opmaakprofiel<br />
toe te passen op tekst, stelt u in één keer een specifieke combinatie van teken- en/of alineaopmaakkenmerken<br />
in voor die tekst. Zo kunt u voor bepaalde lay-outelementen bijvoorbeeld<br />
benoemde alineaopmaakprofielen zoals ‘Kop 1,’ ‘Kop 2,’ ‘Citaat,’ enzovoort gebruiken<br />
en tekenopmaakprofielen zoals ‘Nadruk,’ ‘Code’ of ‘Verwijzing’ om bepaalde woorden extra<br />
te benadrukken. Door gebruik te maken van opmaakprofielen, kunt u tekst niet alleen veel<br />
sneller opmaken, maar waarborgt u ook dat uw teksten doorheen de gehele site uniform zijn<br />
en dat u ze achteraf indien nodig eenvoudig kunt bijwerken.<br />
U kunt zowel de optiebalk voor tekst als het tabblad Opmaakprofielen gebruiken om de gewenste<br />
opmaak in te stellen voor tekst. Zowel teken- als alineaopmaakprofielen kunnen eenvoudig<br />
worden beheerd vanuit het dialoogvenster Lijst met opmaakprofielen.<br />
Merk op dat u via het tabblad Opmaakprofielen ook nieuwe opmaakprofielen kunt definiëren,<br />
al dan niet op basis van bestaande teksteigenschappen, en een bepaald opmaakprofiel doorheen<br />
de gehele site in één handeling door een ander opmaakprofiel kunt vervangen. Hierbij<br />
kunt u rechtstreeks op de pagina een voorbeeld bekijken van het effect van een opmaakprofiel<br />
op geselecteerde alinea’s. Raadpleeg het Help-bestand van het programma voor meer informatie<br />
over deze voorzieningen.<br />
Alineaopmaakprofielen versus tekenopmaakprofielen<br />
Een alineaopmaakprofiel bepaalt het uiterlijk van een volledige alinea. In dergelijke opmaakprofielen<br />
zijn zowel tekenopmaakkenmerken als alineaopmaakkenmerken opgeslagen. Onthoud<br />
in dit verband dat aan elke alinea in <strong>Studio</strong> <strong>Webdesign</strong> een specifiek alineaopmaakprofiel<br />
is toegewezen.<br />
* <strong>Studio</strong> <strong>Webdesign</strong> bevat één ingebouwd alineaopmaakprofiel (‘Standaard’) waarvoor allerlei<br />
standaardopmaakkenmerken zijn ingesteld. Zo wordt tekst waarop u dit opmaakprofiel<br />
toepast bijvoorbeeld standaard links uitgelijnd, en wordt er automatisch Verdana<br />
met een tekengrootte van 12 pt als lettertype voor ingesteld. Dit is het standaardopmaakprofiel<br />
voor elke alinea tekst die u typt. U kunt dit opmaakprofiel echter naar behoefte aanpassen<br />
door bepaalde kenmerken ervan te wijzigen. Daarnaast kunt u ook allerlei nieuwe<br />
opmaakprofielen definiëren of een van de ingebouwde opmaakprofielen aanpassen.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 103
* Als u een alineaopmaakprofiel toepast op tekst, worden automatisch alle alinea’s in de<br />
tekst bijgewerkt, behalve die delen van de tekst waarvoor een specifieke tekenopmaak is<br />
ingesteld. Als u een woord bijvoorbeeld vet hebt opgemaakt, blijft dit woord vet nadat u<br />
het alineaopmaakprofiel hebt toegepast.<br />
Een tekenopmaakprofiel bevat alleen opmaakkenmerken voor afzonderlijke tekens (zoals<br />
het lettertype, de tekengrootte, vet, cursief, enzovoort). Een tekenopmaakprofiel wordt altijd<br />
op geselecteerde tekens toegepast, en niet op een volledige alinea.<br />
* Een tekenopmaakprofiel wordt gewoonlijk gebruikt om bepaalde tekens of woorden in<br />
een alinea extra te benadrukken (bijvoorbeeld door ze vet of cursief te maken). Hierbij<br />
wordt ervan uitgegaan dat u het onderliggende lettertype niet wilt wijzigen. Daarom bevat<br />
<strong>Studio</strong> <strong>Webdesign</strong> het basisprofiel Standaard alinealettertype, waarvoor geen opmaakkenmerken<br />
zijn ingesteld. Dit opmaakprofiel staat in feite voor ‘om het even welk lettertype<br />
dat al is ingesteld voor de alinea.’ Stel dat u op een alinea het opmaakprofiel ‘Hoofdtekst’<br />
hebt toegepast, waarvoor standaard het lettertype Arial met een tekengrootte van 10 pt is<br />
ingesteld. In dat geval wordt als lettertype Arial met een tekengrootte van 10 pt gebruikt<br />
als u op de alinea het opmaakprofiel Standaard alinealettertype toepast.<br />
* Als u het tekenopmaakprofiel Standaard alinealettertype toepast op tekst via het tabblad<br />
Opmaakprofielen (of de vervolgkeuzelijst Opmaakprofiel op de optiebalk), wordt de lokale<br />
tekenopmaak die u eventueel hebt toegepast weer verwijderd en wordt de oorspronkelijke<br />
opmaak van de tekst hersteld – zonder dat dit enige invloed heeft op de toegepaste alineaopmaakprofielen.<br />
(Lees ‘De opmaak van tekst wissen’ hierna voor meer informatie.)<br />
* Zoals voor alineaopmaakprofielen geldt ook hier weer dat u een onbeperkt aantal nieuwe<br />
tekenopmaakprofielen kunt definiëren (of een van de vooraf gedefinieerde opmaakprofielen<br />
kunt aanpassen) en voor elk profiel specifieke opmaakkenmerken kunt instellen.<br />
Met benoemde opmaakprofielen werken<br />
Wanneer u tekst selecteert, verschijnt op het tabblad Opmaakprofielen en in de<br />
vervolgkeuzelijst Opmaakprofiel op de optiebalk automatisch de naam van het opmaakprofiel<br />
dat momenteel is ingesteld voor deze tekst. Het kan hierbij om een tekenopmaakprofiel<br />
gaan (als u een tekenopmaakprofiel hebt toegepast), of om een alineaopmaakprofiel. U kunt<br />
zowel het tabblad Opmaakprofielen, de bovengenoemde vervolgkeuzelijst als het dialoogvenster<br />
Lijst met opmaakprofielen gebruiken als u een ander opmaakprofiel wilt toepassen op de<br />
geselecteerde tekst. Via het dialoogvenster Lijst met opmaakprofielen kunt u een bestaand<br />
opmaakprofiel ook rechtstreeks bewerken, een of meer opmaakprofielen importeren uit een<br />
website die u eerder hebt gemaakt met het programma, of een nieuw opmaakprofiel maken.<br />
Standaard wordt maar een beperkt aantal opmaakprofielen weergegeven op het tabblad Opmaakprofielen.<br />
Als u alle beschikbare opmaakprofielen wilt weergeven, activeert u het selectievakje<br />
Alle tonen onder aan het tabblad, of kiest u Extra > Opties > Gebruikersinterface<br />
en vinkt u de optie Alle opmaakprofielen weergeven in lijsten aan. Naast het opmaakprofiel<br />
Standaard alinealettertype en enkele andere veelgebruikte opmaakprofielen worden echter<br />
altijd alle opmaakprofielen weergegeven die u al hebt gebruikt in de huidige site (evenals alle<br />
opmaakprofielen die daarop zijn gebaseerd). Merk op dat u van elk opmaakprofiel een voorbeeld<br />
kunt bekijken voordat u het op afzonderlijke woorden of volledige alinea’s toepast.<br />
104 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Zo past u een vooraf gedefinieerd opmaakprofiel toe:<br />
1. Klik met het selectiegereedschap in een alinea (als u een alineaopmaakprofiel wilt toepassen),<br />
of selecteer een of meer woorden of tekens (als u een tekenopmaakprofiel wilt<br />
toepassen). Als u een alineaopmaakprofiel toepast, wordt de opmaak automatisch voor de<br />
volledige alinea ingesteld, ongeacht hoeveel tekst u hebt geselecteerd. Als u in meerdere<br />
alinea’s tekst hebt geselecteerd, wordt het nieuwe opmaakprofiel op al deze alinea’s toegepast.<br />
2. Geef het tabblad Opmaakprofielen weer en selecteer het opmaakprofiel dat u op de tekst<br />
wilt toepassen.<br />
OF<br />
Kies een opmaakprofiel in de vervolgkeuzelijst Opmaakprofiel op de optiebalk.<br />
Zo bewerkt u een bestaand opmaakprofiel:<br />
1. Doe op het tabblad Opmaakprofielen het volgende:<br />
* Klik met de rechtermuisknop op het teken- of alineaopmaakprofiel dat u wilt bewerken<br />
en kies wijzigen.<br />
OF<br />
* Klik terwijl het opmaakprofiel is geselecteerd op onder aan het tabblad en<br />
klik in het dialoogvenster dat daarop verschijnt op Bewerken.<br />
2. Gebruik het dialoogvenster Eigenschappen van opmaakprofiel om de naam van het opmaakprofiel,<br />
de basisstijl, de stijl voor de volgende alinea, en de teken-, alinea- en lijstopmaak<br />
van het opmaakprofiel te wijzigen.<br />
3. Klik op OK om uw wijzigingen toe te passen. Als u de wijzigingen niet wilt toepassen,<br />
klikt u Annuleren.<br />
4. Klik op Toepassen als u vooraf tekst had geselecteerd waarvoor dit opmaakprofiel is ingesteld<br />
en deze tekst wilt bijwerken. Als u de tekst niet wilt bijwerken, klikt u gewoon op<br />
Sluiten.<br />
U kunt ook de opdracht Lijst met opmaakprofielen in het menu Tekst gebruiken als u een<br />
opmaakprofiel wilt bewerken.<br />
Genummerde of niet-genummerde lijsten maken<br />
U kunt met dit programma eenvoudig lijsten met opsommingstekens of genummerde lijsten<br />
maken in tekstframes. Onthoud in dit verband dat lijsten met opsommingstekens vooral handig<br />
zijn voor lijsten waarin de volgorde van de afzonderlijke elementen niet van belang is, en<br />
genummerde lijsten voor stapsgewijze procedures (voorafgegaan door een letter of een cijfer).<br />
Merk op dat u de lijstopmaak zowel op standaardtekst (als lokale opmaak) als op opmaakprofielen<br />
kunt toepassen.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 105
In HTML-tekstframes kunt u naar behoefte eenvoudige<br />
opsommingstekens, cijfers (numerieke en Romeinse<br />
cijfers) en letters gebruiken.<br />
Wanneer u echter met aangepaste tekstframes werkt, kunt u zowel eenvoudige als complexe<br />
lijsten met opsommingstekens of genummerde lijsten maken, ofwel door een van de vooraf<br />
gedefinieerde lijsten te gebruiken (zie hierna) ofwel door uw eigen lijsten met aangepaste<br />
symbolen, letters of cijfers te maken. Hierbij kunt u een van de vooraf gedefinieerde lijsten al<br />
dan niet door een eigen vooraf gedefinieerde lijst vervangen die op uw aangepaste lijstopmaak<br />
is gebaseerd.<br />
Lijst met opsommingstekens<br />
Genummerde lijst<br />
Zo maakt u een genummerde lijst of een lijst met opsommingstekens:<br />
1. Selecteer een of meer alinea’s.<br />
OF<br />
Klik in een alinea om de invoegpositie in de tekst te plaatsen.<br />
2. Kies Opsommingstekens & nummering in het menu Tekst.<br />
3. Doe in het dialoogvenster Eigenschappen van opmaakprofiel het volgende:<br />
* Klik op een van de vooraf gedefinieerde symbolen als het om tekst in een HTML-tekstframe<br />
gaat (zie hiervoor).<br />
OF<br />
* Selecteer Opsommingstekens of Nummering in de vervolgkeuzelijst Stijl en klik vervolgens<br />
op een van de vooraf gedefinieerde stijlen als het om tekst in een aangepast<br />
tekstframe gaat.<br />
OF<br />
* Selecteer een vooraf gedefinieerde stijl en klik op Details als u een aangepaste lijst wilt<br />
maken. Ga daarna als volgt te werk:<br />
4. Klik op OK om de lijstopmaak toe te passen.<br />
106 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Telkens als u op Enter drukt, wordt een nieuwe regel begonnen die door het opgegeven symbool<br />
of cijfer wordt voorafgegaan. Druk twee keer na elkaar op Enter als u voor de rest van de<br />
tekst weer de standaard alineaopmaak wilt gebruiken in plaats van de lijst voort te zetten.<br />
Zo laat u de nummering van een lijst opnieuw beginnen vanaf een bepaald<br />
punt (alleen in aangepaste tekstframes):<br />
1. Klik op de positie vanaf waar u de nummering opnieuw wilt laten beginnen in de lijst en<br />
kies Opsommingstekens & nummering in het menu Tekst.<br />
2. Activeer het selectievakje Opnieuw nummeren om de cijfer- of letterreeks opnieuw vanaf<br />
1 respectievelijk A te laten beginnen.<br />
3. Klik op OK.<br />
Zo past u opnieuw de standaardopmaak toe op een lijst met opsommingstekens<br />
of genummerde lijst:<br />
1. Selecteer de lijst.<br />
2. Kies Opsommingstekens & nummering in het menu Tekst.<br />
OF<br />
Klik met de rechtermuisknop op de geselecteerde lijst en kies Tekst opmaken > Opsommingstekens<br />
& nummering in het snelmenu.<br />
3. Klik in het dialoogvenster op de optie Geen. Klik daarna op OK.<br />
U kunt in <strong>Studio</strong> <strong>Webdesign</strong> ook opsommingstekens en nummers toewijzen aan opmaakprofielen.<br />
(Hoe u dit doet, leest u in het Help-bestand van het programma.)<br />
Symbolen invoegen<br />
U kunt allerlei symbolen invoegen in uw teksten, ofwel via het menu Invoegen ofwel (voor<br />
veelgebruikte symbolen) door gebruik te maken van sneltoetsen.<br />
Gebruik alleen symbolen uit de standaardtekenset op webpagina’s.<br />
Zo voegt u een symbool in via het menu Invoegen:<br />
1. Klik met het selectiegereedschap op de positie waar u een symbool wilt invoegen in de<br />
tekst.<br />
2. Kies Invoegen > Symbool en selecteer het gewenste symbool in het submenu.<br />
3. Kies Overige om het dialoogvenster Symbool invoegen te openen als het symbool dat<br />
u wilt invoegen niet in de lijst voorkomt. Merk op dat dit dialoogvenster geopend blijft,<br />
zodat u de tekst in de werkomgeving verder kunt bewerken terwijl u symbolen selecteert.<br />
* Selecteer een lettertype in de vervolgkeuzelijst linksboven in het dialoogvenster om alle<br />
tekens in deze set weer te geven. Blader vervolgens door de lijst met beschikbare tekens.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 107
Via de vervolgkeuzelijst rechtsboven kunt u desgewenst een specifieke deelverzameling<br />
selecteren om naar een bepaald bereik binnen de geselecteerde tekenset te gaan.<br />
* Klik op een teken (of selecteer het terwijl u door de tekenset bladert met behulp van de<br />
pijltoetsen op het toetsenbord) om de naam en hexadecimale tekencode van het desbetreffende<br />
teken weer te geven. U kunt ook een tekencode invoeren in het vak onder<br />
in het dialoogvenster en vervolgens op Zoeken klikken om dit teken te selecteren in de<br />
lijst.<br />
* Als u een teken in uw tekst wilt invoegen, dubbelklikt u er op (of selecteert u het en klikt<br />
u op Invoegen).<br />
In de rij onder de lijst met beschikbare tekens worden alle tekens weergegeven<br />
die u onlangs in een tekst hebt ingevoegd. Dubbelklik op een teken in deze rij<br />
als u dit teken in uw tekst wilt invoegen.<br />
Controleer of de invoegpositie zich nog altijd in de tekst bevindt als u het teken<br />
dat u hebt ingevoegd nergens kunt terugvinden.<br />
De huidige datum/tijd invoegen<br />
U kunt een datum- of tijdveld invoegen in uw tekst. Hierbij kunt u uit verschillende notaties<br />
kiezen. Standaard wordt het ingevoegde datum-/tijdveld automatisch bijgewerkt wanneer u<br />
de site opent of opslaat. Desgewenst kunt u deze voorziening echter uitschakelen.<br />
Zo voegt u een datum-/tijdveld in:<br />
1. Klik met het selectiegereedschap op de positie waar u het veld wilt invoegen in de tekst.<br />
2. Kies Invoegen > Informatie > Datum of tijd en kies de gewenste datum-/tijdnotatie.<br />
3. Schakel het selectievakje Automatisch bijwerken uit als u altijd de datum/tijd wilt weergeven<br />
waarop het veld is ingevoegd. Zo voorkomt u dat de datum/tijd automatisch wordt<br />
bijgewerkt.<br />
Persoonlijke gegevens invoegen<br />
In het dialoogvenster Persoonlijke gegevens kunt u persoonlijke informatie opslaan die u vaak<br />
nodig hebt of regelmatig bijwerkt, zodat u deze gegevens niet voortdurend opnieuw hoeft in<br />
te voeren. Overweeg bijvoorbeeld maar eens hoe vaak u niet van mobiel telefoonnummer of<br />
e-mailadres verandert! In dit dialoogvenster ziet u in één oogopslag al uw persoonlijke gegevens.<br />
Onthoud in dit verband dat het programma velden met persoonlijke gegevens in uw site<br />
automatisch bijwerkt wanneer u deze informatie achteraf wijzigt.<br />
108 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Zo controleert of wijzigt u uw persoonlijke gegevens:<br />
1. Kies Persoonlijke gegevens instellen in het menu Extra.<br />
2. Voer uw persoonlijke gegevens in op de tabbladen Werk, Privé en Aangepast. (Als uw site<br />
een kalender bevat, is in dit dialoogvenster ook het tabblad Kalenders beschikbaar.)<br />
Op het tabblad Aangepast kunt u aangepaste velden definiëren voor gegevens die u vaak<br />
nodig hebt in uw site.<br />
Zo voegt u een veld met persoonlijke gegevens in:<br />
1. Klik met het selectiegereedschap op de positie waar u het veld wilt invoegen in de tekst.<br />
2. Kies Invoegen > Informatie > Persoonlijke gegevens.<br />
3. Selecteer in de keuzelijst boven in het dialoogvenster de informatie die u wilt invoegen<br />
en geef eventueel het prefix of suffix op dat u in uw persoonlijke gegevens wilt opnemen,<br />
bijvoorbeeld Naam:.<br />
4. Klik op OK.<br />
Zo werkt u velden met persoonlijke gegevens bij:<br />
* Kies Extra > Persoonlijke gegevens instellen en voer de vereiste wijzigingen door.<br />
* Klik op Bijwerken om alle velden met persoonlijke gegevens die zijn gewijzigd bij te werken<br />
in uw site. Merk op dat deze velden aan het dialoogvenster gekoppeld blijven totdat u<br />
ze verwijdert.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 109
6 Met tabellen werken<br />
Teksttabellen maken<br />
Tabellen zijn ideaal als u tekst en gegevens in rijen en kolommen wilt indelen, die u achteraf<br />
zo nodig eenvoudig kunt aanpassen. Hierbij kunt u gebruikmaken van talrijke ingebouwde<br />
spreadsheetfuncties.<br />
Elke tabelcel gedraagt zich als een soort miniframe. Tabellen vertonen veel overeenkomsten<br />
met tekstframes. Zo kunt u ook bij tabellen een aangepaste teken- en alineaopmaak instellen,<br />
allerlei vooraf gedefinieerde opmaakprofielen toepassen op de tabeltekst, inline afbeeldingen<br />
insluiten, een effen kleur, kleurverloop of bitmapverloop als achtergrondkleur instellen voor<br />
specifieke cellen of de volledige tabel, handmatig of automatisch een spellingcontrole uitvoeren,<br />
de tekst proeflezen en synoniemen opzoeken in een woordenlijst. Tabellen ondersteunen<br />
echter ook enkele unieke functies, zoals AutoVullen en AutoWissen. Daarnaast kunt u in<br />
tabellen ook formules invoegen en een aangepaste getalnotatie instellen.<br />
HTML-tabellen versus aangepaste tabellen<br />
U kunt twee soorten tabellen toevoegen aan een pagina: HTML-tabellen en aangepaste tabellen.<br />
Sommige voorzieningen zijn voor beide typen tabellen beschikbaar, andere zijn uitsluitend<br />
voor HTML-tabellen of aangepaste tabellen beschikbaar. Hierna vindt u een overzicht<br />
van de belangrijkste eigenschappen van beide soorten tabellen.<br />
HTMLtabellen<br />
Aangepaste<br />
tabellen<br />
Zoekmachines kunnen in de tekst zoeken <br />
Scripts invoegen om dynamische content te genereren <br />
Tabel schalen/verplaatsen <br />
Tabel bijsnijden <br />
Tabel roteren 1<br />
Tabeltekst roteren (in cel) 1<br />
110 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
HTMLtabellen<br />
Aangepaste<br />
tabellen<br />
Gegevens sorteren <br />
Een lijn- en vulkleur instellen <br />
Een kleur- of bitmapverloop instellen <br />
HTML-compatibele opmaakprofielen gebruiken <br />
Transparantie instellen 1<br />
Een randstijl instellen 1<br />
Tabel vervormen 1<br />
2D/3D-filtereffecten toepassen 1<br />
Instant 3D 1<br />
AutoWissen/AutoVullen/AutoOpmaak <br />
Celtekst bewerken met <strong>Studio</strong> Write <br />
Celtekst weergeven in Sitebeheer <br />
Excel- en tekstbestanden importeren <br />
1 Als u deze voorziening gebruikt, wordt de tabel als afbeelding geëxporteerd.<br />
Maar hoe onderscheidt u een HTML-tabel nu van een aangepaste tabel? Dat kunt u gemakkelijk<br />
afleiden uit de kleur van de formaatgrepen wanneer u de tabel selecteert. HTML-tabellen<br />
hebben donkerblauwe grepen, terwijl aangepaste tabellen grijze grepen hebben.<br />
Zo voegt u een tabel in:<br />
1. Selecteer het gereedschap HTML-tabel toevoegen of Aangepaste tabel toevoegen<br />
in het vervolgmenu met tabelgereedschappen op de werkbalk Standaardobjecten. Klik<br />
vervolgens op de pagina of het plakbord op de positie waar u de tabel wilt invoegen om<br />
een tabel met standaardafmetingen te voegen. Sleep met de muis als u aangepaste afmetingen<br />
wilt instellen voor de tabel. Het dialoogvenster invoegen verschijnt, waarin u uit een<br />
aantal vooraf gedefinieerde opmaakprofielen kunt kiezen.<br />
2. Selecteer het gewenste opmaakprofiel in de keuzelijst aan de linkerkant. Selecteer [Standaard]<br />
als opmaakprofiel als u een eenvoudige niet-opgemaakte tabel wilt invoegen.<br />
3. Klik op OK.<br />
Merk op dat op de optiebalk boven in het programmavenster automatisch enkele aangepaste<br />
opties voor tabellen verschijnen, waarmee u eenvoudig de vereiste gegevens kunt toevoegen<br />
aan de tabel en ze naar behoefte kunt opmaken.<br />
<strong>Studio</strong> <strong>Webdesign</strong> behandelt tabeltekst op drie manieren: als getallen, formules of tekst.<br />
* Getallen: u kunt getallen op verschillende manieren opmaken. Lees ‘Een getalnotatie instellen’<br />
in het Help-bestand van het programma voor meer informatie.<br />
* Formules: tekst die met een isgelijkteken (=) begint, wordt altijd als een formule be-<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 111
schouwd door het programma. Formules kunnen op dezelfde manier worden opgemaakt<br />
als getallen. Lees ‘Formules invoegen’ in het Help-bestand van het programma voor meer<br />
informatie.<br />
* Tekst: alle andere gegevens (tekst die niet met een isgelijkteken begint) worden als gewone<br />
tekst beschouwd door het programma.<br />
Tabellen bewerken<br />
U kunt een tabel op dezelfde manier selecteren, verplaatsen, schalen, verwijderen en kopiëren<br />
als elk ander object in <strong>Studio</strong> <strong>Webdesign</strong> nadat u deze aan uw site hebt toegevoegd. Daarnaast<br />
kunt u ook de celeigenschappen van een tabel wijzigen.<br />
Zo bewerkt u een tabel:<br />
* Klik op het begrenzingskader van het object om de volledige tabel te selecteren. Versleep<br />
vervolgens een van de grepen in de hoeken of langs de randen van het kader om de grootte<br />
van de tabel te wijzigen. Klik op een van de randen van het begrenzingskader en sleep met<br />
de muis terwijl u de linkermuisknop ingedrukt houdt als u de tabel wilt verplaatsen.<br />
* Selecteer de tabel en druk op Delete (of kies Object verwijderen in het menu Bewerken)<br />
als u de tabel wilt verwijderen.<br />
OF<br />
Selecteer een willekeurige cel in de tabel en kies Tabel > Verwijderen > Tabel.<br />
* Gebruik de opdrachten Kopiëren en Plakken in het menu Bewerken als u een kopie wilt<br />
maken van de geselecteerde tabel en de gegevens die deze bevat. Merk op dat u een tabel<br />
alleen kunt kopiëren als er geen gegevens zijn geselecteerd in de tabel. (De invoegpositie<br />
mag zich dus niet in de tekst bevinden.) U kunt de tabel ook selecteren en deze vervolgens<br />
terwijl u de Ctrl-toets ingedrukt houdt naar een andere positie slepen in plaats van de<br />
bovengenoemde opdrachten te gebruiken.<br />
Voor andere bewerkingen moet u de tekst in de tabel of specifieke delen van de tabel selecteren.<br />
Hierbij kunt u in een cel klikken om de invoegpositie in die cel te plaatsen of een specifiek<br />
tekstfragment selecteren door met de muis te slepen. U kunt ook meerdere cellen, rijen of<br />
kolommen selecteren door met de muis te slepen. Hierbij wordt alle tekst in het gedefinieerde<br />
gebied geselecteerd. Zodra u een selectie hebt gemaakt, kunt u de tekst in de tabel bewerken<br />
en de structuur en het uiterlijk van de tabel en/of onderdelen ervan wijzigen.<br />
Zo selecteert en bewerkt u tekst in cellen, rijen en kolommen:<br />
* Dubbelklik of klik drie keer na elkaar als u respectievelijk afzonderlijke woorden of een<br />
volledige alinea wilt selecteren in een tabelcel. Sleep een selectiekader met de muis als u<br />
een tekstfragment wilt selecteren in een cel. Lees ‘Tekst rechtstreeks op de pagina bewerken’<br />
in hoofdstuk 4 voor meer informatie.<br />
* Druk op Tab of Shift+Tab (of gebruik de pijltoetsen op het toetsenbord) om respectievelijk<br />
naar de volgende of vorige cel te gaan in de tabel.<br />
112 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
* Om tekst in te voeren, begint u gewoon te typen nadat u de invoegpositie in de gewenste<br />
cel hebt geplaatst. Merk op dat de hoogte van de cellen automatisch wordt aangepast als u<br />
meerdere regels tekst invoert. Druk op Ctrl+Tab als u een tab wilt invoegen in de tekst.<br />
* Om een rij of kolom te selecteren, klikt u op de overeenkomstige rij- of kolomkop aan de<br />
linker- of bovenkant van de tabel. Als u meerdere rijen of kolommen wilt selecteren, sleept<br />
u met de muis over de overeenkomstige rij- of kolomkoppen. U kunt ook eerst een of meer<br />
cellen selecteren in een rij of kolom en vervolgens Tabel > Selecteren > Rij(en) of Tabel ><br />
Selecteren > Kolom(men) kiezen in de menubalk.<br />
* Kies Tabel > Selecteren > Alles in de menubalk of in het snelmenu als u alle tekst (alle<br />
rijen en kolommen) wilt selecteren.<br />
* Gebruik de opdrachten Kopiëren en Plakken in het menu Bewerken als u geselecteerde<br />
tekst wilt kopiëren (binnen dezelfde tabel of tussen verschillende tabellen), net als bij<br />
frametekst. U kunt ook met de rechtermuisknop op een cel klikken, Kopiëren kiezen in<br />
het snelmenu, vervolgens met de rechtermuisknop op een andere cel klikken en Plakken<br />
kiezen in het snelmenu.<br />
Gebruik de voorziening AutoVullen als u een reeks cellen snel en eenvoudig met de<br />
inhoud van de geselecteerde cel wilt vullen. Klik hiertoe op de greep AutoVullen in de<br />
rechterbenedenhoek van de geselecteerde cel en sleep deze terwijl u de linkermuisknop<br />
ingedrukt houdt naar buiten om een aangrenzende groep cellen te selecteren, ofwel in<br />
dezelfde rij ofwel in dezelfde kolom. Op dezelfde manier kunt u door de greep AutoWissen<br />
te verslepen vanuit een lege cel snel en eenvoudig de inhoud van aangrenzende cellen<br />
wissen.<br />
Merk op dat u via kopiëren-en-plakken ook rechtstreeks gegevens uit een Microsoft Exceltabel<br />
kunt invoegen in een <strong>Webdesign</strong>-tabel.<br />
* Als u de inhoud van een cel wilt verplaatsen binnen dezelfde tabel, beweegt u met de<br />
muisaanwijzer boven een van de randen van de geselecteerde cel totdat het symbool Verplaatsen<br />
verschijnt en sleept u de cel terwijl u de linkermuisknop ingedrukt houdt naar<br />
een andere positie in de tabel.<br />
* Om de teken- en/of alineaopmaak van geselecteerde tekst te wijzigen of er een opmaakprofiel<br />
op toe te passen, gebruikt u de overeenkomstige opties op de optiebalk voor tekst<br />
of in het menu Tekst.<br />
* Als u geselecteerde tekst wilt roteren in een aangepaste tabel, klikt u er met de rechtermuisknop<br />
op en kiest u Tabel > Celeigenschappen in het snelmenu. Gebruik vervolgens<br />
de draaischijf op het tabblad Oriëntatie van het dialoogvenster Celeigenschappen om de<br />
gewenste oriëntatie in te stellen voor de tekst, of typ rechtstreeks een waarde in het bijbehorende<br />
invoervak.<br />
* U kunt een of meer rijen of kolommen in de tabel of de volledige tabel sorteren. Klik<br />
hiertoe op de knop Sorteren op de optiebalk. Raadpleeg het Help-bestand voor meer informatie.<br />
* Merk op dat u ook een aangepaste lijnkleur/-stijl of een kleur- of bitmapverloop kunt<br />
instellen voor de afzonderlijke cellen in een tabel, zowel bij aangepaste tabellen als HTMLtabellen.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 113
* Klik op Werkbladfuncties op de optiebalk om de werkbalk Tabel weer te geven als u een<br />
aangepaste getalnotatie wilt instellen voor cellen en/of formules wilt invoegen. Raadpleeg<br />
het Help-bestand van het programma voor meer informatie.<br />
Zo wijzigt u de structuur en het uiterlijk van een tabel:<br />
* Om een specifieke cel in de tabel te selecteren, klikt u op de rand van de desbetreffende<br />
cel. Als u meerdere cellen wilt selecteren, klikt u in één cel sleept u de muis terwijl u de<br />
linkermuisknop ingedrukt houdt over de andere cellen die u wilt selecteren.<br />
* Plaats de muisaanwijzer boven de scheidingslijn tussen de rij- en kolomkoppen aan de<br />
linker- en bovenkant van de tabel (let erop dat deze de volgende vorm krijgt: ) en sleep<br />
met de muis terwijl u de linkermuisknop ingedrukt houdt als u de breedte van de rijen en<br />
kolommen wilt wijzigen. Merk op dat u de hoogte van een rij onafhankelijk van de hoeveelheid<br />
tekst in die rij kunt aanpassen. Gebruik de opdrachten Kolombreedte instellen<br />
en Rijhoogte instellen in het menu Tabel als u een absolute kolombreedte of rijhoogte<br />
wilt instellen. Om de breedte/hoogte van afzonderlijke rijen/kolommen in te stellen, klikt<br />
u op de knop voor de desbetreffende rij-/kolomkop en kiest u Hoogte instellen of<br />
Breedte instellen in het vervolgmenu. Merk op dat u de breedte van afzonderlijke kolommen<br />
kunt aanpassen zonder dat dit een invloed heeft op de breedte van de volledige tabel<br />
door de desbetreffende kolomkop te verslepen terwijl u de Ctrl-toets ingedrukt houdt.<br />
* Als u de rijen of kolommen in een tabel even hoog of even breed wilt maken, selecteert u<br />
de volledige tabel (of de rijen of kolommen die u even hoog/breed wilt maken) en kiest u<br />
Rijen gelijkmatig verdelen of Kolommen gelijkmatig verdelen in het menu Tabel. Merk<br />
op dat mogelijk regelterugloop wordt toegepast op de inhoud van cellen om te voorkomen<br />
dat de breedte van de tabel wijzigt wanneer u kolommen gelijkmatig verdeelt.<br />
Als u de rijen in een specifieke kolom even hoog wilt maken, klikt u op de knop voor de<br />
desbetreffende kolom en kiest u Rijen gelijkmatig verdelen in het vervolgmenu. Analoog<br />
hieraan kunt u door het vervolgmenu voor een rijkop te openen en Kolommen gelijkmatig<br />
verdelen te kiezen alle kolommen in een specifieke rij even breed maken.<br />
* Selecteer een of meer kolommen en kies Kolom(men) autom. aan celinhoud aanpassen<br />
in het menu Tabel (of gebruik de overeenkomstige opdracht in het snelmenu) als u de<br />
breedte van de geselecteerde kolom(men) aan de celinhoud met de grootste breedte wilt<br />
aanpassen. Voor rijen is een soortgelijke optie beschikbaar.<br />
Als u de breedte van afzonderlijke rijen of kolommen aan de celinhoud wilt aanpassen,<br />
klikt u op de knop voor de desbetreffende rij- of kolomkop en kiest u Rij autom. aan<br />
celinhoud aanpassen of Kolom autom. aan celinhoud aanpassen in het vervolgmenu.<br />
* Als u meerdere rijen of kolommen uit de tabel wilt verwijderen, selecteert u die rijen of<br />
kolommen (of een of meer cellen in die rijen/kolommen) en kiest u Tabel > Verwijderen<br />
> Rij(en) of Tabel > Verwijderen > Kolom(men). Om een specifieke rij of kolom te ver-<br />
114 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
voor de desbetreffende rij- of kolomkop en kiest u Verwij-<br />
wijderen, klikt u op de knop<br />
deren.<br />
* Als u kolommen wilt toevoegen of verwijderen in een bestaande tabel, klikt u op de kolomkop<br />
rechts van de laatste kolom en sleept u de muis terwijl u de linkermuisknop ingedrukt<br />
houdt respectievelijk naar rechts of naar links. De tabel wordt meteen bijgewerkt<br />
terwijl u sleept met de muis. Om rijen toe te voegen of te verwijderen, sleept u de rijkop<br />
onder de laatste rij omhoog of omlaag.<br />
U kunt ook eerst een of meer cellen selecteren en vervolgens Tabel > Invoegen ><br />
Kolom(men) of Tabel > Invoegen > Rij(en) kiezen in de menubalk. In het dialoogvenster<br />
dat daarop verschijnt, kunt u instellen hoeveel kolommen of rijen u aan de tabel wilt<br />
toevoegen en of u die voor of na de geselecteerde cellen wilt invoegen.<br />
* Selecteer een cellenbereik en kies Tabel > Cellen samenvoegen (of gebruik de gelijknamige<br />
opdracht in het snelmenu) als u de geselecteerde cellen wilt samenvoegen, zodat ze<br />
zich over meerdere rijen of kolommen uitstrekken. Let erop dat in de samengevoegde cel<br />
alleen de tekst wordt weergegeven die oorspronkelijk zichtbaar was in de linkerbovenhoek<br />
van het bereik. De oorspronkelijke cellen en de inhoud ervan blijven echter behouden. Als<br />
u de samengevoegde cel weer in afzonderlijke cellen wilt splitsen, selecteert u deze en kiest<br />
u Tabel > Cellen splitsen (of gebruikt u de gelijknamige opdracht in het snelmenu).<br />
Als u alle cellen in een specifieke rij of kolom wilt samenvoegen, klikt u op de knop voor<br />
de desbetreffende rij-/kolomkop en kiest u Cellen samenvoegen. Kies Cellen splitsen in<br />
hetzelfde vervolgmenu als u de samengevoegde cellen weer wilt splitsen.<br />
* Als u een cel (met inbegrip van de tekst, opmaak, ingestelde randstijl en celkleur) naar<br />
een andere cel in dezelfde tabel wilt kopiëren, selecteert u die cel, beweegt u de muisaanwijzer<br />
terwijl u de Ctrl-toets ingedrukt houdt boven de rand van de geselecteerde cel<br />
totdat het symbool Kopiëren verschijnt en sleept u de cel met ingedrukte linkermuisknop<br />
naar de gewenste positie in de tabel.<br />
* Om een aangepaste achtergrondkleur in te stellen voor de volledige tabel, beweegt u de<br />
muisaanwijzer boven de linkerbovenhoek van de tabel totdat het symbool verschijnt.<br />
Klik vervolgens één keer om de volledige tabel te selecteren en kies de gewenste vulkleur<br />
op het tabblad Kleur of Stalen. (Lees ‘Effen kleuren instellen’ in hoofdstuk 10 voor meer<br />
informatie.)<br />
* Als u voor specifieke cellen in de tabel een andere achtergrondkleur wilt instellen, selecteert<br />
u die cellen en gebruikt u opnieuw het tabblad Kleur of Stalen.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 115
De voorziening AutoOpmaak gebruiken<br />
Zo past u een vooraf gedefinieerd opmaakprofiel toe om het uiterlijk van een<br />
tabel aan te passen:<br />
* Kies AutoOpmaak in het menu Tabel (of Tabel > AutoOpmaak in het snelmenu) om<br />
het dialoogvenster AutoOpmaak te openen. In dit dialoogvenster kunt u uit verschillende<br />
voorbeeldtabellen kiezen, die zich duidelijk van elkaar onderscheiden op het gebied van<br />
lijnstijl (voor de celranden), vulkleur (voor afzonderlijke cellen en de volledige tabel), tekenopmaak<br />
(vet, cursief, enzovoort), uitlijning (links, gecentreerd, enzovoort) en HTMLondersteuning.<br />
* Selecteer een willekeurige voorbeeldtabel en stel vervolgens via de selectievakjes onder<br />
in het dialoogvenster de opmaakkenmerken in die u op uw eigen tabel wilt toepassen. U<br />
kunt de opmaakkenmerken van de voorbeeldtabellen naar behoefte met elkaar combineren.<br />
Zo kunt u bijvoorbeeld (in twee stappen) de kleur van de ene voorbeeldtabel en het<br />
lettertype van een andere voorbeeldtabel instellen voor uw tabel.<br />
* Selecteer [Standaard] als opmaakprofiel als u opnieuw de standaardopmaak wilt instellen<br />
voor de tabel.<br />
Celeigenschappen instellen<br />
Zo past u ‘handmatig’ het uiterlijk van een of meer cellen aan:<br />
1. Selecteer de cellen, rijen of kolommen die u wilt opmaken.<br />
2. Klik op Celeigenschappen op de optiebalk.<br />
OF<br />
Klik op de knop voor een rij- of kolomkop en kies Celeigenschappen in het vervolgmenu<br />
als u alleen een specifieke rij of kolom in de tabel wilt opmaken.<br />
3. Gebruik de tabbladen Rand, Vulkleur/verloop, Transparantie (alleen beschikbaar voor<br />
aangepaste tabellen), Marges en/of Oriëntatie in het dialoogvenster om de gewenste opmaak<br />
in te stellen en klik vervolgens op OK.<br />
116 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Een kalender invoegen<br />
Met de wizard Kalender kunt u overzichtelijke maandkalenders ontwerpen voor uw webpagina’s.<br />
De kalenders worden als op tekst gebaseerde tabellen gegenereerd die u naar behoefte kunt<br />
schalen, zodat u de standaard tekstgereedschappen kunt gebruiken om de tekst te bewerken.<br />
Ook de overige eigenschappen van een kalender komen grotendeels overeen met die van<br />
tabellen, zodat u beide soorten objecten op dezelfde manier kunt bewerken (zie ‘Tabellen<br />
bewerken’ eerder in dit hoofdstuk).<br />
U kunt allerlei opties instellen voor uw kalender tijdens het uitvoeren van de wizard, zoals de<br />
maand waarvoor u een kalender wilt genereren, het opmaakprofiel en de kalenderstijl die u<br />
wilt gebruiken, of u al dan niet ruimte wilt voorzien om notities toe te voegen aan de kalender,<br />
enzovoort. Desgewenst kunt u zelfs officiële feestdagen en/of persoonlijke gebeurtenissen aan<br />
de kalender toevoegen, die u eenvoudig kunt beheren vanuit het dialoogvenster Kalendergebeurtenissen<br />
beheren.<br />
Via de optie Kalender bewerken op de optiebalk kunt u eigenschappen die specifiek zijn voor<br />
kalenders achteraf op elk gewenst moment aanpassen.<br />
U kunt kalendergegevens tot slot ook eenvoudig bijwerken doorheen de gehele site – op dezelfde<br />
manier als u het uur instelt bij sommige wekkers. Dat is bijvoorbeeld handig als u<br />
op een webpagina twaalf maandkalenders hebt gemaakt voor een bepaald jaar en achteraf<br />
maandkalenders voor een ander jaar wilt weergeven. In dat geval hoeft u slechts het dialoogvenster<br />
Persoonlijke gegevens instellen te openen en het gewenste jaartal te kiezen voor uw<br />
jaaroverzicht. Zo hoeft u het jaartal van de kalenders slechts op één plaats aan te passen.<br />
Zo voegt u een kalender toe:<br />
1. Klik op Kalender invoegen in het vervolgmenu met tabelgereedschappen op de werkbalk<br />
Standaardobjecten.<br />
2. Klik op de pagina als u een kalender met standaardafmetingen wilt invoegen. Sleep met de<br />
muis als u aangepaste afmetingen wilt instellen voor de kalender.<br />
3. Doorloop de verschillende dialoogvensters van de wizard Kalender om de gewenste instellingen<br />
te kiezen voor uw kalender, zoals het jaar en de maand waarvoor u een kalender<br />
wilt genereren, de kalenderstijl die u wilt gebruiken, de dag waarop u de weken wilt laten<br />
beginnen, of u ruimte wilt voorzien om notities toe te voegen aan de kalender, enzovoort.<br />
Als u officiële feestdagen wilt weergeven op de kalender, activeert u het selectievakje Officiële<br />
feestdagen toevoegen in de wizard en kiest u een land in de bijbehorende vervolgkeuzelijst.<br />
Als u ook persoonlijke gebeurtenissen wilt toevoegen, activeert u tevens het selectievakje<br />
Persoonlijke gebeurtenissen toevoegen.<br />
4. Klik in het laatste dialoogvenster van de wizard op Voltooien om de wizard te beëindigen.<br />
Zo wijzigt u de eigenschappen van een kalender:<br />
1. Selecteer de kalender en klik op Kalender bewerken op de optiebalk.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 117
OF<br />
Klik met de rechtermuisknop op de kalender en kies Tabel > Kalender bewerken in het<br />
snelmenu.<br />
2. Kies de gewenste instellingen op de verschillende tabbladen van het dialoogvenster en klik<br />
tot slot op OK.<br />
Via het submenu Tabel in het snelmenu voor een kalender kunt u snel en eenvoudig rijen<br />
en kolommen toevoegen of verwijderen in een bestaande kalender, de rijhoogte en kolombreedte<br />
automatisch aan de celinhoud aanpassen, enzovoort. Zorg er echter voor dat dit de<br />
opmaak van de tabel niet verstoort!<br />
Zo werkt u kalendergegevens doorheen de gehele site bij:<br />
1. Kies Persoonlijke gegevens instellen in het menu Extra.<br />
2. Klik op de tab Kalenders en stel via het kringveld Jaar het gewenste jaartal in voor al uw<br />
kalenders.<br />
3. Activeer het selectievakje Officiële feestdagen tonen en/of Persoonlijke gebeurtenissen<br />
tonen in het groepsvak Gebeurtenissen als u op alle kalenders de feestdagen en gebeurtenissen<br />
wilt weergeven die u eerder hebt ingesteld via het dialoogvenster Kalendergebeurtenissen<br />
beheren. (Klik op de knop Gebeurtenissen als u de lijst met persoonlijke<br />
gebeurtenissen wilt bewerken.)<br />
Officiële feestdagen toevoegen<br />
Bij het uitvoeren van de wizard Kalender kunt u instellen of u ook de officiële feestdagen van<br />
uw land aan de kalender wilt toevoegen. U kunt achteraf echter op elk gewenst moment de<br />
officiële feestdagen van een ander land weergeven.<br />
Denk eraan dat officiële feestdagen alleen worden weergegeven als het selectievakje<br />
Officiële feestdagen toevoegen is ingeschakeld in het dialoogvenster<br />
Eigenschappen van kalender.<br />
Zo geeft u de feestdagen van een ander land weer op een kalender:<br />
1. Selecteer de kalender.<br />
2. Klik op Kalender bewerken op de optiebalk.<br />
3. Selecteer in de vervolgkeuzelijst Land op het tabblad Gebeurtenissen het land waarvan u<br />
de officiële feestdagen wilt weergeven.<br />
Persoonlijke gebeurtenissen toevoegen<br />
Behalve officiële feestdagen (zoals Pasen en Kerstmis) kunt u ook allerlei persoonlijke of zakelijke<br />
gebeurtenissen (verjaardagen, afspraken, enzovoort) aan een kalender toevoegen. Om<br />
dergelijke gebeurtenissen in te stellen, klikt u op de knop Kalendergebeurtenissen beheren<br />
op de optiebalk voor een geselecteerde kalender, of kiest u Extra > Kalendergebeurtenissen<br />
118 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
eheren in de menubalk. De ingestelde gebeurtenissen worden automatisch onder de opgegeven<br />
kalenderdatum weergegeven nadat u ze hebt toegevoegd.<br />
Zo stelt u een persoonlijke gebeurtenis in:<br />
1. Selecteer een willekeurige kalender in uw site.<br />
2. Klik op Kalendergebeurtenissen beheren op de optiebalk.<br />
3. (Facultatief) Activeer het selectievakje Gebeurtenissen volgens datum tonen als u de<br />
klassieke kalenderindeling wilt gebruiken om gebeurtenissen toe te voegen, te bewerken<br />
of te verwijderen.<br />
4. Klik op Nieuwe gebeurtenis.<br />
5. Gebruik de pijlknoppen of klik op Bladeren in het dialoogvenster Kalendergebeurtenis<br />
om een datum te selecteren. U kunt ook handmatig een datum invoeren.<br />
6. Typ in het vak Gebeurtenis een beschrijving van de gebeurtenis. De ingevoerde tekst<br />
wordt automatisch onder de geselecteerde datum weergegeven in uw kalender.<br />
7. Activeer het selectievakje Jaarlijks terugkerende gebeurtenis als het om een verjaardag<br />
of een andere jaarlijks terugkerende gebeurtenis gaat.<br />
8. Klik op OK.<br />
9. Klik op Opslaan nadat u de gewenste gebeurtenissen hebt ingesteld.<br />
Gebruik de opties Gebeurtenis bewerken of Gebeurtenis verwijderen als u een bestaande<br />
gebeurtenis wilt bewerken of verwijderen.<br />
Denk eraan dat persoonlijke gebeurtenissen alleen worden weergegeven op<br />
een kalender als het selectievakje Persoonlijke gebeurtenissen toevoegen is<br />
ingeschakeld in het dialoogvenster Eigenschappen van kalender.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 119
7 Objecten bewerken op<br />
de pagina<br />
Een object selecteren<br />
Voordat u een object kunt bewerken, moet u het selecteren. Daartoe kunt u een van de volgende<br />
gereedschappen gebruiken in de gereedschapset:<br />
Selectiegereedschap<br />
Met dit gereedschap kunt u objecten selecteren, verplaatsen, kopiëren, schalen of roteren.<br />
Gereedschap Roteren<br />
Hiermee kunt u een object rond zijn middelpunt roteren. Hiertoe versleept u een van<br />
de grepen van het geselecteerde object. U kunt objecten ook verplaatsen en kopiëren<br />
met dit gereedschap. Lees Objecten roteren voor meer informatie.<br />
Gereedschappen Regelmatig bijsnijden en Onregelmatig bijsnijden<br />
Hiermee kunt u objecten bijsnijden. Selecteer het object hiervoor en sleep vervolgens<br />
een van de grepen naar binnen toe. U kunt objecten ook verplaatsen en kopiëren met<br />
deze gereedschappen. Lees ‘Objecten bijsnijden’ verderop in dit hoofdstuk voor meer<br />
informatie.<br />
Zo selecteert u een object:<br />
* Klik op het object met een van de bovengenoemde gereedschappen. Er verschijnt een grijs<br />
begrenzingskader (ook wel het selectiekader genoemd) rond het object, met ‘grepen’ die<br />
de hoeken en randen van het object aangeven.<br />
* Als objecten elkaar overlappen, klikt u verschillende keren terwijl u de Alt-toets ingedrukt<br />
houdt totdat het gewenste object is geselecteerd.<br />
Zo selecteert u een tekstobject met het selectiegereedschap:<br />
* Als u op een tekstframe klikt met het selectiegereedschap, wordt het frame geselecteerd<br />
en verschijnt er tegelijkertijd een knipperende cursor in de tekst (ook wel de invoegpositie<br />
genoemd). In deze modus kunt u de tekst bewerken.<br />
* Dubbelklik om een woord te selecteren. Klik drie keer na elkaar als u een volledige alinea<br />
wilt selecteren.<br />
* Druk op Delete als u de tekens na de invoegpositie wilt verwijderen. Als u het tekstframe<br />
zelf wilt verwijderen, kiest u Object verwijderen in het menu Bewerken.<br />
120 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Als u alleen het frame wilt selecteren (bijvoorbeeld om de marges en kolomhulplijnen aan te<br />
passen), klikt u op het selectiekader rond het frame.<br />
Als u op een object klikt dat deel uitmaakt van een groep, wordt automatisch het volledige<br />
groepsobject geselecteerd. Over het algemeen heeft elke bewerking die u uitvoert op een geselecteerd<br />
groepsobject een invloed op elk lid van de groep. U kunt echter ook afzonderlijke<br />
objecten selecteren en bewerken in een groep.<br />
Zo selecteert u een specifiek object in een groep:<br />
* Houd de Ctrl-toets ingedrukt terwijl u op het object klikt.<br />
Over de blauwe balken in de linialen<br />
Als u op een object klikt om het te selecteren, verschijnen er blauwe balken in de horizontale<br />
en verticale liniaal. Deze balken geven de linker-, rechter-, boven- en onderrand van het geselecteerde<br />
object aan.<br />
Lees ‘De lay-outhulpmiddelen gebruiken’ in hoofdstuk 3 voor meer informatie over het gebruik<br />
van de linialen.<br />
Meerdere objecten selecteren<br />
Door meerdere objecten tegelijk te selecteren (een meervoudige selectie te maken), kunt u:<br />
* al deze objecten in één handeling verplaatsen of schalen;<br />
* de geselecteerde objecten groeperen, zodat u ze in hun geheel kunt bewerken. Hierbij<br />
kunt u het gegroepeerde object op elk gewenst moment weer in afzonderlijke objecten<br />
splitsen. Lees ‘Objecten groeperen’ verderop in dit hoofdstuk voor meer informatie.<br />
Zo selecteert u meerdere objecten:<br />
* Klik op een leeg gedeelte van de pagina en sleep een selectiekader rond de objecten die<br />
u wilt selecteren. Herhaal deze handeling terwijl u de Shift-toets ingedrukt houdt als u<br />
achteraf objecten aan de selectie wilt toevoegen.<br />
OF<br />
Klik de objecten die u wilt selecteren een voor een aan terwijl u de Shift-toets ingedrukt<br />
houdt.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 121
Zo voegt u objecten toe aan een meervoudige selectie of verwijdert u objecten<br />
uit de selectie:<br />
* Klik de objecten die u aan de selectie wilt toevoegen of eruit wilt verwijderen een voor een<br />
aan terwijl u de Shift-toets ingedrukt houdt.<br />
Zo heft u een meervoudige selectie op:<br />
* Klik op een leeg gedeelte van de pagina.<br />
Zo selecteert u alle objecten op een pagina (of stramienpagina):<br />
* Kies Alles selecteren in het menu Bewerken of druk op Ctrl+A.<br />
Zo selecteert u alle objecten van hetzelfde type op een pagina (of stramienpagina):<br />
* Dubbelklik terwijl u de Ctrl-toets ingedrukt houdt op één object van dat type.<br />
OF<br />
Klik op een object om het te selecteren en kies vervolgens Soortgelijke objecten selecteren<br />
in het menu Bewerken.<br />
Objecten kopiëren, plakken en dupliceren<br />
U hoeft niet altijd een omweg te maken langs het Klembord als u objecten wilt kopiëren<br />
en plakken. U kunt hiertoe ook gebruikmaken van slepen-en-neerzetten. Daarnaast kunt u<br />
objecten ook dupliceren. <strong>Studio</strong> <strong>Webdesign</strong> biedt u zelfs de mogelijkheid de opmaak van het<br />
ene op het andere object over te dragen. Hierbij kunt u naar behoefte alle of alleen specifieke<br />
opmaakkenmerken plakken.<br />
Zo kopieert u een of meer objecten naar het Klembord van Windows:<br />
* Klik met de rechtermuisknop op de objecten die u wilt kopiëren en kies Kopiëren in het<br />
snelmenu.<br />
OF<br />
Selecteer de gewenste objecten en kies Kopiëren in het menu Bewerken, druk op Ctrl+C of<br />
klik op Kopiëren op de standaardwerkbalk.<br />
In andere Windows-toepassingen kunt u objecten gewoonlijk kopiëren en plakken via het<br />
Klembord. Ook <strong>Studio</strong> <strong>Webdesign</strong> ondersteunt deze voorziening.<br />
Zo voegt u een object in vanaf het Klembord:<br />
* Klik met de rechtermuisknop op de pagina en kies Plakken in het snelmenu.<br />
OF<br />
Druk op Ctrl+V, kies Bewerken > Plakken of klik op Plakken op de standaardwerkbalk.<br />
122 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Standaard wordt een object op de huidige invoegpositie of (bij een afzonderlijk object) in het<br />
midden van de pagina ingevoegd als u de opdracht Plakken gebruikt. Als u een afzonderlijk<br />
object op dezelfde positie wilt invoegen als het gekopieerde object, gebruikt u de opdracht<br />
Lokaal plakken of drukt u op Ctrl+Alt+V.<br />
Zo plakt u een object in een specifieke indeling vanaf het Klembord:<br />
* Kies Plakken speciaal in het menu Bewerken.<br />
Zo maakt u een kopie van een object:<br />
1. Selecteer het object en druk op de Ctrl-toets.<br />
2. Sleep het selectiekader rond het object terwijl u de Ctrl-toets ingedrukt houdt naar een<br />
nieuwe positie op de pagina. Zodra u begint te slepen, mag u de Ctrl-toets loslaten.<br />
3. Houd de Shift-toets ingedrukt tijdens het slepen als u het geselecteerde object alleen in<br />
horizontale of verticale richting wilt verplaatsen.<br />
Objecten dupliceren<br />
Bij het kopiëren van een object (zie hiervoor) wordt er telkens maar één kopie gemaakt van<br />
dat object. Met de opdracht Dupliceren kunt u in één handeling meerdere kopieën maken<br />
van een object. Hierbij kunt u nauwkeurig de positie van de afzonderlijke kopieën bepalen<br />
(lineair of in de vorm van een raster). Bovendien kunt u een of meer transformaties uitvoeren<br />
en zo een array van geroteerde en/of geschaalde objecten maken. Met deze voorziening kunt<br />
u eenvoudig een patroon creëren dat u als achtergrond kunt gebruiken, of perfect uitgelijnde<br />
montages maken van afbeeldingen of objecten.<br />
Zo dupliceert u een object:<br />
1. Selecteer het object dat u wilt dupliceren en kies Dupliceren in het menu Bewerken. Het<br />
dialoogvenster Dupliceren verschijnt. Let erop dat in het voorbeeld aan de rechterkant<br />
wordt getoond hoe de objecten zullen worden gedupliceerd als u de huidige instellingen<br />
behoudt. Aan de hand van dit voorbeeld kunt u eenvoudig het effect van uw instellingen<br />
controleren.<br />
2. Activeer het keuzerondje Lineair als u de kopieën in een rechte lijn wilt ordenen. Als u<br />
de kopieën in horizontale en verticale richting wilt ordenen, activeert u het keuzerondje<br />
Raster maken.<br />
3. Stel via de kringvelden in het groepsvak Aantal kopieën de lengte van de lijn (het aantal<br />
kopieën dat u wilt maken, inclusief het origineel) of de rastergrootte in. Merk op dat u de<br />
optie Lengte van lijn kunt gebruiken om een oneven aantal kopieën in te stellen als u een<br />
raster maakt.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 123
4. Stel in het groepsvak Spatiëring de gewenste afstand in tussen de afzonderlijke objecten.<br />
U hebt hierbij de keuze uit Offset (de onderlinge afstand tussen de linkerbovenhoeken<br />
van de objecten) of Afstand (de afstand tussen de rechterbenedenhoeken en linkerbovenhoeken).<br />
U kunt de objecten in horizontale en/of verticale richting verschuiven en/of ze<br />
naar behoefte roteren. Activeer het selectievakje Absoluut als u een specifieke horizontale<br />
of verticale afstand wilt instellen. Schakel dit selectievakje uit als u een percentage van de<br />
afmetingen van het oorspronkelijke object als onderlinge afstand wilt instellen.<br />
5. Klik op OK.<br />
Het resultaat is een meervoudige selectie. Klik op de knop Groeperen onder de selectie als<br />
u de verschillende objecten wilt groeperen, zodat u ze in hun geheel kunt bewerken.<br />
De opmaak van een object kopiëren en plakken<br />
Met de opdracht Opmaak plakken kunt u de opmaak van een object dat u eerder naar het<br />
Klembord hebt gekopieerd eenvoudig op een ander geselecteerd object toepassen. Als u de<br />
opdracht Opmaak plakken speciaal gebruikt, verschijnt er een dialoogvenster waarin u de<br />
opmaakkenmerken kunt selecteren die u op het doelobject wilt overdragen. Raadpleeg het<br />
Help-bestand van het programma voor meer informatie over deze voorziening.<br />
Zo past u de opmaak van het ene object op een ander object toe:<br />
1. Kopieer het bronobject naar het Klembord.<br />
2. Selecteer het object waarop u de gekopieerde opmaak wilt toepassen en kies Bewerken ><br />
Opmaak plakken of druk op Ctrl+Shift+V.<br />
Merk op dat op het doelobject alleen die opmaakkenmerken en instellingen van het bronobject<br />
worden toegepast die momenteel zijn ingesteld in het dialoogvenster Kenmerken van<br />
objectstijl wijzigen.<br />
Objecten verplaatsen<br />
U kunt objecten snel en eenvoudig verplaatsen in <strong>Studio</strong> <strong>Webdesign</strong>.<br />
Zo verplaatst u een object (met inbegrip van een meervoudige selectie):<br />
* Klik in het selectiekader rond het object (niet op een van de grepen) en sleep het terwijl u<br />
de linkermuisknop ingedrukt houdt naar een andere positie.<br />
OF<br />
Klik op een van de randen van het selectiekader en sleep het naar een andere positie.<br />
De weergave wordt automatisch opnieuw gecentreerd als u objecten naar de randen van het<br />
scherm sleept.<br />
Zo verplaatst u een object alleen in horizontale of verticale richting:<br />
* Selecteer het object en gebruik de pijltoetsen op het toetsenbord om het stapsgewijs naar<br />
de gewenste positie te verplaatsen.<br />
124 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
OF<br />
Druk op de Shift-toets en houd deze toets ingedrukt zodra u het object begint te verslepen.<br />
Laat de Shift-toets pas los nadat u de linkermuisknop hebt losgelaten.<br />
Gebruik het tabblad Transformeren als u de positie van een object nauwkeurig<br />
wilt instellen. Hierover leest u meer in het Help-bestand van het programma.<br />
Objecten schalen<br />
U kunt objecten zoals lijnen, vormen, artistieke tekst, frames en tabellen op verschillende<br />
manieren schalen in <strong>Studio</strong> <strong>Webdesign</strong>. De eenvoudigste manier is via klikken-en-slepen. Let<br />
op de contextafhankelijke tips en sneltoetsen in de statusbalk als u deze methode gebruikt om<br />
objecten te schalen! Als u objecten nauwkeurig wilt schalen, gebruikt u het tabblad Transformeren.<br />
Kies Schikken > Objecten schalen als u twee of meer geselecteerde objecten<br />
even hoog of even breed wilt maken als het object dat u het laatst hebt geselecteerd.<br />
Zo wijzigt u de grootte van een object (standaardmethode):<br />
1. Selecteer het desbetreffende object.<br />
2. Klik op een van de grepen rond het object en sleep deze terwijl u de linkermuisknop ingedrukt<br />
houdt naar een andere positie.<br />
Versleep een van de grepen langs de randen van het selectiekader als u het object in één<br />
richting wilt schalen (door de desbetreffende rand te verplaatsen). Als u het object in twee<br />
richtingen wilt schalen (door twee randen te verplaatsen), versleept u een van de grepen in<br />
de hoeken van het selectiekader. U kunt objecten overigens ook proportioneel schalen als u<br />
wilt voorkomen dat de oorspronkelijke breedte-/hoogteverhouding wijzigt. Onthoud in dit<br />
verband dat afbeeldingen zich op dit gebied doorgaans anders gedragen dan lijnen, vormen<br />
en tekstobjecten.<br />
Merk op dat de tekengrootte van frame- en tabeltekst ongewijzigd blijft wanneer u de ‘container’<br />
(het tekstframe of de tabel) schaalt.<br />
Zo kunt u een object vrij schalen:<br />
* Versleep een van de grepen in de hoeken van het selectiekader rond het object (of de greep<br />
aan het uiteinde van de lijn als u een lijn hebt geselecteerd).<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 125
Zo schaalt u een vorm, frame- of tabelobject proportioneel:<br />
* Houd de Shift-toets ingedrukt terwijl u een van de grepen in de hoeken van het selectiekader<br />
(of de greep aan het uiteinde van de lijn) versleept.<br />
Afbeeldingen schalen<br />
Afbeeldingen worden normaal gesproken automatisch proportioneel geschaald, omdat u bij<br />
het schalen van een afbeelding doorgaans de oorspronkelijke breedte-/hoogteverhouding wilt<br />
behouden.<br />
Zo schaalt u een afbeelding proportioneel:<br />
* Versleep een van de grepen in de hoeken van het selectiekader rond de afbeelding.<br />
Zo schaalt u een afbeelding niet-proportioneel:<br />
* Houd de Shift-toets ingedrukt terwijl u een van de grepen in de hoeken van het selectiekader<br />
versleept.<br />
Gegroepeerde objecten en meervoudige selecties schalen<br />
U kunt ook een gegroepeerd object of een meervoudige selectie schalen. In dat geval worden<br />
automatisch de afmetingen van alle objecten in de groep of de meervoudige selectie aangepast.<br />
Gebruik het tabblad Transformeren als u een object nauwkeurig wilt schalen.<br />
Hierover leest u meer in het Help-bestand van het programma.<br />
Objecten roteren<br />
U kunt afzonderlijke objecten (met inbegrip van afbeeldingen, tekstframes en gegroepeerde<br />
objecten) naar behoefte roteren. Een meervoudige selectie kan echter niet worden geroteerd.<br />
Zo roteert u een object:<br />
1. Selecteer het gereedschap Roteren in de gereedschapset aan de linkerkant van de werkomgeving.<br />
2. Klik op het object om het te selecteren. Beweeg de muisaanwijzer vervolgens over een van<br />
de grepen totdat deze de volgende vorm krijgt:<br />
126 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
3. Sleep de muis terwijl u de linkermuisknop ingedrukt houdt in de richting waarin u het object<br />
wilt roteren. Laat de muisknop vervolgens los. (Houd de Shift-toets ingedrukt terwijl<br />
u sleept als u het object in stappen van 15 graden wilt roteren.)<br />
Zo herstelt u de oorspronkelijke oriëntatie van een object:<br />
* Dubbelklik op het object.<br />
* Dubbelklik nog een keer om het object weer te roteren.<br />
Zo roteert u een object negentig graden naar links of naar rechts:<br />
* Selecteer het object en kies Naar links roteren of Naar rechts roteren in het menu<br />
Schikken. U kunt ook met de rechtermuisknop op het object klikken en de gelijknamige<br />
opdrachten in het submenu Spiegelen/roteren gebruiken.<br />
Zo voorkomt u dat een object per ongeluk wordt geroteerd:<br />
* Klik met de rechtermuisknop op het object en kies Schikken > Objecten vergrendelen in<br />
het snelmenu.<br />
Objecten bijsnijden<br />
Door objecten bij te snijden, kunt u specifieke delen ervan verbergen, bijvoorbeeld om de<br />
compositie van een foto te verbeteren of een of ander speciaal effect te creëren. Het onderliggende<br />
object blijft hierbij intact. De gereedschapset bevat twee gereedschappen om objecten<br />
bij te snijden Regelmatig bijsnijden en Onregelmatig bijsnijden. Met het eerstgenoemde<br />
gereedschap kunt u een object bijsnijden zonder dat de oorspronkelijke vierkante (of rechthoekige)<br />
verhouding ervan wijzigt. Met het andere gereedschap kunt u een object bijsnijden<br />
door de oorspronkelijke contouren ervan te vervormen.<br />
Merk op dat u in plaats van de bovengenoemde twee gereedschappen ook de opdracht Bijsnijden<br />
tot vorm kunt gebruiken om objecten bij te snijden. Met deze opdracht kunt u een<br />
object tot de contouren van een ander object bijsnijden.<br />
Met de opdracht Curven samenvoegen ten slotte kunt u een speciaal type samengesteld object<br />
maken dat een of meer ‘gaten’ bevat op de posities waar de vulkleuren van de afzonderlijke<br />
objecten elkaar overlappen. Deze voorziening is bijvoorbeeld handig als u een soort<br />
stencileffect wilt verkrijgen.<br />
Zo snijdt u een object bij zonder dat de oorspronkelijke verhouding verandert:<br />
1. Klik op het object of gegroepeerde object om het te selecteren.<br />
2. Selecteer het gereedschap Regelmatig bijsnijden in het vervolgmenu Effecten bewerken<br />
in de gereedschapset.<br />
3. Sleep een van de grepen in de hoeken of langs de randen van het selectiekader naar binnen.<br />
Let erop dat de breedte-/hoogteverhouding van het oorspronkelijke (achterliggende)<br />
object hierbij behouden blijft. Houd de Shift-toets ingedrukt terwijl u sleept als u het<br />
object vrij (niet-proportioneel) wilt bijsnijden.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 127
Zo snijdt u een object bij door de contouren ervan aan te passen:<br />
1. Selecteer het object of gegroepeerde object.<br />
2. Selecteer het gereedschap Onregelmatig bijsnijden in de gereedschapset. Let erop dat<br />
er automatisch verschillende nodes en segmenten verschijnen wanneer u dit gereedschap<br />
selecteert. Deze nodes en segmenten definiëren de contouren om het object bij te snijden.<br />
3. Ga als volgt te werk om de contouren van het object te vervormen:<br />
* Beweeg met de muisaanwijzer boven een node (controlepunt) totdat deze de volgende<br />
vorm krijgt: . Klik vervolgens met de linkermuisknop en sleep de node terwijl u de<br />
linkermuisknop ingedrukt houdt naar een andere positie.<br />
* U kunt ook afzonderlijke lijnsegmenten verplaatsen. Beweeg de muisaanwijzer hiertoe<br />
boven een lijnsegment tussen twee nodes totdat het symbool verschijnt en sleep<br />
dit segment vervolgens terwijl u de linkermuisknop ingedrukt houdt naar een andere<br />
positie.<br />
* Klik op Curven optimaliseren of Alle lijnen recht maken op de optiebalk om<br />
contouren die uit rechte lijnen bestaan in gebogen lijnen om te zetten en omgekeerd.<br />
* Als u de buiging van een segment wilt aanpassen, versleept u de controlegrepen van de<br />
aangrenzende nodes.<br />
* Dubbelklik op een willekeurig lijnsegment als u op die positie een node wilt toevoegen.<br />
Dubbelklik op een bestaande node als u deze wilt verwijderen.<br />
* Als u een object relatief wilt verplaatsen ten opzichte van zijn contouren, plaatst u de<br />
muisaanwijzer in het midden van het object (let erop dat deze de vorm krijgt van een<br />
handje) en sleept u met de muis terwijl u de linkermuisknop ingedrukt houdt.<br />
Zo bepaalt u welk gedeelte van een bijgesneden object zichtbaar is binnen de<br />
gedefinieerde contouren:<br />
* Plaats de muisaanwijzer in het midden van het geselecteerde object (let erop dat deze de<br />
vorm krijgt van een handje) en sleep terwijl u de linkermuisknop ingedrukt houdt.<br />
Zo heft u het bijsnijden op (zodat het object weer volledig zichtbaar is):<br />
* Klik op Bijsnijden opheffen op de optiebalk.<br />
Objecten tot de vorm van een ander object bijsnijden<br />
Om de opdracht Bijsnijden tot vorm te kunnen gebruiken, moet u welgeteld twee objecten<br />
selecteren. Hierbij mag een van beide objecten (of beide objecten) een gegroepeerd object<br />
zijn. Het onderliggende object (het object dat zich achter het andere object bevindt) wordt<br />
automatisch tot de contouren van het bovenliggende object bijgesneden, waardoor een vorm<br />
ontstaat die overeenkomt met de vorm van het gebied waar beide objecten elkaar overlappen.<br />
Merk op dat u een object waarop een mesh-transformatie is toegepast niet kunt bijsnijden,<br />
maar dat u dergelijke objecten wel kunt gebruiken om andere objecten bij te snijden. Gebruik<br />
de opdracht Curven samenvoegen als u de ene vorm als basis wilt gebruiken om een ‘gat’ te<br />
maken in een andere vorm.<br />
128 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Zo snijdt u een object tot de vorm van een ander object bij:<br />
1. Plaats het object dat als basisobject fungeert vóór het object dat u wilt bijsnijden. Gebruik<br />
hiertoe de opdrachten in het menu Schikken en/of de overeenkomstige knoppen op de<br />
werkbalk Schikken. In de bovenstaande figuur hebben we vóór het tekstframe een Auto-<br />
Vorm geplaatst.<br />
2. Selecteer beide objecten (of groepeer ze) en kies Bijsnijden tot vorm in het menu Extra.<br />
Lijnen en vormen samenvoegen<br />
Met de opdracht Curven samenvoegen kunt u eenvoudig een samengesteld object maken<br />
van twee of meer lijnen of getekende vormen. Ook hier weer wordt het onderliggende object<br />
automatisch tot de contouren van het bovenliggende object bijgesneden (zie de uitleg over de<br />
opdracht Bijsnijden tot vorm). In dit geval ontstaan hierbij echter een of meer ‘gaten’ waar de<br />
afzonderlijke objecten elkaar voorheen overlapten. Zoals bij het groeperen van objecten kunt<br />
u het samengevoegde object achteraf naar behoefte opmaken (bijvoorbeeld door er een specifieke<br />
lijnstijl of vulkleur voor in te stellen) en afzonderlijke nodes en segmenten van het object<br />
bewerken met het selectiegereedschap. Denk er echter aan dat op het samengevoegde object<br />
altijd de lijn- en vuleigenschappen worden toegepast van het object dat zich voorheen op de<br />
voorgrond bevond. U kunt een samengevoegd object achteraf overigens weer in afzonderlijke<br />
objecten splitsen. In dat geval worden op deze objecten echter de lijn- en vuleigenschappen<br />
van het samengevoegde object toegepast.<br />
Door objecten samen te voegen, kunt u snel en eenvoudig een masker maken:<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 129
Zo voegt u twee of meer lijnen of vormen samen:<br />
1. Teken twee AutoVormen.<br />
2. Plaats het object dat u als basis wilt gebruiken vóór het object dat u wilt uitsnijden. Gebruik<br />
hiertoe de opdrachten in het menu Schikken en/of de overeenkomstige knoppen op<br />
de werkbalk Schikken.<br />
3. Selecteer (of groepeer) beide objecten en kies Extra > Naar curven converteren.<br />
4. Kies Curven samenvoegen in het menu Schikken.<br />
Zo splitst u een samengevoegd object weer in afzonderlijke objecten:<br />
* Selecteer het samengevoegde object en kies Curven splitsen in het menu Schikken.<br />
De volgorde van objecten wijzigen<br />
De objecten die u maakt, worden standaard zo gestapeld dat het meest recente object telkens<br />
de vorige objecten overlapt. U kunt de volgorde van de verschillende objecten echter wijzigen<br />
om te bepalen hoe ze worden weergegeven op de pagina.<br />
Zo wijzigt u de volgorde van objecten:<br />
* Klik met de rechtermuisknop op het object dat u wilt verplaatsen en kies Schikken in het<br />
snelmenu.<br />
OF<br />
Open het menu Schikken in de menubalk (terwijl het object is geselecteerd).<br />
Voer vervolgens een van deze stappen uit:<br />
* Kies Naar achtergrond (of klik op de knop Naar achtergrond op de werkbalk Schikken)<br />
als u het geselecteerde object onder aan de stapel (achter alle andere objecten) wilt<br />
plaatsen.<br />
* Kies Naar voorgrond (of klik op de gelijknamige knop op de werkbalk Schikken) als u<br />
het geselecteerde object boven aan de stapel (vóór alle andere objecten) wilt plaatsen.<br />
* Kies Naar voren (of klik op de gelijknamige knop op de werkbalk Schikken) als u het<br />
object één niveau naar voren wilt verplaatsen.<br />
* Kies Naar achteren (of klik op de gelijknamige knop op de werkbalk Schikken) als u<br />
het object één niveau naar achteren wilt verplaatsen.<br />
Objecten uitlijnen en spatiëren<br />
U kunt een groep objecten selecteren en die in één handeling uitlijnen. Het gekozen type uitlijning<br />
wordt automatisch op alle geselecteerde objecten toegepast. <strong>Studio</strong> <strong>Webdesign</strong> biedt<br />
verschillende mogelijkheden om objecten uit te lijnen:<br />
* U kunt de randen van twee of meer objecten op elkaar uitlijnen. Zo kunt u bijvoorbeeld<br />
de boven- of onderrand van de geselecteerde objecten op de boven- of onderrand van het<br />
hoogste/laagste object in de selectie uitlijnen (met de opties Bovenkant en Onderkant).<br />
130 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
* Daarnaast kunt u objecten ook horizontaal of verticaal spatiëren, of ze gelijkmatig spreiden<br />
over de pagina en hierbij nauwkeurig de afstand tussen de afzonderlijke objecten<br />
instellen.<br />
* Tot slot kunt u objecten ook op de paginamarges (indien ingesteld) of op de randen van de<br />
pagina uitlijnen.<br />
U kunt zowel de besturingselementen op het tabblad Uitlijnen als het dialoogvenster Objecten<br />
uitlijnen (toegankelijk via Schikken > Objecten uitlijnen) gebruiken om objecten uit te<br />
lijnen.<br />
Denk eraan dat u ook hulpmiddelen zoals de linialen en het magnetische raster kunt gebruiken<br />
om objecten nauwkeurig uit te lijnen op de pagina. Met behulp van de vangfunctie<br />
kunt u objecten eenvoudig op kleverige of niet-kleverige hulplijnen uitlijnen. (Lees ‘De layouthulpmiddelen<br />
gebruiken’ in hoofdstuk 3 en ‘Het magnetische raster gebruiken’ verderop<br />
in dit hoofdstuk voor meer informatie.)<br />
Merk op dat u afzonderlijke objecten ook op de boven-, onder-, linker- of rechterrand van de<br />
pagina kunt uitlijnen, of ze horizontaal of verticaal kunt centreren.<br />
Zo lijnt u de randen van twee of meer objecten op elkaar uit:<br />
1. Activeer het selectiegereedschap en klik terwijl u de Shift-toets ingedrukt op de objecten<br />
die u wilt uitlijnen, of sleep een selectiekader rond de desbetreffende objecten. (Kies Bewerken<br />
> Alles selecteren als u alle objecten wilt selecteren.)<br />
2. Geef het tabblad Uitlijnen weer in de studio.<br />
3. Geef aan hoe u de objecten horizontaal en/of verticaal wilt uitlijnen. U hebt de keuze uit<br />
Bovenkant, Onderkant, Linkerkant, Rechterkant, Horizontaal centreren en Verticaal<br />
centreren.<br />
Zo spreidt u twee of meer objecten gelijkmatig op een pagina:<br />
* Selecteer de objecten die u gelijkmatig wilt spreiden en klik op Horizontaal spreiden of<br />
Verticaal spreiden op het tabblad Uitlijnen als u de geselecteerde objecten in horizontale<br />
dan wel verticale richting gelijkmatig wilt spreiden over de gehele pagina. Activeer het selectievakje<br />
Spreiden en typ een waarde in het bijbehorende kringveld als u een specifieke<br />
afstand wilt instellen tussen elk object.<br />
Zo lijnt u een of meer objecten op de randen van de pagina uit:<br />
* Voer dezelfde stappen uit als hiervoor, maar selecteer deze keer de optie Op marges uitlijnen.<br />
(Als u maar één object hebt geselecteerd, is deze optie standaard ingeschakeld.)<br />
Zo lijnt u een of meer objecten op de ingestelde paginamarges uit:<br />
* Stel de gewenste paginamarges in via de optie Marges en hulplijnen op de optiebalk (alleen<br />
beschikbaar wanneer er niets is geselecteerd op de pagina). Voer vervolgens dezelfde<br />
stappen uit als hiervoor en activeer het selectievakje Op marges uitlijnen.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 131
Objecten groeperen<br />
U kunt een meervoudige selectie (zie ‘Meerdere objecten selecteren’ eerder in dit hoofdstuk)<br />
eenvoudig naar een gegroepeerd object (ook wel een ‘groepsobject’ genoemd) converteren.<br />
Zo kunt u de objecten in hun geheel verplaatsen, schalen of roteren.<br />
Zo groepeert u meerdere objecten:<br />
* Selecteer de objecten die u wilt groeperen en klik op de knop Groeperen onder de<br />
selectie.<br />
Zo splitst u een gegroepeerd object weer in afzonderlijke objecten:<br />
* Selecteer het gegroepeerde object en klik op Degroeperen onder de selectie.<br />
Als u een object selecteert dat deel uitmaakt van een groep, wordt automatisch het volledige<br />
groepsobject geselecteerd. Over het algemeen heeft elke bewerking die u uitvoert op een geselecteerd<br />
groepsobject een invloed op elk lid van de groep. U kunt echter ook afzonderlijke<br />
objecten selecteren en bewerken in een groep.<br />
Zo selecteert u een specifiek object in een groep:<br />
* Houd de Ctrl-toets ingedrukt terwijl u op het object klikt.<br />
Objecten vergrendelen<br />
U kunt een object vergrendelen om te voorkomen dat het per ongeluk wordt geschaald, verplaatst,<br />
gespiegeld of geroteerd.<br />
Zo vergrendelt u een object:<br />
* Klik met de rechtermuisknop op het object en kies Schikken > Objecten vergrendelen of<br />
gebruik de gelijknamige menuopdracht in het menu Schikken.<br />
Zo heft u de vergrendeling van een object op:<br />
* Klik met de rechtermuisknop op het object en kies Schikken > Vergrendeling opheffen<br />
of gebruik de gelijknamige menuopdracht in het menu Schikken.<br />
Het magnetische raster gebruiken<br />
Door het magnetische raster in te schakelen, kunt u rasterpunten en hulplijnen ‘magnetiseren,’<br />
zodat u objecten nauwkeuriger kunt uitlijnen en ze eenvoudiger op de juiste positie kunt<br />
plaatsen. Als het magnetische raster is ingeschakeld, worden de randen en middelpunten van<br />
de objecten die u maakt, verplaatst of schaalt automatisch op de dichtstbijzijnde zichtbare<br />
hulplijn of het dichtstbijzijnde rasterpunt uitgelijnd. Objecten worden standaard overigens<br />
ook op de randen van de pagina uitgelijnd.<br />
132 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Merk op dat we hier met ‘hulplijnen’ zowel de hulplijnen bedoelen die u via de linialen kunt<br />
tekenen als de lay-outhulplijnen die op paginamarges, rijen en kolommen zijn gebaseerd (zie<br />
‘Hulplijnen instellen via de linialen’ in hoofdstuk 3).<br />
Als het magnetische raster is ingeschakeld, zult u bij het verplaatsen van een hulplijn wellicht<br />
vaststellen dat samen met de hulplijn ook alle objecten worden verplaatst die aan deze hulplijn<br />
zijn ‘verankerd.’ Deze functie is standaard ingeschakeld, maar kan indien nodig tijdelijk<br />
of permanent worden uitgeschakeld via de optie Kleverige hulplijnen (toegankelijk via Extra<br />
> Opties > Lay-out). Deze voorziening is vooral handig wanneer u meerdere geselecteerde<br />
objecten in één keer naar een andere positie wilt verplaatsen zonder dat u ze eerst hoeft te<br />
groeperen.<br />
Zo schakelt u het magnetische raster in of uit:<br />
* Klik op Magnetisch raster uiterst rechts in de statusbalk. Als deze knop is ingedrukt,<br />
is het magnetische raster geactiveerd.<br />
Objecten selectief uitlijnen<br />
U kunt zelf bepalen op welke punten en lijnen objecten automatisch worden uitgelijnd door<br />
specifieke lay-outhulpmiddelen (linialen, hulplijnen, randen van frames, puntraster, enzovoort)<br />
weer te geven of te verbergen en door de instellingen voor de zichtbare hulpmiddelen<br />
te wijzigen.<br />
Zo geeft u specifieke lay-outhulpmiddelen weer:<br />
* Activeer de overeenkomstige menuoptie in het menu Beeld.<br />
Zo stelt u de lay-outhulpmiddelen in waarop u objecten wilt uitlijnen:<br />
1. Kies Extra > Opties en klik op Vangen.<br />
2. Vink de optie Vangen op aan en schakel het selectievakje in of uit naast de elementen<br />
waarop u wilt vangen. U hebt de keuze uit Rasterpunten, Pagina/overvloeiranden, Paginamarges,<br />
Liniaalhulplijnen, Rij/kolomhulplijnen, Liniaalmarkeringen en Naaste<br />
pixel.<br />
De standaardwaarden voor objecten bijwerken<br />
De standaardwaarden voor objecten zijn de instellingen die <strong>Studio</strong> <strong>Webdesign</strong> automatisch<br />
toepast wanneer u een nieuw object (bijvoorbeeld tekst of een afbeelding) aan uw site<br />
toevoegt. Zo worden op nieuwe tekst bijvoorbeeld automatisch de standaardinstellingen<br />
toegepast voor wat betreft het lettertype, de tekengrootte, de tekstkleur, het type uitlijning,<br />
enzovoort. Analoog hieraan worden voor nieuwe afbeeldingen de standaardeigenschappen<br />
ingesteld voor wat betreft de lijn- en vulkleur, het patroon, enzovoort, en voor nieuwe frames<br />
de standaardwaarden voor marges, kolommen en dergelijke. U kunt de standaardeigenschappen<br />
van elk type object echter gemakkelijk wijzigen.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 133
Merk op dat deze standaardinstellingen lokaal zijn. Alle wijzigingen die u in de standaardinstellingen<br />
aanbrengt, zijn met andere woorden altijd van toepassing op de huidige site en<br />
worden automatisch samen met het projectbestand opgeslagen, zodat ze de volgende keer dat<br />
u de site opent opnieuw van toepassing zijn. U kunt de huidige standaardinstellingen echter<br />
op elk moment als globale instellingen opslaan met behulp van de opdracht Als standaardwaarden<br />
opslaan. Dan worden deze instellingen ook toegepast voor alle andere sites die u<br />
met dit programma maakt.<br />
Zo stelt u lokaal standaardwaarden in voor een specifiek objecttype:<br />
1. Ontwerp een eenvoudig object dat u als uitgangspunt kunt gebruiken om de gewenste<br />
standaardwaarden in te stellen en stel er de gewenste eigenschappen voor in, of gebruik<br />
een bestaand object dat al de juiste eigenschappen heeft. (Voor afbeeldingen kunt u een<br />
lijn, vorm of rechthoek gebruiken. Al deze vormen hebben dezelfde standaardwaarden.)<br />
2. Selecteer het object dat u als basis wilt gebruiken voor de nieuwe standaardwaarden en<br />
kies Opmaak > Standaardwaarden object bijwerken of Tekst > Standaardwaarden tekst<br />
bijwerken, afhankelijk van het type object dat u hebt gemaakt.<br />
Als u standaard een specifieke lijn-/vulkleur en/of lijnstijl wilt gebruiken wanneer u nieuwe<br />
objecten tekent, gaat u als volgt te werk:<br />
1. Stel terwijl er geen enkel object is geselecteerd de gewenste lijn- en/of vulkleur in op het<br />
tabblad Kleur of Stalen (zie ‘Effen kleuren instellen’ in hoofdstuk 10). Gebruik het tabblad<br />
Lijn om een standaard lijndikte, lijnstijl en hoekstijl in te stellen.<br />
2. Teken uw object op de pagina. Merk op dat op dit object automatisch de nieuwe standaardwaarden<br />
worden toegepast.<br />
Zo controleert of wijzigt u de standaardeigenschappen van tekst:<br />
1. Kies Lijst met opmaakprofielen in het menu Tekst.<br />
2. Selecteer Tekst zonder opmaak in de lijst met beschikbare opmaakprofielen en klik op<br />
Bewerken om de huidige instellingen voor dit opmaakprofiel weer te geven.<br />
3. Gebruik het dialoogvenster Eigenschappen van opmaakprofiel om de gewenste teken-,<br />
alinea- en lijstopmaak in te stellen.<br />
Zo slaat u de huidige standaardwaarden als globale instellingen op:<br />
1. Kies Als standaardwaarden opslaan in het menu Extra.<br />
2. Klik in het dialoogvenster dat daarop verschijnt op Ja om te bevestigen dat u de standaardinstellingen<br />
voor de huidige site ook als standaardwaarden wilt gebruiken voor alle<br />
andere websites die u met dit programma maakt.<br />
134 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
8 Met lijnen, vormen en<br />
effecten werken<br />
Lijnen tekenen en bewerken<br />
<strong>Studio</strong> <strong>Webdesign</strong> bevat diverse gereedschappen om eenvoudige lijnen en vormen te tekenen:<br />
Potlood, Pen, Rechte lijn en allerlei AutoVormen.<br />
Met de lijngereedschappen (toegankelijk via het vervolgmenu Vrije vorm tekenen op de<br />
werkbalk Standaardobjecten links in de werkomgeving) kunt u afzonderlijke lijnen tekenen,<br />
lijnsegmenten met elkaar verbinden en de uiteinden van lijnen met elkaar verbinden om gesloten<br />
vormen te maken (zie ‘Vormen tekenen en bewerken’ verderop in dit hoofdstuk). Met<br />
het selectiegereedschap en de opties op de optiebalk voor curven kunt u de lijnen naar behoefte<br />
schalen of aanpassen nadat u ze hebt getekend.<br />
Met het gereedschap Potlood kunt u met de vrije hand allerlei gebogen lijnen en<br />
vormen tekenen.<br />
Gebruik het gereedschap Rechte lijn als u rechte lijnen wilt tekenen, bijvoorbeeld<br />
horizontale balken boven aan of onder aan de pagina, of horizontale lijnen om afzonderlijke<br />
rubrieken van elkaar te scheiden of koptitels te benadrukken.<br />
Met het gereedschap Pen kunt u een reeks rechte of gebogen lijnsegmenten met<br />
elkaar verbinden door de afzonderlijke punten te verbinden.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 135
Lijnen tekenen<br />
Zo tekent u een lijn met de vrije hand (met het gereedschap Potlood):<br />
1. Open het vervolgmenu met lijngereedschappen op de werkbalk Standaardobjecten en selecteer<br />
het gereedschap Potlood.<br />
2. Klik op de positie waar de lijn moet beginnen en sleep met de muis terwijl u de linkermuisknop<br />
ingedrukt houdt. Er verschijnt een lijn die de beweging van de muisaanwijzer<br />
volgt.<br />
3. Laat de muisknop los zodra de lijn de gewenste lengte heeft. De lijn wordt automatisch<br />
vloeiend gemaakt met behulp van een beperkt aantal nodes.<br />
4. Om de lijn langer te maken, plaatst u de muisaanwijzer boven een van de rode eindnodes.<br />
Merk op dat er een plusteken onder de aanwijzer verschijnt. Klik op de node en sleep met<br />
de muis om een nieuw lijnsegment toe te voegen.<br />
Zo tekent u een rechte lijn (met het gereedschap Rechte lijn):<br />
1. Open het vervolgmenu met lijngereedschappen op de werkbalk Standaardobjecten en selecteer<br />
het gereedschap Rechte lijn.<br />
2. Klik op de positie waar de lijn moet beginnen en sleep met de muis. Laat de muisknop los<br />
zodra de lijn de gewenste lengte heeft.<br />
Houd de Shift-toets ingedrukt terwijl u sleept als u de oriëntatie van de lijn<br />
in stappen van 15° wilt instellen. Zo kunt u eenvoudig horizontale of verticale<br />
lijnen tekenen.<br />
3. Om de lijn langer te maken, plaatst u de muisaanwijzer boven een van de rode eindnodes.<br />
Merk op dat er een plusteken onder de aanwijzer verschijnt. Klik op de node en sleep met<br />
de muis om een nieuw lijnsegment toe te voegen.<br />
Zo tekent u een of meer lijnsegmenten (met het gereedschap Pen):<br />
1. Open het vervolgmenu met lijngereedschappen op de werkbalk Standaardobjecten en selecteer<br />
het gereedschap Pen. Let erop dat boven in het programmavenster de optiebalk<br />
voor curven verschijnt, die drie knoppen bevat waarmee u het type lijnsegment kunt selecteren<br />
dat u wilt tekenen (rechte lijn, intelligente curve of Bézier-curve).<br />
Klik op Rechte lijn als u een recht lijnsegment wilt tekenen.<br />
Het gaat hierbij om een eenvoudig lijnsegment dat<br />
slechts uit twee nodes bestaat.<br />
(Sneltoets: druk op 1)<br />
136 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Een Bézier-curve is een gebogen lijnsegment met controlegrepen,<br />
zodat u nauwkeurig de buiging van het segment<br />
kunt instellen.<br />
(Sneltoets: druk op 2)<br />
Een Intelligente curve heeft geen zichtbare controlegrepen.<br />
Als u voor dit lijntype kiest, worden de verschillende<br />
nodes automatisch via een vloeiende gebogen lijn met elkaar<br />
verbonden. Deze voorziening is vooral handig als u de contouren<br />
wilt overtrekken van afbeeldingen en objecten die uit<br />
gebogen lijnen bestaan.<br />
(Sneltoets: druk op 3)<br />
2. Selecteer een lijntype op de optiebalk en klik vervolgens op de pagina op de positie waar<br />
de lijn moet beginnen.<br />
* Als u een recht lijnsegment wilt tekenen, klikt u gewoon op de positie waar het lijnsegment<br />
moet eindigen (of sleept u de muis naar deze positie). Houd de Shift-toets<br />
ingedrukt terwijl u klikt als u de oriëntatie van het lijnsegment in stappen van 15° wilt<br />
instellen (handig als u snel rechte hoeken wilt tekenen).<br />
* Als u voor een Bézier-curve hebt gekozen, klikt u nog een keer om een nieuwe node<br />
te definiëren en sleept u vervolgens een controlegreep vanuit deze node. (Deze grepen<br />
fungeren als ‘magneten’ die de gebogen lijn in de juiste vorm trekken. De afstand tussen<br />
de grepen bepaalt de diepte van de uiteindelijke gebogen lijn.) Klik nog een keer op de<br />
positie waar het segment moet eindigen. Als u de Shift-toets ingedrukt houdt terwijl<br />
u het segment tekent, kunt u de oriëntatie met behulp van de controlegrepen van de<br />
nieuwe node in stappen van 15° instellen.<br />
* Als u voor een intelligente curve hebt gekozen, klikt u nog een keer om een nieuwe<br />
node te definiëren. De nieuwe node en de vorige worden automatisch via een vloeiende<br />
gebogen lijn (zonder zichtbare controlegrepen) met elkaar verbonden. Sleep met de<br />
muis voordat u de muisknop loslaat om de lijn te buigen. Houd de Shift-toets ingedrukt<br />
terwijl u klikt als u de oriëntatie van de nieuwe node in stappen van 15° wilt instellen.<br />
3. Om een bestaande lijn uit te breiden, herhaalt u stap 2 voor elk nieuw segment. Desgewenst<br />
kunt u voor elk segment een ander lijntype instellen.<br />
4. Druk op Esc, dubbelklik of selecteer een ander gereedschap om de lijn te voltooien.<br />
Raadpleeg het Help-bestand van het programma voor meer informatie over hoe u lijnen bewerkt.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 137
Lijneigenschappen instellen<br />
Alle lijnen, ook gesloten vormen, hebben talrijke eigenschappen. Tot deze lijneigenschappen<br />
behoren onder andere de kleur, de lijndikte, het type hoek en uiteinde, enzovoort. U kunt<br />
deze eigenschappen naar behoefte aanpassen, zowel voor vrije vormen, rechte en gebogen<br />
lijnen als voor de contouren van een vorm (zie ‘Vormen tekenen en bewerken’ verderop in dit<br />
hoofdstuk). Merk op dat ook tekstframes, tabellen en artistieke tekstobjecten lijneigenschappen<br />
hebben.<br />
Zo wijzigt u de lijneigenschappen van een geselecteerd object:<br />
* Gebruik het tabblad Stalen om de lijnkleur te wijzigen. (Als u een andere kleur wilt<br />
instellen voor de rand van een vorm of een ander object, klikt u op de knop Lijnkleur,<br />
zodat de lijnkleur en niet de vulkleur wordt gewijzigd.) Klik in de galerie met kleurstalen<br />
op de thumbnail van de kleur die u wilt instellen voor het object. U kunt ook het tabblad<br />
Kleur gebruiken om een andere kleur in te stellen voor het geselecteerde object.<br />
* Als u de lijndikte, de lijnstijl of andere eigenschappen wilt wijzigen, gebruikt u het tabblad<br />
Lijn of de optiebalk voor lijnen (zichtbaar wanneer een lijn is geselecteerd). Versleep de<br />
schuifregelaar boven aan het tabblad om de lijndikte in te stellen. Gebruik de vervolgkeuzelijsten<br />
om het gewenste lijntype in te stellen. Als u de optiebalk gebruikt om de eigenschappen<br />
van de lijn te wijzigen, kunt u eventueel ook het percentage opgeven waarmee u<br />
het uiteinde van de lijn wilt schalen.<br />
Via de vervolgkeuzelijst Lijnstijl (de middelste vervolgkeuzelijst) op het tabblad Lijn of de<br />
optiebalk kunt u naar behoefte een enkele lijn, kalligrafische lijn of een van de verschillende<br />
soorten stippellijnen of dubbele lijnen als lijnstijl instellen.<br />
Verschillende van deze lijnstijlen kunnen naar behoefte worden aangepast:<br />
Bij stippellijnen en lijnen die uit streepjes en punten bestaan, kunt u via de<br />
schuifregelaar Streepjespatroon onder aan het tabblad Lijn de algemene lengte<br />
van het patroon (het aantal vakjes links van de schuifregelaar) en de lengte<br />
van de streepjes (het aantal zwarte vakjes) instellen.<br />
Wat de dubbele lijnen betreft, kunt u uit vier verschillende lijnstijlen kiezen.<br />
138 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Bij kalligrafische lijnen met een variabele breedte kunt u via het kringveld Kalligrafische<br />
hoek de oriëntatie van de penseelpunt instellen.<br />
Voorts kunt u op het tabblad Lijn ook het uiteinde van de lijnen en de hoek waar twee lijnen<br />
elkaar kruisen aanpassen. Beide eigenschappen zijn vooral duidelijk zichtbaar bij dikkere lijnen.<br />
Uit de pictogrammen kunt u duidelijk afleiden wat het effect is van elke instelling:<br />
Rond uiteinde Uitstekend uiteinde Stomp uiteinde<br />
Afgeschuinde hoek Rechte hoek Ronde hoek<br />
Zo geeft u alle lijneigenschappen weer:<br />
* Klik op Lijnen en randen in het vervolgmenu met vulgereedschappen in de gereedschapset.<br />
* Hiermee opent u het dialoogvenster Lijnen en randen. Op het tabblad Lijn van dit dialoogvenster<br />
kunt u alle lijneigenschappen wijzigen.<br />
Opmerking: het tabblad Rand bevat allerlei opties om decoratieve randen in te stellen<br />
voor uw objecten (zie Randen toevoegen verderop in dit hoofdstuk).<br />
* Als u alleen voor specifieke randen van het object een welbepaalde lijn- of randstijl wilt<br />
instellen, gebruikt u het tabblad Randcontouren in het dialoogvenster.<br />
Vormen tekenen en bewerken<br />
<strong>Studio</strong> <strong>Webdesign</strong> bevat niet alleen diverse lijngereedschappen, maar ook gereedschappen<br />
waarmee u allerlei AutoVormen kunt tekenen. AutoVormen zijn kant-en-klare objecten die<br />
u rechtstreeks kunt toevoegen aan uw pagina en vervolgens kunt aanpassen door de controlegrepen<br />
te verslepen. U kunt vanzelfsprekend ook vormen maken door een lijn (of een<br />
aantal lijnsegmenten) te tekenen en vervolgens de begin- en eindpunten ervan met elkaar te<br />
verbinden, zodat een gesloten vorm ontstaat. U kunt de eigenschappen van een vorm naar<br />
behoefte aanpassen nadat u deze hebt getekend. Zo kunt u er bijvoorbeeld allerlei kleur- of<br />
bitmapverlopen (met inbegrip van uw eigen bitmapafbeeldingen!) en transparantie-effecten<br />
op toepassen. U kunt zelfs gebruikmaken van schuifregelaars om snel en eenvoudig varianten<br />
van de originele AutoVorm te maken!<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 139
U kunt ook de optiebalk voor AutoVormen boven in de werkomgeving gebruiken om de eigenschappen<br />
van een AutoVorm te wijzigen. Met de opties op deze balk kunt u bijvoorbeeld<br />
eenvoudig de standaardwaarden herstellen voor een AutoVorm, of er een andere lijnstijl/-<br />
kleur of lijndikte voor instellen. Merk op dat voor nieuwe vormen standaard transparant als<br />
vulkleur en zwart als lijnkleur is ingesteld.<br />
AutoVormen<br />
Het vervolgmenu AutoVormen toevoegen bevat diverse veelgebruikte vormen, onder andere<br />
rechthoeken, ovalen, pijlen, veelhoeken en sterren. Via dit vervolgmenu kunt u:<br />
* decoratieve cirkels of veelhoeken tekenen;<br />
* functionele pijlen, sterren, enzovoort tekenen;<br />
* een rand toevoegen aan uw pagina, bijvoorbeeld een rechthoek<br />
rond de volledige pagina;<br />
* donkere vlakken tekenen achter afbeeldingen of tekst om er<br />
de aandacht op te vestigen;<br />
* webknoppen maken en er hyperlinks of hotspots voor definiëren,<br />
zodat gebruikers er op kunnen klikken op uw webpagina’s.<br />
U kunt hiervoor een willekeurige AutoVorm gebruiken,<br />
maar probeer zeker eens het gereedschap Knop (met een rode<br />
cirkel aangeduid in de figuur).<br />
Zo tekent u een AutoVorm:<br />
1. Klik op de knop AutoVormen toevoegen op de werkbalk Standaardobjecten en selecteer<br />
een vorm in het vervolgmenu. Let erop dat de geselecteerde vorm als pictogram voor de<br />
werkbalkknop verschijnt.<br />
2. Klik op de pagina om een nieuwe vorm met standaardafmetingen toe te voegen. Sleep met<br />
de muis als u aangepaste afmetingen wilt instellen voor de vorm.<br />
3. Laat de muisknop los zodra de vorm de gewenste afmetingen heeft. U kunt de vorm nu<br />
bewerken door de weergegeven grepen te verslepen.<br />
Zo beperkt u de verhoudingen van een vorm (bijvoorbeeld om een cirkel te<br />
tekenen):<br />
* Houd de Shift-toets ingedrukt tijdens het slepen.<br />
Alle AutoVormen kunnen naar behoefte worden verplaatst, geschaald, geroteerd en met een<br />
vulkleur/verloop worden gevuld. Bovendien kunt u het uiterlijk ervan aanpassen met het selectiegereedschap.<br />
Elke vorm wijzigt hierbij op een logische manier, zodat u nauwkeurig het<br />
uiterlijk ervan kunt bepalen. Precies het feit dat u het uiterlijk van AutoVormen kunt veranderen,<br />
maakt ze flexibeler dan illustraties en cliparts.<br />
140 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Zo past u het uiterlijk van een AutoVorm aan:<br />
1. Selecteer de AutoVorm met het selectiegereedschap. Er verschijnen een of meer schuifregelaars<br />
rond de vorm. Verwar deze schuifregelaars niet met de selectiegrepen aan de<br />
binnenzijde van de vorm. Met de selectiegrepen kunt u de vorm verplaatsen, deze proportioneel<br />
of niet-proportioneel schalen, enzovoort. Met de schuifregelaars kunt u allerlei<br />
kenmerken van de vorm aanpassen, zoals de straal van de hoeken bij een rechthoek of het<br />
aantal punten bij een ster. Onthoud in dit verband dat er voor elk type AutoVorm andere<br />
schuifregelaars beschikbaar zijn, die elk een specifieke functie vervullen.<br />
2. Versleep een van de schuifregelaars om het uiterlijk van de AutoVorm aan te passen.<br />
Plaats het selectiegereedschap boven een schuifregelaar en lees de uitleg in de<br />
statusbalk als u de functie wilt achterhalen van de verschillende schuifregelaars<br />
voor een AutoVorm.<br />
Gesloten vormen<br />
Zodra u een lijn tekent of selecteert, verschijnen de nodes van de lijn. Deze nodes geven het<br />
einde van elk lijnsegment aan. Lijnen die u met de vrije hand hebt getekend, hebben meestal<br />
een groot aantal nodes. Rechte en gebogen lijnsegmenten hebben maar twee nodes (1). Door<br />
een lijn te tekenen tussen de eindpunten van een lijnsegment (2) of door een curve te sluiten<br />
(3), kunt u eenvoudig een gesloten vorm maken.<br />
Zo zet u een lijn in een vorm om:<br />
* Selecteer de lijn met het selectiegereedschap en klik op Curve sluiten op de optiebalk.<br />
U kunt ook omgekeerd te werk gaan en een gesloten vorm openen om er een of meer lijnsegmenten<br />
aan toe te voegen.<br />
Zo opent u een lijn of gesloten vorm:<br />
1. Klik met het selectiegereedschap op de node waar u de lijn of vorm wilt openen.<br />
2. Klik op Curve openen op de optiebalk. Als u een lijn hebt geselecteerd, wordt deze in<br />
twee lijnen gesplitst. Een vorm wordt een lijn. Hierbij wordt de geselecteerde node in twee<br />
nodes gesplitst (één aan elk uiteinde van de nieuwe lijn).<br />
3. U kunt de vorm van de lijn nu naar behoefte aanpassen met het selectiegereedschap.<br />
Raadpleeg het Help-bestand van het programma voor meer informatie over het bewerken<br />
van vormen.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 141
2D-filtereffecten gebruiken<br />
U kunt in <strong>Studio</strong> <strong>Webdesign</strong> talrijke filtereffecten gebruiken om objecten te transformeren.<br />
Met de 3D-effecten kunt u zelfs de indruk wekken dat het oppervlak van objecten met een<br />
textuur is bekleed (zie verderop in dit hoofdstuk). Hierna zullen we eerst dieper ingaan op de<br />
tweedimensionale filtereffecten die u zoal kunt toepassen op objecten. In de volgende voorbeelden<br />
hebben we elk van deze effecten op de letter A toegepast.<br />
Slagschaduw Schaduw binnen Gloed buiten Gloed binnen<br />
Schuine rand<br />
binnen<br />
Schuine rand buiten Reliëf Kussenreliëf<br />
Gaussiaans vervagen Zoomen Radiaal vervagen Bewegingsonscherpte<br />
Vulkleur Doezelen Contour Weerspiegeling<br />
Merk op dat het programma ook het gereedschap Schaduw bevat, waarmee u rechtstreeks op<br />
de pagina schaduw kunt toevoegen aan een willekeurig object. Hierbij kunt u aan de hand van<br />
controlegrepen nauwkeurig de vervaging, transparantie en kleur van de schaduw instellen.<br />
Zo past u een 2D-filtereffect toe:<br />
1. Selecteer het object waarop u een effect wilt toepassen en klik op het gereedschap Filtereffecten<br />
in het vervolgmenu Effecten bewerken in de gereedschapset. Het dialoogvenster<br />
Filtereffecten verschijnt<br />
2. Om een van de effecten toe te passen, activeert u gewoon het overeenkomstige selectievakje<br />
in de lijst aan de linkerkant. Merk op dat u bij bepaalde effecten ook een specifiek<br />
type effect kunt selecteren via een vervolgkeuzelijst en dat u meerdere effecten kunt instellen<br />
voor een object.<br />
142 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
3. Selecteer een effect en gebruik de besturingselementen in het dialoogvenster om de eigenschappen<br />
van het effect aan te passen. Versleep de schuifregelaars of typ rechtstreeks waarden<br />
in de invoervakken om het gewenste effect te verkrijgen. (U kunt een schuifregelaar<br />
ook selecteren en vervolgens de pijltoetsen op het toetsenbord gebruiken om de ingestelde<br />
waarde te wijzigen.) Welke opties u precies kunt instellen, hangt af van het effect dat u hebt<br />
geselecteerd.<br />
4. Klik op OK om het effect toe te passen op het geselecteerde object, of op Annuleren als u<br />
het dialoogvenster wilt sluiten zonder het effect toe te passen.<br />
Reflecties maken<br />
U kunt een pagina eenvoudig een creatieve uitstraling geven door een verticale weerspiegeling<br />
toe te voegen aan een geselecteerd object. Dergelijke weerspiegelingen hebben vooral een<br />
prachtig effect wanneer u ze op een afbeelding toepast, maar kunnen net zo indrukwekkend<br />
zijn wanneer ze op artistieke tekst zoals paginatitels of tekstbanners worden toegepast. Hierbij<br />
kunt u nauwkeurig de hoogte, transparantie, verschuiving en vervaging van de weerspiegeling<br />
instellen.<br />
Zo voegt u een weerspiegeling toe aan een object:<br />
1. Voer dezelfde stappen uit als hiervoor zijn beschreven om het dialoogvenster Filtereffecten<br />
te openen en activeer het selectievakje Weerspiegeling in de lijst aan de linkerkant.<br />
2. Gebruik de besturingselementen rechts in het dialoogvenster om de gewenste instellingen<br />
te kiezen voor het effect. Versleep hiertoe de schuifregelaars of typ rechtstreeks waarden<br />
in de bijbehorende invoervakken. (U kunt een schuifregelaar ook selecteren en vervolgens<br />
de pijltoetsen op het toetsenbord gebruiken om de ingestelde waarde te wijzigen.) U kunt<br />
de volgende opties instellen voor de weerspiegeling:<br />
• Hoogte: hiermee bepaalt u in welke mate het object wordt weerspiegeld. Als u 100 als<br />
waarde instelt, wordt het volledige object weerspiegeld. Stelt u 50 als waarde in, dan<br />
wordt maar de helft van het object weerspiegeld, enzovoort.<br />
• Transparantie: hiermee wijzigt u de transparantie van de weerspiegeling.<br />
• Afstand: hiermee bepaalt u de afstand tussen de rand van het onderliggende object en<br />
de positie waar de weerspiegeling begint.<br />
• Vervagen: hiermee bepaalt u hoe ‘wazig’ de uiteindelijke weerspiegeling is.<br />
3. Klik op OK om het effect toe te passen op het geselecteerde object, of op Annuleren als u<br />
het dialoogvenster wilt sluiten zonder het effect toe te passen.<br />
Contouren maken<br />
<strong>Studio</strong> <strong>Webdesign</strong> biedt u de mogelijkheid een gekleurde rand toe te voegen aan objecten als<br />
filtereffect. Met dit effect kunt u bijvoorbeeld eenvoudig een kader met een willekeurige kleur<br />
weergeven rond tekst en vormen. Hierbij kunt u nauwkeurig de kleur, transparantie, breedte<br />
en uitlijning van het effect instellen. U kunt ook uit verschillende overvloeimodi kiezen voor<br />
het effect. Merk op dat u ook een kleurverloop als vulkleur kunt instellen voor het kader. (Het<br />
ingestelde kleurverloop wordt altijd vanaf de binnenrand tot de buitenrand van het kader<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 143
toegepast.) Desgewenst kunt u zelfs een patroon als vulkleur instellen, dat u naar behoefte<br />
aan de binnen- of buitenkant van het object kunt toepassen of over de randen van het object<br />
kunt centreren.<br />
Zoals voor alle andere effecten geldt ook hier weer dat u het effect naar behoefte in of uit kunt<br />
schakelen. Desgewenst kunt u behalve het kader nog een willekeurige combinatie van 2D- of<br />
3D-filtereffecten op het object toepassen.<br />
Zo geeft u een kader weer rond een geselecteerd object:<br />
1. Voer dezelfde stappen uit als hiervoor zijn beschreven om het dialoogvenster Filtereffecten<br />
te openen en activeer het selectievakje Contour in de lijst aan de linkerkant.<br />
2. Selecteer in de vervolgkeuzelijst Overvloeimodus een overvloeimodus voor het effect.<br />
Hiermee bepaalt u hoe de kleur van het kader en de pixels van het onderliggende object in<br />
elkaar overvloeien. Stel vervolgens via de schuifregelaar eronder de gewenste transparantie<br />
in.<br />
3. Gebruik de schuifregelaar Breedte om de breedte van het kader in te stellen. Geef vervolgens<br />
via de optie Uitlijning aan of u het kader aan de buitenkant of de binnenkant van het<br />
object wilt plaatsen, of als u het wilt centreren over de randen van het object.<br />
4. Selecteer in de vervolgkeuzelijst Vulkleur/verloop een vulkleur of verloop voor het kader.<br />
U hebt de keuze uit Effen kleur, Lineair, Radiaal, Conisch, Vierkant, Contour of Patroon.<br />
Als u Effen kleur kiest, wordt de optie Kleur beschikbaar, waarmee u de gewenste<br />
kleur kunt instellen voor het kader. Als u een van de andere opties selecteert, verschijnt<br />
een aantal besturingselementen waarmee u het gewenste verloop kunt instellen en het<br />
naar behoefte kunt aanpassen (zie ‘Het spectrum van een kleurverloop bewerken’ in het<br />
Help-bestand). Merk op dat u desgewenst ook een patroon kunt instellen voor het kader.<br />
5. Activeer het selectievakje Schalen met object als u wilt dat ook het effect proportioneel<br />
wordt geschaald wanneer u achteraf de afmetingen van het object wijzigt. Als u dit selectievakje<br />
uitschakelt, wordt het effect niet aangepast wanneer u het object schaalt.<br />
6. Klik op OK om het effect toe te passen.<br />
Als u het effect weer wilt uitschakelen, kiest u Filtereffecten in het menu Opmaak (of in het<br />
snelmenu voor het object) en schakelt u het selectievakje Contour uit links in het dialoogvenster.<br />
Objecten vervagen<br />
U kunt allerlei vervagingseffecten toepassen op een object in <strong>Studio</strong> <strong>Webdesign</strong>, meerbepaald:<br />
* Gaussiaans vervagen: dit effect maakt een object vloeiender door een gewogen gemiddelde<br />
toe te passen op pixels.<br />
* Zoomen: hiermee kunt u het effect van een in- of uitzoomende cameralens nabootsen.<br />
* Radiaal vervagen: hiermee vervaagt u een object in concentrische cirkels om het effect<br />
van een draaiende camera of een draaiend voorwerp na te bootsen.<br />
* Bewegingsonscherpte: hiermee kunt u een object in een bepaalde richting vervagen om<br />
het effect van een bewegend voorwerp na te bootsen.<br />
144 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Raadpleeg het Help-bestand van het programma voor meer informatie over hoe u een vervagingseffect<br />
toepast op een object.<br />
Het gereedschap Schaduw gebruiken<br />
Schaduw leent zich uitstekend om objecten diepte te geven. Dat geldt in het bijzonder voor<br />
afbeeldingen en tekst, maar ook voor vormen, tekstframes en tabellen. Met het gereedschap<br />
Schaduw in <strong>Studio</strong> <strong>Webdesign</strong> kunt u snel en eenvoudig een slagschaduw of een op schuine<br />
randen gebaseerd schaduweffect toevoegen aan een willekeurig object.<br />
Nadat u een schaduweffect hebt toegepast met het gereedschap kunt u aan de hand van de<br />
weergegeven nodes rechtstreeks op de pagina eenvoudig de kleur, transparantie, vervaging<br />
en allerlei andere kenmerken van het effect aanpassen. (U kunt hiertoe natuurlijk ook de<br />
optiebalk gebruiken.) Door specifieke nodes naar binnen of naar buiten te slepen vanuit de<br />
oorsprong van de schaduw, kunt u snel de vervaging en transparantie ervan aanpassen. Als<br />
u een andere kleur wilt instellen voor de schaduw, klikt u gewoon op de kleurnode en kiest<br />
u een nieuwe kleur op het tabblad Kleur of Stalen. Merk op dat u de oorsprong van de schaduw<br />
naar behoefte in het middelpunt (zoals in de figuur) of aan een specifieke rand van het<br />
object kunt plaatsen, naargelang u een eenvoudig dan wel een op schuine randen gebaseerd<br />
schaduweffect wilt creëren.<br />
U kunt overigens ook het dialoogvenster Filtereffecten gebruiken om de gewenste instellingen<br />
te kiezen nadat u schaduw hebt toegevoegd aan een object met het gereedschap.<br />
Zo voegt u een eenvoudig of schuingetrokken schaduweffect toe aan een geselecteerd<br />
object:<br />
1. Selecteer het object waaraan u schaduw wilt toevoegen en klik vervolgens op het gereedschap<br />
Schaduw in het vervolgmenu Effecten bewerken in de gereedschapset.<br />
2. Als u een eenvoudig schaduweffect wilt toevoegen aan het object, plaatst u de muisaanwijzer<br />
boven het object en sleept u de muis terwijl u de linkermuisknop ingedrukt houdt<br />
weg van het object.<br />
OF<br />
Selecteer de gewenste optie in de vervolgkeuzelijst Vergrendelen op de optiebalk als u een<br />
schaduweffect wilt toepassen dat is schuingetrokken in verhouding tot de linker-, rechter-,<br />
boven- of onderrand van het object.<br />
3. Bij beide soorten schaduw kunt u nauwkeurig de gewenste positie instellen door de schaduw<br />
met ingedrukte linkermuisknop te verslepen op de pagina.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 145
Gebruik de vervolgkeuzelijst Vergrendelen op de optiebalk om tussen een<br />
eenvoudig schaduweffect en verschillende soorten schuingetrokken schaduweffecten<br />
te wisselen.<br />
3D-filtereffecten gebruiken<br />
De 3D-filtereffecten gaan veel verder dan de 2D-filtereffecten (zoals schaduw, een schuine<br />
rand, gloed of reliëf) die we eerder hebben beschreven. Met behulp van deze effecten kunt u<br />
het oppervlak van objecten met texturen bekleden. Hierbij kunt u desgewenst meerdere effecten<br />
tegelijkertijd toepassen op een object. Merk op dat deze effecten niets kunnen ‘doen’ met<br />
een ongevuld object. Er moet een vulkleur of verloop zijn ingesteld voor het object voordat u<br />
het verschil ziet!<br />
Overzicht<br />
Zo past u een 3D-filtereffect toe op een geselecteerd object:<br />
1. Klik op Filtereffecten in het vervolgmenu Effecten bewerken in de gereedschapset.<br />
2. Activeer het selectievakje 3D-effecten in de lijst aan de linkerkant. Merk op dat standaard<br />
ook het selectievakje 3D-belichting wordt geactiveerd.<br />
• 3D-effecten is de ‘hoofdschakelaar’ voor deze categorie effecten.<br />
Merk op dat de instellingen die u kiest voor de opties<br />
Vervagen en Diepte een grote invloed uitoefenen op<br />
het uiteindelijke effect. Klik op de knop met het plusteken<br />
naast de schuifregelaars als u deze instellingen onafhankelijk<br />
van elkaar wilt aanpassen.<br />
• 3D-belichting voegt een lichtbron toe. Deze lichtbron is<br />
onontbeerlijk, aangezien de diepte-informatie in het effect<br />
anders niet zichtbaar is. Via de belichtingsinstellingen kunt<br />
u het driedimensionale oppervlak belichten en de reflecterende<br />
eigenschappen ervan wijzigen.<br />
Misschien vraagt u zich af waarom in de namen van de verschillende 3D-effecten regelmatig<br />
de term ‘map’ voorkomt. Het concept van een map is de sleutel om te begrijpen hoe deze effecten<br />
werken. Het gaat hierbij om een kanaal met informatie dat over de afbeelding wordt<br />
gelegd. In dit kanaal zijn waarden opgeslagen voor elke gekleurde pixel in de onderliggende<br />
afbeelding. Elk 3D-effect maakt gebruik van een map. Precies door de interactie tussen deze<br />
map en het onderliggende verloop dat voor de afbeelding is ingesteld, wordt visueel de indruk<br />
gewekt dat het oppervlak met een textuur is bekleed.<br />
146 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Bumpmaps voegen diepte-informatie toe, waardoor de indruk ontstaat dat de afbeelding uit<br />
hoogtes en laagtes bestaat.<br />
Patronen voegen kleurvariaties toe op basis van specifieke overvloeimodi en transparantieinstellingen<br />
om op een realistische manier allerlei texturen te simuleren (hout, marmer, vlekken,<br />
enzovoort).<br />
Merk op dat er twee soorten bumpmaps en patronen zijn: tweedimensionale en driedimensionale.<br />
Dit zijn in feite allemaal driedimensionale effecten. Het onderscheid 2D/3D verwijst<br />
gewoon naar de manier waarop het gewenste resultaat wordt verkregen. Bij de tweedimensionale<br />
varianten moet u eerst een bitmap selecteren in de galerie, terwijl u bij de driedimensionale<br />
varianten eerst een functie dient te selecteren. 3D-effecten die op een functie zijn<br />
gebaseerd, bevatten gegevens over het inwendige van de ‘ruimte,’ terwijl de effecten die op een<br />
bitmap zijn gebaseerd alleen de kenmerken van het oppervlak beschrijven.<br />
Verschillende effecten combineren – U kunt verschillende 3D-effecten met elkaar combineren<br />
(zie bovenstaande figuur). De effecten worden cumulatief toegepast volgens een welbepaalde<br />
volgorde: 3D-bumpmap > 2D-bumpmap > 3D-patroon > 2D-patroon > 3D-belichting.<br />
3D-bumpmap<br />
Dit effect wekt de indruk dat het oppervlak van het object met een textuur is bekleed door<br />
diepte-informatie toe te voegen op basis van een wiskundige functie. U kunt dit effect met een<br />
of meer andere 3D-effecten combineren, maar niet met een 2D-bumpmap.<br />
Zo past u het effect toe op een geselecteerd object:<br />
* Selecteer het gereedschap Filtereffecten in het vervolgmenu Effecten bewerken in de<br />
gereedschapset of kies Filtereffecten in het menu Opmaak (of in het snelmenu voor het<br />
object) om het dialoogvenster Filtereffecten te openen. Activeer links in het dialoogvenster<br />
het selectievakje 3D-effecten. Versleep de schuifregelaars voor deze ‘hoofdschakelaar’<br />
om de algemene eigenschappen te wijzigen van de afzonderlijke 3D-effecten.<br />
• Vervagen: via deze schuifregelaar stelt u de gewenste vervaging in. Hoe hoger de waarde<br />
die u instelt, hoe meer u de indruk wekt dat de hoogte geleidelijk wijzigt.<br />
• Diepte: hiermee bepaalt u hoe steil de wijzigingen in diepte zijn.<br />
• De knop is standaard ingeschakeld, wat erop wijst dat beide schuifregelaars aan elkaar<br />
zijn gekoppeld. In deze modus worden grote wijzigingen in diepte glad gestreken door<br />
de parameter Vervagen. Klik op deze knop als u beide schuifregelaars onafhankelijk van<br />
elkaar wilt aanpassen.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 147
* (Facultatief) Klik indien nodig op Voorbeeld weergeven/verbergen rechtsonder in<br />
het dialoogvenster om het voorbeeldvenster uit te vouwen. Als dit deelvenster is uitgevouwen,<br />
worden de effecten die u instelt alleen in het voorbeeldvenster toegepast. Als u<br />
dit deelvenster samenvouwt (door nogmaals op de knop te klikken), worden de ingestelde<br />
effecten rechtstreeks op het object op de pagina toegepast. Wanneer u voor de eerstgenoemde<br />
methode kiest, kunt u nauwkeurig de gewenste instellingen kiezen voor een effect,<br />
zonder dat andere objecten op de pagina u daarbij hinderen. Met de zoomknoppen<br />
en de bijbehorende vervolgkeuzelijst onder in het voorbeeldvenster kunt u naar behoefte<br />
in- of uitzoomen op het effect.<br />
* Activeer het selectievakje 3D-bumpmap. Merk op dat het uiteindelijke effect grotendeels<br />
afhankelijk is van de functie die u selecteert en de instellingen die u ervoor kiest (zie hierna).<br />
Experimenteer daarom eerst met die instellingen voordat u de volgende instellingen<br />
aanpast:<br />
• Z-diepte: hiermee stelt u de factor in die op de oorspronkelijke pixelintensiteit moet<br />
worden toegepast voordat de bumpmapfunctie wordt uitgevoerd. Stel een lage waarde<br />
in om het oorspronkelijke oppervlak vlakker te maken en een hoge waarde om het oppervlak<br />
steiler te maken.<br />
• B-diepte: staat voor ‘bumpdiepte.’ Via deze schuifregelaar stelt u de factor in die op de<br />
bumpmap moet worden toegepast nadat deze werd gegenereerd. Lage waarden komen<br />
overeen met ondiepe uitstulpingen, hoge waarden met diepe uitstulpingen.<br />
• Gebruik de contourlijn om het 'zijaanzicht' van de gegenereerde uitstulpingen aan te<br />
passen. Hiermee verhoogt of verlaagt u in werkelijkheid helderheidswaarden in de<br />
bumpmap. Het proces is echter visueel bijzonder intuïtief. Klik op de contourlijn om<br />
een controlenode toe te voegen. Versleep de lijn vervolgens om de vorm ervan te wijzigen<br />
en een overeenkomstige contour te produceren in de uitstulpingen. Klik zo nodig<br />
nog een keer op de lijn als u nog meer nodes wilt toevoegen. Selecteer een node en druk<br />
op Delete als u deze wilt verwijderen. Activeer het selectievakje Lineair als u nodes via<br />
een rechte lijn met elkaar wilt verbinden.<br />
Opmerking: het gaat hierbij om een invoer/uitvoerbewerking op basis van een<br />
grafiek. De horizontale as vertegenwoordigt mogelijke helderheidswaarden<br />
(van zwart tot wit) in de bumpmap ‘voordat’ een wijziging werd aangebracht.<br />
De verticale as geeft dezelfde spreiding van waarden aan na de aanpassing. De<br />
lijn relateert deze invoer- en uitvoerwaarden aan elkaar. Aanvankelijk vertegenwoordigt<br />
de grafiek ‘Geen wijziging,’ dat wil zeggen dat elke invoerwaarde langs<br />
de horizontale as aanvankelijk exact overeenstemt met dezelfde uitvoerwaarde<br />
langs de verticale as. Door bijvoorbeeld het middelste gedeelte van de curve<br />
naar boven te duwen, maakt u de grijswaarden in het middenbereik helderder,<br />
aangezien hun uitvoerwaarden nu hoger zijn dan voordien. U zult geboeid<br />
vaststellen hoe deze eenvoudige wijzigingen een grote invloed hebben op de<br />
vorm van het terrein dat u creëert in de afbeelding!<br />
148 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
* Klik op Functie om de functie te kiezen die u wilt gebruiken om de bumpmap te genereren.<br />
In de vervolgkeuzelijst hebt u de keuze uit Ruis, Som, SomAbs, SinusSomAbs,<br />
Dambord en Strepen. Zodra u een functie hebt geselecteerd, kunt u in dit deelvenster de<br />
gewenste algemene parameters instellen. Klik op Geavanceerd als u geavanceerde opties<br />
wilt instellen voor het effect.<br />
• Schaal X: hiermee kunt u het effect samenpersen of uitrekken langs de X-as of horizontale<br />
as.<br />
• Schaal Y: hiermee kunt u het effect samenpersen of uitrekken langs de Y-as of verticale<br />
as.<br />
• Afwijking: hiermee kunt u de helderheid aanpassen. Lage waarden resulteren in donkerdere<br />
tonen, hoge waarden in lichtere tonen.<br />
• Toename: via deze schuifregelaar kunt u het contrast aanpassen. Lage waarden resulteren<br />
in een kleiner bereik van uitvoerwaarden tussen donker en licht, hoge waarden in<br />
een grotere spreiding van de uitvoerwaarden.<br />
* Klik op Geavanceerd als u geavanceerde opties wilt instellen voor de geselecteerde functie.<br />
Welke opties beschikbaar zijn, is afhankelijk van de functie die u hebt geselecteerd.<br />
Vaak is een beetje experimenteren de beste aanpak!<br />
* Klik tot slot op OK om het effect toe te passen.<br />
Op dezelfde manier kunt u ook een van de andere 3D-filtereffecten toepassen op het geselecteerde<br />
object. Omdat de instellingen voor de verschillende filtereffecten doorgaans met elkaar<br />
overeenkomen, zullen we ons hierna beperken tot een overzicht van het effect dat u kunt<br />
verkrijgen met elk filtereffect.<br />
2D-bumpmap<br />
Dit effect wekt de indruk dat het oppervlak van het object met een textuur is bekleed door<br />
diepte-informatie toe te voegen op basis van een grijswaardenbitmap. U kunt dit effect met<br />
een of meer andere 3D-effecten combineren, maar niet met een 3D-bumpmap.<br />
3D-patroon<br />
Dit effect wekt de indruk dat het oppervlak van het object met een textuur is bekleed door<br />
kleurvariaties te introduceren op basis van een wiskundige functie. U kunt dit effect met een<br />
of meer andere 3D-effecten combineren.<br />
2D-patroon<br />
Dit effect wekt de indruk dat het oppervlak van het object met een textuur is bekleed door<br />
kleurvariaties te introduceren op basis van een grijswaardenbitmap. U kunt dit effect met een<br />
of meer andere 3D-effecten combineren.<br />
Transparantie<br />
Via het tabblad Transparantie in de studio kunt u de algemene transparantie wijzigen van<br />
een object waarop 3D-filtereffecten zijn toegepast (zie linkerfiguur hieronder). Als u echter<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 149
meer controle wilt over de transparantie van het object, in het bijzonder om reflecterende<br />
belichtingseffecten na te bootsen bij glazen objecten, kunt u het filtereffect Transparantie gebruiken<br />
om de gewenste transparantie in te stellen. Merk op dat u de transparantie van zowel<br />
niet-reflecterende oppervlakken (doorgaans gaat het hierbij om de schaduw die aan de rand<br />
van een object ontstaat wanneer het object vanaf de zijkant wordt belicht) als oppervlakken<br />
die van boven uit worden belicht (zie rechterfiguur hieronder) apart kunt instellen.<br />
3D-belichting<br />
Dit effect bepaalt samen met andere 3D-effecten in welke mate het oppervlak wordt belicht en<br />
wat de reflecterende eigenschappen ervan zijn. Het selectievakje 3D-belichting uitschakelen,<br />
komt op hetzelfde neer als het oppervlak uitsluitend met 100% omgevingslicht belichten.<br />
Diepte toevoegen (Instant 3D)<br />
Met de voorziening Instant 3D kunt u vlakke vormen en tekst in een oogwenk in driedimensionale<br />
objecten omtoveren.<br />
Hierbij kunt u allerlei parameters instellen, zoals:<br />
* Schuine randen: maak een keuze uit verschillende vooraf gedefinieerde holle of bolle<br />
schuine randen of ontwerp aangepaste schuine randen met behulp van de ingebouwde<br />
editor.<br />
* Lichtbronnen: in <strong>Studio</strong> <strong>Webdesign</strong> kunt u maar liefst acht gekleurde lichtbronnen toevoegen<br />
die u naar behoefte kunt bewerken om prachtige belichtingseffecten te creëren.<br />
* Draaibankeffecten: ontwerp realistische 3D-objecten door een object (bijvoorbeeld een<br />
kurk) rond zijn eigen as te draaien en te extruderen.<br />
* Texturen: bepaal hoe de textuur wordt geëxtrudeerd van objecten waarvoor een kleur- of<br />
bitmapverloop is ingesteld.<br />
* Aanzichten: roteer uw object in drie dimensies om unieke aanzichten te creëren.<br />
* Materialen: bepaal in welke mate de belichting een effect heeft op het oppervlak van objecten<br />
(ideaal voor driedimensionale artistieke tekst!).<br />
150 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Via de optiebalk boven in de werkomgeving kunt u eenvoudig de gewenste instellingen kiezen<br />
voor elk van deze parameters. Onthoud in dit verband dat elke parameter het 3D-effect<br />
bepaalt dat uiteindelijk op het geselecteerde object wordt toegepast. Uniek is ongetwijfeld dat<br />
u het object rechtstreeks op de pagina kunt transformeren (in 3D!) aan de hand van een rode<br />
cirkel die als as fungeert van waaruit u het object naar behoefte rond de X-, Y- en Z-as kunt<br />
draaien in verhouding tot de pagina. Let erop hoe de muisaanwijzer een andere vorm krijgt<br />
naarmate u deze over de verschillende nodes van de rode cirkel beweegt:<br />
Roteren rond X-as Roteren rond Y-as Roteren rond Z-as Roteren rondX- en<br />
Y-as<br />
Roteer uw 3D-objecten rond hun eigen as in plaats van rond de assen van de<br />
pagina door de Ctrl-toets ingedrukt te houden tijdens het roteren.<br />
Merk op dat u rechtstreeks op de pagina de hoek en elevatie van elke ‘actieve’ lichtbron kunt<br />
wijzigen door deze naar een andere positie te slepen.<br />
U kunt het onderliggende basisobject op elk gewenst moment bewerken, ook<br />
nadat u een van de bovengenoemde transformaties hebt uitgevoerd.<br />
Zo voegt u diepte toe:<br />
1. Selecteer een object en klik op Instant 3D in het vervolgmenu Effecten bewerken in<br />
de gereedschapset (of kies Instant 3D in het menu Opmaak). Let erop dat het geselecteerde<br />
object onmiddellijk driedimensionaal wordt gemaakt en dat er vóór het object een<br />
rode cirkel verschijnt waarmee u het object naar behoefte kunt aanpassen.<br />
2. Selecteer in de eerste vervolgkeuzelijst op de optiebalk een categorie 3D-effecten. De overige<br />
opties op de optiebalk worden automatisch bijgewerkt naargelang de categorie die<br />
momenteel is geselecteerd. Raadpleeg het Help-bestand van het programma voor meer<br />
informatie.<br />
Mocht u niet tevreden zijn over de gekozen instellingen, kunt u het object altijd weer in zijn<br />
oorspronkelijke staat herstellen door op de knop Standaardwaarden te klikken op de optiebalk.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 151
Zo schakelt u het 3D-effect uit:<br />
* Klik op 3D-effect verwijderen op de optiebalk. Als u het effect achteraf opnieuw wilt<br />
inschakelen, activeert u gewoon het gereedschap Instant 3D in de gereedschapset.<br />
Zo bewerkt u de basiseigenschappen van een 3D-object:<br />
* Selecteer het 3D-object en klik op de knop Bewerken in de rechterbenedenhoek van het<br />
geselecteerde object.<br />
Let erop dat het object nu zonder toegepast 3D-effect wordt weergegeven, zodat u het naar<br />
behoefte kunt schalen en roteren met behulp van de selectiegrepen.<br />
Randen toevoegen<br />
In <strong>Studio</strong> <strong>Webdesign</strong> is een rand of kader een element dat voortdurend wordt herhaald en dat<br />
kan worden gebruikt om een object in te sluiten, zodat het net lijkt alsof het object is ingelijst.<br />
Dergelijke kaders ogen vooral mooi bij geïmporteerde afbeeldingen.<br />
Zo voegt u een kader toe aan een object:<br />
1. Klik op Lijnen en randen in het vervolgmenu met vulgereedschappen in de gereedschapset.<br />
152 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
2. Als u het kader op specifieke randen van het object wilt toepassen, activeert u het tabblad<br />
Randcontouren. In het voorbeeld aan de linkerkant wordt met behulp van vette lijnen<br />
aangeduid op welke randen van het geselecteerde object de huidige instellingen op het<br />
tabblad Rand zullen worden toegepast als u op OK klikt.<br />
* Klik op het overeenkomstige pictogram in de bovenste rij knoppen aan de rechterkant<br />
om respectievelijk alle randen dan wel geen enkele rand van het object te selecteren.<br />
* Gebruik de pictogrammen in de onderste rij knoppen om afzonderlijke randen van het<br />
object te selecteren.<br />
3. Activeer het tabblad Rand om de gewenste instellingen te kiezen voor de geselecteerde<br />
rand(en) van het object. Selecteer in de vervolgkeuzelijst Zijden een van de vooraf gedefinieerde<br />
patronen voor het kader. Selecteer Geen als u het patroon weer wilt verwijderen.<br />
4. Activeer het selectievakje Uniforme zijden en hoeken als u voor de hoeken hetzelfde<br />
patroon wilt gebruiken als voor de zijden. Schakel dit selectievakje uit en selecteer een<br />
patroon in de vervolgkeuzelijst Hoeken als u verschillende patronen wilt combineren.<br />
5. Geef in het groepsvak Uitlijnen aan of u het kader aan de buitenkant, de binnenkant of<br />
exact in het midden van het begrenzingskader rond het object wilt plaatsen.<br />
6. Stel zo nodig ook de andere eigenschappen van het kader in:<br />
• Stel via het kringveld Dikte de gewenste dikte in voor het kader.<br />
• Activeer het selectievakje Achter inhoud als u de binnenste helft van het kader achter<br />
het object wilt verbergen. Als u dit selectievakje uitschakelt, verschijnt het volledige<br />
kader vóór het object.<br />
• Als u het selectievakje Schalen met object activeert, worden zowel het kader als het<br />
object gewijzigd als u het object schaalt. Wanneer u dit selectievakje uitschakelt, blijft<br />
de dikte van het kader ongewijzigd tijdens het schalen van het object.<br />
7. Klik op OK nadat u de gewenste instellingen hebt gekozen.<br />
Objectstijlen gebruiken<br />
Objectstijlen bieden ongeveer dezelfde voordelen als opmaakprofielen en kleurenschema’s.<br />
Nadat u een reeks opmaakkenmerken hebt ingesteld die precies het gewenste resultaat opleveren<br />
(bijvoorbeeld een bepaalde combinatie van lijnkleur, vulkleur en rand), kunt u die als<br />
benoemde stijl opslaan. Het programma onthoudt voor welke objecten deze stijl is ingesteld<br />
en voegt de nieuwe stijl automatisch aan de lijst toe op het tabblad Objectstijlen.<br />
Objectstijlen zijn om verschillende redenen handig:<br />
* Telkens als u een bepaald aspect van de stijl wilt wijzigen (bijvoorbeeld de lijnkleur), hoeft<br />
u alleen de stijldefinitie te bewerken. Alle objecten waarop deze stijl is toegepast in de site<br />
worden automatisch bijgewerkt op basis van de nieuwe instellingen!<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 153
* Objectstijlen die u globaal hebt opgeslagen, zijn niet alleen beschikbaar in de huidige site,<br />
maar ook in elke nieuwe site die u maakt, zodat u een geschikte combinatie van opmaakkenmerken<br />
naar behoefte kunt hergebruiken.<br />
Daar komt nog bij dat u op het tabblad Objectstijlen uit verschillende galerieën met vooraf<br />
gedefinieerde stijlen kunt kiezen, die u rechtstreeks kunt toepassen op een object of naar wens<br />
kunt aanpassen!<br />
Elke objectstijl bevat specifieke instellingen voor diverse objectkenmerken, zoals de lijnkleur<br />
en lijnstijl, de vulkleur en transparantie, filtereffecten, het lettertype, enzovoort. Precies het<br />
feit dat u specifieke kenmerken kunt instellen of uitsluiten en voor elk kenmerk uit een vrijwel<br />
onbeperkt aantal opties kunt kiezen, maakt van deze voorziening een onmisbaar gereedschap<br />
in uw designarsenaal.<br />
Zo past u een objectstijl toe op objecten:<br />
1. Selecteer een object op de pagina en activeer het tabblad Objectstijlen in de studio.<br />
2. Selecteer via de vervolgkeuzelijst boven aan het tabblad een categorie. In de galerie onder<br />
aan het tabblad verschijnt een overzicht van de beschikbare stijlen in de gekozen categorie.<br />
3. Klik op de miniatuur van de objectstijl die u op het geselecteerde object wilt toepassen.<br />
154 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
9 Afbeeldingen,<br />
animaties en<br />
multimedia-elementen<br />
toevoegen<br />
Afbeeldingen importeren<br />
<strong>Studio</strong> <strong>Webdesign</strong> biedt u de mogelijkheid afbeeldingen in de meest uiteenlopende bestandsindelingen<br />
in te voegen in uw site:<br />
* Bitmapafbeeldingen, ook wel bitmaps of rasterafbeeldingen genoemd, bestaan uit een<br />
matrix van punten (‘pixels’). U kunt dit enigszins vergelijken met de ruitjes op een blad<br />
millimeterpapier. Het kan hierbij om foto’s van een digitale camera of gescande afbeeldingen<br />
gaan, maar net zo goed om afbeeldingen die met een ‘tekenprogramma’ of beeldbewerkingssoftware<br />
zijn gemaakt.<br />
* Vectorgeoriënteerde afbeeldingen zijn resolutieonafhankelijk en bevatten tekenopdrachten<br />
zoals ‘Teken een lijn van A naar B.’<br />
* Metabestanden zijn bestanden die in de standaardindeling voor grafische bestanden van<br />
Windows zijn opgeslagen. Kenmerkend voor dit type bestanden is dat ze zowel bitmapgegevens<br />
als vectorgeoriënteerde gegevens bevatten.<br />
U kunt afbeeldingen ook rechtstreeks importeren van een Photo-cd of via TWAIN-apparaten<br />
zoals een scanner of digitale camera.<br />
Afbeeldingen invoegen<br />
U kunt op verschillende manieren een afbeelding invoegen in uw site. U kunt afbeeldingen<br />
bijvoorbeeld rechtstreeks naar de pagina slepen vanuit Windows Verkenner of ze invoegen<br />
vanaf het Klembord. U kunt ook gebruikmaken van een dialoogvenster om een afbeelding te<br />
importeren of een miniatuur van de afbeelding naar de pagina slepen vanuit de mediabalk.<br />
* Stand-alone afbeeldingen zweven vrij over de pagina, terwijl inline afbeeldingen netjes in<br />
een tekstobject zijn geïntegreerd.<br />
* Ingesloten afbeeldingen worden samen met het projectbestand opgeslagen en zijn een<br />
vast onderdeel ervan. Als u afbeeldingen koppelt, wordt een verwijzing naar het bronbestand<br />
ingevoegd in uw webproject. Elke methode heeft zo zijn voor- en nadelen (zie<br />
‘Insluiten versus koppelen’ verderop in deze paragraaf).<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 155
Standaard wordt een afbeelding niet bijgesneden wanneer u deze op de pagina plaatst. <strong>Studio</strong><br />
<strong>Webdesign</strong> gebruikt dus automatisch de oorspronkelijke afmetingen bij het invoegen van een<br />
afbeelding. Mocht de afbeelding echter te groot zijn, dan kunt u deze altijd bijsnijden. Desgewenst<br />
kunt u ook de eigenschappen van het afbeeldingskader (het denkbeeldige kader waarin<br />
de afbeelding wordt geplaatst) aanpassen om de grootte en uitlijning van de afbeelding in het<br />
kader te bepalen.<br />
Zo voegt u een afbeelding toe vanuit de mediabalk:<br />
* Klik op de miniatuur van de afbeelding die u wilt gebruiken in het huidige album en sleep<br />
deze terwijl u de linkermuisknop ingedrukt houdt naar de pagina. (Mocht de mediabalk<br />
momenteel niet zichtbaar zijn, klikt u op de pijlknop onder in de werkomgeving om deze<br />
uit te vouwen.) Merk op dat u de miniatuur ook naar een bestaande afbeelding op de pagina<br />
kunt slepen om deze te vervangen.<br />
Zo importeert u een afbeelding:<br />
1. (Facultatief) Als u de afbeelding ‘inline’ wilt invoegen, klikt u in een tekstobject om de<br />
invoegpositie in de tekst te plaatsen. Als u een afbeelding als stand-alone afbeelding wilt<br />
invoegen, mag er geen enkel tekstobject zijn geselecteerd.<br />
2. Doe in het hoofdvenster het volgende:<br />
• Klik op Afbeelding invoegen op de werkbalk Standaardobjecten..<br />
Doe in <strong>Studio</strong> Write het volgende:<br />
• Kies Invoegen > Afbeelding in de menubalk.<br />
3. Navigeer in het dialoogvenster naar de map waarin de afbeelding is opgeslagen en selecteer<br />
deze.<br />
4. Geef aan of u de afbeelding wilt insluiten of deze aan uw site wilt koppelen (zie ‘Insluiten<br />
versus koppelen’ verderop in deze paragraaf).<br />
5. Klik op Openen.<br />
6. Als de invoegpositie zich in tekst bevindt in het hoofdvenster, wordt gevraagd of u de afbeelding<br />
op de huidige positie wilt invoegen en deze zo nodig wilt verkleinen. Klik op Ja<br />
als u de afbeelding automatisch wilt schalen, zodat deze in het frame past.<br />
Als er geen invoegpositie is (of als u ‘Nee’ antwoordt op de vraag), verschijnt de aanwijzer<br />
Afbeelding plakken . De handeling die u nu uitvoert, bepaalt de aanvankelijke grootte<br />
en positie van de ingevoegde afbeelding.<br />
7. Klik op de pagina als u de oorspronkelijke afmetingen wilt gebruiken om de afbeelding in<br />
te voegen.<br />
OF<br />
Sleep een selectiekader met de muis als u aangepaste afmetingen wilt instellen voor de<br />
afbeelding. Houd de Shift-toets ingedrukt tijdens het slepen als u de afbeelding niet-proportioneel<br />
wilt schalen. (Standaard wordt de oorspronkelijke breedte-/hoogteverhouding<br />
van de afbeelding behouden wanneer u aangepaste afmetingen instelt.)<br />
156 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Als u meerdere afbeeldingen tegelijk wilt invoegen, selecteert u verschillende<br />
afbeeldingen in het dialoogvenster Openen en voegt u die een voor een aan de<br />
pagina toe door te klikken en/of te slepen.<br />
Afbeeldingen vervangen<br />
U kunt een afbeelding op elk moment door een andere afbeelding vervangen. Dit is vooral<br />
handig wanneer u de ingestelde grootte en positie van een afbeelding wilt behouden, maar de<br />
afbeelding zelf wilt bijwerken. Merk op dat u de techniek die hierna wordt beschreven voor<br />
elke afbeelding kunt gebruiken, ongeacht of deze al dan niet is bijgesneden.<br />
Zo vervangt u een afbeelding:<br />
* Klik op de knop Afbeelding vervangen vlak onder de geselecteerde afbeelding. Navigeer<br />
in het dialoogvenster naar de map waarin de nieuwe afbeelding is opgeslagen, selecteer<br />
deze en klik op Openen in het snelmenu.<br />
Zo vervangt u een afbeelding via de mediabalk:<br />
* Sleep de miniatuur van de afbeelding die u wilt gebruiken naar een bestaande afbeelding<br />
vanuit het huidige album in de mediabalk. (Als de mediabalk momenteel niet zichtbaar is,<br />
klikt u op de pijlknop onder in de werkomgeving om deze uit te vouwen.)<br />
Bijgesneden afbeeldingen aanpassen<br />
<strong>Studio</strong> <strong>Webdesign</strong> ondersteunt een aantal extra opties om met bijgesneden afbeeldingen te<br />
werken, hetzij afbeeldingen die u hebt bijgesneden met behulp van de gereedschappen Regelmatig<br />
bijsnijden en Onregelmatig bijsnijden in de gereedschapset, hetzij vooraf gedefinieerde<br />
afbeeldingen in de designsjablonen die u naar behoefte door uw eigen afbeeldingen<br />
kunt vervangen. Zo kunt u bijvoorbeeld naar behoefte in- of uitzoomen op een bijgesneden<br />
afbeelding en deze verplaatsen binnen het ‘afbeeldingskader’ om te bepalen welk deel ervan<br />
precies zichtbaar is, of de instellingen voor het schalen en uitlijnen van de afbeelding wijzigen<br />
door de eigenschappen van het kader aan te passen.<br />
Wanneer u een bijgesneden afbeelding selecteert met het selectiegereedschap, verschijnt vlak<br />
onder de afbeelding een besturingsbalk met opties om de afbeelding te verplaatsen in het kader,<br />
deze te roteren, in of uit te zoomen op de afbeelding, en deze door een andere afbeelding<br />
te vervangen.<br />
* Als u een bijgesneden afbeelding wilt verplaatsen binnen het afbeeldingskader, klikt u op<br />
en sleept u terwijl u de linkermuisknop ingedrukt houdt over de afbeelding totdat het<br />
gewenste gedeelte ervan wordt weergegeven in het kader.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 157
* Om een afbeelding in stappen van 90° naar links te roteren, klikt u op .<br />
* Om in of uit te zoomen op een bijgesneden afbeelding, klikt u op een van de zoomgereedschappen<br />
.<br />
* Als u de afbeelding door een andere afbeelding wilt vervangen, klikt u op , bladert u<br />
naar de map waarin de nieuwe afbeelding is opgeslagen, selecteert u deze en klikt u op<br />
Openen.<br />
Zo wijzigt u de eigenschappen van het afbeeldingskader:<br />
1. Klik met de rechtermuisknop op een bijgesneden afbeelding en kies Eigenschappen van<br />
frame in het snelmenu.<br />
OF<br />
Selecteer de afbeelding en klik op Eigenschappen van frame op de optiebalk.<br />
2. Geef in het dialoogvenster aan of u de afbeelding optimaal of minimaal wilt schalen,<br />
of als u deze wilt uitrekken. Als u de oorspronkelijke afmetingen van de afbeelding wilt<br />
gebruiken, klikt u op Niet schalen.<br />
3. Geef aan hoe u de afbeelding verticaal wilt uitlijnen in het kader. U hebt de keuze uit Boven,<br />
Midden en Onder.<br />
4. Kies tot slot de gewenste horizontale uitlijning voor de afbeelding.<br />
Als u een afbeelding selecteert die niet is bijgesneden, is alleen de knop Afbeelding<br />
vervangen beschikbaar.<br />
Insluiten versus koppelen<br />
Als u een afbeelding in uw site insluit, staat de afbeelding in uw projectbestand volledig los<br />
van het oorspronkelijke bestand op de harde schijf. Een nadeel van deze methode is dat de<br />
bestandsomvang van uw projectbestand hierdoor aanzienlijk toeneemt. Bovendien moet u de<br />
afbeelding opnieuw importeren nadat u deze hebt bewerkt als u de ingesloten afbeelding later<br />
wilt wijzigen. Hoe dan ook, dit is de beste keuze als de bestandsomvang geen rol speelt en u<br />
zeker weet dat u een afbeelding achteraf niet meer hoeft te bewerken.<br />
Als u een afbeelding aan uw site koppelt, wordt een kopie van het oorspronkelijke bestand in<br />
uw project ingevoegd. Deze kopie is aan het bronbestand gekoppeld, zodat alle wijzigingen<br />
die u aanbrengt in het bronbestand ook zichtbaar zijn in uw project. Het voordeel van deze<br />
methode is dat u de bestandsomvang van de uiteindelijke site op deze manier aanzienlijk kunt<br />
beperken. Het nadeel is echter dat u de externe bronbestanden en de koppelingen met deze<br />
bestanden zorgvuldig moet beheren. Als u het projectbestand bijvoorbeeld naar een andere<br />
map of een andere schijf verplaatst, moet u ook alle koppelingen bijwerken.<br />
Als u afbeeldingen importeert die kleiner zijn dan 256 kB, activeert <strong>Studio</strong> <strong>Webdesign</strong> standaard<br />
de optie Afbeelding insluiten in het dialoogvenster Afbeelding invoegen. (U kunt in<br />
plaats daarvan echter altijd de optie Afbeelding koppelen selecteren.) U kunt deze drempelwaarde<br />
overigens wijzigen. Desgewenst kunt u deze voorziening zelfs volledig uitschakelen.<br />
158 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Merk op dat u de OLE-status van afbeeldingen (koppelen of insluiten) achteraf op elk moment<br />
kunt wijzigen via de voorziening Bronnen beheren in Sitebeheer.<br />
Wat afbeeldingen betreft die u vanuit de mediabalk toevoegt, geldt het volgende: afbeeldingen<br />
die kleiner zijn dan 256 kB worden standaard ingesloten; afbeeldingen die groter zijn dan 256<br />
kB worden gekoppeld. U kunt deze status echter altijd wijzigen door de Shift-toets ingedrukt<br />
te houden terwijl u een afbeelding vanuit de mediabalk naar de pagina sleept.<br />
Zo bepaalt u of afbeeldingen standaard worden ingesloten dan wel aan uw site<br />
worden gekoppeld, afhankelijk van de bestandsomvang:<br />
1. Kies Extra > Opties en klik op Algemeen.<br />
2. Stel via de vervolgkeuzelijst ... insluiten indien < x kB de gewenste drempelwaarde in als u<br />
wilt dat afbeeldingen die kleiner zijn dan de opgegeven bestandsomvang standaard in uw<br />
site worden ingesloten. (Bij afbeeldingen die de ingestelde drempelwaarde overschrijden,<br />
stelt het programma standaard voor die aan uw site te koppelen.)<br />
3. Schakel het selectievakje Insluiten/koppelen figuur voorstellen uit als u bij het importeren<br />
van afbeeldingen zelf wilt kiezen of u ze wilt insluiten of koppelen. U kunt dan nog<br />
altijd een van beide opties selecteren in het dialoogvenster Afbeelding invoegen. <strong>Studio</strong><br />
<strong>Webdesign</strong> onthoudt automatisch de instelling die u de vorige keer hebt gekozen.<br />
De mediabalk gebruiken<br />
De mediabalk is als het ware een ‘mandje’ waarin u alle foto’s kunt plaatsen die u in uw website<br />
wilt gebruiken. Het hoofddoel van deze balk is ervoor zorgen dat uw foto’s altijd binnen<br />
handbereik zijn, zonder dat u ze een voor een hoeft te importeren. Vooral bij het ontwerpen<br />
van een website met talrijke foto’s, al dan niet op basis van de ingebouwde designsjablonen, is<br />
de mediabalk een onmisbaar gereedschap om foto’s snel en eenvoudig te kunnen vervangen<br />
(door ze vanuit de mediabalk naar bestaande afbeeldingen in uw site te slepen).<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 159
U kunt de mediabalk naar behoefte als een soort tijdelijke opslagruimte voor uw foto’s gebruiken<br />
voordat u die aan uw website toevoegt, of als hulpmiddel om permanente fotoalbums<br />
te maken waaruit u later op elk gewenst moment foto’s kunt ophalen. Standaard worden de<br />
geselecteerde foto’s aan een tijdelijk album toegevoegd. Desgewenst kunt u dit album echter<br />
onder een specifieke naam opslaan, zodat u het later kunt hergebruiken. Klik hiertoe op<br />
Nieuw album. Dan kunt u telkens als u het programma start ofwel het opgeslagen album (of<br />
een van de andere opgeslagen albums) openen ofwel gewoon met een tijdelijk album werken.<br />
Aan u de keuze!<br />
Merk op dat u een onbeperkt aantal foto’s kunt importeren in de mediabalk. Desgewenst kunt<br />
u zelfs volledige mappen met foto’s importeren. Hierbij kunt u vooraf al aangeven of u de<br />
foto’s in uw project wilt insluiten of ze aan uw project wilt koppelen – nog voordat u ze op de<br />
pagina hebt geplaatst.<br />
Als u een groot aantal foto’s hebt geïmporteerd, kunt u gebruikmaken van de ingebouwde<br />
zoekfunctie om op bestandsnaam of EXIF-, IPTC- of XMP-metagegevens naar foto’s te zoeken<br />
in uw albums, zodat u elke foto snel terugvindt. <strong>Studio</strong> <strong>Webdesign</strong> biedt u zelfs de mogelijkheid<br />
XMP-metagegevens rechtstreeks te bewerken.<br />
Het huidige album in de mediabalk blijft altijd zichtbaar, ongeacht het document<br />
dat u opent.<br />
Zo geeft u de mediabalk weer:<br />
* Klik op de greep onder in de werkomgeving.<br />
Zo voegt u foto’s aan een tijdelijk album toe:<br />
1. Controleer of in de vervolgkeuzelijst rechtsboven de optie Tijdelijk album is geselecteerd<br />
en klik in het werkgebied van de mediabalk om het dialoogvenster Afbeelding invoegen te<br />
openen.<br />
2. Navigeer in het dialoogvenster naar de map waarin uw foto’s zijn opgeslagen en selecteer<br />
de foto’s die u wilt importeren. Merk op dat de foto’s standaard aan uw project worden<br />
gekoppeld.<br />
3. Klik op Openen. In de mediabalk verschijnen nu miniaturen van de geselecteerde foto’s.<br />
Het tijdelijke album en de foto’s die het bevat, worden niet opgeslagen wanneer<br />
u het programma afsluit, tenzij u dit tijdelijke album onder een specifieke naam<br />
opslaat.<br />
160 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
U kunt foto’s ook rechtstreeks naar de mediabalk slepen vanuit Windows<br />
Verkenner. Als u met de rechtermuisknop op een foto klikt en Zoeken in Verkenner<br />
kiest in het snelmenu, wordt de inhoud van de overeenkomstige map<br />
weergegeven met Windows Verkenner – ideaal om bestanden te beheren of via<br />
slepen-en-neerzetten nieuwe foto’s aan de mediabalk toe te voegen!<br />
Zo slaat u een tijdelijk album op:<br />
1. Klik op het pijltje naast de knop om het bijbehorende vervolgmenu weer te<br />
geven en kies Nieuw album.<br />
2. Geef in het dialoogvenster Nieuw album een naam op voor het nieuwe album.<br />
3. (Facultatief) U kunt de resolutie (originele resolutie of resolutie van 96 dpi) en de OLEstatus<br />
(koppelen of insluiten) van uw foto’s wijzigen voordat u ze aan uw webpagina’s toevoegt.<br />
Klik hiertoe in de overeenkomstige kolom voor een willekeurige foto en kies de<br />
gewenste optie in de vervolgkeuzelijst. Merk op dat u deze instellingen ook kunt wijzigen<br />
terwijl u een foto naar de pagina sleept.<br />
4. Klik op OK.<br />
Als u foto’s in een tijdelijk album in een bestaand album wilt opnemen, klikt u op de knop<br />
Toevoegen aan en kiest u een album in het vervolgmenu.<br />
Zo maakt u een nieuw album:<br />
1. Klik op op de mediabalk.<br />
2. Geef in het dialoogvenster Nieuw album een naam op voor het nieuwe album.<br />
3. Klik op Afbeelding toevoegen of Map toevoegen.<br />
4. Navigeer in het dialoogvenster naar de map waarin uw foto’s zijn opgeslagen en selecteer<br />
een of meer foto’s (of selecteer meteen een volledige map met foto’s), en geef aan of u de<br />
foto’s met de originele resolutie of met een resolutie van 96 dpi wilt invoegen en of u ze in<br />
uw project wilt insluiten of ze aan uw project wilt koppelen. Klik vervolgens op Openen.<br />
5. In het dialoogvenster Nieuw album verschijnt een overzicht van alle foto’s die in het album<br />
zullen worden opgenomen. Wijzig indien nodig de dpi-instellingen en/of opties voor<br />
het insluiten/koppelen van de foto’s door in de overeenkomstige kolom te klikken en de<br />
gewenste optie te kiezen in het vervolgmenu.<br />
6. Klik op OK.<br />
Zo opent u een opgeslagen album:<br />
* Selecteer het desbetreffende album in de vervolgkeuzelijst rechtsboven op de mediabalk.<br />
U kunt een opgeslagen album selecteren (zie hiervoor) en dit album vervolgens bewerken<br />
door op te klikken. (Merk op dat deze knop alleen beschikbaar is voor bestaande<br />
albums.) Via het dialoogvenster Album beheren dat daarop verschijnt, kunt u eenvoudig<br />
nieuwe foto’s of volledige mappen met foto’s aan het album toevoegen, bestaande foto’s uit het<br />
album verwijderen, de dpi-instellingen voor specifieke foto’s wijzigen, enzovoort.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 161
Zo verwijdert u een album of geeft u het een andere naam:<br />
* Klik met de rechtermuisknop op de naam van een bestaand album rechtsboven op de<br />
mediabalk en kies Album verwijderen of Albumnaam wijzigen in het snelmenu.<br />
Zo sorteert u foto’s in een album:<br />
* Klik op het pijltje naast de knop Sorteren op linksboven op de mediabalk om het bijbehorende<br />
vervolgmenu weer te geven en geef aan of u de foto’s op bestandsnaam, classificatie<br />
of datum wilt sorteren.<br />
Foto’s toevoegen aan de pagina<br />
Zo voegt u een foto toe aan uw pagina:<br />
1. Geef het tijdelijke album weer of open een opgeslagen album via de vervolgkeuzelijst<br />
rechtsboven.<br />
2. Klik op de miniatuur van de foto die u wilt toevoegen en sleep deze naar de pagina vanuit<br />
de mediabalk.<br />
Exportopties instellen voor afbeeldingen<br />
Wanneer u uw project als website exporteert, past het programma allerlei globale instellingen<br />
toe om te bepalen hoe elke afbeelding (ongeacht het type afbeelding) uiteindelijk moet worden<br />
weergegeven op het web.<br />
Aanvankelijk zijn de volgende conversieopties ingesteld voor webpublicaties:<br />
* Elke afbeelding in de site wordt als afzonderlijk bestand geëxporteerd.<br />
* Elke afbeelding die in gif-, jpeg- of png-indeling werd ingevoegd, wordt in de oorspronkelijke<br />
bestandsindeling geëxporteerd. Hierbij wordt de oorspronkelijke bestandsnaam<br />
gebruikt.<br />
* Geïmporteerde metabestanden en alle andere afbeeldingen worden als png-bestanden geëxporteerd.<br />
U kunt deze instellingen wijzigen. Voordat u dit echter doet, is het erg belangrijk dat u vertrouwd<br />
bent met de ‘logica’ die <strong>Studio</strong> <strong>Webdesign</strong> hanteert bij het publiceren van webafbeeldingen.<br />
<strong>Studio</strong> <strong>Webdesign</strong> heeft één standaardindeling waarnaar alle afbeeldingen worden<br />
geconverteerd tijdens het exporteren van de website. U kunt echter uitzonderingen definiëren<br />
op deze regel door op te geven dat bij bepaalde typen afbeeldingen de oorspronkelijke bestandsindeling<br />
behouden moet blijven. Aanvankelijk is png de standaardindeling. Hierbij zijn<br />
echter standaard enkele uitzonderingen gedefinieerd voor gif- en jpeg-afbeeldingen. Dit is de<br />
reden waarom afbeeldingen in gif- en jpeg-indeling niet worden geconverteerd, terwijl alle<br />
andere afbeeldingen in png-indeling worden omgezet.<br />
U kunt deze instellingen controleren en/of wijzigen via het dialoogvenster Eigenschappen<br />
van site (toegankelijk via het menu Bestand). Merk op dat de instellingen in dit dialoogvenster<br />
globaal worden toegepast en voor alle afbeeldingen in de site gelden. Zoals hiervoor<br />
al werd gezegd, kunt u echter uitzonderingen definiëren voor afzonderlijke afbeeldingen. U<br />
162 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
kunt hierbij op twee manieren te werk gaan:<br />
* U kunt gebruikmaken van het dialoogvenster Exportopties of de voorziening Exportopties<br />
beheren om de gewenste bestandsindeling in te stellen voor het exporteren van afzonderlijke<br />
afbeeldingen.<br />
OF<br />
U kunt bepaalde afbeeldingen vooraf naar een specifieke indeling converteren met de opdracht<br />
Extra > Naar afbeelding converteren.<br />
Aan de hand van deze globale en lokale instellingen hebt u vrijwel volledig controle over de<br />
manier waarop uw afbeeldingen uiteindelijk op het web terechtkomen! Laten we echter eerst<br />
even nagaan hoe de globale instellingen werken…<br />
Zo stelt u globale exportopties in voor webafbeeldingen:<br />
1. Kies Bestand > Eigenschappen van site en klik op de tab Afbeeldingen.<br />
2. Activeer het selectievakje Afbeeldingen die elkaar overlappen optimaliseren als u wilt<br />
dat <strong>Studio</strong> <strong>Webdesign</strong> de site analyseert en afbeeldingen die elkaar overlappen als één<br />
afbeelding exporteert (wanneer dit een kleinere bestandsgrootte oplevert). Of het zinvol is<br />
deze optie in te schakelen, is afhankelijk van uw lay-out. In plaats van deze globale instelling<br />
te gebruiken, kunt u in specifieke gevallen wellicht beter de opdracht Extra > Naar<br />
afbeelding converteren gebruiken.<br />
3. Als u wilt dat afbeeldingen in een bepaalde bestandsindeling niet worden geconverteerd<br />
(ingevoegde jpeg-afbeeldingen, gif-bestanden en/of png-bestanden), activeert u de overeenkomstige<br />
selectievakjes in het groepsvak Ingevoegde afbeeldingen. Alle bestandsindelingen<br />
die u hier selecteert, blijven behouden tijdens het exporteren van de website.<br />
4. Selecteer in het groepsvak Gegenereerde afbeeldingen de indeling waarin u afbeeldingen<br />
wilt exporteren. Dit is de indeling waarnaar alle afbeeldingen zullen worden geconverteerd<br />
tijdens het exporteren van de site, tenzij u uitzonderingen instelt.<br />
5. Activeer het selectievakje Originele bestandsnamen van afbeeldingen gebruiken als u<br />
afbeeldingen met hun oorspronkelijke bestandsnaam wilt exporteren. De afbeeldingen<br />
worden in de hoofdmap van de gepubliceerde website opgeslagen.<br />
Exportopties, een titel en alternatieve tekst instellen voor afzonderlijke<br />
afbeeldingen<br />
Met de wizard Exportopties beheren kunt u de gewenste exportopties instellen voor afzonderlijke<br />
afbeeldingen of voor objecten die automatisch naar een afbeelding worden geconverteerd<br />
tijdens het exporteren van de site, zoals geroteerde tekst. Deze lokale instellingen<br />
onderdrukken de globale instellingen die u hiervoor hebt geconfigureerd. U kunt met deze<br />
voorziening naar behoefte een of meer geselecteerde afbeeldingen, de huidige pagina of de<br />
volledige site controleren. Hierbij kunt u voor elke afbeelding de gewenste instellingen kiezen.<br />
U kunt op verschillende manieren te werk gaan:<br />
* U kunt een afbeelding in een specifieke indeling exporteren (jpg, gif of png), of de standaardinstellingen<br />
voor de site behouden. Als u voor de jpg-indeling kiest, kunt u de gewenste<br />
compressieverhouding instellen.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 163
OF<br />
* U kunt een specifieke map en bestandsnaam kiezen om de afbeelding op te slaan. Dat is<br />
bijvoorbeeld zinvol als u beschrijvende namen wilt gebruiken voor de afbeeldingen in<br />
plaats van de bestandsnamen die het programma automatisch genereert tijdens het exporteren<br />
van de site.<br />
Aanvankelijk kunt u voor alle afbeeldingen wellicht het beste de optie Standaardinstellingen<br />
voor site gebruiken selecteren. Als u de oorspronkelijke globale instellingen niet hebt<br />
gewijzigd, blijven de originele bestandsindeling en bestandsnaam behouden wanneer u gif-,<br />
jpeg- en png-afbeeldingen exporteert. Andere afbeeldingen, zoals AutoVormen en gesloten<br />
vormen, worden als png-bestanden geëxporteerd. Bekijk vervolgens een voorbeeld van uw<br />
website en ga na of u de globale instellingen moet wijzigen of een andere bestandsindeling<br />
moet instellen voor specifieke afbeeldingen.<br />
Zelfs als u de oorspronkelijke instellingen niet wijzigt, kunt u ook een titel opgeven voor<br />
een afbeelding. Deze titel wordt als scherminfo weergegeven wanneer internetgebruikers de<br />
muisaanwijzer op de afbeelding laten rusten in een browser. Daarnaast kunt u ook een alternatieve<br />
tekst (ALT-tekst) opgeven die internetgebruikers kunnen lezen terwijl een afbeelding<br />
wordt gedownload. Dergelijke ‘tags’ verschijnen in het kader voor de afbeelding terwijl de<br />
afbeelding in de browser van de gebruiker wordt geladen.<br />
Zo stelt u exportopties, een titel en/of een ALT-tekst in:<br />
1. Als u een specifieke afbeelding in uw site wilt controleren, selecteert u deze eerst en kiest u<br />
vervolgens Exportopties in het menu Opmaak (of in het snelmenu voor de afbeelding).<br />
OF<br />
Kies Extra > Exportopties instellen als u de exportopties voor alle afbeeldingen in de site<br />
wilt controleren.<br />
2. Geef aan of u alleen de geselecteerde afbeelding, alle afbeeldingen op de huidige pagina<br />
of alle afbeeldingen in uw site wilt controleren en klik op Doorgaan (als u de wizard<br />
Exportopties beheren gebruikt). Voor elke afbeelding in het ingestelde bereik wordt het<br />
dialoogvenster Exportopties weergegeven.<br />
3. In het groepsvak Afbeelding opslaan als van het dialoogvenster kunt u aangeven hoe u de<br />
desbetreffende afbeelding wilt exporteren:<br />
* Als u de afbeelding in een specifieke indeling wilt opslaan en het programma de bestandsnaam<br />
wilt laten kiezen, activeert u de optie In dit formaat opslaan... en selecteert<br />
u het keuzerondje GIF, JPEG of PNG. Als u de standaardindeling wilt gebruiken<br />
die u in het dialoogvenster Eigenschappen van site hebt ingesteld, maar het programma<br />
de afbeelding automatisch een naam wilt laten geven, activeert u de optie Standaardinstellingen<br />
voor site gebruiken Als u voor de jpg-indeling kiest, kunt u ook de compressieverhouding<br />
instellen.<br />
* Als u de afbeelding met een welbepaalde bestandsnaam wilt exporteren en deze in een<br />
specifieke map wilt opslaan, activeert u de optie Aangepaste naam en map opgeven.<br />
en klikt u op de knop Map kiezen. In het dialoogvenster dat daarop verschijnt, kunt u<br />
aangeven of u de originele bestandsnaam wilt gebruiken (selecteer de optie Standaardnaam<br />
gebruiken) of een nieuwe bestandsnaam wilt opgeven (selecteer Naam kiezen<br />
164 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
en typ een nieuwe bestandsnaam). In beide gevallen kunt u de map selecteren waarin<br />
u de geëxporteerde afbeelding wilt opslaan. Standaard wordt de bestandsindeling gebruikt<br />
die u in het dialoogvenster Eigenschappen van site hebt ingesteld. U kunt deze<br />
standaardinstelling echter negeren door een andere bestandsextensie te typen in het<br />
vak Naam kiezen, bijvoorbeeld door .gif als extensie in te voeren in plaats van .png.<br />
4. Activeer het selectievakje Deze afbeelding niet optimaliseren als de afbeelding een andere<br />
afbeelding in uw project overlapt, maar u beide afbeeldingen niet als één afbeelding<br />
wilt exporteren tijdens het publiceren van de site.<br />
5. (Facultatief) In het groepsvak onderaan kunt u desgewenst nog een methode kiezen om<br />
de resolutie van de afbeelding te optimaliseren. Merk op dat de resolutie altijd wordt herberekend<br />
als u hiervoor een andere bestandsindeling hebt gekozen.<br />
6. Klik op de tab Alt-tekst en titel en typ een korte beschrijving in het invoervak bovenaan<br />
als u een titel wilt opgeven voor de afbeelding. De tekst die u hier invoert, wordt in<br />
de meeste moderne browsers als scherminfo weergegeven wanneer internetgebruikers de<br />
muisaanwijzer boven de afbeelding laten rusten.<br />
7. Wijs op hetzelfde tabblad ook een ALT-tekst toe aan de afbeelding. Dit is de tekst die in<br />
het kader voor de afbeelding wordt weergegeven terwijl deze wordt gedownload en die<br />
hardop wordt voorgelezen door schermlezers wanneer gebruikers er de muisaanwijzer<br />
boven laten rusten. U kunt naar behoefte uw eigen tekst invoeren in het invoervak of<br />
het selectievakje Standaard ALT-tekst gebruiken activeren. In het laatstgenoemde geval<br />
wordt de afbeelding als volgt geëxporteerd:<br />
* Als het om een afbeelding gaat die louter een decoratieve functie heeft (een afbeelding<br />
die geen tekst bevat), wordt er geen ALT-tekst aan toegewezen.<br />
OF<br />
* Gaat het om een afbeelding waarop gebruikers kunnen klikken, zoals een knop met<br />
een tekstlabel (Vorige, Volgende, enzovoort), dan wordt automatisch de tekst die op de<br />
knop wordt afgebeeld als ALT-tekst geëxporteerd. Als u een titel hebt opgegeven voor<br />
de afbeelding, wordt de titeltekst als ALT-tekst gebruikt.<br />
8. Klik op OK.<br />
Tekortkomingen in afbeeldingen verhelpen<br />
Wanneer u een afbeelding selecteert in de werkomgeving, verschijnt automatisch de optiebalk<br />
voor afbeeldingen. Wellicht is het u al opgevallen dat deze balk diverse gereedschappen<br />
bevat waarmee u allerlei tekortkomingen in uw afbeeldingen kunt verhelpen. Zo kunt u een<br />
willekeurige afbeelding in uw site bijvoorbeeld snel en eenvoudig optimaliseren door rechtstreeks<br />
de helderheid en het contrast ervan te wijzigen (of door het programma automatisch<br />
de helderheidsniveaus en het contrast van de afbeelding te laten aanpassen), rode ogen te<br />
verwijderen of door allerlei andere correcties door te voeren.<br />
Om dergelijke correcties door te voeren, kunt u diverse aanpassingsfilters toepassen, zoals<br />
Niveaus, Kleurbalans, Kanaalmixer, Stof en krassen verwijderen en Kleurtoon/verzadiging/<br />
helderheid om er maar enkele te noemen. Daarnaast kunt u ook allerlei artistieke effecten,<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 165
zoals Diffuse gloed, en verschillende vervagingseffecten op uw afbeeldingen toepassen. In<br />
totaal kunt u uit maar liefst 20 aanpassingsfilters kiezen, die u rechtstreeks kunt toepassen.<br />
Desgewenst kunt u ook meerdere aanpassingsfilters tegelijk toepassen.<br />
Al deze filters zijn toegankelijk vanuit het dialoogvenster Aanpassingen doorvoeren. Dit dialoogvenster<br />
is als het ware het zenuwcentrum om aanpassingen door te voeren. Aan de hand<br />
van het voorbeeldvenster aan de rechterkant kunt u meteen het effect van uw instellingen<br />
controleren!<br />
U kunt deze aanpassingsfilters zowel toepassen op geïmporteerde afbeeldingen<br />
als op objecten die u naar een afbeelding hebt geconverteerd in het programma.<br />
Als u andere geavanceerde bewerkingen wilt uitvoeren en Foto- & Beeldbewerking van Easy<br />
Computing hebt geïnstalleerd, kunt u ook op de knop Bewerken klikken op de optiebalk om<br />
de afbeelding rechtstreeks in dit programma te laden. Daar kunt u de gewenste bewerkingen<br />
uitvoeren en de afbeelding vervolgens opslaan. Ongeacht of u de afbeelding in uw site hebt<br />
ingesloten of deze hebt gekoppeld, uw wijzigingen worden automatisch bijgewerkt in <strong>Studio</strong><br />
<strong>Webdesign</strong>.<br />
Een aanpassingsfilter toevoegen<br />
Om een bepaalde aanpassing door te voeren in een afbeelding, selecteert u gewoon de overeenkomstige<br />
optie in het vervolgmenu Filter toevoegen van het dialoogvenster Aanpassingen<br />
doorvoeren. Om u te helpen bij het kiezen van het juiste aanpassingsfilter, is het vervolgmenu<br />
in twee delen ingedeeld: filters om tekortkomingen te verhelpen (eerste helft van het menu)<br />
en filters waarmee u bepaalde effecten kunt introduceren in een afbeelding (tweede helft van<br />
het menu). Het geselecteerde filter wordt meteen aan de lijst toegevoegd, waaraan u op dezelfde<br />
manier nog meer filters kunt toevoegen. Via deze lijst kunt u elk filter naar behoefte inof<br />
uitschakelen, verwijderen of de volgorde van de filters wijzigen. Merk op dat de volgorde<br />
waarin de filters worden weergegeven in de lijst een invloed heeft op het eindresultaat. Maak<br />
166 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
u geen zorgen als de filters niet in de juiste volgorde staan. U kunt ze naar een willekeurige<br />
andere positie slepen in de lijst.<br />
Het filter dat u het laatst hebt toegevoegd, verschijnt altijd onder aan de lijst en wordt als<br />
laatste toegepast op de afbeelding (nadat de andere aanpassingen erboven zijn doorgevoerd).<br />
In het bovenstaande voorbeeld wordt eerst het filter Diffuse gloed en vervolgens het filter<br />
Niveaus op de afbeelding toegepast.<br />
Zo voegt u een aanpassingsfilter toe:<br />
1. Selecteer de afbeelding waarop u een aanpassingsfilter wilt toepassen.<br />
2. Klik op op de optiebalk.<br />
3. Klik in het dialoogvenster Aanpassingen doorvoeren op Filter toevoegen.<br />
4. Selecteer een aanpassingsfilter in het vervolgmenu. Het filter wordt aan de lijst toegevoegd.<br />
5. Afhankelijk van het filter dat u hebt geselecteerd, kunt u op twee manieren te werk gaan<br />
om de gewenste instellingen te kiezen:<br />
Gebruik de schuifregelaars (indien aanwezig) of de invoervakken om de huidige instellingen<br />
te veranderen.<br />
OF<br />
Bij meer complexe aanpassingen kunt u een dialoogvenster gebruiken om de vereiste instellingen<br />
te kiezen. Klik op de knop Geavanceerde eigenschappen om dit dialoogvenster<br />
weer te geven.<br />
Opmerking: bij sommige aanpassingsfilters kunt u geen instellingen kiezen. Dergelijke filters<br />
worden meteen toegepast als u ze selecteert.<br />
6. Klik op OK.<br />
Zo verwijdert u een aanpassingsfilter:<br />
* Selecteer het filter dat u wilt verwijderen en klik op .<br />
Aanpassingsfilters in-/uitschakelen<br />
Herhaal de bovenstaande stappen als u meerdere aanpassingsfilters wilt toepassen op de afbeelding.<br />
Net zoals u in beeldbewerkingsoftware de inhoud van een laag kunt weergeven of verbergen,<br />
kunt u een aanpassingsfilter tijdelijk zichtbaar/onzichtbaar maken door op de knop Uitschakelen<br />
te klikken.<br />
De instellingen voor een filter veranderen<br />
U kunt de instellingen voor een aanpassingsfilter op twee manieren veranderen:<br />
* Bij sommige filters worden de instellingen rechtstreeks in de lijst weergegeven. In dat geval<br />
kunt u de beschikbare besturingselementen gebruiken om de huidige instellingen te veranderen.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 167
* Sommige aanpassingen zijn van nature uit zo complex dat de instellingen ervoor in een<br />
afzonderlijk dialoogvenster moeten worden gekozen. Klik in dat geval op de knop Geavanceerde<br />
eigenschappen uiterst rechts om de instellingen voor het filter te veranderen.<br />
De volgorde van de filters wijzigen<br />
U kunt de volgorde waarin de ingestelde filters op de afbeelding worden toegepast naar behoefte<br />
aanpassen door ze naar een andere positie te slepen in de lijst. De donkere lijn geeft aan<br />
waar het filter zal worden ingevoegd als u de muisknop loslaat.<br />
Meerdere filters tegelijk toepassen<br />
U kunt meerdere aanpassingsfilters tegelijk toepassen op een afbeelding. Onthoud in dit verband<br />
dat het eindresultaat vaak sterk afhankelijk is van de volgorde waarin u de filters hebt<br />
toegevoegd.<br />
TWAIN-afbeeldingen importeren<br />
Als uw scanner of digitale camera TWAIN ondersteunt, kunt u afbeeldingen en foto’s rechtstreeks<br />
via de TWAIN-standaard importeren in <strong>Studio</strong> <strong>Webdesign</strong>. U kunt de gescande afbeelding<br />
ook eerst in tiff- of pcx-indeling opslaan voordat u die in het programma importeert.<br />
Zo importeert u een gescande afbeelding:<br />
* Kies Invoegen > Afbeelding > TWAIN > Importeren.<br />
Als u meerdere TWAIN-apparaten hebt geïnstalleerd, moet u wellicht de bron selecteren die<br />
u wilt gebruiken om een afbeelding te importeren.<br />
Zo selecteert u een andere TWAIN-bron:<br />
1. Kies Invoegen > Afbeelding > TWAIN > Bron selecteren.<br />
2. Selecteer het apparaat dat u wilt gebruiken om afbeeldingen te importeren.<br />
Animatie toevoegen<br />
<strong>Studio</strong> <strong>Webdesign</strong> biedt u de mogelijkheid allerlei fraaie animatie-effecten toe te voegen aan<br />
een webpagina: geanimeerde lichtkranten, animated GIF’s en Flash-bestanden (*.swf).<br />
Hierbij kunt u van elke animatie een voorbeeld weergeven en/of het effect naar behoefte aanpassen.<br />
Deze animaties lijken statisch nadat u ze aan een webpagina hebt toegevoegd, maar<br />
komen tot leven zodra de site is geëxporteerd en internetgebruikers deze bekijken in een<br />
webbrowser.<br />
168 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Houd er rekening mee dat animaties een negatieve invloed hebben op de<br />
downloadtijd van uw webpagina’s en op het web wellicht langzamer worden<br />
weergegeven dan op uw computer.<br />
Geanimeerde lichtkranten toevoegen<br />
Een geanimeerde lichtkrant is een handig hulpmiddel om een koptitel of slagzin horizontaal<br />
over het scherm te laten schuiven. In <strong>Studio</strong> <strong>Webdesign</strong> kunt u de gewenste achtergrondkleur<br />
instellen voor uw lichtkranten, aangeven hoeveel regels tekst ze moeten bevatten, de tekst<br />
naar behoefte opmaken, de richting instellen waarin de tekst moet bewegen, enzovoort. Desgewenst<br />
kunt u zelfs een hyperlink instellen voor de lichtkrant (zie ‘Hyperlinks en bladwijzers<br />
toevoegen’ in hoofdstuk 11). Het mooiste effect verkrijgt u door twee tekstregels met sterk<br />
contrasterende tekstkleuren te gebruiken en die in tegenovergestelde richting over het scherm<br />
te laten schuiven.<br />
Geanimeerde lichtkranten gedragen zich als statische afbeeldingen in <strong>Studio</strong> <strong>Webdesign</strong>. U<br />
kunt ze op dezelfde manier kopiëren, verplaatsen en schalen als elk ander type afbeelding.<br />
Merk op dat de lichtkranten pas worden geanimeerd wanneer u een voorbeeld weergeeft van<br />
de site of deze in een webbrowser bekijkt.<br />
Zo voegt u een geanimeerde lichtkrant toe:<br />
* Klik op Geanimeerde lichtkrant invoegen in het vervolgmenu met mediagereedschappen<br />
op de werkbalk Webobjecten.<br />
Zo bewerkt u een geanimeerde lichtkrant:<br />
* Dubbelklik op de lichtkrant om het dialoogvenster Geanimeerde lichtkrant toevoegen te<br />
openen. Wijzig de instellingen in het dialoogvenster en klik vervolgens op OK.<br />
Animated GIF’s toevoegen<br />
U kunt een willekeurige animated GIF aan uw webpagina’s toevoegen in <strong>Studio</strong> <strong>Webdesign</strong>.<br />
Dergelijke animaties lenen zich uitstekend om bepaalde thema’s te verduidelijken of uw pagina’s<br />
leven in te blazen. Animated GIF’s gedragen zich als statische afbeeldingen in het programma.<br />
U kunt ze op dezelfde manier kopiëren, verplaatsen en schalen als elk ander type<br />
afbeelding. Merk op dat ze pas worden geanimeerd wanneer u een voorbeeld weergeeft van<br />
de site of deze in een webbrowser bekijkt.<br />
Zo voegt u een animated GIF toe:<br />
1. Klik op Animated GIF invoegen in het vervolgmenu met mediagereedschappen op de<br />
werkbalk Webobjecten.<br />
2. Navigeer in het dialoogvenster naar de map waarin de animatie is opgeslagen en selecteer<br />
deze. Activeer het selectievakje Voorbeeld als u rechts in het dialoogvenster een voorbeeld<br />
wilt bekijken van het geselecteerde bestand (Windows XP).<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 169
3. Activeer de optie Afbeelding koppelen als u een koppeling naar het bronbestand wilt<br />
invoegen in plaats van de afbeelding in uw project in te sluiten. Om de afbeelding in te<br />
sluiten, selecteert u de optie Afbeelding insluiten.<br />
4. Klik op Openen.<br />
5. De muisaanwijzer krijgt de volgende vorm: . Klik op de pagina als u de standaardafmetingen<br />
wilt gebruiken om de animatie in te voegen. Sleep met de muis als u aangepaste<br />
afmetingen wilt instellen voor de animatie.<br />
Flash-bestanden gebruiken<br />
Een Flash-bestand (*.swf) is een animatie die u met de Flash Player van Macromedia kunt<br />
weergeven. (Flash is een vectorgeoriënteerd programma om webanimaties te maken.) Merk<br />
op dat u dergelijke bestanden rechtstreeks op de pagina kunt afspelen, zonder dat u een voorbeeld<br />
van de site hoeft weer te geven in een browser (of in een afzonderlijk venster in het<br />
programma). U kunt ze op dezelfde manier kopiëren, verplaatsen en schalen als elk ander<br />
type afbeelding.<br />
Bekijk de categorie Flash-banners op het tabblad Galerij als u enkele Flash-animaties in actie<br />
wilt zien. Hier vindt u een indrukwekkende collectie banners waarvoor standaard al de<br />
vereiste parameters zijn ingesteld, die u echter naar behoefte kunt aanpassen. Deze banners<br />
zijn zo ontworpen dat u het uiterlijk ervan (dat wil zeggen de tekst, afbeeldingen en gebruikte<br />
schemakleuren) eenvoudig kunt wijzigen zonder dat hiervoor enige ervaring met Flash is<br />
vereist.<br />
Zo voegt u een Flash-animatie toe:<br />
1. Klik op Flash-object invoegen in het vervolgmenu met mediagereedschappen op de<br />
werkbalk Webobjecten.<br />
2. Klik in het dialoogvenster Flash-object op Bladeren, blader naar de map waarin het<br />
Flash-bestand (*.swf) is opgeslagen dat u wilt gebruiken, selecteer het en klik op Openen.<br />
Klik op de knop Exportopties vlak daarnaast als u een andere bestandsnaam en/<br />
of bestandslocatie wilt opgeven voor het exporteren van het Flash-bestand. Schakel het<br />
selectievakje Flash-bestand insluiten in site uit als u een koppeling naar het bronbestand<br />
wilt invoegen in plaats van het bestand in uw project in te sluiten.<br />
3. (Facultatief) Klik in het groepsvak Parameters op Toevoegen (of Bewerken) om de vereiste<br />
parameters in te stellen voor de animatie.<br />
4. (Facultatief) Klik indien nodig in het groepsvak Extra bestanden op Toevoegen om de<br />
vereiste bestanden toe te voegen voor de Flash-animatie.<br />
5. (Facultatief) Kies in het groepsvak Weergaveopties de gewenste weergave-instellingen<br />
voor de animatie. Experimenteer een beetje met de diverse opties totdat u tevreden bent<br />
over de gekozen instellingen.<br />
* Starten bij laden van pagina: schakel dit selectievakje uit als u wilt voorkomen dat de<br />
animatie automatisch wordt afgespeeld bij het laden van de webpagina.<br />
* Herhalen: vink dit selectievakje aan als u wilt dat de animatie voortdurend wordt herhaald.<br />
170 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
* Transparante achtergrond: activeer deze optie als u de achtergrond van de animatie<br />
transparant wilt maken (in plaats van wit). Dat is bijvoorbeeld zinvol als u objecten<br />
tegen een gekleurde achtergrond wilt animeren!<br />
* LiveConnect inschakelen: schakel deze optie uit als u wilt voorkomen dat er verbinding<br />
wordt gemaakt met aanvullende bronnen op internet (die mogelijk vereist zijn<br />
tijdens het afspelen van de animatie).<br />
6. Klik op OK.<br />
7. De muisaanwijzer krijgt de volgende vorm: . Klik op de pagina als u de standaardafmetingen<br />
wilt gebruiken voor de animatie. Klik en sleep als u een aangepaste grootte wilt<br />
instellen voor de animatie.<br />
Beeld- en geluidsfragmenten toevoegen<br />
U kunt audio- en videobestanden aan uw webpagina’s toevoegen in <strong>Studio</strong> <strong>Webdesign</strong>. Hierbij<br />
kunt u uit verschillende standaardindelingen kiezen, zowel voor streaming als non-streaming<br />
media. Daarnaast kunt u ook YouTube-video’s in uw site insluiten.<br />
Geluid<br />
* U kunt geluidsbestanden naar behoefte als achtergrondgeluid of gekoppeld geluid in<br />
uw site integreren. In het eerste geval wordt het geluidsbestand automatisch geladen en<br />
afgespeeld wanneer de desbetreffende pagina voor het eerst wordt weergegeven in een<br />
webbrowser. In het tweede geval wordt het geluidsbestand afgespeeld na een bepaalde<br />
muisgebeurtenis (bijvoorbeeld nadat de gebruiker op een pictogram heeft geklikt, of op<br />
een object dat als hyperlink fungeert). <strong>Studio</strong> <strong>Webdesign</strong> ondersteunt de volgende bestandsindelingen<br />
voor geluidsbestanden: aiff, au, MIDI (mid en midi), mp3, RealAudio<br />
(ra en ram) en wav.<br />
Video<br />
* Gekoppelde videobestanden gedragen zich op dezelfde manier als gekoppelde geluidsbestanden.<br />
<strong>Studio</strong> <strong>Webdesign</strong> ondersteunt de volgende indelingen voor videobestanden:<br />
avi, QuickTime (mov, qt), mpeg (mpg, mpeg, mpe, mpv) en RealVideo (ram, rv). Nonstreaming<br />
bestanden worden pas afgespeeld nadat ze volledig zijn gedownload. Voor<br />
streaming media is een speciale speler vereist die de gegevens die al zijn gedownload in<br />
een buffergeheugen opslaat, zodat het bestand kan worden weergegeven nog voordat het<br />
volledig is gedownload.<br />
* U kunt in uw webpagina’s ook bestaande YouTube-video’s integreren. Merk op dat <strong>Studio</strong><br />
<strong>Webdesign</strong> uitsluitend de unieke id van de YouTube-video, en niet het eigenlijke videobestand,<br />
in uw projectbestand insluit wanneer u een YouTube-video op een pagina plaatst.<br />
Hierbij voegt het programma automatisch een link naar www.youtube.com toe aan de<br />
pagina. Zo kunt u eenvoudig content toevoegen aan uw pagina’s zonder dat u grote videobestanden<br />
hoeft te uploaden.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 171
Zowel bij achtergrondgeluiden als gekoppelde geluidsbestanden (of videobestanden) kunt u<br />
instellen of u het bronbestand in het projectbestand wilt insluiten of het aan uw site wilt<br />
koppelen. (Denk eraan dat u YouTube-video’s niet in uw project kunt insluiten.) Hoewel de<br />
bestandsgrootte van de website aanzienlijk toeneemt als u video- en geluidsbestanden insluit,<br />
wordt het bronbestand standaard in het document ingesloten. Het voordeel hiervan is dat u<br />
niet met afzonderlijke bestanden hoeft te werken. Bovendien verkleint u zo het risico dat een<br />
van de bestanden per ongeluk wordt verwijderd. <strong>Studio</strong> <strong>Webdesign</strong> neemt het exporteren en<br />
kopiëren van zowel ingesloten als niet-ingesloten bestanden voor zijn rekening tijdens het<br />
publiceren van de website.<br />
Zo voegt u achtergrondgeluid toe aan een pagina:<br />
1. Klik met de rechtermuisknop op de pagina in de werkomgeving (of op de overeenkomstige<br />
vermelding in de boomstructuur op het tabblad Site) en kies Eigenschappen van<br />
pagina in het snelmenu.<br />
2. Activeer op het tabblad Achtergrond het selectievakje Geluidsbestand gebruiken, blader<br />
in het dialoogvenster Openen naar de map waarin het geluidsbestand is opgeslagen, selecteer<br />
het en klik op Openen.<br />
3. Schakel het selectievakje Geluidsbestand in site insluiten uit als u het geluidsbestand aan<br />
uw site wilt koppelen in plaats van het in te sluiten.<br />
4. Activeer de optie Geluid herhalen als u wilt dat het geluidsbestand voortdurend opnieuw<br />
wordt afgespeeld. Als u dit selectievakje uitschakelt, wordt het bestand maar één keer afgespeeld.<br />
5. Klik desgewenst op Exportopties om een aangepaste bestandsnaam en map in te stellen<br />
voor het bestand (zie ‘Exportopties instellen voor afbeeldingen’ eerder in dit hoofdstuk).<br />
Het geluidsbestand wordt automatisch gedownload en afgespeeld wanneer internetgebruikers<br />
de desbetreffende webpagina bekijken in hun browser.<br />
De vraag is echter op welke manier u gebruikers de mogelijkheid wilt bieden een bepaald<br />
mediabestand weer te geven. In <strong>Studio</strong> <strong>Webdesign</strong> zijn voor beide soorten mediabestanden<br />
dezelfde basisopties beschikbaar:<br />
* Via een object waarvoor een hyperlink of een hotspot is ingesteld: in dit geval moet u<br />
van een bestaand object vertrekken in de site en een hyperlink instellen naar het mediabestand<br />
of een hotspot definiëren voor een afbeelding.<br />
* Via een miniatuurweergave van een video: als u voor deze methode kiest, kunnen gebruikers<br />
op een ingesloten miniatuurweergave klikken om de video af te spelen (alleen<br />
beschikbaar voor YouTube-video’s).<br />
172 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
* Via een pictogram: <strong>Studio</strong> <strong>Webdesign</strong> biedt een pictogram dat al aan het mediabestand is<br />
gekoppeld. Het enige wat u hoeft te doen, is dit pictogram op de juiste positie plaatsen op<br />
de pagina.<br />
* Via een afbeelding: als u voor deze methode kiest, moet u een externe afbeelding selecteren,<br />
die het programma vervolgens importeert en aan het mediabestand koppelt.<br />
* Inline: in dit geval is er een mediaspeler zichtbaar op de gepubliceerde webpagina (terwijl<br />
de mediaspeler in andere gevallen pas verschijnt nadat gebruikers op een hyperlink, pictogram<br />
of afbeelding hebben geklikt). Als u voor deze optie kiest, zult u op de pagina een<br />
plaatshouder aantreffen op de positie waar de mediaspeler zal verschijnen.<br />
Als u voor de eerste twee opties kiest, kunt u het mediabestand niet in uw project insluiten.<br />
Als u voor een van de andere opties kiest, kunt u het bestand naar keuze insluiten of het aan<br />
de site koppelen.<br />
Zo koppelt u een video- of geluidsbestand aan een hyperlink of hotspot:<br />
* Kies Invoegen > Hyperlink, klik op Bestand en selecteer het gewenste mediabestand als<br />
u wilt dat internetgebruikers het bestand kunnen weergeven door op een object waarvoor<br />
een hyperlink is ingesteld of op een hotspot te klikken.<br />
Zo sluit u een YouTube-video in:<br />
1. Open uw webbrowser, ga naar www.youtube.com en selecteer de YouTube-video waarnaar<br />
u een link wilt invoegen.<br />
2. Kopieer de URL van de video (of de code om deze in uw site te integreren). Deze URL bevat<br />
een alfanumerieke id (bijvoorbeeld ySnp4YXU6JQ) die de videoclip eenduidig identificeert.<br />
3. Klik op YouTube-video insluiten in het vervolgmenu met mediagereedschappen op de<br />
werkbalk Webobjecten.<br />
OF<br />
Kies Invoegen > Media in de menubalk en klik op YouTube-video in het submenu.<br />
4. Plak in het dialoogvenster YouTube-video insluiten de URL die u eerder naar het Klembord<br />
hebt gekopieerd en klik op OK.<br />
5. Plaats de aanwijzer Plakken op de positie waar u de linkerbovenhoek van de video<br />
wilt plaatsen.<br />
6. Klik met de linkermuisknop als u de standaardafmetingen wilt gebruiken voor de video.<br />
OF<br />
Klik en sleep als u een aangepaste grootte wilt instellen voor de video. Houd de Shift-toets<br />
ingedrukt terwijl u sleept als u de oorspronkelijke beeldverhouding van de video wilt behouden.<br />
Sommige websites verlangen mogelijk dat hun YouTube-video(‘s) regelmatig door een andere<br />
video worden vervangen. Het is bijvoorbeeld mogelijk dat de site in kwestie een top 10 bijhoudt<br />
die regelmatig verandert of video’s aanbiedt die aan de actualiteit zijn gekoppeld. Hoe<br />
dan ook, in <strong>Studio</strong> <strong>Webdesign</strong> kunt u video’s eenvoudig vervangen zonder dat hun oorspronkelijke<br />
positie op de pagina wordt gewijzigd.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 173
Om een bestaande YouTube-video door een andere video te vervangen, dubbelklikt u gewoon<br />
op de desbetreffende video op de pagina. Ga vervolgens naar www.youtube.com en kopieer de<br />
URL van de video waardoor u de huidige video vervangen naar het Klembord. Plak tot slot in<br />
het dialoogvenster YouTube-video insluiten de URL van de nieuwe video en klik op OK.<br />
Zo koppelt u een video- of geluidsbestand aan een pictogram, afbeelding of<br />
inline speler:<br />
1. Klik op Geluidsfragment invoegen of Beeldfragment invoegen in het vervolgmenu<br />
met mediagereedschappen op de werkbalk Webobjecten.<br />
2. Blader naar de map waarin het mediabestand is opgeslagen, selecteer het en klik op Openen.<br />
3. Selecteer de gewenste optie in het groepsvak Weergaveopties (symbool, inline of afbeelding).<br />
4. Schakel het selectievakje Geluidsbestand insluiten in site of Videobestand insluiten in<br />
site uit als u het bestand aan uw project wilt koppelen in plaats van het in te sluiten.<br />
5. Klik op OK om het dialoogvenster te sluiten. Klik vervolgens op de positie waar u het<br />
symbool, de afbeelding of de markering wilt invoegen. Sleep met de muis als u aangepaste<br />
afmetingen wilt instellen voor het element.<br />
Een Flash-fotogalerij maken<br />
De gelijktijdige verspreiding van digitale camera’s en breedbandverbindingen heeft een fantastische<br />
gelegenheid gecreëerd om hele fotocollecties op het web te publiceren. Er zijn redenen<br />
te over waarom u een online fotogalerij zou maken, maar hier zijn alvast enkele van de<br />
meest voor de hand liggende:<br />
* Wanneer u uw familiefoto’s online plaatst, kunnen ook vrienden en familieleden aan de<br />
andere kant van de wereld ze bekijken.<br />
* Foto’s op het web publiceren, is goedkoper dan er een afdruk van laten maken.<br />
* Door fotogalerijen te maken, kunt u uw fotocollecties eenvoudig overzichtelijk indelen<br />
(dierenfoto’s, vakantiefoto’s, enzovoort).<br />
In <strong>Studio</strong> <strong>Webdesign</strong> kunt u snel en eenvoudig een Flash-fotogalerij aan een willekeurige<br />
webpagina toevoegen. Hierbij kunt u uit verschillende stijlen kiezen, die elk specifieke mogelijkheden<br />
bieden om door uw fotogalerij te bladeren. U kunt bijvoorbeeld gebruikmaken<br />
van een besturingsbalk boven aan of onder aan de galerij om te waarborgen dat gebruikers<br />
eenvoudig door uw galerij kunnen navigeren. U kunt echter nog een stapje verder gaan en behalve<br />
een besturingsbalk nog een ander navigatiehulpmiddel voorzien dat gebruikers in staat<br />
stelt vlot door uw foto’s te bladeren. Zo kunt u, afhankelijk van de stijl die u kiest, ook een van<br />
de volgende besturingselementen in uw fotogalerij implementeren:<br />
* miniaturen (met of zonder weerspiegeling) die volgens een welbepaald patroon zijn geordend<br />
en als rollover fungeren;<br />
* een verticale of horizontale navigatiebalk bestaande uit miniaturen waarop gebruikers<br />
kunnen klikken om naar een specifieke foto in uw galerij te gaan;<br />
174 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
* een fotoraster waar gebruikers eenvoudig door kunnen schuiven;<br />
* foto’s die boven elkaar zijn gestapeld, gecombineerd met een horizontale navigatiebalk<br />
(zoals in de onderstaande figuur).<br />
U kunt naar keuze afzonderlijke bestanden of meteen een hele map met foto’s importeren.<br />
Desgewenst kunt u ook rechtstreeks foto’s van een digitale camera of scanner importeren. Nadat<br />
u de gewenste foto’s hebt toegevoegd, kunt u er allerlei bewerkingen op uitvoeren, zoals:<br />
* de volgorde van de foto’s wijzigen (via slepen-en-neerzetten of met behulp van de knoppen<br />
Omhoog, Omlaag, Boven en Onder);<br />
* de foto’s in stappen van 90° tegen de wijzers van de klok in roteren;<br />
* bijschriften toevoegen;<br />
* allerlei correcties doorvoeren om eventuele tekortkomingen in uw foto’s te verhelpen.<br />
U kunt foto’s automatisch roteren (van liggend naar staand) wanneer u die rechtstreeks van<br />
een digitale camera importeert, op voorwaarde natuurlijk dat deze voorziening wordt ondersteund<br />
door uw camera.<br />
Een fotogalerij maken<br />
Een fotogalerij kan op dezelfde manier worden toegevoegd als afzonderlijke afbeeldingen.<br />
Alle foto’s worden als jpg-afbeeldingen geëxporteerd, ongeacht de bestandsindeling<br />
van de oorspronkelijke foto’s en de instellingen die u hebt gekozen op het<br />
tabblad Afbeeldingen van het dialoogvenster Eigenschappen van site.<br />
Zo voegt u een fotogalerij toe aan een pagina:<br />
1. Klik op Flash-fotogalerij toevoegen in het vervolgmenu Afbeeldingen toevoegen op<br />
de werkbalk Standaardobjecten.<br />
2. Doe in het dialoogvenster Flash-fotogalerij het volgende:<br />
* Afzonderlijke bestanden toevoegen<br />
Klik op Bestanden toevoegen linksboven in het dialoogvenster, blader naar de map<br />
waarin uw foto’s zijn opgeslagen, selecteer ze en klik op Openen. (Houd de Ctrl- of<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 175
Shift-toets ingedrukt als u meerdere foto’s tegelijk wilt selecteren.) Activeer het selectievakje<br />
Voorbeeld in het dialoogvenster Openen als u een voorbeeld wilt bekijken van<br />
de afzonderlijke foto’s naarmate u ze aan de selectie toevoegt.<br />
OF<br />
* Alle foto’s in een map toevoegen<br />
Klik op Map toevoegen als u meteen een volledige map met foto’s wilt toevoegen.<br />
OF<br />
* Foto’s van een digitale camera of scanner importeren<br />
Klik op TWAIN en kies Importeren in het vervolgmenu als u foto’s van een digitale<br />
camera of scanner wilt importeren. Selecteer zo nodig eerst het bronapparaat dat u wilt<br />
gebruiken om foto’s te importeren. Gebruik hiertoe de optie Bron selecteren in het<br />
vervolgmenu.<br />
* Als u een foto weer uit de galerij wilt verwijderen, selecteert u deze en klikt u op Verwijderen.<br />
Klik op Alle verwijderen als u alle foto’s uit de galerij wilt verwijderen.<br />
In het dialoogvenster Flash-fotogalerij verschijnen nu miniaturen van de<br />
geselecteerde foto’s.<br />
U kunt een geselecteerde miniatuur naar behoefte schalen door te slepen<br />
vanuit de rechterbenedenhoek. Begin te slepen zodra de muisaanwijzer de<br />
vorm krijgt van een diagonale dubbele pijl.<br />
Grote foto’s worden automatisch verkleind (tot 800 x 600 pixels en 96 dpi) om<br />
de bestandsgrootte te beperken en de uploadtijd te verbeteren.<br />
3. (Facultatief) Selecteer een miniatuur en voer zo nodig een van de volgende bewerkingen<br />
uit:<br />
* Gebruik de knoppen Omhoog, Omlaag, Boven en Onder onder in het<br />
dialoogvenster om de volgorde van de foto’s te wijzigen. Merk op dat u de volgorde van<br />
de foto’s ook via slepen-en-neerzetten kunt wijzigen.<br />
* Klik verschillende keren op de knop Roteren als u de geselecteerde foto in stappen van<br />
90° naar rechts wilt roteren.<br />
* Klik op Bijschrift als u een bijschrift wilt toevoegen aan de foto. Typ in het dialoogvenster<br />
dat daarop verschijnt het bijschrift dat u wilt weergeven onder de foto. Merk op dat<br />
bijschriften alleen zichtbaar zijn wanneer u een voorbeeld bekijkt van de site of nadat u<br />
deze op het web hebt gepubliceerd.<br />
* Klik op de knop Aanpassingen en kies een optie in het vervolgmenu als u allerlei<br />
aanpassingen wilt doorvoeren in de foto. Met de opties in dit vervolgmenu kunt u<br />
veelvoorkomende tekortkomingen in foto’s verhelpen, zoals het contrast en/of de hel-<br />
176 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
derheid verbeteren. Selecteer Aangepast in het vervolgmenu om het dialoogvenster<br />
Aanpassingen doorvoeren te openen, van waaruit u nog meer aanpassingsfilters kunt<br />
toepassen op de foto.<br />
4. Activeer het selectievakje Afbeeldingen insluiten als u de geselecteerde foto’s in uw webproject<br />
wilt insluiten. Standaard wordt alleen een verwijzing naar de bronbestanden in het<br />
project ingevoegd.<br />
5. Klik op Volgende >.<br />
6. Selecteer in het vak Stijl voor galerij boven in het dialoogvenster een stijl voor uw fotogalerij.<br />
Elke stijl biedt andere mogelijkheden om door de foto’s te navigeren. <strong>Pro</strong>beer<br />
verschillende stijlen uit totdat u de stijl hebt gevonden die aan uw verwachtingen beantwoordt.<br />
Aan de hand van het voorbeeldvenster onderaan kunt u eenvoudig het effect<br />
van elke stijl controleren. Let erop dat in elke stijl een besturingsbalk is geïmplementeerd<br />
waarmee gebruikers later eenvoudig door uw fotogalerij kunnen navigeren.<br />
De laatste drie opties op de besturingsbalk zijn alleen beschikbaar wanneer er achtergrondmuziek<br />
is ingesteld.<br />
7. (Facultatief) Gebruik het vak Instellingen aan de rechterkant om de gewenste opties in te<br />
stellen voor de geselecteerde stijl (achtergrondmuziek, kleur van bijschriften, enzovoort).<br />
Sommige opties zijn alleen voor specifieke stijlen beschikbaar, zoals de mogelijkheid rollovers<br />
in te schakelen voor de miniaturen, het aantal foto’s per stapel in te stellen, enzovoort.<br />
8. Klik op Voltooien.<br />
9. Klik op de pagina op de positie waar u de fotogalerij wilt invoegen als u de standaardafmetingen<br />
wilt gebruiken voor de galerij. Als u een aangepaste grootte wilt instellen voor<br />
de galerij, klikt en sleept u met de muis totdat de fotogalerij de gewenste grootte heeft.<br />
Een fotogalerij bewerken<br />
U kunt een fotogalerij naar behoefte bewerken nadat u deze aan de pagina hebt toegevoegd.<br />
Zo kunt u indien nodig bijvoorbeeld foto’s toevoegen of verwijderen, er een bijschrift aan toevoegen<br />
of allerlei aanpassingen doorvoeren om veelvoorkomende tekortkomingen te verhelpen.<br />
Desgewenst kunt u achteraf ook een andere galerijstijl instellen, de achtergrondmuziek<br />
of de kleur van de bijschriften wijzigen, enzovoort.<br />
Zo bewerkt u een fotogalerij:<br />
1. Selecteer de fotogalerij die u wilt bewerken.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 177
2. Dubbelklik op de galerij of klik op Galerij bewerken op de optiebalk. (U kunt ook met de<br />
rechtermuisknop op de galerij klikken en Fotogalerij bewerken kiezen in het snelmenu.)<br />
3. Wijzig de huidige instellingen in het dialoogvenster Flash-fotogalerij.<br />
Merk op dat u een fotogalerij naar behoefte kunt schalen nadat u deze aan de pagina hebt toegevoegd.<br />
Hiertoe selecteert u de galerij en versleept u een van de grepen in de hoeken van het<br />
selectiekader. Houd de Ctrl-toets ingedrukt tijdens het slepen als u de galerij proportioneel<br />
wilt schalen.<br />
Externe afbeeldingen koppelen<br />
U kunt ook een koppeling invoegen naar een afbeelding op internet. Houd u in dat geval aan<br />
het auteursrecht! Gebruik altijd afbeeldingen van een betrouwbare bron als u gebruikmaakt<br />
van deze voorziening. U kunt vanzelfsprekend ook koppelingen invoegen naar afbeeldingen<br />
op de website van een vriend of collega, waar dergelijke auteursrechten wellicht niet van toepassing<br />
zijn. Hoe dan ook, door koppelingen naar externe afbeeldingen in te voegen, kunt<br />
u snel de visuele uitstraling van uw website verbeteren. Zo kunt u zich volledig op andere<br />
belangrijke designaspecten concentreren, zoals de inhoud van uw pagina’s.<br />
Zo voegt u een koppeling naar een externe afbeelding toe:<br />
1. Kies Invoegen > Afbeelding > Koppeling naar extern bestand.<br />
2. Geef in het dialoogvenster de URL van de afbeelding op.<br />
3. Klik op OK.<br />
4. De muisaanwijzer krijgt de volgende vorm: . De handeling die u nu uitvoert, bepaalt de<br />
aanvankelijke grootte en positie van de afbeelding.<br />
5. Klik op de positie waar u de koppeling wilt invoegen als u de standaardafmetingen wilt<br />
gebruiken voor de afbeelding. Sleep met de muis als u aangepaste afmetingen wilt instellen<br />
voor de afbeelding.<br />
178 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
10 Met kleuren, verlopen<br />
en transparantie<br />
werken<br />
Effen kleuren instellen<br />
In <strong>Studio</strong> <strong>Webdesign</strong> kunt u voor verschillende objecttypen effen kleuren instellen:<br />
* U kunt een effen kleur instellen voor de rand (contour) van een object of als vulkleur van<br />
het object. Zoals u wellicht al vermoedt, hebben AutoVormen en gesloten vormen (zie<br />
‘Vormen tekenen en bewerken’ in hoofdstuk 8) zowel lijn- als vuleigenschappen, terwijl<br />
rechte lijnen en lijnen die u met de vrije hand tekent alleen lijneigenschappen hebben.<br />
* U kunt ook een kleur instellen voor de tekst in tekstobjecten. Bij tekstframes en tabelcellen<br />
kunt u voor de achtergrond een andere kleur instellen dan voor de tekst.<br />
U kunt naar behoefte het tabblad Kleur of Stalen in de studio of een dialoogvenster gebruiken<br />
om effen kleuren in te stellen voor een object.<br />
Zo stelt u een effen kleur in via het tabblad Kleur:<br />
1. Selecteer het object of tekstfragment waarvoor u een kleur wilt instellen.<br />
2. Klik op de tab Kleur in de studio en selecteer een kleurruimte in de vervolgkeuzelijst<br />
rechtsboven (RGB, CMYK of HSL).<br />
3. Klik op Vulkleur, Lijnkleur of Tekst boven aan het tabblad om aan te geven<br />
waarvoor u precies een effen kleur wilt instellen. Uit de kleur van de lijn onder de knop<br />
kunt u afleiden welke kleur momenteel is ingesteld voor dit onderdeel van het geselecteerde<br />
object.<br />
4. Selecteer een kleur in het kleurenspectrum onder aan het tabblad of gebruik de schuifregelaars<br />
om de gewenste kleur in te stellen.<br />
Wanneer RGB als kleurruimte is ingesteld, kunt u hexadecimale waarden gebruiken<br />
door de optie Hexadecimale waarden te activeren in het vervolgmenu<br />
voor het tabblad (toegankelijk via de knop ).<br />
Zo stelt u een effen kleur in via het tabblad Stalen:<br />
1. Selecteer het object of tekstfragment waarvoor u een kleur wilt instellen.<br />
2. Klik op de tab Stalen in de studio.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 179
3. Klik op de knop Vulkleur, Lijnkleur of Tekst boven aan het tabblad om aan te<br />
geven waarvoor u precies een effen kleur wilt instellen.<br />
4. Selecteer een kleurstaal in het huidige palet (een palet dat naast veelgebruikte<br />
kleuren alle kleuren bevat die u al hebt gebruikt in de site), of klik op het pijltje naast de<br />
knop Palet om het bijbehorende vervolgmenu te openen, selecteer een van de vooraf gedefinieerde<br />
kleurenpaletten en klik vervolgens op de gewenste kleurstaal.<br />
U kunt ook de opdracht Vulkleur/verloop in het menu Opmaak gebruiken in plaats van de<br />
bovengenoemde tabbladen om een effen kleur in te stellen voor objecten.<br />
Zo wijzigt u de schakering/tint (helderheid) van een effen kleur:<br />
1. Selecteer het object en klik op de knop Vulkleur, Lijnkleur of Tekst boven aan het tabblad<br />
Kleur.<br />
2. Selecteer in de vervolgkeuzelijst rechtsboven de optie Tint.<br />
3. Sleep de schuifregelaar Schakering/tint naar links of naar rechts om de huidige kleur<br />
respectievelijk donkerder of lichter te maken (de standaardwaarde is 0%). U kunt ook<br />
rechtstreeks een percentage instellen via het kringveld naast de schuifregelaar. (Stel 0 in<br />
als percentage als u de standaardwaarde wilt herstellen.)<br />
Merk op dat u ook het tabblad Stalen kunt gebruiken om de schakering/tint van een kleur te<br />
wijzigen. Typ hiertoe rechtstreeks een percentage in het invoervak Tint of gebruik de<br />
bijbehorende schuifregelaar om het gewenste percentage in te stellen.<br />
Kleurenschema’s gebruiken<br />
In <strong>Studio</strong> <strong>Webdesign</strong> heeft elke website zijn eigen kleurenschema, dat u kunt instellen en bewerken<br />
via de opdracht Schema’s beheren in het menu Extra. Elk schema heeft een specifieke<br />
naam en bestaat uit vijf complementaire basiskleuren die u voor een willekeurig designelement<br />
kunt instellen. U kunt deze vijf schemakleuren vergelijken met een systeem waarbij op<br />
basis van getallen wordt geverfd (zie hierna). Merk op dat elk schema ook enkele additieve<br />
kleuren bevat, die de kleur bepalen waarin hyperlinks (standaard hypertekst, gevolgde en<br />
actieve hyperlinks) en de achtergrond van de pagina worden weergegeven. Als u een ander<br />
kleurenschema instelt, worden alle elementen die gebruikmaken van schemakleuren meteen<br />
bijgewerkt!<br />
180 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
In <strong>Studio</strong> <strong>Webdesign</strong> vertonen kleurenschema’s veel<br />
overeenkomsten met een systeem waarbij op basis<br />
van getallen wordt geverfd. Hierbij worden verschillende<br />
gebieden in de lay-out met getallen gecodeerd.<br />
Aan elk gebied wordt (op basis van deze getallen) een<br />
specifieke kleur toegewezen (zie de bloem in de figuur,<br />
waarvoor het kleurenschema ‘Kinderkamer’ is<br />
ingesteld). Door de ‘verfpotten,’ die van 1 tot en met 5<br />
zijn genummerd, met verschillende kleuren te vullen,<br />
zonder de getallen in de bloem te wijzigen, kunt u het<br />
uiterlijk van de bloem aanzienlijk beïnvloeden.<br />
In de bovenstaande figuur ziet u het<br />
effect wanneer u het schema ’Kinderkamer’<br />
door het schema ‘Atlantis’<br />
vervangt. Dit schema kunt u vervolgens<br />
weer door een ander kleurenschema<br />
vervangen, enzovoort.<br />
In <strong>Studio</strong> <strong>Webdesign</strong> heten deze verfpotten ‘Schemakleur 1,’ ‘Schemakleur 2,’ enzovoort. Als<br />
u schemakleur 1 toepast op een object, interpreteert het programma dit als ‘Plaats de kleur uit<br />
verfpot nummer 1 hier.’<br />
Onthoud dat u maximaal één kleurenschema kunt instellen voor een website. Op het tabblad<br />
Stalen in de studio worden de basiskleuren van het huidige kleurenschema weergegeven. U<br />
kunt echter gemakkelijk een ander schema instellen, de kleuren in een bepaald schema wijzigen,<br />
schema’s op een willekeurige site toepassen of aangepaste kleurenschema’s definiëren.<br />
Merk op dat kleurenschema’s altijd globaal worden opgeslagen, zodat ze in alle sites beschikbaar<br />
zijn.<br />
Zo stelt u een ander kleurenschema in:<br />
1. Geef het tabblad Stalen weer. Merk op dat linksonder op het tabblad de vijf basiskleuren<br />
van het huidige kleurenschema worden weergegeven (in de vorm van stalen die van 1 tot<br />
en met 5 zijn genummerd). Daarnaast worden nog enkele andere stalen weergegeven.<br />
Deze stalen duiden de kleuren aan die voor hyperlinks, gevolgde hyperlinks, actieve hyperlinks,<br />
rollover-hyperlinks, de achtergrond van de pagina en de paginakleur worden<br />
gebruikt.<br />
2. Klik op een leeg gedeelte van de pagina of het plakbord om alle selecties op te heffen en<br />
klik vervolgens op de knop<br />
op de optiebalk (of kies Extra > Schema’s beheren<br />
in de menubalk). Hiermee opent u het dialoogvenster Schema’s beheren, waarin alle<br />
kleurenschema’s worden weergegeven waaruit u kunt kiezen voor uw website. Denk eraan<br />
dat de vijf ‘verfpotten’ in elk kleurenschema andere kleuren bevatten.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 181
3. Selecteer het gewenste kleurenschema in de lijst en klik op OK. Alle gebieden in de website<br />
waaraan een van de vijf schemakleuren uit het schema is toegewezen, worden door de<br />
overeenkomstige kleur uit het nieuwe schema vervangen.<br />
Merk op dat het huidige kleurenschema samen met het projectbestand wordt opgeslagen<br />
wanneer u de website opslaat.<br />
Additieve kleuren<br />
Behalve de vijf basiskleuren bevat elk kleurenschema ook zes additieve kleuren.<br />
* De kleur voor hyperlinks (met de letter H aangeduid op het tabblad Stalen) bepaalt de<br />
kleur van hypertekst voordat er op wordt geklikt.<br />
* De kleur voor gevolgde hyperlinks (met de letter F aangeduid) bepaalt de kleur van hypertekst<br />
nadat de gebruiker op de hyperlink heeft geklikt.<br />
* De kleur voor actieve hyperlinks (met de letter A aangeduid) bepaalt de kleur van hypertekst<br />
nadat de gebruiker op de hyperlink heeft geklikt maar voordat de pagina waarnaar<br />
de hyperlink verwijst wordt weergegeven.<br />
* De kleur voor rollover-hyperlinks (met de letter R aangeduid) bepaalt de kleur van hypertekst<br />
wanneer de gebruiker de muisaanwijzer boven de hyperlink laat rusten.<br />
* De achtergrondkleur (met de letter B aangeduid) bepaalt de kleur van het gebied dat<br />
rond uw webpagina’s verschijnt wanneer de gebruiker het formaat van zijn browservenster<br />
zo wijzigt dat het venster groter is dan de afmetingen van uw pagina’s. Dit kan een effen<br />
kleur, maar net zo goed een afbeelding zijn.<br />
* De paginakleur (met de letter O aangeduid) bepaalt de achtergrondkleur van de pagina<br />
zelf. Als u deze achtergrond transparant maakt, is de onderliggende achtergrond zichtbaar<br />
doorheen de pagina, waardoor de grenzen van de pagina onzichtbaar worden (zonder dat<br />
de inhoud van de pagina echter de ingestelde pagina-afmetingen overschrijdt).<br />
* Als u een achtergrondafbeelding met transparante gebieden gebruikt, is de achtergrondkleur<br />
van de pagina zelf zichtbaar in de transparante gebieden. In het andere geval wordt<br />
de achtergrondkleur van de pagina aan het zicht onttrokken door de achtergrondafbeelding.<br />
De additieve kleuren die via het dialoogvenster Schema’s beheren zijn ingesteld, zijn normaal<br />
gesproken op de volledige site van toepassing. Er zijn echter enkele belangrijke uitzonderingen<br />
op deze regel:<br />
* U kunt een specifieke kleur instellen voor afzonderlijke hyperlinks. Schakel daartoe het<br />
selectievakje Hyperlinkkleuren uit schema gebruiken uit in het dialoogvenster Hyperlinks.<br />
Dan is de kleur van het onderliggende object zichtbaar door de (gevolgde) hyperlink.<br />
* Via het tabblad Achtergrond in het eigenschappenvenster van een stramienpagina kunt<br />
u de achtergrondkleur/-afbeelding en paginakleur die u via het dialoogvenster Schema’s<br />
beheren hebt ingesteld negeren voor een specifieke stramienpagina. Merk op dat dit een<br />
invloed heeft op alle pagina’s die op deze stramienpagina zijn gebaseerd. Voor pagina’s<br />
die niet op een stramienpagina zijn gebaseerd, worden standaard de instellingen gebruikt<br />
die in het dialoogvenster Schema’s beheren zijn ingesteld. U kunt deze instellingen echter<br />
negeren door de optie Instellingen van schema gebruiken uit te schakelen en een nieuwe<br />
182 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
achtergrondkleur/-afbeelding en/of paginakleur in te stellen op het tabblad Achtergrond<br />
van het dialoogvenster Eigenschappen van pagina.<br />
Schemakleuren toepassen op objecten<br />
Misschien vraagt u zich af hoe u een kleurenschema op nieuwe objecten toepast als u nieuwe<br />
elementen toevoegt aan een website die op een sjabloon is gebaseerd of een volledig nieuwe<br />
site maakt? Hoewel u eerst wat tijd moet uittrekken om uit te zoeken welke kleurencombinaties<br />
het beste resultaat opleveren, is de procedure erg eenvoudig. Het enige wat u hoeft te<br />
doen, is een van de vijf schemakleuren als lijn- en/of vulkleur instellen voor het object.<br />
Zo wijst u een schemakleur toe aan een object:<br />
1. Selecteer het object en klik op Vulkleur, Lijnkleur of Tekst boven aan het tabblad<br />
Stalen, afhankelijk van het effect dat u wilt verkrijgen.<br />
2. Klik onder aan het tabblad Stalen op de schemakleur die u als vulkleur, lijnkleur of tekstkleur<br />
wilt instellen. (U kunt de staal ook naar het object slepen vanaf het tabblad.)<br />
Wanneer u een schemakleur hebt ingesteld als vulkleur voor een object, wordt de overeenkomstige<br />
kleurstaal automatisch gemarkeerd als u het object selecteert.<br />
Nieuwe kleurenschema’s definiëren en bestaande schema’s bewerken<br />
Als u verschillende kleurenschema’s hebt geprobeerd, maar geen enkel schema kunt vinden<br />
dat aan uw verwachtingen beantwoordt, kunt u altijd een van de kleuren in een bestaand<br />
schema wijzigen en het schema vervolgens bijwerken of een volledig nieuw schema definiëren.<br />
Zo bewerkt u een kleurenschema:<br />
1. Klik op een leeg gedeelte van de pagina of het plakbord om alle selecties op te heffen en<br />
klik vervolgens op de knop<br />
op de optiebalk (of kies Extra > Schema’s beheren<br />
in de menubalk). Hiermee opent u het dialoogvenster Schema’s beheren.<br />
2. Selecteer in de keuzelijst aan de linkerkant het kleurenschema waarop u het nieuwe schema<br />
wilt baseren en activeer het tabblad Bewerken.<br />
3. Let erop dat voor elk van de vijf basiskleuren (en ook voor de additieve kleuren) een afzonderlijke<br />
vervolgkeuzelijst beschikbaar is waarin u de gewenste kleur kunt selecteren.<br />
Als u een van deze schemakleuren of additieve kleuren wilt wijzigen, klikt u gewoon op<br />
de kleurstaal naast de overeenkomstige optie en selecteert u een nieuwe kleur in het palet.<br />
Klik op Meer kleuren om de kleurenkiezer weer te geven, waarin u een aangepaste kleur<br />
kunt definiëren.<br />
4. Als u een achtergrondafbeelding wilt gebruiken voor het gebied dat eventueel rond uw<br />
webpagina’s wordt weergegeven in een browser, activeert u het selectievakje Afbeelding<br />
gebruiken, klikt u op Bladeren en selecteert u de gewenste afbeelding. Klik vervolgens op<br />
Exportopties om de gewenste instellingen te kiezen voor het exporteren van de achtergrondafbeelding.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 183
5. Als u een specifieke paginakleur wilt instellen, klikt u op de kleurstaal naast de optie Paginakleur<br />
en kiest u de gewenste achtergrondkleur voor de pagina in het palet.<br />
6. Klik op Schema opslaan als u het gewijzigde schema wilt opslaan. Behoud de oorspronkelijke<br />
naam als u het bestaande schema wilt overschrijven.<br />
7. Klik tot slot op OK om het schema op de huidige website toe te passen.<br />
Om een nieuw kleurenschema te definiëren, gaat u op dezelfde manier te werk. Alleen moet<br />
u in dat geval in stap 6 een nieuwe naam opgeven in plaats van het bestaande schema te overschrijven.<br />
Met kleur- en bitmapverlopen werken<br />
Kleurverlopen zijn kleurengradaties of kleurenspectra waarin kleuren geleidelijk in elkaar<br />
overgaan tussen twee of meer basiskleuren. Een kleurverloop heeft een pad met nodes die<br />
de oorsprong aangeven van elke basiskleur. U kunt dit pad naar behoefte bewerken. Bij een<br />
bitmapverloop wordt gebruikgemaakt van een bitmap (vaak een materiaal, patroon of achtergrondafbeelding)<br />
om een object te vullen.<br />
Lineair Ovaal Conisch Bitmap<br />
Via het tabblad Stalen kunt u snel en eenvoudig een van de talrijke vooraf gedefinieerde kleuren<br />
bitmapverlopen toepassen op vormen, tekstframes en tabelcellen. Merk op dat u ook een<br />
kleur- of bitmapverloop kunt instellen voor artistieke tekst en tekst in aangepaste frames of<br />
tabellen (maar niet voor tekst in HTML-frames of HTML-tabellen). Met het verloopgereedschap<br />
(of de opdracht Opmaak > Vulkleur/verloop) kunt u het pad van een verloop naar<br />
behoefte bewerken en zo allerlei unieke effecten creëren (raadpleeg het Help-bestand van het<br />
programma voor meer informatie).<br />
Het toepassen van verschillende transparantie-effecten (via het tabblad Transparantie)<br />
heeft geen invloed op het verloop dat voor een object is ingesteld,<br />
maar kan wel het uiterlijk ervan beïnvloeden.<br />
Een kleur- of bitmapverloop toepassen<br />
De eenvoudigste manier om een kleur- of bitmapverloop toe te passen op een object, is via<br />
het tabblad Stalen in de studio. U kunt hiervoor echter ook het verloopgereedschap of het<br />
dialoogvenster Vulkleur/verloop gebruiken (hierover leest u meer in het Help-bestand van<br />
het programma).<br />
184 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Zo stelt u een kleur- of bitmapverloop in via het tabblad Stalen:<br />
1. Klik op de tab Stalen en controleer of de optie Vulkleur is geactiveerd.<br />
Opmerking: uit de kleur van de lijn onder de knop kunt u afleiden welke kleur<br />
momenteel is ingesteld voor dit onderdeel van het geselecteerde object (of voor<br />
de geselecteerde node).<br />
2. Als u een kleurverloop wilt instellen, klikt u op de knop Verloop en kiest u Lineair,<br />
Ovaal of Conisch in het vervolgmenu.<br />
OF<br />
Als u een bitmapverloop wilt instellen, klikt u op de knop Bitmap en kiest u een categorie<br />
verlopen in het vervolgmenu.<br />
3. Klik in de galerie op de staal van het verloop dat u wilt toepassen.<br />
OF<br />
Sleep een staal vanuit de galerie naar het object en laat de muisknop los.<br />
4. Pas via de schuifregelaar Tint onder aan het tabblad eventueel de schakering/tint van het<br />
verloop aan, of typ rechtstreeks een waarde in het bijbehorende invoervak.<br />
Met transparantie werken<br />
Transparantie-effecten lenen zich uitstekend om hoge lichten, schaduw, schakeringen en ‘gerenderd’<br />
realisme te simuleren. Ze kunnen het verschil uitmaken tussen alledaagse tweedimensionale<br />
illustraties en afbeeldingen met diepte en ‘punch.’<br />
Transparantie lijkt misschien enigszins ingewikkeld omdat u het per definitie niet kunt ‘zien’<br />
zoals u de vulkleur van een object ziet. Transparantie is echter altijd aanwezig in <strong>Studio</strong> <strong>Webdesign</strong>.<br />
Elk nieuw object heeft een transparantie-eigenschap. Alleen is de standaardinstelling<br />
toevallig ‘Geen’ (ondoorzichtig).<br />
Transparantie-effecten lijken sterk op verlopen, alleen maken ze gebruik van ‘toverinkt’ in<br />
plaats van kleuren. Hoe transparanter een bepaald gedeelte van een object is, hoe beter het<br />
onderliggende object zichtbaar is in dit gebied. Net zoals een kleurverloop van donker naar<br />
licht kan variëren, kan een transparantie-effect van meer naar minder doorzichtig variëren,<br />
zoals in de volgende figuur:<br />
In <strong>Studio</strong> <strong>Webdesign</strong> werken transparantie-effecten ongeveer op dezelfde manier als verlopen<br />
in grijswaarden.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 185
* Net als verlopen kunnen transparantie-effecten rechtstreeks vanuit de studio worden toegepast<br />
– in dit geval via het tabblad Transparantie. (Transparantie is ook een optie voor het<br />
filtereffect 3D-patroon.)<br />
* In de galerie op het tabblad Transparantie worden miniaturen in grijstinten weergegeven<br />
van de beschikbare transparantie-effecten, waarbij de lichtere delen transparanter zijn dan<br />
de donkere delen. Om een van deze effecten toe te passen, klikt u gewoon op de overeenkomstige<br />
miniatuur of sleept u deze naar het object vanuit de galerie.<br />
* De meeste transparantie-effecten hebben een pad dat u kunt bewerken (in dit geval met<br />
het Transparantiegereedschap).<br />
De beschikbare effecten op het tabblad Transparantie zijn een voor een vergelijkbaar met de<br />
verlopen met dezelfde naam:<br />
* Bij transparantie-effecten op basis van een effen kleur wordt de transparantie gelijkmatig<br />
gespreid over het object.<br />
* Lineaire, radiale en conische transparantie-effecten zijn eenvoudige verlopen die geleidelijk<br />
van doorzichtig naar ondoorzichtig overgaan.<br />
* In de bitmapgalerie vindt u diverse texturen die op de bitmaps op het tabblad Stalen zijn<br />
gebaseerd.<br />
Via het tabblad Transparantie in de studio kunt u snel en eenvoudig allerlei transparantieeffecten<br />
die op een kleur- of bitmapverloop zijn gebaseerd toepassen op vormen, tekstframes<br />
en tabelcellen. Merk op dat u ook transparantie-effecten kunt toepassen op artistieke tekst<br />
of tekst in aangepaste frames en tabellen (maar niet op tekst in HTML-frames of HTMLtabellen).<br />
U kunt ook gebruikmaken van het transparantiegereedschap in de gereedschapset<br />
(of de opdracht Opmaak > Transparantie) om transparantie toe te passen op een object. In<br />
dat geval kunt u het pad van een transparantie-effect bewerken en zo allerlei unieke effecten<br />
creëren.<br />
Zo past u een transparantie-effect toe via het tabblad Transparantie:<br />
1. Selecteer het object waarvoor u een transparantie-effect wilt instellen en geef het tabblad<br />
Transparantie weer in de studio.<br />
2. Klik op de knop Effen kleur boven aan het tabblad en klik vervolgens op een miniatuur<br />
in de galerie als u een transparantie-effect dat op een effen kleur is gebaseerd op het<br />
object wilt toepassen. Merk op dat de helderheid van de miniaturen overeenkomt met de<br />
transparantie die uiteindelijk op het object wordt toegepast. Hoe lichter de kleur van een<br />
miniatuur, hoe transparanter het object waarop u het effect toepast.<br />
OF<br />
Klik op de knop Verloop en selecteer een miniatuur in de galerie als u een transparantie-effect<br />
dat op een verloop is gebaseerd op het object wilt toepassen.<br />
OF<br />
Klik op Bitmap om een transparantie-effect dat op een bitmap is gebaseerd op het<br />
object toe te passen.<br />
U kunt een miniatuur ook rechtstreeks naar een object slepen vanuit de galerie als u een<br />
transparantie-effect wilt instellen voor dit object.<br />
186 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
11 Hyperlinks en<br />
Interactiviteit<br />
toevoegen<br />
Hyperlinks en bladwijzers toevoegen<br />
Wanneer u een hyperlink instelt voor een object (bijvoorbeeld een rechthoek, geselecteerde<br />
tekst of een afbeelding), kunnen internetgebruikers door op dat object te klikken een bepaalde<br />
gebeurtenis uitlokken.<br />
Zorgvuldig gekozen hyperlinks zijn een belangrijk onderdeel van de sitestructuur. Ze waarborgen<br />
dat gebruikers vlot door uw site kunnen navigeren en zijn een belangrijk hulpmiddel<br />
om uw webpagina’s op een logische manier aan elkaar te relateren. (Denk er echter aan dat<br />
ook het gebruik van thema-afbeeldingen voor navigatie-elementen zoals navigatiebalken en<br />
Vorige/Volgende-knoppen heel wat voordelen biedt! Door thema-afbeeldingen te gebruiken<br />
voor dergelijke navigatie-elementen, bespaart u vaak zeer veel tijd.)<br />
U kunt hyperlinks en bladwijzers in uw site eenvoudig beheren vanuit Sitebeheer,<br />
dat toegankelijk is via de knop in de statusbalk of de menuopdracht<br />
Extra > Sitebeheer > Hyperlinks beheren in de menubalk.<br />
Zo voegt u een hyperlink toe:<br />
1. Activeer het selectiegereedschap en selecteer het object of de tekst waarvoor u een hyperlink<br />
wilt instellen.<br />
Bij tekstobjecten kunt u ook gewoon in de tekst klikken om de invoegpositie<br />
in de tekst te plaatsen. Als u midden in een woord of vlak ervoor of erna klikt,<br />
wordt de hyperlink automatisch voor het volledige woord ingesteld. Als zich<br />
aan weerszijden van de huidige invoegpositie een spatie bevindt, voegt het<br />
programma nuttige informatie in (zoals de naam van de pagina die als doel is<br />
ingesteld voor de hyperlink).<br />
2. Klik op Hyperlink invoegen in de gereedschapset. Het dialoogvenster Hyperlinks verschijnt.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 187
3. Selecteer links in het dialoogvenster het type hyperlink dat u wilt invoegen. Geef vervolgens<br />
aan de rechterkant de vereiste gegevens op voor de hyperlink, zoals de naam (of<br />
het webadres) van de pagina waarheen u een hyperlink wilt instellen, of het e-mailadres,<br />
navigatie-element, intelligente object, enzovoort dat u als doel wilt instellen voor de hyperlink.<br />
4. Naargelang het type hyperlink dat u hebt geselecteerd, kunt u behalve het doel nog allerlei<br />
andere opties instellen.<br />
5. In het groepsvak onder in het dialoogvenster kunt u het doelvenster of -frame instellen<br />
waarin u het doel van de hyperlink wilt weergeven (raadpleeg het Help-bestand voor meer<br />
informatie).<br />
6. Stel indien nodig de overige eigenschappen van de hyperlink in, zoals een sneltoets of de<br />
scherminfo die u wilt weergeven wanneer gebruikers de muisaanwijzer boven de hyperlink<br />
laten rusten.<br />
Opmerking: woorden die als hyperlink fungeren, worden normaal gesproken onderstreept<br />
en in de kleur weergegeven die als hyperlinkkleur is ingesteld in het kleurenschema voor<br />
de site (zie ‘Kleurenschema’s’ gebruiken in hoofdstuk 10).<br />
7. Klik op OK.<br />
Zo bewerkt of verwijdert u een hyperlink:<br />
1. Selecteer het object waarvoor de hyperlink is ingesteld met het selectiegereedschap, of klik<br />
in de tekst die als hyperlink fungeert met het gereedschap om de invoegpositie in de tekst<br />
te plaatsen. (U hoeft de hypertekst niet volledig te selecteren door er over te slepen.)<br />
2. Klik op Hyperlink invoegen in de gereedschapset.<br />
Het dialoogvenster Hyperlinks verschijnt, waarin standaard al het huidige doel van de hyperlink<br />
wordt weergegeven. Als het om een hyperlink voor tekst gaat, wordt de volledige hypertekst<br />
gemarkeerd op de pagina.<br />
* Selecteer een ander type hyperlink, stel een ander doel in voor de hyperlink en/of wijzig<br />
de overige instellingen voor de hyperlink als u deze wilt bewerken.<br />
* Klik op Geen hyperlink in de boomstructuur aan de linkerkant als u de hyperlink wilt<br />
verwijderen.<br />
Zo beheert u bestaande hyperlinks in uw site:<br />
* Kies Extra > Sitebeheer >Hyperlinks beheren. Vanuit dit dialoogvenster kunt u de instellingen<br />
voor een hyperlink wijzigen, specifieke hyperlinks uit uw site verwijderen of rechtstreeks<br />
naar het object gaan waarvoor een hyperlink is ingesteld in de werkomgeving.<br />
Een bladwijzer invoegen<br />
Een bladwijzer is een specifieke locatie op een webpagina die als doel kan fungeren voor een<br />
hyperlink. Bladwijzers zijn niet zichtbaar voor internetgebruikers. Doorgaans worden ze gebruikt<br />
om een bepaald punt te markeren in tekst (bijvoorbeeld het begin van een nieuwe rubriek),<br />
of een afbeelding die zich verder onder aan de pagina bevindt. Bladwijzers zijn vooral<br />
handig als uw pagina voldoende informatie bevat om deze in verschillende rubrieken of pa-<br />
188 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
agrafen onder te verdelen, maar te weinig informatie om de pagina in afzonderlijke pagina’s<br />
te splitsen. Aan de hand van bladwijzers kunt u bezoekers de mogelijkheid bieden verwante<br />
informatie weer te geven zonder dat ze de huidige pagina hoeven te verlaten. Zo verkleint u de<br />
kans dat gebruikers ‘verdwalen’ terwijl ze de informatie op uw site doornemen.<br />
Zo voegt u een bladwijzer in:<br />
1. Activeer het selectiegereedschap en selecteer het object waarvoor u een bladwijzer wilt<br />
instellen. Als u een bladwijzer wilt instellen voor tekst, klikt u in het desbetreffende tekstobject<br />
om de invoegpositie in de tekst te plaatsen.<br />
2. Selecteer het gereedschap Bladwijzer instellen in het vervolgmenu met hyperlinkgereedschappen<br />
in de gereedschapset.<br />
3. Geef in het dialoogvenster een naam op voor de bladwijzer.<br />
4. (Facultatief) Activeer het selectievakje Bladwijzer in navigatiestructuur opnemen als u<br />
de bladwijzer (doorgaans een geselecteerd object) toegankelijk wilt maken via een navigatiebalk<br />
in plaats van via een hyperlink. Merk op dat hiertoe de optie Inclusief bladwijzers<br />
moet zijn ingeschakeld op het tabblad Type navigatiebalk in het eigenschappenvenster<br />
van de navigatiebalk. Typ in het invoervak Titel van bladwijzer de naam die u wilt weergeven<br />
voor deze bladwijzer in de navigatiebalk van uw site.<br />
5. Klik op OK.<br />
Onthoud dat bladwijzers paginagebonden zijn. U kunt dus gerust dezelfde<br />
naam gebruiken voor bladwijzers die zich op verschillende pagina’s bevinden.<br />
Merk op dat bladwijzers standaard doorlopend worden genummerd door het<br />
programma (‘Bladwijzer1,’ ‘Bladwijzer2,’ enzovoort). Wellicht behoudt u echter<br />
gemakkelijker het overzicht over de bladwijzers die u hebt ingesteld doorheen<br />
de gehele site als u elke bladwijzer een unieke naam geeft.<br />
Zo geeft u bestaande bladwijzers weer of bewerkt u ze:<br />
* Kies Extra > Sitebeheer > Bladwijzers beheren. Vanuit dit dialoogvenster kunt u snel en<br />
eenvoudig de naam en/of titel van een bladwijzer wijzigen, specifieke bladwijzers in de<br />
navigatiestructuur van uw site opnemen of ze eruit verwijderen, of rechtstreeks naar het<br />
object gaan waarvoor een bladwijzer is ingesteld in de werkomgeving.<br />
Hotspots toevoegen aan een pagina<br />
Een hotspot is een transparant gebied dat als hyperlink fungeert op een webpagina. Hotspots<br />
worden gewoonlijk voor afbeeldingen gedefinieerd, die zich dan als ‘knoppen’ gedragen waarop<br />
gebruikers kunnen klikken. Ze zijn vooral handig als u wilt dat bezoekers op verschillende<br />
delen van een afbeelding kunnen klikken, bijvoorbeeld bij een afbeelding die als ‘menu’ of<br />
sitemap fungeert, om naar een andere pagina in uw site te gaan. U kunt hotspots handmatig<br />
tekenen en bewerken, of u kunt ze op een bestaande vorm afstemmen.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 189
Zo tekent u een hotspot:<br />
1. Klik op Hotspot invoegen op de werkbalk Webobjecten.<br />
2. Klik en sleep op de pagina om het gebied te definiëren dat als hotspot moet fungeren.<br />
Zodra u de muisknop loslaat, verschijnt het dialoogvenster Hyperlinks.<br />
3. Selecteer links in dit dialoogvenster het type hyperlink dat u wilt instellen voor de hotspot.<br />
Geef vervolgens aan de rechterkant het doel van de hyperlink op (zie ‘Het doel van een<br />
hyperlink instellen’ in het Help-bestand van het programma).<br />
4. Klik op OK.<br />
Zo stemt u een hotspot op een bestaande vorm af:<br />
1. Teken een hotspot zoals hiervoor is beschreven en teken vervolgens een vorm (zie ‘Vormen<br />
tekenen en bewerken’ in hoofdstuk 8).<br />
2. Selecteer beide objecten en kies Hotspot aan vorm aanpassen in het menu Extra.<br />
De hotspot en de vorm worden als twee afzonderlijke objecten behandeld door<br />
het programma. U kunt de vorm dus gerust verwijderen nadat u deze als sjabloon<br />
hebt gebruikt om de vorm van de hotspot te bepalen.<br />
Zo bewerkt u de hyperlink voor een hotspot:<br />
* Dubbelklik op de hotspot met het selectiegereedschap of selecteer de hotspot en klik vervolgens<br />
op Hyperlink invoegen in de gereedschapset (of kies Invoegen > Hyperlink<br />
in de menubalk).<br />
Het dialoogvenster Hyperlinks verschijnt, waarin het huidige doel voor de hotspot wordt<br />
weergegeven.<br />
* Selecteer een ander type hyperlink en/of stel een ander doel in voor de hyperlink als u deze<br />
wilt bewerken.<br />
* Om de hyperlink te verwijderen, klikt u op Geen hyperlink in de boomstructuur links in<br />
het dialoogvenster.<br />
Hotspots bewerken<br />
U kunt hotspots naar behoefte verplaatsen en schalen, net als elk ander object in uw site. Merk<br />
op dat er rond een geselecteerde hotspot twee selectiekaders worden weergegeven, die elk een<br />
andere functie vervullen.<br />
190 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Zo verplaatst of schaalt u een hotspot:<br />
* Klik op de hotspot om deze te selecteren. Doe daarna het volgende:<br />
* Klik en sleep vanuit het midden van de hotspot of vanaf een van de randen van het<br />
buitenste selectiekader als u de hotspot wilt verplaatsen. Houd de Shift-toets ingedrukt<br />
terwijl u sleept als u de hotspot alleen in horizontale of verticale richting wilt verplaatsen.<br />
* Klik op een van de formaatgrepen van het buitenste selectiekader en sleep deze naar<br />
een andere positie als u de hotspot wilt schalen.<br />
Door de grepen en randen van het binnenste selectiekader te verslepen, kunt u hotspots met<br />
een aangepaste vorm maken die perfect zijn afgestemd op de contouren van de onderliggende<br />
afbeelding. Uit de vorm van de muisaanwijzer kunt u eenvoudig afleiden of deze zich momenteel<br />
boven een greep dan wel een rand van het selectiekader bevindt.<br />
Zo voegt u een extra node toe aan een hotspot:<br />
* Beweeg de muisaanwijzer boven een van de randen van het binnenste selectiekader totdat<br />
deze de volgende vorm krijgt: . Dubbelklik vervolgens om op deze positie een nieuwe<br />
node toe te voegen.<br />
Zo wijzigt u de vorm van een hotspot:<br />
* Plaats de muisaanwijzer boven een van de grepen van het selectiekader (let erop dat deze<br />
de volgende vorm krijgt: ) en sleep de greep terwijl u de linkermuisknop ingedrukt<br />
houdt naar een andere positie.<br />
Rollovers toevoegen<br />
De term rollover verwijst naar de interactie tussen de muis en een object op het scherm. Als<br />
u bijvoorbeeld met de muis een afbeelding aanwijst op een webpagina (zoals een knop in een<br />
navigatiebalk), is het mogelijk dat deze een andere kleur krijgt of dat er een andere afbeelding<br />
verschijnt. Wanneer u een object aanwijst op een webpagina, ‘betreedt’ uw muisaanwijzer fysiek<br />
het gebied dat door dat object wordt ingenomen op het scherm. Dit activeert een bepaalde<br />
gebeurtenis, een mouseover genoemd. Wanneer de onderliggende code deze mouseover<br />
‘onderschept,’ kan die op zijn beurt weer een andere gebeurtenis activeren, zoals een andere<br />
afbeelding weergeven op dezelfde positie. Elk object dat van uiterlijk verandert na bepaalde<br />
muisgebeurtenissen wordt een rollover-afbeelding of kortweg rollover genoemd.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 191
Voordat u een rollover-afbeelding creëert in <strong>Studio</strong> <strong>Webdesign</strong> moet u voor elke gebeurtenis<br />
(klikken, de muisaanwijzer boven het object laten rusten, enzovoort) een afzonderlijke afbeelding<br />
maken. Hiervoor moet u een externe grafische toepassing gebruiken. <strong>Studio</strong> <strong>Webdesign</strong><br />
genereert automatisch de vereiste code om de verschillende gebeurtenissen te onderscheppen.<br />
U kunt overigens ook rechtstreeks rollovers importeren die met Tekenen en Ontwerpen<br />
van Easy Computing zijn gemaakt.<br />
Opties voor rollovers<br />
Rollovers toevoegen aan een webpagina is in feite slechts een kwestie van beslissen welke<br />
rollover-toestanden u wilt instellen voor een afbeelding die uit meerdere lagen bestaat, en<br />
vervolgens voor elke toestand de juiste afbeelding in te stellen. In <strong>Studio</strong> <strong>Webdesign</strong> kunt u de<br />
volgende toestanden instellen voor een rollover:<br />
* Standaard is de toestand voordat er een rollover plaatsvindt (wanneer de afbeelding ‘in<br />
rust’ is). Deze toestand is altijd gedefinieerd.<br />
* Over is de toestand die wordt geactiveerd door een mouseover, dat wil zeggen wanneer de<br />
muisaanwijzer zich vlak boven het object bevindt. Zo kunt u de tekst die op een knop wordt<br />
afgebeeld bijvoorbeeld van kleur laten veranderen wanneer er een mouseover plaatsvindt<br />
om internetgebruikers er op attent te maken dat de knop als hyperlink fungeert. Door de<br />
muis afwisselend boven en buiten de afbeelding te plaatsen voordat u klikt (zie de toestand<br />
Ingedrukt), activeert u achtereenvolgens de toestanden Over en Standaard.<br />
* Ingedrukt is de toestand die wordt geactiveerd wanneer u met de muis op de afbeelding<br />
klikt. Deze term verwijst naar het gedrag dat inherent is aan een knop: de status ‘omhoog’<br />
verandert in ‘ingedrukt’ wanneer u op de knop klikt.<br />
* Ingedrukt + over (alleen beschikbaar als de optie Ingedrukt is geactiveerd) is de toestand<br />
die wordt geactiveerd als er een mouseover plaatsvindt terwijl de knop al is ingedrukt, met<br />
andere woorden nadat u er op hebt geklikt. Als u deze rollover-toestand niet activeert,<br />
blijft de knop ingedrukt na een mousedown. Dit kan ertoe leiden dat de knop niet meer<br />
reageert (zie de bovenstaande opmerking). Stel bijvoorbeeld voor de toestanden Standaard<br />
en Ingedrukt afbeelding A en voor de toestanden Over en Ingedrukt + over afbeelding B<br />
in als u dit wilt voorkomen. Dan betekent ‘Ingedrukt’ werkelijk ‘Ingedrukt + niet over’<br />
en keert de knop naar de standaardtoestand terug als u de muisaanwijzer buiten de knop<br />
beweegt, zelfs na een mousedown. Dit lijkt misschien ingewikkeld, maar het werkt!<br />
Merk op dat u ook een hyperlinkgebeurtenis kunt instellen voor de rollover, zodat bijvoorbeeld<br />
een andere webpagina wordt weergegeven als gebruikers op het object klikken. Als een<br />
pagina verschillende rollover-objecten bevat, kunt u die zelfs groeperen, zodat ze één geheel<br />
vormen en er maar één object tegelijkertijd ingedrukt kan zijn.<br />
192 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Zo maakt u een rollover:<br />
1. Maak met behulp van een externe grafische toepassing de vereiste bronafbeeldingen voor<br />
elke rollover-toestand die u wilt definiëren.<br />
2. Klik op Rollover invoegen in het vervolgmenu Navigatiehulpmiddelen toevoegen op<br />
de werkbalk Webobjecten. of kiies Invoegen > Webobject > Rollover in de menubalk.<br />
3. Selecteer in het dialoogvenster Rollover de toestanden die u wilt activeren voor de rollover<br />
door de overeenkomstige selectievakjes in te schakelen. Klik hierbij telkens op Bladeren<br />
om de bijbehorende bronafbeelding te selecteren en stel de gewenste exportopties in voor<br />
elke afbeelding (zie ‘Exportopties instellen voor afbeeldingen’ in hoofdstuk 9).<br />
4. Activeer het selectievakje Bestanden insluiten in site als u de afbeelding(en) in uw webproject<br />
wilt insluiten.<br />
5. Selecteer onder in het dialoogvenster de gewenste basistoestand voor de rollover: Standaard<br />
of Ingedrukt.<br />
Zo moet u voor de knop ‘Startpagina’ op de startpagina van een website bijvoorbeeld ‘Ingedrukt<br />
‘ als basistoestand instellen en/of ervoor zorgen dat deze niet op muisgebeurtenissen<br />
reageert. Gebruikers bevinden zich per slot van rekening al op deze pagina! Voor<br />
knoppen die naar andere pagina’s leiden, moet u ‘Standaard’ als basistoestand instellen.<br />
Dergelijke knoppen moeten wel op muisgebeurtenissen reageren.<br />
6. Klik op Instellen boven in het dialoogvenster om een hyperlink in te stellen voor de knop<br />
(zie ‘Hyperlinks en bladwijzers toevoegen’ eerder in dit hoofdstuk).<br />
7. Als de pagina meerdere knoppen bevat, kunt u die aan elkaar koppelen om zeker te stellen<br />
dat maar één knop tegelijkertijd ingedrukt kan zijn. Activeer hiertoe het selectievakje<br />
Keuzerondje.<br />
Zorg ervoor dat deze optie is ingeschakeld voor alle knoppen die u aan elkaar wilt koppelen<br />
als u deze techniek gebruikt. Hoewel het niet echt uitmaakt hoe de knoppen zijn<br />
gespreid over de pagina, zullen die gewoonlijk een zichtbaar geheel vormen, zoals een<br />
navigatiebalk. Alle knoppen waarvoor deze optie niet is ingeschakeld, zijn onafhankelijk<br />
van elkaar.<br />
8. Klik op OK.<br />
Let erop dat in de werkomgeving alleen de afbeelding voor de standaardtoestand zichtbaar<br />
is. Als u de rollover wilt testen, moet u een voorbeeld weergeven van de pagina, waarna u in<br />
het hoofdprogramma indien nodig de vereiste wijzigingen kunt doorvoeren. Merk op dat<br />
het programma voor elke rollover-toestand die u hebt ingesteld een afzonderlijke afbeelding<br />
exporteert als u een voorbeeld weergeeft van de website of deze publiceert, en dat aan het<br />
HTML-bestand voor de gepubliceerde pagina automatisch de vereiste JavaScript-code wordt<br />
toegevoegd om de gedefinieerde muisgebeurtenissen te onderscheppen.<br />
Zo bewerkt u een rollover:<br />
1. Klik met de rechtermuisknop op de afbeelding en kies Rollover bewerken in het snelmenu.<br />
2. Breng de vereiste wijzigingen aan in het dialoogvenster en klik op OK.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 193
De vereiste bronafbeeldingen maken voor een rollover<br />
Voor elk object waarvoor minstens één rollover-toestand is geactiveerd, moet u een afzonderlijke<br />
bronafbeelding maken. Vaak gaat het slechts om subtiele verschillen tussen de afbeelding<br />
voor de standaardtoestand en de ‘varianten’ die de indruk wekken dat het object van de ene<br />
in de andere toestand overgaat. Als u bijvoorbeeld de toestand Over hebt geactiveerd voor<br />
een object, moet u een afbeelding maken die een browser kan weergeven wanneer de muisaanwijzer<br />
zich boven het object bevindt. In de volgende figuur ziet u twee varianten van een<br />
knop om naar de startpagina van een site te gaan: één wanneer de knop is gemarkeerd (bij een<br />
mouseover) en een tweede variant als de knop zich in de standaardtoestand bevindt.<br />
U moet deze bronafbeeldingen in een afzonderlijk grafisch programma maken. Hier zijn enkele<br />
richtlijnen die u hierbij in acht moet nemen:<br />
* De afmetingen van de verschillende afbeeldingen worden zo aangepast dat ze in het gebied<br />
passen dat door de afbeelding voor de standaardtoestand wordt ingenomen. Alle<br />
bronafbeeldingen moeten dus dezelfde afmetingen hebben.<br />
* Zorg ervoor dat de verschillende varianten zich op exact dezelfde positie bevinden als de<br />
afbeelding voor de standaardtoestand, zodat er geen verschuiving zichtbaar is wanneer de<br />
afbeeldingen van de ene in de andere toestand overgaan. Gebruik daarom bij voorkeur<br />
een grafisch programma dat op het concept van lagen is gebaseerd om de vereiste bronafbeeldingen<br />
te maken. Plaats elke variant hierbij op een afzonderlijke laag vlak boven de<br />
afbeelding voor de standaardtoestand.<br />
* Denk eraan dat <strong>Studio</strong> <strong>Webdesign</strong> alleen de afbeelding voor de standaardtoestand weergeeft.<br />
Controleer daarom altijd het effect van de verschillende afbeeldingen door specifieke<br />
lagen weer te geven en te verbergen in het grafische programma.<br />
* U hoeft alleen bronafbeeldingen te maken voor de rollover-toestanden die u hebt geactiveerd.<br />
* Zodra u tevreden bent over de bronafbeeldingen, exporteert u elke laag naar een afzonderlijk<br />
bestand, waarna u <strong>Studio</strong> <strong>Webdesign</strong> start om de rollover te maken.<br />
* Bij het instellen van de bronafbeeldingen moet u aangeven of u de afbeeldingen in uw<br />
project wilt insluiten of ze aan uw project wilt koppelen. Als u een bronafbeelding aan uw<br />
project koppelt, gebruikt <strong>Studio</strong> <strong>Webdesign</strong> altijd de meest recente versie van het bestand.<br />
Daarom kunt u de afbeeldingen over het algemeen beter aan uw project koppelen totdat u<br />
zeker weet dat u ze niet meer hoeft te bewerken. Zodra de bronafbeeldingen op punt staan,<br />
kunt u ze op dezelfde manier eenvoudig in uw project insluiten. Als u een afbeelding die al<br />
is ingesloten achteraf moet bijwerken, kunt u het gewijzigde bestand het beste onder een<br />
andere naam opslaan en vervolgens het nieuwe bestand instellen in plaats van het oude<br />
voor de overeenkomstige rollover-toestand.<br />
194 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Pop-uprollovers toevoegen<br />
Pop-uprollovers kunnen voor allerlei doeleinden worden ingezet. Op het web worden ze echter<br />
hoofdzakelijk gebruikt om een grotere versie van een afbeelding weer te geven wanneer<br />
u de muisaanwijzer boven de overeenkomstige miniatuurweergave laat rusten. Ze werken<br />
ongeveer op dezelfde manier als de besturingselementen die u kunt voorzien in een Flashfotogalerij<br />
om te waarborgen dat gebruikers vlot door uw galerij kunnen navigeren. Pop-uprollovers<br />
vertonen veel overeenkomsten met gewone rollovers, behalve dan dat u bij gewone<br />
rollovers verschillende toestanden kunt definiëren, terwijl u bij pop-uprollovers maar twee<br />
toestanden kunt instellen (de standaardtoestand en de toestand bij een mouseover). Bovendien<br />
moet u bij rollovers met verschillende ‘varianten’ van een bronafbeelding werken die allemaal<br />
dezelfde afmetingen hebben, terwijl u bij een pop-uprollover veeleer met een vergrote<br />
versie van dezelfde afbeelding zult werken.<br />
In <strong>Studio</strong> <strong>Webdesign</strong> kunt u de grootte en positie van zowel de pop-upafbeelding als de miniatuurweergave<br />
van de afbeelding bepalen.<br />
U kunt twee toestanden instellen voor een pop-uprollover:<br />
* Standaard is de toestand voordat er een rollover plaatsvindt (wanneer de afbeelding ‘in<br />
rust’ is). Deze toestand is altijd gedefinieerd. U kunt hiervoor een miniatuurweergave gebruiken,<br />
maar desgewenst kunt u hiervoor ook pictogrammen gebruiken (bijvoorbeeld<br />
een pictogram met een cijfer om de verschillende afbeeldingen in een catalogus aan te<br />
duiden).<br />
* Over is de toestand die wordt geactiveerd bij een mouseover, dat wil zeggen wanneer<br />
de muisaanwijzer zich vlak boven de miniatuurweergave bevindt. In dat geval verschijnt<br />
automatisch de pop-upafbeelding, die weer verdwijnt zodra u de muisaanwijzer buiten de<br />
miniatuurweergave plaatst.<br />
U kunt ook een bijschrift weergeven bij uw pop-upafbeelding als u dat wilt. Hierbij kunt u<br />
allerlei opmaakkenmerken instellen, zoals het lettertype en de tekengrootte, de tekstkleur,<br />
enzovoort.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 195
Zo maakt u een pop-uprollover:<br />
1. Klik op Pop-uprollover invoegen in het vervolgmenu Navigatiehulpmiddelen toevoegen<br />
op de werkbalk Webobjecten.<br />
2. Klik op Bladeren naast het vak Standaard in het dialoogvenster om de afbeelding in te<br />
stellen die u voor de standaardtoestand wilt gebruiken. Blader in het dialoogvenster dat<br />
daarop verschijnt naar de juiste map, selecteer de afbeelding en klik op Openen.<br />
3. Let erop dat de geselecteerde afbeelding standaard ook voor de toestand Over wordt ingesteld.<br />
U kunt voor deze toestand echter een compleet andere afbeelding gebruiken als u<br />
dat wilt. Klik hiertoe op Bladeren en selecteer de gewenste afbeelding.<br />
4. Klik eventueel op Instellen boven in het dialoogvenster als u een hyperlink wilt instellen<br />
voor de miniatuurafbeelding. Dat is bijvoorbeeld zinvol als u wilt dat gebruikers door op<br />
de afbeelding te klikken naar een andere pagina in uw site kunnen gaan.<br />
5. Stel eventueel de gewenste exportopties in voor beide afbeeldingen (zie ‘Exportopties instellen<br />
voor afbeeldingen’ in hoofdstuk 9).<br />
6. Activeer het selectievakje Afbeeldingen in site insluiten als u de afbeelding(en) in uw<br />
webproject wilt insluiten.<br />
U hebt nu de vereiste afbeeldingen ingesteld voor beide toestanden van de pop-uprollover.<br />
Om de pop-uprollover op punt te stellen, moet u echter nog de positie van beide afbeeldingen<br />
bepalen op de pagina. Dat kunt u in een afzonderlijk dialoogvenster doen, waarin u<br />
beide afbeeldingen naar behoefte kunt schalen en verplaatsen (met de muis of door absolute<br />
pixelcoördinaten op te geven in de overeenkomstige invoervakken). Let erop dat rond elke<br />
afbeelding een kader met een specifieke kleur wordt weergegeven in dit dialoogvenster (groen<br />
voor de standaardtoestand en blauw voor de toestand bij een mouseover), zodat u beide afbeeldingen<br />
eenvoudig van elkaar kunt onderscheiden.<br />
In het voorbeeldvenster worden ook alle andere pop-uprollovers getoond die u eerder eventueel<br />
hebt ingesteld, evenals de pixelcoördinaten die u daarbij hebt opgegeven, zodat u de<br />
nieuwe pop-uprollover eenvoudig op de bestaande pop-uprollovers kunt uitlijnen.<br />
Zo bepaalt u de positie en grootte van de afbeeldingen:<br />
1. Klik op Positie van rollover instellen onder in het dialoogvenster Pop-uprollover.<br />
2. Selecteer een van beide afbeeldingen in het dialoogvenster Positie van rollover. Aan de<br />
hand van de vervolgkeuzelijst onder in dit dialoogvenster kunt u eenvoudig nagaan welke<br />
afbeelding momenteel is geselecteerd:<br />
* Standaard Selectie: geeft aan dat de afbeelding voor de standaardtoestand (de afbeelding<br />
met het groene kader er rond) is geselecteerd.<br />
* Over Selectie: geeft aan dat de afbeelding voor de Over-toestand (de afbeelding met het<br />
blauwe kader) is geselecteerd.<br />
* Bijschrift Selectie: geeft aan dat het bijschrift is geselecteerd (met een rood kader aangeduid).<br />
Deze optie is alleen beschikbaar wanneer u een bijschrift hebt ingesteld.<br />
Als u de huidige selectie opheft, wordt in de vervolgkeuzelijst Geen selectie<br />
weergegeven.<br />
196 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
3. Plaats beide afbeeldingen op de gewenste positie door ze een voor een te selecteren en<br />
ze vervolgens naar een andere positie te slepen in het voorbeeldvenster (vanuit het midden<br />
of vanaf de randen van het selectiekader). Gebruik de formaatgrepen in de hoeken<br />
van het selectiekader als u de afbeeldingen wilt schalen. U kunt ook rechtstreeks waarden<br />
typen in de invoervakken Links, Boven, Breedte en Hoogte als u nauwkeurig de positie<br />
en grootte van de afbeeldingen wilt bepalen. Merk op dat in de bijbehorende vervolgkeuzelijsten<br />
(van boven naar onder) de coördinaten worden weergegeven van de laatste drie<br />
pop-uprollovers die u hebt toegevoegd, zodat u de verschillende afbeeldingen nauwkeurig<br />
kunt uitlijnen.<br />
4. Activeer het selectievakje Relatief positioneren tov afbeelding voor standaardtoestand<br />
als u automatisch ook de afbeelding voor de Over-toestand wilt verplaatsen wanneer u de<br />
afbeelding voor de standaardtoestand naar een andere positie sleept.<br />
5. Schakel het selectievakje Verhoudingen behouden uit als u beide afbeeldingen nietproportioneel<br />
wilt kunnen schalen. (Standaard worden de afbeeldingen proportioneel<br />
geschaald wanneer u de formaatgrepen versleept.) Merk op dat u de invoervakken moet<br />
gebruiken in plaats van de formaatgrepen te verslepen om beide afbeeldingen niet-proportioneel<br />
te schalen wanneer u deze optie uitschakelt.<br />
6. Klik op OK. Let erop dat in de werkomgeving alleen de miniatuur voor de standaardtoestand<br />
wordt getoond. Als u de pop-upafbeelding wilt bekijken, moet u een voorbeeld<br />
weergeven van de site of deze publiceren.<br />
Door op dezelfde manier nog meer miniatuurafbeeldingen aan uw webpagina toe te voegen,<br />
kunt u eenvoudig een stijlvolle fotogalerij maken waarin gebruikers slechts op een miniatuur<br />
hoeven te klikken om een vergrote versie van elke afbeelding weer te geven.<br />
Zo bewerkt u een pop-uprollover:<br />
* Dubbelklik op de afbeelding voor de standaardtoestand op de pagina om het dialoogvenster<br />
Pop-uprollover te openen en voer de vereiste wijzigingen door. in het snelmenu.<br />
Zo voegt u een bijschrift toe aan een afbeelding:<br />
1. Activeer het selectievakje Bijschrift weergeven bij afbeelding voor rollover in het dialoogvenster<br />
Pop-uprollover.<br />
2. Typ de gewenste tekst in het invoervak Bijschrift.<br />
3. Stel via de vervolgkeuzelijsten Lettertype en Tekengrootte het lettertype en de tekengrootte<br />
van het bijschrift in. Activeer het selectievakje Vet en/of Cursief als u de tekst vet<br />
of cursief wilt opmaken. Klik op de kleurstaal naast de optie Tekstkleur als u een andere<br />
kleur wilt instellen voor het bijschrift.<br />
4. Activeer het selectievakje Achtergrondkleur gebruiken en kies een kleur als u een specifieke<br />
achtergrondkleur wilt instellen voor het bijschrift.<br />
5. Klik op OK.<br />
Merk op dat het ingestelde bijschrift alleen wordt weergegeven bij de afbeelding die voor de<br />
Over-toestand is ingesteld. Om de positie van dit bijschrift in te stellen, gaat u op dezelfde manier<br />
te werk als bij het instellen van de positie van de afbeeldingen voor de standaard- en Overtoestand.<br />
Klik hiertoe op Positie van rollover instellen in het dialoogvenster Pop-uprollover,<br />
selecteer het bijschrift in het voorbeeldvenster en sleep het naar de gewenste positie.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 197
Navigatie-elementen toevoegen<br />
Bepaalde typen thema-afbeeldingen in <strong>Studio</strong> <strong>Webdesign</strong>, navigatie-elementen genoemd,<br />
zijn zo geprogrammeerd dat ze zich automatisch aan de structuur van uw site aanpassen,<br />
zodat u eenvoudig een website kunt ontwerpen waardoor internetgebruikers vlot kunnen navigeren.<br />
Het enige wat u hoeft te doen, is het gewenste navigatie-element selecteren (zoals een<br />
navigatiebalk of een Vorige- of Volgende-knop) op het tabblad Thema-afbeeldingen in de<br />
studio (of in het dialoogvenster). Het programma doet de rest!<br />
Merk op dat Vorige/Volgende-knoppen automatisch aan aangrenzende pagina’s op hetzelfde<br />
niveau worden gekoppeld. Navigatiebalken zijn een combinatie van knoppen en pop-upmenu’s<br />
die waarborgen dat gebruikers eenvoudig door de verschillende rubrieken en niveaus in<br />
uw site kunnen navigeren. Zo fungeren de knoppen in de volgende navigatiebalk bijvoorbeeld<br />
als hyperlinks naar de startpagina en de hoofdpagina’s van de verschillende rubrieken. De<br />
pop-upmenu’s zijn telkens aan de onderliggende pagina’s van de desbetreffende rubrieken<br />
gekoppeld.<br />
Navigatie-elementen kunnen op een willekeurig niveau in de site worden ingevoegd. Bij navigatiebalken<br />
kunt u bovendien eenvoudig de pagina’s in uw site instellen waarheen de verschillende<br />
knoppen in de balk moeten leiden, het uiterlijk van de pop-upmenu’s wijzigen en<br />
specifieke pagina’s van de navigatiestructuur uitsluiten.<br />
Bij het instellen van een navigatie-element worden vaak termen als ‘bovenliggend niveau’<br />
of ‘vorige/volgende’ gebruikt om de onderdelen van de site aan te duiden waaraan de verschillende<br />
elementen moeten worden gekoppeld ten opzichte van de startpagina (met andere<br />
woorden om te bepalen welke knoppen in de navigatiestructuur moeten worden opgenomen).<br />
Omdat navigatie-elementen automatisch uw sitestructuur ‘weerspiegelen,’ worden ze meteen<br />
bijgewerkt wanneer u de relaties tussen pagina’s wijzigt, bepaalde pagina’s een andere naam<br />
geeft of een navigatie-element via knippen-en-plakken naar een andere pagina kopieert! De<br />
koppelingen zijn altijd relatief ten opzichte van de pagina waarop het element zich bevindt.<br />
Als een navigatiebalk bijvoorbeeld aan pagina’s op een onderliggend niveau is gekoppeld,<br />
blijft dat zo wanneer u de navigatiebalk of de pagina waarop deze zich bevindt naar een andere<br />
positie verplaatst in de sitestructuur – zelfs als de knoppen in de balk hiervoor aan andere<br />
pagina’s moeten worden gekoppeld.<br />
U kunt navigatie-elementen ook op een stramienpagina plaatsen. Zo hoeft u hetzelfde element<br />
niet handmatig naar meerdere pagina’s te kopiëren. Een navigatie-element dat op een<br />
stramienpagina is geplaatst, gedraagt zich alsof het zich op elke pagina bevindt – in overeenstemming<br />
met het concept dat de verschillende knoppen en menu’s van het element aan de<br />
locatie van de afzonderlijke pagina’s in de algemene sitestructuur zijn gerelateerd.<br />
Desgewenst kunt u ook bladwijzers in een navigatie-element opnemen, bijvoorbeeld om gebruikers<br />
in staat te stellen naar een samenvoeggebied te gaan, of naar een specifieke paragraaf<br />
op een pagina die een grote hoeveelheid tekst bevat.<br />
198 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Zo voegt u een navigatie-element toe:<br />
1. Klik op Thema-afbeelding invoegen in het vervolgmenu Navigatiehulpmiddelen<br />
toevoegen op de werkbalk Webobjecten.<br />
2. Selecteer in de vervolgkeuzelijst boven in het dialoogvenster Themaset het type navigatieelement<br />
dat u wilt invoegen en kies een thema voor het element.<br />
Zo voegt u een navigatiebalk toe:<br />
1. Klik op Navigatiebalk invoegen in het vervolgmenu Navigatiehulpmiddelen toevoegen<br />
op de werkbalk Webobjecten of kies Invoegen > Webobject > Navigatiebalk in de<br />
menubalk.<br />
2. Geef op het tabblad Themaset aan of u een horizontale of verticale navigatiebalk wilt invoegen<br />
en kies een thema voor de balk.<br />
3. Kies de gewenste instellingen op de tabbladen Type navigatie en Eigenschappen popupmenu’s<br />
(zie hierna).<br />
4. Klik op OK.<br />
Merk op dat u ook het tabblad Thema-afbeeldingen in de studio kunt gebruiken om navigatie-elementen<br />
aan uw site toe te voegen. Om een willekeurig element toe te voegen, vouwt<br />
u gewoon de lijst Sets of Typen uit via de vervolgkeuzelijst boven aan het tabblad, kiest u<br />
een stijl of categorie en sleept u het element dat u wilt gebruiken naar de pagina vanuit de<br />
galerie.<br />
Omdat navigatie-elementen thema-afbeeldingen zijn, kunt u via het tabblad Thema-afbeeldingen<br />
in de studio eenvoudig designelementen (knoppen, scheidingslijnen, enzovoort) met<br />
dezelfde grafische vormgeving kiezen, zodat de navigatiestructuur doorheen de gehele website<br />
uniform is. Om eigenschappen zoals het lettertype, de tekstkleur en de vulkleur bij een<br />
mouseover te bewerken, selecteert u het object en klikt u vervolgens op de knop Bewerken<br />
vlak eronder. (U kunt ook met de rechtermuisknop op het object klikken en Themaafbeelding<br />
bewerken kiezen in het snelmenu.) Lees Thema-afbeeldingen toevoegen en bewerken<br />
voor meer informatie.<br />
Om de eigenschappen van navigatiebalken te wijzigen, is een afzonderlijk dialoogvenster beschikbaar.<br />
Zo wijzigt u de eigenschappen van een navigatiebalk:<br />
1. Dubbelklik op de navigatiebalk, of klik met de rechtermuisknop en kies Navigatiebalk<br />
bewerken in het snelmenu.<br />
2. Selecteer op het tabblad Themaset het type navigatiebalk dat u wilt gebruiken: een horizontale<br />
of verticale navigatiebalk die op een thema-afbeelding is gebaseerd, een horizontale/verticale<br />
balk die louter tekst bevat of een vervolgkeuzelijst. Als u voor een navigatiebalk<br />
op basis van een thema-afbeelding kiest, kunt u ook een stijl kiezen voor de balk.<br />
3. Selecteer op het tabblad Type navigatie de knoppen die u in de navigatiebalk wilt opnemen<br />
door op het overeenkomstige pictogram te klikken. Naargelang de optie die u selecteert,<br />
kunt u ook aangeven of u de startpagina, de bovenliggende pagina van de huidige<br />
pagina en de bladwijzers die u op deze pagina hebt ingevoegd in de navigatiebalk wilt<br />
opnemen, en/of als u de huidige pagina al dan niet wilt verbergen.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 199
Activeer desgewenst de optie Alle knoppen even groot maken (anders wordt de grootte<br />
van de knoppen automatisch aan de lengte van de tekst aangepast) en/of Paginanamen<br />
gebruiken (als deze optie is uitgeschakeld, worden functionele namen zoals ‘Vorige’ of<br />
‘Home’ toegekend aan de knoppen).<br />
Stel vervolgens het ankerpunt van de navigatiebalk in. Standaard is de linkerbovenhoek van<br />
de balk als ankerpunt ingesteld. Als u deze instelling behoudt, wordt de navigatiebalk<br />
automatisch naar rechts uitgebreid naarmate u nieuwe pagina’s aan de site toevoegt. Onthoud<br />
in dit verband dat het instellen van een ankerpunt vooral belangrijk is bij navigatiebalken<br />
die voortdurend worden bijgewerkt, afhankelijk van de pagina waarop de bezoeker<br />
zich momenteel bevindt.<br />
Stel tot slot via de vervolgkeuzelijst Doelframe/-venster het venster of frame in waarin u<br />
nieuwe pagina’s automatisch wilt openen.<br />
4. Gebruik de opties op het tabblad Teksteigenschappen om de gewenste tekenopmaak in<br />
te stellen voor de tekst die op de knoppen wordt afgebeeld en de menu’s. (Deze opties zijn<br />
alleen beschikbaar wanneer u Alleen tekst als themaset hebt geselecteerd.)<br />
5. Als u wilt voorkomen dat er pop-upmenu’s voor de onderliggende pagina’s worden weergegeven,<br />
activeert u het tabblad Eigenschappen pop-upmenu’s en schakelt u het selectievakje<br />
Dit navigatie-element heeft menu’s uit. Als u wel pop-upmenu’s wilt weergeven,<br />
gebruikt u de besturingselementen aan de rechterkant om het uiterlijk van de tekst en de<br />
pop-upmenu’s aan te passen.<br />
Standaard worden alle pagina’s in de boomstructuur van uw site in de navigatiestructuur opgenomen.<br />
Concreet betekent dit dat u voor al deze pagina’s navigatie-elementen kunt toevoegen.<br />
Desgewenst kunt u bepaalde pagina’s echter uitsluiten van de navigatiestructuur. Dergelijke<br />
pagina’s worden dan genegeerd als u navigatie-elementen toevoegt. Stel dat uw site een<br />
rubriek met referentiepagina’s bevat die u niet in de navigatiestructuur wilt opnemen, zodat<br />
gebruikers ze niet van begin tot eind kunnen doorlopen. Door de bovenliggende pagina van<br />
deze rubriek van de navigatiestructuur uit te sluiten, verwijdert u de overeenkomstige koppeling<br />
uit de navigatiebalk. Merk op dat de pagina hierdoor niet uit de site wordt verwijderd. Ze<br />
wordt nog altijd weergegeven in de boomstructuur op het tabblad Site en u kunt nog altijd hyperlinks<br />
toevoegen naar die pagina. Ze wordt alleen niet weergegeven in een navigatiebalk.<br />
Pagina’s die in de navigatiestructuur zijn opgenomen, worden met het symbool aangeduid<br />
in de boomstructuur op het tabblad Site.<br />
Zo sluit u een pagina uit van de navigatiestructuur:<br />
* Klik met de rechtermuisknop op de desbetreffende pagina in de boomstructuur op het<br />
tabblad Site, kies Eigenschappen van pagina in het snelmenu en schakel op het tabblad<br />
Algemeen van het dialoogvenster het selectievakje Toevoegen aan navigatiestructuur<br />
uit.<br />
Desgewenst kunt u voor de afzonderlijke elementen van uw navigatiebalk een andere volgorde<br />
of structuur instellen dan op het tabblad Site. U kunt ook nieuwe elementen toevoegen,<br />
of bestaande elementen bewerken of verwijderen – net als op het tabblad Site.<br />
200 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Zo past u een navigatiebalk aan:<br />
1. Dubbelklik op de navigatiebalk.<br />
2. Activeer het tabblad Type navigatie en klik op Aangepast. Merk op dat het tabblad Aanpassen<br />
wordt toegevoegd aan het dialoogvenster.<br />
3. Wijzig via slepen-en-neerzetten de volgorde en structuur van de afzonderlijke elementen<br />
in de navigatiebalk. U kunt hiervoor ook de opties Omhoog, Omlaag, Naar lager niveau<br />
en Naar hoger niveau gebruiken aan de rechterkant van het tabblad.<br />
4. Klik op Element toevoegen als u een nieuw element wilt toevoegen onder aan de navigatiebalk.<br />
Selecteer vervolgens in het dialoogvenster dat daarop verschijnt een type hyperlink,<br />
stel het doelvenster of -frame in en geef een titel op voor het nieuwe element. Klik<br />
daarna op OK.<br />
5. Klik op OK om uw wijzigingen toe te passen.<br />
Een sitemap toevoegen<br />
U kunt een sitemap aan uw website toevoegen met dit programma. Deze handige voorziening<br />
bevordert de toegankelijkheid van uw site door te voorzien in links waarop gebruikers kunnen<br />
klikken om naar de verschillende onderdelen van uw site te gaan.<br />
Desgewenst kunt u de sitemap op een pagina plaatsen die in de navigatiebalk<br />
voor uw site is opgenomen. Dan is de sitemap vanaf alle webpagina’s in uw site<br />
toegankelijk.<br />
Zo voegt u een sitemap toe:<br />
1. Klik op Sitemap invoegen in het vervolgmenu Navigatiehulpmiddelen toevoegen op<br />
de werkbalk Webobjecten.<br />
2. Doe in het vak Navigatie van het dialoogvenster Sitemap het volgende:<br />
* Als u bladwijzers hebt gebruikt in uw site en die in de sitemap wilt opnemen, activeert<br />
u het selectievakje Inclusief bladwijzers.<br />
* Selecteer in de vervolgkeuzelijst Doelframe/-venster het venster of frame waarin u de<br />
sitemap wilt openen. Misschien wilt u de sitemap bijvoorbeeld in een nieuw venster<br />
openen, zodat gebruikers terwijl ze de sitemap bekijken door uw site kunnen navigeren.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 201
3. Stel in het groepsvak Kolommen het aantal kolommen in waarover u de sitemap wilt<br />
spreiden.<br />
Als u aangeeft dat u een sitemap wilt invoegen die uit meerdere kolommen bestaat, kunt<br />
u ook de breedte van de kolommarges instellen en aangeven of u items op het tweede en<br />
derde niveau bij de overeenkomstige items op het hoogste niveau wilt houden. (Als u deze<br />
optie niet selecteert, worden sommige itemlijsten mogelijk gesplitst en over verscheidene<br />
kolommen weergegeven.)<br />
4. Klik in het groepsvak Opmaakprofielen op de knop Wijzigen voor het niveau dat u wilt<br />
aanpassen om de gewenste opmaak in te stellen voor de tekst van de sitemap. Desgewenst<br />
kunt u ook schemakleuren toepassen op de hyperlinks in de sitemap en/of ze onderstrepen.<br />
5. Klik op OK om de sitemap aan de pagina toe te voegen nadat u de gewenste instellingen<br />
hebt gekozen.<br />
Sitemaps worden automatisch bijgewerkt als u achteraf pagina’s toevoegt of<br />
verwijdert, de relaties tussen pagina’s wijzigt of bepaalde pagina’s een andere<br />
naam geeft.<br />
202 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
12 Dynamische content<br />
toevoegen<br />
HTML-pagina’s maken<br />
HTML is de onderliggende met tags gemarkeerde code die webbrowsers lezen om webpagina’s<br />
correct weer te geven. Deze tags bepalen hoe een webpagina wordt opgemaakt in de<br />
browser. Daarom is het van essentieel belang dat de code de juiste structuur heeft en aan de<br />
HTML-standaard beantwoordt.<br />
U kunt met dit programma ook webpagina’s in zuivere W3C-compatibele HTML ontwikkelen.<br />
U kunt dergelijke pagina’s rechtstreeks vanuit de boomstructuur op het tabblad Site<br />
toevoegen. Merk op dat ze met een ander pictogram worden aangeduid dan standaardpagina’s<br />
in de boomstructuur.<br />
Net als standaardpagina’s kunt u HTML-pagina’s via slepen-en-neerzetten naar een andere<br />
positie slepen in de boomstructuur, ze een andere naam geven, er een voorbeeld van weergeven,<br />
offsite links invoegen, de downloadtijd berekenen, enzovoort. In tegenstelling tot<br />
standaardpagina’s zijn HTML-pagina’s echter niet op een hoofdpagina gebaseerd. Een ander<br />
opmerkelijk verschil is dat in een afzonderlijk documentvenster de broncode van de pagina<br />
verschijnt (in plaats van een WYSIWYG-weergave zoals bij een standaardpagina) wanneer<br />
u op het pictogram van een HTML-pagina dubbelklikt op het tabblad Site. Als u ervaring<br />
hebt met HTML, zullen de standaard HTML-tags die u hier aanvankelijk aantreft u wellicht<br />
meteen bekend voorkomen!<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 203
Wanneer u rechtstreeks met HTML-code werkt, is er geen WYSIWYG-weergave<br />
beschikbaar.<br />
Door tekst in te voeren tussen de -tags in dit venster, kunt u de ‘basisstructuur’<br />
van de HTML-pagina naar behoefte bewerken. Onthoud in dit verband dat elke alinea<br />
met de tag moet beginnen en met de tag moet eindigen. Merk op dat u ook tokens<br />
kunt invoegen in uw HTML-code (zie HTML-code toevoegen verderop in dit hoofdstuk).<br />
Klik hiertoe met de rechtermuisknop in de code, kies Token invoegen in het snelmenu en<br />
klik vervolgens in het submenu op het token dat u wilt invoegen. De rest van de HTML-code<br />
buiten de -tags hoeft u niet te bewerken.<br />
Om HTML-code te bewerken, is een grondige kennis van HTML vereist. Als u<br />
fouten maakt tijdens het bewerken van de code, wordt de pagina of de volledige<br />
site later mogelijk niet correct weergegeven in een browser.<br />
Als u geen ervaring hebt met HTML, kunt u het beste eerst enkele HTML-handleidingen<br />
downloaden van internet voordat u met zuivere HTML-pagina’s aan de slag gaat.<br />
Zo maakt u een HTML-pagina:<br />
0. Selecteer in het vak Pagina’s (de boomstructuur van uw site) op het tabblad Site de pagina<br />
waarna u een nieuwe pagina wilt invoegen. U hoeft maar één keer te klikken om de pagina<br />
te selecteren (de paginanaam wordt vet weergegeven). Als u dubbelklikt, wordt de pagina<br />
ook in de werkomgeving weergegeven.<br />
1. Klik op het pijltje naast de knop Toevoegen vlak boven de boomstructuur om het<br />
bijbehorende vervolgmenu te openen en kies Nieuwe HTML-pagina.<br />
Zo bewerkt u de HTML-code:<br />
* Dubbelklik op het pictogram van de HTML-pagina in de boomstructuur op het tabblad<br />
Site en bewerk de weergegeven code.<br />
Klik op<br />
op de optiebalk vlak boven het venster met de HTML-code als u de<br />
wijzigingen die u in de code hebt aangebracht weer ongedaan wilt maken.<br />
Zo keert u terug naar de ontwerpweergave:<br />
* Klik op op de optiebalk.<br />
HTML-code toevoegen<br />
U kunt in <strong>Studio</strong> <strong>Webdesign</strong> rechtstreeks pagina’s in zuivere HTML ontwikkelen (zie vorige<br />
paragraaf). U kunt echter ook code toevoegen aan afzonderlijke objecten en standaardpagina’s,<br />
hoofdzakelijk om de mogelijkheden van die objecten (of de pagina) uit te breiden en<br />
ze interactief te maken.<br />
204 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Merk op dat u de vooraf gedefinieerde HTML-code niet kunt bewerken. (Dat heeft overigens<br />
ook weinig zin.) U kunt echter wel op specifieke plaatsen in de weergegeven code extra code<br />
toevoegen. Wanneer u de broncode voor een object of pagina weergeeft, zult u een aantal<br />
duidelijk herkenbare plaatshouders aantreffen (in het wit gemarkeerd).<br />
Dit zijn slechts enkele van de vele plaatshouders die u kunt bewerken in de code voor een<br />
HTML-fragment, object of pagina. (Afhankelijk van het type element dat u hebt geselecteerd,<br />
zult u diverse plaatshouders aantreffen in de code.) Zo is de laatste plaatshouder in de bovenstaande<br />
figuur bijvoorbeeld uniek voor de broncode van een pagina. In de code voor een<br />
object of HTML-fragment zult u een dergelijke plaatshouder niet aantreffen.<br />
U kunt deze plaatshouders via knippen-en-plakken door om het even welke code vervangen,<br />
maar doorgaans zult u hier waarschijnlijk tokens, HTML-code of scripts (zoals JavaScript)<br />
invoegen. Zo kunt u bijvoorbeeld een handler toevoegen die een specifieke functie aanroept<br />
wanneer gebruikers op een rollover-afbeelding klikken, wat alleen mogelijk is met behulp van<br />
scripts.<br />
HTML-code toevoegen aan een pagina<br />
U kunt ook extra HTML-code toevoegen aan een pagina in <strong>Studio</strong> <strong>Webdesign</strong>. Zo kunt u<br />
bijvoorbeeld HTML-fragmenten toevoegen die u van een andere webpagina hebt gekopieerd,<br />
of misschien zelfs code die u zelf hebt geschreven.<br />
Voorts kunt u ook opgemaakte HTML-tekst uit een browser of e-mailprogramma importeren<br />
via het Klembord. Gebruik hiervoor bijvoorbeeld de opdrachten Alles selecteren en Kopiëren<br />
in uw browser, en kies vervolgens Bewerken > Plakken speciaal in <strong>Studio</strong> <strong>Webdesign</strong>.<br />
Met de opdracht Webpagina’s importeren kunt u een of meer webpagina’s importeren in een<br />
nieuw of bestaand <strong>Webdesign</strong>-project. Desgewenst kunt u alleen specifieke elementen van<br />
deze pagina’s importeren.<br />
Wanneer u HTML-code importeert, voegt het programma een markering in op de positie<br />
waar de code zal worden uitgevoerd in de site. Omdat u het effect van de HTML-code pas<br />
kunt zien wanneer u een voorbeeld weergeeft van de site, is het van essentieel belang dat u<br />
deze markering op de juiste plaats invoegt. Test de webpagina altijd in een webbrowser! Controleer<br />
de code en de positie ervan op de pagina mochten er zich problemen voordoen. Als u<br />
enige kennis hebt van HTML, kunt u de broncode voor de pagina regel voor regel doorlopen<br />
in een teksteditor zoals Kladblok of via de opdracht Beeld > Bron in uw browser om eventuele<br />
fouten op te sporen.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 205
Zo voegt u HTML-code toe aan een pagina:<br />
1. Klik op HTML-code invoegen op de werkbalk Webobjecten of kies Invoegen > Webobject<br />
> HTML in de menubalk.<br />
2. Klik op de pagina of het plakbord om een nieuw HTML-fragment met standaardafmetingen<br />
in te voegen op die positie. Sleep met de muis als u aangepaste afmetingen wilt instellen<br />
voor het HTML-fragment.<br />
3. Gebruik de knoppen Plakken in header en Plakken in body in het dialoogvenster om<br />
de tekst op het Klembord respectievelijk tussen de -tags en -tags van de pagina te plaatsen. U kunt de code ook rechtstreeks in de juiste sectie<br />
typen in het codevenster boven in het dialoogvenster.<br />
4. Als de code externe bestanden vereist, moet u die selecteren via de knop Toevoegen. Klik<br />
op Insluiten als u de externe bestanden in het projectbestand wilt insluiten.<br />
5. Klik tot slot op OK om het dialoogvenster te sluiten.<br />
ID’s gebruiken<br />
Elk object in <strong>Studio</strong> <strong>Webdesign</strong> heeft een unieke alfanumerieke id, die vereist is om naar<br />
het desbetreffende object te verwijzen in scripts. Standaard worden deze id’s automatisch gegenereerd<br />
voor alle objecten, tekstkolommen, tabelrijen en tabelcellen in uw site. Zo wordt<br />
aan de eerste AutoVorm die u tekent bijvoorbeeld automatisch ‘qs_1’ als id toegewezen, aan<br />
de tweede AutoVorm ‘qs_2,’ enzovoort. Op dezelfde manier wordt aan afbeeldingen ‘pic_1,’<br />
‘pic_2,’ enzovoort als id toegewezen.<br />
U kunt vanzelfsprekend deze automatisch gegenereerde id’s gebruiken in uw scripts. Als u<br />
liever met uw eigen id’s werkt, kunt u het automatisch toewijzen van id’s echter ook uitschakelen<br />
voor de volledige site. Kies hiervoor Bestand > Eigenschappen van site, klik op de tab<br />
Opties en schakel de overeenkomstige optie uit onder aan het tabblad. U kunt eenvoudig uw<br />
eigen id’s invoegen in de beschikbare plaatshouder in plaats van de id’s die het programma<br />
automatisch genereert:<br />
Als u een object naar een andere positie op dezelfde pagina of naar een andere<br />
website kopieert, wordt het id-nummer automatisch door een nieuw id-nummer<br />
vervangen.<br />
U kunt de id van een object op elk moment veranderen nadat u het op een webpagina hebt<br />
geplaatst. Zo kunt u bijvoorbeeld een andere naam gebruiken, of voorkomen dat de id van<br />
een object wordt weergegeven in de broncode, zonder het automatisch toewijzen van id’s in<br />
de website uit te schakelen.<br />
Zo bewerkt u de id van een object:<br />
1. Klik met de rechtermuisknop op het object en kies ID in het snelmenu, of selecteer het<br />
object en kies Opmaak > HTML-id in de menubalk.<br />
206 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
2. Verander in het dialoogvenster de waarde voor de HTML-id.<br />
3. Wijzig desgewenst de instelling in de vervolgkeuzelijst ID van dit object weergeven. Als<br />
u de optie Standaardinstelling site selecteert, wordt de overeenkomstige instelling op het<br />
tabblad Opties van het dialoogvenster Eigenschappen van site gebruikt. Selecteert u Ja of<br />
Nee, dan wordt de id van het object altijd of nooit weergegeven, ongeacht de standaardinstellingen<br />
voor de site.<br />
Tokens gebruiken<br />
U kunt een hele reeks HTML-annotatietokens aan HTML-fragmenten, objecten of pagina’s<br />
koppelen in <strong>Studio</strong> <strong>Webdesign</strong>. Deze tokens worden automatisch door de overeenkomstige<br />
‘echte’ waarden vervangen wanneer u de site publiceert of er een voorbeeld van weergeeft.<br />
Als u een token wilt gebruiken, typt u gewoon een tokenstring in een van de plaatshouders<br />
in de broncode.<br />
Raadpleeg het Help-bestand van het programma voor een volledig overzicht van de ondersteunde<br />
tokens.<br />
Formulieren toevoegen<br />
Met webformulieren kunt u bezoekers op een moderne en efficiënte manier om allerlei informatie<br />
vragen. Webformulieren zijn op hetzelfde concept gebaseerd als traditionele formulieren<br />
op papier om gegevens te verzamelen (ook hier kunnen gebruikers opties ‘aankruisen’<br />
en vakken invullen). Alleen maken webformulieren gebruik van de krachtige mogelijkheden<br />
die internet biedt om informatie uit te wisselen. Enkele voorbeelden van veelgebruikte typen<br />
formulieren zijn feedback- en aanvraagformulieren, gastenboeken, sollicitatieformulieren en<br />
formulieren om persoonlijke gegevens te verzamelen.<br />
Formuliergegevens kunnen op verschillende manieren worden verzameld: per e-mail, via lokale<br />
of externe scriptbestanden of via Serif Web Resources.<br />
Structuur van een formulier<br />
De bouwstenen van een formulier bestaan uit een combinatie van tekst, afbeeldingen en besturingselementen.<br />
De besturingselementen zijn de ‘intelligente’ objecten die de gegevens verzamelen<br />
die internetgebruikers hebben ingevoerd. Dergelijke elementen kunnen op dezelfde<br />
manier worden toegevoegd, verplaatst en bewerkt als andere objecten in <strong>Studio</strong> <strong>Webdesign</strong>,<br />
zoals afbeeldingen en tabellen. Tot deze besturingselementen behoren onder andere knoppen,<br />
tekstvakken, invoervakken, vervolgkeuzelijsten, selectievakjes en keuzerondjes, evenals<br />
CAPTCHA-objecten en elementen die gebruikers in staat stellen bestanden te selecteren. De<br />
meeste formulieren bestaan uit een willekeurige combinatie van deze elementen, zoals in de<br />
volgende figuur.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 207
Van de gebruiker wordt verwacht dat hij de vereiste gegevens invoert in de tekstvakken of een<br />
keuze maakt door selectievakjes of keuzerondjes te activeren, of door een optie te selecteren<br />
in een vervolgkeuzelijst. Afhankelijk van het type velden dat u gebruikt in een formulier, kan<br />
de gebruiker tekst, numerieke waarden of een combinatie van beide invoeren. Hierbij kunt<br />
u nauwkeurig de tabvolgorde instellen, dat wil zeggen de volgorde waarin de verschillende<br />
velden moeten worden ingevuld. Desgewenst kunt u de ingevoerde gegevens ook valideren.<br />
(Raadpleeg het Help-bestand van het programma voor meer informatie over het instellen van<br />
een tabvolgorde en het valideren voor formuliergegevens.)<br />
Elk veld heeft specifieke eigenschappen die het uiterlijk van het veld, de toegestane waarde(n)<br />
voor dit veld, het type gegevensvalidatie of de actie vastleggen die van het veld wordt verwacht.<br />
In <strong>Studio</strong> <strong>Webdesign</strong> kunt u op verschillende manieren te werk gaan om een formulier te integreren<br />
in uw webpagina’s. Desgewenst kunt u een volledige pagina reserveren voor één enkel<br />
formulier en deze pagina in de navigatiebalk voor uw site opnemen (via het selectievakje<br />
Toevoegen aan navigatiestructuur in het eigenschappenvenster van die pagina), zodat het<br />
formulier vanaf elke pagina toegankelijk is.<br />
Onthoud in dit verband dat formulieren pas actief zijn nadat u de website hebt gepubliceerd.<br />
U kunt de functionaliteit van een formulier echter op elk moment testen door een voorbeeld<br />
weer te geven van uw website (zie ‘Een voorbeeld bekijken van uw site’ in hoofdstuk 13).<br />
Wanneer internetgebruikers het formulier verzenden, worden de ingevoerde gegevens automatisch<br />
naar de opgegeven bestemming gestuurd.<br />
Merk op dat u in <strong>Studio</strong> <strong>Webdesign</strong> ook interactieve webformulieren kunt ontwerpen door<br />
gebruik te maken van JavaScript om de opmaak van formulieren vast te leggen, gegevens te<br />
valideren, berekeningen uit te voeren en de vereiste acties te definiëren voor een formulier.<br />
Waarheen worden de gegevens verzonden?<br />
U kunt formuliergegevens op verschillende manieren verwerken:<br />
* per e-mail;<br />
* via een lokaal of server-side script, dat de gegevens bijvoorbeeld naar een tekstbestand of<br />
een serverdatabase schrijft;<br />
208 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
* via Serif Web Resources, van waaruit de gegevens automatisch naar uw e-mailadres worden<br />
doorgestuurd.<br />
Hierbij kunt u het coderingstype, het doelvenster of -frame en de overdrachtsmethode (POST<br />
of GET) instellen die u wilt gebruiken om de formuliergegevens te verwerken.<br />
Formulieren maken<br />
U kunt naar behoefte de ingebouwde wizard of een van de kant-en-klare standaardformulieren<br />
gebruiken om een webformulier te maken, of zelf een formulier ontwerpen met behulp<br />
van de vooraf gedefinieerde formulierobjecten. Voor welke methode u precies moet kiezen, is<br />
afhankelijk van de mate waarin u het formulier wilt kunnen aanpassen. We raden u echter aan<br />
eerst even de ingebouwde standaardformulieren te bekijken voordat u zelf formulieren begint<br />
te ontwerpen. Vaak kunt u deze formulieren als uitgangspunt voor uw eigen formulieren gebruiken<br />
en zodoende zeer veel tijd besparen.<br />
Zo maakt u een formulier met de wizard Webformulier:<br />
1. Klik op Wizard Webformulier in het vervolgmenu met formuliergereedschappen op<br />
de werkbalk Webobjecten.<br />
2. Klik in het eerste dialoogvenster van de wizard op Een formulier maken met de wizard<br />
en klik op Volgende.<br />
3. In het volgende dialoogvenster kunt u de besturingselementen selecteren die u aan het<br />
formulier wilt toevoegen. Ga daartoe als volgt te werk:<br />
* Klik op Overige in het groepsvak Toevoegen en kies het gewenste besturingselement<br />
in het dialoogvenster Standaard formulierobject toevoegen als u een kant-en-klaar besturingselement<br />
aan het formulier wilt toevoegen.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 209
Dubbelklik vervolgens op dit besturingselement in de lijst bovenaan om een dialoogvenster<br />
te openen waarin u indien nodig de instellingen en/of naam van het besturingselement<br />
kunt wijzigen.<br />
OF<br />
1. Klik op een van de overige knoppen in het groepsvak als u een aangepast besturingselement<br />
aan het formulier wilt toevoegen. Lees ‘Besturingselementen bewerken’ verderop<br />
in dit hoofdstuk voor een beschrijving van de verschillende besturingselementen.<br />
2. Geef in het dialoogvenster Nieuw besturingselement toevoegen de interne naam van<br />
het besturingselement op (om het eenduidig te identificeren). U kunt de vooraf gedefinieerde<br />
naam behouden of een andere naam kiezen. Geef vervolgens het label op dat<br />
u naast dit besturingselement wilt weergeven. (Dit label is zichtbaar op het formulier.)<br />
Klik op Besturingselement bewerken als u de eigenschappen van het besturingselement<br />
wilt wijzigen. In het eigenschappenvenster van het besturingselement kunt u de<br />
gewenste validatieregels, de lengte van het element en allerlei andere eigenschappen<br />
instellen (zie ‘Besturingselementen bewerken’ verderop in dit hoofdstuk). Klik op OK<br />
nadat u de gewenste opties hebt ingesteld.<br />
4. Voeg op dezelfde manier de andere vereiste besturingselementen aan het formulier toe.<br />
Merk op dat de besturingselementen in de lijst boven in het dialoogvenster in de volgorde<br />
worden weergegeven waarin u ze hebt toegevoegd.<br />
Voordat u verdergaat, moet u nog een besturingselement toevoegen om het formulier te<br />
verzenden. Dit element is onmisbaar als u gebruikers in staat wilt stellen de ingevoerde<br />
gegevens te versturen. Klik hiertoe op Verzenden-knop. Onthoud in dit verband dat een<br />
formulier behalve een verzendknop doorgaans ook een knop bevat waarmee gebruikers<br />
de ingevoerde gegevens weer kunnen wissen. Om deze knop aan uw formulier toe te voegen,<br />
klikt u op Reset-knop.<br />
Klik op Volgende om verder te gaan nadat u de vereiste besturingselementen hebt toegevoegd.<br />
5. Geef in het volgende dialoogvenster aan of u de formuliergegevens per e-mail, via een lokaal<br />
of extern scriptbestand of via Serif Web Resources wilt verwerken en geef vervolgens<br />
een naam op voor het formulier (zie ‘Formulieren verzenden’ verderop in dit hoofdstuk).<br />
Klik daarna op Voltooien om de wizard te beëindigen.<br />
6. Klik op de pagina op de positie waar u het formulier wilt invoegen als u de standaardafmetingen<br />
wilt gebruiken voor het formulier. Klik en sleep op de pagina als u aangepaste<br />
afmetingen wilt instellen voor het formulier.<br />
U kunt ook een standaardformulier toevoegen in plaats van een formulier te ontwerpen met<br />
de wizard. Het gaat hierbij om vooraf gedefinieerde formulieren waarop gebruikers hun contactgegevens<br />
kunnen invoeren, commentaar kunnen geven over uw site, hun mening kwijt<br />
kunnen, enzovoort.<br />
210 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Zo maakt u een standaardformulier:<br />
1. Klik op Wizard Webformulier in het vervolgmenu met formuliergereedschappen op<br />
de werkbalk Webobjecten.<br />
2. Klik in het eerste dialoogvenster van de wizard op Een standaardformulier gebruiken en<br />
aanpassen en klik op Volgende.<br />
3. Selecteer in de keuzelijst boven in het dialoogvenster het gewenste type formulier. Gebruik<br />
het voorbeeldvenster onderaan als u een voorbeeld wilt bekijken van elk formulier.<br />
4. Klik op Volgende om verder te gaan.<br />
5. In het volgende dialoogvenster kunt u het geselecteerde formulier naar behoefte aanpassen.<br />
* Om een besturingselement toe te voegen aan het formulier, klikt u op de overeenkomstige<br />
knop in het groepsvak Toevoegen.<br />
* Als u een van de vooraf gedefinieerde besturingselementen wilt bewerken, selecteert u<br />
het in de lijst bovenaan en klikt u op Besturingsel. bewerken (zie Besturingselementen<br />
bewerken verderop in dit hoofdstuk).<br />
* Om een besturingselement te verwijderen, selecteert u het en klikt u op Verwijderen<br />
(of drukt u op Delete op het toetsenbord).<br />
* Gebruik de knoppen Omhoog en Omlaag als u de volgorde van de besturingselementen<br />
wilt wijzigen.<br />
6. Klik op Volgende en geef in het volgende dialoogvenster aan waarheen u de formuliergegevens<br />
wilt verzenden. Klik daarna op Voltooien om de wizard te beëindigen.<br />
7. Klik op de pagina op de positie waar u het formulier wilt invoegen als u de standaardafmetingen<br />
wilt gebruiken voor het formulier. Klik en sleep op de pagina als u aangepaste<br />
afmetingen wilt instellen voor het formulier.<br />
Als u meer vrijheid wilt bij het ontwerpen van een formulier, voegt u gewoon een leeg formulier<br />
in en voegt u vervolgens de gewenste besturingselementen en/of standaard formulierobjecten<br />
toe aan dit formulier. Raadpleeg het Help-bestand van het programma voor meer<br />
informatie.<br />
Besturingselementen voor formulieren<br />
Besturingselementen voor formulieren zijn ‘intelligente’ objecten die zich duidelijk onderscheiden<br />
van andere objecten in <strong>Studio</strong> <strong>Webdesign</strong>. Ze zijn ‘intelligent’ in de zin dat ze de<br />
invoer van gebruikers kunnen opslaan en die naar een centrale locatie kunnen doorsturen<br />
op het moment dat het formulier wordt verzonden. Merk op dat u besturingselementen net<br />
als elk ander object in <strong>Studio</strong> <strong>Webdesign</strong> naar behoefte kunt verplaatsen, maar dat u er geen<br />
kleuren of transparantie-effecten voor kunt instellen, noch de randen of grootte ervan kunt<br />
aanpassen.<br />
Om de vereiste besturingselementen toe te voegen aan een formulier, kunt u naar keuze gebruikmaken<br />
van de wizard Webformulier, van de knoppen in het vervolgmenu met formuliergereedschappen<br />
op de werkbalk Webobjecten of van de opties in het submenu Invoegen<br />
> Formulier op de menubalk. Hierbij moet u aan elk besturingselement een unieke interne<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 211
naam toewijzen en vervolgens de gewenste eigenschappen instellen voor het desbetreffende<br />
element. Raadpleeg het Help-bestand van het programma voor een overzicht van de besturingselementen<br />
die u zoal aan een formulier kunt toevoegen.<br />
Als u de wizard Webformulier gebruikt, kunt u ook verborgen objecten als besturingselementen<br />
toevoegen. Hoewel dergelijke elementen niet zichtbaar zijn voor de bezoeker, gebruiken<br />
webdesigners ze vaak om gebruikersgegevens te identificeren aan de hand van een duidelijk<br />
herkenbare string. U kunt dit type besturingselementen bijvoorbeeld gebruiken om de datums<br />
te registreren waarop een webpagina niet beschikbaar was.<br />
Daarnaast kunt u ook verborgen velden toevoegen aan een formulier. Klik hiertoe met de<br />
rechtermuisknop op het formulier en kies Eigenschappen van formulier bewerken in het<br />
snelmenu. Via het tabblad Verborgen velden in het dialoogvenster kunt u een willekeurig<br />
aantal verborgen velden aan uw formulier toevoegen.<br />
Besturingselementen bewerken<br />
Elk besturingselement (knop, tekstvak, enzovoort) heeft specifieke eigenschappen en als dusdanig<br />
andere waarden die u kunt bewerken. U kunt deze waarden wijzigen op het moment dat<br />
u het formulier maakt of nadat u het besturingselement aan het formulier hebt toegevoegd.<br />
Zo kunt u bij het ontwerpen van een formulier doorgaans:<br />
* de interne naam en de standaardwaarde van een besturingselement (de waarde die aanvankelijk<br />
wordt weergegeven) instellen;<br />
* aangeven of u de standaardwaarde van het besturingselement als script wilt behandelen<br />
(al dan niet naar HTML wilt converteren);<br />
* een maximumlengte instellen voor het veld (u kunt deze eigenschap ook voor validatiedoeleinden<br />
gebruiken);<br />
* de status van het besturingselement op Uitgeschakeld instellen, zodat het inactief blijft<br />
totdat het wordt geactiveerd door een script;<br />
* een sneltoets instellen, zodat gebruikers via een toetsencombinatie (bestaande uit Alt en<br />
een specifieke letter op het toetsenbord) naar het besturingselement kunnen navigeren;<br />
* aangeven of u een besturingselement geschikt wilt maken voor het invoeren van wachtwoorden<br />
(zodat er sterretjes verschijnen tijdens het invoeren van het wachtwoord);<br />
* het kenmerk Alleen-lezen instellen, zodat het besturingselement alleen kan worden bewerkt<br />
als dit via een script wordt toegestaan. Desgewenst kunt u hier de voorwaarde aan<br />
koppelen dat het element alleen kan worden bewerkt als ook andere velden zijn ingevuld.<br />
Als u de eigenschappen van een besturingselement wilt wijzigen op het moment dat u het<br />
formulier maakt, klikt u op de knop Besturingsel. bewerken in de wizard Webformulier. Als<br />
u deze eigenschappen achteraf wilt bewerken, klikt u met de rechtermuisknop op het element<br />
op de pagina en kiest u de overeenkomstige optie in het snelmenu (bijvoorbeeld Invoervak<br />
bewerken).<br />
212 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Formulieren verzenden<br />
Alle formulieren hebben één ding met elkaar gemeen: ze moeten worden verzonden voordat<br />
de formuliergegevens kunnen worden verwerkt. U kunt hiervoor zelf een knop Verzenden<br />
ontwerpen, of u kunt de vooraf gedefinieerde knop in de wizard Webformulier gebruiken.<br />
Merk op dat elk formulier dat u maakt een verzendknop moet bevatten, en dat deze knop<br />
doorgaans is vergezeld van een knop waarmee gebruikers de ingevoerde formuliergegevens<br />
weer kunnen wissen. Raadpleeg het Help-bestand voor meer informatie.<br />
RSS-feeds en podcasts<br />
Really Simple Syndication-feeds (RSS) zijn streams met nieuws en informatie die voortdurend<br />
wordt bijgewerkt. RSS-feeds zijn tegenwoordig razend populair op internet. Als u regelmatig<br />
online nieuwsservices raadpleegt, bent u ongetwijfeld al vertrouwd met dit concept.<br />
U herkent dergelijke feeds aan het symbool op websites. Door op dit symbool te klikken,<br />
kunt u zich (handmatig of automatisch) abonneren op de desbetreffende RSS-feed via een<br />
RSS-lezer.<br />
Podcasts zijn net als RSS-feeds zogeheten syndicatiefeeds. Bij een podcast wordt echter gebruikgemaakt<br />
van digitale media zoals audio- en videobestanden om informatie te verspreiden.<br />
Met <strong>Studio</strong> <strong>Webdesign</strong> kunt u snel en eenvoudig uw eigen RSS-feeds of podcasts maken<br />
en die vervolgens regelmatig bijwerken. Door uw eigen RSS-feeds in uw site te integreren,<br />
wordt u in essentie zelf uitgever (in plaats van lezer) van een of meer informatiediensten met<br />
nieuwsberichten, recensies van websites of artikelen die u zelf hebt geschreven. Podcasts stellen<br />
u dan weer in staat allerlei mediaclips te verspreiden. Internetgebruikers kunnen zich op<br />
twee manieren op deze feeds abonneren: handmatig of automatisch. In het laatstgenoemde<br />
geval hoeven ze hiertoe slechts op een symbool te klikken dat aangeeft om welk type feed het<br />
gaat, met name<br />
voor RSS-feeds<br />
voor podcasts<br />
Door feeds te maken waarop gebruikers zich automatisch kunnen abonneren, stelt u hen<br />
in staat de informatie via een specifieke lezer toegankelijk te maken, bijvoorbeeld Google<br />
Reader, My Yahoo! of Apple iTunes®. Als u feeds maakt waarop gebruikers zich handmatig<br />
moeten abonneren (bijvoorbeeld via Internet Explorer of Mozilla Firefox), kunnen ze zich<br />
eenvoudig op uw RSS-feed of podcast abonneren door op een hyperlink te klikken, zoals in<br />
de volgende figuur:<br />
Eenmaal een gebruiker zich heeft geabonneerd op een feed, kan hij deze met de gekozen lezer<br />
bekijken.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 213
Om uw eigen RSS-feed of podcast te maken, dient u grotendeels op dezelfde manier te werk<br />
te gaan in <strong>Studio</strong> <strong>Webdesign</strong>. Sterker nog, voor beide soorten feeds kan hetzelfde gereedschap<br />
worden gebruikt, met name het gereedschap RSS-feed/podcast toevoegen.<br />
U kunt vanzelfsprekend ook RSS-feeds of podcasts van anderen aan uw webpagina’s toevoegen<br />
in plaats van zelf een RSS-feed of podcast te maken. In dat geval moet u een lezer in uw<br />
webpagina’s integreren. Hiertoe gebruikt u het gereedschap RSS-lezer toevoegen.<br />
Browserondersteuning voor feeds<br />
Omdat het om een relatief nieuwe techniek gaat om informatie te verspreiden via internet,<br />
kunnen RSS-feeds en podcasts alleen met de nieuwste versies van webbrowsers worden bekeken.<br />
Hier is een overzicht van enkele browsers die dergelijke feeds kunnen weergeven zonder<br />
dat hiervoor een externe invoegtoepassing vereist is:<br />
* Internet Explorer 7.0 (of nieuwer)<br />
* Mozilla Firefox (alle versies)<br />
* Opera 8.0 (of nieuwer)<br />
* Netscape Browser 8.1 (of nieuwer)<br />
Mocht u met een oudere versie van de bovengenoemde browsers werken, kunnen we u meteen<br />
geruststellen! Op internet zijn tientallen lezers beschikbaar voor RSS-feeds en podcasts. Geef<br />
bijvoorbeeld ‘RSS-reader’ als zoekterm op in uw favoriete zoekmachine om dergelijke readers<br />
te vinden. Enkele voorbeelden van goede lezers zijn Newz Crawler, FeedDemon en Awasu.<br />
Een RSS-feed of podcast maken<br />
Met het gereedschap RSS-feed/podcast toevoegen kunt u snel en eenvoudig een of meer<br />
RSS-feeds/podcasts maken waarop internetgebruikers zich kunnen abonneren, ofwel via hun<br />
stand-alone lezer of hun browser ofwel via Apple iTunes®.<br />
Zo voegt u een RSS-feed of podcast toe aan uw site:<br />
1. Klik op RSS-feed/podcast toevoegen in het vervolgmenu met syndicatiegereedschappen<br />
op de werkbalk Webobjecten.<br />
2. Klik op RSS-feed toevoegen of Podcast toevoegen naargelang u een RSS-feed of podcast<br />
wilt maken. Let erop dat in de lijst links in het dialoogvenster een nieuwe feed verschijnt.<br />
(Het programma kent standaard de naam Nieuwe RSS-feed of Nieuwe podcast toe aan de<br />
feed.) Selecteer de nieuwe feed in de lijst aan de linkerkant en kies vervolgens in het deelvenster<br />
vlak daarnaast de gewenste instellingen voor de feed. Om de huidige instellingen<br />
te wijzigen, klikt u gewoon op de overeenkomstige cel in de kolom Waarde. Naargelang<br />
de instelling die u wilt wijzigen, kunt u hiertoe gebruikmaken van een vervolgkeuzelijst,<br />
invoervak of dialoogvenster.<br />
3. Klik op OK.<br />
4. Bij podcasts kunt u in het dialoogvenster RSS-feed aangeven of gebruikers zich automatisch<br />
op de podcast kunnen abonneren vanuit een specifieke lezer. Selecteer hiertoe de optie<br />
Google Reader, My Yahoo! of iTunes in de vervolgkeuzelijst Podcast openen met. Als<br />
u wilt dat gebruikers zich handmatig abonneren, selecteert u de optie RSS-standaard.<br />
214 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
5. Klik op OK.<br />
6. Klik op de pagina op de positie waar u de feed wilt invoegen.<br />
Let erop dat op de positie waar u hebt geklikt de knop of verschijnt (naargelang u een<br />
RSS-feed dan wel een podcast hebt ingevoegd).<br />
Voeg bij podcasts waarop gebruikers zich automatisch kunnen abonneren een<br />
label toe aan deze knop om aan te geven via welke toepassing de podcast toegankelijk<br />
zal worden gemaakt.<br />
Zo vervangt u een feed door een andere feed:<br />
* Nadat u een RSS-feed of podcast hebt toegevoegd aan uw site, verschijnt automatisch een<br />
dialoogvenster waarin u de bovengenoemde knop desgewenst aan een andere RSS-feed<br />
of podcast kunt koppelen wanneer u het gereedschap RSS-feed/podcast toevoegen<br />
selecteert. Kies in dit dialoogvenster gewoon de feed waaraan u de knop wilt koppelen en<br />
klik vervolgens op OK.<br />
Nadat u een RSS-feed of podcast hebt gemaakt, kunt u er respectievelijk artikelen of afleveringen<br />
aan toevoegen. Merk op dat u uw site opnieuw moet publiceren nadat u een RSS-feed of<br />
podcast hebt bijgewerkt (zie ‘Uw site op het web publiceren’ in hoofdstuk 13).<br />
Podcasts naar iTunes doorsturen<br />
Als u uw podcast toegankelijk wilt maken via iTunes, moet u deze ter goedkeuring aan iTunes<br />
voorleggen. Als uw podcast wordt goedgekeurd door de medewerkers van iTunes, kunnen<br />
iTunes-gebruikers zich via iTunes op uw podcast abonneren.<br />
Zo legt u een podcast ter goedkeuring aan iTunes voor:<br />
1. Start iTunes.<br />
2. Klik op Podcasts in het vak LIBRARY.<br />
3. Klik onder in de werkomgeving op de knop Podcast Directory.<br />
4. Klik in het vak FOR PODCASTERS onder in het venster op Submit a Podcast.<br />
5. Geef in het volgende venster in het vak Podcast Feed URL het webadres van uw podcast<br />
op.<br />
6. Klik op Continue.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 215
E-commerce<br />
Over e-commerce<br />
‘E-commerce’ is een overkoepelende term voor het kopen en verkopen van goederen via<br />
internet. Online winkels zijn tegenwoordig een vast onderdeel van internet. Elk bedrijf dat<br />
zichzelf respecteert, probeert zijn producten tegenwoordig ook rechtstreeks via internet aan<br />
de man te brengen. Hoogstwaarschijnlijk hebt u zelf ook al eens boeken, cd’s, vliegtuigtickets,<br />
enzovoort via internet besteld. Elke e-commercesite maakt gebruik van winkelwagentjes en<br />
een systeem om betalingen te verwerken. Een winkelwagentje is een virtueel mandje (vergelijkbaar<br />
met het winkelmandje in een warenhuis) waarin alle artikelen worden geplaatst die<br />
u hebt gekozen in een online winkel. Met dit winkelmandje begeeft u zich vervolgens naar de<br />
virtuele kassa, waar aan de hand van een of ander systeem om betalingen te verwerken het<br />
financiële gedeelte van uw aankoop wordt afgehandeld.<br />
Grote bedrijven ontwikkelen doorgaans een eigen mandjessysteem dat specifiek op hun<br />
producten is afgestemd. (Om betalingen te verwerken, wordt meestal een beroep gedaan op<br />
externe bedrijven.) Kleinere bedrijven of organisaties nemen vaak hun toevlucht tot kanten-klare<br />
oplossingen van externe leveranciers, omdat het ontwikkelen van een dergelijk<br />
mandjessysteem zeer veel tijd en geld kost. Op internet vindt u tientallen bedrijven die dergelijke<br />
e-commercefuncties aanbieden. Het basisconcept is telkens hetzelfde: om gebruik te<br />
kunnen maken van de diensten die ze aanbieden, hebt u een gebruikersaccount nodig. De<br />
meeste van deze online betaalservices aanvaarden verschillende soorten creditcards om betalingen<br />
te verwerken.<br />
Wellicht vraagt u zich nu af wat de rol van <strong>Studio</strong> <strong>Webdesign</strong> is in dit alles. Het unieke aan dit<br />
programma is dat het u de mogelijkheid biedt een online betaalservice te kiezen en vervolgens<br />
door een formulier of link (dat wil zeggen een eenvoudige knop of een hyperlink voor<br />
een willekeurig object) op uw pagina te plaatsen verbinding te maken met die service. Als u<br />
gebruikmaakt van formulieren, kunt u verschillende aankoopopties instellen en ook automatisch<br />
de BTW op de producten, de verzendkosten, eventuele kortingen bij het bestellen van<br />
grote hoeveelheden, enzovoort berekenen. Als u links gebruikt, hoeven gebruikers slechts<br />
met de muis te klikken om de goederen te bestellen. In dat geval kunnen ze echter niet uit<br />
verschillende aankoopopties kiezen. Welke functies precies worden ondersteund, hangt af<br />
van de gekozen betaalservice.<br />
Een online betaalservice instellen<br />
In <strong>Studio</strong> <strong>Webdesign</strong> kunt u snel en eenvoudig de gewenste opties instellen om betalingen te<br />
verwerken voor de producten of diensten die u aanbiedt. In het programma zijn de vereiste<br />
functies geïmplementeerd voor een van de meest gebruikte online betaalservices. Als u regelmatig<br />
producten bestelt op eBay, bent u wellicht al vertrouwd met het PayPal-systeem. Tijdens<br />
het configureren van uw account wordt u automatisch naar de website van deze online<br />
betaalservice geleid, waar u zich als geregistreerde gebruiker kunt aanmelden.<br />
Raadpleeg de website van uw provider voor meer informatie over de ondersteunde<br />
e-commercefuncties.<br />
216 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Zo stelt u een online betaalservice in:<br />
1. Klik op Online betaalservice instellen in het vervolgmenu met e-commercegereedschappen<br />
op de werkbalk Webobjecten.<br />
2. U kunt uit twee opties kiezen in het dialoogvenster Online betaalservice instellen, naargelang<br />
u een nieuwe gebruiker bent of al een account hebt:<br />
* Als u een nieuwe gebruiker bent, selecteert u een online betaalservice en klikt u op Nu<br />
aanmelden. Dan wordt automatisch een nieuw browservenster geopend en de website<br />
van de gekozen betaalservice geladen, waar u zich kunt registreren.<br />
* Als u al een account hebt bij de online betaalservice, activeert u het keuzerondje naast<br />
deze service en klikt u op Volgende. Met deze optie stelt u de gekozen betaalservice als<br />
standaardservice in voor uw site. (Omdat al klant bent, hoeft u geen nieuwe gebruikersaccount<br />
in te stellen.)<br />
3. Kies in het volgende dialoogvenster de gewenste instellingen voor de online betaalservice.<br />
4. Klik op Voltooien.<br />
Als u PayPal gebruikt, kunt u het e-mailadres opgeven dat u wilt gebruiken om betalingen te<br />
ontvangen. U kunt ook aangeven of u de ‘sandbox’ van PayPal wilt gebruiken. Het gaat hierbij<br />
om een hulpmiddel waarmee u de e-commercefunctionaliteit van uw site kunt testen voordat<br />
u ‘live’ gaat. Merk op dat u een afzonderlijke testaccount nodig hebt om gebruik te kunnen<br />
maken van deze voorziening. Klik op Meer info om een afzonderlijke sandbox-account in te<br />
stellen naast uw standaard PayPal-account.<br />
Zodra u een online betaalservice hebt ingesteld, kunt u een e-commerceobject toevoegen.<br />
Een e-commerceobject toevoegen (PayPal)<br />
<strong>Studio</strong> <strong>Webdesign</strong> bevat ingebouwde wizards om e-commerceobjecten toe te voegen aan uw<br />
webpagina’s. Onthoud in dit verband dat u e-commerceobjecten naar keuze als formulier of<br />
als link kunt toevoegen, afhankelijk van de producten die u verkoopt en hoe u die wilt verkopen.<br />
Stel dat u handelaar bent en dat u een partij bakstenen wilt verkopen op uw site. In dat geval<br />
kunt u een e-commerceknop (in de vorm van een ‘Nu kopen’-link). Dat is bijvoorbeeld zinvol<br />
als alle bakstenen dezelfde vorm/kleur hebben en als u potentiële kopers wilt verplichten om<br />
een vaste hoeveelheid bakstenen te kopen.<br />
Omdat deze link slechts een eenvoudige knop is, zijn de ‘interactieve’ aankoopopties (bijvoorbeeld<br />
kleur, grootte en aantal) die doorgaans vereist zijn voor complexe transacties niet beschikbaar.<br />
Door op de link te klikken, kan de koper alleen de vooraf gedefinieerde standaardhoeveelheid<br />
kopen – niet meer en niet minder. In bepaalde situaties volstaat een dergelijke<br />
link, in andere situaties is ze echter volstrekt ontoereikend!<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 217
Als u gebruikmaakt van een e-commerceformulier, kunt u verschillende interactieve elementen<br />
in uw formulier integreren en potentiële kopers zodoende meer mogelijkheden aanreiken.<br />
Zo kunt u de klant in het bovenstaande voorbeeld bijvoorbeeld de grootte en kleur<br />
van de bakstenen en het gewenste aantal bakstenen laten kiezen, zodat hij exact kan bestellen<br />
wat hij nodig heeft.<br />
In dit voorbeeld heeft de koper bijvoorbeeld 2600 bakstenen van het type ‘Kram - Oranje’<br />
besteld.<br />
Als u talrijke artikelen wilt aanbieden, kunt u gebruikmaken van een Serif-database (*.sdb)<br />
om de vereiste gegevens op te slaan. Het gaat hierbij om een database met een speciale structuur<br />
die speciaal is afgestemd op e-commercetoepassingen. Lees ‘E-commercegegevens samenvoegen’<br />
verderop in dit hoofdstuk voor meer informatie.<br />
De verschillende formulieren en links zijn vanuit één dialoogvenster toegankelijk. Het enige<br />
wat u hoeft te doen om een formulier of link te selecteren, is het overeenkomstige keuzerondje<br />
activeren in dit dialoogvenster. We hebben overigens doelbewust voor de term ‘links’ gekozen<br />
omdat u deze e-commercelinks op dezelfde manier als gewone hyperlinks kunt instellen<br />
voor een vectorobject, afbeelding, vorm of tekst. Klik hiervoor met de rechtermuisknop op<br />
het desbetreffende element en kies Hyperlink in het snelmenu (zie ‘Hyperlinks en bladwijzers<br />
toevoegen’ in hoofdstuk 11). U kunt deze links in plaats van een standaard PayPal-knop<br />
gebruiken.<br />
Welk dialoogvenster wordt weergegeven wanneer u een e-commerceobject toevoegt, is afhankelijk<br />
van de gekozen online betaalservice (zie ‘Een online betaalservice instellen’ hiervoor).<br />
Hierna gaan we ervan uit dat u PayPal als online betaalservice gebruikt.<br />
Zo voegt u een e-commerceobject toe aan een pagina:<br />
1. Klik op E-commerceobject invoegen in het vervolgmenu met e-commercegereedschappen<br />
op de werkbalk Webobjecten.<br />
2. Kies in het dialoogvenster PayPal-object toevoegen het e-mailadres dat u wilt gebruiken<br />
om betalingsinformatie te ontvangen. Standaard wordt het e-mailadres gebruikt dat u tijdens<br />
het instellen van de online betaalservice hebt opgegeven. Als u een ander e-mailadres<br />
wilt gebruiken, schakelt u het selectievakje Standaardadres van site gebruiken uit en selecteert<br />
u het gewenste e-mailadres in de vervolgkeuzelijst of typt u een nieuw e-mailadres<br />
in het invoervak.<br />
3. Selecteer het gewenste type object. Selecteer een van de formuliertypen als u een e-commerceformulier<br />
wilt maken waarop klanten uit verscheidene betaalopties kunnen kiezen<br />
218 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
(bijvoorbeeld kleur en hoeveelheid). Als u geen aankoopopties wilt aanbieden voor het<br />
product dat u verkoopt, selecteert u een van de verschillende soorten links om een e-<br />
commerceknop te maken. Kies voor een samenvoegformulier of samenvoeggebied als u<br />
gegevens wilt ophalen uit een database in plaats van die handmatig toe te voegen in het<br />
dialoogvenster Artikelgegevens (zie ‘E-commercegegevens samenvoegen’ verderop in dit<br />
hoofdstuk).<br />
4. (Facultatief) Als u geen formulier of knop wilt gebruiken, selecteert u de laatste optie.<br />
Dan kunt u in het volgende dialoogvenster de code plakken van een gecodeerde knop die<br />
met de PayPal Button Generator is gemaakt (raadpleeg de website van PayPal voor meer<br />
informatie). Klik op Volgende nadat u de gewenste optie hebt geselecteerd.<br />
5. Selecteer in het volgende dialoogvenster de knop die u wilt gebruiken voor het e-commerceobject.<br />
Activeer de optie Standaard tekstknop gebruiken en typ in het invoervak<br />
ernaast de gewenste tekst als u een tekstknop wilt gebruiken. U kunt ook een standaardafbeelding<br />
gebruiken. Selecteer in dat geval de gewenste afbeelding in de keuzelijst. Activeer<br />
de optie Eigen afbeelding gebruiken en selecteer een afbeelding als u een aangepaste afbeelding<br />
wilt gebruiken voor de knop. Merk op dat de afbeelding standaard wordt ingesloten<br />
in uw site. Schakel het selectievakje onder in het dialoogvenster uit als u de afbeelding<br />
aan de site wilt koppelen. Klik daarna op Volgende.<br />
6. In het dialoogvenster Artikelgegevens kunt u de naam, id en prijs van het artikel opgeven,<br />
aangeven of u het standaard btw-tarief of een aangepast tarief wilt hanteren, enzovoort.<br />
Hier is een overzicht van de opties die u kunt instellen in dit dialoogvenster:<br />
* Naam van artikel: typ hier de naam van het artikel dat u verkoopt. Deze naam wordt<br />
op het formulier en in het mandje weergegeven.<br />
* Klant de mogelijkheid bieden de artikelnaam op te geven: activeer dit selectievakje<br />
om de bovengenoemde artikelnaam te vervangen door een invoervak waarin de klant<br />
zelf een naam kan typen. Deze optie is bijvoorbeeld ook handig als u bezoekers in staat<br />
wilt stellen aanvullende informatie op te geven met betrekking tot een donatie.<br />
* Artikel-id: typ hier een tekenreeks die PayPal kan gebruiken tijdens het verwerken van<br />
de transactie.<br />
* Valuta: selecteer via deze vervolgkeuzelijst de gewenste valuta voor de transactie.<br />
* Prijs: typ hier de prijs van het artikel. Deze prijs wordt standaard weergegeven op het<br />
scherm.<br />
* Klant de mogelijkheid bieden het bedrag in te voeren: activeer dit selectievakje om<br />
de bovengenoemde prijs te vervangen door een invoervak waarin de klant zelf de prijs<br />
kan invoeren. Gebruik deze optie bijvoorbeeld voor donatieformulieren, zodat gebruikers<br />
het bedrag kunnen opgeven dat ze willen schenken.<br />
* Standaard btw-tarief in mijn profiel negeren voor dit artikel: activeer dit selectievakje<br />
als u een aangepast btw-tarief wilt hanteren in plaats van het btw-tarief dat standaard<br />
is gedefinieerd in uw PayPal-profiel.<br />
Klik op Volgende nadat u de gewenste instellingen hebt gekozen.<br />
Als u voor een van de vooraf gedefinieerde samenvoegformulieren of een samenvoeggebied<br />
hebt gekozen om gegevens op te halen uit een e-commercedatabase, kunt u hier de gegevensbron<br />
selecteren waaruit u gegevens wilt ophalen. Vergeet niet de juiste valuta in te stellen!<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 219
7. Als u in stap 3 voor een e-commerceformulier hebt gekozen, kunt u in dit dialoogvenster<br />
zo nodig de opties instellen waaruit klanten kunnen kiezen. (Als u PayPal gebruikt, kunt<br />
u per formulier slechts twee opties instellen.) Activeer hiervoor het selectievakje Optieveld<br />
toevoegen en voeg vervolgens, afhankelijk van uw behoeften, een veld met een vaste<br />
naam, een invoervak, keuzerondjes of een vervolgkeuzelijst toe. Merk op dat u een nieuw<br />
optieveld kunt maken of een optieveld kunt selecteren dat u eerder hebt opgeslagen. Klik<br />
op Volgende nadat u de gewenste optievelden hebt ingesteld. Merk op dat dit dialoogvenster<br />
niet wordt weergegeven voor samenvoegformulieren.<br />
8. Geef in het invoervak boven in het dialoogvenster een standaardhoeveelheid op voor het<br />
artikel, of activeer het selectievakje als u de klant in staat wilt stellen de hoeveelheid te<br />
kiezen aan de kassa. (Dit dialoogvenster wordt niet weergegeven voor samenvoegformulieren.)<br />
OF<br />
Activeer de optie Invoervak toevoegen, zodat de klant bij het selecteren van het artikel<br />
meteen ook het aantal exemplaren kan opgeven dat hij wil kopen.<br />
9. Stel via de invoervakken onder in het dialoogvenster de verzend- en verpakkingskosten<br />
in voor de bestelling (per bestelling, voor het eerste artikel en/of voor elk extra artikel dat<br />
wordt besteld).<br />
Als u deze velden niet invult, worden de standaardwaarden in uw PayPal-profiel gebruikt.<br />
Klik op Volgende nadat u de gewenste instellingen hebt gekozen.<br />
10. In het dialoogvenster Klantgegevens kunt u aangeven of u de klant al dan niet om een<br />
adres wilt vragen, of als u hem wilt verplichten om een adres in te voeren. Desgewenst<br />
kunt u de klant om aanvullende informatie vragen voordat hij zijn bestelling bevestigt.<br />
Klik op Volgende om verder te gaan.<br />
11. In het dialoogvenster Betalingspagina’s kunt u betaalopties instellen:<br />
* Selecteer in de vervolgkeuzelijst bovenaan de gewenste stijl voor de betalingspagina (als<br />
u vooraf een paginastijl hebt ingesteld via uw PayPal-account).<br />
* Selecteer in de vervolgkeuzelijst eronder een taal voor de inlogpagina.<br />
* Wijzig desgewenst de tekst voor de knop Doorgaan op de betalingspagina als de betaling<br />
is goedgekeurd.<br />
* Geef zo nodig de URL op van de pagina’s die moeten worden weergegeven als de betaling<br />
is goedgekeurd dan wel werd geannuleerd.<br />
Klik op Volgende nadat u de gewenste instellingen hebt gekozen.<br />
12. Kies in het dialoogvenster Lay-out van formulier (alleen beschikbaar voor e-commerceformulieren)<br />
de gewenste lay-outopties voor uw formulier. Aan de hand van de selectievakjes<br />
in dit dialoogvenster kunt u nauwkeurig aangeven wat voor informatie u precies<br />
wilt weergeven op het formulier. Zo kunt u bijvoorbeeld instellen of u de naam en/of prijs<br />
van de artikelen wilt tonen op het formulier. Bij het ontwerpen van een samenvoegformulier<br />
kunt u ook aangeven of u een afbeelding en een gedetailleerde en/of korte beschrijving<br />
van elk artikel wilt weergeven op het formulier, de waarden van vaste opties wilt tonen,<br />
enzovoort. Desgewenst kunt u het formulier ook opnieuw opmaken nadat de gegevens<br />
zijn samengevoegd.<br />
220 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
13. Klik op Voltooien.<br />
14. Plaats de muisaanwijzer op de positie waar u het formulier of de knop wilt invoegen<br />
op de pagina en klik met de linkermuisknop.<br />
Zo bewerkt u een e-commerceformulier of -knop:<br />
1. Klik met de rechtermuisknop op het formulier en kies E-commerceformulier bewerken,<br />
of klik met de rechtermuisknop op de knop en kies E-commerceknop bewerken.<br />
2. Doorloop de verschillende dialoogvensters een voor een en kies telkens de gewenste instellingen.<br />
Gegevens samenvoegen<br />
Databasegegevens samenvoegen<br />
U kunt gegevens uit een bestaande Serif-database of een externe gegevensbron zoals een Microsoft<br />
Access-database, dBASE-bestand, HTML-document, Excel-bestand, ODBC-gegevensbron<br />
of tekstbestand met scheidingstekens ophalen in <strong>Studio</strong> <strong>Webdesign</strong> en die vervolgens<br />
naar behoefte repliceren door gebruik te maken van een zogeheten samenvoeggebied.<br />
Het kan hierbij om een verzendlijst, personeelslijst, inventaris, productlijst of willekeurige<br />
andere gegevens gaan, zolang die gegevens maar in een database (de gegevensbron genoemd)<br />
kunnen worden opgeslagen.<br />
Merk op dat u behalve tekst ook afbeeldingen (bijvoorbeeld een digitale fotocollectie) kunt<br />
samenvoegen met <strong>Studio</strong> <strong>Webdesign</strong>. U kunt het programma zelfs automatisch een fotodatabase<br />
(een eenvoudige database in sdb-formaat) laten genereren van alle afbeeldingen in een<br />
bepaalde map en aan de hand van deze database vervolgens een terugkerende lay-out met<br />
rijen en kolommen genereren die u als basis kunt gebruiken voor productcatalogi of fotoalbums.<br />
Overzicht<br />
Voor eenvoudige samenvoegbewerkingen kunt u gebruikmaken van een Serif-database<br />
(*.sdb). Dit databaseformaat leent zich uitstekend voor het opslaan van niet-opgemaakte<br />
platte tekst, bijvoorbeeld voor een productlijst, maar is ook geschikt voor andere taken. Zo<br />
kunt u bijvoorbeeld een nieuwe lijst maken door een sdb-bestand met de vereiste velden te<br />
creëren en deze velden vervolgens met gegevens te vullen. Het grote voordeel van een Serifdatabase<br />
is ongetwijfeld dat u uw gegevens rechtstreeks vanuit het programma kunt bewerken<br />
en indien nodig snel en eenvoudig nieuwe velden of gegevens aan uw database kunt toevoegen.<br />
U kunt met dit programma echter ook gegevens uit externe gegevensbronnen samenvoegen.<br />
Zo kunt u bijvoorbeeld niet-opgemaakte tekstbestanden importeren die u vanuit een<br />
e-mailprogramma hebt geëxporteerd, of gegevens ophalen uit databasebestanden die met een<br />
programma als Access, Outlook, Excel, enzovoort zijn gemaakt. U kunt zelfs tabellen op bestaande<br />
webpagina’s en gegevens uit ODBC-gegevensbronnen importeren!<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 221
Zodra u een gegevensbron hebt ingesteld, kunt u de samenvoeglijst (de lijst met gegevens<br />
die zullen worden samengevoegd) bewerken door de records te selecteren waaruit u gegevens<br />
wilt ophalen en er allerlei geavanceerde filter- en sorteercriteria voor in te stellen om de<br />
gegevens verder te verfijnen. Hiertoe moet u velden toevoegen aan een samenvoeggebied dat<br />
u eerder op uw webpagina hebt geplaatst. Dit samenvoeggebied is als het ware de container<br />
waarin de gegevens later zullen worden samengevoegd. Zo beschikt u binnen de kortste keren<br />
over een basislay-out die u naar een nieuwe website kunt samenvoegen, waarbij het gedefinieerde<br />
samenvoeggebied automatisch evenveel keer wordt gerepliceerd als er records zijn in<br />
de gegevensbron.<br />
Het programma ondersteunt ook geavanceerde samenvoegfuncties. Zo kunt u bijvoorbeeld<br />
gebruikmaken van bladwijzers om hyperlinks in te stellen tussen pagina’s met een beknopte<br />
beschrijving en een volledige beschrijving van elke record. U kunt ook samenvoegvelden invoegen<br />
in gegenereerde paginatitels, zodat gebruikers vanuit de lijst met een beknopt overzicht<br />
van elk item eenvoudig naar de bijbehorende pagina met een volledige beschrijving<br />
kunnen navigeren (zie Overige samenvoegfuncties verderop in deze handleiding).<br />
Voor e-commercetoepassingen kunt u gebruikmaken van een e-commercedatabase en terugkerende<br />
‘Nu kopen’- of ‘Toevoegen aan mandje’-formulieren om de vereiste gegevens samen<br />
te voegen. U kunt hiervoor ook samenvoeggebieden gebruiken. Het voordeel van samenvoegformulieren<br />
voor e-commercegegevens is echter dat dergelijke formulieren rechtstreeks<br />
transacties met een online betaalservice (bijvoorbeeld PayPal) mogelijk maken in de vorm<br />
van ‘Nu kopen’- of ‘Toevoegen aan mandje’-knoppen. Hierover leest u meer in ‘E-commercegegevens<br />
samenvoegen’ verderop in deze handleiding.<br />
Een gegevensbron maken<br />
U kunt eenvoudig een nieuwe Serif-database (*.sdb) maken vanuit het programma. Nadat u<br />
de vereiste gegevens hebt toegevoegd aan deze database, kunt u die als gegevensbron gebruiken<br />
om gegevens samen te voegen.<br />
Zo maakt u een nieuwe gegevensbron:<br />
1. Klik op Database maken op de werkbalk Gegevens samenvoegen (geef deze werkbalk<br />
indien nodig eerst weer via Beeld > Werkbalken > Gegevens samenvoegen).<br />
2. Navigeer in het dialoogvenster Nieuwe gegevensbron maken naar de map waarin u de<br />
database wilt opslaan, geef een bestandsnaam op voor de nieuwe database en klik op Opslaan.<br />
3. Klik in het dialoogvenster Database aanpassen op Invoegen om de vereiste velden toe te<br />
voegen aan uw database.<br />
4. Geef in het dialoogvenster Veldnaam een naam op voor het eerste veld dat u in de database<br />
wilt opnemen en klik op OK. Herhaal dit voor alle andere velden die u aan de database<br />
wilt toevoegen. Bevestig het dialoogvenster Database aanpassen tot slot met OK.<br />
5. Het dialoogvenster Database bewerken verschijnt, waarin de velden worden weergegeven<br />
die u hiervoor hebt gedefinieerd. Standaard worden in dit dialoogvenster de eerste zes<br />
velden in de database weergegeven. Gebruik indien nodig de schuifbalk aan de rechterkant<br />
om de overige velden weer te geven als u meer velden hebt gedefinieerd. Omdat het<br />
om een nieuwe database gaat, zijn de velden aanvankelijk nog leeg. U kunt nu naar keuze<br />
222 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
ofwel meteen gegevens beginnen in te voeren (dat wil zeggen records beginnen toe te<br />
voegen aan de database), of u kunt dit later doen. Om een record toe te voegen aan de<br />
database, typt u gewoon de vereiste gegevens in de verschillende velden. Klik vervolgens<br />
op Toevoegen om de record toe te voegen. Herhaal dit totdat de vereiste records aan de<br />
database zijn toegevoegd en klik tot slot op OK.<br />
6. Het dialoogvenster Lijst met samen te voegen gegevens verschijnt, waarin alle records<br />
worden weergegeven die u in de vorige stap hebt toegevoegd. Klik op OK om dit dialoogvenster<br />
te sluiten en naar de werkomgeving te gaan.<br />
U kunt met <strong>Studio</strong> <strong>Webdesign</strong> ook uw eigen fotodatabases maken. Merk op dat<br />
u in een dergelijke database behalve uw foto’s ook alle EXIF-gegevens kunt opslaan<br />
die automatisch zijn vastgelegd tijdens het maken van de foto’s. Raadpleeg<br />
het Help-bestand van het programma voor meer informatie.<br />
Samenvoeggebieden invoegen voor uw gegevens<br />
U kunt de gegevens in een gegevensbron pas samenvoegen nadat u die in een webpagina hebt<br />
opgenomen. <strong>Studio</strong> <strong>Webdesign</strong> steekt u op dit gebied een handje toe door u de mogelijkheid<br />
te bieden snel een terugkerende lay-out te definiëren die de vereiste plaatshouders (velden)<br />
bevat om een nieuw document te genereren dat evenveel pagina’s bevat als er records zijn in<br />
de gegevensbron en de vooraf gedefinieerde velden met tekst of afbeeldingen uit de opgegeven<br />
gegevensbron te vullen. Onthoud in dit verband dat u een onbeperkt aantal gegevensbronnen<br />
kunt maken, maar dat er per samenvoeggebied maar één gegevensbron geopend kan zijn.<br />
Merk op dat elk samenvoeggebied zijn eigen gegevensbron heeft en dat u op<br />
elke webpagina maar één samenvoeggebied kunt plaatsen.<br />
Een terugkerende lay-out begint met een samenvoeggebied, dat wil zeggen één enkele cel<br />
waarvan de grootte het aantal databaserecords bepaalt dat horizontaal en verticaal kan worden<br />
weergegeven op een pagina. Binnen dit samenvoeggebied kunt u verschillende elementen<br />
plaatsen, zoals:<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 223
* een of meer tekstvelden die gegevens bevatten die uit dezelfde record zijn opgehaald;<br />
* een of meer velden voor afbeeldingen waarin u samengevoegde afbeeldingen uit een welbepaalde<br />
gegevensrecord kunt weergeven;<br />
* allerlei andere elementen, zoals artistieke tekst, AutoVormen, enzovoort.<br />
Nadat u een samenvoeggebied hebt gemaakt en er de vereiste velden (of andere elementen)<br />
hebt aan toegevoegd, kunt u dit gebied en de velden die het bevat automatisch volgens een<br />
welbepaald patroon repliceren en de tekst of afbeeldingen uit uw gegevensbron naar een nieuwe<br />
website samenvoegen. Het samenvoeggebied wordt automatisch evenveel keer gerepliceerd<br />
als er records zijn in de gegevensbron, waarbij in elk gebied de gegevens uit een andere<br />
record worden weergegeven.<br />
Zo voegt u een samenvoeggebied in:<br />
1. Selecteer een geschikte gegevensbron.<br />
2. Klik op Samenvoeggebied invoegen op de werkbalk Gegevens samenvoegen.<br />
3. Klik in het dialoogvenster Database kiezen op Bladeren, selecteer de database die u als<br />
gegevensbron wilt gebruiken en klik op Openen. Klik vervolgens op OK. Let erop dat u<br />
vanuit dit dialoogvenster ook een nieuwe database kunt maken (zie ‘Een gegevensbron<br />
maken’ hiervoor).<br />
4. Het dialoogvenster Instellingen voor herhalen van samenvoeggebied verschijnt, waarin<br />
een paginalay-out wordt weergegeven die aanvankelijk uit een raster van 1x4 cellen bestaat:<br />
één samenvoeggebied horizontaal en vier verticaal. Via het voorbeeldvenster aan de<br />
linkerkant kunt u eenvoudig het resultaat van de huidige instellingen controleren<br />
5. U kunt ofwel rechtstreeks specifieke eigenschappen voor het samenvoeggebied (de basiseenheid)<br />
instellen in het dialoogvenster, of u kunt het dialoogvenster sluiten en via<br />
slepen-en-neerzetten de grootte en positie van het gebied instellen. U kunt ook een combinatie<br />
van beide methoden gebruiken door het dialoogvenster indien nodig opnieuw te<br />
openen.<br />
* Geef in het groepsvak Lay-out aan hoeveel keer u het samenvoeggebied horizontaal en<br />
verticaal wilt herhalen op de pagina. Merk op dat u ook de afstand tot de linker- en bovenrand<br />
van de pagina, de breedte en hoogte van het samenvoeggebied, en eventueel ook<br />
de horizontale of verticale afstand tussen de afzonderlijke samenvoeggebieden kunt instellen.<br />
Activeer het selectievakje Alle records op één pagina weergeven als u de grootte<br />
van de pagina automatisch wilt aanpassen, zodat alle records uit de gegevensbron op één<br />
enkele pagina kunnen worden weergegeven.<br />
* Klik en sleep op de pagina om de grootte en positie van het samenvoeggebied in te stellen.<br />
<strong>Studio</strong> <strong>Webdesign</strong> ‘onthoudt’ welke gegevensbron is ingesteld voor de pagina wanneer u de<br />
website opslaat. De volgende keer dat u uw project opent, wordt op de achtergrond automatisch<br />
ook de ingestelde gegevensbron geopend. Zolang u dezelfde gegevensbron gebruikt,<br />
hoeft u deze dus niet handmatig opnieuw te openen.<br />
224 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
E-commercegegevens samenvoegen<br />
De standaard samenvoegfuncties in <strong>Studio</strong> <strong>Webdesign</strong> zijn geschikt als u tekst, afbeeldingen<br />
of een combinatie van beide alleen maar wilt weergeven, bijvoorbeeld om een lijst of een<br />
galerij toe te voegen aan uw webpagina’s. Door de ingebouwde samenvoegfuncties echter in<br />
combinatie met een meer interactieve voorziening zoals formulieren voor het samenvoegen<br />
van e-commercegegevens te gebruiken, kunt u krachtige databasegestuurde e-commerceoplossingen<br />
maken die u in staat stellen artikelen rechtstreeks online te verkopen. Om dergelijke<br />
oplossingen te implementeren, moet u gebruikmaken van een e-commercedatabase. Deze<br />
database, die overigens een Serif-database (sdb-bestand) dient te zijn, moet een veldstructuur<br />
hebben die specifiek is voor de online betaalservice die u gebruikt om online transacties te<br />
verwerken (bijvoorbeeld PayPal).<br />
Om e-commercetransacties mogelijk te maken, moet u doorgaans een specifiek type e-commerceformulieren<br />
aan uw pagina’s toevoegen. Als internetgebruikers maar één artikel kunnen<br />
kopen op uw site, kunt u gebruikmaken van een terugkerend ‘Nu kopen’-formulier<br />
om ze rechtstreeks naar de kassa te leiden. Als gebruikers meerdere artikelen kunnen kopen,<br />
gebruikt u een terugkerend ‘Toevoegen aan mandje’-formulier. Omdat beide formulieren<br />
automatisch worden herhaald, wordt het desbetreffende formulier evenveel keer ‘opnieuw<br />
gegenereerd’ als er records zijn in uw gegevensbron bij het samenvoegen van de e-commercegegevens<br />
naar een nieuwe site. Hierbij worden op elk formulier gegevens uit één enkele record<br />
in de gegevensbron weergegeven. Lees ‘Een e-commerceobject invoegen (PayPal)’ eerder in<br />
dit hoofdstuk voor meer informatie.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 225
In plaats van een formulier dat automatisch wordt herhaald, kunt u ook een samenvoeggebied<br />
voor e-commercegegevens op uw webpagina plaatsen. Het gaat hierbij in wezen om een<br />
‘Alleen-weergeven’ versie van de bovengenoemde formulieren, zonder ‘Nu kopen’- of ‘Toevoegen<br />
aan mandje’-knoppen. Als u een dergelijk samenvoeggebied gebruikt, kunnen internetgebruikers<br />
uw artikelen dus wel bekijken, maar kunnen ze die niet kopen.<br />
Net als bij het samenvoegen van gewone databasegegevens kunt u bij het samenvoegen van<br />
e-commercegegevens gebruikmaken van samenvoeglijsten voor het selecteren, filteren en/of<br />
sorteren van de gegevens die u wilt samenvoegen. Nadat u een samenvoeglijst hebt gemaakt,<br />
kunt u de e-commercegegevens naar een nieuwe site samenvoegen en deze vervolgens publiceren<br />
(zie ‘De gegevens naar een nieuwe site samenvoegen en deze publiceren’ in het Helpbestand).<br />
Een e-commercedatabase maken<br />
U kunt rechtstreeks vanuit dit programma een e-commercedatabase maken door een online<br />
betaalservice te kiezen en de databasevelden te selecteren die specifiek zijn voor uw e-commerceprovider.<br />
Nadat u de vereiste records (dat wil zeggen de artikelen die u wilt verkopen)<br />
hebt toegevoegd aan deze database, kunt u deze als gegevensbron gebruiken om uw e-commercegegevens<br />
naar een nieuwe website samen te voegen.<br />
Zo maakt u een nieuwe e-commercedatabase:<br />
1. Klik op E-commercedatabase maken op de werkbalk Gegevens samenvoegen. (Geef<br />
deze werkbalk indien nodig eerst weer via Beeld > Werkbalken > Gegevens samenvoegen.)<br />
2. Kies de gewenste online betaalservice (bijvoorbeeld PayPal) in het dialoogvenster en klik<br />
op Volgende. Als u tot nu toe geen account hebt bij een online betaalservice, klikt u op Nu<br />
aanmelden en volgt u de aanwijzingen op het scherm.<br />
3. Geef in het dialoogvenster Nieuwe gegevensbron maken een naam op voor de nieuwe<br />
database, blader naar de map waarin u de database wilt opslaan en klik op Opslaan.<br />
4. In het dialoogvenster Database aanpassen vindt u een lijst met vooraf gedefinieerde velden<br />
voor de database. Welke velden dat zijn, is afhankelijk van de online betaalservice die<br />
u hebt gekozen. Gebruik dit dialoogvenster om velden toe te voegen, te verwijderen, te<br />
hernoemen en/of de volgorde ervan aan te passen. Klik daarna op OK.<br />
5. Klik in het dialoogvenster Lijst met samen te voegen e-commercegegevens op Toevoegen.<br />
6. Voeg in het dialoogvenster Artikelgegevens de vereiste records toe aan uw database. Ga<br />
hiertoe op dezelfde manier te werk als bij het invoegen van een e-commerceobject.<br />
7. Klik op OK om het dialoogvenster te sluiten.<br />
Lees ‘Een Serif-database bewerken’ in het Help-bestand van het programma voor meer informatie<br />
over hoe u een e-commercedatabase bewerkt.<br />
226 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Samenvoegformulieren en -gebieden voor e-commercegegevens invoegen<br />
U kunt op twee manieren te werk gaan als u met e-commercegegevens wilt werken. Ofwel<br />
maakt u gebruik van samenvoegformulieren voor uw e-commercegegevens ofwel gebruikt<br />
u hiervoor samenvoeggebieden. Het voordeel van samenvoegformulieren is dat ze interactie<br />
met uw online betaalservice mogelijk maken. In dat geval kan de gebruiker met andere woorden<br />
toegang krijgen tot PayPal om de transactie te voltooien. Samenvoeggebieden daarentegen<br />
kunnen alleen voor het weergeven van artikelen worden gebruikt.<br />
Zo voegt u een samenvoegformulier voor e-commercegegevens in:<br />
1. Klik op E-commerceobject invoegen in het vervolgmenu met e-commercegereedschappen<br />
op de werkbalk Webobjecten, of klik op Samenvoegformulier voor e-commercegegevens<br />
invoegen op de werkbalk Gegevens samenvoegen.<br />
2. Kies de gewenste online betaalservice (bijvoorbeeld PayPal) in het dialoogvenster en klik<br />
op Volgende. Als u tot nu toe geen account hebt bij een online betaalservice, klikt u op Nu<br />
aanmelden en volgt u de aanwijzingen op het scherm.<br />
3. Kies het e-mailadres dat u wilt gebruiken om betalingsinformatie te ontvangen (alleen<br />
voor nieuwe sites) en klik op Volgende.<br />
4. (Facultatief) Schakel in het volgende dialoogvenster het selectievakje Standaardadres van<br />
site gebruiken uit en selecteer het gewenste e-mailadres in de vervolgkeuzelijst of typ een<br />
nieuw e-mailadres in het invoervak als u een ander e-mailadres wilt gebruiken.<br />
5. Kies het gewenste type formulier in het groepsvak PayPal-formulier. U hebt de keuze<br />
uit:<br />
* Terugkerend ‘Nu kopen’-formulier: gebruik dit formulier als internetgebruikers maar<br />
één artikel kunnen kopen. Dit type formulier bevat ‘Nu kopen’-knoppen om gebruikers<br />
rechtstreeks naar de kassa te leiden. De vereiste gegevens worden opgehaald uit een<br />
e-commercedatabase die specifiek is voor uw online betaalservice en het samenvoegformulier<br />
wordt automatisch herhaald in samengevoegde webpagina’s.<br />
* Terugkerend ‘Toevoegen aan mandje’-formulier: gebruik dit formulier als internetgebruikers<br />
meerdere artikelen kunnen kopen op uw site. Dit type formulier vervult<br />
dezelfde functie als een ‘Nu kopen’-formulier, alleen wordt de gebruiker bij een ‘Toevoegen<br />
aan mandje’-formulier naar een winkelmandje geleid.<br />
* Samenvoeggebied: hiermee kunt u artikelen alleen weergeven. Een samenvoeggebied<br />
voor e-commercegegevens bevat geen ‘Nu kopen’- of ‘Toevoegen aan mandje’-knoppen.<br />
6. Selecteer in het volgende dialoogvenster de knop die u wilt gebruiken. Merk op dat dit<br />
dialoogvenster alleen verschijnt wanneer u hiervoor voor een van beide typen samenvoegformulieren<br />
hebt gekozen.<br />
7. Selecteer in het dialoogvenster Artikelgegevens een bestaande e-commercedatabase of<br />
maak een nieuwe database, en stel een valuta in voor velden waarin de prijs van een artikel<br />
wordt vermeld in uw database.<br />
8. In het dialoogvenster Klantgegevens kunt u aangeven of u de klant al dan niet om een<br />
adres wilt vragen, of als u hem wilt verplichten om een adres in te voeren. Desgewenst<br />
kunt u de klant om aanvullende informatie vragen voordat hij zijn bestelling bevestigt.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 227
Klik op Volgende om verder te gaan.<br />
9. In het dialoogvenster Betalingspagina’s kunt u de gewenste betaalopties instellen.<br />
10. Kies in het volgende dialoogvenster de gewenste lay-outopties voor uw formulier. Aan de<br />
hand van de selectievakjes in dit dialoogvenster kunt u nauwkeurig aangeven wat voor<br />
informatie u precies wilt weergeven op het formulier. Zo kunt u bijvoorbeeld instellen of<br />
u de naam en/of prijs van de artikelen wilt tonen op het formulier. Bij het ontwerpen van<br />
een samenvoegformulier kunt u ook aangeven of u een afbeelding en een gedetailleerde<br />
en/of korte beschrijving van elk artikel wilt weergeven op het formulier, de waarden van<br />
vaste opties wilt tonen, enzovoort. Desgewenst kunt u het formulier ook opnieuw opmaken<br />
nadat de gegevens zijn samengevoegd.<br />
11. Klik op Voltooien.<br />
12. Plaats de muisaanwijzer op de positie waar u het formulier wilt invoegen op de pagina<br />
en klik met de linkermuisknop. Let erop dat de velden in het formulier zich aanvankelijk<br />
op de standaardpositie bevinden (afhankelijk van de lay-out die u hiervoor hebt gekozen<br />
voor het formulier).<br />
<strong>Studio</strong> <strong>Webdesign</strong> ‘onthoudt’ welke gegevensbron is ingesteld voor de pagina<br />
wanneer u de website opslaat. De volgende keer dat u uw project opent, wordt<br />
op de achtergrond automatisch ook de ingestelde gegevensbron geopend.<br />
Zolang u dezelfde gegevensbron gebruikt, hoeft u deze dus niet handmatig<br />
opnieuw te openen.<br />
Zo voegt u een samenvoeggebied voor e-commercegegevens in:<br />
1. Selecteer een geschikte gegevensbron.<br />
2. Klik op Samenvoeggebied voor e-commercegegevens invoegen op de werkbalk Gegevens<br />
samenvoegen.<br />
3. Kies de gewenste online betaalservice (bijvoorbeeld PayPal) in het dialoogvenster en klik<br />
op Volgende. Als u tot nu toe geen account hebt bij een online betaalservice, klikt u op Nu<br />
aanmelden en volgt u de aanwijzingen op het scherm.<br />
4. Klik in het dialoogvenster E-commercedatabase kiezen op Bladeren, selecteer de database<br />
die u als gegevensbron wilt gebruiken en klik op Openen. Klik vervolgens op OK. Let<br />
erop dat u vanuit dit dialoogvenster ook een nieuwe database kunt maken . Vergeet niet de<br />
juiste valuta in te stellen.<br />
5. Het dialoogvenster Instellingen voor herhalen van samenvoeggebied verschijnt, waarin u<br />
de grootte en/of positie van het gebied kunt instellen.<br />
6. Klik op OK.<br />
228 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Overige samenvoegfuncties<br />
<strong>Studio</strong> <strong>Webdesign</strong> biedt enkele extra functies voor het samenvoegen van databasegegevens,<br />
ongeacht of u nu met gewone databases dan wel met e-commercedatabases werkt. Deze voorzieningen<br />
stellen u mogelijk in staat recordgegevens op diverse manieren weer te geven of<br />
ervoor te zorgen dat gebruikers vlotter door samengevoegde pagina’s kunnen navigeren, in<br />
het bijzonder tussen pagina’s met een beknopte beschrijving en een volledige beschrijving van<br />
artikelen.<br />
Samenvoeggebieden voor HTML-code toevoegen<br />
U kunt eenvoudige vervolgkeuzelijsten maken met behulp van samenvoeggebieden, bijvoorbeeld<br />
vervolgkeuzelijsten waarin gebruikers producten, opties of e-mailadressen kunnen selecteren<br />
die uit een database zijn opgehaald. Desgewenst kunt u hierbij gebruikmaken van<br />
een script, zodat automatisch een bepaalde actie wordt uitgevoerd wanneer de gebruiker een<br />
specifieke optie selecteert in de vervolgkeuzelijst.<br />
Denk eraan dat u ook formulieren kunt gebruiken om vervolgkeuzelijsten met een beperkt<br />
aantal opties te maken.<br />
Zo voegt u een samenvoeggebied voor HTML-code toe:<br />
1. Klik op Samenvoeggebied voor HTML-code invoegen op de werkbalk Gegevens samenvoegen.<br />
2. De muisaanwijzer krijgt de volgende vorm: . De handeling die u nu uitvoert, bepaalt de<br />
aanvankelijke grootte en positie van het samenvoeggebied.<br />
Klik met de muis op de positie waar u het samenvoeggebied wilt invoegen als u de standaardafmetingen<br />
wilt gebruiken voor het gebied. Klik en sleep op de pagina als u aangepaste<br />
afmetingen wilt instellen voor het gebied.<br />
3. Klik terwijl het samenvoeggebied is geselecteerd op op de optiebalk als u het<br />
gebied aan een database wilt koppelen.<br />
4. Dubbelklik op het samenvoeggebied als u de onderliggende HTML-code wilt weergeven<br />
en bewerken, of klik op HTML-code toevoegen op de optiebalk terwijl het gebied is geselecteerd.<br />
5. Voeg de vereiste HTML-tags en databasevelden in tussen de Body Preamble-tags: SELECT<br />
om het object te maken en OPTION om de naam van het databaseveld in het samenvoeggebied<br />
te kunnen plaatsen. Typ vervolgens tussen de OPTION-tags het databaseveld dat u<br />
aan het samenvoeggebied wilt toevoegen. Gebruik de onderstaande figuur als leidraad.<br />
6. Voeg de site samen en bekijk een voorbeeld van de webpagina.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 229
Lees ‘HTML-code toevoegen’ eerder in dit hoofdstuk voor meer informatie over het bewerken<br />
van HTML-code.<br />
Bladwijzers toevoegen<br />
U kunt bladwijzers gebruiken om een hyperlink in te stellen tussen de naam van een artikel in<br />
een eenvoudige overzichtslijst en de bijbehorende pagina met een volledige beschrijving van<br />
het artikel. Merk op dat u de bladwijzer moet instellen in het samenvoeggebied/-formulier op<br />
de pagina met de volledige beschrijving. Nadat u de bladwijzer hebt ingesteld, kunt u via het<br />
dialoogvenster Hyperlinks een hyperlink naar deze bladwijzer definiëren (zie ‘Hyperlinks en<br />
bladwijzers toevoegen’ in hoofdstuk 11).<br />
Samenvoegvelden toevoegen<br />
U kunt een samenvoegveld invoegen in de paginanaam van pagina’s die een volledige beschrijving<br />
van een artikel bevatten om correct naar de naam van het artikel te kunnen verwijzen<br />
in de paginatitel. U kunt samenvoegvelden ook gebruiken om velden te declareren in<br />
samenvoeggebieden voor HTML-code.<br />
Zo voegt u een samenvoegveld toe:<br />
1. Klik met de rechtermuisknop op de pagina en kies Eigenschappen van pagina in het<br />
snelmenu.<br />
2. Klik op de positie waar u het veld wilt invoegen in het vak Paginanaam en klik vervolgens<br />
op Samenvoegveld invoegen vlak naast het invoervak.<br />
3. Selecteer in het dialoogvenster het veld dat u wilt invoegen en klik op Invoegen.<br />
4. Klik op OK.<br />
Met intelligente objecten werken<br />
<strong>Webdesign</strong>ers nemen soms elementen van bestaande websites over om tijd te besparen. (Hierbij<br />
nemen ze vanzelfsprekend de auteursrechten op het desbetreffende materiaal in acht.) Als<br />
het om eenvoudige afbeeldingen of tekst gaat, doen zich op dit gebied geen problemen voor.<br />
Voor complexere interactieve objecten zoals tellers, chatvensters, blogs, enzovoort is zoiets<br />
echter niet mogelijk, omdat dergelijke objecten worden gebruikt om gegevens te verzamelen.<br />
Zo is de grote kracht van tellers die het aantal hits registreren bijvoorbeeld dat ze toelaten na te<br />
gaan hoeveel gebruikers een webpagina hebben bekeken. Deze waarde moet natuurlijk ergens<br />
worden opgeslagen, en dat is nu net waar het schoentje wringt. Bij veel ISP’s wordt het opslaan<br />
van objectgegevens zoals het aantal hits, chattekst, blogtekst, enzovoort niet aangemoedigd,<br />
omdat dit beveiligingsrisico’s inhoudt en omdat dergelijke gegevens veel schijfruimte vergen.<br />
Bij sommige ISP’s is dit zelfs niet toegestaan! Waar kunt u deze gegevens dan wel opslaan?<br />
In <strong>Studio</strong> <strong>Webdesign</strong> kunt u dergelijke server-side objecten (intelligente objecten genoemd<br />
in het programma) op uw eigen webpagina’s plaatsen en de gegevens die deze objecten genereren<br />
op de beveiligde server van Serif opslaan. Alle intelligente objecten zijn toegankelijk<br />
via Serif Web Resources, een beveiligde online service waar u de objecten kunt ophalen en<br />
tegelijkertijd de gegevens kunt opslaan die deze objecten verzamelen.<br />
230 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Een ander voordeel van de intelligente objecten is dat ze grondig zijn getest en een voor een<br />
voor <strong>Studio</strong> <strong>Webdesign</strong> zijn geoptimaliseerd. Daar komt nog bij dat de objecten online worden<br />
aangeboden, zodat er mogelijk regelmatig nieuwe updates beschikbaar zijn. In dat geval<br />
worden automatisch ook de objecten in uw site bijgewerkt, zonder dat u <strong>Studio</strong> <strong>Webdesign</strong><br />
hoeft te starten en delen van uw site opnieuw hoeft te publiceren.<br />
Laten we even nagaan wat voor objecten er zoal beschikbaar zijn en wat u ermee kunt doen.<br />
Naam<br />
Toegangscontrole<br />
Huidig aantal bezoekers<br />
Blog<br />
Forum<br />
Aantal hits<br />
Mailinglijst<br />
Nieuws<br />
Functie<br />
Hiermee kunt u de toegang beperken tot bepaalde delen van uw<br />
site door gebruikerslijsten of -groepen in te stellen.<br />
Lees ‘Toegangscontrole’ in hoofdstuk 3 voor meer informatie.<br />
Dit intelligente object toont bezoekers hoeveel andere internetgebruikers<br />
uw site op dit moment ook aan het bekijken zijn.<br />
Een blog (of voluit weblog) is een soort persoonlijk dagboek op<br />
uw webpagina’s dat u regelmatig kunt bijwerken en waarmee u<br />
andere internetgebruikers op de hoogte kunt stellen van wat er<br />
zoal gebeurt in uw leven. Kenmerkend voor een blog is dat bezoekers<br />
commentaar kunnen geven op uw berichten (ook wel<br />
‘posts’ genoemd).<br />
Hiermee voegt u een op threads gebaseerd discussieforum toe<br />
aan uw site.<br />
Gebruikers kunnen nagaan hoeveel onderwerpen er worden behandeld<br />
in uw forum, wat voor berichten andere gebruikers zoal<br />
hebben achtergelaten en wanneer het laatste bericht werd gepost.<br />
Vanzelfsprekend kunnen ze ook zelf berichten posten in het forum.<br />
Met dit object kunt u eenvoudig nagaan hoeveel keren de huidige<br />
webpagina al is bekeken. U kunt uit verschillende stijlen kiezen<br />
voor de teller en deze indien nodig op elk moment weer op nul<br />
zetten.<br />
Met dit intelligente object kunnen internetgebruikers zich op een<br />
nieuwsbrief abonneren, een uitnodiging bevestigen, informatie<br />
aanvragen, enzovoort. Nadat een bezoeker heeft bevestigd dat hij<br />
aan de mailinglijst wil worden toegevoegd door zijn e-mailadres<br />
te registreren, wordt zijn adres samen met dat van andere abonnees<br />
opgeslagen, zodat u hem in de toekomst bijvoorbeeld regelmatig<br />
nieuwsbrieven kunt sturen.<br />
Hiermee voegt u een venster waarin u allerlei actuele informatie<br />
kunt weergeven toe aan uw webpagina’s. Het object ondersteunt<br />
het gebruik van alineaopmaakprofielen, hyperlinks en mediabestanden.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 231
Opiniepeiling<br />
Chatbox<br />
Analyse van site<br />
Gebruik dit intelligente object om uw bezoekers naar hun mening<br />
te vragen over een bepaald onderwerp.<br />
Een chatbox is een interactief chatvenster dat op dat van Windows<br />
Messenger lijkt. Door een chatbox aan uw pagina’s toe te<br />
voegen, stelt u bezoekers in staat real-time berichten met elkaar<br />
uit te wisselen.<br />
Hiermee kunt u allerlei gebruikersstatistieken verzamelen en die<br />
vervolgens analyseren. Merk op dat u deze voorziening via het<br />
dialoogvenster Eigenschappen van site moet inschakelen (zie<br />
hoofdstuk 3) en dat u die niet aan de pagina kunt toevoegen.<br />
Om beveiligingsredenen moet u zich aanmelden bij Serif Web Resources om toegang te krijgen<br />
tot de intelligente objecten. U kunt dit rechtstreeks vanuit het programma doen. Mocht u<br />
hiertoe niet over een geldige gebruikersnaam en een geldig wachtwoord beschikken, moet u<br />
eerst een Serif Web Resources-account aanmaken.<br />
Zo maakt u een account aan:<br />
1. Klik op Intelligent object toevoegen op de werkbalk Webobjecten.<br />
2. Klik in het aanmeldingsvenster op Account maken.<br />
3. Voer in het volgende dialoogvenster uw e-mailadres in. Kies vervolgens een wachtwoord<br />
en bevestig het. Merk op dat u moet aangeven dat u akkoord gaat met de gebruiksvoorwaarden<br />
voordat u verder kunt gaan. Activeer daartoe het overeenkomstige selectievakje.<br />
4. Klik op Registratie.<br />
5. Geef in het dialoogvenster dat daarop verschijnt de vereiste persoonlijke gegevens op.<br />
Activeer de overeenkomstige selectievakjes als u de nieuwsbrief van Serif, informatie over<br />
speciale aanbiedingen en/of speciale aanbiedingen van handelspartners van Serif wenst te<br />
ontvangen.<br />
6. Enige tijd later wordt u per e-mail een bevestiging toegestuurd. Klik op de link in dit e-<br />
mailbericht om uw account te activeren.<br />
Zo wist u uw accountgegevens:<br />
* Kies Extra > Opties > Algemeen en klik op Accountgegevens wissen. Hiermee wist u de<br />
opgeslagen aanmeldingsgegevens voor de online resources, zodat u zich niet meer automatisch<br />
kunt aanmelden bij de service. De volgende keer dat u zich aanmeldt, moet u dus<br />
opnieuw uw gebruikersnaam en wachtwoord invoeren.<br />
Zo krijgt u toegang tot de webresources:<br />
1. Klik op Intelligent object toevoegen op de werkbalk Webobjecten.<br />
2. Voer in het aanmeldingsvenster uw gebruikersnaam en wachtwoord in. Activeer het selectievakje<br />
Accountgegevens opslaan als u voortaan rechtstreeks toegang wilt krijgen tot<br />
de webresources, zonder dat u telkens uw gebruikersnaam en wachtwoord hoeft in te voeren.<br />
3. Klik op Aanmelden. Het dialoogvenster Intelligente objecten verschijnt.<br />
232 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Intelligente objecten maken<br />
U beschouwt het begrip ‘intelligente objecten’ het beste als een algemene term voor de dynamische<br />
elementen die u zult gebruiken op uw pagina’s. Merk op dat intelligente objecten niet<br />
rechtstreeks aan de pagina worden toegevoegd vanaf Serif Web Resources, maar dat ze eerst<br />
aan uw persoonlijke lijst met intelligente objecten worden toegevoegd. Via deze lijst kunt u<br />
uw intelligente objecten eenvoudig beheren en bewerken, waarna u ze naar keuze ofwel onmiddellijk<br />
ofwel later aan uw webpagina’s kunt toevoegen.<br />
Sommige intelligente objecten zijn van andere intelligente objecten afhankelijk.<br />
Zo kunt u bijvoorbeeld pas een forum toevoegen aan uw site nadat u eerst een<br />
intelligent object voor toegangscontrole hebt gemaakt.<br />
Zo voegt u een intelligent object toe aan uw persoonlijke lijst:<br />
1. Klik op Nieuw onder het deelvenster Mijn lijst met intelligente objecten.<br />
2. Blader in het dialoogvenster Intelligent object maken door de lijst met beschikbare objecten<br />
en klik op het object dat u wilt maken om het te selecteren.<br />
3. Selecteer in de vervolgkeuzelijst Taal eventueel de juiste taal als u liever met een object in<br />
uw eigen taal werkt in plaats van met een Engelstalig object.<br />
4. Klik op OK. Afhankelijk van het type object dat u hebt geselecteerd, verschijnt er een<br />
dialoogvenster waarin u opties kunt instellen die specifiek zijn voor dat type intelligent<br />
object.<br />
Klik op Help in het dialoogvenster Intelligente objecten voor aanvullende<br />
informatie over de opties die u zoal kunt instellen voor de verschillende soorten<br />
intelligente objecten.<br />
5. Wijzig de naam van het object en typ eventueel een tekenreeks in het invoervak Off-site<br />
filteren (om te voorkomen dat de URL wordt gekopieerd). Wijzig desgewenst ook de overige<br />
eigenschappen van het object. Zo kunt u bij sommige intelligente objecten bijvoorbeeld<br />
de kleur, het lettertype en de tekengrootte van de titel aanpassen, een aangepaste<br />
kleur instellen voor de tekst, en de randkleur en randdikte wijzigen. (toegankelijk via de<br />
knop Help in het dialoogvenster Intelligente objecten) voor meer informatie.<br />
6. Klik op OK.<br />
Het nieuwe object wordt aan uw persoonlijke lijst met intelligente objecten toegevoegd. Hier<br />
is een voorbeeld van de intelligente objecten die u zoal kunt maken:<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 233
Als u meerdere websites ontwikkelt, kunt u wellicht beter de naam van de site<br />
waarvoor u een nieuw object maakt in de naam van het intelligente object opnemen.<br />
Zo kunt u de intelligente objecten voor de afzonderlijke sites eenvoudiger<br />
van elkaar onderscheiden.<br />
Op het intelligente object Analyse van site na, kunt u alle intelligente objecten rechtstreeks op<br />
uw eigen webpagina’s plaatsen. Bij sommige intelligente objecten is het soms echter zinvoller<br />
het desbetreffende object rechtstreeks via Serif Web Resources toegankelijk te maken (aan de<br />
hand van een offsite link of hyperlink) in plaats van het op uw eigen pagina’s te plaatsen. Dat<br />
geldt bijvoorbeeld voor forums en blogs. Door dergelijke intelligente objecten rechtstreeks<br />
vanaf de server van Serif toegankelijk te maken, voorkomt u dat internetgebruikers door het<br />
venster moeten schuiven wanneer de objecten de ingestelde pagina-afmetingen overschrijden.<br />
Zo voegt u een intelligent object toe aan een webpagina:<br />
1. Selecteer het object dat u wilt toevoegen in uw persoonlijke lijst met intelligente objecten<br />
links in het dialoogvenster Intelligente objecten en klik op Invoegen.<br />
2. Plaats de muisaanwijzer op de positie waar het intelligente object moet verschijnen op<br />
de pagina en klik met de linkermuisknop als u de vooraf gedefinieerde afmetingen wilt<br />
gebruiken voor het object. Klik en sleep op de pagina als u aangepaste afmetingen wilt<br />
instellen voor het object.<br />
Er wordt automatisch een voorbeeld van het object weergegeven op de pagina, zodat u meteen<br />
een idee hebt van hoe het er op uw uiteindelijke website zal uitzien.<br />
Intelligente objecten bewerken<br />
U kunt een intelligent object naar behoefte bewerken nadat u het hebt gemaakt. U kunt dit<br />
ofwel rechtstreeks op de pagina doen ofwel vanuit uw persoonlijke lijst met intelligente objecten.<br />
Zo kunt u bijvoorbeeld het uiterlijk van een intelligent object wijzigen, een andere vraag<br />
stellen in een opiniepeiling of een teller weer op nul zetten.<br />
Merk op dat het bewerken van een intelligent object alleen een invloed heeft op het object zelf<br />
en niet op de gegevens die met dit object zijn verzameld.<br />
De opties om intelligente objecten te bewerken, zijn dezelfde als die om ze te maken. Het<br />
enige verschil is dat de naam van de objecten Alleen-lezen is (een lichtgrijze kleur heeft) in de<br />
dialoogvensters om intelligente objecten te bewerken.<br />
234 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Zo bewerkt u een intelligent object in uw persoonlijke lijst:<br />
1. Klik op Intelligent object toevoegen op de werkbalk Webobjecten (meld u zo nodig<br />
aan bij Serif Web Resources).<br />
2. Selecteer het object dat u wilt bewerken in het deelvenster Mijn lijst met intelligente<br />
objecten links in het dialoogvenster.<br />
3. Klik in het deelvenster aan de rechterkant op .<br />
4. Het eigenschappenvenster van het object verschijnt. Breng de gewenste wijzigingen aan in<br />
dit venster en klik vervolgens op Opslaan. Klik op Help in het dialoogvenster Intelligente<br />
objecten voor aanvullende informatie over de opties die u zoal kunt instellen voor de verschillende<br />
soorten intelligente objecten.<br />
Zo bewerkt u een intelligent object rechtstreeks op de pagina:<br />
* Dubbelklik op het object om het eigenschappenvenster weer te geven..<br />
Als u een intelligent object rechtstreeks op de pagina bewerkt, worden de<br />
wijzigingen die u aanbrengt ook doorgevoerd in uw persoonlijke lijst met intelligente<br />
objecten en omgekeerd.<br />
Intelligente objecten beheren<br />
Met de functie om intelligente objecten te beheren, kunt u de gegevens beheren die door een<br />
intelligent object worden verzameld nadat u uw site hebt gepubliceerd. Merk op dat u sommige<br />
intelligente objecten (zoals tellers) niet hoeft te beheren, omdat de waarde automatisch<br />
wordt verhoogd telkens als iemand uw website bezoekt. (Desgewenst kunt u een teller echter<br />
wel opnieuw op nul zetten.) Bij andere intelligente objecten, zoals blogs, mailinglijsten,<br />
opiniepeilingen en chatvensters, worden echter respectievelijk artikelen, e-mailadressen, de<br />
resultaten van een onderzoek en chatberichten verzameld en opgeslagen. Dergelijke objecten<br />
wilt u waarschijnlijk wel beheren.<br />
Raadpleeg de contextgevoelige hulp (toegankelijk via de knop Help in het<br />
dialoogvenster Intelligente objecten) voor meer informatie over de opties die<br />
zoal beschikbaar zijn voor het beheren van de verschillende soorten intelligente<br />
objecten.<br />
Zo beheert u een intelligent object vanuit uw persoonlijke lijst:<br />
1. Klik op Intelligent object toevoegen op de werkbalk Webobjecten (meld u zo nodig<br />
aan bij Serif Web Resources).<br />
2. Selecteer het object dat u wilt beheren in het deelvenster Mijn lijst met intelligente objecten<br />
aan de linkerkant.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 235
3. Klik in het deelvenster aan de rechterkant op . Welke opties precies beschikbaar<br />
zijn, is afhankelijk van het type object dat u hebt geselecteerd. Hier is een overzicht.<br />
Objecttype Reden om het object te beheren Hoe?<br />
Toegangscontrole<br />
Blog<br />
De toegang beperken tot bepaalde<br />
delen van uw site door gebruikerslijsten<br />
of -groepen in te stellen.<br />
* CAPTCHA-beveiliging inschakelen<br />
om spam te voorkomen.<br />
* Gebruikersgroepen maken (met<br />
de mogelijkheid gebruikers in<br />
staat te stellen zich automatisch<br />
aan te melden en/of te registreren).<br />
* Gebruikers toevoegen, verwijderen,<br />
bannen of blokkeren in<br />
gebruikersgroepen.<br />
Artikelen toevoegen, bewerken of<br />
verwijderen, de opmerkingen bij een<br />
artikel beheren, en een auteursgroep<br />
kiezen.<br />
Bij het aanmaken en bewerken van<br />
artikelen kunt u gebruikmaken van<br />
de ingebouwde RTF-editor. Hierbij<br />
kunt u tags toevoegen, instellen wie<br />
de auteur van een artikel is, aangeven<br />
of trackbacks zijn toegestaan en<br />
opmerkingen toevoegen.<br />
• Zie ‘Toegangscontrole’ in hoofdstuk<br />
3.<br />
• Klik op Nieuw als u een artikel<br />
wilt toevoegen.<br />
• Om een bestaand artikel in uw<br />
blog te bewerken, klikt u op Bewerken.<br />
• Klik op Verwijderen als u een bestaand<br />
artikel wilt verwijderen.<br />
• Klik op Opmerkingen als u de<br />
opmerkingen bij een artikel wilt<br />
beheren. Als u een bepaalde opmerking<br />
wilt verwijderen, selecteert<br />
u deze en klikt u op Wissen.<br />
• Selecteer via de vervolgkeuzelijst<br />
Auteursgroep bovenaan een gebruikersgroep<br />
waaraan u eerder<br />
meerdere auteurs hebt toegevoegd<br />
als u meerdere gebruikers in staat<br />
wilt stellen artikelen te posten in<br />
de blog.<br />
236 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Objecttype Reden om het object te beheren Hoe?<br />
Forum<br />
Mailinglijst<br />
Bepalen of niet-geregistreerde<br />
gebruikers toegang hebben tot het<br />
forum, categorieën toevoegen of ze<br />
een andere naam geven, een thema<br />
kiezen voor het forum, gebruikers<br />
classificeren, enzovoort.<br />
Het e-mailadres van een gebruiker<br />
(of alle e-mailadressen) verwijderen,<br />
de mailinglijst als bestand met<br />
lijstscheidingstekens (*.csv) opslaan,<br />
of de verzamelde e-mailadressen met<br />
een intelligent object voor toegangscontrole<br />
synchroniseren.<br />
• Stel via het vak Privacy machtigingen<br />
in voor niet-geregistreerde<br />
gebruikers.<br />
• Gebruik de knoppen Categorie<br />
toevoegen en Forum toevoegen<br />
in het vak Beheer van forum als u<br />
nieuwe categorieën of subforums<br />
wilt toevoegen. Klik op Categorie<br />
bijwerken of Forum bijwerken<br />
om een categorie of subforum bij<br />
te werken nadat u de naam ervan<br />
hebt gewijzigd.<br />
• Stel via de vervolgkeuzelijst in<br />
het vak Thema een andere stijl in<br />
voor uw forum als u de look-andfeel<br />
ervan wilt wijzigen.<br />
• Klik op Classificatie toevoegen<br />
in het vak Gebruikers classificeren<br />
als u een nieuwe classificatie<br />
wilt toevoegen om gebruikers te<br />
classificeren. Selecteer vervolgens<br />
in de vervolgkeuzelijst boven aan<br />
het vak de gebruiker aan wie u<br />
deze classificatie wilt toekennen.<br />
Gebruik de opties onder Classificaties<br />
bewerken om de ingestelde<br />
classificaties te bewerken.<br />
• Als u een e-mailadres wilt verwijderen<br />
uit de lijst, selecteert u het<br />
en drukt u op Delete. Klik op Alles<br />
wissen als u alle e-mailadressen<br />
wilt verwijderen.<br />
• Om de mailinglijst als bestand<br />
met lijstscheidingstekens op te<br />
slaan, kiest u de gewenste indeling<br />
in de vervolgkeuzelijst Opslaan<br />
als en klikt u op Opslaan.<br />
• Om de mailinglijst met een intelligent<br />
object voor toegangscontrole<br />
te synchroniseren, klikt u op<br />
Synchroniseren met account.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 237
Objecttype Reden om het object te beheren Hoe?<br />
Nieuws Nieuwsberichten bijwerken. • Bewerk de tekst via de ingebouwde<br />
RTF-editor en klik vervolgens<br />
op Opslaan.<br />
Opiniepeiling<br />
Het aantal uitgebrachte stemmen<br />
voor een specifieke vraag of het<br />
aantal stemmen voor de volledige<br />
opiniepeiling weer op nul instellen.<br />
• Klik op de link Klik hier om het<br />
aantal uitgebrachte stemmen<br />
voor deze vraag weer op nul in te<br />
stellen of klik op de knop Beginwaarden.<br />
Chatbox Ongewenste regels verwijderen. • Selecteer een vermelding en druk<br />
op Delete als u deze wilt verwijderen.<br />
Als u alle vermeldingen<br />
wilt verwijderen, klikt u op Alles<br />
wissen.<br />
Analyse van<br />
site<br />
Gebruikersstatistieken zoals het<br />
aantal keren dat uw site is bekeken,<br />
de browser die internetgebruikers<br />
gebruiken, enzovoort weergeven.<br />
• Selecteer een categorie gegevens<br />
in de vervolgkeuzelijst.<br />
• Selecteer de periode waarvoor u<br />
de verzamelde statistieken wilt<br />
weergeven.<br />
Zo beheert u intelligente objecten rechtstreeks via internet:<br />
* Ga naar www.serifwebresources.com als u al uw intelligente objecten wilt beheren zonder<br />
dat dit een invloed heeft op uw project. Meld u op de gebruikelijke manier aan bij Serif<br />
Web Resources.<br />
Intelligente objecten verwijderen<br />
Zo verwijdert u een intelligent object uit uw persoonlijke lijst:<br />
* Selecteer het object dat u wilt verwijderen in het deelvenster Mijn lijst met intelligente<br />
objecten aan de linkerkant en klik op Verwijderen. Beantwoord de vraag om bevestiging<br />
met Verwijderen.<br />
Als u een intelligent object verwijdert, wordt op elke pagina waarop u dit object hebt gebruikt<br />
en die u naar de server hebt geüpload een leeg gebied weergegeven, totdat u het object hebt<br />
verwijderd uit het overeenkomstige <strong>Webdesign</strong>-document en de website opnieuw hebt geüpload.<br />
Zo verwijdert u een intelligent object op de pagina:<br />
* Selecteer het intelligente object op uw webpagina en druk op Delete op het toetsenbord.<br />
238 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
13 Een voorbeeld bekijken<br />
en de site publiceren<br />
Een voorbeeld bekijken van uw website<br />
Een voorbeeld bekijken van uw site is een belangrijke stap voordat u deze op het web publiceert.<br />
Alleen zo kunt u nagaan wat internetgebruikers uiteindelijk te zien zullen krijgen wanneer<br />
ze uw website bekijken. U kunt zowel een voorbeeld bekijken van afzonderlijke pagina’s<br />
als van de volledige website, hetzij rechtstreeks in het programma (in een venster dat op het<br />
browservenster van Internet Explorer is gebaseerd) hetzij met een willekeurige browser die<br />
op uw systeem is geïnstalleerd.<br />
Zo geeft u een voorbeeld weer van uw website:<br />
1. Klik op het pijltje naast de knop Voorbeeld bekijken op de standaardwerkbalk.<br />
2. Kies de gewenste optie in het vervolgmenu:<br />
* Kies Voorbeeld in venster (of druk op Alt+P) als u de site in een nieuw documentvenster<br />
wilt openen. Met de bijbehorende venstertab boven in het programmavenster kunt<br />
u eenvoudig tussen het projectbestand en het voorbeeld wisselen. (Lees ‘Met meerdere<br />
sites werken’ in hoofdstuk 2 voor meer informatie over het werken met meerdere documentvensters.)<br />
* Kies Pagina in bekijken of Website in bekijken als u een externe<br />
browser wilt gebruiken om een voorbeeld te bekijken. Welke opties precies beschikbaar<br />
zijn, is afhankelijk van de browsers die op uw systeem zijn geïnstalleerd. Als<br />
u bijvoorbeeld Microsoft Internet Explorer hebt geïnstalleerd, wordt hier Pagina in<br />
Internet Explorer bekijken weergegeven. Als u meerdere browsers hebt geïnstalleerd,<br />
kunt u via de opdracht Lijst met browsers de browsers selecteren die u wilt gebruiken<br />
om een voorbeeld te bekijken van uw site. Merk op dat de pagina of site naar een tijdelijke<br />
map wordt geëxporteerd wanneer u er een voorbeeld van weergeeft.<br />
Als u rechtstreeks in het programma een voorbeeld bekijkt, kunt u de knoppen op de optiebalk<br />
gebruiken om naar de vorige of volgende pagina te gaan, de weergave te vernieuwen<br />
of het voorbeeld te sluiten. Via de vervolgkeuzelijst uiterst rechts op de optiebalk kunt u de<br />
huidige pagina in diverse standaardresoluties of in een aangepaste beeldschermresolutie bekijken.<br />
Zo bewerkt u de lijst met beschikbare browsers in het vervolgmenu:<br />
1. Kies Bestand > Voorbeeld bekijken van site (of open het vervolgmenu met voorvertoningsopties<br />
op de standaardwerkbalk) en klik op Lijst met browsers. In het dialoogvenster<br />
dat daarop verschijnt, worden alle browsers weergegeven die op uw systeem zijn<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 239
geïnstalleerd. Merk op dat de volgorde waarin de browsers hier worden weergegeven,<br />
overeenkomt met de volgorde van de overeenkomstige menuopties in het vervolgmenu<br />
met voorvertoningsopties.<br />
2. Breng de gewenste wijzigingen aan:<br />
* Klik op Auto detect. om de lijst automatisch te vernieuwen. Als u handmatig een browser<br />
wilt toevoegen aan de lijst, klikt u op Toevoegen.<br />
* Als u een browser wilt verwijderen uit de lijst, selecteert u deze en klikt u op Verwijderen.<br />
* Gebruik de knoppen Omhoog en Omlaag om de volgorde van de browsers te wijzigen.<br />
* Als u het pad naar een browser wilt aanpassen of de naam die voor deze browser wordt<br />
weergegeven in het vervolgmenu, selecteert u deze en klikt u op Bewerken. Zo kunt u<br />
bijvoorbeeld gewoon ‘IE7’ in plaats van ‘Internet Explorer’ weergeven in het vervolgmenu.<br />
3. Klik op OK om uw wijzigingen te bevestigen.<br />
Test uw site bij voorkeur in verschillende veelgebruikte browsers om zeker te<br />
stellen dat deze in elke browser op exact dezelfde manier wordt weergegeven.<br />
Uw site op het web publiceren<br />
Zodra uw webproject af is, kunt u het rechtstreeks vanuit het programma naar een ‘live’ website<br />
converteren en naar de server van uw webhost of internetaanbieder uploaden, zodat de<br />
hele wereld uw site kan bekijken! Hierbij kunt u aangeven of u alle webpagina’s in uw site wilt<br />
publiceren of (bij het uitvoeren van een update) alleen pagina’s die gewijzigd zijn sinds u de<br />
site voor het laatst hebt geüpload.<br />
Voordat u uw website op het web publiceert, kunt u deze echter beter eerst op fouten controleren<br />
met de ingebouwde voorziening Site op fouten controleren (toegankelijk via Extra<br />
> Sitebeheer).<br />
Denk eraan dat u de website op elk moment naar een lokale map kunt publiceren.<br />
Zo kunt u uw website offline testen voordat u deze op het web publiceert.<br />
Hoe u dit doet, leest u in het Help-bestand van het programma.<br />
Zo publiceert u de website op het web:<br />
1. Kies Eigenschappen van site in het menu Bestand en controleer voor alle zekerheid nog<br />
een keer de gekozen exportinstellingen, vooral die op het tabblad Afbeeldingen.<br />
240 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
2. Klik op Op het web publiceren op de standaardwerkbalk of kies Website publiceren ><br />
Op het web publiceren in het menu Bestand<br />
Als dit de eerste keer is dat u een website publiceert, moet u eerst een account instellen. U<br />
dient minstens één account in te stellen voordat u verder kunt gaan.<br />
1. Klik op Accounts om het dialoogvenster Accountgegevens weer te geven.<br />
2. Geef in dit dialoogvenster de vereiste accountgegevens op:<br />
* Accountnaam: hier kunt u een willekeurige naam invoeren. Aan de hand van deze<br />
naam vindt u de account later gemakkelijker terug (als u meerdere accounts hebt ingesteld).<br />
* FTP-adres: typ hier de URL (bijvoorbeeld “ftp://mijn.webserver.com”) van de webserver<br />
waarnaar u de bestanden wilt uploaden. Deze URL wordt door uw ISP meegedeeld.<br />
* Poortnummer: behoud hier de standaardinstelling (poort 21), tenzij uw ISP u uitdrukkelijk<br />
heeft verzocht een andere poort te gebruiken.<br />
* Map: dit vak kunt u leeg laten, tenzij u websites bij uw ISP naar een welbepaalde map<br />
moet uploaden of uw site naar een specifieke submap van uw hoofddirectory wilt uploaden.<br />
* Verder hebt u ook een gebruikersnaam en wachtwoord nodig. Ook deze informatie<br />
hebt u normaal gesproken van uw ISP gekregen. Doorgaans kunt u de gegevens gebruiken<br />
die u ook nodig hebt om verbinding te maken met de e-mailserver van uw ISP. Let<br />
op het onderscheid tussen hoofdletters en kleine letters wanneer u het wachtwoord<br />
invoert. Als u het verkeerde wachtwoord opgeeft, kunt u zich niet aanmelden bij de server!<br />
Activeer het selectievakje Wachtwoord opslaan als u wilt voorkomen dat u iedere<br />
keer het wachtwoord moet invoeren telkens als u bestanden wilt uploaden.<br />
* Passieve modus: schakel deze optie alleen uit als u geen verbinding kunt maken met<br />
de FTP-server van uw internetaanbieder. Bij sommige ISP’s moet u de actieve modus<br />
gebruiken om bestanden over te dragen via FTP, bij andere de passieve modus.<br />
* URL van website: typ hier de URL van uw website. Dan kunt u de website rechtstreeks<br />
vanuit het programma online bekijken nadat deze is geüpload.<br />
* Klik op OK nadat u de vereiste gegevens hebt ingevoerd.<br />
Met de knoppen Toevoegen, Kopiëren, Bewerken en Verwijderen kunt u respectievelijk een<br />
nieuwe account toevoegen en een bestaande account kopiëren, bewerken of verwijderen. Test<br />
de nieuwe of gewijzigde account door op Testen te klikken voordat u verdergaat!<br />
3. Nadat u minstens één account hebt ingesteld en op Uploaden hebt geklikt, keert u terug<br />
naar het dialoogvenster Website op het web publiceren. Let erop in de vervolgkeuzelijst<br />
bovenaan automatisch de account is geselecteerd die u het laatst hebt gebruikt om bestanden<br />
te uploaden. Daaronder worden de instellingen voor de account weergegeven.<br />
Via deze vervolgkeuzelijst kunt u eenvoudig een andere account selecteren. Selecteer de<br />
account die u wilt gebruiken om de website te uploaden (als u meerdere accounts hebt<br />
ingesteld).<br />
4. Als uw site aan een database is gekoppeld, is de optie Samenvoegen voor exporteren ingeschakeld.<br />
Schakel deze optie uit als u gewijzigde databasegegevens niet wilt samenvoe-<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 241
gen bij het exporteren van de site. (Als het programma geen wijzigingen heeft aangetroffen<br />
of als uw site niet aan een database is gekoppeld, is deze optie niet beschikbaar.) Lees<br />
‘Databasegegevens samenvoegen’ in hoofdstuk 12 voor meer informatie.<br />
5. Zorg ervoor dat de optie Automatisch uploaden is uitgeschakeld als u enige controle wilt<br />
over het publicatieproces. Zo kunt u de wijzigingen die zullen worden doorgevoerd tijdens<br />
het publiceren van de site eerst controleren voordat die daadwerkelijk worden doorgevoerd.<br />
Bovendien kunt u het uploadproces dan op elk moment annuleren mocht u plots<br />
een probleem ontdekken. (Lees ‘Een website automatisch uploaden’ verderop in deze paragraaf<br />
voor meer informatie over deze voorziening.)<br />
6. Selecteer in het groepsvak Paginabereik de pagina’s die u wilt uploaden. Activeer het selectievakje<br />
Alle pagina’s publiceren als u alle pagina’s in de site wilt publiceren. Als u<br />
alleen specifieke pagina’s wilt publiceren, activeert u het selectievakje naast die pagina’s in<br />
de boomstructuur. Gebruik de knoppen Pagina selecteren, Niveau selecteren en Alles<br />
selecteren om eenvoudig de gewenste pagina’s te selecteren. Met deze knoppen kunt u<br />
een pagina selecteren/deselecteren, alle pagina’s op een specifiek niveau selecteren en alle<br />
pagina’s in de site selecteren.<br />
7. Activeer het selectievakje Back-up maken van projectbestand op externe server als u<br />
behalve uw website zelf ook het projectbestand naar de server wilt uploaden, zodat u in<br />
noodgevallen over een reservekopie van dit bestand beschikt. Als u het project tot nu toe<br />
niet hebt opgeslagen, wordt gevraagd of u het wilt opslaan voordat u verdergaat.<br />
8. Klik op OK. Het programma maakt nu verbinding met de webserver.<br />
9. Als dit de eerste keer is dat u de website uploadt, worden de geselecteerde pagina’s rechtstreeks<br />
naar de server overgedragen.<br />
OF<br />
Als u de pagina’s naar een bestaande site uploadt, verschijnt het dialoogvenster Bestanden<br />
uploaden. In de kolom Actie van dit dialoogvenster kunt u controleren of de geselecteerde<br />
pagina’s zullen worden toegevoegd (Toevoegen), zullen worden vervangen (Vervangen) of<br />
niet zullen worden bijgewerkt (Behouden).<br />
Activeer het selectievakje Ongebruikte bestanden verwijderen op server als u bestanden<br />
en afbeeldingen die niet worden gebruikt automatisch van de server wilt verwijderen.<br />
Geef vervolgens aan of u een incrementele of volledige update wilt uitvoeren. Klik op<br />
Incrementele update als u alleen bestanden wilt uploaden die gewijzigd zijn sinds u de<br />
site voor het laatst hebt geüpload. Desgewenst kunt u het programma hierbij automatisch<br />
naar ontbrekende bestanden laten zoeken. Activeer hiertoe de optie Op ontbrekende bestanden<br />
controleren. Omdat deze optie het uploadproces aanzienlijk kan vertragen, is ze<br />
standaard uitgeschakeld.<br />
Zodra alle bestanden zijn geüpload, wordt u daar via een berichtvenster op attent gemaakt.<br />
Klik op Sluiten om dit berichtvenster te sluiten.<br />
10. U kunt uw website meteen ‘live’ bekijken nadat de vereiste bestanden zijn geüpload. Klik<br />
hiertoe op Deze URL weergeven in het dialoogvenster Website publiceren.<br />
Als u bestanden een andere naam geeft of ze verwijdert en een of meer pagina’s van uw site<br />
vervolgens opnieuw naar het web uploadt, worden de oude bestanden niet automatisch verwijderd.<br />
U moet deze bestanden handmatig verwijderen. Kies hiertoe Website publiceren ><br />
242 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Website onderhouden in het menu Bestand. Wanneer u de volledige site echter automatisch<br />
opnieuw uploadt, kunt u wel aangeven dat u verouderde bestanden wilt verwijderen. Activeer<br />
hiertoe het selectievakje Overbodige bestanden wissen.<br />
Een website automatisch uploaden<br />
Als uw site bijzonder groot is, kunt u wellicht beter gebruikmaken van de ingebouwde functie<br />
om deze automatisch te uploaden. Dan kunt u de site uploaden zonder dat u elk dialoogvenster<br />
dat mogelijk verschijnt met OK hoeft te bevestigen. Dat is vooral handig bij het bijwerken<br />
van een site die een uitgebreide fotodatabase of honderden afbeeldingen bevat.<br />
1. Schakel het selectievakje Samenvoegen voor exporteren uit als u gewijzigde databasegegevens<br />
niet wilt samenvoegen bij het exporteren van de site. (Als er geen database is<br />
gekoppeld aan de pagina’s die u publiceert of als de gegevens in de database eerder al zijn<br />
samengevoegd, is deze optie niet beschikbaar.)<br />
2. Selecteer in het groepsvak Paginabereik de pagina’s die u wilt uploaden. Activeer het selectievakje<br />
Alle pagina’s publiceren als u alle pagina’s in de site wilt publiceren. Als u<br />
alleen specifieke pagina’s wilt publiceren, activeert u het selectievakje naast die pagina’s in<br />
de boomstructuur. Gebruik de knoppen Pagina selecteren, Niveau selecteren en Alles<br />
selecteren om eenvoudig de gewenste pagina’s te selecteren. Met deze knoppen kunt u<br />
een pagina selecteren/deselecteren, alle pagina’s op een specifiek niveau selecteren en alle<br />
pagina’s in de site selecteren.<br />
3. Activeer het selectievakje Back-up maken van projectbestand op externe server als u<br />
behalve uw website zelf ook het projectbestand naar de server wilt uploaden, zodat u in<br />
noodgevallen over een reservekopie van dit bestand beschikt. Als u het project tot nu toe<br />
niet hebt opgeslagen, wordt gevraagd of u het wilt opslaan voordat u verdergaat.<br />
4. Klik op OK om het uploadproces te starten.<br />
5. Zodra alle bestanden zijn geüpload, wordt u daar via een berichtvenster op attent gemaakt.<br />
Klik op Sluiten om dit berichtvenster te sluiten. Desgewenst kunt u de site nu<br />
rechtstreeks online bekijken. Klik hiertoe op Deze URL weergeven in het dialoogvenster<br />
Website publiceren.<br />
<strong>Pro</strong>bleemoplossing<br />
Nadat u de website hebt gepubliceerd, zult u misschien vaststellen dat bepaalde wijzigingen<br />
niet zijn doorgevoerd op de server. Maak in dat geval eerst de cache van uw browser leeg door<br />
op Ctrl+F5 te drukken voordat u de website opnieuw probeert te uploaden. Weergaveproblemen<br />
met afbeeldingen en andere media kunnen vaak eenvoudig worden opgelost door<br />
de huidige webpagina te vernieuwen, zodat de tijdstempels voor de webversie en de lokaal<br />
opgeslagen versie weer gelijk zijn.<br />
Als u het probleem niet kunt oplossen door de cache leeg te maken, moet u verouderde afbeeldingen<br />
of media op de server mogelijk handmatig verwijderen. Lees ‘Uw website onderhouden’<br />
in het Help-bestand van het programma voor meer informatie.<br />
<strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong> 243
De gepubliceerde site bekijken<br />
Nadat u uw website hebt gepubliceerd, kunt u deze via de optie Site online bekijken op<br />
de standaardwerkbalk rechtstreeks op het web bekijken. De eerste keer als u deze opdracht<br />
gebruikt, verschijnt er een dialoogvenster waarin u de basis-URL van de site moet opgeven.<br />
(U kunt deze URL achteraf op elk moment wijzigen via het dialoogvenster Eigenschappen<br />
van site.)<br />
Merk op dat wijzigingen die u hebt doorgevoerd sinds u de site voor het laatst hebt gepubliceerd<br />
niet zichtbaar zijn wanneer u deze rechtstreeks op het web bekijkt. Als u dergelijke<br />
wijzigingen wilt zien, opent u het projectbestand voor uw site (dat wel de meest recente wijzigingen<br />
bevat) en gebruikt u de knop Voorbeeld bekijken op de standaardwerkbalk om een<br />
voorbeeld weer te geven van uw site (zie ‘Een voorbeeld bekijken van uw website’ eerder in<br />
dit hoofdstuk).<br />
244 <strong>Studio</strong> <strong>Webdesign</strong> 4 <strong>Pro</strong>
Change language