Handleiding Easy computing studio webdesign 4 pro (pagina 213 van 244) (Nederlands)

281120

213

Verklein

Vergroot

Pagina terug

1/244

Pagina verder

Handleiding

Studio Webdesign 4

Pro

Copyrights © Copyrights 2008 Serif (Europe) Ltd, alle Serif-producten en afgeleiden zijn

eigendom van Serif (Europe) Ltd. Microso, Windows, en het Windows logo

zijn geregistreerde handelsmerken van Microso Corporation. Alle rechten

voorbehouden.

1ste druk 2008

Uitgever Easy Computing Publishing n.v.

Horzelstraat 100

1180 Brussel

Easy Computing b.v.

Jansweg 40

2011 KN Haarlem

Website www.easycomputing.com

Productmanagement Stefaan Hendrickx

Vormgeving Phaedra creative communications, Westerlo

ISBN 9789045644240

NUR 043

Wettelijk Depot D/2008/6786/71

Easy Computing mag niets van deze uitgave worden verveelvoudigd, bewerkt en/

of openbaar gemaakt door middel van druk, fotokopie, microlm, magnetische

media of op welke andere wijze dan ook.

Belangrijke opmerking

De methodes en programma’s in deze handleiding worden zonder inachtneming van enige patenten vermeld.

Ze dienen enkel voor amateur- en studiedoeleinden.

Alle technische gegevens en programma’s in dit boek werden door de auteurs met de grootste zorgvuldigheid

samengesteld en na een grondige controle gereproduceerd. Toch zijn fouten niet volledig uit te sluiten.

Easy Computing ziet zich daarom gedwongen erop te wijzen dat ze noch enige garantie, noch enige juridi-

sche verantwoordelijkheid of welke vorm van aansprakelijkheid dan ook op zich kan nemen voor gevolgen

die voortvloeien uit foutieve informatie. Het melden van eventuele fouten wordt door de auteurs altijd op

prijs gesteld.

Wij willen u erop wijzen dat de so- en hardwarebenamingen die in dit boek worden vermeld, evenals de

merknamen van de betreende rma’s over het algemeen door fabrieksmerken, handelsmerken of door het

patentrecht zijn beschermd.

EASY COMPUTING TECHNICAL SUPPORT

Om te kunnen genieten van Technical Support dient u zich zo snel mogelijk te registreren.

Dit kunt u doen tijdens de installatie van het programma (On-line via internet of Oﬀ-line via fax/post).

SNEL, GRATIS en 24 UUR/dag support via Internet

http://www.easycomputing.com/nl/support/

Indien u geen internetverbinding heeft, dan kunt u contact opnemen

met onze technische dienst per post of per fax.

België: Easy Computing

Technical Support

Horzelstraat 100

1180 Brussel

fax: 02/ 346 01 20

Nederland: Easy Computing

Technical Support

Jansweg 40

2011 KN Haarlem

fax: 023/ 542 08 36

Meer dan 90% van de meest gestelde vragen en bekende problemen worden 24 uur per dag

op de support-pagina’s van onze website beantwoord en/of opgelost (www.easycomputing.com).

Voor technische vragen die nog niet op onze website worden beantwoord,

kunt u een supportformulier invullen (te vinden op de support-pagina’s van onze website).

Het antwoord op uw vraag volgt snel.

Studio Webdesign 4 Pro 5

inhoud

1 WELKOM BIJ STUDIO WEBDESIGN 4 PRO! 13

Nieuw in Studio Webdesign... 14

Het programma installeren 17

2 BASISBEGINSELEN 19

Over websites 19

Wat komt er zoal kijken bij het ontwerpen van een website? 19

Wat is een website? 19

Wat hebt u nodig om een voorbeeld te bekijken van uw site of deze te publiceren? 20

Over HTML 20

De startpagina van het programma 21

Opties op de startpagina 21

Een website maken op basis van een sjabloon 22

Een bestaande website openen 24

Ontbrekende lettertypen vervangen 25

Een volledig nieuwe website maken 25

Met meerdere sites werken 25

Uw project opslaan 26

3 SITES EN PAGINA’S ONTWIKKELEN 27

Over sitestructuur en navigatiehulpmiddelen 27

Structuur van de site 27

Navigatiehulpmiddelen 29

Pagina’s versus stramienpagina’s 30

Pagina’s weergeven 32

Van pagina wisselen 33

Pagina’s toevoegen, verwijderen en de volgorde ervan wijzigen 35

De volgorde van pagina’s wijzigen 38

Stramienpagina’s toewijzen 39

Met frames werken 39

Absolute URL’s 41

De lay-outhulpmiddelen gebruiken 42

Met de linialen werken 43

De linialen als meetlat gebruiken 44

Kleverige hulplijnen 45

Het puntraster gebruiken 46

6 Studio Webdesign 4 Pro

Thema-afbeeldingen toevoegen en bewerken 47

De galerij gebruiken 50

Site-eigenschappen instellen 52

De standaard bestandsextensie instellen 53

De paginagrootte en het type uitlijning instellen 54

Auteurs- en copyrightinformatie opgeven 55

De projecteigenschappen weergeven en/of wijzigen 55

Een pictogram instellen voor de lijst met Favorieten 55

Uitvoeropties instellen 56

Gebruikersstatistieken bijhouden 57

Een absolute URL instellen 59

Pagina-eigenschappen instellen 60

Pagina-eigenschappen instellen via Sitebeheer 62

Sitebeheer gebruiken 63

Toegangscontrole 65

Eenvoudige toegangscontrole 66

Geavanceerde toegangscontrole 69

Gebruikers toevoegen aan een groep 71

Gebruikers de mogelijkheid bieden zich te registreren 74

Uw site optimaliseren voor zoekmachines 75

Metatags gebruiken 76

Voorkomen dat pagina’s worden geïndexeerd (Robots-metatags) 77

Pagina’s van het indexeringsproces uitsluiten (Robots-bestand) 78

Pagina’s in het indexeringsproces opnemen 78

Een prioriteit toekennen aan tekst met HTML-tags voor koppen 80

Een zoekfunctie implementeren 80

4 MET TEKST WERKEN 83

Met tekstframes werken 83

Wat is een tekstframe? 83

HTML-frames versus aangepaste frames 84

Frames toevoegen aan een pagina 85

Tekst invoeren in een frame 86

De lay-out van aangepaste frames instellen 86

Tekst laten overvloeien in aangepaste frames 88

De voorziening Automatisch overvloeien gebruiken 88

Tekst aan de grootte van een frame aanpassen 89

Aangepaste frames aan elkaar koppelen 89

Graﬁsche eigenschappen van frames 91

Overvloeiopties voor tekst in HTML-frames 91

Studio Webdesign 4 Pro 7

Artistieke tekst gebruiken 92

Tekst langs een pad plaatsen 94

Tekst rechtstreeks op de pagina bewerken 96

Tekst selecteren en invoeren 96

Tekst kopiëren, plakken en verplaatsen 97

Alinea’s laten inspringen 98

Met Unicode-tekst werken 99

Tekst zoeken en vervangen 99

5 TEKENS EN ALINEA’S OPMAKEN 101

Tekst opmaken 101

Met lettertypen werken 102

Met opmaakproﬁelen werken 103

Alineaopmaakproﬁelen versus tekenopmaakproﬁelen 103

Met benoemde opmaakproﬁelen werken 104

Genummerde of niet-genummerde lijsten maken 105

Symbolen invoegen 107

De huidige datum/tijd invoegen 108

Persoonlijke gegevens invoegen 108

6 MET TABELLEN WERKEN 110

Teksttabellen maken 110

HTML-tabellen versus aangepaste tabellen 110

Tabellen bewerken 112

De voorziening AutoOpmaak gebruiken 116

Celeigenschappen instellen 116

Een kalender invoegen 117

Ofﬁciële feestdagen toevoegen 118

Persoonlijke gebeurtenissen toevoegen 118

7 OBJECTEN BEWERKEN OP DE PAGINA 120

Een object selecteren 120

Over de blauwe balken in de linialen 121

Meerdere objecten selecteren 121

Objecten kopiëren, plakken en dupliceren 122

Objecten dupliceren 123

De opmaak van een object kopiëren en plakken 124

Objecten verplaatsen 124

8 Studio Webdesign 4 Pro

Objecten schalen 125

Afbeeldingen schalen 126

Gegroepeerde objecten en meervoudige selecties schalen 126

Objecten roteren 126

Objecten bijsnijden 127

Objecten tot de vorm van een ander object bijsnijden 128

Lijnen en vormen samenvoegen 129

De volgorde van objecten wijzigen 130

Objecten uitlijnen en spatiëren 130

Objecten groeperen 132

Objecten vergrendelen 132

Het magnetische raster gebruiken 132

Objecten selectief uitlijnen 133

De standaardwaarden voor objecten bijwerken 133

8 MET LIJNEN, VORMEN EN EFFECTEN WERKEN 135

Lijnen tekenen en bewerken 135

Lijnen tekenen 136

Lijneigenschappen instellen 138

Vormen tekenen en bewerken 139

AutoVormen 140

Gesloten vormen 141

2D-ﬁltereffecten gebruiken 142

Reﬂecties maken 143

Contouren maken 143

Objecten vervagen 144

Het gereedschap Schaduw gebruiken 145

3D-ﬁltereffecten gebruiken 146

Overzicht 146

3D-bumpmap 147

2D-bumpmap 149

3D-patroon 149

2D-patroon 149

Transparantie 149

3D-belichting 150

Diepte toevoegen (Instant 3D) 150

Randen toevoegen 152

Objectstijlen gebruiken 153

Studio Webdesign 4 Pro 9

AFBEELDINGEN, ANIMATIES EN MULTIMEDIA-ELEMENTEN TOEVOEGEN

155

Afbeeldingen importeren 155

Afbeeldingen invoegen 155

Afbeeldingen vervangen 157

Bijgesneden afbeeldingen aanpassen 157

Insluiten versus koppelen 158

De mediabalk gebruiken 159

Foto’s toevoegen aan de pagina 162

Exportopties instellen voor afbeeldingen 162

Exportopties, een titel en alternatieve tekst instellen voor afzonderlijke afbeeldingen 163

Tekortkomingen in afbeeldingen verhelpen 165

Een aanpassingsﬁlter toevoegen 166

Aanpassingsﬁlters in-/uitschakelen 167

De instellingen voor een ﬁlter veranderen 167

De volgorde van de ﬁlters wijzigen 168

Meerdere ﬁlters tegelijk toepassen 168

TWAIN-afbeeldingen importeren 168

Animatie toevoegen 168

Geanimeerde lichtkranten toevoegen 169

Animated GIF’s toevoegen 169

Flash-bestanden gebruiken 170

Beeld- en geluidsfragmenten toevoegen 171

Geluid 171

Video 171

Een Flash™-fotogalerij maken 174

Een fotogalerij maken 175

Een fotogalerij bewerken 177

Externe afbeeldingen koppelen 178

10 MET KLEUREN, VERLOPEN EN TRANSPARANTIE WERKEN 179

Effen kleuren instellen 179

Kleurenschema’s gebruiken 180

Schemakleuren toepassen op objecten 183

Nieuwe kleurenschema’s deﬁniëren en bestaande schema’s bewerken 183

Met kleur- en bitmapverlopen werken 184

Een kleur- of bitmapverloop toepassen 184

Met transparantie werken 185

10 Studio Webdesign 4 Pro

11 HYPERLINKS EN INTERACTIVITEIT TOEVOEGEN 187

Hyperlinks en bladwijzers toevoegen 187

Een bladwijzer invoegen 188

Hotspots toevoegen aan een pagina 189

Hotspots bewerken 190

Rollovers toevoegen 191

Opties voor rollovers 192

De vereiste bronafbeeldingen maken voor een rollover 194

Pop-uprollovers toevoegen 195

Navigatie-elementen toevoegen 198

Een sitemap toevoegen 201

12 DYNAMISCHE CONTENT TOEVOEGEN 203

HTML-pagina’s maken 203

HTML-code toevoegen 204

HTML-code toevoegen aan een pagina 205

ID’s gebruiken 206

Tokens gebruiken 207

Formulieren toevoegen 207

Structuur van een formulier 207

Formulieren maken 209

Besturingselementen voor formulieren 211

Besturingselementen bewerken 212

Formulieren verzenden 213

RSS-feeds en podcasts 213

Browserondersteuning voor feeds 214

Een RSS-feed of podcast maken 214

Podcasts naar iTunes doorsturen 215

E-commerce 216

Over e-commerce 216

Een e-commerceobject toevoegen (PayPal) 217

Gegevens samenvoegen 221

Databasegegevens samenvoegen 221

E-commercegegevens samenvoegen 225

Overige samenvoegfuncties 229

Met intelligente objecten werken 230

Intelligente objecten maken 233

Intelligente objecten bewerken 234

Intelligente objecten beheren 235

Intelligente objecten verwijderen 238

Studio Webdesign 4 Pro 11

13 EEN VOORBEELD BEKIJKEN EN DE SITE PUBLICEREN 239

Een voorbeeld bekijken van uw website 239

Uw site op het web publiceren 240

Een website automatisch uploaden 243

Probleemoplossing 243

De gepubliceerde site bekijken 244

12 Studio Webdesign 4 Pro

Studio Webdesign 4 Pro 13

1 Welkom bij Studio

WebdeSign 4 Pro!

Welkom bij Studio Webdesign – de snelste en eenvoudigste manier om uw eigen website te

bouwen!

Als u eerder al met Studio Webdesign hebt gewerkt, hoeven we u waarschijnlijk niet meer te

vertellen dat dit programma alle hulpmiddelen biedt die u nodig hebt om snel en eenvoudig

uw eigen website te ontwikkelen en deze op het web te publiceren, hetzij op basis van de

ingebouwde designsjablonen hetzij door zelf een volledig nieuwe site te maken. Gewapend

met een internetaccount en Studio Webdesign staat uw site binnen de kortste keren online –

zonder dat hiervoor enige ervaring is vereist!

Studio Webdesign ondersteunt tientallen functies waarmee u moeiteloos de prachtigste web-

sites ontwerpt!

Gebruiksvriendelijk

Contextgevoelige werkbalken waarborgen dat de meest gebruikte functies altijd binnen hand-

bereik zijn. De soepele indeling van de studiotabs van zijn kant zorgt er dan weer voor dat u

eenvoudig aangepaste werkruimtes kunt maken, zodat u zo doeltreend mogelijk kunt wer-

ken. Bekijk enkele van de vooraf gedenieerde proelen die toegankelijk zijn vanaf de start-

pagina van het programma als u alvast een voorsmaakje wilt.

Krachtige tekstverwerkingsfuncties

Met de geavanceerde DTP-functies in Studio Webdesign hebt u voortaan 100% controle over

uw teksten. HTML-tekstframes waarborgen dat uw tekst volledig compatibel is met de HT-

ML-standaard, terwijl u uw site met behulp van artistieke tekst snel en eenvoudig een unieke

uitstraling kunt geven. En dan hebben we het nog niet gehad over de krachtige functies om

tekst te bewerken!

Verbluffende graﬁsche effecten

Geef aeeldingen in uw website een volledig nieuwe dimensie met de gebruiksvriendelijke

Instant 3D-functie – ideaal om driedimensionale logo’s, banners en knoppen te maken. Voeg

moeiteloos prachtige belichtingseecten toe, geef objecten in een oogwenk diepte om 3D-

aeeldingen te creëren die uw website duidelijk onderscheiden van de rest, en verfraai uw

tekst, foto’s, aeeldingen en vormen met oogverblindende ltereecten, zoals een schuine

rand, reliëf, schaduw of gloed. U kunt ook meteen meerdere eecten tegelijk toepassen en

de instellingen ervoor wijzigen totdat u tevreden bent over het eindresultaat. Elk object kan

worden bewerkt nadat u er ltereecten op hebt toegepast. Desgewenst kunt u de toegepaste

eecten zelfs weer uitschakelen. Met al deze grasche eecten binnen handbereik hoe u

voortaan dus niet langer uw toevlucht te nemen tot een afzonderlijk designprogramma om

unieke 3D-objecten te ontwerpen.

14 Studio Webdesign 4 Pro

Krachtige aanpassingsﬁlters

Gebruik de talrijke ingebouwde aanpassingslters om aeeldingen snel en eenvoudig te cor-

rigeren en/of de kwaliteit ervan te verbeteren. Verwijder de gevreesde rode ogen in foto’s die

met een its zijn genomen met het gereedschap Rode ogen verwijderen, verhelp tekortkomin-

gen in uw aeeldingen met gereedschappen als Helderheid/contrast, Stof en krassen verwij-

deren, Kanaalmixer en Kleurtoon/verzadiging/helderheid, of geef ze een unieke uitstraling

met verbluende eecten zoals Diuse gloed, Bewegingsonscherpte en Ruis toevoegen. Met

al deze krachtige en gebruiksvriendelijke lters tovert u uw foto’s moeiteloos in professioneel

ogende aeeldingen om!

Kant-en-klare navigatie-elementen

Maak een keuze uit tientallen thema-aeeldingen met kant-en-klare knoppen, scheidings-

lijnen, banners, bullets, navigatiebalken, enzovoort die u eenvoudig aan uw websites kunt

toevoegen. Met een fantastische collectie aan stijlen waaruit u kunt kiezen, vindt u onge-

twijfeld wel een thema-aeelding die aan uw behoeen voldoet. Door thema-aeeldingen

te gebruiken, bespaart u niet alleen zeer veel tijd, maar waarborgt u ook dat uw site een uni-

forme ‘look-and-feel’ hee. Aan de hand van de boomstructuur op het tabblad Site ziet u in

één oogopslag de structuur van de volledige site. Voeg daar nog de krachtige functies voor

hyperlinks, bladwijzers en hotspots aan toe, en u beschikt over een webdesignprogramma dat

meegroeit met uw behoeen.

Deze nieuwe editie van Studio Webdesign ondersteunt allerlei nieuwe functies . Als u al

met eerdere versies van het programma hebt gewerkt, zult u de nieuwe functies beslist naar

waarde weten te schatten. Als u voor het eerst met dit programma werkt, zult u snel merken

dat Studio Webdesign alle hulpmiddelen biedt die u nodig hebt om professionele websites te

ontwerpen.

NIEUW IN STUDIO WEBDESIGN...

* Databasegegevens samenvoegen

Geef gegevens uit Serif-databases (*.sdb), Microso Access (*.mdb), dBASE en andere be-

kende databaseprogramma’s, ODBC-servergegevens, evenals gegevens uit Microso Ex-

cel, HTML en tekstbestanden met scheidingstekens weer op uw webpagina’s. Productca-

talogi, verzendlijsten, inventarissen en noem maar op, voortaan kunt u om het even welke

databasegegevens in uw site integreren. Plaats tekst of aeeldingen in samenvoeggebie-

den, samenvoegformulieren voor e-commercegegevens, of zelfs in HTML-fragmenten, of

maak uw eigen fotodatabase (met EXIF-velden) waaruit u gegevens kunt samenvoegen.

* Gecentraliseerd sitebeheer

Beheer vanuit één dialoogvenster al uw pagina-/stramienpagina-eigenschappen, bronnen,

lettertypen, tekst, hyperlinks en bladwijzers. Met het nieuwe Sitebeheer kiest u eenvoudig

de gewenste instellingen voor specieke pagina’s of de volledige site. Gebruik het ver-

nieuwde Bronbeheer om aeeldingen, media, links, HTML-code en allerlei andere bron-

nen te beheren, of de nieuwe functie Site op fouten controleren om potentiële problemen

met navigatiehulpmiddelen, tekst of formulieren/e-commercegegevens op te sporen en

Studio Webdesign 4 Pro 15

die indien mogelijk automatisch te verhelpen.

* Nieuwe intelligente objecten

Studio Webdesign bevat allerlei nieuwe intelligente objecten:

* Forums: breng levendige op threads gebaseerde discussies op gang door meerdere forums

te maken die u onaankelijk van elkaar kunt beheren en door een moderator kunt laten

leiden.

* Toegangscontrole: beperk de toegang tot uw site of specieke pagina’s door gebruikers-

lijsten te beheren. Bezoekers kunnen zich snel en eenvoudig registreren via een aanmel-

dingspagina (met de mogelijkheid gebruikersaccounts te activeren via e-mail).

* Bezoekersstatistieken: verzamel moeiteloos allerlei statistische gegevens over uw site, zo-

als het aantal hits, het aantal bezoekers dat door andere sites naar uw site is doorverwezen,

enzovoort.

* Nieuws: ideaal om belangrijke nieuwigheden zoals website-updates of geplande bijeen-

komsten aan te kondigen.

Alle intelligente objecten ondersteunen voortaan meerdere talen!

* Mediabalk en fotogalerij

Voortaan hoe u foto’s maar één keer te importeren! Houd uw foto’s binnen handbereik

met behulp van de nieuwe mediabalk en sleep ze van hieruit naar een bestaande foto in

uw site om deze te vervangen! Zoek naar foto’s op basis van hun metagegevens. Beheer

moeiteloos de grootte en uitlijning van foto’s in frames. Importeer meerdere aeeldingen

tegelijk en plak die een voor een op de gewenste positie!

Verbaas uw vrienden, familie en collega’s met prachtige op Flash gebaseerde fotogalerijen,

waardoor gebruikers eenvoudig kunnen navigeren door op een miniatuur of rollover te

klikken.

* Professionele designsjablonen

Maak in een oogwenk een website ‘op maat’ met behulp van talrijke ingebouwde sjablo-

nen die overzichtelijk zijn ingedeeld in categorieën (Zakelijk, E-commerce, Hobby, Vrije

tijd...). Selecteer gewoon de sjabloonpagina’s die u wilt gebruiken en voeg er later eventu-

eel extra pagina’s uit dezelfde of een andere sjabloon aan toe.

* Uw site optimaliseren voor zoekmachines

Bepaal hoe zoekmachines uw website indexeren! Voorkom dat bepaalde pagina’s worden

geïndexeerd door gebruik te maken van een sitemap-bestand of Robots-bestanden, zodat

potentiële bezoekers alleen relevante zoekresultaten te zien krijgen met betrekking tot uw

site.

* Een zoekfunctie implementeren

Maak gebruik van het krachtige gereedschap om een zoekfunctie in uw site te implemen-

teren, zodat gebruikers eenvoudig op tekst kunnen zoeken.

* Extra navigatiefuncties

De nieuwste versie van Studio Webdesign bevat ook allerlei nieuwe navigatiebalken die

zich uitstekend lenen voor het samenvoegen van e-commercegegevens, inclusief een

nieuwe verzameling vervolgkeuzelijsten, zodat gebruikers via een vervolgkeuzelijst de pa-

16 Studio Webdesign 4 Pro

gina kunnen selecteren die ze willen bekijken. Daar komt nog bij dat alle navigatiebalken

voortaan het gebruik van bladwijzers ondersteunen.

* Sitemaps

Voeg snel en eenvoudig een sitemap toe om de structuur van uw site weer te geven.

* Actieve documentframes

Voortaan kunt u een hyperlink naar een specieke pagina in uw site ook in een document-

frame op een andere pagina openen. Maak gebruik van absolute URL’s, zodat gebruikers

doelgericht van frame naar frame kunnen navigeren.

* YouTube®-video’s insluiten

Sluit uw favoriete YouTube®-video’s in uw webpagina’s in!

* Podcasts

Maak uw eigen podcastfeeds waarop bezoekers zich eenvoudig kunnen abonneren door

op een Google Reader®, My Yahoo!® of Apple iTunes® link te klikken.

* Pop-uprollovers

Maak uw eigen fotogalerij bestaande uit een reeks miniaturen waarover gebruikers slechts

hun muisaanwijzer hoeven te bewegen om een versie op ware grootte weer te geven.

* Nieuwe 2D/3D-ltereecten

Voeg prachtige reecties toe aan een object – ideaal voor paginatitels en aeeldingen! Pas

een van de talrijke realistisch ogende 3D-eecten toe op uw objecten, met de mogelijkheid

de transparantie van reecterende/niet-reecterende oppervlakken in te stellen en meer-

dere lichtbronnen toe te voegen voor verbluende belichtingseecten. Alle ltereecten

kunnen in de voorvertoningsmodus of op het object op de pagina worden toegepast.

* Instant 3D

Transformeer 3D-objecten rechtstreeks op de pagina, of pas indrukwekkende veelkleurige

belichtingseecten toe (met de mogelijkheid nauwkeurig de richting van de lichtbron in te

stellen), samen met aangepaste schuine randen en draaiproelen om unieke contouren te

creëren.

* Kalenders met persoonlijke gebeurtenissen en feestdagen

Ontwerp moeiteloos aangepaste kalenders waarop behalve alle ociële feestdagen ook

belangrijke persoonlijke gebeurtenissen zoals verjaardagen, afspraken, enzovoort worden

weergegeven.

* Verbeterde tekst- en opmaakfuncties

Maak gebruik van kleurverlopen en transparantie in tabellen en frametekst, selecteer snel

en eenvoudig meerdere woorden of alinea’s en pas er via het nieuwe tabblad Opmaakpro-

elen de gewenste opmaak op toe. Gebruik het tabblad Lettertypen om na te gaan welke

lettertypen zijn geïnstalleerd op uw systeem, om naar lettertypen te zoeken en een voor-

beeld te bekijken van specieke lettertypen op geselecteerde tekst.

* Nieuwe weergaveopties voor tabbladen

Voortaan kunt u tabbladen automatisch laten samenvouwen wanneer u ze niet gebruikt.

U kunt ze zelfs animeren, zodat ze schuivend of rollend uit beeld verdwijnen!

Studio Webdesign 4 Pro 17

* Lay-outhulpmiddelen

Maak gebruik van ‘magnetische’ hulplijnen – ideaal als u alle objecten die op uw liniaal-

hulplijnen zijn uitgelijnd in één keer wilt verplaatsen. De objecten volgen automatisch de

hulplijnen wanneer u die verplaatst!

* Tabblad Nuttige info

Het nieuwe tabblad Nuttige info maakt een reeks rijkelijk geïllustreerde onderwerpen toe-

gankelijk waarin u stap voor stap met belangrijke programmafuncties leert werken en

doelgericht de structuur van uw site leert plannen en ontwerpen.

... en allerlei andere nuttige voorzieningen!

Zo kunt u voortaan proelen met aangepaste sneltoetsen maken voor de verschillende pro-

grammafuncties en de ingebouwde werkbalken en menu’s eenvoudiger aanpassen. Nieuw is

ook dat u intelligente objecten zoals formulieren en blogs voortaan tegen spam kunt beveili-

gen met behulp van CAPTCHA-elementen, en uw website automatisch kunt uploaden zonder

dat u elke stap met OK hoe te bevestigen. En dan hebben we het nog niet gehad over de nieu-

we functies om rechtstreeks op de pagina een voorbeeld te bekijken van intelligente objecten,

het volledig vernieuwde tabblad Transformeren van waaruit u objecten voortaan op basis van

een vooraf gedenieerd ankerpunt kunt verplaatsen, schalen of roteren, en de mogelijkheid

het uiterlijk van de gebruikersinterface naar behoee aan te passen.

Vergeet uw exemplaar van Studio Webdesign niet te registreren. Dan hebt u

recht op technische ondersteuning en kunnen we u op de hoogte houden over

nieuwe ontwikkelingen en toekomstige upgrades.

HET PROGRAMMA INSTALLEREN

Om Studio Webdesign 4 Pro te installeren, dient u de programma-cd in uw cd-romspeler te

plaatsen. Sluit alle andere toepassingen voordat u het programma installeert, zodat de so-

ware probleemloos wordt geïnstalleerd.

* Als de Autorun-functie is ingeschakeld op uw computer, wordt het installatieprogramma

automatisch gestart zodra u de cd-rom in uw cd-romspeler plaatst. Volg de aanwijzingen

op het scherm om de installatie te voltooien en start de computer daarna opnieuw.

* Als de Autorun-functie niet is ingeschakeld op uw computer, moet u als volgt te werk gaan

om het programma te installeren:

1. Kies in het menu Start de opdracht Uitvoeren.

2. Typ D:\ECSETUPX.EXE (waarbij de letter D voor de stationsletter staat die op uw sys-

teem aan de cd-romspeler is toegewezen).

U komt nu in de installatiebrowser.

Via de installatiebrowser kunt u drie dingen doen:

* Studio Webdesign 4 Pro installeren

18 Studio Webdesign 4 Pro

* naar onze supportpagina’s gaan

* de cd-rom verkennen

Om het programma te installeren, dubbelklikt u op de desbetreende knop in de browser en

volgt u de aanwijzingen op het scherm.

Zodra de installatie is voltooid, kunt u het programma starten door op het overeenkomstige

bureaubladpictogram te dubbelklikken, of door Start > Alle programma’s > Easy Compu-

ting > Studio Webdesign 4 Pro te kiezen en op de naam van het programma te klikken in

het vervolgmenu.

Studio Webdesign 4 Pro 19

2 baSiSbeginSelen

OVER WEBSITES

In dit hoofdstuk worden enkele belangrijke basisconcepten beschreven waarmee u vertrouwd

moet zijn om een professionele website te maken met Studio Webdesign.

Wat komt er zoal kijken bij het ontwerpen van een website?

Het enige wat u in principe hoe te doen, is een van de meegeleverde sjablonen openen en

aanpassen met het programma. U kunt natuurlijk ook een volledig nieuwe website maken

zonder gebruik te maken van sjablonen. Aan u de keuze! Hoe dan ook, in beide gevallen zult u

ongetwijfeld de talrijke voorzieningen op prijs stellen die Studio Webdesign biedt om tekst en

aeeldingen te bewerken en de lay-out van elke pagina aan te passen. Studio Webdesign is op

het DTP-model gebaseerd, zodat u de verschillende elementen op elke pagina naar wens kunt

schikken en precies die lay-out kunt creëren die u in gedachten hebt. Een website maken met

Studio Webdesign vertoont veel overeenkomsten met het opstellen van een nieuwsbrief. Als u

vertrouwd bent met de basisbeginselen van DTP, zult u merken dat een eigen website bouwen

eenvoudiger is dan op het eerste gezicht lijkt. Als u hier nog geen ervaring mee hebt, kunt u

gaandeweg met de verschillende gereedschappen in Studio Webdesign leren werken.

Met Studio Webdesign kunt u alle elementen van uw site in wording in één gebruiksvrien-

delijk document onderbrengen dat uit meerdere pagina’s bestaat en dit document met één

handeling als projectbestand opslaan. Dit project kunt u op elk moment publiceren als een

reeks afzonderlijke pagina’s die samen uw website vormen.

Wat is een website?

Het internet is een wereldwijd netwerk dat computers over de hele wereld met elkaar ver-

bindt. Het web was aanvankelijk een manier om via internet toegang te krijgen tot informatie

die is opgeslagen in een bestandsindeling die bekendstaat als HTML of Hypertext Markup

Language. In de ruime zin van het woord is een website (hoofdzakelijk) een verzameling

HTML-bestanden die zijn opgeslagen op een leserver waartoe iedereen die over een web-

browser beschikt toegang kan krijgen. In feite zijn websites echter helemaal niet van internet

aankelijk. Vaak zijn ze ook toegankelijk vanuit een lokaal netwerk of particulier intranet.

Denk eraan dat een website uiteindelijk maar een verzameling HTML-bestanden is.

HTML is een methode om de lay-out van een webpagina te beschrijven. Een HTML-bestand

bestaat uit platte tekst waarin allerlei zogeheten ‘tags’ zijn verweven die de betreende web-

pagina beschrijven. Behalve HTML-bestanden bevat een website doorgaans echter nog an-

dere bestanden (zoals aeeldingen) die de webdesigner in de site hee geïntegreerd. Een

webbrowser als Microso Internet Explorer of Mozilla Firefox is een programma dat HT-

ML-bestanden kan lezen en webpagina’s kan weergeven zoals de designer oorspronkelijk in

20 Studio Webdesign 4 Pro

gedachten had.

Elke website hee een startpagina, die meestal index.html heet. Dit is de eerste pagina die

internetgebruikers te zien krijgen wanneer ze een website bezoeken. De startpagina bevat

doorgaans hyperlinks naar andere pagina’s in de site, die op hun beurt hyperlinks bevatten

naar weer andere pagina’s, enzovoort. Voor internetgebruikers die de website bekijken via een

browser, lijkt het alsof al deze informatie naadloos aan elkaar is gekoppeld. Het enige wat ze

hoeven te doen om verwante of aanvullende informatie weer te geven, is op de overeenkom-

stige hyperlink klikken.

Studio Webdesign converteert de verschillende pagina’s in uw project automatisch naar HT-

ML-bestanden wanneer u de website publiceert, zodat u zich zelf niet om de HTML-code

hoe te bekommeren.

Wat hebt u nodig om een voorbeeld te bekijken van uw site of deze te

publiceren?

U kunt op elk moment een voorbeeld bekijken van een of meer pagina’s in uw site, ofwel

rechtstreeks in het programma (in een afzonderlijk venster dat sterk op dat van Internet Ex-

plorer lijkt) ofwel met een willekeurige browser die op uw systeem is geïnstalleerd.

Een website publiceren met Studio Webdesign is een proces dat slechts uit één stap bestaat,

waarbij: (1) uw project automatisch naar afzonderlijke bestanden wordt geconverteerd, (2) de

bestanden voor uw website naar de opgegeven locatie worden gekopieerd (een lokale map of

een webserver).

* Om uw website naar een lokale map te publiceren, hoe u zelfs niet eens met internet

verbonden te zijn.

* Als u de website op het web wilt publiceren, zodat iedereen deze kan bekijken, hebt u een

host nodig (schijfruimte op een server die met internet is verbonden). Hiervoor moet

u gewoonlijk een account aanvragen bij een gespecialiseerde Internet Service Provider

(ISP). Bij de meeste internetaanbieders krijgt u automatisch verschillende megabytes

schijfruimte toegewezen op de server om een ‘persoonlijke website’ te publiceren wanneer

u een abonnement neemt. Zodra u uw account hebt ingesteld en verbinding kunt maken

met de webserver van uw internetaanbieder, hoe u alleen nog de juiste bestanden naar

de server over te dragen om uw website te publiceren. Hiervoor kunt u de functie Op het

web publiceren in Studio Webdesign gebruiken.

Over HTML

Een groot voordeel van Studio Webdesign in vergelijking met andere programma’s die speci-

aal zijn ontwikkeld om websites te maken, is dat u uw nieuwsbrief of een gedrukte adverten-

tie met allerlei kleurrijke aeeldingen en exotische lettertypen ongewijzigd op het web kunt

publiceren – zonder dat de oorspronkelijke opmaak of vormgeving verloren gaat. Een van de

grote troeven van dit programma is immers dat uw publicatie er op het web even goed uitziet

als op het scherm!

Hoewel u geen ervaring hoe te hebben met HTML om met Studio Webdesign aan de slag te

gaan, zijn er wel enkele zaken waarop u moet letten:

Studio Webdesign 4 Pro 21

1. Denk eraan dat de downloadtijd van uw webpagina’s rechtstreeks aankelijk is van de be-

standsgrootte van de HTML-bestanden en van de bijbehorende aeeldingen of multime-

diabestanden. Omdat dergelijke bestanden veel meer schijfruimte innemen dan HTML-

bestanden, kunnen ze de downloadtijd van uw website aanzienlijk beïnvloeden.

2. Alle onderdelen van uw site die het programma niet naar HTML kan converteren, worden

automatisch als aeeldingen geëxporteerd wanneer u de website publiceert. Hoe meer

onderdelen het programma naar HTML kan converteren, hoe beter.

Als u gewend bent in een DTP-omgeving te werken, zult u uw typograsche verwachtingen

wellicht wat moeten temperen als u websites ontwerpt voor het web. Studio Webdesign biedt

u echter heel wat bewegingsvrijheid op het gebied van design. Zo kunt u een willekeurige

tekengrootte gebruiken voor uw teksten, een aangepaste teken- en regelafstand instellen voor

afzonderlijke alinea’s en alinea’s zelfs uitvullen! De WYSIWYG-benadering waarborgt dat de

website die u op het scherm ziet vrijwel volledig overeenkomt met datgene wat internetge-

bruikers uiteindelijk te zien krijgen in hun browser. Omdat in HTML absolute coördinaten

worden gebruikt om de positie te bepalen van elementen, kunt u objecten zo indelen dat ze

elkaar gedeeltelijk overlappen – zonder dat dit een invloed hee op de uiteindelijke bestands-

grootte.

In theorie kunt u een willekeurig lettertype gebruiken. Denk er echter aan dat het gebruikte

lettertype automatisch wordt vervangen door een lettertype dat het oorspronkelijke zoveel

mogelijk benadert wanneer het niet beschikbaar is op de computer van de gebruiker. Het

resultaat hiervan is niet altijd voorspelbaar. Het is dus best mogelijk dat uw zorgvuldig ont-

worpen lay-out er plots helemaal anders uitziet! Onthoud daarom als algemene vuistregel dat

u zich het beste tot de zogeheten ‘webveilige’ lettertypen in Studio Webdesign kunt beperken.

Dit zijn de lettertypen die standaard worden weergegeven op het tabblad Lettertypen.

De ingebouwde voorziening Site op fouten controleren waarschuwt u als in

uw site onveilige (andere dan webveilige) lettertypen worden gebruikt, of als

bepaalde navigatie-elementen of formulieren/e-commercefuncties problemen

veroorzaken.

DE STARTPAGINA VAN HET PROGRAMMA

Zodra u Studio Webdesign hebt geïnstalleerd, kunt u meteen aan de slag. Tijdens de instal-

latie van het programma wordt automatisch de programmagroep Studio Webdesign 4 Pro

toegevoegd aan het menu Start van Windows.

* Kies Start > Alle programma’s > Easy Computing > Studio Webdesign 4 Pro en klik op

de naam van het programma in het vervolgmenu om het programma te starten.

Opties op de startpagina

Op de startpagina kunt u uit verschillende opties kiezen:

22 Studio Webdesign 4 Pro

Hier kunt u aangeven of u een nieuwe website wilt maken (al dan niet op basis van een sja-

bloon), een project wilt openen dat u eerder hebt opgeslagen of bestaande webpagina’s in uw

project wilt importeren. Vanaf de startpagina kunt u ook rechtstreeks enkele voorbeeldsites

bekijken die door professionele designers zijn gemaakt, of een van de vele workshops openen

die bij het programma worden geleverd.

Standaard wordt bij het starten van Studio Webdesign altijd de startpagina

weergegeven. U kunt dit echter voorkomen door het selectievakje Startpagina

niet meer weergeven in te schakelen linksonder op de startpagina. Als u de

startpagina later opnieuw wilt inschakelen, kiest u Extra > Opties > Algemeen

en activeert u het selectievakje Startpagina weergeven bij starten van pro-

gramma.

EEN WEBSITE MAKEN OP BASIS VAN EEN SJABLOON

Het eerste wat u te zien krijgt wanneer u Studio Webdesign start, is de startpagina van het

programma, waar u uit verschillende opties kunt kiezen. Een van deze opties is Nieuwe web-

site maken. Door gebruik te maken van een designsjabloon, kunt u snel en eenvoudig een

professionele website ontwerpen. Ongeacht of u een beginner bent of al jaren actief bent op

het gebied van webdesign maar naar nieuwe designmogelijkheden zoekt, laat de sjablonen in

Studio Webdesign het werk voor u doen!

Studio Webdesign 4 Pro 23

De verschillende sjablonen zijn overzichtelijk ingedeeld in categorieën. Voor elke sjabloon

kunnen diverse opties worden ingesteld, zoals:

* het thema voor knoppen, bullets, scheidingslijnen en navigatiebalken (bijvoorbeeld Mo-

dern);

* het kleurenschema dat u wilt gebruiken om de website een specieke ‘look-and-feel’ te

geven (bijvoorbeeld Atlantis);

* de sjabloonpagina’s die u wilt gebruiken om een nieuwe site te bouwen (bijvoorbeeld al-

leen de startpagina en de pagina’s Producten, Downloads, en Contact).

Sommige sjablonen bevatten intelligente objecten (zie hoofdstuk 12) zoals opiniepeilingen en

blogs. Omdat dergelijke objecten uitsluitend toegankelijk zijn via Serif Web Resources (een

online service die wordt aangeboden door Serif), dient u ze aan een geldige Serif Web Resour-

ces-account te koppelen. Als u het desbetreende intelligente object wilt behouden in uw site,

dubbelklikt u er op en meldt u zich aan bij Serif Web Resources. Hierdoor koppelt u het object

aan uw account. (Als u het object niet wilt gebruiken, verwijdert u het gewoon.)

U hoe zich overigens niet noodzakelijk tot pagina’s uit één enkele sjabloon te beperken in

Studio Webdesign. U kunt eenvoudig een of meer pagina’s uit een andere sjabloon toevoegen

om enige variatie aan te brengen in uw site. Zo zou u bijvoorbeeld webpagina’s met een wel-

bepaalde grasche vormgeving kunnen maken, maar een apart gedeelte van uw site dat alleen

toegankelijk is voor leden een andere vormgeving kunnen geven door hiervoor pagina’s uit

een andere sjabloon te gebruiken. Hierbij kunt u aangeven of u ook de bijbehorende stramien-

pagina’s aan het huidige project wilt toevoegen. Lees ‘Pagina’s toevoegen, verwijderen en de

volgorde ervan wijzigen’ in hoofdstuk 3 voor meer informatie.

24 Studio Webdesign 4 Pro

Zo maakt u een nieuwe website op basis van een sjabloon:

1. Start Studio Webdesign of kies Bestand > Startpagina om de startpagina van het pro-

gramma weer te geven.

2. Klik op Designsjabloon gebruiken.

3. Selecteer een sjabloon in het deelvenster aan de linkerkant. Merk op dat de sjablonen

in verschillende categorieën zijn ingedeeld. Gebruik de schuialk of vouw een categorie

samen door op het symbool

naast de naam van die categorie te klikken om de overige

sjablonen te bekijken. Let erop dat in het deelvenster aan de rechterkant miniaturen wor-

den weergegeven van de pagina’s waaruit de geselecteerde sjabloon bestaat.

4. Selecteer in het deelvenster Pagina’s aan de rechterkant de sjabloonpagina’s die u wilt ge-

bruiken in de nieuwe website door het bijbehorende selectievakje in te schakelen. Klik op

Alles selecteren of Niets selecteren als u alle dan wel geen enkele pagina wilt selecteren.

5. Selecteer via de vervolgkeuzelijsten bovenaan een thema voor knoppen en een kleuren-

schema voor de nieuwe site. De paginaminiaturen in het rechterdeelvenster worden au-

tomatisch bijgewerkt, zodat u meteen het resultaat van uw instellingen kunt controleren.

Gebruik de zoomknoppen of de schuifregelaar onder in het dialoogvenster als u de geko-

zen sjabloon aandachtiger wilt bestuderen.

6. Klik op Openen.

Het programma gee automatisch de startpagina van de voorbeeldsite weer in de werkomge-

ving. Activeer het tabblad Site in de studio aan de rechterkant als u een overzicht wilt van de

inhoud en structuur van de website.

EEN BESTAANDE WEBSITE OPENEN

U kunt zowel de startpagina, het menu Bestand als de standaardwerkbalk gebruiken om een

bestaande website te openen. Merk op dat u behalve een website die u eerder hebt gemaakt

met dit programma ook een sjabloonbestand of een Studio DTP Pro-publicatie kunt ope-

nen.

Daarnaast kunt ook pagina’s van een bestaande website importeren. (Raadpleeg het Help-

bestand van het programma voor meer informatie.)

Zo opent u een bestaande website vanaf de startpagina:

1. Klik op Opgeslagen site openen op de startpagina. Klik in het deelvenster Documenten

van het dialoogvenster Opgeslagen site openen op de tab Mappen als u door de map-

pen op uw computer wilt bladeren. Klik op de tab Geschiedenis als u een overzicht wilt

van alle websites die u onlangs hebt bewerkt met het programma. Let erop dat rechts in

het dialoogvenster miniaturen van de beschikbare websites of allerlei bestandsinfo wordt

weergegeven, aankelijk van de weergave die momenteel is ingesteld.

2. Selecteer de website die u wilt openen en klik op Openen. De startpagina van de site ver-

schijnt in de werkomgeving.

Studio Webdesign 4 Pro 25

Zo opent u een bestaande website terwijl u met het programma werkt:

1. Klik op Openen op de standaardwerkbalk.

2. Navigeer in het dialoogvenster Openen naar de map waarin het projectbestand is opgesla-

gen dat u wilt openen, selecteer het en klik op Openen.

Zo keert u naar de laatst opgeslagen versie van een geopende site terug:

* Kies Vorige versie in het menu Bestand.

Ontbrekende lettertypen vervangen

Studio Webdesign biedt u de mogelijkheid ontbrekende lettertypen te vervangen door letter-

typen die de oorspronkelijke zoveel mogelijk benaderen wanneer u een website opent waarin

lettertypen zijn gebruikt die niet beschikbaar zijn op uw computer. U kunt dergelijke letter-

typen naar keuze automatisch laten vervangen door het programma, of u kunt dit handmatig

doen. Raadpleeg het Help-bestand van het programma voor meer informatie.

EEN VOLLEDIG NIEUWE WEBSITE MAKEN

Hoewel het gebruik van een designsjabloon het designproces aanzienlijk kan vereenvoudigen,

kunt u net zo goed vanaf een lege site vertrekken en zelf een nieuwe website maken.

Zo maakt u een nieuwe website vanaf de startpagina:

* Start het programma (of kies Bestand > Startpagina) en klik op Nieuwe website maken.

Merk op dat de nieuwe site aanvankelijk uit één pagina bestaat, waarvoor de standaard pagi-

na-eigenschappen zijn ingesteld.

U verkrijgt hetzelfde resultaat wanneer u op

Annuleren klikt (of op Esc

drukt) terwijl de startpagina wordt weergegeven.

Zo maakt u een nieuwe site terwijl u met het programma werkt:

* Kies Nieuw in het menu Bestand.

MET MEERDERE SITES WERKEN

U kunt meerdere sites tegelijkertijd openen in Studio Webdesign. Elke site die u opent, ver-

schijnt in een afzonderlijk venster met zijn eigen instellingen. Met behulp van de venstertabs

boven in het programmavenster kunt u snel tussen de geopende documentvensters wisselen.

Door de vensters trapsgewijs te schikken of ze horizontaal of verticaal te splitsen, kunt u ob-

jecten zelfs eenvoudig via slepen-en-neerzetten van het ene naar het andere venster kopiëren.

U kunt ook een afzonderlijk venster openen om een voorbeeld te bekijken van de huidige site

(zie ‘Een voorbeeld bekijken van uw website’ in hoofdstuk 13).

26 Studio Webdesign 4 Pro

Zo sluit u het actieve venster:

* Kies Sluiten in het menu Bestand of klik op de knop Sluiten uiterst rechts in de titel-

balk van het documentvenster. Als dit het enige geopende venster is voor de site, wordt het

huidige projectbestand gesloten en wordt automatisch gevraagd of u uw wijzigingen wilt

opslaan.

Merk op dat onder aan het menu Venster de namen worden weergegeven van de document-

vensters die momenteel zijn geopend. Het actieve venster is met een vinkje gemarkeerd. De

eenvoudigste manier om naar een ander venster te wisselen, is vanzelfsprekend op de over-

eenkomstige venstertab (of rechtstreeks in het venster) klikken. Wanneer het ene venster ech-

ter het andere verbergt, moet u op Ctrl+Tab drukken of op een vensternaam klikken in het

menu om een ander venster te activeren.

UW PROJECT OPSLAAN

Zo slaat u het huidige project op:

* Klik op Opslaan op de standaardwerkbalk of kies Bestand > Opslaan.

* Kies Bestand > Opslaan als als u het project onder een andere naam wilt opslaan.

Studio Webdesign 4 Pro 27

3 SiteS en Pagina’S

ontWikkelen

OVER SITESTRUCTUUR EN NAVIGATIEHULPMIDDELEN

In tegenstelling tot een gedrukte publicatie is een website geen lineair document waarin de

ene pagina gewoon op de andere volgt. U kunt de structuur van uw site beter vergelijken

met die van een museum waarin mensen vrij kunnen rondwandelen. U kunt er doorgaans

wel vanuit gaan dat bezoekers langs de voordeur binnenkomen (de startpagina), maar waar

ze daarna naartoe gaan, is aankelijk van de hyperlinks die u hebt voorzien. Deze navigatie-

hulpmiddelen zijn als het ware de gangen die de verschillende ruimtes in het museum met

elkaar verbinden. Het is aan u als ‘architect’ om de pagina’s op een logische manier in te delen

en op de juiste plaatsen hyperlinks te voorzien, zodat gebruikers eenvoudig hun weg vinden

in uw site – zonder dat ze verdwalen.

In Studio Webdesign kunt u de boomstructuur op het tabblad Site gebruiken om de struc-

tuur van uw website visueel in te delen en er vervolgens de vereiste navigatie-elementen aan

toe te voegen (speciale thema-aeeldingen die zich automatisch aan de structuur van uw

site aanpassen). U zult deze boomstructuur regelmatig nodig hebben wanneer u met pagina’s

leert werken.

Structuur van de site

In tegenstelling tot de structuur van een museum staat deze van een website volledig los van

de fysieke indeling (de plaats waar de pagina’s zijn opgeslagen). De structuur van een website

is veeleer een methode om de inhoud van de site logisch in te delen, zodat gebruikers er een-

voudiger door kunnen navigeren. Het meest bruikbare concept op dit gebied – dat overigens

in Studio Webdesign is geïmplementeerd – is dat van de ‘omgekeerde boomstructuur,’ die

begint bij de startpagina en van daaruit naar de andere pagina’s vertakt. Het voordeel voor in-

ternetgebruikers die door uw website navigeren, is dat de inhoud van de site aan de hand van

deze indeling op een vertrouwde en overzichtelijke manier wordt weergegeven – hiërarchisch

gestructureerd in secties en niveaus.

Een sectie of rubriek is een categorie met verwante informatie, zoals ‘Nieuwsbrief,’ ‘Produc-

ten,’ ‘Contact’ of ‘Links.’ De verschillende hoofdrubrieken van een site zijn gewoonlijk toegan-

kelijk vanuit een navigatiebalk op de startpagina van de site. In het ideale geval behoort elke

pagina in de site tot een specieke rubriek. Elke rubriek hee doorgaans zijn eigen hoofd-

pagina, tenzij de desbetreende rubriek slechts uit één pagina bestaat. Deze pagina (hierna

de ‘parent’ of bovenliggende pagina genoemd) wordt gewoonlijk als menu voor de onderlig-

gende pagina’s gebruikt.

28 Studio Webdesign 4 Pro

Met de term niveau wordt het aantal stappen (links) bedoeld dat een bepaalde pagina van de

startpagina is verwijderd. De startpagina bevindt zich altijd op het hoogste niveau (niveau 1),

net als de hoofdpagina’s van de verschillende rubrieken. De onderliggende pagina’s bevinden

zich doorgaans op het tweede niveau (zie schema), enzovoort.

De boomstructuur van uw site (op het tabblad Site) is een handig visueel hulpmiddel om de

inhoud van uw site in rubrieken en niveaus in te delen – meerbepaald als een hiërarchie van

‘parents’ (bovenliggende pagina’s) en ‘childs’ (onderliggende pagina’s). In de volgende guur

ziet u een soortgelijke indeling, maar dan in de vorm van een boomstructuur in Studio Web-

design:

Via deze boomstructuur kunt u eenvoudig nagaan hoe de verschillende pagina’s in uw site

aan elkaar zijn gerelateerd en uw content op een logische manier indelen. Omdat een website

in werkelijkheid echter uit verschillende pagina’s bestaat die allemaal op de een of andere

manier aan elkaar zijn gerelateerd, is er natuurlijk niets dat u ervan weerhoudt naar behoee

hyperlinks toe te voegen om tussen specieke pagina’s te navigeren. De boomstructuur legt

Studio Webdesign 4 Pro 29

echter wel de belangrijkste ‘paden’ vast om in uw website rond te kuieren. Als u voor een logi-

sche indeling in rubrieken en niveaus kiest, kunnen internetgebruikers eenvoudiger door uw

site navigeren. Met Studio Webdesign is dit kinderspel. Met dit programma kunt u immers

eenvoudig navigatiebalken maken die perfect de structuur van uw site weerspiegelen en be-

zoekers automatisch langs de ‘hoofdwegen’ leiden.

Klik op

vlak boven de boomstructuur op het tabblad Site als u de be-

standsnamen van de pagina’s wilt weergeven in de boomstructuur in plaats van

hun interne paginanamen.

U kunt ook zuivere HTML-pagina’s en osite links opnemen in de boomstructuur van uw

site. U kunt deze pagina’s op dezelfde manier toevoegen als standaard webpagina’s. Merk op

dat dergelijke pagina’s met een ander symbool worden aangeduid dan standaard webpagina’s

in de boomstructuur, om aan te geven dat ze louter uit HTML-code bestaan (zie ‘HTML-

pagina’s maken’ in hoofdstuk 12) of naar een locatie buiten de website leiden.

Vergelijk de HTML-pagina ‘Overzicht’ met de standaardpagina ‘Verkoop’ en de osite link

‘Forum’ in de nevenstaande guur.

Navigatiehulpmiddelen

Bepaalde typen thema-aeeldingen in Studio Webdesign zijn zogeheten ‘navigatie-elemen-

ten.’ Dat geldt onder andere voor Vorige/Volgende-knoppen en de diverse vooraf gedeni-

eerde navigatiebalken. Kenmerkend voor deze elementen is dat ze zich automatisch aan de

structuur van uw site aanpassen, zodat u eenvoudig een site kunt ontwerpen waardoor inter-

netgebruikers vlot kunnen navigeren. Het enige wat u hoe te doen, is de gewenste thema-af-

beelding selecteren op het tabblad ema-aeeldingen. Studio Webdesign doet de rest! Merk

op dat Vorige/Volgende-knoppen automatisch aan aangrenzende pagina’s op hetzelfde niveau

worden gekoppeld. Navigatiebalken zijn een combinatie van knoppen en pop-upmenu’s die

waarborgen dat gebruikers eenvoudig door de verschillende rubrieken en niveaus in uw site

kunnen navigeren.

In de volgende guur ziet u de navigatiebalk die wij hebben gekozen voor de sitestructuur

die we hiervoor hebben beschreven. De knoppen fungeren als hyperlinks naar de startpagina

en de hoofdpagina’s van de verschillende rubrieken (niveau 1). De pop-upmenu’s zijn telkens

aan de onderliggende pagina’s van de desbetreende rubrieken gekoppeld (niveau 2 in dit

voorbeeld).

Hier is een beknopt overzicht van de voordelen die dergelijke navigatie-elementen bieden:

30 Studio Webdesign 4 Pro

* U kunt op een willekeurig niveau in de site navigatie-elementen invoegen. Bij navigatie-

balken kunt u bovendien eenvoudig de delen van de sitestructuur instellen waaraan u elke

navigatiebalk wilt koppelen, bijvoorbeeld aan pagina’s op het eerste of hetzelfde niveau,

aan onderliggende pagina’s, enzovoort.

* Omdat de navigatie-elementen thema-aeeldingen zijn, kunt u via het tabblad ema-

aeeldingen in de studio eenvoudig designelementen (knoppen, scheidingslijnen, enzo-

voort) met dezelfde grasche vormgeving kiezen, zodat de navigatiestructuur doorheen

de gehele website uniform is.

* Standaard worden alle pagina’s in de boomstructuur van uw site in de navigatiestructuur

opgenomen. Concreet betekent dit dat u voor al deze pagina’s navigatie-elementen kunt

toevoegen. Desgewenst kunt u bepaalde pagina’s echter uitsluiten van de navigatiestruc-

tuur. Dergelijke pagina’s worden dan genegeerd als u navigatie-elementen toevoegt. Pa-

gina’s die in de navigatiestructuur zijn opgenomen, worden met een vinkje

aangeduid

op het tabblad Site. Bij pagina’s die u van de navigatiestructuur hebt uitgesloten, wordt dit

vinkje niet weergegeven. Stel dat uw site een rubriek met referentiepagina’s bevat die u niet

in de navigatiestructuur wilt opnemen, zodat gebruikers ze niet van begin tot eind kunnen

doorlopen. Door de bovenliggende pagina van deze rubriek van de navigatiestructuur uit

te sluiten, verwijdert u de overeenkomstige koppeling uit de navigatiebalk. U kunt van-

zelfsprekend nog altijd hyperlinks toevoegen naar die pagina. De pagina wordt alleen niet

weergegeven in navigatie-elementen.

* Een van de belangrijkste voordelen van de navigatie-elementen in Studio Webdesign is

ongetwijfeld dat ze automatisch worden bijgewerkt als u achteraf de relaties tussen pagina’s

wijzigt, bepaalde pagina’s een andere naam gee of de navigatiebalk via knippen-en-plak-

ken naar een andere pagina verplaatst. Zo is ‘Archief 1’ in de bovenstaande guur bijvoor-

beeld slechts een plaatshouder voor de echte titel van de overeenkomstige pagina. (Bij

het ontwerpen van een website worden doorgaans altijd beschrijvende namen gebruikt

om de verschillende delen van de site te benoemen voordat de eigenlijke inhoud wordt

toegevoegd.) Als u de naam van deze pagina bijvoorbeeld in ‘Smit tot algemeen directeur

benoemd’ verandert, is de wijziging meteen zichtbaar in de navigatiebalk!

PAGINA’S VERSUS STRAMIENPAGINA’S

De pagina’s zijn de basiselementen van een site. In Studio Webdesign kunt u de inhoud van

uw site structureren door pagina’s in de vorm van een boomstructuur te ordenen. Op deze

manier kunt u een overzichtelijke indeling creëren, zodat bezoekers vlot door uw site kun-

nen navigeren. Onthoud in dit verband dat elke pagina uit een paginalaag (‘voorgrond’) en

stramienpaginalaag (‘achtergrond’) bestaat.

De stramienpagina’s zijn een onderdeel van de structuur van uw webproject. Hier kunt u

Studio Webdesign 4 Pro 31

alle achtergrondelementen plaatsen die op meerdere pagina’s in uw site moeten verschijnen,

zoals een logo, achtergrondaeelding, kop-/voettekst of zelfs een navigatie-element. Zoals u

in de onderstaande guur ziet, wordt een stramienpagina doorgaans voor meerdere pagina’s

in de site gebruikt. Door een speciek designelement op een stramienpagina te plaatsen en

deze stramienpagina vervolgens aan verschillende pagina’s toe te wijzen, waarborgt u dat dit

element op al deze pagina’s wordt weergegeven. Vanzelfsprekend kunt u op elke pagina andere

elementen op de ‘voorgrondlaag’ plaatsen.

Merk op dat het tabblad Site in de studio uit twee delen bestaat. In het vak Stramienpagina’s

bovenaan worden pictogrammen weergegeven voor alle stramienpagina’s die u hebt ingesteld

32 Studio Webdesign 4 Pro

voor uw site. In het vak Pagina’s onder aan het tabblad wordt een boomstructuur van de pa-

gina’s in uw site weergegeven. Let erop dat hier de stramienpagina wordt aangegeven waarop

elke pagina is gebaseerd (met een letter aangeduid):

PAGINA’S WEERGEVEN

De werkomgeving van Studio Webdesign bestaat uit een ‘paginagebied’ en het ‘plakbord’ er

rond.

De pagina is het witte werkblad waarop u tekst, aeeldingen en alle andere elementen plaatst

die op de uiteindelijke webpagina moeten verschijnen. Het plakbord is het grijze gebied rond-

om de pagina waar u elementen voorlopig kunt onderbrengen in afwachting dat u ze denitief

aan de webpagina toevoegt. Merk op dat ook elementen die de pagina overlappen worden

geëxporteerd wanneer u de website publiceert. Elementen die zich volledig op het plakbord

bevinden, worden niet geëxporteerd en zijn bijgevolg niet zichtbaar in de uiteindelijke web-

site. Het plakbord is overigens altijd beschikbaar, ongeacht de pagina of stramienpagina die

momenteel actief is. Aan de hand van deze voorziening kunt u elementen eenvoudig van de

ene naar de andere pagina kopiëren of verplaatsen.

Zo kopieert of verplaatst u een object naar een andere pagina via het plakbord:

1. Sleep het object vanaf de bronpagina naar het plakbord. (Houd de Ctrl-toets ingedrukt

terwijl u sleept als u een kopie wilt maken van het object.)

2. Geef de pagina weer waarheen u het object wilt kopiëren of verplaatsen (zie ‘Van pagina

wisselen’ hierna).

3. Sleep het object vanaf het plakbord naar de doelpagina. (Houd de Ctrl-toets ingedrukt als

u een kopie wilt maken.)

U kunt diverse weergaven instellen in Studio Webdesign. Zo kunt u bijvoorbeeld naar be-

hoee de volledige pagina weergeven in de werkomgeving of op een speciek gedeelte van de

pagina inzoomen, zodat u nauwkeurig kunt werken. Gebruik de schuialken onder in en aan

de rechterkant van de werkomgeving als u de pagina en het plakbord wilt verplaatsen in het

hoofdvenster. Merk op dat de weergave automatisch wordt gecentreerd wanneer u objecten

naar de randen van het scherm sleept.

U kunt ook het

Pangereedschap op de werkbalk Beeld gebruiken om door het werkgebied

te navigeren. Merk op dat deze werkbalk ook knoppen bevat waarmee u naar behoee in of

uit kunt zoomen op de pagina om deze op verschillende niveaus van detail te bewerken.

Studio Webdesign 4 Pro 33

U kunt ook het muiswieltje gebruiken om door de pagina te schuiven en het

zoompercentage te wijzigen. Om in verticale richting te bladeren, draait u ge-

woon aan het muiswieltje. Als u in horizontale richting wilt bladeren, houdt u

de Shi-toets ingedrukt terwijl u het muiswieltje gebruikt. Houd de Ctrl-toets

ingedrukt terwijl u aan het muiswieltje draait om in of uit te zoomen.

Van pagina wisselen

U kunt op verschillende manieren te werk gaan om het gedeelte van de site weer te geven dat

u wilt bewerken in Studio Webdesign. Het tabblad Site in de studio speelt hierbij als het ware

een centrale rol. Hier vindt u behalve een boomstructuur van de website die de indeling van

de pagina’s in uw site weergee (zie ‘Over sitestructuur en navigatiehulpmiddelen’ eerder in

dit hoofdstuk) ook pictogrammen voor de verschillende stramienpagina’s die u hebt inge-

steld voor uw site.

Met de knop Tussen paginatitel en bestandsnaam wisselen kunt u naar behoee de

titels van de pagina’s (de standaardinstelling) of de bestandsnamen van de pagina’s weergeven

in de boomstructuur. Via het tabblad Site kunt u eenvoudig een andere pagina selecteren,

een specieke pagina weergeven in de werkomgeving of de eigenschappen van een pagina

wijzigen.

U kunt natuurlijk ook het dialoogvenster Structuur van site (toegankelijk via de knop

Structuur van site) of de paginakiezer in de statusbalk gebruiken om een specieke pa-

gina weer te geven in de werkomgeving.

Verwar het selecteren van een pagina overigens niet met het weergeven van een pagina! Als

u één keer klikt op een pagina/stramienpagina op het tabblad Site, wordt deze alleen gese-

lecteerd. Dat is bijvoorbeeld zinvol als u de pagina wilt verwijderen uit de site. Als u de des-

betreende pagina/stramienpagina wilt weergeven in de werkomgeving, moet u er op dub-

belklikken of een van de methoden gebruiken die hierna worden beschreven. Uit het uiterlijk

van de pagina-ingangen op het tabblad Site kunt u snel aeiden of een pagina momenteel is

geselecteerd en/of wordt weergegeven:

Als een pagina is geselecteerd, hee de overeenkom-

stige ingang in de boomstructuur een oranje kleur en

wordt de paginanaam vet weergegeven.

Een pagina die momenteel wordt weergegeven (zodat

u deze kunt bewerken in de werkomgeving), is met

een oogpictogram gemarkeerd. In dit voorbeeld is de

pagina geselecteerd én wordt deze weergegeven in de

werkomgeving. Let er ook op dat we in dit voorbeeld

een andere stramienpagina hebben ingesteld voor de

pagina (stramien B in plaats van stramien A).

Als het pictogram van een stramienpagina boven aan

het tabblad Site is gemarkeerd, is deze stramienpagina

momenteel geselecteerd.

34 Studio Webdesign 4 Pro

Een stramienpagina die momenteel wordt weerge-

geven (zodat u deze kunt bewerken in de werkom-

geving), is met een oogpictogram gemarkeerd. In dit

voorbeeld wordt de stramienpagina wel weergegeven,

maar is deze niet geselecteerd.

Zo geeft u een speciﬁeke pagina/stramienpagina weer:

U kunt op verschillende manieren te werk gaan als u een welbepaalde pagina wilt weergeven

in de werkomgeving:

* Gebruik de knoppen

in de statusbalk om van de ene naar de andere pagina te navi-

geren.

Klik op de naam van de pagina of stramienpagina die u wilt weergeven in de paginakiezer.

* Dubbelklik op de desbetreende pagina/stramienpagina op het tabblad Site. Merk op dat

in het vak Pagina’s onder aan het tabblad een boomstructuur wordt weergegeven van alle

pagina’s in uw site, terwijl in het vak Stramienpagina’s bovenaan alleen pictogrammen

worden weergegeven voor de stramienpagina’s die u hebt ingesteld voor de site. (Wellicht

moet u op Stramienpagina’s klikken om dit vak uit te vouwen.)

* Klik op de knop

Structuur van site in de statusbalk of vlak boven het vak Pagina’s op

het tabblad Site. Selecteer in het dialoogvenster dat daarop verschijnt de pagina die u wilt

weergeven. (Dubbelklik zo nodig op een paginavermelding om de desbetreende tak uit

te vouwen.) Klik vervolgens op Weergeven.

Ga als volgt te werk om een specieke stramienpagina weer te geven:

1. Klik op

op het tabblad Site om het vak Stramienpagina’s uit te vouwen. Af-

hankelijk van het aantal stramienpagina’s dat u hebt ingesteld, worden hier een of meer

pictogrammen weergegeven.

2. Dubbelklik op het pictogram van de stramienpagina die u wilt weergeven.

Zo wisselt u tussen de stramienpagina- en paginalaag voor de huidige pagina:

* Klik op Pagina/stramienpagina in de statusbalk.

Studio Webdesign 4 Pro 35

* Kies Naar stramienpagina in het menu Beeld (of Pagina om naar de paginalaag terug te

keren).

Zo geeft u de startpagina van de site weer:

* Klik op Startpagina uiterst links in de statusbalk.

PAGINA’S TOEVOEGEN, VERWIJDEREN

EN DE VOLGORDE ERVAN WIJZIGEN

Via het tabblad Site in de studio kunt u eenvoudig standaardpagina’s of HTML-pagina’s toe-

voegen en verwijderen op een willekeurig niveau in de sitestructuur, of via slepen-en-neerzet-

ten de volgorde van de pagina’s wijzigen. Via dit tabblad kunt u ook nieuwe stramienpagina’s

instellen voor de site, een andere stramienpagina toewijzen aan specieke pagina’s en osite

links toevoegen. Gebruik het vak Stramienpagina’s boven aan het tabblad om met stramien-

pagina’s te werken en het vak Pagina’s (het vak met de boomstructuur van uw site) om bewer-

kingen uit te voeren op specieke pagina’s. Merk op dat u behalve standaardpagina’s, HTML-

pagina’s en osite links ook een of meer pagina’s uit een sjabloon aan uw site kunt toevoegen

(zie ‘Een website maken op basis van een sjabloon’ in hoofdstuk 2).

Behalve het tabblad Site kunt u ook het dialoogvenster Structuur van site of Stramienpa-

gina’s beheren en zowel de standaardmenu’s als snelmenu’s gebruiken om met pagina’s en

stramienpagina’s te werken.

Zo voegt u een nieuwe lege pagina toe:

1. Klik op het pijltje naast de knop Toevoegen vlak boven het vak Pagina’s op het tab-

blad Site om het bijbehorende vervolgmenu te openen en kies Nieuwe lege pagina.

2. Stel in het dialoogvenster Pagina invoegen de gewenste opties in voor de nieuwe pagina:

• TypinhetinvoervakPaginanaam een naam voor de nieuwe pagina. (Als u geen naam

opgee, kent het programma er een standaardnaam aan toe.)

• SelecteerindevervolgkeuzelijstStramienpagina de stramienpagina waarop u de nieu-

we pagina wilt baseren (bijvoorbeeld Stramien A), of als u een sjabloon bewerkt, de

stramienpagina van de sjabloon (bijvoorbeeld Standaardwaarden sjabloon).

• ActiveerhetselectievakjeObjecten kopiëren van pagina en selecteer een bronpagina

in de bijbehorende vervolgkeuzelijst als u de designelementen van een andere pagina

wilt kopiëren.

• GeefinhetgroepsvakPositie aan waar u de nieuwe pagina wilt invoegen in de boom-

structuur van de site. U hebt de keuze uit Voor, Na en Subpagina van. Activeer de

gewenste optie en selecteer vervolgens een pagina in de vervolgkeuzelijst.

3. Klik op OK.

De nieuwe pagina wordt op de opgegeven positie ingevoegd in de boomstructuur. Indien

nodig kunt u de pagina echter altijd naar een andere positie of naar een hoger of lager niveau

verplaatsen, of er een andere stramienpagina aan toewijzen (zie ‘De volgorde van pagina’s’

wijzigen en ‘Stramienpagina’s toewijzen’ verderop in dit hoofdstuk).

36 Studio Webdesign 4 Pro

Merk op dat automatisch de laatst gekozen menuopdracht wordt uitgevoerd

wanneer u op de knop Toevoegen klikt op het tabblad Site. De volgende

keer dat u op deze knop klikt, verschijnt dus automatisch het dialoogvenster

om een nieuwe lege pagina aan de site toe te voegen.

In plaats van lege standaardpagina’s in te voegen, kunt u zich het leven natuurlijk ook een

stuk gemakkelijker maken door ‘kant-en-klare’ pagina’s uit de meegeleverde sjablonen in te

voegen. Als u de oorspronkelijke vormgeving van een sjabloonpagina wilt behouden, kunt u

behalve de pagina zelf ook de bijbehorende stramienpagina in uw project ‘importeren.’

Zo voegt u een nieuwe pagina toe uit een sjabloon:

1. Selecteer in het vak Pagina’s (de boomstructuur van uw site) op het tabblad Site de pagina

waarna u een nieuwe pagina wilt invoegen.

2. Klik op het pijltje naast de knop

Toevoegen vlak boven de boomstructuur om het

bijbehorende vervolgmenu te openen en kies Nieuwe pagina op basis van sjabloon.

3. Selecteer links in het dialoogvenster Nieuwe pagina toevoegen op basis van sjabloon

een sjabloon. Selecteer vervolgens aan de rechterkant de pagina die u in uw project wilt

invoegen door het bijbehorende selectievakje te activeren. (Activeer meerdere selectie-

vakjes als u meer dan een sjabloonpagina wilt invoegen.) Gebruik indien nodig de zoom-

gereedschappen onder in het dialoogvenster om de afzonderlijke pagina’s aandachtiger te

bestuderen.

4. Via de vervolgkeuzelijst linksboven in het dialoogvenster kunt u aangeven of u ook de

stramienpagina van de geselecteerde sjabloonpagina aan uw project wilt toevoegen. Kies

een van de volgende opties:

* Stramienpagina kopiëren: selecteer deze optie als u behalve de pagina zelf ook de bij-

behorende stramienpagina aan uw project wilt toevoegen.

* Stramienpagina vergelijken en kopiëren: als u deze optie selecteert, gaat het program-

ma na of de desbetreende stramienpagina al voorkomt in uw project. Als dat niet zo

is, wordt deze aan uw project toegevoegd.

* Geen stramienpagina: selecteer deze optie als u de stramienpagina van de pagina niet

aan uw project wilt toevoegen.

5. Klik op Openen. De geselecteerde pagina’s worden aan de boomstructuur toegevoegd.

Behalve lege pagina’s en sjabloonpagina’s kunt u ook HTML-pagina’s aan uw sitestructuur

toevoegen. Ook dergelijke pagina’s kunt u in de navigatiestructuur van uw site opnemen, net

als gewone pagina’s.

Zo voegt u een HTML-pagina toe:

1. Selecteer in het vak Pagina’s (de boomstructuur van uw site) op het tabblad Site de pagina

waarna u een nieuwe pagina wilt invoegen.

2. Klik op het pijltje naast de knop

Toevoegen vlak boven de boomstructuur om het

bijbehorende vervolgmenu te openen en kies Nieuwe HTML-pagina.

Studio Webdesign 4 Pro 37

Er wordt een nieuwe HTML-pagina toegevoegd aan de sitestructuur. Lees ‘HTML-pagina’s

maken’ in hoofdstuk 12 voor meer informatie.

U kunt ook een osite link toevoegen aan de sitestructuur. Doorgaans gaat het hierbij om

een afzonderlijke pagina of bron die losstaat van uw site, maar die u in de navigatiestructuur

van uw site wilt opnemen (bijvoorbeeld een forum of blog die u beheert via Serif Web Re-

sources). Dergelijke osite links verschijnen zowel in de boomstructuur van uw website als in

navigatie-elementen, zodat u ze kunt bewerken alsof het pagina’s zijn in uw site.

Zo voegt u een offsite link toe:

1. Selecteer in het vak Pagina’s op het tabblad Site de pagina waarna u een nieuwe pagina

wilt invoegen.

2. Klik op het pijltje naast de knop

Toevoegen vlak boven de boomstructuur om het

bijbehorende vervolgmenu te openen en kies Nieuwe osite link.

3. Selecteer links in het dialoogvenster Osite link invoegen het type osite link dat u wilt

invoegen (naar een internetpagina, e-mailadres, enzovoort). Stel vervolgens aan de rech-

terkant het doel van de osite link in (zie ‘Het doel van een hyperlink instellen’ in hoofd-

stuk 11), en het venster waarin u het doel van de link wilt weergeven (als u Standaard

kiest, wordt het ingestelde doelframe voor een navigatiebalk gebruikt).

4. Typ in het invoervak Menunaam de naam die u de osite link wilt geven in uw sitestruc-

tuur (het equivalent van de paginanaam).

5. Klik op OK.

Zo voegt u een nieuwe stramienpagina toe:

1. Klik op boven aan het tabblad Site om het vak Stramienpagina’s uit te vou-

wen.

2. Klik op

Toevoegen vlak boven het vak met stramienpagina’s.

1. Klik op

Stramienpagina’s beheren.

2. Klik in het dialoogvenster Stramienpagina’s beheren op Toevoegen en geef de gewenste

breedte en hoogte op voor de stramienpagina als u aangepaste afmetingen wilt gebrui-

ken.

3. (Facultatief) Geef op het tabblad Achtergrond aan of u de instellingen van het kleuren-

schema voor de site wilt gebruiken of als u een aangepaste achtergrondkleur en/of pagina-

kleur wilt instellen voor de stramienpagina. Activeer het selectievakje Aeelding gebrui-

ken als u een aeelding als pagina-achtergrond wilt gebruiken.

4. (Facultatief) Selecteer op het tabblad Overgangen de overgang die u wilt gebruiken bij het

weergeven en/of verlaten van pagina’s die op deze stramienpagina zijn gebaseerd. Merk op

dat u het selectievakje Instellingen voor stramienpagina negeren moet activeren voordat

u een overgang kunt instellen.

5. Klik op OK.

Er verschijnt een nieuwe stramienpagina in het vak Stramienpagina’s boven aan het tabblad

Site.

38 Studio Webdesign 4 Pro

Zo maakt u een kopie van een pagina:

* Klik met de rechtermuisknop op een geselecteerde pagina op het tabblad Site en kies Pa-

gina klonen in het snelmenu. Vlak onder de geselecteerde pagina wordt een identieke

kopie van deze pagina ingevoegd.

Zo verwijdert u een pagina of stramienpagina:

1. Selecteer de pagina (of stramienpagina) die u wilt verwijderen op het tabblad Site.

2. Klik op

Verwijderen boven het vak Pagina’s of Stramienpagina’s, naargelang u een

pagina dan wel een stramienpagina hebt geselecteerd.

Wanneer u een pagina verwijdert, wordt automatisch gevraagd wat u wilt doen

met hyperlinks die naar deze pagina verwijzen in uw site. U kunt dergelijke

hyperlinks naar behoee verwijderen of ze naar een andere pagina in uw site

omleiden. (Desgewenst kunt u ook alle hyperlinks naar bladwijzers op deze

pagina verwijderen.)

De volgorde van pagina’s wijzigen

De boomstructuur van uw site is niet alleen handig om pagina’s toe te voegen of te verwij-

deren, maar ook om de volgorde van uw pagina’s te wijzigen. Zoals eerder in dit hoofdstuk

al werd uitgelegd, is deze boomstructuur een visueel hulpmiddel om de inhoud van uw site

in ‘rubrieken’ en ‘niveaus’ in te delen, meerbepaald als een hiërarchie van bovenliggende pa-

gina’s of ‘parents’ die naar onderliggende pagina’s of ‘childs’ vertakken. Ze helpt u niet alleen

het overzicht te behouden over de inhoud van uw site, maar stelt het programma ook in staat

uw logische pagina-indeling te vertalen naar een site waardoor internetgebruikers later vlot

kunnen navigeren. Wanneer u speciale thema-aeeldingen (‘navigatie-elementen’ genoemd)

zoals Vorige/Volgende-knoppen en navigatiebalken hebt gebruikt, zult u merken dat deze

zich automatisch aan de structuur van uw site aanpassen en meteen worden bijgewerkt als u

de indeling van de pagina’s wijzigt!

Op basis van deze parent/child-structuur kunt u eenvoudig de volgorde en indeling van de

pagina’s in uw site wijzigen, ofwel via slepen-en-neerzetten ofwel met behulp van knoppen.

Hierbij kunt u een pagina:

* naar een andere positie op hetzelfde niveau verplaatsen;

* naar een hoger niveau verplaatsen (parent);

* naar een lager niveau verplaatsen (child).

Zo verplaatst u een pagina:

1. Geef het tabblad Site weer.

2. Klik op de pagina die u wilt verplaatsen in de boomstructuur van uw site om deze te selec-

teren.

Studio Webdesign 4 Pro 39

3. Sleep de pagina naar een andere positie in de boomstructuur. Let op het symbool dat in

plaats van de klassieke muisaanwijzer wordt weergegeven. Dit symbool gee het niveau

aan waarop de pagina zal worden ingevoegd:

Wanneer

als aanwijzer verschijnt, wordt de pagina op hetzelfde niveau ingevoegd (onder

de pagina waarboven de aanwijzer zich momenteel bevindt).

Wanneer

als aanwijzer wordt weergegeven, wordt de pagina een child van de pagina

waarboven de aanwijzer zich momenteel bevindt.

Stramienpagina’s toewijzen

U kunt op verschillende manieren te werk gaan om een andere stramienpagina toe te wijzen

aan afzonderlijke pagina’s als u meerdere stramienpagina’s hebt ingesteld voor uw site. Merk

op dat u een pagina niet noodzakelijk op een stramienpagina hoe te baseren. Misschien wilt

u op een geïmporteerde webpagina bijvoorbeeld alleen de oorspronkelijke designelementen

zien, en niet de elementen die u op een van de stramienpagina’s voor de site hebt geplaatst.

Onthoud in ieder geval dat u aan elke pagina in uw site maar één stramienpagina kunt toewij-

zen. (Lees ‘Pagina’s versus stramienpagina’s’ eerder in dit hoofdstuk voor meer informatie.)

Zo wijst u een stramienpagina toe aan een pagina:

* Klik in het vak Stramienpagina’s boven aan het tabblad Site op het pictogram van de

stramienpagina en sleep het naar de pagina waaraan u deze stramienpagina wilt toewijzen

in de boomstructuur van uw site.

MET FRAMES WERKEN

U kunt in Studio Webdesign een of meer frames, ook wel iFrames genoemd, op een pagina

plaatsen die elk een andere pagina in uw website toegankelijk maken. Net als aeeldingen

kunt u deze frames op een willekeurige positie op de pagina plaatsen en er willekeurige af-

metingen voor instellen. Hoewel dergelijke frames doorgaans aan een specieke pagina in uw

site zijn gekoppeld, kunt u er ook allerlei andere gekoppelde documenten in weergeven (zoals

een pagina van een andere website op internet, een lokaal bestand, een intelligent object of

opgeslagen gebruikersgegevens).

iFrames zijn bijvoorbeeld handig als u op elke pagina in uw website steeds dezelfde informatie

wilt weergeven (bijvoorbeeld een lijst met producten). Het enige wat u hiervoor hoe te doen,

is een iFrame op de stramienpagina van uw site plaatsen. U kunt zelfs nog een stapje verder

gaan en selectieknoppen (of menuopties) aan het frame toevoegen, zodat gebruikers kunnen

kiezen wat er wordt weergegeven in het frame. Als elke knop aan een andere pagina (maar tel-

kens aan hetzelfde frame) is gekoppeld, kunt u de inhoud van het frame laten wijzigen, aan-

kelijk van de knop waarop wordt geklikt. Hiervoor kunt u gebruikmaken van de automatisch

gegenereerde HTML-id (zie hoofdstuk 12) die u als doelframe (van het type Documentframe)

moet opgeven bij het instellen van de hyperlinks voor de knoppen.

Zorg ervoor dat de pagina die u in het frame wilt weergeven niet op dezelfde

40 Studio Webdesign 4 Pro

stramienpagina is gebaseerd als de pagina waarop het frame zich bevindt wan-

neer u een iFrame op een stramienpagina plaatst. (Zo voorkomt u ongewenste

pagina-in-pagina eecten.)

Om een iFrame aan uw site toe te voegen, gebruikt u het gereedschap Frame met gekoppeld

document. Merk op dat in het programma doelbewust de term ‘frame met gekoppeld do-

cument’ wordt gebruikt om het concept van iFrames duidelijk te onderscheiden van dat van

HTML-tekstframes en aangepaste tekstframes (waarmee u de positie van tekst op de pagina

kunt bepalen).

Studio Webdesign ondersteunt ook actieve documentframes. Dergelijke documentframes

zijn handig wanneer u met frames werkt in uw website en een bepaalde pagina in een speci-

ek frame wilt openen. De naam van het actieve documentframe is een combinatie van de

paginanaam en de naam van het frame. Zo verwijst ‘Startpagina’ in “Startpagina: ifrm_6”

bijvoorbeeld naar de startpagina van uw site en ‘ifrm_6’ naar de naam van een frame dat au-

tomatisch is gegenereerd. U kunt pagina’s omleiden naar het frame waarin ze moeten worden

weergegeven als u dat wilt. Dat is bijvoorbeeld handig wanneer ze worden gevonden door een

zoekmachine. Om deze voorziening in te schakelen voor elke pagina die u in een frame wilt

openen, kiest u Bewerken > Eigenschappen van pagina > Openen in actief documentframe

en activeert u de optie Indien nodig naar dit frame omleiden.

Zo maakt u een frame met een gekoppeld document:

1. Selecteer de pagina waaraan u het frame wilt toevoegen.

2. Klik op de werkbalk Webobjecten aan de linkerkant op

Frame met gekoppeld docu-

ment toevoegen. Let erop dat de muisaanwijzer een andere vorm krijgt. De handeling die

u nu uitvoert, bepaalt de aanvankelijke grootte en positie van het frame.

3. Klik met de muis op de positie waar u het frame wilt invoegen als u de standaardafmetin-

gen wilt gebruiken voor het frame.

Studio Webdesign 4 Pro 41

Sleep met de muis op de pagina als u aangepaste afmetingen wilt instellen voor het frame.

4. Zodra u het frame hebt toegevoegd, verschijnt er een dialoogvenster waarin u kunt instel-

len wat u precies wilt weergeven in dit frame. Geef via de lijst links in het dialoogvenster

aan of u een pagina in uw site, een internetpagina, een intelligent object, een lokaal be-

stand, een bladwijzer, RSS-feed of gebruikersgegevens wilt weergeven in het frame.

5. Kies de gewenste instellingen in het groepsvak Inhoud van frame (paginanaam, web-

adres, enzovoort). Welke informatie u hier precies moet opgeven, is aankelijk van de

optie die u hiervoor hebt geselecteerd.

6. Kies in het groepsvak Instellingen voor inhoud van frame de gewenste weergaveopties

voor het frame:

* Actief documentframe: vink dit selectievakje aan als u wilt toestaan dat een pagina

in een frame op een andere pagina wordt geopend wanneer op de overeenkomstige

hyperlink wordt geklikt.

* Randen weergeven: activeer dit selectievakje als u een dunne rand wilt weergeven rond

het frame om de positie ervan aan te geven.

* Transparante achtergrond: als de pagina die u in het frame wilt weergeven een trans-

parante achtergrond hee, kunt u er door deze optie in te schakelen voor zorgen dat de

achtergrond die u hebt ingesteld voor uw site wordt weergegeven wanneer deze pagina

wordt geopend in het frame. Als u deze optie uitschakelt, wordt voor een pagina met

een transparante achtergrond standaard wit als achtergrondkleur ingesteld wanneer de

pagina wordt geopend in het frame.

* Schuialken: geef aan of u indien nodig automatisch schuialken wilt weergeven

(Auto), of als u altijd (Ja) dan wel nooit (Nee) schuialken wilt weergeven in het

frame.

7. Klik op OK.

Absolute URL’s

Omdat frames een webpagina in een of meer deelvensters onderverdelen en in elk van deze

deelvensters een ander HTML-document wordt weergegeven, dient u ervoor te zorgen dat

met behulp van absolute URL’s naar elk onderdeel van het frame wordt verwezen. Zo stelt

u zeker dat ook de pagina in het frame aan de lijst met favorieten wordt toegevoegd als een

bezoeker deze pagina van uw site aan zijn favorieten toevoegt. Als u geen absolute URL’s ge-

bruikt, is dat niet noodzakelijk het geval. Merk op dat u de basis-URL van uw site moet instel-

len als u gebruik wilt maken van absolute URL’s (het gedeelte van de URL dat alle pagina’s in

uw site met elkaar gemeen hebben), bijvoorbeeld:

https://www.easycomputing.com/URL/voorbeeld/

Het programma gebruikt deze basis-URL om de rest van de URL samen te stellen.

42 Studio Webdesign 4 Pro

DE LAY-OUTHULPMIDDELEN GEBRUIKEN

Lay-outhulplijnen zijn hulplijnen die u als visueel hulpmiddel kunt gebruiken om elementen

nauwkeurig op de gewenste positie te plaatsen, ofwel ‘met het blote oog’ ofwel door het mag-

netische raster in te schakelen. Als het magnetische raster is ingeschakeld, wordt elk object

dat u maakt, verplaatst of schaalt automatisch op de dichtstbijzijnde, zichtbare lay-outhulplijn

uitgelijnd. U kunt verschillende soorten lay-outhulplijnen instellen in Studio Webdesign om

elementen nauwkeurig uit te lijnen: paginamarges, rij-/kolomhulplijnen en liniaalhulplijnen.

* Een van de hulpmiddelen die ongetwijfeld een grote invloed hebben op de uiteindelijke

paginalay-out zijn vanzelfsprekend de ingestelde paginamarges. Doorgaans is dit een van

de eerste zaken die u moet instellen wanneer u een volledig nieuwe site maakt. Stel altijd

eerst de paginamarges in voordat u een webpagina begint te ontwerpen. Merk op dat de

paginamarges met een blauw kader worden aangeduid op de pagina en dat het in feite om

vier afzonderlijke hulplijnen gaat aan de boven-, onder-, linker- en rechterkant van de

pagina. Desgewenst kunt u de afdrukmarges van uw printer als paginamarges instellen.

* Een ander belangrijk lay-outhulpmiddel zijn de rij- en kolomhulplijnen, waarmee u een

pagina in meerdere rijen of kolommen kunt onderverdelen (met blauwe stippellijnen aan-

geduid op de pagina).

* Liniaalhulplijnen ten slotte zijn ‘kleverige’ rode hulplijnen die u kunt instellen door op

een van de linialen te klikken (zie hierna). Deze hulplijnen zijn een handig hulpmiddel om

objecten horizontaal of verticaal uit te lijnen.

In tegenstelling tot framemarges en de kolommen in een frame hebben deze

hulplijnen geen invloed op de indeling van de tekst in tekstframes. Het zijn

veeleer visuele hulpmiddelen om de verschillende frames op een pagina op de

kolomindeling van die pagina af te stemmen. De kolombreedte voor een frame

komt doorgaans overeen met de breedte van de kolommen waarin de onderlig-

gende pagina is onderverdeeld. Soms is een kolom in een frame echter twee tot

drie keer zo breed als de kolommen op de onderliggende pagina.

Zo stelt u de vereiste lay-outhulplijnen in:

* Zorg ervoor dat er niets is geselecteerd en klik op op de optiebalk.

Op het tabblad Marges kunt u de paginamarges instellen en hulplijnen deniëren om de

pagina in rijen en kolommen onder te verdelen. Merk op dat u de linker-, rechter-, boven- en

ondermarge afzonderlijk kunt instellen. Desgewenst kunt u zelfs uitgebalanceerde marges

instellen (bovenaan evenveel witruimte als onderaan en links evenveel witruimte als rechts).

In het groepsvak Rij- en kolomhulplijnen kunt u hulplijnen instellen om de pagina in rijen

en kolommen in te delen. Hierbij kunt u nauwkeurig de afstand tussen de afzonderlijke rijen

en kolommen instellen. Als u voor bepaalde rijen of kolommen een andere breedte wilt instel-

len dan voor andere, moet u eerst hulplijnen deniëren die gelijkmatig zijn gespreid over de

pagina en deze vervolgens handmatig naar de gewenste positie slepen op de pagina.

Op het tabblad Hulplijnen kunt u nauwkeurig de gewenste horizontale en verticale liniaal-

Studio Webdesign 4 Pro 43

hulplijnen instellen door absolute pixelcoördinaten op te geven. U kunt deze hulplijnen ook

rechtstreeks instellen door op een van beide linialen te klikken in de werkomgeving en een

horizontale dan wel verticale hulplijn vanuit de liniaal naar de pagina te slepen (zie ‘Hulplij-

nen instellen via de linialen’ verderop in deze paragraaf).

Zo geeft u de ingestelde hulplijnen weer of verbergt u ze:

* Schakel de optie Hulplijnen in of uit in het menu Beeld.

Merk op dat u door deze optie in te schakelen ook de ingestelde liniaalhulplijnen weergee.

Met de linialen werken

De linialen kunnen voor verschillende doeleinden worden ingezet in Studio Webdesign:

* als meetinstrument;

* om liniaalhulplijnen te tekenen, zodat u objecten eenvoudig kunt uitlijnen;

* om het puntraster en (onrechtstreeks) het magnetische raster te deniëren.

De werkelijke afstand tussen de verschillende maatstreepjes op de linialen is aankelijk van

het huidige zoompercentage. Als het zoompercentage bijvoorbeeld op 50% is ingesteld, zijn

de streepjes verder van elkaar verwijderd dan wanneer een zoompercentage van 150% is in-

gesteld. Als u nauwkeuriger wilt werken, moet u inzoomen op de pagina.

De linialen aanpassen

Standaard bevinden de horizontale en verticale liniaal zich respectievelijk boven aan en aan

de linkerkant van het programmavenster. Het snijpunt tussen beide linialen bevindt zich in

de linkerbovenhoek van het plakbord. Het nulpunt bevindt zich standaard in de linkerboven-

hoek van de pagina (het witte werkblad). U kunt deze instellingen echter wijzigen.

Zo wijzigt u het nulpunt van de linialen:

* Klik op het driehoekje in het snijpunt van beide linialen en sleep het naar een nieuwe

positie op de pagina of het plakbord. (Zorg ervoor dat u alleen het driehoekje versleept!)

44 Studio Webdesign 4 Pro

1. Kies Extra > Opties > Linialen.

2. Stel een nieuwe oorsprong in voor de horizontale en/of verticale liniaal.

Zo verplaatst u de linialen:

* Sleep het driehoekje in het snijpunt van beide linialen naar een andere positie terwijl u de

Shi-toets ingedrukt houdt. Merk op dat het nulpunt hierdoor ongewijzigd blij.

* Dubbelklik op het snijpunt van beide linialen om de linialen en het nulpunt naar de lin-

kerbovenhoek van de pagina te verplaatsen. Als er een object is geselecteerd, worden de

linialen en het nulpunt naar de linkerbovenhoek van het object verplaatst. Deze voorzie-

ning is handig als u objecten op de pagina wilt meten.

Zo herstelt u het oorspronkelijke nulpunt en de oorspronkelijke positie van de

linialen:

* Dubbelklik op het driehoekje in het snijpunt van beide linialen.

Zo voorkomt u dat de linialen per ongeluk worden verplaatst:

* Kies Extra > Opties, klik op Linialen en activeer het selectievakje Linialen vergrende-

len.

De linialen als meetlat gebruiken

U kunt de linialen vanzelfsprekend ook als meetlat gebruiken. Wanneer u de muisaanwijzer

verplaatst, verschijnt in beide linialen een volle lijn die de huidige horizontale en verticale

positie van de aanwijzer aangee. Als u op een object klikt om het te selecteren, verschijnen

er in beide linialen blauwe balken die de linker-, rechter-, boven- en onderrand van het gese-

lecteerde object aangeven. Elk van deze balken hee een nulpunt dat relatief is ten opzichte

van de linkerbovenhoek van het object, zodat u in één oogopslag de afmetingen van het object

kunt controleren.

Hulplijnen instellen via de linialen

U kunt horizontale en verticale liniaalhulplijnen instellen via de linialen. Het gaat hierbij om

rode lijnen die niet worden afgedrukt en die u kunt gebruiken om koptitels, aeeldingen en

andere lay-outelementen op de pagina nauwkeurig uit te lijnen.

Studio Webdesign 4 Pro 45

1. Klik op de horizontale of verticale liniaal op de positie waar de hulplijn moet verschij-

nen om een horizontale respectievelijk verticale hulplijn te tekenen. Houd de Alt-toets

ingedrukt voordat u op een liniaal klikt om een horizontale hulplijn te tekenen vanuit de

verticale liniaal en omgekeerd.

2. Sleep de aanwijzer vanuit de liniaal naar de positie waar u de horizontale of verticale hulp-

lijn wilt toevoegen in het werkgebied. Merk op dat de huidige positie van de hulplijn met

een rode stippellijn wordt aangeduid terwijl u sleept. Zodra u de muisknop loslaat, ver-

schijnt een volle rode lijn. Bekijk de informatie in de statusbalk terwijl u sleept om nauw-

keurig de positie van de hulplijn te bepalen.

U kunt de hulplijnen achteraf naar behoee bewerken:

* Als u een hulplijn wilt verplaatsen, beweegt u met de muisaanwijzer boven de hulplijn

totdat deze de vorm krijgt van een dubbele pijl en sleept u de hulplijn terwijl u de linker-

muisknop ingedrukt houdt naar de gewenste positie.

* Om een hulplijn te verwijderen, sleept u deze gewoon naar het plakbord rondom de pa-

gina.

* Kies Extra > Opties, klik op Lay-out en activeer het selectievakje Hulplijnen vergrende-

len als u de hulplijnen wilt vergrendelen.

* Als u nauwkeurig de positie van de hulplijnen wilt instellen, klikt u op

op de

optiebalk terwijl er niets is geselecteerd en activeert u het tabblad Hulplijnen. Hier kunt

u hulplijnen toevoegen en verwijderen en/of de positie van bepaalde hulplijnen wijzigen.

Klik op Alle verwijderen als u in één keer alle hulplijnen wilt verwijderen.

Kleverige hulplijnen

Hulplijnen zijn standaard ‘kleverig’ in die zin dat wanneer u ze naar een andere positie sleept

op de pagina automatisch ook alle objecten worden verplaatst die erop zijn uitgelijnd. U kunt

deze voorziening indien nodig echter op elk moment uitschakelen, of ervoor zorgen dat af-

zonderlijke objecten niet aan een hulplijn blijven ‘kleven’ wanneer u deze verplaatst.

Zo zorgt u ervoor dat afzonderlijke objecten niet aan een hulplijn blijven kleven:

1. Selecteer het desbetreende object.

2. Klik op een van beide rode driehoekjes die worden weergegeven op het punt waar het

object aan de hulplijn is verankerd. Let erop dat het symbool

verschijnt wanneer u de

aanwijzer boven een van deze driehoekjes plaatst.

46 Studio Webdesign 4 Pro

Klik op het rode driehoekje om het object

van de hulplijn los te maken

Het driehoekje wordt zwart en het object is niet

langer aan de hulplijn verankerd

3. Als u de rode hulplijn nu naar een andere positie sleept, blij het object niet meer aan de

hulplijn kleven.

U kunt het object weer aan een hulplijn doen kleven door het tegen de desbe-

treende hulplijn te plaatsen.

Zo schakelt u deze voorziening in en uit:

* Kies Extra > Opties > Lay-out en schakel het selectievakje Kleverige hulplijnen uit.

Merk op dat objecten die voorheen aan een hulplijn waren verankerd aan deze hulplijn veran-

kerd blijven, zelfs nadat u de voorziening hebt uitgeschakeld. Als u dit wilt voorkomen, moet

u deze objecten een voor een van de hulplijnen losmaken.

Het puntraster gebruiken

Het puntraster is een matrix van punten of lijnen die is gebaseerd op de

maateenheid die voor de linialen is ingesteld. Dit raster bedekt de pagina

en het plakbord rondom de pagina en is net als de hulplijnen die u via de

linialen kunt tekenen een handig visueel hulpmiddel om objecten uit te

lijnen.

Zo schakelt u het puntraster in of uit:

* Schakel de optie Puntraster in of uit in het menu Beeld.

* Kies Extra > Opties > Vangen en schakel het selectievakje Puntraster in of uit.

U kunt ook de afstand tussen de rasterlijnen, de rasterstijl en de rasterkleur instellen via het

dialoogvenster Opties.

Studio Webdesign 4 Pro 47

THEMA-AFBEELDINGEN TOEVOEGEN EN BEWERKEN

Het tabblad ema-aeeldingen in de studio bevat tientallen kant-en-klare objecten die

overzichtelijk zijn ingedeeld volgens thema en die u eenvoudig via slepen-en-neerzetten

aan uw pagina’s kunt toevoegen. (U kunt natuurlijk ook het overeenkomstige dialoogven-

ster gebruiken om deze objecten toe te voegen.) Het gaat hierbij om vooraf gedenieerde

objecten, gaande van statische designelementen zoals opsommingstekens en scheidingslijnen

tot interactieve navigatie-elementen zoals Vorige/Volgende-knoppen en navigatiebalken die

zich automatisch aan de structuur van uw site aanpassen. ema-aeeldingen gedragen zich

als afzonderlijke objecten, die zo zijn geprogrammeerd dat automatisch een specieke actie

wordt uitgevoerd als u ze schaalt, er met de muisaanwijzer over beweegt op een webpagina,

enzovoort. Waar mogelijk kunt u de tekst en allerlei andere eigenschappen van een thema-

aeelding bewerken nadat u deze aan een pagina hebt toegevoegd. U kunt ook eenvoudig een

ander visueel thema instellen voor de thema-aeeldingen die u aan uw site hebt toegevoegd.

Hierbij kunt u naar behoee alle thema-aeeldingen in de site of alleen specieke aeeldin-

gen bijwerken.

U kunt thema-aeeldingen op twee manieren selecteren en weergeven op het tabblad e-

ma-aeeldingen: volgens type of volgens set. Een ‘type’ duidt een bepaalde categorie de-

signelementen aan. Zo zijn bullets en knoppen bijvoorbeeld twee verschillende typen the-

ma-aeeldingen. Een ‘set’ is een verzameling elementen met dezelfde grasche vormgeving,

waarbij van elk type één element beschikbaar is. Elke set hee een beschrijvende naam, zoals

Helder, Snoep, Zuiver, enzovoort. In het onderstaande schema ziet u het verband tussen deze

sets en typen:

Gebruik altijd thema-aeeldingen uit dezelfde set, zodat alle designelementen in uw site de-

zelfde grasche vormgeving hebben. Als u later een andere ‘look’ wilt, selecteert u gewoon

een andere set op het tabblad ema-aeeldingen. Dan worden alle thema-aeeldingen in

de site automatisch bijgewerkt.

Zo voegt u een thema-afbeelding toe aan een pagina:

1. Geef het tabblad ema-aeeldingen weer in de studio.

2. Selecteer via de vervolgkeuzelijst boven aan het tabblad de gewenste categorie thema-

aeeldingen.

Klik op Huidige site om alle thema-aeeldingen weer te geven die u al hebt gebruikt in

de site. Dat is bijvoorbeeld zinvol als u een bepaalde thema-aeelding wilt hergebruiken.

Vouw de lijst Sets of Typen uit en selecteer een categorie.

48 Studio Webdesign 4 Pro

Selecteer ema-aeeldingen als categorie en klik vervolgens op Huidige site, Sets of

Typen in de galerie onder aan het tabblad. Klik tot slot op de miniatuurweergave van de

set of het type thema-aeeldingen dat u wilt weergeven.

3. Blader door de lijst met beschikbare elementen nadat u een categorie hebt geselecteerd

en klik op een miniatuur om de overeenkomstige thema-aeelding in het midden van de

pagina in te voegen in de werkomgeving. U kunt de miniatuur ook vanuit de galerie naar

een specieke positie op de pagina slepen.

1. Klik op

ema-aeelding invoegen in het vervolgmenu Navigatiehulpmiddelen

toevoegen op de werkbalk Webobjecten aan de linkerkant.

2. Selecteer het gewenste type thema-aeeldingen in de vervolgkeuzelijst boven in het dia-

loogvenster en klik vervolgens op een van de thumbnails in de galerie om een set te kie-

zen.

3. Klik op OK.

Als u op de miniatuur van een thema-aeelding klikt in de galerie op het

tabblad ema-aeeldingen, wordt de standaardbewerking voor die thema-

aeelding uitgevoerd (doorgaans de aeelding toevoegen). Klik met de rech-

termuisknop op een miniatuur of klik op het pijltje in de rechterbenedenhoek

om het vervolgmenu met andere mogelijke bewerkingen weer te geven, zoals

Invoegen, Vervangen in selectie en Vervangen in site.

Nadat u thema-aeeldingen hebt toegevoegd aan uw site, kunt u er snel en eenvoudig een

ander visueel thema voor instellen. Hierbij kunt u naar behoee alle thema-aeeldingen in

de site of alleen specieke aeeldingen bijwerken.

Zo stelt u een ander thema in voor de thema-afbeeldingen in uw site:

1. Geef het tabblad ema-aeeldingen weer in de studio.

2. Vouw via de vervolgkeuzelijst bovenaan de lijst Sets uit en selecteer het thema dat u wilt

gebruiken.

Selecteer ema-aeeldingen als categorie en klik vervolgens op Sets in de galerie. Klik tot

slot op de miniatuur van het thema dat u wilt toepassen.

3. In plaats van op een miniatuur te klikken in de galerie, kunt u ook het snelmenu of het

vervolgmenu voor de desbetreende thema-aeelding openen. Via dit menu kunt u ver-

schillende bewerkingen uitvoeren:

* Een specieke thema-aeelding bijwerken: selecteer de thema-aeelding en let op

het type dat in de statusbalk wordt weergegeven. Klik vervolgens met de rechtermuis-

knop op de miniatuur van hetzelfde type element in de galerie en kies Vervangen in

selectie in het snelmenu.

Studio Webdesign 4 Pro 49

* Een bepaald type elementen bijwerken: selecteer een thema-aeelding die represen-

tatief is voor het type elementen dat u wilt bijwerken, klik met de rechtermuisknop op

de miniatuur van hetzelfde type elementen in de galerie en kies Vervangen in site in het

snelmenu.

* Alle thema-aeeldingen in uw site bijwerken: klik op de miniatuur <ema> toe-

passen in de galerie onder aan het tabblad. Hiermee werkt u alle thema-aeeldingen

in de site bij, ongeacht hun type.

Elk thema dat u kiest, neemt automatisch het huidige kleurenschema voor de

site over. U kunt dit kleurenschema op elk moment wijzigen, maar dan veran-

dert ook het uiterlijk van uw thema-aeeldingen.

Zo verplaatst of schaalt u een thema-afbeelding:

* Sleep vanuit het midden van het selectiekader als u een thema-aeelding wilt verplaatsen.

Om de grootte van een thema-aeelding te wijzigen, versleept u een van de grepen of

randen van het selectiekader.

U kunt de tekst van afzonderlijke thema-aeeldingen bewerken, en allerlei eigenschappen

instellen voor een specieke thema-aeelding of voor alle thema-aeeldingen van een be-

paalde set of een bepaald type.

Zo bewerkt u een of meer thema-afbeeldingen:

1. Dubbelklik op het desbetreende element. (Als u een type of set wilt bijwerken, selecteert

u een thema-aeelding die representatief is voor dat type of die set.)

Selecteer het element en klik op de knop

Bewerken.

2. Gebruik het dialoogvenster om de instellingen voor de rollover-modi Standaard en Over

van de thema-aeelding te wijzigen. Welke eigenschappen u precies kunt wijzigen, hangt

af van het type thema-aeelding dat u hebt geselecteerd. Doorgaans kunt u echter de

tekst, de tekstkleur en het lettertype wijzigen. Op de meeste tabbladen (op die voor tekst

na) kunt u afzonderlijke instellingen kiezen voor de geselecteerde thema-aeelding, the-

ma-aeeldingen van dit type en/of thema-aeeldingen in de huidige set. Merk op dat

de gewijzigde instellingen alleen op thema-aeeldingen in de huidige site worden toege-

past.

3. Klik op OK om de wijzigingen toe te passen.

50 Studio Webdesign 4 Pro

DE GALERIJ GEBRUIKEN

Het tabblad Galerij is een soort container waarin u designelementen (zoals Flash-banners,

tekstblokken en zelfs niet-gekoppelde tekstframes en HTML-fragmenten) kunt opslaan die

u wilt hergebruiken, hetzij in dezelfde site hetzij in andere sites. Zodra u een ontwerp aan

de galerij hebt toegevoegd, is het ook beschikbaar voor alle toekomstige sites die u met dit

programma ontwerpt!

De galerij bevat ook allerlei kant-en-klare designelementen die u naar behoee kunt aanpas-

sen en als uitgangspunt voor uw eigen ontwerpen kunt gebruiken. Deze designelementen zijn

overzichtelijk ingedeeld in categorieën, zodat u het gezochte element snel terugvindt. (Op de

resource-cd bij het programma zijn nog meer designelementen beschikbaar.)

Zo geeft u het tabblad Galerij weer:

* Het tabblad Galerij is standaard in de tabgroep met de tabbladen Site, Objectstijlen en

ema-aeeldingen ondergebracht in de studio. Kies Beeld > Studiotabs en activeer de

optie Tabblad Galerij als dit tabblad bij u niet wordt weergegeven.

De galerij bestaat uit twee delen: (1) een lijst met categorieën (bovenaan) en (2) een lijst met

ontwerpen (onderaan) waar miniaturen worden weergegeven van de ontwerpen die beschik-

baar zijn in de geselecteerde categorie. Als u een ontwerp wilt gebruiken op een pagina, sleept

u het gewoon naar de gewenste positie op de pagina vanuit de galerij.

U kunt ook uw eigen ontwerpen opslaan in de galerij (onder Persoonlijke ontwerpen of in

een gebruikergedenieerde categorie) als u die later wilt hergebruiken in andere projecten.

Wanneer u het product pas hebt geïnstalleerd, is de galerie Persoonlijke ontwerpen vanzelf-

sprekend leeg. U kunt echter naar behoee items toevoegen aan de galerij, die u indien nodig

op elk moment weer kunt verwijderen. Hierbij kunt u elk element een specieke naam geven,

zodat u het later sneller terugvindt.

U kunt noch ontwerpen toevoegen aan de vooraf gedenieerde categorieën

noch er ontwerpen uit verwijderen.

Studio Webdesign 4 Pro 51

Zo gebruikt u een ontwerp uit de galerij:

* Selecteer het ontwerp dat u wilt gebruiken en sleep het vanuit de galerij naar de pagina.

Merk op dat het ontwerp hierbij niet uit de galerij wordt verwijderd.

Zo geeft u een speciﬁeke categorie elementen weer:

1. Klik op de tab Galerij in de studio.

2. Open de vervolgkeuzelijst boven aan het tabblad en selecteer een map of categorie. Stan-

daard worden de items uit de eerste categorie in de geselecteerde map weergegeven.

Zo creëert, verwijdert of hernoemt u categorieën in uw lijst met persoonlijke ont-

werpen:

* Klik terwijl het tabblad Galerij actief is op de knop uiterst rechts om het vervolgmenu

voor het tabblad te openen en kies Categorie toevoegen, Categorie verwijderen of Naam

van categorie wijzigen.

Als u een categorie toevoegt, verschijnt er een dialoogvenster waarin u de nieuwe categorie

een naam kunt geven. Als u een categorie wilt verwijderen of deze een andere naam wilt ge-

ven, selecteert u die categorie voordat u de overeenkomstige optie kiest in het vervolgmenu.

Wanneer u een categorie verwijdert, worden ook alle ontwerpen verwijderd die

in die categorie zijn opgeslagen!

Zo kopieert of verplaatst u een object naar de galerij:

1. Selecteer via de vervolgkeuzelijst boven aan het tabblad Galerij de categorie Persoonlijke

ontwerpen of een van de subcategorieën van deze categorie.

2. Sleep het object vanaf de pagina naar de lijst met ontwerpen onder aan het tabblad als u

het naar de galerij wilt verplaatsen. Om een object naar de galerij te kopiëren, houdt u de

Ctrl-toets ingedrukt voordat u begint te slepen.

3. Als de optie Om naam vragen is ingeschakeld in het vervolgmenu voor het tabblad (toe-

gankelijk via de knop

), wordt automatisch gevraagd een naam op te geven voor het

nieuwe ontwerp. (U kunt de naam van het ontwerp later altijd nog wijzigen.) Als u geen

naam opgee, wordt standaard ‘Naamloos’ toegekend als naam.

4. Er verschijnt een miniatuur van uw ontwerp in de lijst met ontwerpen onder aan het tab-

blad. Merk op dat onder deze miniatuur de naam wordt weergegeven die u hiervoor hebt

opgegeven.

Zo verwijdert u een ontwerp uit de galerij:

* Plaats de muisaanwijzer boven de miniatuur van het ontwerp, klik op het pijltje in de

rechterbenedenhoek en kies Ontwerp verwijderen in het vervolgmenu.

52 Studio Webdesign 4 Pro

SITE-EIGENSCHAPPEN INSTELLEN

Site-eigenschappen zijn globale instellingen die doorheen de gehele website worden toege-

past. Tot deze eigenschappen behoren onder andere de pagina-instellingen, de gekozen instel-

lingen voor de HTML-uitvoer en het bijhouden van gebruikersstatistieken, identicatiege-

gevens zoals de naam van de auteur en een copyrightvermelding, en de gekozen instellingen

om uw site te optimaliseren voor zoekmachines. Doorgaans dient u deze eigenschappen in

te stellen bij het plannen van uw website. Eenmaal u de gewenste instellingen hebt gekozen,

hoe u ze normaal gesproken niet meer te veranderen (hoewel u deze instellingen achteraf

natuurlijk op elk moment kunt wijzigen).

Merk op dat bepaalde site-eigenschappen, zoals de pagina-instellingen en de instellingen om

uw site te optimaliseren voor zoekmachines, ook toegankelijk zijn vanuit het dialoogvenster

Eigenschappen van pagina (zie verderop in dit hoofdstuk). Zo kunt u bepaalde eigenschappen

die op de gehele site van toepassing zijn indien nodig onderdrukken voor specieke pagina’s,

of die aanvullen met lokale instellingen die uitsluitend voor welbepaalde pagina’s gelden.

Zo controleert en/of wijzigt u de site-eigenschappen:

* Kies Eigenschappen van site in het menu Bestand. Het dialoogvenster Eigenschappen

van site verschijnt.

Dit dialoogvenster is in verschillende tabbladen onderverdeeld. Op elk van deze tabbladen

kunt u specieke site-eigenschappen instellen.

Tabblad Eigenschap

Opties Standaard bestandsextensie

De webpagina’s die u publiceert met dit programma hebben standaard

de bestandsextensie .html. Op sommige webservers moet u mogelijk

echter een andere extensie gebruiken. Via deze vervolgkeuzelijst kunt u

de standaardextensie wijzigen.

Standaarduitlijning pagina’s

Hier kunt u een standaarduitlijning kiezen voor uw pagina’s.

Absolute tekengrootte afdwingen

De tekengrootte van de tekst op uw webpagina’s is standaard aanke-

lijk van de browserinstellingen die de gebruiker hee gekozen. U kunt

er echter voor zorgen dat tekst altijd met dezelfde tekengrootte wordt

weergegeven.

Standaardafmetingen van pagina’s

De standaardinstellingen die u hier kiest, bepalen de breedte en hoogte

van nieuwe stramienpagina’s, die op hun beurt de grootte bepalen van

de pagina’s die erop zijn gebaseerd.

HTML-uitvoer

U kunt uit verschillende coderingsmethoden kiezen en aangeven of u

al dan niet automatisch HTML-id’s wilt genereren voor elk object op

een pagina.

Studio Webdesign 4 Pro 53

Tabblad Eigenschap

Zoeken Beschrijving voor zoekmachines

Hier kunt u een beschrijving van uw site en trefwoorden opgeven.

Zoekmachines Instellingen voor zoekmachines

Hier kunt u aangeven of zoekmachines en robots pagina’s in uw site

mogen analyseren en indexeren. Een sitemap-bestand bevat webpagi-

na’s die mogen worden geïndexeerd, terwijl een Robots-metatag of een

Robots-bestand (robots.txt) bepaalt welke pagina’s niet mogen worden

geïndexeerd.

Identicatie Naam van auteur/copyrightvermelding

Hier kunt u metatags met de naam van de auteur, een copyrightvermel-

ding en de publicatiedatum van uw site aan de headers van uw webpa-

gina’s toevoegen.

Aeeldingen Algemene exportopties voor aeeldingen

Hier kunt u de standaardinstellingen kiezen voor het exporteren van

aeeldingen.

Favorieten Favorieten

Hier kunt u het pictogram (*.ico) instellen dat u wilt weergeven wanneer

internetgebruikers uw website aan hun lijst met Favorieten toevoegen.

Samenvatting/

Statistieken

Projecteigenschappen en statistieken

Hier kunt u de huidige projecteigenschappen weergeven en/of wijzi-

gen.

Analyse van site Gebruikersstatistieken

Op dit tabblad kunt u aangeven of u gebruikersstatistieken wilt bijhou-

den voor uw site.

Basis-URL Absolute URL’s

Hier kunt u de basis-URL van uw site opgeven. Dat is bijvoorbeeld no-

dig bij het instellen van absolute URL’s voor RSS-feeds of als u een site-

map-bestand gebruikt om uw site te optimaliseren voor zoekmachines.

De standaard bestandsextensie instellen

Standaard worden de verschillende pagina’s in uw site als HTML-bestanden geëxporteerd

op het moment dat u uw project publiceert. U kunt uw webpagina’s echter ook in een andere

indeling exporteren als u bij uw webhost een andere bestandsextensie moet gebruiken. Zo

wijzigt u de standaard bestandsextensie:

1. Kies Eigenschappen van site in het menu Bestand.

2. Klik op de tab Opties en selecteer een andere bestandsextensie in de overeenkomstige

vervolgkeuzelijst.

54 Studio Webdesign 4 Pro

De paginagrootte en het type uitlijning instellen

De standaardafmetingen die u op het tabblad Opties van het dialoogvenster Eigenschap-

pen van site instelt, bepalen de breedte en hoogte van stramienpagina’s, die op hun beurt

de grootte bepalen van pagina’s die erop zijn gebaseerd. Analoog hieraan bepaalt de stan-

daarduitlijning die u instelt voor de site (Links of Centreren) hoe de inhoud van uw pagina’s

wordt uitgelijnd wanneer ze in een browser worden weergegeven.

Een van de eerste dingen die u wellicht moet doen als u een nieuwe site maakt, is de inge-

stelde standaardafmetingen controleren en die zo nodig aanpassen. Merk op dat u de stan-

daardafmetingen kunt negeren voor afzonderlijke stramienpagina’s en dat u een aangepaste

breedte en hoogte kunt instellen voor pagina’s die niet op een stramienpagina zijn gebaseerd

(bijvoorbeeld voor geïmporteerde webpagina’s). U kunt de afmetingen van uw pagina’s op elk

moment aanpassen, maar onthoud dat u beter van meet af aan de juiste afmetingen instelt om

te voorkomen dat dergelijke wijzigingen een nefaste invloed hebben op de paginalay-out!

Doorgaans kunt u het beste een breedte van 750 tot 800 pixels instellen voor uw stramienpa-

gina’s, zodat ze volledig worden weergegeven op een standaardbeeldscherm. Zo voorkomt u

dat gebruikers horizontaal moeten schuiven.

Wat de hoogte van uw stramienpagina’s betre, kunt u het beste de paginalengte van de

kortste pagina waarvoor u deze stramienpagina’s wilt gebruiken als waarde instellen. Studio

Webdesign baseert zich immers altijd op de paginalengte die in de pagina-eigenschappen is

ingesteld bij het exporteren van de afzonderlijke pagina’s in uw site, zodat pagina’s dus gerust

langer kunnen zijn dan de stramienpagina waarop ze zijn gebaseerd. Uw pagina’s worden dus

altijd volledig geëxporteerd door het programma. U hoe met andere woorden niet te vrezen

dat pagina’s die langer zijn dan de lengte die u hier hebt ingesteld niet volledig zichtbaar zullen

zijn in de uiteindelijke website.

Studio Webdesign biedt u de mogelijkheid bepaalde elementen op een stramienpagina on-

der aan de pagina te verankeren (met de opdracht Onder aan pagina plaatsen in het menu

Schikken). Zo stelt u zeker dat elementen die onder aan de pagina thuishoren, zoals copy-

rightvermeldingen en navigatiebalken of navigatieknoppen die u onderaan hebt geplaatst,

altijd onder aan uw webpagina’s worden weergegeven, ongeacht de paginahoogte.

Zo stelt u de standaardafmetingen van uw pagina’s in:

* Kies Eigenschappen van site in het menu Bestand, klik op de tab Opties en stel de ge-

wenste breedte en/of hoogte in voor stramienpagina’s.

U kunt ook de standaarduitlijning van pagina’s wijzigen of een aangepaste uitlijning instellen

voor specieke pagina’s.

Zo stelt u de standaarduitlijning van pagina’s in:

* Kies Eigenschappen van site in het menu Bestand, klik op de tab Opties en kies de ge-

wenste instelling in de vervolgkeuzelijst Standaarduitlijning pagina’s.

U kunt de standaardinstellingen voor de afmetingen en uitlijning van pagina’s negeren voor

specieke pagina’s. Hoe u dat doet, leest u in ‘Pagina-eigenschappen instellen’ verderop in dit

hoofdstuk.

Studio Webdesign 4 Pro 55

Auteurs- en copyrightinformatie opgeven

* Gebruik het tabblad Identicatie als u de content van uw site auteursrechtelijk wilt be-

schermen. Typ de naam van de auteur en een copyrightvermelding in de overeenkomstige

invoervakken. Merk op dat deze informatie niet rechtstreeks op de pagina wordt weerge-

geven, maar naar de header van elke pagina wordt geschreven.

schermd door Teeb Soware, Inc. Zie gebruiksvoorwaarden.”>

* Activeer het selectievakje Publicatiedatum in header opnemen als u behalve de auteurs-

naam en copyrightinformatie ook de publicatiedatum van uw webpagina’s in de header

wilt opnemen.

De projecteigenschappen weergeven en/of wijzigen

Studio Webdesign houdt allerlei eigenschappen en gegevens bij voor elk projectbestand.

Zo wijzigt u de projecteigenschappen:

1. Kies Eigenschappen van site in het menu Bestand.

2. Klik op de tab Samenvatting als u algemene informatie zoals de auteursnaam, trefwoor-

den, opmerkingen en de titel of het onderwerp van het project wilt wijzigen.

3. Klik op de tab Statistieken als u wilt nagaan wanneer het project is gemaakt, wanneer het

voor het laatst is gewijzigd of opgeslagen, enzovoort.

Als u met meerdere gebruikers aan een website werkt, wilt u misschien allerlei informatie over

het huidige project weergeven op het scherm of op een afdruk, zoals de titel en bestandsnaam

van de site, de naam van de auteur, de datum waarop de site voor het laatst is bewerkt, het

aantal revisies en het aantal pagina’s.

Zo voegt u informatie over het project toe:

1. Activeer het selectiegereedschap en klik op een tekstframe om de invoegpositie in de tekst

te plaatsen.

2. Kies Invoegen > Informatie > Informatie over site. Selecteer in het dialoogvenster de

informatie die u wilt invoegen, activeer zo nodig het selectievakje Automatisch bijwerken

en klik op OK.

Als u het bovengenoemde selectievakje hebt geactiveerd, wordt de ingevoegde informatie au-

tomatisch bijgewerkt wanneer de projectgegevens wijzigen.

Een pictogram instellen voor de lijst met Favorieten

Studio Webdesign biedt u de mogelijkheid een aangepast pictogram weer te geven wanneer

internetgebruikers uw site aan de lijst met Favorieten toevoegen in hun webbrowser. U kunt

hiervoor een grasche representatie van uw website, een bedrijfslogo of elk ander symbool

gebruiken.

56 Studio Webdesign 4 Pro

Merk op dat u deze voorziening pas kunt gebruiken nadat u een pictogrambestand (*.ico)

hebt gemaakt voor uw site.

Zo stelt u een pictogram in voor uw site:

1. Kies Eigenschappen van site in het menu Bestand.

2. Klik op de tab Favorieten en activeer het selectievakje Favorieten-symbool weergeven

voor site.

3. Klik op Bladeren, navigeer naar de map waarin het ico-bestand is opgeslagen dat u als

pictogram wilt gebruiken, selecteer het en klik op Openen.

4. Activeer het selectievakje Bestand insluiten als u het pictogrambestand in het projectbe-

stand wilt insluiten.

5. (Facultatief) Klik op Exportopties als u een aangepaste bestandsnaam en map wilt ge-

bruiken bij het exporteren van het bestand (zie ‘Exportopties instellen voor aeeldingen’

in hoofdstuk 9).

Uitvoeropties instellen

U kunt een coderingstype dat speciek is voor uw taal instellen voor de HTML-uitvoer die

het programma genereert en aangeven of browsers automatisch regelterugloop mogen toe-

passen na areekstreepjes. Daarnaast kunt u ook instellen of u spaties en speciale tekens wilt

verwijderen uit de bestandsnamen van uw bronbestanden bij het genereren van de HTML-

uitvoer, en of u automatisch HTML-id’s wilt genereren voor de afzonderlijke objecten op een

pagina.

Zo stelt u het coderingstype in:

1. Kies Eigenschappen van site in het menu Bestand.

2. Klik op de tab Opties en kies een coderingstype in de vervolgkeuzelijst Codepagina. Een

codepagina kiezen die speciek is voor uw taal is erg belangrijk als u wilt dat formulieren

op geëxporteerde pagina’s die in een welbepaalde taal zijn gemaakt probleemloos worden

verwerkt.

Mogelijk moet u de spaties uit bestandsnamen verwijderen bij het exporteren van bestan-

den (aeeldingen, videobestanden, JavaScript-bestanden, enzovoort), bijvoorbeeld omdat

bestandsnamen met spaties niet worden ondersteund op de webserver van uw ISP. Standaard

worden dergelijke spaties behouden, maar zo nodig kunt u ze verwijderen uit de namen van

bronbestanden.

Zo verwijdert u spaties in de bestandsnamen van bronbestanden of converteert

u bestandsnamen naar kleine letters:

1. Kies Eigenschappen van site in het menu Bestand.

2. Klik op de tab Opties en activeer het selectievakje Spaties verwijderen en/of Bestandsna-

men naar kleine letters converteren.

U kunt het programma een <WBR>-tag laten exporteren overal waar een arekingsteken

wordt aangetroen in uw tekst, zodat browsers een regeleinde kunnen invoegen na een af-

Studio Webdesign 4 Pro 57

breekstreepje. Als dit geen vereiste is, kunt u de tekst gewoon ongewijzigd exporteren (zon-

der na elk arekingsteken een <WBR>-tag in te voegen). Zo voorkomt u veelvoorkomende

fouten bij het valideren van de HTML-code (aangezien WBR-tags een extensie van Microso

zijn), maar kan het wel gebeuren dat tekst waarop woordareking is toegepast de grenzen van

het frame overschrijdt.

Zo voorkomt u dat tags voor het afbreken van woorden worden geëxporteerd:

1. Kies Eigenschappen van site in het menu Bestand.

2. Klik op de tab Opties en schakel het selectievakje <WBR>-tags schrijven voor areek-

streepjes uit.

Als u geavanceerde bewerkingen wilt uitvoeren op objecten (bijvoorbeeld met behulp van

scripts), kunt u aangeven of het programma al dan niet automatisch HTML-id’s moet genere-

ren voor de verschillende objecten, tekstkolommen, tabelrijen en tabelcellen in uw site.

Zo wijzigt u de standaardinstellingen voor het genereren van HTML-id’s:

1. Kies Eigenschappen van site in het menu Bestand.

2. Klik op de tab Opties. Standaard wordt voor alle objecten, tekstkolommen, tabelrijen en

tabelcellen automatisch een id gegenereerd. Schakel het overeenkomstige selectievakje uit

onder aan het tabblad als u wilt voorkomen dat automatisch een id wordt toegewezen aan

het desbetreende type object.

Gebruikersstatistieken bijhouden

U kunt gedurende een of meer maanden (en desgewenst zelfs gedurende verschillende jaren!)

allerlei statistische gegevens verzamelen en weergeven met betrekking tot uw site. Zo kunt u

beoordelen of uw website wel de doelstellingen haalt die u had vooropgesteld, en mogelijk ook

hoe succesvol deze is. Op basis van deze statistische gegevens kunt u eenvoudiger nagaan hoe

u uw website nog kunt verbeteren.

U kunt verschillende soorten gebruikersstatistieken verzamelen over uw site, meerbepaald:

* Bezoekersstatistieken: u kunt het aantal hits per dag in een graek uitzetten en zo de

populariteit van uw site meten.

58 Studio Webdesign 4 Pro

Daarnaast kunt u ook informatie verzamelen over de meest bekeken pagina’s, de top vijf lan-

ding-pagina’s (de eerste pagina waarop een bezoeker terechtkomt vanaf een andere website)

en de top vijf exit-pagina’s (de laatste pagina die een bezoeker bekijkt voordat hij uw website

verlaat).

* Browserinformatie: hiermee kunt u nagaan wat voor browser, beeldschermresolutie en

besturingssysteem uw bezoekers gebruiken, en of het weergeven van Flash-animaties is

ingeschakeld in hun browser.

* Referrers: hiermee kunt u nagaan wie de belangrijkste en meest standvastige referrers

zijn, dat wil zeggen vanaf welke webpagina’s internetgebruikers op uw pagina’s belanden.

* Zoektermen: hiermee kunt u nagaan wat de meest gebruikte zoekmachines en zoekter-

men zijn om uw website te vinden.

Het bijhouden van gebruikersstatistieken kan worden ingeschakeld via het dialoogvenster

Eigenschappen van site door een proel te selecteren dat speciaal voor de site is aangemaakt.

De gegenereerde statistieken zijn op elk moment toegankelijk via het gereedschap om intel-

ligente objecten toe te voegen op de werkbalk Webobjecten in het programma, of rechtstreeks

via serifwebresources.com.

Gebruik de graek van het aantal hits per dag om na te gaan wanneer de

webserver niet beschikbaar was. Dagen zonder hits kunnen erop wijzen dat de

server op dat moment niet beschikbaar was.

Zo schakelt u het bijhouden van gebruikersstatistieken in:

1. Kies Eigenschappen van site in het menu Bestand.

2. Activeer op het tabblad Analyse van site het selectievakje Verzamelen van gebruikers-

statistieken inschakelen.

3. Klik op de knop Proel instellen en doe het volgende:

* Typ een naam in het invoervak Nieuw proel maken en klik op de knop Nieuw proel

toevoegen als u tot nu toe geen proel hebt aangemaakt. Selecteer dit proel vervolgens

in de lijst aan de linkerkant.

Als u eerder al een proel hebt aangemaakt, selecteert u het in de lijst.

4. Klik op OK en bevestig ook het dialoogvenster Eigenschappen van site met OK.

Zo geeft u de verzamelde statistieken weer:

1. Klik op het gereedschap Intelligent object toevoegen op de werkbalk Webobjecten en

meld u aan bij Serif Web Resources.

2. Selecteer het object voor het verzamelen van gebruikersstatistieken in uw lijst met intel-

ligente objecten.

3. Klik in het deelvenster aan de rechterkant op de knop

Studio Webdesign 4 Pro 59

4. Selecteer een categorie in de vervolgkeuzelijst bovenaan en kies vervolgens de periode

waarvoor u de verzamelde statistieken wilt bekijken.

Een absolute URL instellen

Normaal gesproken is er niet echt een reden om de basis-URL van uw website op te geven

in het programma. Soms dient u deze URL echter wel op te geven, met name in de volgende

situaties:

* Als uw ISP websites in een iFrame host, kunt u absolute URL’s gebruiken bij het instellen

van hyperlinks naar pagina’s in uw site, bestanden, bladwijzers en navigatie-elementen.

* Als u gebruikmaakt van een sitemap-bestand om uw site te optimaliseren voor zoekma-

chines, moet u de basis-URL van de site opgeven, zodat internetgebruikers vanuit de lijst

met zoekresultaten in een zoekmachine naar uw site kunnen gaan.

* Als op een andere website naar een RSS-feed/podcast op uw site wordt verwezen, kan deze

feed/podcast via de absolute URL in een browser worden weergegeven (zie ‘RSS-feeds en

podcasts’ in hoofdstuk 12).

Zo stelt u een absolute URL in:

1. Kies Eigenschappen van site in het menu Bestand.

2. Geef op het tabblad Basis-URL de basis-URL van uw site op, bijvoorbeeld www.easycom-

puting.com, www.mijnsite.com, enzovoort.

3. (Facultatief) Activeer het selectievakje Alle lokale URL’s naar absolute URL’s converte-

ren als u absolute URL’s wilt gebruiken in plaats van relatieve URL’s.

U kunt van een hyperlink een absolute hyperlink maken door de optie Volledi-

ge URL exporteren aan te vinken bij het instellen van hyperlinks naar pagina’s

in uw site, bestanden, bladwijzers of navigatie-elementen. Als u geen basis-URL

hebt opgegeven voor uw site, wordt automatisch gevraagd dit te doen op het

moment dat u de site publiceert.

Gebruik geen URL’s waarin een submap of paginanaam is toegevoegd aan het

basisadres.

60 Studio Webdesign 4 Pro

PAGINA-EIGENSCHAPPEN INSTELLEN

Elke website die u maakt, hee zijn eigen ‘geraamte’ of structuur – bestaande uit de site zelf;

een of meer stramienpagina’s en een aantal afzonderlijke pagina’s. Elk aspect van dit ge-

raamte hee bepaalde eigenschappen die samen het uiterlijk van de uiteindelijke site bepalen.

U kunt deze standaardeigenschappen behouden of ze naar behoee aanpassen, ongeacht of

u een van de ingebouwde designsjablonen als uitgangspunt gebruikt of een volledig nieuwe

site ontwerpt.

U kunt zowel het tabblad Site, het snelmenu voor de actieve pagina in de werkomgeving als

het dialoogvenster Sitebeheer gebruiken om de pagina-eigenschappen van afzonderlijke pa-

gina’s weer te geven. Het voordeel wanneer u hiervoor het dialoogvenster Sitebeheer gebruikt,

is dat u de eigenschappen van meerdere pagina’s tegelijkertijd kunt wijzigen. Het enige wat u

hoe te doen, is de desbetreende pagina’s selecteren en er de gewenste pagina-eigenschap-

pen voor instellen. De nieuwe instellingen worden automatisch op alle geselecteerde pagina’s

toegepast.

Zo geeft u de eigenschappen van een stramienpagina weer:

* Klik op Stramienpagina’s beheren vlak boven het vak Stramienpagina’s boven aan

het tabblad Site. Selecteer in het dialoogvenster de stramienpagina waarvan u de eigen-

schappen wilt weergeven en klik op Eigenschappen.

Zo geeft u de eigenschappen van afzonderlijke pagina’s in uw site weer:

* Klik met de rechtermuisknop op de pagina waarvan u de eigenschappen wilt weergeven in

de werkomgeving en kies Eigenschappen van pagina in het snelmenu.

Het dialoogvenster Eigenschappen van pagina verschijnt. Dit dialoogvenster is in verschil-

lende tabbladen onderverdeeld. Op elk van deze tabbladen kunt u specieke pagina-eigen-

schappen instellen.

Tabblad Eigenschap

Algemeen Paginanaam en bestandsnaam

Elke pagina hee een ‘zichtbare’ paginatitel of bestandsnaam. Deze titel

of bestandsnaam wordt in de boomstructuur op het tabblad Site weerge-

geven. Op dit tabblad kunt u een pagina een andere naam geven, er een

aangepaste titel voor instellen en/of de bestandsnaam van een pagina wij-

zigen.

Toevoegen aan navigatiestructuur

Standaard worden alle pagina’s in uw site in de navigatiestructuur opge-

nomen. Dat wil zeggen dat u ze toegankelijk kunt maken vanuit navigatie-

elementen zoals navigatiebalken.

Pagina-uitlijning

De instelling die u hier kiest, bepaalt hoe de inhoud van een pagina wordt

weergegeven in een browser. Gebruik deze optie als u een aangepaste uit-

lijning wilt instellen voor afzonderlijke pagina’s in uw site.

Studio Webdesign 4 Pro 61

Tabblad Eigenschap

Stramienpagina

Via deze vervolgkeuzelijst kunt u een specieke stramienpagina toewijzen

aan een pagina, of aangeven dat u een pagina niet op een stramienpagina

wilt baseren.

Breedte en Hoogte

De grootte van pagina’s wordt bepaald door de stramienpagina waarop ze

zijn gebaseerd. Gebruik het dialoogvenster Stramienpagina’s beheren als u

aangepaste afmetingen wilt instellen voor afzonderlijke stramienpagina’s.

Hier kunt u aangepaste afmetingen instellen voor pagina’s die niet op een

stramienpagina zijn gebaseerd. Bij pagina’s die wel op een stramienpagina

zijn gebaseerd, kunt u alleen de hoogte instellen.

Openen in actief documentframe

Met deze optie kunt u pagina’s in een actief documentframe openen als

eerder een dergelijk frame is gemaakt.

Achtergrond Achtergrondgeluid

Hier kunt u aangeven of u automatisch een bepaald geluidsfragment wilt

laden en afspelen wanneer een pagina voor het eerst wordt weergegeven.

Achtergrond Achtergrondkleur/achtergrondaeelding/paginakleur

Wanneer internetgebruikers het formaat van hun browservenster wijzigen

of het maximaliseren, kan het gebeuren dat rond uw pagina’s witruimte

wordt weergegeven. Dat is bijvoorbeeld het geval wanneer een website die

in de eerste plaats is bedoeld voor gebruikers die met een beeldschermre-

solutie van 800 x 600 pixels werken, wordt bekeken door gebruikers die

met een hogere beeldschermresolutie werken. Hier kunt u een aangepaste

kleur/aeelding instellen voor dit gebied, evenals een kleur voor de pagi-

na-achtergrond. Gebruik deze voorziening voor pagina’s die niet op een

stramienpagina zijn gebaseerd. (Bij pagina’s die op een stramienpagina zijn

gebaseerd, worden standaard de instellingen van het kleurenschema voor

de site gebruikt.)

Zoeken Beschrijving voor zoekmachines

Via dit tabblad kunt u desgewenst een aangepaste beschrijving en aange-

paste trefwoorden opgeven voor afzonderlijke pagina’s, die de overeen-

komstige instellingen in het dialoogvenster Eigenschappen van site onder-

drukken.

62 Studio Webdesign 4 Pro

Tabblad Eigenschap

Zoekmachines Sitemaps en robots

Hier kunt u aangeven of zoekmachines en robots deze pagina van uw site

mogen analyseren en indexeren. Als u gebruikmaakt van een sitemap-

bestand, wordt de pagina geïndexeerd. Gebruikt u een Robots-metatag

(robots.txt), dan wordt in dit bestand aangegeven dat de pagina niet mag

worden geïndexeerd. Merk op dat deze instellingen de overeenkomstige

site-eigenschappen onderdrukken.

Beveiliging Paginabeveiliging

Hier kunt u de toegang tot bepaalde pagina’s beperken door er een ge-

bruikerslijst of gebruikersgroep aan toe te wijzen (via een intelligent object

voor toegangscontrole).

Omleiden Pagina’s omleiden

U kunt bezoekers na bepaalde tijd automatisch ergens anders heen leiden

vanaf een bepaalde pagina (naar een andere pagina, een e-mailadres, en-

zovoort).

Overgangen Paginaovergangen

U kunt overgangseecten weergeven wanneer internetgebruikers een spe-

cieke pagina in uw site bekijken of deze verlaten.

Pagina-eigenschappen instellen via Sitebeheer

Via Sitebeheer kunt u snel en eenvoudig de eigenschappen wijzigen van een of meer

stramien(pagina’s) in uw site. Hier kunt u onder andere instellen of u pagina’s al dan niet in

de navigatiestructuur wilt opnemen, er eventueel een andere stramienpagina aan toewijzen

of de uitlijning en grootte ervan aanpassen, pagina’s een andere naam geven, een aangepaste

achtergrondkleur of paginakleur instellen voor specieke pagina’s, en aangeven of u al dan

niet een geluidsfragment wilt afspelen wanneer een pagina voor het eerst wordt weergegeven.

Voorts kunt u pagina’s van hieruit ook optimaliseren voor zoekmachines, ze indien nodig

omleiden, of er overgangseecten en een vorm van toegangscontrole voor instellen. Tot slot

kunt u via Sitebeheer ook de paginagrootte van stramienpagina’s beheren, en er zo nodig een

andere achtergrond of overgang voor instellen.

Zo geeft u de eigenschappen van pagina’s/stramienpagina’s weer via Sitebeheer:

1. Kies Extra > Sitebeheer > Pagina-eigenschappen of Extra > Sitebeheer > Stramienpa-

gina-eigenschappen, naargelang u de eigenschappen van een of meer pagina’s in uw site

dan wel de eigenschappen van de stramienpagina’s voor uw site wilt wijzigen. Het dialoog-

venster Sitebeheer verschijnt, waarin aankelijk van de menuopdracht die u hiervoor

hebt gekozen standaard al de categorie Pagina-eigenschappen of Stramienpagina-eigen-

schappen is geselecteerd.

Klik op de knop

Sitebeheer in de statusbalk onder in het programmavenster en kies

Pagina-eigenschappen of Stramienpagina-eigenschappen in de lijst aan de linkerkant.

Studio Webdesign 4 Pro 63

2. Selecteer links in het dialoogvenster het type pagina-eigenschappen dat u wilt wijzigen

(bijvoorbeeld Achtergrond als u een andere achtergrond wilt instellen).

3. U kunt naar behoee de eigenschappen van afzonderlijke pagina’s of die van meerdere

pagina’s tegelijk wijzigen.

* Als u de eigenschappen van een specieke pagina wilt wijzigen, klikt u gewoon in de

relevante kolom voor de desbetreende pagina. Aankelijk van de eigenschap die u

wilt wijzigen, kunt u gebruikmaken van een invoervak, vervolgkeuzelijst, selectievakje,

pop-upvenster, enzovoort om de gewenste instellingen te kiezen.

* Als u meteen de eigenschappen van meerdere pagina’s wilt wijzigen, activeert u het se-

lectievakje naast de desbetreende pagina’s. (Activeer het selectievakje in de kolomkop

Pagina als u alle pagina’s wilt selecteren.) Gebruik het invoervak, de vervolgkeuzelijst,

het selectievakje, enzovoort onder aan de kolom voor de eigenschap die u wilt wijzigen

om de gewenste instellingen te kiezen.

4. Klik op Sluiten.

SITEBEHEER GEBRUIKEN

Sitebeheer maakt vanuit één dialoogvenster allerlei hulpmiddelen toegankelijk waarmee u

de gehele site eenvoudig kunt beheren. Zo kunt u met deze voorziening bijvoorbeeld recht-

streeks de pagina-eigenschappen van een of meer (stramien)pagina’s in uw site weergeven

en/of wijzigen, controleren of bepaalde onderdelen van de site problemen veroorzaken en

die automatisch verhelpen, en alle bronnen, hyperlinks, bladwijzers, lettertypen, enzovoort

beheren die u hebt gebruikt in uw site.

Enkele krachtige voorzieningen van Sitebeheer zijn:

* de mogelijkheid de eigenschappen van afzonderlijke, specieke of alle pagina’s in uw site

te beheren en de instellingen voor bladwijzers, e-commerceobjecten, lettertypen, enzo-

voort op alle of alleen op specieke pagina’s in uw site toe te passen;

64 Studio Webdesign 4 Pro

* de mogelijkheid de weergegeven informatie snel opnieuw te ordenen door kolommen op-

lopend of aopend te sorteren;

* de mogelijkheid naar specieke tekst te zoeken en deze meteen op alle pagina’s in uw site

door andere tekst te vervangen.

Terwijl de meeste hulpmiddelen tijdens een willekeurige fase van het designproces kunnen

worden gebruikt, zijn deze om bronnen en tekst te beheren en uw site op fouten te contro-

leren essentieel om potentiële problemen op te sporen vlak voordat u uw site op het web

publiceert.

Zo opent u Sitebeheer:

* Klik op de knop Sitebeheer in de statusbalk onder aan de werkomgeving.

Zorg ervoor dat er niets is geselecteerd op de pagina en klik op

op de optiebalk.

Kies Extra > Sitebeheer en klik op de gewenste optie in het submenu (bijvoorbeeld Bron-

nen beheren als u de bronnen wilt beheren die u hebt gebruikt in uw site). Hiermee opent

u het dialoogvenster Sitebeheer, waarin automatisch al het gekozen onderdeel is geselec-

teerd.

In de volgende tabel vindt u een overzicht van de verschillende hulpmiddelen en hun func-

tie:

Hulpmiddel Functie

Pagina-/ Stramienpa-

gina-eigenschappen

De pagina-eigenschappen van een of meer pagina’s of stramienpa-

gina’s in uw site beheren, zoals de uitlijning en grootte van pagina’s

aanpassen, pagina’s een andere naam geven of er een aangepaste

achtergrondkleur of paginakleur voor instellen, overgangseecten

en een vorm van toegangscontrole instellen voor pagina’s, of ze in-

dien nodig omleiden.

Hyperlinks Hyperlinks beheren en bewerken, rechtstreeks naar de pagina gaan

waarop een hyperlink is ingesteld voor een element, woorden zoe-

ken en vervangen in het doel van hyperlinks.

Bronnen Aeeldingen, video’s, scripts, applets en allerlei andere bronnen in

uw site beheren, naar de pagina gaan waarop een bron is geplaatst,

de status van ingesloten/gekoppelde aeeldingen veranderen, af-

beeldingen vervangen of ze herbemonsteren en nog veel meer.

Tekst Tekst weergeven en bewerken (met Studio Write), tekstframes een

naam geven, de tekenopmaak van tekst wijzigen, opmaakproelen

toepassen, aangepaste frames en tabellen naar HTML-compatibele

tekst converteren, enzovoort.

Lettertypen De status van lettertypen beheren, naar de pagina gaan waarop een

bepaald lettertype is gebruikt en lettertypen vervangen.

E-commerce De gebruikte e-commerceobjecten in uw site beheren.

Studio Webdesign 4 Pro 65

Hulpmiddel Functie

Bladwijzers Bladwijzers weergeven en bewerken, naar de pagina gaan waarop

een bladwijzer is ingesteld voor een element, enzovoort.

Bestanden De map- en bestandsstructuur van uw site beheren (specieke

pagina’s een andere bestandsnaam geven, mappen toevoegen of

verwijderen, bestanden naar een andere map verplaatsen, enzo-

voort).

Site op fouten contro-

leren

Veelvoorkomende lay-outproblemen opsporen in uw site en die

indien mogelijk automatisch of handmatig verhelpen.

TOEGANGSCONTROLE

U kunt pagina’s met vertrouwelijke informatie in uw site beveiligen, zodat ze alleen toegan-

kelijk zijn voor bevoegde gebruikers. Hoe u de toegang tot dergelijke pagina’s precies moet

beperken, is aankelijk van de aard en complexiteit van uw website. Zo volstaat voor een-

voudige websites doorgaans een eenvoudige vorm van toegangscontrole, terwijl voor grotere

multifunctionele websites vaak een geavanceerde vorm van toegangscontrole is vereist. Beide

methoden kunnen als volgt worden beschreven:

* Eenvoudige toegangscontrole: als u voor deze methode kiest, moeten gebruikers zich

met een gebruikersnaam en wachtwoord aanmelden via een aanmeldingsvenster voordat

ze toegang krijgen tot een beveiligde pagina. De aanmeldingsgegevens zijn opgeslagen in

een gebruikerslijst die aan de desbetreende pagina is gekoppeld. Het gaat hierbij om

eenvoudige lijsten die louter een combinatie van gebruikersnamen en wachtwoorden be-

vatten.

* Geavanceerde toegangscontrole: als u voor deze vorm van toegangscontrole kiest, kunt

u op twee manieren te werk gaan. Ofwel:

* moeten gebruikers zich met een gebruikersnaam en wachtwoord aanmelden via een

aanmeldingsvenster voordat ze toegang krijgen tot een beveiligde pagina. De aanmel-

dingsgegevens zijn opgeslagen in een gebruikersgroep die een vaste lijst met gebruikers

bevat en aan de desbetreende pagina is gekoppeld. Deze lijst wordt door de webmaster

van de site beheerd. Door gebruik te maken van groepen, kunt u aan bepaalde gebrui-

kers dezelfde toegangsrechten toekennen voor specieke pagina’s in uw site.

OFWEL

* moeten gebruikers zich eerst registreren door op de overeenkomstige link te klikken

op de pagina. Nadat ze zich hebben geregistreerd, kunnen ze zich rechtstreeks vanaf de

pagina aanmelden door hun gebruikersnaam en wachtwoord in te voeren in de invoer-

vakken die speciaal voor dat doel zijn voorzien. Als u voor deze methode kiest, hee

iedere gebruikersgroep waarvoor de optie Nieuwe gebruikers toevoegen bij registra-

tie is ingesteld toegang tot de pagina’s die aan die groep zijn gekoppeld. Het voordeel

van deze methode is dat u de lijst met gebruikers die toegang hebben tot uw pagina’s

normaal gesproken niet handmatig hoe te beheren.

66 Studio Webdesign 4 Pro

Wellicht kunnen we dit concept het beste verduidelijken aan de hand van een guur. In de

volgende guur ziet u de relaties tussen gebruikers, webpagina’s, gebruikerslijsten en gebrui-

kersgroepen.

Geavanceerde vormen van toegangscontrole worden afgehandeld via Serif Web Resources.

Als u deze methode wilt gebruiken om de toegang tot bepaalde pagina’s te beperken, moet u

gebruikmaken van het intelligente object Toegangscontrole, dat u in staat stelt gebruikers-

groepen en gebruikers te beheren, en desgewenst rechtstreeks op de pagina de vereiste voor-

zieningen in te voegen waarmee gebruikers zich kunnen aanmelden (nadat ze zich hebben

geregistreerd).

Ter herinnering: Serif Web Resources is een beveiligde online service van Serif waar alle intel-

ligente objecten worden opgeslagen die u aanmaakt, evenals de gegevens die door deze ob-

jecten worden gegenereerd (zie hoofdstuk 12). U kunt het intelligente object voor toegangs-

controle op dezelfde manier beheren als elk ander intelligent object, ofwel rechtstreeks via

www.serifwebresources.com ofwel via het gereedschap Intelligent object toevoegen in het

programma.

Eenvoudige toegangscontrole

De eenvoudigste vorm van toegangscontrole in Studio Webdesign is deze op paginaniveau,

die u kunt beheren met behulp van gebruikerslijsten die u op elk moment kunt aanpassen.

Deze vorm van toegangscontrole wordt gewoonlijk gebruikt voor persoonlijke websites of

kleine bedrijfssites. Kenmerkend voor deze methode is dat het grootste gedeelte van de site

doorgaans voor iedereen toegankelijk is, terwijl een beperkt aantal pagina’s uitsluitend voor

bevoegde gebruikers toegankelijk is. Zo kunt u een pagina met een fotogalerij van uw familie

Studio Webdesign 4 Pro 67

bijvoorbeeld alleen toegankelijk maken voor uw familieleden, maar niet voor andere internet-

gebruikers door deze met een wachtwoord te beveiligen.

Hierbij kunt u tijdens het instellen van de paginabeveiliging een gebruikerslijst aanmaken.

Het enige wat u hoe te doen, is de toegangscontrole inschakelen en vervolgens een nieuwe

gebruikerslijst aanmaken en daar de vereiste gebruikersnamen en wachtwoorden aan toevoe-

gen. Aan de hand van deze gebruikersnamen en wachtwoorden kunnen bevoegde gebruikers

toegang krijgen tot de beveiligde pagina.

U kunt op twee manieren te werk gaan bij het instellen van gebruikersnamen en wachtwoor-

den. Als u geen controle wilt over wie uw pagina zoal bekijkt, kunt u één gebruikersnaam

en wachtwoord instellen. In dat geval gebruikt iedereen dezelfde aanmeldingsgegevens om

toegang te krijgen tot de pagina. Als u de pagina echter voor een bekende groep gebruikers

toegankelijk wilt maken, bijvoorbeeld een ledenlijst, kunt u aan iedere gebruiker wellicht be-

ter zijn eigen gebruikersnaam en wachtwoord toekennen. Zo kunt u de lijst met aanmeldings-

gegevens eenvoudig bijwerken (aanmeldingsgegevens toevoegen of verwijderen) naarmate er

nieuwe leden bijkomen of bepaalde leden hun lidmaatschapschap opzeggen, zonder dat dit

een invloed hee op bestaande leden.

Als het om bekende gebruikers gaat, kunt u wellicht beter e-mailadressen als

gebruikersnaam gebruiken. Zo kunt u eenvoudiger nagaan wie uw pagina

bekijkt en wanneer.

Als u voor deze vorm van toegangscontrole kiest, hoe u noch een intelligent

object voor toegangscontrole te gebruiken noch gebruikersgroepen aan te

maken. Dat is alleen nodig als u een meer geavanceerde vorm van toegangscon-

trole wilt om de toegang te beperken tot specieke ‘zones’ en nieuwe gebruikers

eventueel de mogelijkheid wilt bieden zich te registreren vooraleer ze toegang

krijgen (zie ‘Geavanceerde toegangscontrole’ hierna).

Zo schakelt u de toegangscontrole in:

1. Geef de pagina die u wilt beveiligen weer in de werkomgeving en klik op op de

optiebalk.

Klik met de rechtermuisknop op de pagina in de boomstructuur op het tabblad Site en

kies Eigenschappen van pagina in het snelmenu om het gelijknamige dialoogvenster te

openen. Klik vervolgens op de tab Beveiliging.

2. Activeer het selectievakje Pagina met wachtwoord beveiligen om de toegangscontrole in

te schakelen. Let erop dat de knop Wijzigen / beheren beschikbaar wordt. Klik op deze

knop.

68 Studio Webdesign 4 Pro

3. Maak in het dialoogvenster dat daarop verschijnt een nieuwe gebruikerslijst aan door een

naam (bijvoorbeeld ‘Aanmelding fotogalerij’) en beschrijving (bijvoorbeeld ‘Toegangs-

controle voor fotogalerij’) in te voeren in de overeenkomstige invoervakken en klik ver-

volgens op de knop Lijst toevoegen.

4. Geef in het volgende dialoogvenster een gebruikersnaam en wachtwoord op en klik op

Gebruiker toevoegen. Herhaal dit voor alle andere gebruikers voor wie u de pagina toe-

gankelijk wilt maken. De gebruikerslijst wordt meteen bijgewerkt naarmate u nieuwe ge-

bruikersnamen en wachtwoorden toevoegt. Merk op dat u de naam van de gebruikerslijst

op elk moment kunt wijzigen door de huidige naam te bewerken in het invoervak Gebrui-

kerslijst bovenaan en vervolgens op OK te klikken.

5. Klik op OK en klik ook in het volgende dialoogvenster op OK om alle geopende dialoog-

vensters te sluiten.

Op het tabblad Beveiliging wordt nu aangegeven dat deze pagina met een wachtwoord is

beveiligd en dat er een gebruikerslijst (met de aanmeldingsgegevens van iedere gebruiker)

is aan toegewezen.

Zo bewerkt u een gebruikerslijst:

* Selecteer boven in het dialoogvenster Gebruikerslijsten en -groepen de gebruikerslijst

die u wilt bewerken en klik op Beheren. In het volgende dialoogvenster kunt u:

* Nieuwe gebruikers toevoegen: voer hiertoe een gebruikersnaam en wachtwoord in

voor de nieuwe gebruiker en klik op Gebruiker toevoegen. Herhaal dit voor de andere

gebruikers die u toegang wilt verlenen tot de pagina. De lijst wordt meteen bijgewerkt

naarmate u nieuwe gebruikersnamen en wachtwoorden toevoegt.

* Bestaande gebruikers verwijderen: selecteer hiertoe een gebruiker in de lijst en klik op

Verwijderen.

Schakel het selectievakje Pagina met wachtwoord beveiligen uit als u gebrui-

kerslijsten wilt instellen zonder de huidige pagina te beveiligen.

Studio Webdesign 4 Pro 69

Geavanceerde toegangscontrole

Voor complexere beveiligingsscenario’s waarin bepaalde webpagina’s uitsluitend toegankelijk

zijn voor de ene gebruikersgroep en andere webpagina’s voor een andere gebruikersgroep,

is een geavanceerde vorm van toegangscontrole vereist. Hierbij wordt aan iedere gebruikers-

groep een aantal gebruikers toegewezen, die allemaal dezelfde machtigingen hebben om toe-

gang te krijgen tot de pagina’s die aan de desbetreende gebruikersgroep zijn gekoppeld. Door

verscheidene gebruikersgroepen in te stellen, die de verschillende ‘zones’ in uw site weerspie-

gelen, hebt u 100% controle over wie al dan niet toegang hee tot bepaalde pagina’s in uw site.

Zo zou u bijvoorbeeld een zakelijke website kunnen ontwerpen die uit verschillende zones be-

staat (pagina’s met vertrouwelijke informatie, pagina’s voor VPN-toegang, downloadpagina’s,

enzovoort) en elk van deze zones apart met een wachtwoord kunnen beveiligen.

Nog krachtiger is de mogelijkheid om doorheen de gehele site een algemene aanmeldings-/

afmeldingsprocedure te gebruiken (doorgaans door deze op een stramienpagina te plaatsen).

Op die manier kan iedere gebruiker toegang krijgen tot om het even welke beveiligde pagina

door zich te registreren en zich vervolgens bij de site aan te melden.

Als u een geavanceerde vorm van toegangscontrole wilt inschakelen voor uw site, dient u zich

bij Serif Web Resources aan te melden (zie hoofdstuk 12). Zodra u bent aangemeld, kunt u

een intelligent object voor toegangscontrole maken, dat u kunt gebruiken om nieuwe gebrui-

kersgroepen en gebruikers aan te maken (en die vervolgens te beheren). Desgewenst kunt u

dit object op de pagina plaatsen, zodat geregistreerde gebruikers zich rechtstreeks vanaf de

pagina kunnen aanmelden (zie ‘Gebruikers de mogelijkheid bieden zich te registreren’ ver-

derop in dit hoofdstuk).

Zo schakelt u een geavanceerde toegangscontrole in:

1. Klik op het gereedschap Intelligent object toevoegen op de werkbalk Webobjecten.

2. Meld u aan bij Serif Web Resources (zie ‘Intelligente objecten gebruiken’ in hoofdstuk 12).

Mocht u nog geen gebruikersaccount hebben aangemaakt voor Serif Web Resources, dient

u zich eerst te registreren.

3. Klik onder de lijst met intelligente objecten links in het dialoogvenster op Nieuw.

4. Gebruik de schuialk in het dialoogvenster Intelligent object maken om door de lijst

met beschikbare intelligente objecten te bladeren, klik op Toegangscontrole en klik ver-

volgens op OK.

5. (Facultatief) Geef uw intelligente object voor toegangscontrole een naam en stel eventueel

een aangepaste kleur in voor de tekst, knoppen, achtergrond of randen. Klik vervolgens op

Maken. Het nieuwe intelligente object wordt nu weergegeven in uw persoonlijke lijst met

intelligente objecten.

6. Doe het volgende:

* Klik op Afsluiten om u af te melden bij Serif Web Resources als u gebruikers niet de

mogelijkheid wilt bieden zich rechtstreeks vanaf de pagina te registreren en aan te mel-

den.

70 Studio Webdesign 4 Pro

* Klik op Invoegen als u gebruikers wel in staat wilt stellen zich rechtstreeks vanaf de

pagina te registreren en aan te melden (zie ‘Gebruikers de mogelijkheid bieden zich te

registreren’ verderop in dit hoofdstuk).

Zo maakt u een gebruikersgroep aan:

1. Klik op het gereedschap Intelligent object toevoegen op de werkbalk Webobjecten.

2. Selecteer uw intelligente object voor toegangscontrole in de lijst aan de linkerkant en klik

vervolgens onder het voorbeeld aan de rechterkant op Beheren.

3. (Facultatief) Als gebruikers zich moeten registreren voordat ze zich kunnen aanmelden,

schakelt u de CAPTCHA-functie in en klikt u op Bijwerken. CAPTCHA is een techniek

om spam tegen te gaan die vereist dat gebruikers een willekeurig door de server gegene-

reerd woord typen dat in een guur wordt weergegeven, om te voorkomen dat geautoma-

tiseerde bots worden gebruikt om zich te registreren.

4. Typ in het invoervak Naam in het vak Nieuwe groep maken een naam voor de nieuwe

groep. Gebruik bij voorkeur een beschrijvende naam waaruit u later gemakkelijk kunt

aeiden wat voor type gebruikers tot deze groep behoren (bijvoorbeeld ‘Downloads’).

5. Met de overige opties in dit vak kunt u enkele groepsgerelateerde instellingen kiezen, zo-

als:

* Gekoppeld aan intelligent object (niet zichtbaar in de guur): gebruik deze optie al-

leen bij het instellen van een moderatorsgroep voor een forum of als u wilt dat alleen

specieke gebruikers reacties kunnen posten voor een blog. Selecteer in dat geval de

juiste forum- of blognaam in de vervolgkeuzelijst.

* Nieuwe gebruikers toevoegen bij registratie: activeer dit selectievakje als u gebruikers

de mogelijkheid wilt bieden zich rechtstreeks te registreren. Als deze optie is ingescha-

keld, worden de aanmeldingsgegevens van geregistreerde gebruikers automatisch aan

de gebruikersgroep toegevoegd. Als deze optie is uitgeschakeld, moet u de e-mailadres-

sen van de gebruikers handmatig aan de gebruikersgroep toevoegen. (U dient deze

e-mailadressen vooraf aan de webmaster mee te delen.)

* Automatisch aan-/afmelden: activeer deze optie als zich op dezelfde pagina een forum

bevindt. Dan kunnen gebruikers zich automatisch bij het forum aanmelden nadat ze

zich hebben geregistreerd. Merk op dat u de website moet publiceren als u deze voor-

ziening wilt testen (vanwege de beveiligingsbeperkingen die gebruikers mogelijk heb-

ben ingesteld in hun browser).

6. Klik op Groep maken, controleer in het volgende dialoogvenster of u de juiste instellin-

gen hebt gekozen en klik op Gereed. Merk op dat de nieuwe groep automatisch aan de

vervolgkeuzelijst Groep wordt toegevoegd in het vak Beheer van gebruikersgroep (zie

verderop).

Studio Webdesign 4 Pro 71

Zo beheert u een gebruikersgroep:

* Selecteer de groep in de vervolgkeuzelijst Groep in het vak Beheer van gebruikersgroep

en klik op Groep beheren.

Vanuit het dialoogvenster dat daarop verschijnt, kunt u de gebruikersgroep een nieuwe naam

geven, deze aan een bestaand forum/blog koppelen, instellen of u nieuwe gebruikers auto-

matisch wilt toevoegen nadat ze zich hebben geregistreerd, en aangeven of gebruikers zich

automatisch kunnen aanmelden bij pagina’s van waaruit een of meer forums toegankelijk zijn.

Merk op dat in dit dialoogvenster ook het aantal gebruikers en de namen van de gebruikers

in de groep worden weergegeven. Klik nadat u de vereiste wijzigingen hebt doorgevoerd op

Groep bijwerken om de wijzigingen toe te passen, of op Groep verwijderen als u de gebrui-

kersgroep wilt verwijderen.

Gebruikers toevoegen aan een groep

U kunt aan iedere gebruikersgroep die u hebt gemaakt een groep gebruikers toevoegen, ofwel

handmatig (meestal wordt dit door de webmaster gedaan) ofwel door gegevens te importeren

uit een tekstbestand met scheidingstekens (ook dit is meestal de taak van de webmaster),

ofwel door gebruikers in staat te stellen zich automatisch te registreren. Hier is een overzicht

van de opties waaruit u kunt kiezen bij het beheren van een intelligent object voor toegangs-

controle:

* Gebruikers handmatig toevoegen: deze optie spreekt voor zich. Als u voor deze methode

kiest, moet u handmatig gebruikers toevoegen aan iedere groep.

* Gebruikerslijsten importeren: ook bij deze methode dient u handmatig de vereiste ge-

bruikers toe te voegen. In dit geval kunt u echter een bestaande lijst met gebruikers impor-

teren uit een tekstbestand met scheidingstekens (*.csv).

* Automatische registratie: als u voor deze methode kiest, kunnen gebruikers hun eigen

gebruikersaccount aanmaken op het moment dat ze zich registreren. Zodra hun e-mail-

adres is geverieerd, kunnen ze zich aanmelden. Het voordeel van deze methode is van-

zelfsprekend dat u gebruikers niet handmatig hoe toe te voegen.

Aan u de keuze aan welk van de bovengenoemde methoden u de voorkeur gee. De eerste

twee methoden worden doorgaans gebruikt in kleine bedrijfsomgevingen, of door organisa-

ties en verenigingen waar de leden ‘bekend’ zijn. De laatstgenoemde methode is veeleer be-

doeld voor sites die openbaar toegankelijk zijn, maar waarbij het beheren van de afzonderlijke

gebruikers praktisch gezien onmogelijk is, al was het maar omdat dit zeer veel tijd vergt. In

dergelijke gevallen is het handiger gebruikers de mogelijkheid te bieden zich te registreren, en

de gebruikers in iedere groep te beheren via het intelligente object voor toegangscontrole.

U kunt meerdere gebruikers toevoegen aan een gebruikersgroep. Analoog hier-

aan kan een bepaalde gebruiker tot meerdere gebruikersgroepen behoren.

Iedere gebruiker kan eenvoudig weer worden verwijderd, ongeacht of hij nu al dan niet tot

een groep behoort. U kunt een gebruiker ook tijdelijk de toegang weigeren als hij de regels

niet nalee (bijvoorbeeld omdat hij lasterlijke berichten hee gepost in een forum dat open-

72 Studio Webdesign 4 Pro

baar toegankelijk is). Dan verschijnt de volgende keer dat deze gebruiker zich probeert aan te

melden automatisch het bericht dat zijn account tijdelijk is geblokkeerd.

Als drastischere maatregelen aan de orde zijn, kunt u ook het IP-adres van bepaalde gebrui-

kers blokkeren. Mocht ook dat niet volstaan, dan kunt u als laatste redmiddel zelfs de ISP of

organisatie blokkeren bij wie de desbetreende gebruiker een abonnement hee. De laatstge-

noemde optie wordt niet aanbevolen, maar kan noodzakelijk zijn om grootschalige malade

praktijken zoals professionele spamming te voorkomen.

Zo voegt u handmatig een gebruiker toe aan een groep:

1. Klik op het gereedschap Intelligent object toevoegen op de werkbalk Webobjecten.

2. Selecteer uw intelligente object voor toegangscontrole in de lijst aan de linkerkant en klik

vervolgens onder het voorbeeld aan de rechterkant op Beheren.

3. Typ in het invoervak E-mail in het vak Nieuwe gebruiker toevoegen onder in het dia-

loogvenster het e-mailadres van de gebruiker die u wilt toevoegen en klik op Gebruiker

toevoegen.

Merk op dat de nieuwe gebruiker aan de lijst Gebruikers wordt toegevoegd in het vak

Beheer van gebruikersgroep.

4. Als u het selectievakje Activering vereist inschakelt, wordt de gebruiker per e-mail een

bericht toegestuurd met een link waarop hij moet klikken om zijn account te activeren en

een wachtwoord dat automatisch is gegenereerd. Als u deze optie uitschakelt, wordt hem

per e-mail alleen een automatisch gegenereerd wachtwoord toegestuurd.

5. Om gebruikers toe te wijzen aan een groep, selecteert u de desbetreende groep in de

vervolgkeuzelijst Groep, selecteert u de gebruikers die u wilt toevoegen in de lijst aan de

linkerkant en klikt u op Toevoegen. (Klik op Alle toevoegen als u meteen alle gebruikers

aan de groep wilt toevoegen.) Als u een gebruiker weer wilt verwijderen uit een groep,

gebruikt u de knop Verwijderen (of Alle verwijderen als u alle gebruikers uit de groep

wilt verwijderen).

Zo importeert u een gebruikerslijst uit een tekstbestand:

1. Voer dezelfde stappen uit als hiervoor, maar klik in het vak Nieuwe gebruiker toevoegen

onder in het dialoogvenster op Bladeren om een bestaand tekstbestand met gebruikersna-

men en wachtwoorden te selecteren. Navigeer in het dialoogvenster dat daarop verschijnt

naar de map waarin het bestand is opgeslagen, selecteer het en klik op Openen.

2. Klik op Importeren om de gebruikerslijst te importeren en aan de lijst Gebruikers toe te

voegen in het vak Beheer van gebruikersgroep.

Studio Webdesign 4 Pro 73

Zo importeert u een gebruikerslijst uit een verzendlijst:

1. Selecteer het intelligente object voor verzendlijsten in uw persoonlijke lijst met intelligente

objecten en klik op Beheren.

2. Klik op de knop Synchroniseren met toegangscontrole.

3. Selecteer in het volgende dialoogvenster uw intelligente object voor toegangscontrole in

de vervolgkeuzelijst en klik op Doorgaan. Hiermee kopieert u de opgeslagen e-mailadres-

sen naar dit intelligente object.

Zo verwijdert u een gebruiker:

1. Klik terwijl uw intelligente object voor toegangscontrole is geselecteerd op Beheren.

2. Selecteer in de vervolgkeuzelijst E-mail onder in het dialoogvenster de gebruiker die u

wilt verwijderen.

3. Klik op Gebruiker verwijderen.

Zo blokkeert u een gebruiker:

* Ga op dezelfde manier te werk als bij het verwijderen van een gebruiker (zie hiervoor),

maar klik deze keer op Gebruiker blokkeren in plaats van op Gebruiker verwijderen.

Klik op Gebruiker accepteren als u de account van de gebruiker niet langer wenst te blok-

keren.

Geblokkeerde gebruikers worden met een sterretje aangeduid in de lijst met

gebruikers voor een gebruikersgroep.

Zo bant u een gebruiker:

* Op basis van IP-adres: ga op dezelfde manier te werk als bij het verwijderen van een ge-

bruiker (zie hiervoor), maar selecteer de optie IP-adres in de vervolgkeuzelijst Blokkeren

en klik vervolgens op Blokkeren.

* Op basis van ISP/organisatie: ga op dezelfde manier te werk als bij het verwijderen van

een gebruiker, maar klik eerst op Gebruiker opzoeken (om het netwerkadres van de ISP/

organisatie bij wie de gebruiker een abonnement hee weer te geven in het vak vlak boven

de knop). Selecteer vervolgens de optie ISP/organisatie in de vervolgkeuzelijst en klik op

Blokkeren.

U kunt alleen gebruikers bannen die zich eerder bij Serif Web Resources heb-

ben aangemeld.

Gebruikers van wie het IP-adres of de ISP of organisatie is geblokkeerd, verschijnen in een

afzonderlijke vervolgkeuzelijst. Zo kunt u eenvoudig nagaan welke gebruikersaccounts mo-

menteel zijn geblokkeerd. U kunt gebruikers vanzelfsprekend op elk moment opnieuw toe-

gang verlenen als een bepaald IP-adres of netwerk niet langer als verdacht wordt beschouwd.

74 Studio Webdesign 4 Pro

Zo geeft u geblokkeerde gebruikers opnieuw toegang:

* Selecteer een speciek IP-adres (voor afzonderlijke gebruikers) of netwerkadres (voor

ISP’s/organisaties) in de vervolgkeuzelijst Accepteren. Onthoud dat het IP-adres van af-

zonderlijke gebruikers op een ander cijfer dan nul eindigt (bijvoorbeeld 80.6.91.234), ter-

wijl een netwerkadres van een ISP/organisatie altijd op nul eindigt (bijvoorbeeld 80.6.91.0).

Merk op dat ook wordt aangegeven wanneer het desbetreende adres werd geblokkeerd.

* Klik op Accepteren. Het IP-adres van de gebruiker wordt uit de lijst verwijderd.

Gebruikers de mogelijkheid bieden zich te registreren

U kunt een aanmeldingsvak toevoegen

aan de pagina, zodat geregistreerde

gebruikers zich kunnen aanmelden bij

alle groepen waarvoor de optie Nieu-

we gebruikers toevoegen bij registra-

tie is ingeschakeld.

Nieuwe gebruikers kunnen zich altijd

registreren door op de link Registre-

ren te klikken.

Plaats het aanmeldingsvak op de stramienpagina voor uw site. Zo kunnen ge-

bruikers zich vanaf elke webpagina in uw site registreren en aanmelden.

Zo voegt u een aanmeldingsvak toe zodat gebruikers zich kunnen registreren:

1. Volg de procedure voor het inschakelen van een geavanceerde toegangscontrole (zie eer-

der in deze paragraaf), maar klik deze keer op de knop Invoegen in plaats van op Afslui-

ten.

2. Plaats de aanwijzer

Plakken op de pagina op de positie waar u het aanmeldingsvak

wilt invoegen en klik met de linkermuisknop om het object in te voegen.

3. Klik met de rechtermuisknop op het aanmeldingsvak en kies Intelligent object beheren.

4. Typ in het invoervak Naam in het vak Nieuwe groep maken een naam voor de nieuwe

groep. Gebruik bij voorkeur een beschrijvende naam waaruit u later gemakkelijk kunt

aeiden wat voor type gebruikers tot deze groep behoren (bijvoorbeeld ‘uiswerk’).

5. Activeer het selectievakje Nieuwe gebruikers toevoegen bij registratie als u de aanmel-

dingsgegevens van nieuwe gebruikers automatisch aan de gebruikersgroep wilt toevoegen

op het moment dat ze zich registreren.

6. Klik op Groep maken, controleer in het volgende dialoogvenster of u de juiste instellin-

gen hebt gekozen en klik op Gereed. Merk op dat de nieuwe groep automatisch aan de

vervolgkeuzelijst Groep wordt toegevoegd in het vak Beheer van gebruikersgroep.

Studio Webdesign 4 Pro 75

Omdat gebruikers zich zonder uw tussenkomst kunnen registreren, hoe u ze niet handmatig

toe te voegen via het vak Nieuwe gebruiker toevoegen (hoewel u dat natuurlijk altijd kunt

doen, zoals beschreven in ‘Zo voegt u handmatig een gebruiker toe aan een groep’ eerder in

deze paragraaf). Wanneer gebruikers zich registreren, verschijnen ze automatisch in iedere

gebruikersgroep waarvoor de optie Nieuwe gebruikers toevoegen bij registratie is ingescha-

keld (zie eerder).

Zo registreert u zich als nieuwe gebruiker:

1. Klik op de link Registreren.

2. Aanvaard de gebruiksrechtovereenkomst van Serif door het selectievakje te activeren.

3. Kies een e-mailadres (gebruikersnaam), schermnaam en wachtwoord. (Kies een wacht-

woord dat minstens uit zes tekens bestaat.) Als CAPTCHA-vericatie is ingeschakeld, typt

u in het invoervak onderaan het woord dat in de guur wordt weergegeven.

4. Klik op Signup of Registreren. Enige tijd later ontvangt u een e-mailbericht met een link

waarop u moet klikken om uw account te activeren.

Als u na enige tijd geen e-mailbericht met een activeringslink hebt ontvangen,

controleert u de map voor ongewenste e-mail in uw Postvak IN. Mogelijk werd

het e-mailbericht ten onrechte als spam beschouwd en bijgevolg naar deze map

verplaatst.

Zodra u bent aangemeld, kunt u uw schermnaam wijzigen, een ander wachtwoord instellen of

u weer afmelden. Merk op dat met ‘schermnaam’ de naam wordt bedoeld die andere gebrui-

kers te zien krijgen wanneer u berichten post in een forum of blog.

UW SITE OPTIMALISEREN VOOR ZOEKMACHINES

Zoekmachines zoals Google, Yahoo!, Live Search, enzovoort verzamelen automatisch allerlei

informatie over uw webpagina’s, ook wel het ‘indexeren’ van uw site genoemd. Deze geïn-

dexeerde informatie zorgt ervoor dat internetgebruikers die gebruikmaken van een zoekma-

chine om uw site te vinden snel en doelgericht zoekresultaten verkrijgen die exact beantwoor-

den aan de zoekcriteria die ze hebben ingevoerd.

Standaard worden alle webpagina’s geïndexeerd die u publiceert (vooral de tekst tussen de

<head>-tags). In een wereld waarin internet intussen is uitgegroeid tot een reusachtig net-

werk bestaande uit miljoenen webpagina’s die voortdurend worden geïndexeerd, kunt u dit

indexeringsproces echter zo optimaliseren dat uw pagina’s hoger verschijnen in de lijst met

zoekresultaten dan die van een andere website.

U kunt uw webpagina’s op verschillende manieren optimaliseren voor zoekmachines:

* Metatags: het gaat hierbij om speciale tags die trefwoorden en een beschrijving van uw

site en/of afzonderlijke pagina’s in uw site bevatten. Deze tags stellen zoekmachines in

staat de zoekcriteria die een gebruiker hee ingevoerd nauwkeuriger te vergelijken met de

76 Studio Webdesign 4 Pro

trefwoorden die ze eerder hebben geïndexeerd voor uw site of afzonderlijke pagina’s in uw

site, zodat gebruikers alleen accurate zoekresultaten te zien krijgen. Daarnaast kunt u ook

gebruikmaken van Robots-metatags om aan te geven welke pagina’s mogen worden ge-

indexeerd door een zoekmachine en welke niet. Hierbij kunt u ook bepalen of zogeheten

‘webcrawlers’ en ‘spiders’ hyperlinks naar andere pagina’s mogen volgen en indexeren.

* Robots-bestand: u kunt voorkomen dat bepaalde pagina’s worden geïndexeerd door een

zoekmachine door gebruik te maken van een Robots-bestand. Dit bestand lijkt sterk op de

bovengenoemde Robots-metatag, alleen wordt in dit geval een tekstbestand (robots.txt)

gebruikt om robots of spiders mee te delen welke pagina’s ze niet mogen indexeren. Een

dergelijk bestand bevat dus gewoon een lijst met pagina’s die van het indexeringsproces

moeten worden uitgesloten.

* Sitemaps: dit is het tegenovergestelde van het Robots-concept. Aan de hand van een si-

temap-bestand (sitemap.xml) kunt u aangeven welke pagina’s u in het indexeringsproces

wilt opnemen, zodat ze optimaal worden geïndexeerd door zoekmachines.

Of u nu gebruikmaakt van metatags, robots of sitemap-bestanden (of een willekeurige com-

binatie daarvan), in Studio Webdesign kunt u uw site snel en eenvoudig optimaliseren voor

zoekmachines. Aangezien u deze instellingen voor de gehele site kunt congureren of wijzi-

gen (via het tabblad Zoekmachines in het dialoogvenster Eigenschappen van Site), worden de

gekozen instellingen ook op alle nieuwe pagina’s toegepast die u aan de site toevoegt. Als u

de zoekmachine-instellingen voor de site wijzigt, worden de nieuwe instellingen automatisch

op alle pagina’s in uw site toegepast. U kunt deze instellingen echter op elk moment onder-

drukken voor een specieke webpagina (via het tabblad Zoekmachines in het dialoogvenster

Eigenschappen van pagina). In dat geval worden deze instellingen ook genegeerd wanneer u

de zoekmachine-instellingen voor de site later wijzigt.

Metatags gebruiken

Hoewel dit geen strikte vereiste is, kunt u het beste een aantal trefwoorden en een korte be-

schrijving van uw site en/of afzonderlijke pagina’s in uw site opgeven als u de kans wilt ver-

groten dat uw website wordt ‘gevonden’ door zoekmachines. Zoals u wellicht weet, houden

zoekmachines catalogi bij van webpagina’s. Vaak wordt hiervoor gebruikgemaakt van zoge-

heten ‘webcrawlers’ of ‘spiders’ – geautomatiseerde computerprogramma’s die het web op een

methodische manier doorbladeren en hierbij allerlei informatie indexeren over de gevonden

websites en hun inhoud. Door een accurate beschrijving en trefwoorden op te geven, waar-

borgt u dat dergelijke programma’s uw website in de juiste categorie indelen. U kunt een be-

schrijving opgeven voor de volledige site en/of voor afzonderlijke pagina’s. Zo zou u voor een

Studio Webdesign 4 Pro 77

eenvoudige ornithologische website bijvoorbeeld de volgende beschrijving en trefwoorden

kunnen opgeven:

Site-eigenschappen Pagina-eigenschappen

Beschrijving Website over reigers in Nederland

en België

Pagina met informatie over reiger-

soorten

Trefwoorden Vogels, Reiger, Ardeidae Blauwe reiger, zilverreiger, withals-

reiger, keizerreiger

Overweeg vooraf welke beschrijving en trefwoorden u zult gebruiken voor de site en de ver-

schillende pagina’s in uw site. Probeer er hierbij voor te zorgen dat de algemene beschrijving

van uw site deze van de afzonderlijke pagina’s aanvult.

Zo geeft u een beschrijving en trefwoorden op:

1. Kies Eigenschappen van site in het menu Bestand als u een beschrijving en trefwoorden

wilt opgeven voor de volledige site. Om een beschrijving en trefwoorden op te geven voor

een specieke pagina in uw site, klikt u met de rechtermuisknop op die pagina in de wer-

komgeving of op het tabblad Site en kiest u Eigenschappen van pagina in het snelmenu

(of kiest u de gelijknamige menuopdracht in het menu Bewerken).

2. Klik op de tab Zoeken.

3. Typ in het invoervak bovenaan een korte beschrijving van uw site of de pagina. Hoewel

de lengte van deze beschrijving niet begrensd is, dient u voor ogen te houden dat de eerste

tien woorden het belangrijkst zijn.

4. Geef in het volgende invoervak enkele trefwoorden op (gescheiden door komma’s) die de

site of pagina volgens u het beste omschrijven. Probeer uzelf hierbij in de plaats te stellen

van een potentiële bezoeker. Wat voor trefwoorden zou hij gebruiken als hij precies naar

die informatie op zoek is die uw site of pagina te bieden hee?

5. Selecteer in de vervolgkeuzelijst onder in het dialoogvenster een taalcode voor uw site.

Bij de meeste zoekmachines kunt u naar pagina’s in een specieke taal zoeken. Door een

taalcode te selecteren, bepaalt u of uw site al dan niet in de lijst met zoekresultaten wordt

weergegeven, aankelijk van de taal die de gebruiker hee gekozen.

Voorkomen dat pagina’s worden geïndexeerd (Robots-metatags)

U kunt het gedrag van spiders en webcrawlers beïnvloeden met behulp van Robots-metatags.

Aan de hand van deze tags kunt u aangeven of de volledige website en afzonderlijke pagina’s

al dan niet mogen worden geïndexeerd, en/of spiders en webcrawlers hyperlinks naar an-

dere pagina’s mogen volgen vanaf een geïndexeerde pagina. Met de opties Pagina’s in deze

site indexeren en Links vanaf pagina’s volgen kunt u de gewenste zoekmachine-instellingen

eenvoudig op de volledige site toepassen, en die vervolgens onderdrukken voor specieke

pagina’s.

78 Studio Webdesign 4 Pro

Zo genereert u Robots-metatags:

1. Kies Eigenschappen van site in het menu Bestand als u voor de volledige site Robots-

metatags wilt genereren. Om een Robots-metatag te genereren voor een specieke pagina

in uw site, klikt u met de rechtermuisknop op die pagina in de werkomgeving of op het

tabblad Site en kiest u Eigenschappen van pagina in het snelmenu.

2. Klik op de tab Zoekmachines en activeer het selectievakje Robots-metatags genereren.

(Om een Robots-metatag te genereren voor een specieke pagina in uw site, moet u de

zoekmachine-instellingen voor de gehele site onderdrukken.)

3. Schakel de optie Pagina’s in deze site indexeren in of uit om aan te geven of zoekma-

chines de volledige site mogen indexeren, en de optie Links vanaf pagina’s volgen om

te bepalen of ze al dan niet alle pagina’s mogen indexeren waarvoor een hyperlink werd

aangetroen op een geïndexeerde pagina. Om de gewenste instellingen te kiezen voor een

specieke pagina in uw site, moet u de selectievakjes Zoekmachine-instellingen voor

site negeren en Robots-metatag genereren activeren en vervolgens de overeenkomstige

subopties in- of uitschakelen voor deze pagina.

Pagina’s van het indexeringsproces uitsluiten (Robots-bestand)

Deze methode hee dezelfde doelstelling als het gebruik van een Robots-metatag. Alleen

wordt er in dit geval een tekstbestand gegenereerd (robots.txt) in plaats van een Robots-me-

tatag, dat in de hoofdmap van de site wordt opgeslagen. Merk op dat u dit tekstbestand met

een willekeurige teksteditor kunt openen als u wilt nagaan welke pagina’s en mappen in uw

site niet zullen worden geïndexeerd.

Zo genereert u een Robots-bestand voor zoekmachines:

1. Kies Eigenschappen van site in het menu Bestand als u voor de volledige site een Robots-

bestand wilt genereren. Om de gekozen instellingen te onderdrukken voor een specieke

pagina in uw site, klikt u met de rechtermuisknop op die pagina in de werkomgeving of

op het tabblad Site en kiest u Eigenschappen van pagina in het snelmenu.

2. Activeer het selectievakje Robots-bestand (robots.txt) genereren voor zoekmachines.

3. Schakel de optie Pagina’s in deze site indexeren in of uit om aan te geven of zoekmachines

de volledige site mogen indexeren. Als u wilt voorkomen dat zoekmachines een bepaalde

pagina in uw site indexeren, activeert u het selectievakje Zoekmachine-instellingen voor

site negeren in het dialoogvenster Eigenschappen van pagina en schakelt u de optie To e-

staan dat zoekmachines deze pagina indexeren uit.

Pagina’s in het indexeringsproces opnemen

Tot nu toe hebben we ons in de eerste plaats geconcentreerd op methoden om te voorkomen

dat bepaalde webpagina’s worden geïndexeerd. Als u deze methoden niet gebruikt, indexeren

spiders en webcrawlers alle pagina’s in uw site door de hyperlinks op elke pagina te volgen en

de trefwoorden, beschrijving en tekst te indexeren die ze op elke pagina aantreen. Mogelijk

wordt uw site op deze manier echter niet doeltreend geïndexeerd. Het is immers best moge-

lijk dat u in uw site maar een beperkt aantal hyperlinks hebt gebruikt om pagina’s onderling

Studio Webdesign 4 Pro 79

aan elkaar te relateren. Om te waarborgen dat uw site ook in dergelijke gevallen optimaal

wordt geïndexeerd, kunt u een sitemap-bestand (sitemap.xml) maken. Het gaat hierbij om een

bestand waarin webcrawlers en spiders de pagina’s kunnen opzoeken die ze mogen indexeren.

Dit bestand deelt zoekmachines ook mee wanneer pagina’s voor het laatst zijn gewijzigd, hoe

vaak een pagina wijzigt en bijgevolg hoe vaak ze een pagina opnieuw moeten controleren, en

hoe ‘belangrijk’ bepaalde pagina’s zijn in vergelijking met andere pagina’s.

Deze methode leent zich uitstekend om de ‘ranking’ van uw webpagina’s te verbeteren. Door

gebruik te maken van een sitemap-bestand, vergroot u de kans dat uw pagina’s hoger ver-

schijnen in de lijst met zoekresultaten wanneer gebruikers een zoekmachine gebruiken om

specieke informatie terug te vinden op het web.

Ook hier weer kunt u instellingen kiezen voor de gehele site en voor afzonderlijke pagina’s.

Het sitemap-bestand wordt net als een Robots-bestand in de hoofdmap van uw website op-

geslagen.

Als u een sitemap-bestand wilt gebruiken om uw site te optimaliseren voor

zoekmachines, moet u een absolute URL opgeven. Aan de hand van deze URL

kunnen zoekmachines het juiste webadres van uw site indexeren (bijvoorbeeld

www.easycomputing.com), zodat internetgebruikers vanuit de lijst met zoekre-

sultaten naar uw site kunnen gaan.

Zo genereert u een sitemap-bestand:

1. Kies Eigenschappen van site in het menu Bestand om aan te geven of u een sitemap-

bestand wilt genereren voor uw site. Om een specieke pagina in uw site aan het sitemap-

bestand toe te voegen (of te voorkomen dat een pagina in het sitemap-bestand wordt

opgenomen), klikt u met de rechtermuisknop op die pagina in de werkomgeving of op het

tabblad Site en kiest u Eigenschappen van pagina in het snelmenu.

2. Activeer het selectievakje Sitemap-bestand genereren voor zoekmachines.

3. (Facultatief) Wanneer u de bovengenoemde optie inschakelt, genereert het programma

standaard het bestand sitemap.xml. U kunt dit bestand echter een willekeurige andere

naam geven. Klik hiertoe op de knop Wijzigen en geef de gewenste naam op voor het

bestand.

4. Activeer het selectievakje Pagina’s in deze site indexeren als u alle pagina’s in uw site

aan het sitemap-bestand wilt toevoegen (zodat ze gemakkelijker worden gevonden door

zoekmachines). Schakel deze optie uit als u een leeg sitemap-bestand wilt maken. Om een

specieke pagina in uw site aan het sitemap-bestand toe te voegen, activeert u het selectie-

vakje Zoekmachine-instellingen voor site negeren in het dialoogvenster Eigenschappen

van pagina en schakelt u vervolgens de optie Toestaan dat zoekmachines deze pagina

indexeren in (in de veronderstelling dat u niet de gehele site in het sitemap-bestand hebt

opgenomen).

80 Studio Webdesign 4 Pro

5. Kies de gewenste instellingen voor de sitemap:

* Aangeven wanneer pagina’s voor het laatst zijn gewijzigd: activeer dit selectievakje

als u in het sitemap-bestand informatie wilt opnemen over de datum waarop een pa-

gina voor het laatst is gewijzigd.

* Aangeven hoe vaak pagina’s wijzigen: hiermee kunt u zoekmachines meedelen hoe

vaak een pagina naar verwachting zal wijzigen (om het uur, dagelijks, maandelijks, we-

kelijks, jaarlijks of nooit). Op basis van de instelling die u hier kiest, bepalen zoekma-

chines hoe vaak ze de pagina opnieuw moeten indexeren.

* Prioriteit van pagina’s aangeven: met deze optie deelt u zoekmachines mee hoe be-

langrijk bepaalde pagina’s zijn in vergelijking met andere pagina’s in uw site waarvan

de kans groot is dat ze die zullen indexeren. U kunt een waarde instellen gaande van

0.0 (laagste prioriteit) tot 1.0 (hoogste prioriteit). In het dialoogvenster Eigenschappen

van site kunt u de gewenste standaardinstellingen kiezen voor de gehele site, waarna u

in het dialoogvenster Eigenschappen van pagina aan specieke pagina’s een hogere of

lagere prioriteit kunt toekennen.

Een prioriteit toekennen aan tekst met HTML-tags voor koppen

U kunt aan specieke alinea’s (of opmaakproelen) in HTML-frames en -tabellen een van de

HTML-tags voor koppen (H1 tot en met H6) toekennen. Zo kunt u ervoor zorgen dat zoek-

machines aan bepaalde tekst voorrang geven bij het indexeren van uw site, aangezien alinea’s

waaraan dergelijke tags zijn toegewezen een hogere prioriteit hebben dan alinea’s waaraan

‘bodytags’ zoals de <p>-tag zijn toegewezen. Onthoud in dit verband dat de tag <H1> de

hoogste prioriteit hee en de tag <H6> de laagste prioriteit. U kunt deze tags toewijzen via de

menuopdracht Alineaopmaak in het menu Tekst. Klik daartoe op Alineaopmaak > HTML

in het dialoogvenster en selecteer vervolgens in de vervolgkeuzelijst de tag die u aan uw alinea

wilt toewijzen.

EEN ZOEKFUNCTIE IMPLEMENTEREN

U kunt in uw site een krachtige zoekfunctie implementeren die de zoekopdrachten van ge-

bruikers vergelijkt met de tekst die in artistieke tekstobjecten, HTML-frames en -tabellen of

aangepaste tekstframes verschijnt op uw pagina’s. Zo waarborgt u dat internetgebruikers snel

de gezochte informatie terugvinden op uw webpagina’s.

Merk op dat u twee gereedschappen dient te gebruiken om een zoekfunctie aan uw site toe

te voegen: het gereedschap Zoekvak toevoegen en het gereedschap Veld voor zoekresulta-

ten toevoegen. Beide gereedschappen zijn toegankelijk vanuit de werkbalk Webobjecten. Met

deze twee gereedschappen kunt u de vereiste besturingselementen toevoegen om een zoek-

functie te implementeren.

Studio Webdesign 4 Pro 81

Het zoekvak is het tekstvak waarin gebruikers het

woord of de zin kunnen typen waar ze willen naar zoe-

ken. Dit tekstvak wordt doorgaans op een stramien-

pagina geplaatst, zodat het op alle pagina’s van de site

verschijnt.

Het veld voor zoekresultaten is het venster waarin de

resultaten van een zoekopdracht worden weergegeven.

Dit veld wordt doorgaans op een afzonderlijke pagina

geplaatst, die niet in de navigatiestructuur van de site

is opgenomen.

Zo kunt u met de zoekopdracht “vitae” bijvoorbeeld alle webpagina’s opvragen waarop dit

woord voorkomt. Om de zoekopdracht te starten, klikt u gewoon op Zoeken nadat u de ge-

zochte term hebt ingevoerd.

In het venster met zoekresultaten worden automatisch alle pagina’s weergegeven waarop de

gezochte tekst is gevonden (in de vorm van hyperlinks waarop u kunt klikken), evenals enige

tekst die u als referentie kunt gebruiken. Om naar een specieke pagina te gaan, klikt u ge-

woon op de overeenkomstige hyperlink in de lijst met zoekresultaten.

Standaard kunnen alle webpagina’s in uw site worden doorzocht. Pagina’s die met een wacht-

woord zijn beveiligd, worden echter altijd van de zoekresultaten uitgesloten. (Lees ‘Toegangs-

controle’ eerder in dit hoofdstuk voor meer informatie over hoe u pagina’s met een wacht-

woord beveiligt.)

Zo voegt u een zoekvak toe:

1. Klik op het gereedschap Zoekvak toevoegen op de werkbalk Webobjecten.

2. Plaats de aanwijzer

op de positie waar u het zoekvak wilt invoegen op uw webpagina

of stramienpagina en klik met de linkermuisknop.

82 Studio Webdesign 4 Pro

Plaats het zoekvak boven aan een stramienpagina als u de zoekfunctie vanaf

alle webpagina’s in uw site toegankelijk wilt maken.

Een zoekvak is pas nuttig als in de website ook een voorziening is geïmplementeerd om de

resultaten van een zoekopdracht weer te geven voor de gebruiker. Hiervoor kunt u het gereed-

schap Veld voor zoekresultaten toevoegen gebruiken. Merk op dat u een willekeurige groot-

te kunt instellen voor het veld voor zoekresultaten. Doorgaans wordt voor dit object echter de

volledige pagina gereserveerd (denk eraan dat er voldoende ruimte moet zijn om meerdere

zoekresultaten te kunnen weergeven). Wellicht is het ook zinvol het veld voor zoekresultaten

op een afzonderlijke pagina te plaatsen, die u desgewenst een andere grasche vormgeving

kunt geven dan de overige pagina’s in uw site.

Zo voegt u aan een nieuwe pagina een veld voor zoekresultaten toe:

1. Klik in het vervolgmenu voor de knop Toevoegen op het tabblad Site op Nieuwe lege

pagina.

2. Klik met de rechtermuisknop op de nieuwe pagina en kies Eigenschappen van pagina

in het snelmenu. Geef op het tabblad Algemeen van het dialoogvenster Eigenschappen

van pagina een naam op voor de pagina met zoekresultaten en schakel het selectievakje

Toevoegen aan navigatiestructuur uit.

3. Klik op het gereedschap

Veld voor zoekresultaten toevoegen op de werkbalk Webob-

jecten.

4. Plaats de aanwijzer

op de positie waar u het veld voor zoekresultaten wilt invoegen en

klik en sleep om de gewenste grootte in te stellen voor het veld.

Studio Webdesign 4 Pro 83

4 met tekSt Werken

MET TEKSTFRAMES WERKEN

Alle tekst die u toevoegt aan uw ontwerp, wordt in een tekstframe geplaatst, dat zowel een

plaatshouder kan zijn voor afzonderlijke woorden, op zichzelf staande alinea’s als artikelen

die meerdere pagina’s bestrijken. U kunt ook artistieke tekst gebruiken om stand-alone tekst

te creëren waarop u allerlei speciale eecten kunt toepassen, of tabeltekst (zie ‘Teksttabellen

maken’ in hoofdstuk 6) om een tekst in rijen en kolommen in te delen.

Wat is een tekstframe?

Een tekstframe is in feite een soort minipagina met:

* marges en kolommen die de lay-out van de tekst in het frame bepalen;

* frames die eraan voorafgaan en frames die erop volgen;

* tekst en eventueel ook inline aeeldingen die naadloos van het ene in het andere frame

overvloeien.

De tekst in een frame wordt in dit programma ook wel de plot genoemd. Onthoud in dit

verband het volgende:

* Als u een tekstframe verplaatst, wordt ook de tekst in het frame verplaatst.

* Als u de grootte van een tekstframe wijzigt, wordt de tekst automatisch aan de nieuwe

afmetingen van het frame aangepast.

U kunt frames aan elkaar koppelen, zodat de tekst automatisch in het volgende frame wordt

voortgezet zodra het einde van het vorige frame is bereikt, maar u kunt vanzelfsprekend ook

een of meer stand-alone tekstframes gebruiken in uw site. In elke website kunt u dus afzon-

derlijke tekstframes gebruiken, een lange tekst over meerdere frames spreiden en/of een aan-

tal frames gebruiken dat volledig onaankelijk is van elkaar.

84 Studio Webdesign 4 Pro

Wanneer u een tekstframe selecteert, verschijnt er een begrenzingskader rond dit frame (zie

frame 1 in de bovenstaande guur). U herkent dit begrenzingskader aan de grijze rand en aan

de grepen in de hoeken en langs de vier randen van het kader. Als u het frame met het selec-

tiegereedschap hebt geselecteerd, verschijnt er bovendien een knipperende cursor in de tekst,

de zogeheten invoegpositie. Als deze modus actief is, kunt u de tekst naar behoee bewerken.

Net als in een tekstverwerker moet u dubbelklikken om een woord te selecteren en drie keer

na elkaar klikken om een volledige alinea te selecteren.

HTML-frames versus aangepaste frames

U kunt twee soorten tekstframes toevoegen aan een pagina: HTML-frames en aangepaste

tekstframes. Verwar beide soorten frames niet met elkaar! In de volgende tabel vindt u een

overzicht van de belangrijkste kenmerken van beide typen frames.

HTML-frames Aangepaste frames

Zoekmachines kunnen in de tekst zoeken

 

Scripts invoegen om dynamische content te gene-

reren

 

Marges en kolomhulplijnen instellen

 

Kolomeinde, pagina-einde of frame-einde invoegen

 

Frame schalen/verplaatsen

 

Frame bijsnijden

 

Frame roteren

 1

Frame aan andere frames koppelen

 

Frame in kolommen verdelen

 

Als tekst exporteren

 2

Geëxporteerde tekst kopiëren en plakken

 

Een lijn- en vulkleur instellen

 

Een kleur- of bitmapverloop instellen

 

HTML-compatibele opmaakproelen gebruiken

 

Transparantie instellen

 1

Een randstijl instellen

 1

Frame vervormen

 1

2D/3D-ltereecten toepassen

 1

Instant 3D

 1

1 Als u deze voorziening gebruikt, wordt het frame als aeelding geëxporteerd.

2 Alleen als u het frame niet hebt bijgesneden of geroteerd, en er geen randstijl, transparan-

tie-eect of ltereect voor hebt ingesteld.

Studio Webdesign 4 Pro 85

De informatie in de bovenstaande tabel hee alleen betrekking op het frame als object, en niet

op de tekst in het frame. Lees ‘Tekst opmaken’ in hoofdstuk 5 voor meer informatie over het

werken met tekst.

Maar hoe onderscheidt u een HTML-frame nu van een aangepast frame? Dat kunt u gemak-

kelijk aeiden uit de kleur van de formaatgrepen wanneer u het frame selecteert. HTML-

frames hebben donkerblauwe grepen, terwijl aangepaste frames grijze grepen hebben. Afge-

zien van de bovengenoemde verschillen hebben beide soorten frames echter ook een aantal

zaken met elkaar gemeen.

Zo selecteert u alleen het frame (geen invoegpositie in de tekst):

* Klik op het begrenzingskader van het frame. Merk op dat u een tekstframe veel gemak-

kelijker kunt verplaatsen als alleen het frame is geselecteerd.

Zo verplaatst u een tekstframe:

* Klik op het begrenzingskader van het frame en sleep het naar de gewenste positie.

* Gebruik de opties

en op het tabblad Transformeren.

Zo wijzigt u de grootte van een tekstframe:

* Selecteer het frame en versleep een van de grepen in de hoeken of langs de randen van het

begrenzingskader.

* Gebruik de opties

en op het tabblad Transformeren.

Frames toevoegen aan een pagina

Tekstframes kunnen op dezelfde manier worden toegevoegd als elk ander object in Studio

Webdesign. Onthoud in dit verband dat u de grootte van een frame achteraf naar behoee

kunt wijzigen, ongeacht of het om een HTML-frame of een aangepast frame gaat. Alleen bij

aangepaste frames kunt u echter de basisvorm wijzigen.

Zo maakt u een tekstframe:

1. Selecteer het gereedschap HTML-frame toevoegen of Aangepast frame toevoe-

gen in het vervolgmenu met tekstframegereedschappen op de werkbalk Standaardobjec-

ten aan de linkerkant.

2. Klik op de pagina of het plakbord om een nieuw frame met standaardafmetingen toe te

voegen. Sleep met de muis als u een aangepaste grootte wilt instellen voor het frame.

Kies Standaardwaarden object bijwerken in het menu Opmaak als u de instel-

lingen voor het huidige frame als standaardinstellingen wilt gebruiken voor alle

andere frames die u later eventueel aan de site toevoegt. Lees ‘De standaard-

waarden voor objecten bijwerken’ in hoofdstuk 7 voor meer informatie.

86 Studio Webdesign 4 Pro

Zo verwijdert u een tekstframe:

* Selecteer het frame en druk op Delete. (Als de invoegpositie zich in de tekst bevindt, wor-

den de tekens rechts van de cursor gewist wanneer u op Delete drukt.)

Kies Object verwijderen in het menu Bewerken, ongeacht of de invoegpositie zich al dan niet

in de tekst bevindt.

Tekst invoeren in een frame

U kunt op verschillende manieren tekst toevoegen aan een HTML-frame of aangepast frame.

Bij HTML-frames wordt de tekst automatisch naar HTML-compatibele code geconverteerd.

Tekst invoeren via

Studio Write

Klik met de rechtermuisknop op een frame en kies Tekst bewerken

(of druk op Ctrl+E).

Klik op

Tekst bewerken op de optiebalk nadat u het frame hebt

geselecteerd.

Hiermee opent u de ingebouwde tekstverwerker Studio Write,

waarmee u grote hoeveelheden tekst kunt invoeren, opmaken en

proeezen. Als het frame al tekst bevat, wordt deze automatisch

geladen in Studio Write, zodat u de tekst naar behoee kunt bewer-

ken.

Bestaande tekst

importeren

Klik met de rechtermuisknop op een frame en kies Invoegen >

Tekstbestand (of druk op Ctrl+T) als u bestaande tekst wilt impor-

teren.

Rechtstreeks tekst

invoeren in een

frame

Activeer het selectiegereedschap, klik in het tekstframe om de

invoegpositie in het frame te plaatsen en begin uw tekst te typen of

bewerk de bestaande tekst. (Lees ‘Tekst rechtstreeks op de pagina

bewerken’ verderop in dit hoofdstuk.)

Tekst plakken via het

Klembord

Activeer het selectiegereedschap, klik in het tekstframe om de

invoegpositie in de tekst te plaatsen en druk op Ctrl+V.

Tekst invoeren via

slepen-en-neerzetten

Selecteer de tekst (bijvoorbeeld in een tekstverwerker) en sleep

deze naar de pagina in Studio Webdesign.

Als u de tekst in een geselecteerd frame neerzet, wordt deze onder

de bestaande tekst ingevoegd. In het andere geval wordt een nieuw

frame toegevoegd voor de tekst.

De lay-out van aangepaste frames instellen

De framelay-out van een aangepast frame bepaalt de indeling van de tekst in het frame. U

kunt een aangepast tekstframe in meerdere kolommen indelen. Wanneer het frame is gese-

lecteerd (en als de optie Randen van frames is ingeschakeld in het menu Beeld), worden de

marges van deze kolommen met grijze stippellijnen aangeduid in het frame.

Studio Webdesign 4 Pro 87

Merk op dat de kolommen die u instelt voor een tekstframe bepalen hoe de tekst wordt weer-

gegeven in het frame. Om te voorkomen dat de tekst de ingestelde marges overschrijdt, wordt

automatisch regelterugloop toegepast. Deze marges vervullen met andere woorden een an-

dere functie dan de paginamarges en rij-/kolomhulplijnen, die veeleer lay-outhulpmiddelen

zijn om de positie van elementen te bepalen op de pagina.

U kunt de marges van de kolommen op twee manieren aanpassen: door ze te verslepen met

de muis of via het dialoogvenster Eigenschappen van frame.

Zo wijzigt u de eigenschappen van een frame rechtstreeks op de pagina:

* Selecteer het frame (klik zo nodig op het begrenzingskader om alleen het frame te selecte-

ren). Versleep vervolgens de kolomhulplijnen om de marges van de kolom aan te passen.

(1) (2) (3)

In de bovenstaande guur ziet u duidelijk dat de muisaanwijzer een andere vorm krijgt naar-

gelang deze zich boven het begrenzingskader van een tekstframe (1), boven de linker- of

rechtermarge (2) of boven de boven- of ondermarge van een kolom bevindt (3).

Zo wijzigt u de eigenschappen van een frame via het dialoogvenster:

1. Selecteer het aangepaste frame en klik op Eigenschappen van frame op de optiebalk.

2. Stel via het dialoogvenster het gewenste aantal kolommen, de afstand tussen de afzonder-

lijke kolommen, en de linker- en rechtermarge van de kolommen in.

3. Om de breedte van de afzonderlijke kolommen en de boven- en ondermarge van het

frame te wijzigen, klikt u in de overeenkomstige tabelcel en typt u een nieuwe waarde in

het veld.

88 Studio Webdesign 4 Pro

Als het tekstframe meerdere kolommen bevat, hoe u alleen de boven- en on-

dermarge van de eerste kolom in te stellen. Klik vervolgens op de kolomkoppen

Boven en/of Onder om voor de andere cellen dezelfde waarden in te stellen.

Tekst laten overvloeien in aangepaste frames

Omdat u HTML-frames niet aan elkaar kunt koppelen, kunt u tekst niet van

het ene in het andere frame laten overvloeien. Bij dergelijke frames kunt u al-

leen per frame instellen wat er moet gebeuren met tekst die niet volledig in het

frame past.

U kunt naar behoee met één aangepast frame of met meerdere frames werken. In het laatst-

genoemde geval kunt u de verschillende frames aan elkaar koppelen, zodat de tekst automa-

tisch van het ene in het andere frame overvloeit.

Een belangrijk verschil tussen een tekstverwerker en Studio Webdesign is dat het programma

standaard geen frames toevoegt of verwijdert naargelang de hoeveelheid tekst die u invoert of

importeert. De tekst wordt gewoon voortgezet in het volgende frame totdat het einde ervan

is bereikt (sommige frames blijven leeg) of totdat er geen frames meer over zijn (een gedeelte

van de tekst wordt niet weergegeven).

Als de tekst eindigt voordat alle frames zijn gevuld, bevat de pagina enkele lege frames. Om

deze frames te vullen, moet u ofwel extra tekst toevoegen ofwel de tekengrootte van de be-

staande tekst wijzigen.

Merk op dat u verschillende reeksen frames aan elkaar kunt koppelen in Studio Webdesign en

in elke reeks frames een andere tekst kunt invoegen. Gebruik de voorziening Tekst beheren

in Sitebeheer (toegankelijk via het menu Extra) als u een overzicht wilt van alle teksten die u

hebt gebruikt in de site. Hier kunt u eenvoudig de tekst selecteren die u wilt bewerken.

De voorziening Automatisch overvloeien gebruiken

Bij het importeren van tekst kunt u het beste de voorziening Automatisch overvloeien ge-

bruiken. Dan voegt het programma automatisch nieuwe tekstframes en pagina’s toe totdat de

tekst volledig is geïmporteerd. Op deze manier stelt u zeker dat er voldoende frames zijn om

de volledige tekst weer te geven. Zodra de tekst is geïmporteerd, kunt u proberen in te schat-

ten in welke mate u de tekst moet aanpassen, zodat deze in de beschikbare ruimte past op uw

website. Hierbij kunt u eerst de grote wijzigingen doorvoeren en vervolgens de puntjes op de

i zetten.

Zo laat u tekst automatisch overvloeien op de pagina:

* Klik op de knop Automatisch overvloeien links van de knop Koppelen onder

het frame.

Studio Webdesign 4 Pro 89

Dan voegt het programma automatisch het vereiste aantal pagina’s en frames toe totdat de

volledige tekst wordt weergegeven.

Tekst aan de grootte van een frame aanpassen

Als er meer tekst is dan in het beschikbare aantal frames past, slaat Studio Webdesign de

tekst die niet kan worden weergegeven automatisch in een onzichtbaar overvloeigebied op

en wordt onder het laatste frame de knop Koppelen weergegeven (vlak naast de knop

Automatisch overvloeien). In dat geval kunt u de tekst natuurlijk altijd inkorten, of meer

ruimte voorzien voor de tekst door enkele extra frames toe te voegen. Een andere mogelijk-

heid is op de knop Automatisch overvloeien klikken. Dan voegt het programma automatisch

een aantal extra pagina’s en frames toe totdat de volledige tekst kan worden weergegeven.

Wellicht bespaart u in dergelijke gevallen echter veel tijd door gebruik te maken van de ge-

reedschappen op de optiebalk voor frames, waarmee u tekst eenvoudig aan de grootte van een

frame kunt aanpassen:

Automatisch schalen

Klik op deze knop als u het programma automatisch de tekengrootte van de tekst

wilt laten aanpassen, zodat deze netjes in de beschikbare frames past. U kunt deze

functie gebruiken voordat u alle tekst hebt toegevoegd (om na te gaan hoe deze in de

beschikbare frames past), of nadat u de vereiste tekst hebt toegevoegd (als ‘nishing

touch’). Als u deze functie gebruikt, wordt eerst de tekengrootte aangepast, vervol-

gens de afstand tussen afzonderlijke regels en tot slot de witruimte onder alinea’s –

totdat de tekst volledig in de beschikbare frames past. Merk op dat dit geen invloed

hee op de andere instellingen die u hebt gekozen voor de tekst.

Tip: u kunt ook op Ctrl+Alt+X drukken om tekst automatisch te schalen.

Tekst vergroten

Klik op deze knop als u de tekengrootte van frametekst stapsgewijs wilt vergroten.

Dubbelklik als u de tekengrootte in grotere stappen wilt vergroten.

Tekst verkleinen

Klik op deze knop als u de tekengrootte van frametekst stapsgewijs wilt verkleinen.

Dubbelklik als u de tekengrootte in grotere stappen wilt verkleinen.

Aangepaste frames aan elkaar koppelen

Als u een tekstframe selecteert, verschijnt rechtsonder het begrenzingskader de knop Kop-

pelen, waarmee u tekst uit het overvloeigebied kunt importeren of kunt bepalen hoe de tekst

in de volgende frames overvloeit. Uit het pictogram dat op de knop wordt afgebeeld, kunt u

snel de status van het frame en de bijbehorende tekst aeiden:

Niet overvloeien

Het frame is niet aan een volgend frame gekoppeld. (Het gaat om een op zichzelf

staand frame of het laatste tekstframe van een reeks gekoppelde frames.) De tekst

wordt volledig weergegeven.

90 Studio Webdesign 4 Pro

Overvloeien

Het frame is niet aan een volgend frame gekoppeld (het gaat om een op zichzelf

staand frame of het laatste frame van een reeks gekoppelde frames) en het overvloei-

gebied bevat tekst die nog niet werd ingevoegd.

Voortgezet

Het frame is aan een volgend frame gekoppeld. Ofwel is het einde van de tekst zicht-

baar, ofwel wordt de tekst in het volgende frame voortgezet.

Opmerking: als het overvloeigebied van het laatste frame nog tekst bevat, hee het

pictogram een rode kleur. Als het overvloeigebied geen tekst meer bevat, hee het

pictogram een groene kleur.

U kunt op twee manieren te werk gaan als u tekstframes aan elkaar wilt koppelen:

* U kunt een reeks lege frames aan elkaar koppelen en vervolgens de tekst importeren.

* U kunt de tekst in één frame importeren en vervolgens extra frames toevoegen en die

telkens aan de bestaande frames koppelen. Dan vloeit de tekst automatisch van het ene in

het andere frame over.

Frames die via de voorziening Automatisch overvloeien worden toegevoegd bij

het importeren van tekst worden automatisch aan elkaar gekoppeld.

U kunt zowel de knop Koppelen als de gereedschappen op de optiebalk voor frames gebrui-

ken om bestaande frames aan elkaar te koppelen of de volgorde van gekoppelde frames te

wijzigen. Let hierbij op het symbool dat wordt weergegeven voor de muisaanwijzer.

Zo koppelt u het geselecteerde frame aan een ander frame:

* Klik op de knop Koppelen onder het frame.

Selecteer het frame en klik op

Frame koppelen op de optiebalk.

* Klik vervolgens op het frame waaraan u het geselecteerde frame wilt koppelen. Merk op

dat u alleen lege frames aan het geselecteerde frame kunt koppelen.

Zo verbreekt u de koppeling met het geselecteerde frame:

* Klik op Koppeling verbreken op de optiebalk.

Klik op de knop Koppelen onder het frame en klik vervolgens nogmaals op hetzelfde

frame.

Merk op dat de tekst in de ‘oude’ frames altijd behouden blij. Als u bijvoorbeeld de kop-

peling met het tweede frame verbreekt in een tekst die uit drie frames bestaat, blij de tekst

in het eerste en derde frame behouden. Deze twee frames zijn nu aan elkaar gekoppeld. Het

losgekoppelde frame is altijd leeg.

Studio Webdesign 4 Pro 91

Druk op Esc of klik op een leeg gedeelte van de pagina of het plakbord om de

bewerking te annuleren als u per ongeluk op de knop Koppelen hebt geklikt.

Zo navigeert u tussen frames:

* Klik op Vorig frame of Volgend frame op de optiebalk.

Graﬁsche eigenschappen van frames

Net als aeeldingen hebben ook frames een lijndikte/-kleur en een vulkleur (aanvanke-

lijk is een lijndikte van nul pixels en transparant als vulkleur ingesteld voor een frame). Dat

geldt zowel voor HTML-frames als voor aangepaste frames. Bij aangepaste frames kunt u

ook de transparantie instellen (HTML-frames ondersteunen geen transparantie). U kunt deze

lijn- en vuleigenschappen op elk moment aanpassen, net als bij aeeldingen. Zo kunt u bij-

voorbeeld een verloop dat uit grijstinten of lichte kleurtonen bestaat als achtergrond instellen

voor de tekst. U kunt ook aeeldingen importeren en die als inline guren op de frametekst

uitlijnen.

Merk op dat u voor de frametekst alleen een een kleur kunt instellen. Als u allerlei rand-/

vuleecten wilt toepassen op de tekst, moet u artistieke tekst gebruiken (zie verderop in dit

hoofdstuk).

Overvloeiopties voor tekst in HTML-frames

Omdat HTML-frames aan de HTML-standaard moeten voldoen, kunt u ze niet aan elkaar

koppelen (zoals aangepaste frames). Als u dit type tekstframes gebruikt, moet u beslissen wat

u wilt doen met tekst die niet volledig kan worden weergegeven. Merk op dat de knop Kop-

pelen rechtsonder een geselecteerd HTML-frame de status Overvloeien hee als het

frame meer tekst bevat dan kan worden weergegeven.

In dat geval hebt u verschillende mogelijkheden: de tekst in het overvloeigebied verbergen, de

grootte van het frame aan die van de tekst aanpassen of een schuialk toevoegen waarmee

gebruikers de rest van de tekst kunnen weergeven.

Zo stelt u een overvloeioptie in voor de tekst:

1. Selecteer het HTML-tekstframe.

2. Klik met de rechtermuisknop op het frame, kies Tekst opmaken > Overvloeiende tekst

en selecteer een van de volgende opties:

* Verbergen: als u voor deze optie kiest, wordt de tekst die niet kan worden weergegeven

in het frame verborgen (ook op de webpagina die internetgebruikers uiteindelijk te zien

krijgen in hun browser).

* Overvloeien: selecteer deze optie als u de grootte van het frame wilt aanpassen, zodat

alle tekst zichtbaar is.

92 Studio Webdesign 4 Pro

* Vaste schuialk: als u deze optie selecteert, wordt er altijd een schuialk weergegeven

in het frame. Als alle tekst in het frame zichtbaar is, hee deze schuialk echter een

grijze kleur (is hij niet beschikbaar).

* Automatisch schuialk weergeven: selecteer deze optie als u alleen een schuialk

wilt toevoegen wanneer niet alle tekst kan worden weergegeven.

Geef altijd een voorbeeld van uw site weer (rechtstreeks in het programma of

in uw browser) om het eect van uw instellingen te controleren, vooral als u de

optie Overvloeien gebruikt.

ARTISTIEKE TEKST GEBRUIKEN

Artistieke tekst is op zichzelf staande tekst die u rechtstreeks aan een pagina kunt toevoegen.

Dergelijke tekst leent zich uitstekend voor koppen, citaten en allerlei andere tekst die een

speciale functie vervult in uw site. Artistieke tekst kan eenvoudig worden opgemaakt met de

standaardgereedschappen voor het bewerken van tekst.

Hier is een overzicht van enkele gelijkenissen tussen frametekst en artistieke tekst. Bij beide

typen tekst kunt u:

* de teken- en alineaopmaak wijzigen, opmaakproelen toepassen, de tekst bewerken in

Studio Write en tekst importeren;

* een andere lijnstijl en/of vulkleur (met inbegrip van kleur- en bitmapverlopen) instellen

en de transparantie wijzigen;

* inline aeeldingen insluiten;

* ltereecten toepassen en de tekst een speciek aantal graden roteren;

* een spellingcontrole uitvoeren, de tekst proeezen en de synoniemenlijst gebruiken;

* de tekst en gebruikte lettertypen beheren via Sitebeheer.

Daarnaast zijn er echter ook enkele verschillen tussen artistieke tekst en frametekst:

* U kunt de tekengrootte van artistieke tekst achteraf naar behoee aanpassen door een van

de grepen van het begrenzingskader te verslepen. Bij frametekst wijzigt alleen de manier

waarop de tekst overvloeit in het frame als u de grootte van het tekstframe wijzigt.

* U kunt artistieke tekst langs een pad plaatsen. Bij frametekst kunt u dat niet.

* In tegenstelling tot bij frametekst wordt op artistieke tekst niet automatisch regelterugloop

toegepast.

Studio Webdesign 4 Pro 93

* Omdat u artistieke tekst noch kunt laten overvloeien noch aan andere artistieke tekst kunt

koppelen, zijn ook de opties om de tekengrootte van de tekst aan de grootte van het object

aan te passen niet beschikbaar op de optiebalk voor frames.

Zo voegt u artistieke tekst toe:

1. Selecteer het gereedschap Artistieke tekst toevoegen op de werkbalk Standaardobjec-

ten aan de linkerkant.

2. Klik op een willekeurige positie op de pagina als u de standaardtekengrootte wilt gebrui-

ken voor de tekst. Sleep met de muis als u een aangepaste tekengrootte wilt instellen, zoals

in de volgende guur.

3. Stel voordat u begint te typen de eigenschappen van de tekst in (lettertype, tekenstijl, en-

zovoort). Gebruik hiervoor de optiebalk voor tekst, de opties in het menu Tekst, of het

snelmenu voor tekst (optie Tekst opmaken).

4. Typ rechtstreeks op de pagina de gewenste tekst.

U kunt artistieke tekst op dezelfde manier selecteren, verplaatsen, schalen, verwijderen en

kopiëren als een tekstframe nadat u deze aan een pagina hebt toegevoegd. Desgewenst kunt u

er een een kleur, kleur-/bitmapverloop en/of transparantie-eect voor instellen.

Zo schaalt u een artistiek tekstobject:

* Versleep de grepen rond het object als u de tekst proportioneel wilt schalen. Houd de

Shi-toets ingedrukt terwijl u sleept als u de tekst niet-proportioneel wilt schalen.

Zo bewerkt u artistieke tekst:

* Sleep met de muis om het fragment te selecteren dat u wilt bewerken. Dubbelklik om een

woord te selecteren. Klik drie keer als u een volledige alinea wilt selecteren.

U kunt nu nieuwe tekst invoeren, de teken- en alineaopmaak wijzigen, de tekst bewerken in

Studio Write, enzovoort.

Bij artistieke tekst verankert u met de opties in het submenu Tekst > Verticaal

uitlijnen een speciek deel van het object. Als u bijvoorbeeld Bovenaan kiest,

wordt de bovenste regel verankerd en wordt de nieuwe tekst die u typt auto-

matisch eronder ingevoegd. Kiest u Onderaan, dan wordt de onderste (meest

recente) regel verankerd en worden de regels erboven omhoog geschoven als u

nieuwe regels tekst toevoegt.

94 Studio Webdesign 4 Pro

TEKST LANGS EEN PAD PLAATSEN

‘Gewone’ rechtlijnige artistieke tekst is verre van gewoontjes, zeker niet als u nog een stapje

verder gaat en deze langs een gebogen pad laat vloeien. Het object dat op deze manier ontstaat,

hee dezelfde eigenschappen als artistieke tekst. Alleen hee het een pad (Bézier-curve) dat

u met behulp van het selectiegereedschap net zo eenvoudig kunt bewerken als om het even

welke andere lijn! Daar komt nog bij dat padtekst enkele unieke voorzieningen ondersteunt

die u tevergeefs zult zoeken bij andere soorten tekst. Daarover leest u verderop meer.

Zo stelt u een vooraf gedeﬁnieerd gebogen pad in voor tekst:

1. Voeg enige artistieke tekst toe aan de pagina.

2. Klik terwijl de tekst is geselecteerd op het pijltje naast de knop

Padtekst bewerken op

de optiebalk om het bijbehorende vervolgmenu te openen en kies een vooraf gedenieerd

pad.

De tekst vloeit nu langs het ingestelde pad.

Zo voegt u artistieke tekst toe aan een bestaande lijn of vorm:

1. Teken een vrije vorm, een rechte of gebogen lijn (zie ‘Lijnen tekenen en bewerken’ in

hoofdstuk 8) of een AutoVorm (zie ‘Vormen tekenen en bewerken’ in hoofdstuk 8).

2. Selecteer het gereedschap

Artistieke tekst toevoegen op de werkbalk Standaardobjec-

ten.

3. Beweeg met de muisaanwijzer over de lijn totdat onder de aanwijzer het symbool van een

curve verschijnt en klik op de positie waar u de tekst wilt laten beginnen. Zoals u in de

onderstaande guur ziet, verandert de lijn in een stippellijn wanneer u klikt.

Studio Webdesign 4 Pro 95

4. Typ enige tekst op de huidige invoegpositie. Let erop dat de tekst automatisch langs de lijn

vloeit, die naar een pad is geconverteerd.

Het oorspronkelijke lijnobject gaat hierbij verloren. Kies Bewerken > Onge-

daan maken als u de lijn weer in zijn originele hoedanigheid wilt herstellen.

Zo lijnt u bestaande tekst op een bestaande lijn of vorm uit:

1. Voeg enige artistieke tekst toe aan de pagina.

2. Teken een vrije vorm, een rechte of gebogen lijn, of voeg een AutoVorm toe.

3. Selecteer beide objecten en kies Tekst op pad uitlijnen in het menu Extra. De tekst vloeit

nu langs het ingestelde pad.

Zo voegt u rechtstreeks padtekst toe aan een pagina:

1. Kies een van de padgereedschappen in het vervolgmenu voor artistieke tekst op de werk-

balk Standaardobjecten:

Gebruik het gereedschap Vrije padtekst toevoegen als u het pad van de tekst met de

vrije hand wilt deniëren.

Met het gereedschap Rechte padtekst toevoegen kunt u tekst langs een rechte lijn

plaatsen.

Met het gereedschap Gebogen padtekst toevoegen kunt u afzonderlijke lijnsegmen-

ten met elkaar verbinden door herhaaldelijk te klikken. (Deze lijnsegmenten kunnen

recht of gebogen zijn.)

Deze drie gereedschappen werken ongeveer op dezelfde manier als de overeen-

komstige lijngereedschappen. Bij de eerste twee gereedschappen hoe u alleen

maar te slepen met de muis om een lijn te tekenen. Het gereedschap Gebogen

padtekst is iets complexer, maar biedt u wel de mogelijkheid afzonderlijke lijn-

segmenten te deniëren via de optiebalk.

1. Teken een lijn op de pagina. Zodra u de muisknop loslaat, verschijnt aan het begin van

het pad automatisch de invoegpositie. (Bij het tekenen van een gebogen pad kunt u ofwel

rechtstreeks tekst beginnen te typen op een willekeurige positie langs het pad ofwel op Esc

drukken of dubbelklikken om de invoegpositie aan het begin van het pad te plaatsen.)

2. Typ enige tekst op de huidige invoegpositie. De tekst wordt automatisch langs het pad

geplaatst.

96 Studio Webdesign 4 Pro

TEKST RECHTSTREEKS OP DE PAGINA BEWERKEN

U kunt frametekst, tabeltekst of artistieke tekst rechtstreeks op de pagina bewerken met het

selectiegereedschap. Zo kunt u bijvoorbeeld een tekstfragment selecteren en nieuwe tekst in-

voeren, de eerste regel van een alinea laten inspringen, tabstops instellen, de teken- en ali-

neaopmaak wijzigen, allerlei opmaakproelen toepassen, en tekst zoeken en vervangen (zie

verderop in dit hoofdstuk). Als u langere teksten wilt bewerken en allerlei geavanceerde opties

wilt instellen, kunt u beter Studio Write gebruiken.

Tekst selecteren en invoeren

De procedure voor het selecteren van frametekst, artistieke tekst en tabeltekst is op deze van

de modernste tekstverwerkers gebaseerd. Het geselecteerde gebied hee een halransparante

blauwe achtergrondkleur, zodat de tekst die u wilt bewerken duidelijk zichtbaar is.

Dubbelklik of klik drie keer als u een woord dan wel een volledige alinea wilt selecteren. U

kunt ook terwijl u de Ctrl-toets ingedrukt houdt klikken of slepen om niet-aaneengesloten

woorden te selecteren, of slepen terwijl u de Shi-toets ingedrukt houdt om een tekstfrag-

ment te selecteren.

Gebruik de functie Alles selecteren van de voorziening Zoeken en vervangen

als u meerdere identieke woorden of zinnen wilt selecteren (zie verderop in dit

hoofdstuk).

Zo bewerkt u tekst rechtstreeks op de pagina:

1. Selecteer het selectiegereedschap en klik in het tekstobject om de invoegpositie in de tekst

te plaatsen (zie guur).

Selecteer een afzonderlijk woord, een volledige alinea of een tekstfragment.

2. Begin te typen om nieuwe tekst in te voeren of de geselecteerde tekst te overschrijven,

aankelijk van de bewerking die u in stap 1 hebt uitgevoerd.

Studio Webdesign 4 Pro 97

Zo begint u een nieuwe alinea:

* Druk op Enter.

Zo begint u een nieuwe regel in dezelfde alinea (een ‘regeleinde’ of ‘zachte

return’ genoemd):

* Druk op Shi+Enter.

De volgende twee opties zijn uitsluitend van toepassing op frametekst. U kunt zowel deze

sneltoetsen als de overeenkomstige opties in het submenu Invoegen > Eindemarkering ge-

bruiken om een kolom- of frame-einde in te voegen.

Zo laat u tekst in de volgende kolom (kolomeinde) of het volgende frame

(frame-einde) overvloeien:

* Druk respectievelijk op Ctrl+Enter of Alt+Enter.

Zo wisselt u tussen de invoeg- en overschrijfmodus:

* Druk op Insert.

Zo voert u een bewerking opnieuw uit:

* Kies Bewerken > Herhalen of druk op Ctrl+Y.

Stel dat u zojuist de opmaak van een alinea hebt gewijzigd. Dan kunt u de ingestelde opmaak

eenvoudig op een andere alinea toepassen door in die alinea te klikken en Bewerken > Her-

halen te kiezen in de menubalk.

Tekst kopiëren, plakken en verplaatsen

U kunt frametekst naar het Klembord kopiëren en deze vervolgens vanaf het Klembord in

hetzelfde of in een ander tekstframe plakken. U kunt de gekopieerde tekst ook in een nieuw

frame plakken.

Daarnaast kunt u frametekst ook via slepen-en-neerzetten naar een andere positie in het-

zelfde frame of naar een ander tekstframe in uw site verplaatsen.

Zo kopieert en plakt u tekst:

1. Selecteer de tekst die u wilt kopiëren.

2. Kies Kopiëren in het menu Bewerken. Hiermee plaatst u de geselecteerde tekst op het

Klembord.

3. Klik op de positie waar u de tekst wilt invoegen (in hetzelfde of in een ander tekstframe, of

in artistieke tekst) om de invoegpositie in de tekst te plaatsen.

4. Kies Plakken in het menu Bewerken.

Als u de invoegpositie niet in bestaande tekst plaatst, kunt u de tekst op het

Klembord rechtstreeks in een nieuw tekstframe plakken.

98 Studio Webdesign 4 Pro

Zo verplaatst u tekst via slepen-en-neerzetten (alleen van toepassing op tekst-

frames):

1. Selecteer de tekst die u wilt verplaatsen.

2. Plaats de muisaanwijzer boven de geselecteerde tekst en houd de linkermuisknop inge-

drukt. Let erop dat de aanwijzer de volgende vorm krijgt:

3. Sleep de muisaanwijzer terwijl u de linkermuisknop ingedrukt houdt naar de locatie (in

hetzelfde of in een ander frame) waarheen u de tekst wilt verplaatsen. Let erop dat er een

invoegcursor verschijnt op de positie waar de tekst zal worden ingevoegd.

4. Laat de muisknop los om de tekst op de huidige positie in te voegen.

Alinea’s laten inspringen

Wanneer u een tekstobject selecteert, verschijnen er in de horizontale liniaal bovenaan mar-

keringen die aangeven hoe ver de huidige alinea naar links en naar rechts inspringt, en hoe

ver de eerste regel van de alinea inspringt. Door deze markeringen naar een andere positie te

slepen, kunt u de inspringing van een alinea eenvoudig vergroten of verkleinen. U kunt hier-

voor natuurlijk ook het overeenkomstige dialoogvenster gebruiken.

* De waarde om de alinea aan de linkerkant te laten inspringen, wordt ingesteld in verhou-

ding tot de linkermarge van het object.

* Hoe ver de eerste regel inspringt, is aankelijk van de waarde die u hebt ingesteld om de

alinea aan de linkerkant te laten inspringen.

* De waarde om de alinea aan de rechterkant te laten inspringen, wordt ingesteld in verhou-

ding tot de rechtermarge van het object.

Lees ‘De lay-out van aangepaste frames instellen’ eerder in dit hoofdstuk voor meer informa-

tie.

Zo laat u de huidige alinea inspringen:

* Versleep de overeenkomstige markering op de horizontale liniaal.

Studio Webdesign 4 Pro 99

Klik op Hoger niveau of Lager niveau op de optiebalk om de inspringing aan de

linkerkant stapsgewijs te vergroten of te verkleinen. Hoe ver de alinea wordt ingesprongen

telkens als u klikt, is aankelijk van de standaardwaarde die is ingesteld voor tabstops.

Kies Tekst > Alineaopmaak in de menubalk (of Tekst opmaken > Alineaopmaak in het

snelmenu) als u de huidige instellingen via een dialoogvenster wilt veranderen. Stel ver-

volgens via de kringvelden in het groepsvak Inspringen de gewenste waarden in. Hier

kunt u nauwkeurig instellen hoe ver de alinea aan beide zijden moet inspringen. Desge-

wenst kunt u ook de eerste regel van de alinea laten inspringen, of alle regels behalve de

eerste regel van de alinea laten inspringen.

Met Unicode-tekst werken

Studio Webdesign ondersteunt Unicode, zodat u ook tekens uit andere talen of speciale sym-

bolen kunt gebruiken in uw teksten.

* Kies Bewerken > Plakken speciaal en selecteer Niet-opgemaakte Unicode-tekst in het

dialoogvenster als u tekst in Unicode-indeling wilt invoegen vanaf het Klembord.

* U kunt ook rechtstreeks Unicode-tekens invoegen in een tekst door de overeenkomstige

hexadecimale waarde te typen en op Alt+X te drukken. Met deze sneltoets wisselt u tus-

sen het weergegeven teken (bijvoorbeeld @) en de overeenkomstige hexadecimale waarde

(bijvoorbeeld U+0040).

* Gebruik Studio Write als u tekst in Unicode-indeling wilt exporteren.

TEKST ZOEKEN EN VERVANGEN

In Studio Webdesign is een krachtige functie geïmplementeerd waarmee u tekst snel en een-

voudig kunt zoeken en vervangen. Hierbij kunt u niet alleen naar specieke woorden of te-

kens zoeken, maar ook naar allerlei teken- en alineaopmaakkenmerken. Zo kunt u bijvoor-

beeld naar tekst zoeken waarvoor een speciek lettertype of opmaakproel, of een welbepaald

type opsommingstekens/nummering of uitlijning is ingesteld. U kunt zelfs naar ontbrekende

lettertypen en inline aeeldingen zoeken! Daarbij kunt u aangeven of u de gevonden tekst

meteen doorheen de gehele site wilt vervangen of als u alleen specieke instanties ervan wilt

vervangen. Merk op dat het dialoogvenster Zoeken en vervangen geopend blij totdat u op de

knop Sluiten klikt, zodat u intussen rustig verder kunt werken aan uw site.

Zo gebruikt u de functie Zoeken & vervangen:

1. Kies Zoeken & vervangen in het menu Bewerken of druk op Ctrl+F.

2. Typ in het invoervak Zoeken naar van het dialoogvenster de tekst waar u naar wilt zoe-

ken. Typ vervolgens in het invoervak daaronder de tekst waardoor u de gezochte tekst

wilt vervangen (als u deze wilt vervangen). Klik op het pijltje aan het rechteruiteinde van

beide invoervakken om een lijst met items weer te geven die u onlangs hebt gezocht en/

of vervangen. Klik op de knop rechts van beide invoervakken en gebruik de opties in het

vervolgmenu als u naar tekst met specieke opmaakkenmerken of speciale tekens wilt

zoeken, of als u een standaardexpressie wilt gebruiken om naar tekst te zoeken.

100 Studio Webdesign 4 Pro

3. Geef in het groepsvak Zoeken in aan of u alleen in de huidige tekst (de tekst die momen-

teel is geselecteerd) of in alle tekst wilt zoeken. Merk op dat de optie Huidige selectie

alleen beschikbaar is voor de functie Alles vervangen. Als u deze optie selecteert, wordt al-

leen het item dat momenteel is gemarkeerd door de opgegeven tekst vervangen wanneer u

op Alles vervangen klikt. (Als deze optie niet is geselecteerd, worden alle gevonden items

vervangen wanneer u op de knop klikt.)

4. Activeer het selectievakje Heel woord als u alleen naar tekenreeksen wilt zoeken met

witruimte (een spatie, tab, pagina-einde, enzovoort) of een leesteken ervoor of erna, of

naar tekenreeksen die zich aan het begin of einde van een alinea bevinden. Als u een on-

derscheid wilt maken tussen kleine letters en hoofdletters, activeert u de optie Identieke

hoofdletters/kleine letters. Selecteer Standaardexpressies als u de inhoud van het vak

Zoeken naar als expressie wilt behandelen, en niet als letterlijke tekenreeks waarnaar moet

worden gezocht.

5. Klik op Volgende zoeken om naar het volgende item te zoeken dat aan de opgegeven

zoekcriteria beantwoordt.

Klik op Alles selecteren als u meteen alle items wilt selecteren die aan uw zoekcriteria

beantwoorden.

6. Klik op Vervangen als u de gevonden tekst door deze in het vak Vervangen door wilt

vervangen, of klik nogmaals op Volgende zoeken als u naar het volgende item wilt zoeken

zonder het huidige item te vervangen. Herhaal dit totdat u het einde van de tekst hebt

bereikt.

Klik op Alles vervangen als u alle gevonden items door de tekst in het vak Vervangen

door wilt vervangen. Wanneer de zoekopdracht is voltooid, wordt u daar automatisch via

een berichtvenster op attent gemaakt.

7. Klik op Sluiten om het dialoogvenster Zoeken en vervangen te sluiten.

U kunt ook geavanceerde zoekcriteria instellen in het dialoogvenster Zoeken en vervangen

door gebruik te maken van een standaardexpressie (een formule om een tekenreeks te gene-

reren). Hierover leest u meer in het Help-bestand van het programma.

Studio Webdesign 4 Pro 101

5 tekenS en alinea’S

oPmaken

TEKST OPMAKEN

In Studio Webdesign kunt u nauwkeurig de gewenste teken- en alineaopmaak instellen voor

tekst, ongeacht of u met frametekst, tabeltekst of artistieke tekst werkt.

Zo wijzigt u de opmaak van tekst:

1. Selecteer de tekst.

2. Gebruik de besturingselementen op de optiebalk voor tekst om het lettertype, de tekeng-

rootte, de tekenstijl en het type uitlijning te wijzigen, of de tekst verder naar links te laten

inspringen.

Klik met de rechtermuisknop op de tekst, kies Tekst opmaken en klik op Tekenopmaak,

Alineaopmaak, Opsommingstekens & nummering of Verticaal uitlijnen in het sub-

menu. (Deze opties zijn ook toegankelijk vanuit het menu Tekst.)

Gebruik het tabblad Tekenopmaak om eigenschappen zoals de tekengrootte, tekenafstand,

regelafstand en taal te wijzigen.

Standaard wordt de tekengrootte van de tekst op uw webpagina’s automatisch aangepast naar-

gelang de browserinstellingen die gebruikers hebben gekozen. U kunt deze instelling echter

onderdrukken voor de volledige site, zodat tekst altijd in de tekengrootte wordt weergegeven

die u tijdens het ontwerpen van de site hebt gebruikt. Kies hiertoe Eigenschappen van site in

het menu Bestand, klik op de tab Opties en activeer het selectievakje Absolute tekengrootte

afdwingen.

Als een lettertype niet beschikbaar is en door een ander lettertype is vervan-

gen, wordt de naam van dit lettertype in de vervolgkeuzelijst Lettertype op de

optiebalk door een vraagteken (‘?’) voorafgegaan (zie ‘Ontbrekende lettertypen

vervangen’ in hoofdstuk 2).

Zo verwijdert u de lokale opmaak van tekst (stelt u opnieuw de standaardeigen-

schappen in):

1. Selecteer de tekst.

102 Studio Webdesign 4 Pro

2. Klik op Opmaak wissen in de vervolgkeuzelijst Opmaakproel op de optiebalk (of op het

tabblad Opmaakproelen)

MET LETTERTYPEN WERKEN

Het lettertype wijzigen, is ongetwijfeld een van de meest ingrijpende manieren om het uiter-

lijk van artistieke tekst, frametekst of tabeltekst te veranderen op uw webpagina’s. Door een

ander lettertype in te stellen voor afzonderlijke tekens of een volledige alinea, draagt u vaak

een heel andere boodschap over op uw doelgroep.

In Studio Webdesign kunt u eenvoudig een ander lettertype instellen voor tekst. U kunt hier-

toe naar behoee het tabblad Lettertypen, de optiebalk voor tekst of een dialoogvenster ge-

bruiken. Via het tabblad Lettertypen kunt u:

* rechtstreeks het gewenste lettertype instellen zonder dat u hiervoor een omweg hoe te

maken langs een dialoogvenster;

* lettertypen aan de lijst met webveilige of favoriete lettertypen toevoegen;

* simultaan zowel uw lijst met favoriete lettertypen als een lijst met webveilige lettertypen

en lettertypen die u onlangs hebt gebruikt weergeven;

* aangeven of u lettertypen die niet webveilig zijn automatisch wilt rasteren bij het exporte-

ren van uw site of er pas bij het uitvoeren van een foutcontrole de gewenste exportopties

voor wilt instellen (door met de rechtermuisknop te klikken);

* naar geïnstalleerde lettertypen zoeken;

* een voorbeeld bekijken van het eect van een lettertype op geselecteerde tekst door er de

muisaanwijzer boven te laten rusten;

* een lettertype doorheen de gehele site door een ander lettertype vervangen (met de optie

Alles selecteren in het snelmenu).

Mogelijk is het tabblad Lettertypen samengevouwen aan de linkerkant van de werkom-

geving. In dat geval klikt u op de pijlknop om het tabblad uit te vouwen. Als momenteel

een ander tabblad in de tabgroep actief is, klikt u op de tab Lettertypen om het tabblad

weer te geven.

Let erop dat boven aan het tabblad een lijst met webveilige lettertypen wordt weergegeven. Het

gaat hierbij om een zorgvuldig gekozen subset van lettertypen (die u overigens naar behoee

kunt uitbreiden) die de bestmogelijke overeenkomst waarborgen tussen het lettertype dat u

tijdens het ontwerpen van uw site gebruikt en het lettertype dat internetgebruikers uiteindelijk

te zien krijgen in hun browser. Webveilige lettertypen worden niet gerasterd bij het exporteren

van uw site, omdat het programma ervan uitgaat dat ze op elk systeem beschikbaar zijn.

Studio Webdesign 4 Pro 103

Doorgaans kunt u het beste de vooraf gedenieerde lijst met webveilige lettertypen weergeven

op het tabblad Lettertypen, tenzij u zeker weet dat het lettertype dat u gebruikt daadwerkelijk

ook beschikbaar is op het systeem van uw doelgroep. U vindt deze lettertypen onder de cate-

gorie Webveilig op het tabblad (in de vervolgkeuzelijst Lettertype op de optiebalk voor tekst

is dezelfde categorie beschikbaar).

MET OPMAAKPROFIELEN WERKEN

We raden u aan reeds in een vroeg stadium van het designproces de belangrijkste opmaak-

kenmerken in te stellen van de tekst en aeeldingen die u wilt gebruiken in uw site. Studio

Webdesign steekt u op dit gebied een handje toe door u de mogelijkheid te bieden allerlei be-

noemde opmaakproelen (zowel vooraf gedenieerde als gebruikergedenieerde opmaak-

proelen) toe te passen op frametekst, tabeltekst of artistieke tekst. Door een opmaakproel

toe te passen op tekst, stelt u in één keer een specieke combinatie van teken- en/of aline-

aopmaakkenmerken in voor die tekst. Zo kunt u voor bepaalde lay-outelementen bijvoor-

beeld benoemde alineaopmaakproelen zoals ‘Kop 1,’ ‘Kop 2,’ ‘Citaat,’ enzovoort gebruiken

en tekenopmaakproelen zoals ‘Nadruk,’ ‘Code’ of ‘Verwijzing’ om bepaalde woorden extra

te benadrukken. Door gebruik te maken van opmaakproelen, kunt u tekst niet alleen veel

sneller opmaken, maar waarborgt u ook dat uw teksten doorheen de gehele site uniform zijn

en dat u ze achteraf indien nodig eenvoudig kunt bijwerken.

U kunt zowel de optiebalk voor tekst als het tabblad Opmaakproelen gebruiken om de ge-

wenste opmaak in te stellen voor tekst. Zowel teken- als alineaopmaakproelen kunnen een-

voudig worden beheerd vanuit het dialoogvenster Lijst met opmaakproelen.

Merk op dat u via het tabblad Opmaakproelen ook nieuwe opmaakproelen kunt deniëren,

al dan niet op basis van bestaande teksteigenschappen, en een bepaald opmaakproel door-

heen de gehele site in één handeling door een ander opmaakproel kunt vervangen. Hierbij

kunt u rechtstreeks op de pagina een voorbeeld bekijken van het eect van een opmaakproel

op geselecteerde alinea’s. Raadpleeg het Help-bestand van het programma voor meer infor-

matie over deze voorzieningen.

Alineaopmaakproﬁelen versus tekenopmaakproﬁelen

Een alineaopmaakproel bepaalt het uiterlijk van een volledige alinea. In dergelijke opmaak-

proelen zijn zowel tekenopmaakkenmerken als alineaopmaakkenmerken opgeslagen. Ont-

houd in dit verband dat aan elke alinea in Studio Webdesign een speciek alineaopmaakpro-

el is toegewezen.

* Studio Webdesign bevat één ingebouwd alineaopmaakproel (‘Standaard’) waarvoor al-

lerlei standaardopmaakkenmerken zijn ingesteld. Zo wordt tekst waarop u dit opmaak-

proel toepast bijvoorbeeld standaard links uitgelijnd, en wordt er automatisch Verdana

met een tekengrootte van 12 pt als lettertype voor ingesteld. Dit is het standaardopmaak-

proel voor elke alinea tekst die u typt. U kunt dit opmaakproel echter naar behoee aan-

passen door bepaalde kenmerken ervan te wijzigen. Daarnaast kunt u ook allerlei nieuwe

opmaakproelen deniëren of een van de ingebouwde opmaakproelen aanpassen.

104 Studio Webdesign 4 Pro

* Als u een alineaopmaakproel toepast op tekst, worden automatisch alle alinea’s in de

tekst bijgewerkt, behalve die delen van de tekst waarvoor een specieke tekenopmaak is

ingesteld. Als u een woord bijvoorbeeld vet hebt opgemaakt, blij dit woord vet nadat u

het alineaopmaakproel hebt toegepast.

Een tekenopmaakproel bevat alleen opmaakkenmerken voor afzonderlijke tekens (zoals

het lettertype, de tekengrootte, vet, cursief, enzovoort). Een tekenopmaakproel wordt altijd

op geselecteerde tekens toegepast, en niet op een volledige alinea.

* Een tekenopmaakproel wordt gewoonlijk gebruikt om bepaalde tekens of woorden in

een alinea extra te benadrukken (bijvoorbeeld door ze vet of cursief te maken). Hierbij

wordt ervan uitgegaan dat u het onderliggende lettertype niet wilt wijzigen. Daarom bevat

Studio Webdesign het basisproel Standaard alinealettertype, waarvoor geen opmaak-

kenmerken zijn ingesteld. Dit opmaakproel staat in feite voor ‘om het even welk letterty-

pe dat al is ingesteld voor de alinea.’ Stel dat u op een alinea het opmaakproel ‘Hoofdtekst’

hebt toegepast, waarvoor standaard het lettertype Arial met een tekengrootte van 10 pt is

ingesteld. In dat geval wordt als lettertype Arial met een tekengrootte van 10 pt gebruikt

als u op de alinea het opmaakproel Standaard alinealettertype toepast.

* Als u het tekenopmaakproel Standaard alinealettertype toepast op tekst via het tabblad

Opmaakproelen (of de vervolgkeuzelijst Opmaakproel op de optiebalk), wordt de lokale

tekenopmaak die u eventueel hebt toegepast weer verwijderd en wordt de oorspronkelijke

opmaak van de tekst hersteld – zonder dat dit enige invloed hee op de toegepaste aline-

aopmaakproelen. (Lees ‘De opmaak van tekst wissen’ hierna voor meer informatie.)

* Zoals voor alineaopmaakproelen geldt ook hier weer dat u een onbeperkt aantal nieuwe

tekenopmaakproelen kunt deniëren (of een van de vooraf gedenieerde opmaakproe-

len kunt aanpassen) en voor elk proel specieke opmaakkenmerken kunt instellen.

Met benoemde opmaakproﬁelen werken

Wanneer u tekst selecteert, verschijnt op het tabblad Opmaakproelen en in de

vervolgkeuzelijst Opmaakproel op de optiebalk automatisch de naam van het opmaakpro-

el dat momenteel is ingesteld voor deze tekst. Het kan hierbij om een tekenopmaakproel

gaan (als u een tekenopmaakproel hebt toegepast), of om een alineaopmaakproel. U kunt

zowel het tabblad Opmaakproelen, de bovengenoemde vervolgkeuzelijst als het dialoogven-

ster Lijst met opmaakproelen gebruiken als u een ander opmaakproel wilt toepassen op de

geselecteerde tekst. Via het dialoogvenster Lijst met opmaakproelen kunt u een bestaand

opmaakproel ook rechtstreeks bewerken, een of meer opmaakproelen importeren uit een

website die u eerder hebt gemaakt met het programma, of een nieuw opmaakproel maken.

Standaard wordt maar een beperkt aantal opmaakproelen weergegeven op het tabblad Op-

maakproelen. Als u alle beschikbare opmaakproelen wilt weergeven, activeert u het selec-

tievakje Alle tonen onder aan het tabblad, of kiest u Extra > Opties > Gebruikersinterface

en vinkt u de optie Alle opmaakproelen weergeven in lijsten aan. Naast het opmaakproel

Standaard alinealettertype en enkele andere veelgebruikte opmaakproelen worden echter

altijd alle opmaakproelen weergegeven die u al hebt gebruikt in de huidige site (evenals alle

opmaakproelen die daarop zijn gebaseerd). Merk op dat u van elk opmaakproel een voor-

beeld kunt bekijken voordat u het op afzonderlijke woorden of volledige alinea’s toepast.

Studio Webdesign 4 Pro 105

Zo past u een vooraf gedeﬁnieerd opmaakproﬁel toe:

1. Klik met het selectiegereedschap in een alinea (als u een alineaopmaakproel wilt toe-

passen), of selecteer een of meer woorden of tekens (als u een tekenopmaakproel wilt

toepassen). Als u een alineaopmaakproel toepast, wordt de opmaak automatisch voor de

volledige alinea ingesteld, ongeacht hoeveel tekst u hebt geselecteerd. Als u in meerdere

alinea’s tekst hebt geselecteerd, wordt het nieuwe opmaakproel op al deze alinea’s toege-

past.

2. Geef het tabblad Opmaakproelen weer en selecteer het opmaakproel dat u op de tekst

wilt toepassen.

Kies een opmaakproel in de vervolgkeuzelijst Opmaakproel op de optiebalk.

Zo bewerkt u een bestaand opmaakproﬁel:

1. Doe op het tabblad Opmaakproelen het volgende:

* Klik met de rechtermuisknop op het teken- of alineaopmaakproel dat u wilt bewerken

en kies <Naam van opmaakproel> wijzigen.

* Klik terwijl het opmaakproel is geselecteerd op

onder aan het tabblad en

klik in het dialoogvenster dat daarop verschijnt op Bewerken.

2. Gebruik het dialoogvenster Eigenschappen van opmaakproel om de naam van het op-

maakproel, de basisstijl, de stijl voor de volgende alinea, en de teken-, alinea- en lijstop-

maak van het opmaakproel te wijzigen.

3. Klik op OK om uw wijzigingen toe te passen. Als u de wijzigingen niet wilt toepassen,

klikt u Annuleren.

4. Klik op Toepassen als u vooraf tekst had geselecteerd waarvoor dit opmaakproel is in-

gesteld en deze tekst wilt bijwerken. Als u de tekst niet wilt bijwerken, klikt u gewoon op

Sluiten.

U kunt ook de opdracht Lijst met opmaakproelen in het menu Tekst gebruiken als u een

opmaakproel wilt bewerken.

GENUMMERDE OF NIET-GENUMMERDE LIJSTEN MAKEN

U kunt met dit programma eenvoudig lijsten met opsommingstekens of genummerde lijsten

maken in tekstframes. Onthoud in dit verband dat lijsten met opsommingstekens vooral han-

dig zijn voor lijsten waarin de volgorde van de afzonderlijke elementen niet van belang is, en

genummerde lijsten voor stapsgewijze procedures (voorafgegaan door een letter of een cijfer).

Merk op dat u de lijstopmaak zowel op standaardtekst (als lokale opmaak) als op opmaakpro-

elen kunt toepassen.

106 Studio Webdesign 4 Pro

In HTML-tekstframes kunt u naar behoee eenvoudige

opsommingstekens, cijfers (numerieke en Romeinse

cijfers) en letters gebruiken.

Wanneer u echter met aangepaste tekstframes werkt, kunt u zowel eenvoudige als complexe

lijsten met opsommingstekens of genummerde lijsten maken, ofwel door een van de vooraf

gedenieerde lijsten te gebruiken (zie hierna) ofwel door uw eigen lijsten met aangepaste

symbolen, letters of cijfers te maken. Hierbij kunt u een van de vooraf gedenieerde lijsten al

dan niet door een eigen vooraf gedenieerde lijst vervangen die op uw aangepaste lijstopmaak

is gebaseerd.

Lijst met opsommingstekens Genummerde lijst

Zo maakt u een genummerde lijst of een lijst met opsommingstekens:

1. Selecteer een of meer alinea’s.

Klik in een alinea om de invoegpositie in de tekst te plaatsen.

2. Kies Opsommingstekens & nummering in het menu Tekst.

3. Doe in het dialoogvenster Eigenschappen van opmaakproel het volgende:

* Klik op een van de vooraf gedenieerde symbolen als het om tekst in een HTML-tekst-

frame gaat (zie hiervoor).

* Selecteer Opsommingstekens of Nummering in de vervolgkeuzelijst Stijl en klik ver-

volgens op een van de vooraf gedenieerde stijlen als het om tekst in een aangepast

tekstframe gaat.

* Selecteer een vooraf gedenieerde stijl en klik op Details als u een aangepaste lijst wilt

maken. Ga daarna als volgt te werk:

4. Klik op OK om de lijstopmaak toe te passen.

Studio Webdesign 4 Pro 107

Telkens als u op Enter drukt, wordt een nieuwe regel begonnen die door het opgegeven sym-

bool of cijfer wordt voorafgegaan. Druk twee keer na elkaar op Enter als u voor de rest van de

tekst weer de standaard alineaopmaak wilt gebruiken in plaats van de lijst voort te zetten.

Zo laat u de nummering van een lijst opnieuw beginnen vanaf een bepaald

punt (alleen in aangepaste tekstframes):

1. Klik op de positie vanaf waar u de nummering opnieuw wilt laten beginnen in de lijst en

kies Opsommingstekens & nummering in het menu Tekst.

2. Activeer het selectievakje Opnieuw nummeren om de cijfer- of letterreeks opnieuw vanaf

1 respectievelijk A te laten beginnen.

3. Klik op OK.

Zo past u opnieuw de standaardopmaak toe op een lijst met opsommingstekens

of genummerde lijst:

1. Selecteer de lijst.

2. Kies Opsommingstekens & nummering in het menu Tekst.

Klik met de rechtermuisknop op de geselecteerde lijst en kies Tekst opmaken > Opsom-

mingstekens & nummering in het snelmenu.

3. Klik in het dialoogvenster op de optie Geen. Klik daarna op OK.

U kunt in Studio Webdesign ook opsommingstekens en nummers toewijzen aan opmaakpro-

elen. (Hoe u dit doet, leest u in het Help-bestand van het programma.)

SYMBOLEN INVOEGEN

U kunt allerlei symbolen invoegen in uw teksten, ofwel via het menu Invoegen ofwel (voor

veelgebruikte symbolen) door gebruik te maken van sneltoetsen.

Gebruik alleen symbolen uit de standaardtekenset op webpagina’s.

Zo voegt u een symbool in via het menu Invoegen:

1. Klik met het selectiegereedschap op de positie waar u een symbool wilt invoegen in de

tekst.

2. Kies Invoegen > Symbool en selecteer het gewenste symbool in het submenu.

3. Kies Overige om het dialoogvenster Symbool invoegen te openen als het symbool dat

u wilt invoegen niet in de lijst voorkomt. Merk op dat dit dialoogvenster geopend blij,

zodat u de tekst in de werkomgeving verder kunt bewerken terwijl u symbolen selecteert.

* Selecteer een lettertype in de vervolgkeuzelijst linksboven in het dialoogvenster om alle

tekens in deze set weer te geven. Blader vervolgens door de lijst met beschikbare tekens.

108 Studio Webdesign 4 Pro

Via de vervolgkeuzelijst rechtsboven kunt u desgewenst een specieke deelverzameling

selecteren om naar een bepaald bereik binnen de geselecteerde tekenset te gaan.

* Klik op een teken (of selecteer het terwijl u door de tekenset bladert met behulp van de

pijltoetsen op het toetsenbord) om de naam en hexadecimale tekencode van het des-

betreende teken weer te geven. U kunt ook een tekencode invoeren in het vak onder

in het dialoogvenster en vervolgens op Zoeken klikken om dit teken te selecteren in de

lijst.

* Als u een teken in uw tekst wilt invoegen, dubbelklikt u er op (of selecteert u het en klikt

u op Invoegen).

In de rij onder de lijst met beschikbare tekens worden alle tekens weergegeven

die u onlangs in een tekst hebt ingevoegd. Dubbelklik op een teken in deze rij

als u dit teken in uw tekst wilt invoegen.

Controleer of de invoegpositie zich nog altijd in de tekst bevindt als u het teken

dat u hebt ingevoegd nergens kunt terugvinden.

DE HUIDIGE DATUM/TIJD INVOEGEN

U kunt een datum- of tijdveld invoegen in uw tekst. Hierbij kunt u uit verschillende notaties

kiezen. Standaard wordt het ingevoegde datum-/tijdveld automatisch bijgewerkt wanneer u

de site opent of opslaat. Desgewenst kunt u deze voorziening echter uitschakelen.

Zo voegt u een datum-/tijdveld in:

1. Klik met het selectiegereedschap op de positie waar u het veld wilt invoegen in de tekst.

2. Kies Invoegen > Informatie > Datum of tijd en kies de gewenste datum-/tijdnotatie.

3. Schakel het selectievakje Automatisch bijwerken uit als u altijd de datum/tijd wilt weer-

geven waarop het veld is ingevoegd. Zo voorkomt u dat de datum/tijd automatisch wordt

bijgewerkt.

PERSOONLIJKE GEGEVENS INVOEGEN

In het dialoogvenster Persoonlijke gegevens kunt u persoonlijke informatie opslaan die u vaak

nodig hebt of regelmatig bijwerkt, zodat u deze gegevens niet voortdurend opnieuw hoe in

te voeren. Overweeg bijvoorbeeld maar eens hoe vaak u niet van mobiel telefoonnummer of

e-mailadres verandert! In dit dialoogvenster ziet u in één oogopslag al uw persoonlijke gege-

vens. Onthoud in dit verband dat het programma velden met persoonlijke gegevens in uw site

automatisch bijwerkt wanneer u deze informatie achteraf wijzigt.

Studio Webdesign 4 Pro 109

Zo controleert of wijzigt u uw persoonlijke gegevens:

1. Kies Persoonlijke gegevens instellen in het menu Extra.

2. Voer uw persoonlijke gegevens in op de tabbladen Wer k, Privé en Aangepast. (Als uw site

een kalender bevat, is in dit dialoogvenster ook het tabblad Kalenders beschikbaar.)

Op het tabblad Aangepast kunt u aangepaste velden deniëren voor gegevens die u vaak

nodig hebt in uw site.

Zo voegt u een veld met persoonlijke gegevens in:

1. Klik met het selectiegereedschap op de positie waar u het veld wilt invoegen in de tekst.

2. Kies Invoegen > Informatie > Persoonlijke gegevens.

3. Selecteer in de keuzelijst boven in het dialoogvenster de informatie die u wilt invoegen

en geef eventueel het prex of sux op dat u in uw persoonlijke gegevens wilt opnemen,

bijvoorbeeld Naam:.

4. Klik op OK.

Zo werkt u velden met persoonlijke gegevens bij:

* Kies Extra > Persoonlijke gegevens instellen en voer de vereiste wijzigingen door.

* Klik op Bijwerken om alle velden met persoonlijke gegevens die zijn gewijzigd bij te wer-

ken in uw site. Merk op dat deze velden aan het dialoogvenster gekoppeld blijven totdat u

ze verwijdert.

110 Studio Webdesign 4 Pro

6 met tabellen Werken

TEKSTTABELLEN MAKEN

Tabellen zijn ideaal als u tekst en gegevens in rijen en kolommen wilt indelen, die u achteraf

zo nodig eenvoudig kunt aanpassen. Hierbij kunt u gebruikmaken van talrijke ingebouwde

spreadsheetfuncties.

Elke tabelcel gedraagt zich als een soort miniframe. Tabellen vertonen veel overeenkomsten

met tekstframes. Zo kunt u ook bij tabellen een aangepaste teken- en alineaopmaak instellen,

allerlei vooraf gedenieerde opmaakproelen toepassen op de tabeltekst, inline aeeldingen

insluiten, een een kleur, kleurverloop of bitmapverloop als achtergrondkleur instellen voor

specieke cellen of de volledige tabel, handmatig of automatisch een spellingcontrole uitvoe-

ren, de tekst proeezen en synoniemen opzoeken in een woordenlijst. Tabellen ondersteunen

echter ook enkele unieke functies, zoals AutoVullen en AutoWissen. Daarnaast kunt u in

tabellen ook formules invoegen en een aangepaste getalnotatie instellen.

HTML-tabellen versus aangepaste tabellen

U kunt twee soorten tabellen toevoegen aan een pagina: HTML-tabellen en aangepaste tabel-

len. Sommige voorzieningen zijn voor beide typen tabellen beschikbaar, andere zijn uitslui-

tend voor HTML-tabellen of aangepaste tabellen beschikbaar. Hierna vindt u een overzicht

van de belangrijkste eigenschappen van beide soorten tabellen.

HTML-

tabellen

Aangepaste

tabellen

Zoekmachines kunnen in de tekst zoeken

 

Scripts invoegen om dynamische content te genereren

 

Tabel schalen/verplaatsen

 

Tabel bijsnijden

 

Tabel roteren

 1

Tabeltekst roteren (in cel)

 1

Studio Webdesign 4 Pro 111

HTML-

tabellen

Aangepaste

tabellen

Gegevens sorteren

 

Een lijn- en vulkleur instellen

 

Een kleur- of bitmapverloop instellen

 

HTML-compatibele opmaakproelen gebruiken

 

Transparantie instellen

 1

Een randstijl instellen

 1

Tabel vervormen

 1

2D/3D-ltereecten toepassen

 1

Instant 3D

 1

AutoWissen/AutoVullen/AutoOpmaak

 

Celtekst bewerken met Studio Write

 

Celtekst weergeven in Sitebeheer

 

Excel- en tekstbestanden importeren

 

1 Als u deze voorziening gebruikt, wordt de tabel als aeelding geëxporteerd.

Maar hoe onderscheidt u een HTML-tabel nu van een aangepaste tabel? Dat kunt u gemakke-

lijk aeiden uit de kleur van de formaatgrepen wanneer u de tabel selecteert. HTML-tabellen

hebben donkerblauwe grepen, terwijl aangepaste tabellen grijze grepen hebben.

Zo voegt u een tabel in:

1. Selecteer het gereedschap HTML-tabel toevoegen of Aangepaste tabel toevoegen

in het vervolgmenu met tabelgereedschappen op de werkbalk Standaardobjecten. Klik

vervolgens op de pagina of het plakbord op de positie waar u de tabel wilt invoegen om

een tabel met standaardafmetingen te voegen. Sleep met de muis als u aangepaste afmetin-

gen wilt instellen voor de tabel. Het dialoogvenster invoegen verschijnt, waarin u uit een

aantal vooraf gedenieerde opmaakproelen kunt kiezen.

2. Selecteer het gewenste opmaakproel in de keuzelijst aan de linkerkant. Selecteer [Stan-

daard] als opmaakproel als u een eenvoudige niet-opgemaakte tabel wilt invoegen.

3. Klik op OK.

Merk op dat op de optiebalk boven in het programmavenster automatisch enkele aangepaste

opties voor tabellen verschijnen, waarmee u eenvoudig de vereiste gegevens kunt toevoegen

aan de tabel en ze naar behoee kunt opmaken.

Studio Webdesign behandelt tabeltekst op drie manieren: als getallen, formules of tekst.

* Getallen: u kunt getallen op verschillende manieren opmaken. Lees ‘Een getalnotatie in-

stellen’ in het Help-bestand van het programma voor meer informatie.

* Formules: tekst die met een isgelijkteken (=) begint, wordt altijd als een formule be-

112 Studio Webdesign 4 Pro

schouwd door het programma. Formules kunnen op dezelfde manier worden opgemaakt

als getallen. Lees ‘Formules invoegen’ in het Help-bestand van het programma voor meer

informatie.

* Tekst: alle andere gegevens (tekst die niet met een isgelijkteken begint) worden als gewone

tekst beschouwd door het programma.

TABELLEN BEWERKEN

U kunt een tabel op dezelfde manier selecteren, verplaatsen, schalen, verwijderen en kopiëren

als elk ander object in Studio Webdesign nadat u deze aan uw site hebt toegevoegd. Daarnaast

kunt u ook de celeigenschappen van een tabel wijzigen.

Zo bewerkt u een tabel:

* Klik op het begrenzingskader van het object om de volledige tabel te selecteren. Versleep

vervolgens een van de grepen in de hoeken of langs de randen van het kader om de grootte

van de tabel te wijzigen. Klik op een van de randen van het begrenzingskader en sleep met

de muis terwijl u de linkermuisknop ingedrukt houdt als u de tabel wilt verplaatsen.

* Selecteer de tabel en druk op Delete (of kies Object verwijderen in het menu Bewerken)

als u de tabel wilt verwijderen.

Selecteer een willekeurige cel in de tabel en kies Tabel > Verwijderen > Tabel.

* Gebruik de opdrachten Kopiëren en Plakken in het menu Bewerken als u een kopie wilt

maken van de geselecteerde tabel en de gegevens die deze bevat. Merk op dat u een tabel

alleen kunt kopiëren als er geen gegevens zijn geselecteerd in de tabel. (De invoegpositie

mag zich dus niet in de tekst bevinden.) U kunt de tabel ook selecteren en deze vervolgens

terwijl u de Ctrl-toets ingedrukt houdt naar een andere positie slepen in plaats van de

bovengenoemde opdrachten te gebruiken.

Voor andere bewerkingen moet u de tekst in de tabel of specieke delen van de tabel selecte-

ren. Hierbij kunt u in een cel klikken om de invoegpositie in die cel te plaatsen of een speciek

tekstfragment selecteren door met de muis te slepen. U kunt ook meerdere cellen, rijen of

kolommen selecteren door met de muis te slepen. Hierbij wordt alle tekst in het gedenieerde

gebied geselecteerd. Zodra u een selectie hebt gemaakt, kunt u de tekst in de tabel bewerken

en de structuur en het uiterlijk van de tabel en/of onderdelen ervan wijzigen.

Zo selecteert en bewerkt u tekst in cellen, rijen en kolommen:

* Dubbelklik of klik drie keer na elkaar als u respectievelijk afzonderlijke woorden of een

volledige alinea wilt selecteren in een tabelcel. Sleep een selectiekader met de muis als u

een tekstfragment wilt selecteren in een cel. Lees ‘Tekst rechtstreeks op de pagina bewer-

ken’ in hoofdstuk 4 voor meer informatie.

* Druk op Tab of Shi+Tab (of gebruik de pijltoetsen op het toetsenbord) om respectieve-

lijk naar de volgende of vorige cel te gaan in de tabel.

Studio Webdesign 4 Pro 113

* Om tekst in te voeren, begint u gewoon te typen nadat u de invoegpositie in de gewenste

cel hebt geplaatst. Merk op dat de hoogte van de cellen automatisch wordt aangepast als u

meerdere regels tekst invoert. Druk op Ctrl+Tab als u een tab wilt invoegen in de tekst.

* Om een rij of kolom te selecteren, klikt u op de overeenkomstige rij- of kolomkop aan de

linker- of bovenkant van de tabel. Als u meerdere rijen of kolommen wilt selecteren, sleept

u met de muis over de overeenkomstige rij- of kolomkoppen. U kunt ook eerst een of meer

cellen selecteren in een rij of kolom en vervolgens Tabel > Selecteren > Rij(en) of Tabel >

Selecteren > Kolom(men) kiezen in de menubalk.

* Kies Tabel > Selecteren > Alles in de menubalk of in het snelmenu als u alle tekst (alle

rijen en kolommen) wilt selecteren.

* Gebruik de opdrachten Kopiëren en Plakken in het menu Bewerken als u geselecteer-

de tekst wilt kopiëren (binnen dezelfde tabel of tussen verschillende tabellen), net als bij

frametekst. U kunt ook met de rechtermuisknop op een cel klikken, Kopiëren kiezen in

het snelmenu, vervolgens met de rechtermuisknop op een andere cel klikken en Plakken

kiezen in het snelmenu.

Gebruik de voorziening AutoVullen als u een reeks cellen snel en eenvoudig met de

inhoud van de geselecteerde cel wilt vullen. Klik hiertoe op de greep AutoVullen in de

rechterbenedenhoek van de geselecteerde cel en sleep deze terwijl u de linkermuisknop

ingedrukt houdt naar buiten om een aangrenzende groep cellen te selecteren, ofwel in

dezelfde rij ofwel in dezelfde kolom. Op dezelfde manier kunt u door de greep AutoWis-

sen te verslepen vanuit een lege cel snel en eenvoudig de inhoud van aangrenzende cellen

wissen.

Merk op dat u via kopiëren-en-plakken ook rechtstreeks gegevens uit een Microso Excel-

tabel kunt invoegen in een Webdesign-tabel.

Als u de inhoud van een cel wilt verplaatsen binnen dezelfde tabel, beweegt u met de

muisaanwijzer boven een van de randen van de geselecteerde cel totdat het symbool Ver-

plaatsen verschijnt en sleept u de cel terwijl u de linkermuisknop ingedrukt houdt naar

een andere positie in de tabel.

* Om de teken- en/of alineaopmaak van geselecteerde tekst te wijzigen of er een opmaak-

proel op toe te passen, gebruikt u de overeenkomstige opties op de optiebalk voor tekst

of in het menu Tekst.

* Als u geselecteerde tekst wilt roteren in een aangepaste tabel, klikt u er met de rechter-

muisknop op en kiest u Tabel > Celeigenschappen in het snelmenu. Gebruik vervolgens

de draaischijf op het tabblad Oriëntatie van het dialoogvenster Celeigenschappen om de

gewenste oriëntatie in te stellen voor de tekst, of typ rechtstreeks een waarde in het bijbe-

horende invoervak.

U kunt een of meer rijen of kolommen in de tabel of de volledige tabel sorteren. Klik

hiertoe op de knop Sorteren op de optiebalk. Raadpleeg het Help-bestand voor meer in-

formatie.

* Merk op dat u ook een aangepaste lijnkleur/-stijl of een kleur- of bitmapverloop kunt

instellen voor de afzonderlijke cellen in een tabel, zowel bij aangepaste tabellen als HTML-

tabellen.

114 Studio Webdesign 4 Pro

* Klik op Werkbladfuncties op de optiebalk om de werkbalk Tabel weer te geven als u een

aangepaste getalnotatie wilt instellen voor cellen en/of formules wilt invoegen. Raadpleeg

het Help-bestand van het programma voor meer informatie.

Zo wijzigt u de structuur en het uiterlijk van een tabel:

* Om een specieke cel in de tabel te selecteren, klikt u op de rand van de desbetreende

cel. Als u meerdere cellen wilt selecteren, klikt u in één cel sleept u de muis terwijl u de

linkermuisknop ingedrukt houdt over de andere cellen die u wilt selecteren.

* Plaats de muisaanwijzer boven de scheidingslijn tussen de rij- en kolomkoppen aan de

linker- en bovenkant van de tabel (let erop dat deze de volgende vorm krijgt: ) en sleep

met de muis terwijl u de linkermuisknop ingedrukt houdt als u de breedte van de rijen en

kolommen wilt wijzigen. Merk op dat u de hoogte van een rij onaankelijk van de hoe-

veelheid tekst in die rij kunt aanpassen. Gebruik de opdrachten Kolombreedte instellen

en Rijhoogte instellen in het menu Ta be l als u een absolute kolombreedte of rijhoogte

wilt instellen. Om de breedte/hoogte van afzonderlijke rijen/kolommen in te stellen, klikt

u op de knop voor de desbetreende rij-/kolomkop en kiest u Hoogte instellen of

Breedte instellen in het vervolgmenu. Merk op dat u de breedte van afzonderlijke kolom-

men kunt aanpassen zonder dat dit een invloed hee op de breedte van de volledige tabel

door de desbetreende kolomkop te verslepen terwijl u de Ctrl-toets ingedrukt houdt.

* Als u de rijen of kolommen in een tabel even hoog of even breed wilt maken, selecteert u

de volledige tabel (of de rijen of kolommen die u even hoog/breed wilt maken) en kiest u

Rijen gelijkmatig verdelen of Kolommen gelijkmatig verdelen in het menu Tab el . Merk

op dat mogelijk regelterugloop wordt toegepast op de inhoud van cellen om te voorkomen

dat de breedte van de tabel wijzigt wanneer u kolommen gelijkmatig verdeelt.

Als u de rijen in een specieke kolom even hoog wilt maken, klikt u op de knop

voor de

desbetreende kolom en kiest u Rijen gelijkmatig verdelen in het vervolgmenu. Analoog

hieraan kunt u door het vervolgmenu voor een rijkop te openen en Kolommen gelijkma-

tig verdelen te kiezen alle kolommen in een specieke rij even breed maken.

* Selecteer een of meer kolommen en kies Kolom(men) autom. aan celinhoud aanpassen

in het menu Ta be l (of gebruik de overeenkomstige opdracht in het snelmenu) als u de

breedte van de geselecteerde kolom(men) aan de celinhoud met de grootste breedte wilt

aanpassen. Voor rijen is een soortgelijke optie beschikbaar.

Als u de breedte van afzonderlijke rijen of kolommen aan de celinhoud wilt aanpassen,

klikt u op de knop

voor de desbetreende rij- of kolomkop en kiest u Rij autom. aan

celinhoud aanpassen of Kolom autom. aan celinhoud aanpassen in het vervolgmenu.

* Als u meerdere rijen of kolommen uit de tabel wilt verwijderen, selecteert u die rijen of

kolommen (of een of meer cellen in die rijen/kolommen) en kiest u Tabel > Verwijderen

> Rij(en) of Tabel > Verwijderen > Kolom(men). Om een specieke rij of kolom te ver-

Studio Webdesign 4 Pro 115

wijderen, klikt u op de knop voor de desbetreende rij- of kolomkop en kiest u Verwij-

deren.

* Als u kolommen wilt toevoegen of verwijderen in een bestaande tabel, klikt u op de ko-

lomkop rechts van de laatste kolom en sleept u de muis terwijl u de linkermuisknop in-

gedrukt houdt respectievelijk naar rechts of naar links. De tabel wordt meteen bijgewerkt

terwijl u sleept met de muis. Om rijen toe te voegen of te verwijderen, sleept u de rijkop

onder de laatste rij omhoog of omlaag.

U kunt ook eerst een of meer cellen selecteren en vervolgens Tabel > Invoegen >

Kolom(men) of Tabel > Invoegen > Rij(en) kiezen in de menubalk. In het dialoogven-

ster dat daarop verschijnt, kunt u instellen hoeveel kolommen of rijen u aan de tabel wilt

toevoegen en of u die voor of na de geselecteerde cellen wilt invoegen.

* Selecteer een cellenbereik en kies Tabel > Cellen samenvoegen (of gebruik de gelijkna-

mige opdracht in het snelmenu) als u de geselecteerde cellen wilt samenvoegen, zodat ze

zich over meerdere rijen of kolommen uitstrekken. Let erop dat in de samengevoegde cel

alleen de tekst wordt weergegeven die oorspronkelijk zichtbaar was in de linkerbovenhoek

van het bereik. De oorspronkelijke cellen en de inhoud ervan blijven echter behouden. Als

u de samengevoegde cel weer in afzonderlijke cellen wilt splitsen, selecteert u deze en kiest

u Tabel > Cellen splitsen (of gebruikt u de gelijknamige opdracht in het snelmenu).

Als u alle cellen in een specieke rij of kolom wilt samenvoegen, klikt u op de knop

voor

de desbetreende rij-/kolomkop en kiest u Cellen samenvoegen. Kies Cellen splitsen in

hetzelfde vervolgmenu als u de samengevoegde cellen weer wilt splitsen.

Als u een cel (met inbegrip van de tekst, opmaak, ingestelde randstijl en celkleur) naar

een andere cel in dezelfde tabel wilt kopiëren, selecteert u die cel, beweegt u de muis-

aanwijzer terwijl u de Ctrl-toets ingedrukt houdt boven de rand van de geselecteerde cel

totdat het symbool Kopiëren verschijnt en sleept u de cel met ingedrukte linkermuisknop

naar de gewenste positie in de tabel.

* Om een aangepaste achtergrondkleur in te stellen voor de volledige tabel, beweegt u de

muisaanwijzer boven de linkerbovenhoek van de tabel totdat het symbool

verschijnt.

Klik vervolgens één keer om de volledige tabel te selecteren en kies de gewenste vulkleur

op het tabblad Kleur of Stalen. (Lees ‘Een kleuren instellen’ in hoofdstuk 10 voor meer

informatie.)

* Als u voor specieke cellen in de tabel een andere achtergrondkleur wilt instellen, selec-

teert u die cellen en gebruikt u opnieuw het tabblad Kleur of Stalen.

116 Studio Webdesign 4 Pro

De voorziening AutoOpmaak gebruiken

Zo past u een vooraf gedeﬁnieerd opmaakproﬁel toe om het uiterlijk van een

tabel aan te passen:

* Kies AutoOpmaak in het menu Tab el (of Tabel > AutoOpmaak in het snelmenu) om

het dialoogvenster AutoOpmaak te openen. In dit dialoogvenster kunt u uit verschillende

voorbeeldtabellen kiezen, die zich duidelijk van elkaar onderscheiden op het gebied van

lijnstijl (voor de celranden), vulkleur (voor afzonderlijke cellen en de volledige tabel), te-

kenopmaak (vet, cursief, enzovoort), uitlijning (links, gecentreerd, enzovoort) en HTML-

ondersteuning.

* Selecteer een willekeurige voorbeeldtabel en stel vervolgens via de selectievakjes onder

in het dialoogvenster de opmaakkenmerken in die u op uw eigen tabel wilt toepassen. U

kunt de opmaakkenmerken van de voorbeeldtabellen naar behoee met elkaar combine-

ren. Zo kunt u bijvoorbeeld (in twee stappen) de kleur van de ene voorbeeldtabel en het

lettertype van een andere voorbeeldtabel instellen voor uw tabel.

* Selecteer [Standaard] als opmaakproel als u opnieuw de standaardopmaak wilt instellen

voor de tabel.

Celeigenschappen instellen

Zo past u ‘handmatig’ het uiterlijk van een of meer cellen aan:

1. Selecteer de cellen, rijen of kolommen die u wilt opmaken.

2. Klik op

Celeigenschappen op de optiebalk.

Klik op de knop

voor een rij- of kolomkop en kies Celeigenschappen in het vervolg-

menu als u alleen een specieke rij of kolom in de tabel wilt opmaken.

3. Gebruik de tabbladen Rand, Vulkleur/verloop, Transparantie (alleen beschikbaar voor

aangepaste tabellen), Marges en/of Oriëntatie in het dialoogvenster om de gewenste op-

maak in te stellen en klik vervolgens op OK.

Studio Webdesign 4 Pro 117

EEN KALENDER INVOEGEN

Met de wizard Kalender kunt u overzichtelijke maandkalenders ontwerpen voor uw webpa-

gina’s.

De kalenders worden als op tekst gebaseerde tabellen gegenereerd die u naar behoee kunt

schalen, zodat u de standaard tekstgereedschappen kunt gebruiken om de tekst te bewerken.

Ook de overige eigenschappen van een kalender komen grotendeels overeen met die van

tabellen, zodat u beide soorten objecten op dezelfde manier kunt bewerken (zie ‘Tabellen

bewerken’ eerder in dit hoofdstuk).

U kunt allerlei opties instellen voor uw kalender tijdens het uitvoeren van de wizard, zoals de

maand waarvoor u een kalender wilt genereren, het opmaakproel en de kalenderstijl die u

wilt gebruiken, of u al dan niet ruimte wilt voorzien om notities toe te voegen aan de kalender,

enzovoort. Desgewenst kunt u zelfs ociële feestdagen en/of persoonlijke gebeurtenissen aan

de kalender toevoegen, die u eenvoudig kunt beheren vanuit het dialoogvenster Kalenderge-

beurtenissen beheren.

Via de optie Kalender bewerken op de optiebalk kunt u eigenschappen die speciek zijn voor

kalenders achteraf op elk gewenst moment aanpassen.

U kunt kalendergegevens tot slot ook eenvoudig bijwerken doorheen de gehele site – op de-

zelfde manier als u het uur instelt bij sommige wekkers. Dat is bijvoorbeeld handig als u

op een webpagina twaalf maandkalenders hebt gemaakt voor een bepaald jaar en achteraf

maandkalenders voor een ander jaar wilt weergeven. In dat geval hoe u slechts het dialoog-

venster Persoonlijke gegevens instellen te openen en het gewenste jaartal te kiezen voor uw

jaaroverzicht. Zo hoe u het jaartal van de kalenders slechts op één plaats aan te passen.

Zo voegt u een kalender toe:

1. Klik op Kalender invoegen in het vervolgmenu met tabelgereedschappen op de werk-

balk Standaardobjecten.

2. Klik op de pagina als u een kalender met standaardafmetingen wilt invoegen. Sleep met de

muis als u aangepaste afmetingen wilt instellen voor de kalender.

3. Doorloop de verschillende dialoogvensters van de wizard Kalender om de gewenste in-

stellingen te kiezen voor uw kalender, zoals het jaar en de maand waarvoor u een kalender

wilt genereren, de kalenderstijl die u wilt gebruiken, de dag waarop u de weken wilt la-

ten beginnen, of u ruimte wilt voorzien om notities toe te voegen aan de kalender, enzo-

voort.

Als u ociële feestdagen wilt weergeven op de kalender, activeert u het selectievakje Ociële

feestdagen toevoegen in de wizard en kiest u een land in de bijbehorende vervolgkeuze-

lijst. Als u ook persoonlijke gebeurtenissen wilt toevoegen, activeert u tevens het selectie-

vakje Persoonlijke gebeurtenissen toevoegen.

4. Klik in het laatste dialoogvenster van de wizard op Voltooien om de wizard te beëindi-

gen.

Zo wijzigt u de eigenschappen van een kalender:

1. Selecteer de kalender en klik op Kalender bewerken op de optiebalk.

118 Studio Webdesign 4 Pro

Klik met de rechtermuisknop op de kalender en kies Tabel > Kalender bewerken in het

snelmenu.

2. Kies de gewenste instellingen op de verschillende tabbladen van het dialoogvenster en klik

tot slot op OK.

Via het submenu Tabe l in het snelmenu voor een kalender kunt u snel en eenvoudig rijen

en kolommen toevoegen of verwijderen in een bestaande kalender, de rijhoogte en kolom-

breedte automatisch aan de celinhoud aanpassen, enzovoort. Zorg er echter voor dat dit de

opmaak van de tabel niet verstoort!

Zo werkt u kalendergegevens doorheen de gehele site bij:

1. Kies Persoonlijke gegevens instellen in het menu Extra.

2. Klik op de tab Kalenders en stel via het kringveld Jaar het gewenste jaartal in voor al uw

kalenders.

3. Activeer het selectievakje Ociële feestdagen tonen en/of Persoonlijke gebeurtenissen

tonen in het groepsvak Gebeurtenissen als u op alle kalenders de feestdagen en gebeur-

tenissen wilt weergeven die u eerder hebt ingesteld via het dialoogvenster Kalenderge-

beurtenissen beheren. (Klik op de knop Gebeurtenissen als u de lijst met persoonlijke

gebeurtenissen wilt bewerken.)

Ofﬁciële feestdagen toevoegen

Bij het uitvoeren van de wizard Kalender kunt u instellen of u ook de ociële feestdagen van

uw land aan de kalender wilt toevoegen. U kunt achteraf echter op elk gewenst moment de

ociële feestdagen van een ander land weergeven.

Denk eraan dat ociële feestdagen alleen worden weergegeven als het selec-

tievakje Ociële feestdagen toevoegen is ingeschakeld in het dialoogvenster

Eigenschappen van kalender.

Zo geeft u de feestdagen van een ander land weer op een kalender:

1. Selecteer de kalender.

2. Klik op Kalender bewerken op de optiebalk.

3. Selecteer in de vervolgkeuzelijst Land op het tabblad Gebeurtenissen het land waarvan u

de ociële feestdagen wilt weergeven.

Persoonlijke gebeurtenissen toevoegen

Behalve ociële feestdagen (zoals Pasen en Kerstmis) kunt u ook allerlei persoonlijke of za-

kelijke gebeurtenissen (verjaardagen, afspraken, enzovoort) aan een kalender toevoegen. Om

dergelijke gebeurtenissen in te stellen, klikt u op de knop Kalendergebeurtenissen beheren

op de optiebalk voor een geselecteerde kalender, of kiest u Extra > Kalendergebeurtenissen

Studio Webdesign 4 Pro 119

beheren in de menubalk. De ingestelde gebeurtenissen worden automatisch onder de opge-

geven kalenderdatum weergegeven nadat u ze hebt toegevoegd.

Zo stelt u een persoonlijke gebeurtenis in:

1. Selecteer een willekeurige kalender in uw site.

2. Klik op Kalendergebeurtenissen beheren op de optiebalk.

3. (Facultatief) Activeer het selectievakje Gebeurtenissen volgens datum tonen als u de

klassieke kalenderindeling wilt gebruiken om gebeurtenissen toe te voegen, te bewerken

of te verwijderen.

4. Klik op

Nieuwe gebeurtenis.

5. Gebruik de pijlknoppen of klik op Bladeren in het dialoogvenster Kalendergebeurtenis

om een datum te selecteren. U kunt ook handmatig een datum invoeren.

6. Typ in het vak Gebeurtenis een beschrijving van de gebeurtenis. De ingevoerde tekst

wordt automatisch onder de geselecteerde datum weergegeven in uw kalender.

7. Activeer het selectievakje Jaarlijks terugkerende gebeurtenis als het om een verjaardag

of een andere jaarlijks terugkerende gebeurtenis gaat.

8. Klik op OK.

9. Klik op Opslaan nadat u de gewenste gebeurtenissen hebt ingesteld.

Gebruik de opties

Gebeurtenis bewerken of Gebeurtenis verwijderen als u een be-

staande gebeurtenis wilt bewerken of verwijderen.

Denk eraan dat persoonlijke gebeurtenissen alleen worden weergegeven op

een kalender als het selectievakje Persoonlijke gebeurtenissen toevoegen is

ingeschakeld in het dialoogvenster Eigenschappen van kalender.

120 Studio Webdesign 4 Pro

7 objecten beWerken oP

de Pagina

EEN OBJECT SELECTEREN

Voordat u een object kunt bewerken, moet u het selecteren. Daartoe kunt u een van de vol-

gende gereedschappen gebruiken in de gereedschapset:

Selectiegereedschap

Met dit gereedschap kunt u objecten selecteren, verplaatsen, kopiëren, schalen of ro-

teren.

Gereedschap Roteren

Hiermee kunt u een object rond zijn middelpunt roteren. Hiertoe versleept u een van

de grepen van het geselecteerde object. U kunt objecten ook verplaatsen en kopiëren

met dit gereedschap. Lees Objecten roteren voor meer informatie.

Gereedschappen Regelmatig bijsnijden en Onregelmatig bijsnijden

Hiermee kunt u objecten bijsnijden. Selecteer het object hiervoor en sleep vervolgens

een van de grepen naar binnen toe. U kunt objecten ook verplaatsen en kopiëren met

deze gereedschappen. Lees ‘Objecten bijsnijden’ verderop in dit hoofdstuk voor meer

informatie.

Zo selecteert u een object:

* Klik op het object met een van de bovengenoemde gereedschappen. Er verschijnt een grijs

begrenzingskader (ook wel het selectiekader genoemd) rond het object, met ‘grepen’ die

de hoeken en randen van het object aangeven.

* Als objecten elkaar overlappen, klikt u verschillende keren terwijl u de Alt-toets ingedrukt

houdt totdat het gewenste object is geselecteerd.

Zo selecteert u een tekstobject met het selectiegereedschap:

* Als u op een tekstframe klikt met het selectiegereedschap, wordt het frame geselecteerd

en verschijnt er tegelijkertijd een knipperende cursor in de tekst (ook wel de invoegpositie

genoemd). In deze modus kunt u de tekst bewerken.

* Dubbelklik om een woord te selecteren. Klik drie keer na elkaar als u een volledige alinea

wilt selecteren.

* Druk op Delete als u de tekens na de invoegpositie wilt verwijderen. Als u het tekstframe

zelf wilt verwijderen, kiest u Object verwijderen in het menu Bewerken.

Studio Webdesign 4 Pro 121

Als u alleen het frame wilt selecteren (bijvoorbeeld om de marges en kolomhulplijnen aan te

passen), klikt u op het selectiekader rond het frame.

Als u op een object klikt dat deel uitmaakt van een groep, wordt automatisch het volledige

groepsobject geselecteerd. Over het algemeen hee elke bewerking die u uitvoert op een ge-

selecteerd groepsobject een invloed op elk lid van de groep. U kunt echter ook afzonderlijke

objecten selecteren en bewerken in een groep.

Zo selecteert u een speciﬁek object in een groep:

* Houd de Ctrl-toets ingedrukt terwijl u op het object klikt.

Over de blauwe balken in de linialen

Als u op een object klikt om het te selecteren, verschijnen er blauwe balken in de horizontale

en verticale liniaal. Deze balken geven de linker-, rechter-, boven- en onderrand van het ge-

selecteerde object aan.

Lees ‘De lay-outhulpmiddelen gebruiken’ in hoofdstuk 3 voor meer informatie over het ge-

bruik van de linialen.

MEERDERE OBJECTEN SELECTEREN

Door meerdere objecten tegelijk te selecteren (een meervoudige selectie te maken), kunt u:

* al deze objecten in één handeling verplaatsen of schalen;

* de geselecteerde objecten groeperen, zodat u ze in hun geheel kunt bewerken. Hierbij

kunt u het gegroepeerde object op elk gewenst moment weer in afzonderlijke objecten

splitsen. Lees ‘Objecten groeperen’ verderop in dit hoofdstuk voor meer informatie.

Zo selecteert u meerdere objecten:

* Klik op een leeg gedeelte van de pagina en sleep een selectiekader rond de objecten die

u wilt selecteren. Herhaal deze handeling terwijl u de Shi-toets ingedrukt houdt als u

achteraf objecten aan de selectie wilt toevoegen.

Klik de objecten die u wilt selecteren een voor een aan terwijl u de Shi-toets ingedrukt

houdt.

122 Studio Webdesign 4 Pro

Zo voegt u objecten toe aan een meervoudige selectie of verwijdert u objecten

uit de selectie:

* Klik de objecten die u aan de selectie wilt toevoegen of eruit wilt verwijderen een voor een

aan terwijl u de Shi-toets ingedrukt houdt.

Zo heft u een meervoudige selectie op:

* Klik op een leeg gedeelte van de pagina.

Zo selecteert u alle objecten op een pagina (of stramienpagina):

* Kies Alles selecteren in het menu Bewerken of druk op Ctrl+A.

Zo selecteert u alle objecten van hetzelfde type op een pagina (of stramienpa-

gina):

* Dubbelklik terwijl u de Ctrl-toets ingedrukt houdt op één object van dat type.

Klik op een object om het te selecteren en kies vervolgens Soortgelijke objecten selecte-

ren in het menu Bewerken.

OBJECTEN KOPIËREN, PLAKKEN EN DUPLICEREN

U hoe niet altijd een omweg te maken langs het Klembord als u objecten wilt kopiëren

en plakken. U kunt hiertoe ook gebruikmaken van slepen-en-neerzetten. Daarnaast kunt u

objecten ook dupliceren. Studio Webdesign biedt u zelfs de mogelijkheid de opmaak van het

ene op het andere object over te dragen. Hierbij kunt u naar behoee alle of alleen specieke

opmaakkenmerken plakken.

Zo kopieert u een of meer objecten naar het Klembord van Windows:

* Klik met de rechtermuisknop op de objecten die u wilt kopiëren en kies Kopiëren in het

snelmenu.

Selecteer de gewenste objecten en kies Kopiëren in het menu Bewerken, druk op Ctrl+C of

klik op

Kopiëren op de standaardwerkbalk.

In andere Windows-toepassingen kunt u objecten gewoonlijk kopiëren en plakken via het

Klembord. Ook Studio Webdesign ondersteunt deze voorziening.

Zo voegt u een object in vanaf het Klembord:

* Klik met de rechtermuisknop op de pagina en kies Plakken in het snelmenu.

Druk op Ctrl+V, kies Bewerken > Plakken of klik op

Plakken op de standaardwerkbalk.

Studio Webdesign 4 Pro 123

Standaard wordt een object op de huidige invoegpositie of (bij een afzonderlijk object) in het

midden van de pagina ingevoegd als u de opdracht Plakken gebruikt. Als u een afzonderlijk

object op dezelfde positie wilt invoegen als het gekopieerde object, gebruikt u de opdracht

Lokaal plakken of drukt u op Ctrl+Alt+V.

Zo plakt u een object in een speciﬁeke indeling vanaf het Klembord:

* Kies Plakken speciaal in het menu Bewerken.

Zo maakt u een kopie van een object:

1. Selecteer het object en druk op de Ctrl-toets.

2. Sleep het selectiekader rond het object terwijl u de Ctrl-toets ingedrukt houdt naar een

nieuwe positie op de pagina. Zodra u begint te slepen, mag u de Ctrl-toets loslaten.

3. Houd de Shi-toets ingedrukt tijdens het slepen als u het geselecteerde object alleen in

horizontale of verticale richting wilt verplaatsen.

Objecten dupliceren

Bij het kopiëren van een object (zie hiervoor) wordt er telkens maar één kopie gemaakt van

dat object. Met de opdracht Dupliceren kunt u in één handeling meerdere kopieën maken

van een object. Hierbij kunt u nauwkeurig de positie van de afzonderlijke kopieën bepalen

(lineair of in de vorm van een raster). Bovendien kunt u een of meer transformaties uitvoeren

en zo een array van geroteerde en/of geschaalde objecten maken. Met deze voorziening kunt

u eenvoudig een patroon creëren dat u als achtergrond kunt gebruiken, of perfect uitgelijnde

montages maken van aeeldingen of objecten.

Zo dupliceert u een object:

1. Selecteer het object dat u wilt dupliceren en kies Dupliceren in het menu Bewerken. Het

dialoogvenster Dupliceren verschijnt. Let erop dat in het voorbeeld aan de rechterkant

wordt getoond hoe de objecten zullen worden gedupliceerd als u de huidige instellingen

behoudt. Aan de hand van dit voorbeeld kunt u eenvoudig het eect van uw instellingen

controleren.

2. Activeer het keuzerondje Lineair als u de kopieën in een rechte lijn wilt ordenen. Als u

de kopieën in horizontale en verticale richting wilt ordenen, activeert u het keuzerondje

Raster maken.

3. Stel via de kringvelden in het groepsvak Aantal kopieën de lengte van de lijn (het aantal

kopieën dat u wilt maken, inclusief het origineel) of de rastergrootte in. Merk op dat u de

optie Lengte van lijn kunt gebruiken om een oneven aantal kopieën in te stellen als u een

raster maakt.

124 Studio Webdesign 4 Pro

4. Stel in het groepsvak Spatiëring de gewenste afstand in tussen de afzonderlijke objecten.

U hebt hierbij de keuze uit Oset (de onderlinge afstand tussen de linkerbovenhoeken

van de objecten) of Afstand (de afstand tussen de rechterbenedenhoeken en linkerboven-

hoeken). U kunt de objecten in horizontale en/of verticale richting verschuiven en/of ze

naar behoee roteren. Activeer het selectievakje Absoluut als u een specieke horizontale

of verticale afstand wilt instellen. Schakel dit selectievakje uit als u een percentage van de

afmetingen van het oorspronkelijke object als onderlinge afstand wilt instellen.

5. Klik op OK.

Het resultaat is een meervoudige selectie. Klik op de knop

Groeperen onder de selectie als

u de verschillende objecten wilt groeperen, zodat u ze in hun geheel kunt bewerken.

De opmaak van een object kopiëren en plakken

Met de opdracht Opmaak plakken kunt u de opmaak van een object dat u eerder naar het

Klembord hebt gekopieerd eenvoudig op een ander geselecteerd object toepassen. Als u de

opdracht Opmaak plakken speciaal gebruikt, verschijnt er een dialoogvenster waarin u de

opmaakkenmerken kunt selecteren die u op het doelobject wilt overdragen. Raadpleeg het

Help-bestand van het programma voor meer informatie over deze voorziening.

Zo past u de opmaak van het ene object op een ander object toe:

1. Kopieer het bronobject naar het Klembord.

2. Selecteer het object waarop u de gekopieerde opmaak wilt toepassen en kies Bewerken >

Opmaak plakken of druk op Ctrl+Shi+V.

Merk op dat op het doelobject alleen die opmaakkenmerken en instellingen van het bron-

object worden toegepast die momenteel zijn ingesteld in het dialoogvenster Kenmerken van

objectstijl wijzigen.

OBJECTEN VERPLAATSEN

U kunt objecten snel en eenvoudig verplaatsen in Studio Webdesign.

Zo verplaatst u een object (met inbegrip van een meervoudige selectie):

* Klik in het selectiekader rond het object (niet op een van de grepen) en sleep het terwijl u

de linkermuisknop ingedrukt houdt naar een andere positie.

Klik op een van de randen van het selectiekader en sleep het naar een andere positie.

De weergave wordt automatisch opnieuw gecentreerd als u objecten naar de randen van het

scherm sleept.

Zo verplaatst u een object alleen in horizontale of verticale richting:

* Selecteer het object en gebruik de pijltoetsen op het toetsenbord om het stapsgewijs naar

de gewenste positie te verplaatsen.

Studio Webdesign 4 Pro 125

Druk op de Shi-toets en houd deze toets ingedrukt zodra u het object begint te versle-

pen.

Laat de Shi-toets pas los nadat u de linkermuisknop hebt losgelaten.

Gebruik het tabblad Transformeren als u de positie van een object nauwkeurig

wilt instellen. Hierover leest u meer in het Help-bestand van het programma.

OBJECTEN SCHALEN

U kunt objecten zoals lijnen, vormen, artistieke tekst, frames en tabellen op verschillende

manieren schalen in Studio Webdesign. De eenvoudigste manier is via klikken-en-slepen. Let

op de contextaankelijke tips en sneltoetsen in de statusbalk als u deze methode gebruikt om

objecten te schalen! Als u objecten nauwkeurig wilt schalen, gebruikt u het tabblad Transfor-

meren.

Kies Schikken > Objecten schalen als u twee of meer geselecteerde objecten

even hoog of even breed wilt maken als het object dat u het laatst hebt geselec-

teerd.

Zo wijzigt u de grootte van een object (standaardmethode):

1. Selecteer het desbetreende object.

2. Klik op een van de grepen rond het object en sleep deze terwijl u de linkermuisknop inge-

drukt houdt naar een andere positie.

Versleep een van de grepen langs de randen van het selectiekader als u het object in één

richting wilt schalen (door de desbetreende rand te verplaatsen). Als u het object in twee

richtingen wilt schalen (door twee randen te verplaatsen), versleept u een van de grepen in

de hoeken van het selectiekader. U kunt objecten overigens ook proportioneel schalen als u

wilt voorkomen dat de oorspronkelijke breedte-/hoogteverhouding wijzigt. Onthoud in dit

verband dat aeeldingen zich op dit gebied doorgaans anders gedragen dan lijnen, vormen

en tekstobjecten.

Merk op dat de tekengrootte van frame- en tabeltekst ongewijzigd blij wanneer u de ‘contai-

ner’ (het tekstframe of de tabel) schaalt.

Zo kunt u een object vrij schalen:

* Versleep een van de grepen in de hoeken van het selectiekader rond het object (of de greep

aan het uiteinde van de lijn als u een lijn hebt geselecteerd).

126 Studio Webdesign 4 Pro

Zo schaalt u een vorm, frame- of tabelobject proportioneel:

* Houd de Shi-toets ingedrukt terwijl u een van de grepen in de hoeken van het selectie-

kader (of de greep aan het uiteinde van de lijn) versleept.

Afbeeldingen schalen

Aeeldingen worden normaal gesproken automatisch proportioneel geschaald, omdat u bij

het schalen van een aeelding doorgaans de oorspronkelijke breedte-/hoogteverhouding wilt

behouden.

Zo schaalt u een afbeelding proportioneel:

* Versleep een van de grepen in de hoeken van het selectiekader rond de aeelding.

Zo schaalt u een afbeelding niet-proportioneel:

* Houd de Shi-toets ingedrukt terwijl u een van de grepen in de hoeken van het selectie-

kader versleept.

Gegroepeerde objecten en meervoudige selecties schalen

U kunt ook een gegroepeerd object of een meervoudige selectie schalen. In dat geval worden

automatisch de afmetingen van alle objecten in de groep of de meervoudige selectie aange-

past.

Gebruik het tabblad Transformeren als u een object nauwkeurig wilt schalen.

Hierover leest u meer in het Help-bestand van het programma.

OBJECTEN ROTEREN

U kunt afzonderlijke objecten (met inbegrip van aeeldingen, tekstframes en gegroepeerde

objecten) naar behoee roteren. Een meervoudige selectie kan echter niet worden geroteerd.

Zo roteert u een object:

1. Selecteer het gereedschap Roteren in de gereedschapset aan de linkerkant van de wer-

komgeving.

2. Klik op het object om het te selecteren. Beweeg de muisaanwijzer vervolgens over een van

de grepen totdat deze de volgende vorm krijgt:

Studio Webdesign 4 Pro 127

3. Sleep de muis terwijl u de linkermuisknop ingedrukt houdt in de richting waarin u het ob-

ject wilt roteren. Laat de muisknop vervolgens los. (Houd de Shi-toets ingedrukt terwijl

u sleept als u het object in stappen van 15 graden wilt roteren.)

Zo herstelt u de oorspronkelijke oriëntatie van een object:

* Dubbelklik op het object.

* Dubbelklik nog een keer om het object weer te roteren.

Zo roteert u een object negentig graden naar links of naar rechts:

* Selecteer het object en kies Naar links roteren of Naar rechts roteren in het menu

Schikken. U kunt ook met de rechtermuisknop op het object klikken en de gelijknamige

opdrachten in het submenu Spiegelen/roteren gebruiken.

Zo voorkomt u dat een object per ongeluk wordt geroteerd:

* Klik met de rechtermuisknop op het object en kies Schikken > Objecten vergrendelen in

het snelmenu.

OBJECTEN BIJSNIJDEN

Door objecten bij te snijden, kunt u specieke delen ervan verbergen, bijvoorbeeld om de

compositie van een foto te verbeteren of een of ander speciaal eect te creëren. Het onderlig-

gende object blij hierbij intact. De gereedschapset bevat twee gereedschappen om objecten

bij te snijden Regelmatig bijsnijden en Onregelmatig bijsnijden. Met het eerstgenoemde

gereedschap kunt u een object bijsnijden zonder dat de oorspronkelijke vierkante (of recht-

hoekige) verhouding ervan wijzigt. Met het andere gereedschap kunt u een object bijsnijden

door de oorspronkelijke contouren ervan te vervormen.

Merk op dat u in plaats van de bovengenoemde twee gereedschappen ook de opdracht Bij-

snijden tot vorm kunt gebruiken om objecten bij te snijden. Met deze opdracht kunt u een

object tot de contouren van een ander object bijsnijden.

Met de opdracht Curven samenvoegen ten slotte kunt u een speciaal type samengesteld ob-

ject maken dat een of meer ‘gaten’ bevat op de posities waar de vulkleuren van de afzon-

derlijke objecten elkaar overlappen. Deze voorziening is bijvoorbeeld handig als u een soort

stencileect wilt verkrijgen.

Zo snijdt u een object bij zonder dat de oorspronkelijke verhouding verandert:

1. Klik op het object of gegroepeerde object om het te selecteren.

2. Selecteer het gereedschap

Regelmatig bijsnijden in het vervolgmenu Eecten bewer-

ken in de gereedschapset.

3. Sleep een van de grepen in de hoeken of langs de randen van het selectiekader naar bin-

nen. Let erop dat de breedte-/hoogteverhouding van het oorspronkelijke (achterliggende)

object hierbij behouden blij. Houd de Shi-toets ingedrukt terwijl u sleept als u het

object vrij (niet-proportioneel) wilt bijsnijden.

128 Studio Webdesign 4 Pro

Zo snijdt u een object bij door de contouren ervan aan te passen:

1. Selecteer het object of gegroepeerde object.

2. Selecteer het gereedschap

Onregelmatig bijsnijden in de gereedschapset. Let erop dat

er automatisch verschillende nodes en segmenten verschijnen wanneer u dit gereedschap

selecteert. Deze nodes en segmenten deniëren de contouren om het object bij te snij-

den.

3. Ga als volgt te werk om de contouren van het object te vervormen:

* Beweeg met de muisaanwijzer boven een node (controlepunt) totdat deze de volgende

vorm krijgt:

. Klik vervolgens met de linkermuisknop en sleep de node terwijl u de

linkermuisknop ingedrukt houdt naar een andere positie.

* U kunt ook afzonderlijke lijnsegmenten verplaatsen. Beweeg de muisaanwijzer hiertoe

boven een lijnsegment tussen twee nodes totdat het symbool

verschijnt en sleep

dit segment vervolgens terwijl u de linkermuisknop ingedrukt houdt naar een andere

positie.

Klik op Curven optimaliseren of Alle lijnen recht maken op de optiebalk om

contouren die uit rechte lijnen bestaan in gebogen lijnen om te zetten en omgekeerd.

* Als u de buiging van een segment wilt aanpassen, versleept u de controlegrepen van de

aangrenzende nodes.

* Dubbelklik op een willekeurig lijnsegment als u op die positie een node wilt toevoegen.

Dubbelklik op een bestaande node als u deze wilt verwijderen.

* Als u een object relatief wilt verplaatsen ten opzichte van zijn contouren, plaatst u de

muisaanwijzer in het midden van het object (let erop dat deze de vorm krijgt van een

handje) en sleept u met de muis terwijl u de linkermuisknop ingedrukt houdt.

Zo bepaalt u welk gedeelte van een bijgesneden object zichtbaar is binnen de

gedeﬁnieerde contouren:

* Plaats de muisaanwijzer in het midden van het geselecteerde object (let erop dat deze de

vorm krijgt van een handje) en sleep terwijl u de linkermuisknop ingedrukt houdt.

Zo heft u het bijsnijden op (zodat het object weer volledig zichtbaar is):

* Klik op Bijsnijden opheen op de optiebalk.

Objecten tot de vorm van een ander object bijsnijden

Om de opdracht Bijsnijden tot vorm te kunnen gebruiken, moet u welgeteld twee objecten

selecteren. Hierbij mag een van beide objecten (of beide objecten) een gegroepeerd object

zijn. Het onderliggende object (het object dat zich achter het andere object bevindt) wordt

automatisch tot de contouren van het bovenliggende object bijgesneden, waardoor een vorm

ontstaat die overeenkomt met de vorm van het gebied waar beide objecten elkaar overlappen.

Merk op dat u een object waarop een mesh-transformatie is toegepast niet kunt bijsnijden,

maar dat u dergelijke objecten wel kunt gebruiken om andere objecten bij te snijden. Gebruik

de opdracht Curven samenvoegen als u de ene vorm als basis wilt gebruiken om een ‘gat’ te

maken in een andere vorm.

Studio Webdesign 4 Pro 129

Zo snijdt u een object tot de vorm van een ander object bij:

1. Plaats het object dat als basisobject fungeert vóór het object dat u wilt bijsnijden. Gebruik

hiertoe de opdrachten in het menu Schikken en/of de overeenkomstige knoppen op de

werkbalk Schikken. In de bovenstaande guur hebben we vóór het tekstframe een Auto-

Vorm geplaatst.

2. Selecteer beide objecten (of groepeer ze) en kies Bijsnijden tot vorm in het menu Extra.

Lijnen en vormen samenvoegen

Met de opdracht Curven samenvoegen kunt u eenvoudig een samengesteld object maken

van twee of meer lijnen of getekende vormen. Ook hier weer wordt het onderliggende object

automatisch tot de contouren van het bovenliggende object bijgesneden (zie de uitleg over de

opdracht Bijsnijden tot vorm). In dit geval ontstaan hierbij echter een of meer ‘gaten’ waar de

afzonderlijke objecten elkaar voorheen overlapten. Zoals bij het groeperen van objecten kunt

u het samengevoegde object achteraf naar behoee opmaken (bijvoorbeeld door er een speci-

eke lijnstijl of vulkleur voor in te stellen) en afzonderlijke nodes en segmenten van het object

bewerken met het selectiegereedschap. Denk er echter aan dat op het samengevoegde object

altijd de lijn- en vuleigenschappen worden toegepast van het object dat zich voorheen op de

voorgrond bevond. U kunt een samengevoegd object achteraf overigens weer in afzonderlijke

objecten splitsen. In dat geval worden op deze objecten echter de lijn- en vuleigenschappen

van het samengevoegde object toegepast.

Door objecten samen te voegen, kunt u snel en eenvoudig een masker maken:

130 Studio Webdesign 4 Pro

Zo voegt u twee of meer lijnen of vormen samen:

1. Teken twee AutoVormen.

2. Plaats het object dat u als basis wilt gebruiken vóór het object dat u wilt uitsnijden. Ge-

bruik hiertoe de opdrachten in het menu Schikken en/of de overeenkomstige knoppen op

de werkbalk Schikken.

3. Selecteer (of groepeer) beide objecten en kies Extra > Naar curven converteren.

4. Kies Curven samenvoegen in het menu Schikken.

Zo splitst u een samengevoegd object weer in afzonderlijke objecten:

* Selecteer het samengevoegde object en kies Curven splitsen in het menu Schikken.

DE VOLGORDE VAN OBJECTEN WIJZIGEN

De objecten die u maakt, worden standaard zo gestapeld dat het meest recente object telkens

de vorige objecten overlapt. U kunt de volgorde van de verschillende objecten echter wijzigen

om te bepalen hoe ze worden weergegeven op de pagina.

Zo wijzigt u de volgorde van objecten:

* Klik met de rechtermuisknop op het object dat u wilt verplaatsen en kies Schikken in het

snelmenu.

Open het menu Schikken in de menubalk (terwijl het object is geselecteerd).

Voer vervolgens een van deze stappen uit:

Kies Naar achtergrond (of klik op de knop Naar achtergrond op de werkbalk Schik-

ken) als u het geselecteerde object onder aan de stapel (achter alle andere objecten) wilt

plaatsen.

Kies Naar voorgrond (of klik op de gelijknamige knop op de werkbalk Schikken) als u

het geselecteerde object boven aan de stapel (vóór alle andere objecten) wilt plaatsen.

Kies Naar voren (of klik op de gelijknamige knop op de werkbalk Schikken) als u het

object één niveau naar voren wilt verplaatsen.

Kies Naar achteren (of klik op de gelijknamige knop op de werkbalk Schikken) als u

het object één niveau naar achteren wilt verplaatsen.

OBJECTEN UITLIJNEN EN SPATIËREN

U kunt een groep objecten selecteren en die in één handeling uitlijnen. Het gekozen type uit-

lijning wordt automatisch op alle geselecteerde objecten toegepast. Studio Webdesign biedt

verschillende mogelijkheden om objecten uit te lijnen:

* U kunt de randen van twee of meer objecten op elkaar uitlijnen. Zo kunt u bijvoorbeeld

de boven- of onderrand van de geselecteerde objecten op de boven- of onderrand van het

hoogste/laagste object in de selectie uitlijnen (met de opties Bovenkant en Onderkant).

Studio Webdesign 4 Pro 131

* Daarnaast kunt u objecten ook horizontaal of verticaal spatiëren, of ze gelijkmatig sprei-

den over de pagina en hierbij nauwkeurig de afstand tussen de afzonderlijke objecten

instellen.

* Tot slot kunt u objecten ook op de paginamarges (indien ingesteld) of op de randen van de

pagina uitlijnen.

U kunt zowel de besturingselementen op het tabblad Uitlijnen als het dialoogvenster Objec-

ten uitlijnen (toegankelijk via Schikken > Objecten uitlijnen) gebruiken om objecten uit te

lijnen.

Denk eraan dat u ook hulpmiddelen zoals de linialen en het magnetische raster kunt ge-

bruiken om objecten nauwkeurig uit te lijnen op de pagina. Met behulp van de vangfunctie

kunt u objecten eenvoudig op kleverige of niet-kleverige hulplijnen uitlijnen. (Lees ‘De lay-

outhulpmiddelen gebruiken’ in hoofdstuk 3 en ‘Het magnetische raster gebruiken’ verderop

in dit hoofdstuk voor meer informatie.)

Merk op dat u afzonderlijke objecten ook op de boven-, onder-, linker- of rechterrand van de

pagina kunt uitlijnen, of ze horizontaal of verticaal kunt centreren.

Zo lijnt u de randen van twee of meer objecten op elkaar uit:

1. Activeer het selectiegereedschap en klik terwijl u de Shi-toets ingedrukt op de objecten

die u wilt uitlijnen, of sleep een selectiekader rond de desbetreende objecten. (Kies Be-

werken > Alles selecteren als u alle objecten wilt selecteren.)

2. Geef het tabblad Uitlijnen weer in de studio.

3. Geef aan hoe u de objecten horizontaal en/of verticaal wilt uitlijnen. U hebt de keuze uit

Bovenkant, Onderkant, Linkerkant, Rechterkant, Horizontaal centreren en Verticaal

centreren.

Zo spreidt u twee of meer objecten gelijkmatig op een pagina:

* Selecteer de objecten die u gelijkmatig wilt spreiden en klik op Horizontaal spreiden of

Verticaal spreiden op het tabblad Uitlijnen als u de geselecteerde objecten in horizontale

dan wel verticale richting gelijkmatig wilt spreiden over de gehele pagina. Activeer het se-

lectievakje Spreiden en typ een waarde in het bijbehorende kringveld als u een specieke

afstand wilt instellen tussen elk object.

Zo lijnt u een of meer objecten op de randen van de pagina uit:

* Voer dezelfde stappen uit als hiervoor, maar selecteer deze keer de optie Op marges uit-

lijnen. (Als u maar één object hebt geselecteerd, is deze optie standaard ingeschakeld.)

Zo lijnt u een of meer objecten op de ingestelde paginamarges uit:

* Stel de gewenste paginamarges in via de optie Marges en hulplijnen op de optiebalk (al-

leen beschikbaar wanneer er niets is geselecteerd op de pagina). Voer vervolgens dezelfde

stappen uit als hiervoor en activeer het selectievakje Op marges uitlijnen.

132 Studio Webdesign 4 Pro

OBJECTEN GROEPEREN

U kunt een meervoudige selectie (zie ‘Meerdere objecten selecteren’ eerder in dit hoofdstuk)

eenvoudig naar een gegroepeerd object (ook wel een ‘groepsobject’ genoemd) converteren.

Zo kunt u de objecten in hun geheel verplaatsen, schalen of roteren.

Zo groepeert u meerdere objecten:

* Selecteer de objecten die u wilt groeperen en klik op de knop Groeperen onder de

selectie.

Zo splitst u een gegroepeerd object weer in afzonderlijke objecten:

* Selecteer het gegroepeerde object en klik op Degroeperen onder de selectie.

Als u een object selecteert dat deel uitmaakt van een groep, wordt automatisch het volledige

groepsobject geselecteerd. Over het algemeen hee elke bewerking die u uitvoert op een ge-

selecteerd groepsobject een invloed op elk lid van de groep. U kunt echter ook afzonderlijke

objecten selecteren en bewerken in een groep.

Zo selecteert u een speciﬁek object in een groep:

* Houd de Ctrl-toets ingedrukt terwijl u op het object klikt.

OBJECTEN VERGRENDELEN

U kunt een object vergrendelen om te voorkomen dat het per ongeluk wordt geschaald, ver-

plaatst, gespiegeld of geroteerd.

Zo vergrendelt u een object:

* Klik met de rechtermuisknop op het object en kies Schikken > Objecten vergrendelen of

gebruik de gelijknamige menuopdracht in het menu Schikken.

Zo heft u de vergrendeling van een object op:

* Klik met de rechtermuisknop op het object en kies Schikken > Vergrendeling opheen

of gebruik de gelijknamige menuopdracht in het menu Schikken.

HET MAGNETISCHE RASTER GEBRUIKEN

Door het magnetische raster in te schakelen, kunt u rasterpunten en hulplijnen ‘magnetise-

ren,’ zodat u objecten nauwkeuriger kunt uitlijnen en ze eenvoudiger op de juiste positie kunt

plaatsen. Als het magnetische raster is ingeschakeld, worden de randen en middelpunten van

de objecten die u maakt, verplaatst of schaalt automatisch op de dichtstbijzijnde zichtbare

hulplijn of het dichtstbijzijnde rasterpunt uitgelijnd. Objecten worden standaard overigens

ook op de randen van de pagina uitgelijnd.

Studio Webdesign 4 Pro 133

Merk op dat we hier met ‘hulplijnen’ zowel de hulplijnen bedoelen die u via de linialen kunt

tekenen als de lay-outhulplijnen die op paginamarges, rijen en kolommen zijn gebaseerd (zie

‘Hulplijnen instellen via de linialen’ in hoofdstuk 3).

Als het magnetische raster is ingeschakeld, zult u bij het verplaatsen van een hulplijn wellicht

vaststellen dat samen met de hulplijn ook alle objecten worden verplaatst die aan deze hulp-

lijn zijn ‘verankerd.’ Deze functie is standaard ingeschakeld, maar kan indien nodig tijdelijk

of permanent worden uitgeschakeld via de optie Kleverige hulplijnen (toegankelijk via Extra

> Opties > Lay-out). Deze voorziening is vooral handig wanneer u meerdere geselecteerde

objecten in één keer naar een andere positie wilt verplaatsen zonder dat u ze eerst hoe te

groeperen.

Zo schakelt u het magnetische raster in of uit:

* Klik op Magnetisch raster uiterst rechts in de statusbalk. Als deze knop is ingedrukt,

is het magnetische raster geactiveerd.

Objecten selectief uitlijnen

U kunt zelf bepalen op welke punten en lijnen objecten automatisch worden uitgelijnd door

specieke lay-outhulpmiddelen (linialen, hulplijnen, randen van frames, puntraster, enzo-

voort) weer te geven of te verbergen en door de instellingen voor de zichtbare hulpmiddelen

te wijzigen.

Zo geeft u speciﬁeke lay-outhulpmiddelen weer:

* Activeer de overeenkomstige menuoptie in het menu Beeld.

Zo stelt u de lay-outhulpmiddelen in waarop u objecten wilt uitlijnen:

1. Kies Extra > Opties en klik op Vangen.

2. Vink de optie Vangen op aan en schakel het selectievakje in of uit naast de elementen

waarop u wilt vangen. U hebt de keuze uit Rasterpunten, Pagina/overvloeiranden, Pa-

ginamarges, Liniaalhulplijnen, Rij/kolomhulplijnen, Liniaalmarkeringen en Naaste

pixel.

DE STANDAARDWAARDEN VOOR OBJECTEN BIJWERKEN

De standaardwaarden voor objecten zijn de instellingen die Studio Webdesign automa-

tisch toepast wanneer u een nieuw object (bijvoorbeeld tekst of een aeelding) aan uw site

toevoegt. Zo worden op nieuwe tekst bijvoorbeeld automatisch de standaardinstellingen

toegepast voor wat betre het lettertype, de tekengrootte, de tekstkleur, het type uitlijning,

enzovoort. Analoog hieraan worden voor nieuwe aeeldingen de standaardeigenschappen

ingesteld voor wat betre de lijn- en vulkleur, het patroon, enzovoort, en voor nieuwe frames

de standaardwaarden voor marges, kolommen en dergelijke. U kunt de standaardeigenschap-

pen van elk type object echter gemakkelijk wijzigen.

134 Studio Webdesign 4 Pro

Merk op dat deze standaardinstellingen lokaal zijn. Alle wijzigingen die u in de standaardin-

stellingen aanbrengt, zijn met andere woorden altijd van toepassing op de huidige site en

worden automatisch samen met het projectbestand opgeslagen, zodat ze de volgende keer dat

u de site opent opnieuw van toepassing zijn. U kunt de huidige standaardinstellingen echter

op elk moment als globale instellingen opslaan met behulp van de opdracht Als standaard-

waarden opslaan. Dan worden deze instellingen ook toegepast voor alle andere sites die u

met dit programma maakt.

Zo stelt u lokaal standaardwaarden in voor een speciﬁek objecttype:

1. Ontwerp een eenvoudig object dat u als uitgangspunt kunt gebruiken om de gewenste

standaardwaarden in te stellen en stel er de gewenste eigenschappen voor in, of gebruik

een bestaand object dat al de juiste eigenschappen hee. (Voor aeeldingen kunt u een

lijn, vorm of rechthoek gebruiken. Al deze vormen hebben dezelfde standaardwaarden.)

2. Selecteer het object dat u als basis wilt gebruiken voor de nieuwe standaardwaarden en

kies Opmaak > Standaardwaarden object bijwerken of Tekst > Standaardwaarden tekst

bijwerken, aankelijk van het type object dat u hebt gemaakt.

Als u standaard een specieke lijn-/vulkleur en/of lijnstijl wilt gebruiken wanneer u nieuwe

objecten tekent, gaat u als volgt te werk:

1. Stel terwijl er geen enkel object is geselecteerd de gewenste lijn- en/of vulkleur in op het

tabblad Kleur of Stalen (zie ‘Een kleuren instellen’ in hoofdstuk 10). Gebruik het tabblad

Lijn om een standaard lijndikte, lijnstijl en hoekstijl in te stellen.

2. Teken uw object op de pagina. Merk op dat op dit object automatisch de nieuwe stan-

daardwaarden worden toegepast.

Zo controleert of wijzigt u de standaardeigenschappen van tekst:

1. Kies Lijst met opmaakproelen in het menu Tekst.

2. Selecteer Tekst zonder opmaak in de lijst met beschikbare opmaakproelen en klik op

Bewerken om de huidige instellingen voor dit opmaakproel weer te geven.

3. Gebruik het dialoogvenster Eigenschappen van opmaakproel om de gewenste teken-,

alinea- en lijstopmaak in te stellen.

Zo slaat u de huidige standaardwaarden als globale instellingen op:

1. Kies Als standaardwaarden opslaan in het menu Extra.

2. Klik in het dialoogvenster dat daarop verschijnt op Ja om te bevestigen dat u de stan-

daardinstellingen voor de huidige site ook als standaardwaarden wilt gebruiken voor alle

andere websites die u met dit programma maakt.

Studio Webdesign 4 Pro 135

8 met lijnen, vormen en

effecten Werken

LIJNEN TEKENEN EN BEWERKEN

Studio Webdesign bevat diverse gereedschappen om eenvoudige lijnen en vormen te tekenen:

Potlood, Pen, Rechte lijn en allerlei AutoVormen.

Met de lijngereedschappen (toegankelijk via het vervolgmenu Vrije vorm tekenen op de

werkbalk Standaardobjecten links in de werkomgeving) kunt u afzonderlijke lijnen tekenen,

lijnsegmenten met elkaar verbinden en de uiteinden van lijnen met elkaar verbinden om ge-

sloten vormen te maken (zie ‘Vormen tekenen en bewerken’ verderop in dit hoofdstuk). Met

het selectiegereedschap en de opties op de optiebalk voor curven kunt u de lijnen naar be-

hoee schalen of aanpassen nadat u ze hebt getekend.

Met het gereedschap Potlood kunt u met de vrije hand allerlei gebogen lijnen en

vormen tekenen.

Gebruik het gereedschap Rechte lijn als u rechte lijnen wilt tekenen, bijvoorbeeld

horizontale balken boven aan of onder aan de pagina, of horizontale lijnen om af-

zonderlijke rubrieken van elkaar te scheiden of koptitels te benadrukken.

Met het gereedschap Pen kunt u een reeks rechte of gebogen lijnsegmenten met

elkaar verbinden door de afzonderlijke punten te verbinden.

136 Studio Webdesign 4 Pro

Lijnen tekenen

Zo tekent u een lijn met de vrije hand (met het gereedschap Potlood):

1. Open het vervolgmenu met lijngereedschappen op de werkbalk Standaardobjecten en se-

lecteer het gereedschap Potlood.

2. Klik op de positie waar de lijn moet beginnen en sleep met de muis terwijl u de linker-

muisknop ingedrukt houdt. Er verschijnt een lijn die de beweging van de muisaanwijzer

volgt.

3. Laat de muisknop los zodra de lijn de gewenste lengte hee. De lijn wordt automatisch

vloeiend gemaakt met behulp van een beperkt aantal nodes.

4. Om de lijn langer te maken, plaatst u de muisaanwijzer boven een van de rode eindnodes.

Merk op dat er een plusteken onder de aanwijzer verschijnt. Klik op de node en sleep met

de muis om een nieuw lijnsegment toe te voegen.

Zo tekent u een rechte lijn (met het gereedschap Rechte lijn):

1. Open het vervolgmenu met lijngereedschappen op de werkbalk Standaardobjecten en se-

lecteer het gereedschap Rechte lijn.

2. Klik op de positie waar de lijn moet beginnen en sleep met de muis. Laat de muisknop los

zodra de lijn de gewenste lengte hee.

Houd de Shi-toets ingedrukt terwijl u sleept als u de oriëntatie van de lijn

in stappen van 15° wilt instellen. Zo kunt u eenvoudig horizontale of verticale

lijnen tekenen.

3. Om de lijn langer te maken, plaatst u de muisaanwijzer boven een van de rode eindnodes.

Merk op dat er een plusteken onder de aanwijzer verschijnt. Klik op de node en sleep met

de muis om een nieuw lijnsegment toe te voegen.

Zo tekent u een of meer lijnsegmenten (met het gereedschap Pen):

1. Open het vervolgmenu met lijngereedschappen op de werkbalk Standaardobjecten en se-

lecteer het gereedschap Pen. Let erop dat boven in het programmavenster de optiebalk

voor curven verschijnt, die drie knoppen bevat waarmee u het type lijnsegment kunt se-

lecteren dat u wilt tekenen (rechte lijn, intelligente curve of Bézier-curve).

Klik op Rechte lijn als u een recht lijnsegment wilt te-

kenen. Het gaat hierbij om een eenvoudig lijnsegment dat

slechts uit twee nodes bestaat.

(Sneltoets: druk op 1)

Studio Webdesign 4 Pro 137

Een Bézier-curve is een gebogen lijnsegment met con-

trolegrepen, zodat u nauwkeurig de buiging van het segment

kunt instellen.

(Sneltoets: druk op 2)

Een Intelligente curve hee geen zichtbare controle-

grepen. Als u voor dit lijntype kiest, worden de verschillende

nodes automatisch via een vloeiende gebogen lijn met elkaar

verbonden. Deze voorziening is vooral handig als u de con-

touren wilt overtrekken van aeeldingen en objecten die uit

gebogen lijnen bestaan.

(Sneltoets: druk op 3)

2. Selecteer een lijntype op de optiebalk en klik vervolgens op de pagina op de positie waar

de lijn moet beginnen.

* Als u een recht lijnsegment wilt tekenen, klikt u gewoon op de positie waar het lijns-

egment moet eindigen (of sleept u de muis naar deze positie). Houd de Shi-toets

ingedrukt terwijl u klikt als u de oriëntatie van het lijnsegment in stappen van 15° wilt

instellen (handig als u snel rechte hoeken wilt tekenen).

* Als u voor een Bézier-curve hebt gekozen, klikt u nog een keer om een nieuwe node

te deniëren en sleept u vervolgens een controlegreep vanuit deze node. (Deze grepen

fungeren als ‘magneten’ die de gebogen lijn in de juiste vorm trekken. De afstand tussen

de grepen bepaalt de diepte van de uiteindelijke gebogen lijn.) Klik nog een keer op de

positie waar het segment moet eindigen. Als u de Shi-toets ingedrukt houdt terwijl

u het segment tekent, kunt u de oriëntatie met behulp van de controlegrepen van de

nieuwe node in stappen van 15° instellen.

* Als u voor een intelligente curve hebt gekozen, klikt u nog een keer om een nieuwe

node te deniëren. De nieuwe node en de vorige worden automatisch via een vloeiende

gebogen lijn (zonder zichtbare controlegrepen) met elkaar verbonden. Sleep met de

muis voordat u de muisknop loslaat om de lijn te buigen. Houd de Shi-toets ingedrukt

terwijl u klikt als u de oriëntatie van de nieuwe node in stappen van 15° wilt instellen.

3. Om een bestaande lijn uit te breiden, herhaalt u stap 2 voor elk nieuw segment. Desge-

wenst kunt u voor elk segment een ander lijntype instellen.

4. Druk op Esc, dubbelklik of selecteer een ander gereedschap om de lijn te voltooien.

Raadpleeg het Help-bestand van het programma voor meer informatie over hoe u lijnen be-

werkt.

138 Studio Webdesign 4 Pro

LIJNEIGENSCHAPPEN INSTELLEN

Alle lijnen, ook gesloten vormen, hebben talrijke eigenschappen. Tot deze lijneigenschappen

behoren onder andere de kleur, de lijndikte, het type hoek en uiteinde, enzovoort. U kunt

deze eigenschappen naar behoee aanpassen, zowel voor vrije vormen, rechte en gebogen

lijnen als voor de contouren van een vorm (zie ‘Vormen tekenen en bewerken’ verderop in dit

hoofdstuk). Merk op dat ook tekstframes, tabellen en artistieke tekstobjecten lijneigenschap-

pen hebben.

Zo wijzigt u de lijneigenschappen van een geselecteerd object:

* Gebruik het tabblad Stalen om de lijnkleur te wijzigen. (Als u een andere kleur wilt

instellen voor de rand van een vorm of een ander object, klikt u op de knop Lijnkleur,

zodat de lijnkleur en niet de vulkleur wordt gewijzigd.) Klik in de galerie met kleurstalen

op de thumbnail van de kleur die u wilt instellen voor het object. U kunt ook het tabblad

Kleur gebruiken om een andere kleur in te stellen voor het geselecteerde object.

* Als u de lijndikte, de lijnstijl of andere eigenschappen wilt wijzigen, gebruikt u het tabblad

Lijn of de optiebalk voor lijnen (zichtbaar wanneer een lijn is geselecteerd). Versleep de

schuifregelaar boven aan het tabblad om de lijndikte in te stellen. Gebruik de vervolgkeu-

zelijsten om het gewenste lijntype in te stellen. Als u de optiebalk gebruikt om de eigen-

schappen van de lijn te wijzigen, kunt u eventueel ook het percentage opgeven waarmee u

het uiteinde van de lijn wilt schalen.

Via de vervolgkeuzelijst Lijnstijl (de middelste vervolgkeuzelijst) op het tabblad Lijn of de

optiebalk kunt u naar behoee een enkele lijn, kalligrasche lijn of een van de verschillende

soorten stippellijnen of dubbele lijnen als lijnstijl instellen.

Verschillende van deze lijnstijlen kunnen naar behoee worden aangepast:

Bij stippellijnen en lijnen die uit streepjes en punten bestaan, kunt u via de

schuifregelaar Streepjespatroon onder aan het tabblad Lijn de algemene leng-

te van het patroon (het aantal vakjes links van de schuifregelaar) en de lengte

van de streepjes (het aantal zwarte vakjes) instellen.

Wat de dubbele lijnen betre, kunt u uit vier verschillende lijnstijlen kiezen.

Studio Webdesign 4 Pro 139

Bij kalligrasche lijnen met een variabele breedte kunt u via het kringveld Kal-

ligrasche hoek de oriëntatie van de penseelpunt instellen.

Voorts kunt u op het tabblad Lijn ook het uiteinde van de lijnen en de hoek waar twee lijnen

elkaar kruisen aanpassen. Beide eigenschappen zijn vooral duidelijk zichtbaar bij dikkere lij-

nen. Uit de pictogrammen kunt u duidelijk aeiden wat het eect is van elke instelling:

Rond uiteinde Uitstekend uiteinde Stomp uiteinde

Afgeschuinde hoek Rechte hoek Ronde hoek

Zo geeft u alle lijneigenschappen weer:

* Klik op Lijnen en randen in het vervolgmenu met vulgereedschappen in de gereed-

schapset.

* Hiermee opent u het dialoogvenster Lijnen en randen. Op het tabblad Lijn van dit dia-

loogvenster kunt u alle lijneigenschappen wijzigen.

Opmerking: het tabblad Rand bevat allerlei opties om decoratieve randen in te stellen

voor uw objecten (zie Randen toevoegen verderop in dit hoofdstuk).

* Als u alleen voor specieke randen van het object een welbepaalde lijn- of randstijl wilt

instellen, gebruikt u het tabblad Randcontouren in het dialoogvenster.

VORMEN TEKENEN EN BEWERKEN

Studio Webdesign bevat niet alleen diverse lijngereedschappen, maar ook gereedschappen

waarmee u allerlei AutoVormen kunt tekenen. AutoVormen zijn kant-en-klare objecten die

u rechtstreeks kunt toevoegen aan uw pagina en vervolgens kunt aanpassen door de con-

trolegrepen te verslepen. U kunt vanzelfsprekend ook vormen maken door een lijn (of een

aantal lijnsegmenten) te tekenen en vervolgens de begin- en eindpunten ervan met elkaar te

verbinden, zodat een gesloten vorm ontstaat. U kunt de eigenschappen van een vorm naar

behoee aanpassen nadat u deze hebt getekend. Zo kunt u er bijvoorbeeld allerlei kleur- of

bitmapverlopen (met inbegrip van uw eigen bitmapaeeldingen!) en transparantie-eecten

op toepassen. U kunt zelfs gebruikmaken van schuifregelaars om snel en eenvoudig varianten

van de originele AutoVorm te maken!

140 Studio Webdesign 4 Pro

U kunt ook de optiebalk voor AutoVormen boven in de werkomgeving gebruiken om de ei-

genschappen van een AutoVorm te wijzigen. Met de opties op deze balk kunt u bijvoorbeeld

eenvoudig de standaardwaarden herstellen voor een AutoVorm, of er een andere lijnstijl/-

kleur of lijndikte voor instellen. Merk op dat voor nieuwe vormen standaard transparant als

vulkleur en zwart als lijnkleur is ingesteld.

AutoVormen

Het vervolgmenu AutoVormen toevoegen bevat diverse veelgebruikte vormen, onder andere

rechthoeken, ovalen, pijlen, veelhoeken en sterren. Via dit vervolgmenu kunt u:

* decoratieve cirkels of veelhoeken tekenen;

* functionele pijlen, sterren, enzovoort tekenen;

* een rand toevoegen aan uw pagina, bijvoorbeeld een recht-

hoek rond de volledige pagina;

* donkere vlakken tekenen achter aeeldingen of tekst om er

de aandacht op te vestigen;

* webknoppen maken en er hyperlinks of hotspots voor deni-

eren, zodat gebruikers er op kunnen klikken op uw webpagi-

na’s. U kunt hiervoor een willekeurige AutoVorm gebruiken,

maar probeer zeker eens het gereedschap Knop (met een rode

cirkel aangeduid in de guur).

Zo tekent u een AutoVorm:

1. Klik op de knop AutoVormen toevoegen op de werkbalk Standaardobjecten en selecteer

een vorm in het vervolgmenu. Let erop dat de geselecteerde vorm als pictogram voor de

werkbalkknop verschijnt.

2. Klik op de pagina om een nieuwe vorm met standaardafmetingen toe te voegen. Sleep met

de muis als u aangepaste afmetingen wilt instellen voor de vorm.

3. Laat de muisknop los zodra de vorm de gewenste afmetingen hee. U kunt de vorm nu

bewerken door de weergegeven grepen te verslepen.

Zo beperkt u de verhoudingen van een vorm (bijvoorbeeld om een cirkel te

tekenen):

* Houd de Shi-toets ingedrukt tijdens het slepen.

Alle AutoVormen kunnen naar behoee worden verplaatst, geschaald, geroteerd en met een

vulkleur/verloop worden gevuld. Bovendien kunt u het uiterlijk ervan aanpassen met het se-

lectiegereedschap. Elke vorm wijzigt hierbij op een logische manier, zodat u nauwkeurig het

uiterlijk ervan kunt bepalen. Precies het feit dat u het uiterlijk van AutoVormen kunt veran-

deren, maakt ze exibeler dan illustraties en cliparts.

Studio Webdesign 4 Pro 141

Zo past u het uiterlijk van een AutoVorm aan:

1. Selecteer de AutoVorm met het selectiegereedschap. Er verschijnen een of meer schuif-

regelaars rond de vorm. Verwar deze schuifregelaars niet met de selectiegrepen aan de

binnenzijde van de vorm. Met de selectiegrepen kunt u de vorm verplaatsen, deze pro-

portioneel of niet-proportioneel schalen, enzovoort. Met de schuifregelaars kunt u allerlei

kenmerken van de vorm aanpassen, zoals de straal van de hoeken bij een rechthoek of het

aantal punten bij een ster. Onthoud in dit verband dat er voor elk type AutoVorm andere

schuifregelaars beschikbaar zijn, die elk een specieke functie vervullen.

2. Versleep een van de schuifregelaars om het uiterlijk van de AutoVorm aan te passen.

Plaats het selectiegereedschap boven een schuifregelaar en lees de uitleg in de

statusbalk als u de functie wilt achterhalen van de verschillende schuifregelaars

voor een AutoVorm.

Gesloten vormen

Zodra u een lijn tekent of selecteert, verschijnen de nodes van de lijn. Deze nodes geven het

einde van elk lijnsegment aan. Lijnen die u met de vrije hand hebt getekend, hebben meestal

een groot aantal nodes. Rechte en gebogen lijnsegmenten hebben maar twee nodes (1). Door

een lijn te tekenen tussen de eindpunten van een lijnsegment (2) of door een curve te sluiten

(3), kunt u eenvoudig een gesloten vorm maken.

Zo zet u een lijn in een vorm om:

* Selecteer de lijn met het selectiegereedschap en klik op Curve sluiten op de optiebalk.

U kunt ook omgekeerd te werk gaan en een gesloten vorm openen om er een of meer lijnseg-

menten aan toe te voegen.

Zo opent u een lijn of gesloten vorm:

1. Klik met het selectiegereedschap op de node waar u de lijn of vorm wilt openen.

2. Klik op

Curve openen op de optiebalk. Als u een lijn hebt geselecteerd, wordt deze in

twee lijnen gesplitst. Een vorm wordt een lijn. Hierbij wordt de geselecteerde node in twee

nodes gesplitst (één aan elk uiteinde van de nieuwe lijn).

3. U kunt de vorm van de lijn nu naar behoee aanpassen met het selectiegereedschap.

Raadpleeg het Help-bestand van het programma voor meer informatie over het bewerken

van vormen.

142 Studio Webdesign 4 Pro

2D-FILTEREFFECTEN GEBRUIKEN

U kunt in Studio Webdesign talrijke ltereecten gebruiken om objecten te transformeren.

Met de 3D-eecten kunt u zelfs de indruk wekken dat het oppervlak van objecten met een

textuur is bekleed (zie verderop in dit hoofdstuk). Hierna zullen we eerst dieper ingaan op de

tweedimensionale ltereecten die u zoal kunt toepassen op objecten. In de volgende voor-

beelden hebben we elk van deze eecten op de letter A toegepast.

Slagschaduw Schaduw binnen Gloed buiten Gloed binnen

Schuine rand

binnen

Schuine rand buiten Reliëf Kussenreliëf

Gaussiaans vervagen Zoomen Radiaal vervagen Bewegings-

onscherpte

Vulkleur Doezelen Contour Weerspiegeling

Merk op dat het programma ook het gereedschap Schaduw bevat, waarmee u rechtstreeks op

de pagina schaduw kunt toevoegen aan een willekeurig object. Hierbij kunt u aan de hand van

controlegrepen nauwkeurig de vervaging, transparantie en kleur van de schaduw instellen.

Zo past u een 2D-ﬁltereffect toe:

1. Selecteer het object waarop u een eect wilt toepassen en klik op het gereedschap Fil-

tereecten in het vervolgmenu Eecten bewerken in de gereedschapset. Het dialoogven-

ster Filtereecten verschijnt

2. Om een van de eecten toe te passen, activeert u gewoon het overeenkomstige selectie-

vakje in de lijst aan de linkerkant. Merk op dat u bij bepaalde eecten ook een speciek

type eect kunt selecteren via een vervolgkeuzelijst en dat u meerdere eecten kunt instel-

len voor een object.

Studio Webdesign 4 Pro 143

3. Selecteer een eect en gebruik de besturingselementen in het dialoogvenster om de eigen-

schappen van het eect aan te passen. Versleep de schuifregelaars of typ rechtstreeks waar-

den in de invoervakken om het gewenste eect te verkrijgen. (U kunt een schuifregelaar

ook selecteren en vervolgens de pijltoetsen op het toetsenbord gebruiken om de ingestelde

waarde te wijzigen.) Welke opties u precies kunt instellen, hangt af van het eect dat u hebt

geselecteerd.

4. Klik op OK om het eect toe te passen op het geselecteerde object, of op Annuleren als u

het dialoogvenster wilt sluiten zonder het eect toe te passen.

Reﬂecties maken

U kunt een pagina eenvoudig een creatieve uitstraling geven door een verticale weerspiege-

ling toe te voegen aan een geselecteerd object. Dergelijke weerspiegelingen hebben vooral een

prachtig eect wanneer u ze op een aeelding toepast, maar kunnen net zo indrukwekkend

zijn wanneer ze op artistieke tekst zoals paginatitels of tekstbanners worden toegepast. Hierbij

kunt u nauwkeurig de hoogte, transparantie, verschuiving en vervaging van de weerspiegeling

instellen.

Zo voegt u een weerspiegeling toe aan een object:

1. Voer dezelfde stappen uit als hiervoor zijn beschreven om het dialoogvenster Filtereec-

ten te openen en activeer het selectievakje Weerspiegeling in de lijst aan de linkerkant.

2. Gebruik de besturingselementen rechts in het dialoogvenster om de gewenste instellingen

te kiezen voor het eect. Versleep hiertoe de schuifregelaars of typ rechtstreeks waarden

in de bijbehorende invoervakken. (U kunt een schuifregelaar ook selecteren en vervolgens

de pijltoetsen op het toetsenbord gebruiken om de ingestelde waarde te wijzigen.) U kunt

de volgende opties instellen voor de weerspiegeling:

• Hoogte: hiermee bepaalt u in welke mate het object wordt weerspiegeld. Als u 100 als

waarde instelt, wordt het volledige object weerspiegeld. Stelt u 50 als waarde in, dan

wordt maar de hel van het object weerspiegeld, enzovoort.

• Transparantie: hiermee wijzigt u de transparantie van de weerspiegeling.

• Afstand: hiermee bepaalt u de afstand tussen de rand van het onderliggende object en

de positie waar de weerspiegeling begint.

• Vervagen: hiermee bepaalt u hoe ‘wazig’ de uiteindelijke weerspiegeling is.

3. Klik op OK om het eect toe te passen op het geselecteerde object, of op Annuleren als u

het dialoogvenster wilt sluiten zonder het eect toe te passen.

Contouren maken

Studio Webdesign biedt u de mogelijkheid een gekleurde rand toe te voegen aan objecten als

ltereect. Met dit eect kunt u bijvoorbeeld eenvoudig een kader met een willekeurige kleur

weergeven rond tekst en vormen. Hierbij kunt u nauwkeurig de kleur, transparantie, breedte

en uitlijning van het eect instellen. U kunt ook uit verschillende overvloeimodi kiezen voor

het eect. Merk op dat u ook een kleurverloop als vulkleur kunt instellen voor het kader. (Het

ingestelde kleurverloop wordt altijd vanaf de binnenrand tot de buitenrand van het kader

144 Studio Webdesign 4 Pro

toegepast.) Desgewenst kunt u zelfs een patroon als vulkleur instellen, dat u naar behoee

aan de binnen- of buitenkant van het object kunt toepassen of over de randen van het object

kunt centreren.

Zoals voor alle andere eecten geldt ook hier weer dat u het eect naar behoee in of uit kunt

schakelen. Desgewenst kunt u behalve het kader nog een willekeurige combinatie van 2D- of

3D-ltereecten op het object toepassen.

Zo geeft u een kader weer rond een geselecteerd object:

1. Voer dezelfde stappen uit als hiervoor zijn beschreven om het dialoogvenster Filtereec-

ten te openen en activeer het selectievakje Contour in de lijst aan de linkerkant.

2. Selecteer in de vervolgkeuzelijst Overvloeimodus een overvloeimodus voor het eect.

Hiermee bepaalt u hoe de kleur van het kader en de pixels van het onderliggende object in

elkaar overvloeien. Stel vervolgens via de schuifregelaar eronder de gewenste transparan-

tie in.

3. Gebruik de schuifregelaar Breedte om de breedte van het kader in te stellen. Geef vervol-

gens via de optie Uitlijning aan of u het kader aan de buitenkant of de binnenkant van het

object wilt plaatsen, of als u het wilt centreren over de randen van het object.

4. Selecteer in de vervolgkeuzelijst Vulkleur/verloop een vulkleur of verloop voor het kader.

U hebt de keuze uit Een kleur, Lineair, Radiaal, Conisch, Vierkant, Contour of Pa-

troon. Als u Een kleur kiest, wordt de optie Kleur beschikbaar, waarmee u de gewenste

kleur kunt instellen voor het kader. Als u een van de andere opties selecteert, verschijnt

een aantal besturingselementen waarmee u het gewenste verloop kunt instellen en het

naar behoee kunt aanpassen (zie ‘Het spectrum van een kleurverloop bewerken’ in het

Help-bestand). Merk op dat u desgewenst ook een patroon kunt instellen voor het kader.

5. Activeer het selectievakje Schalen met object als u wilt dat ook het eect proportioneel

wordt geschaald wanneer u achteraf de afmetingen van het object wijzigt. Als u dit selec-

tievakje uitschakelt, wordt het eect niet aangepast wanneer u het object schaalt.

6. Klik op OK om het eect toe te passen.

Als u het eect weer wilt uitschakelen, kiest u Filtereecten in het menu Opmaak (of in het

snelmenu voor het object) en schakelt u het selectievakje Contour uit links in het dialoogven-

ster.

Objecten vervagen

U kunt allerlei vervagingseecten toepassen op een object in Studio Webdesign, meerbe-

paald:

* Gaussiaans vervagen: dit eect maakt een object vloeiender door een gewogen gemid-

delde toe te passen op pixels.

* Zoomen: hiermee kunt u het eect van een in- of uitzoomende cameralens nabootsen.

* Radiaal vervagen: hiermee vervaagt u een object in concentrische cirkels om het eect

van een draaiende camera of een draaiend voorwerp na te bootsen.

* Bewegingsonscherpte: hiermee kunt u een object in een bepaalde richting vervagen om

het eect van een bewegend voorwerp na te bootsen.

Studio Webdesign 4 Pro 145

Raadpleeg het Help-bestand van het programma voor meer informatie over hoe u een verva-

gingseect toepast op een object.

Het gereedschap Schaduw gebruiken

Schaduw leent zich uitstekend om objecten diepte te geven. Dat geldt in het bijzonder voor

aeeldingen en tekst, maar ook voor vormen, tekstframes en tabellen. Met het gereedschap

Schaduw in Studio Webdesign kunt u snel en eenvoudig een slagschaduw of een op schuine

randen gebaseerd schaduweect toevoegen aan een willekeurig object.

Nadat u een schaduweect hebt toegepast met het gereedschap kunt u aan de hand van de

weergegeven nodes rechtstreeks op de pagina eenvoudig de kleur, transparantie, vervaging

en allerlei andere kenmerken van het eect aanpassen. (U kunt hiertoe natuurlijk ook de

optiebalk gebruiken.) Door specieke nodes naar binnen of naar buiten te slepen vanuit de

oorsprong van de schaduw, kunt u snel de vervaging en transparantie ervan aanpassen. Als

u een andere kleur wilt instellen voor de schaduw, klikt u gewoon op de kleurnode en kiest

u een nieuwe kleur op het tabblad Kleur of Stalen. Merk op dat u de oorsprong van de scha-

duw naar behoee in het middelpunt (zoals in de guur) of aan een specieke rand van het

object kunt plaatsen, naargelang u een eenvoudig dan wel een op schuine randen gebaseerd

schaduweect wilt creëren.

U kunt overigens ook het dialoogvenster Filtereecten gebruiken om de gewenste instellingen

te kiezen nadat u schaduw hebt toegevoegd aan een object met het gereedschap.

Zo voegt u een eenvoudig of schuingetrokken schaduweffect toe aan een gese-

lecteerd object:

1. Selecteer het object waaraan u schaduw wilt toevoegen en klik vervolgens op het gereed-

schap Schaduw in het vervolgmenu Eecten bewerken in de gereedschapset.

2. Als u een eenvoudig schaduweect wilt toevoegen aan het object, plaatst u de muisaan-

wijzer boven het object en sleept u de muis terwijl u de linkermuisknop ingedrukt houdt

weg van het object.

Selecteer de gewenste optie in de vervolgkeuzelijst Vergrendelen op de optiebalk als u een

schaduweect wilt toepassen dat is schuingetrokken in verhouding tot de linker-, rechter-,

boven- of onderrand van het object.

3. Bij beide soorten schaduw kunt u nauwkeurig de gewenste positie instellen door de scha-

duw met ingedrukte linkermuisknop te verslepen op de pagina.

146 Studio Webdesign 4 Pro

Gebruik de vervolgkeuzelijst Vergrendelen op de optiebalk om tussen een

eenvoudig schaduweect en verschillende soorten schuingetrokken schaduwef-

fecten te wisselen.

3D-FILTEREFFECTEN GEBRUIKEN

De 3D-ltereecten gaan veel verder dan de 2D-ltereecten (zoals schaduw, een schuine

rand, gloed of reliëf) die we eerder hebben beschreven. Met behulp van deze eecten kunt u

het oppervlak van objecten met texturen bekleden. Hierbij kunt u desgewenst meerdere eec-

ten tegelijkertijd toepassen op een object. Merk op dat deze eecten niets kunnen ‘doen’ met

een ongevuld object. Er moet een vulkleur of verloop zijn ingesteld voor het object voordat u

het verschil ziet!

Overzicht

Zo past u een 3D-ﬁltereffect toe op een geselecteerd object:

1. Klik op Filtereecten in het vervolgmenu Eecten bewerken in de gereedschapset.

2. Activeer het selectievakje 3D-eecten in de lijst aan de linkerkant. Merk op dat standaard

ook het selectievakje 3D-belichting wordt geactiveerd.

• 3D-eecten is de ‘hoofdschakelaar’ voor deze categorie ef-

fecten. Merk op dat de instellingen die u kiest voor de op-

ties Vervagen en Diepte een grote invloed uitoefenen op

het uiteindelijke eect. Klik op de knop met het plusteken

naast de schuifregelaars als u deze instellingen onaanke-

lijk van elkaar wilt aanpassen.

• 3D-belichting voegt een lichtbron toe. Deze lichtbron is

onontbeerlijk, aangezien de diepte-informatie in het eect

anders niet zichtbaar is. Via de belichtingsinstellingen kunt

u het driedimensionale oppervlak belichten en de reecte-

rende eigenschappen ervan wijzigen.

Misschien vraagt u zich af waarom in de namen van de verschillende 3D-eecten regelmatig

de term ‘map’ voorkomt. Het concept van een map is de sleutel om te begrijpen hoe deze ef-

fecten werken. Het gaat hierbij om een kanaal met informatie dat over de aeelding wordt

gelegd. In dit kanaal zijn waarden opgeslagen voor elke gekleurde pixel in de onderliggende

aeelding. Elk 3D-eect maakt gebruik van een map. Precies door de interactie tussen deze

map en het onderliggende verloop dat voor de aeelding is ingesteld, wordt visueel de indruk

gewekt dat het oppervlak met een textuur is bekleed.

Studio Webdesign 4 Pro 147

Bumpmaps voegen diepte-informatie toe, waardoor de indruk ontstaat dat de aeelding uit

hoogtes en laagtes bestaat.

Patronen voegen kleurvariaties toe op basis van specieke overvloeimodi en transparantie-

instellingen om op een realistische manier allerlei texturen te simuleren (hout, marmer, vlek-

ken, enzovoort).

Merk op dat er twee soorten bumpmaps en patronen zijn: tweedimensionale en driedimen-

sionale. Dit zijn in feite allemaal driedimensionale eecten. Het onderscheid 2D/3D verwijst

gewoon naar de manier waarop het gewenste resultaat wordt verkregen. Bij de tweedimensi-

onale varianten moet u eerst een bitmap selecteren in de galerie, terwijl u bij de driedimen-

sionale varianten eerst een functie dient te selecteren. 3D-eecten die op een functie zijn

gebaseerd, bevatten gegevens over het inwendige van de ‘ruimte,’ terwijl de eecten die op een

bitmap zijn gebaseerd alleen de kenmerken van het oppervlak beschrijven.

Verschillende eecten combineren – U kunt verschillende 3D-eecten met elkaar combi-

neren (zie bovenstaande guur). De eecten worden cumulatief toegepast volgens een wel-

bepaalde volgorde: 3D-bumpmap > 2D-bumpmap > 3D-patroon > 2D-patroon > 3D-belich-

ting.

3D-bumpmap

Dit eect wekt de indruk dat het oppervlak van het object met een textuur is bekleed door

diepte-informatie toe te voegen op basis van een wiskundige functie. U kunt dit eect met een

of meer andere 3D-eecten combineren, maar niet met een 2D-bumpmap.

Zo past u het effect toe op een geselecteerd object:

* Selecteer het gereedschap Filtereecten in het vervolgmenu Eecten bewerken in de

gereedschapset of kies Filtereecten in het menu Opmaak (of in het snelmenu voor het

object) om het dialoogvenster Filtereecten te openen. Activeer links in het dialoogven-

ster het selectievakje 3D-eecten. Versleep de schuifregelaars voor deze ‘hoofdschakelaar’

om de algemene eigenschappen te wijzigen van de afzonderlijke 3D-eecten.

• Vervagen: via deze schuifregelaar stelt u de gewenste vervaging in. Hoe hoger de waarde

die u instelt, hoe meer u de indruk wekt dat de hoogte geleidelijk wijzigt.

• Diepte: hiermee bepaalt u hoe steil de wijzigingen in diepte zijn.

• Deknop

is standaard ingeschakeld, wat erop wijst dat beide schuifregelaars aan elkaar

zijn gekoppeld. In deze modus worden grote wijzigingen in diepte glad gestreken door

de parameter Vervagen. Klik op deze knop als u beide schuifregelaars onaankelijk van

elkaar wilt aanpassen.

148 Studio Webdesign 4 Pro

* (Facultatief) Klik indien nodig op Voorbeeld weergeven/verbergen rechtsonder in

het dialoogvenster om het voorbeeldvenster uit te vouwen. Als dit deelvenster is uitge-

vouwen, worden de eecten die u instelt alleen in het voorbeeldvenster toegepast. Als u

dit deelvenster samenvouwt (door nogmaals op de knop te klikken), worden de ingestelde

eecten rechtstreeks op het object op de pagina toegepast. Wanneer u voor de eerstge-

noemde methode kiest, kunt u nauwkeurig de gewenste instellingen kiezen voor een ef-

fect, zonder dat andere objecten op de pagina u daarbij hinderen. Met de zoomknoppen

en de bijbehorende vervolgkeuzelijst onder in het voorbeeldvenster kunt u naar behoee

in- of uitzoomen op het eect.

* Activeer het selectievakje 3D-bumpmap. Merk op dat het uiteindelijke eect grotendeels

aankelijk is van de functie die u selecteert en de instellingen die u ervoor kiest (zie hier-

na). Experimenteer daarom eerst met die instellingen voordat u de volgende instellingen

aanpast:

• Z-diepte: hiermee stelt u de factor in die op de oorspronkelijke pixelintensiteit moet

worden toegepast voordat de bumpmapfunctie wordt uitgevoerd. Stel een lage waarde

in om het oorspronkelijke oppervlak vlakker te maken en een hoge waarde om het op-

pervlak steiler te maken.

• B-diepte: staat voor ‘bumpdiepte.’ Via deze schuifregelaar stelt u de factor in die op de

bumpmap moet worden toegepast nadat deze werd gegenereerd. Lage waarden komen

overeen met ondiepe uitstulpingen, hoge waarden met diepe uitstulpingen.

• Gebruikdecontourlijnomhet'zijaanzicht'vandegegenereerdeuitstulpingenaante

passen. Hiermee verhoogt of verlaagt u in werkelijkheid helderheidswaarden in de

bumpmap. Het proces is echter visueel bijzonder intuïtief. Klik op de contourlijn om

een controlenode toe te voegen. Versleep de lijn vervolgens om de vorm ervan te wijzi-

gen en een overeenkomstige contour te produceren in de uitstulpingen. Klik zo nodig

nog een keer op de lijn als u nog meer nodes wilt toevoegen. Selecteer een node en druk

op Delete als u deze wilt verwijderen. Activeer het selectievakje Lineair als u nodes via

een rechte lijn met elkaar wilt verbinden.

Opmerking: het gaat hierbij om een invoer/uitvoerbewerking op basis van een

graek. De horizontale as vertegenwoordigt mogelijke helderheidswaarden

(van zwart tot wit) in de bumpmap ‘voordat’ een wijziging werd aangebracht.

De verticale as gee dezelfde spreiding van waarden aan na de aanpassing. De

lijn relateert deze invoer- en uitvoerwaarden aan elkaar. Aanvankelijk vertegen-

woordigt de graek ‘Geen wijziging,’ dat wil zeggen dat elke invoerwaarde langs

de horizontale as aanvankelijk exact overeenstemt met dezelfde uitvoerwaarde

langs de verticale as. Door bijvoorbeeld het middelste gedeelte van de curve

naar boven te duwen, maakt u de grijswaarden in het middenbereik helderder,

aangezien hun uitvoerwaarden nu hoger zijn dan voordien. U zult geboeid

vaststellen hoe deze eenvoudige wijzigingen een grote invloed hebben op de

vorm van het terrein dat u creëert in de aeelding!

Studio Webdesign 4 Pro 149

* Klik op Functie om de functie te kiezen die u wilt gebruiken om de bumpmap te gene-

reren. In de vervolgkeuzelijst hebt u de keuze uit Ruis, Som, SomAbs, SinusSomAbs,

Dambord en Strepen. Zodra u een functie hebt geselecteerd, kunt u in dit deelvenster de

gewenste algemene parameters instellen. Klik op Geavanceerd als u geavanceerde opties

wilt instellen voor het eect.

• Schaal X: hiermee kunt u het eect samenpersen of uitrekken langs de X-as of horizon-

tale as.

• Schaal Y: hiermee kunt u het eect samenpersen of uitrekken langs de Y-as of verticale

as.

• Afwijking: hiermee kunt u de helderheid aanpassen. Lage waarden resulteren in don-

kerdere tonen, hoge waarden in lichtere tonen.

• Toename: via deze schuifregelaar kunt u het contrast aanpassen. Lage waarden resulte-

ren in een kleiner bereik van uitvoerwaarden tussen donker en licht, hoge waarden in

een grotere spreiding van de uitvoerwaarden.

* Klik op Geavanceerd als u geavanceerde opties wilt instellen voor de geselecteerde func-

tie. Welke opties beschikbaar zijn, is aankelijk van de functie die u hebt geselecteerd.

Vaak is een beetje experimenteren de beste aanpak!

* Klik tot slot op OK om het eect toe te passen.

Op dezelfde manier kunt u ook een van de andere 3D-ltereecten toepassen op het geselec-

teerde object. Omdat de instellingen voor de verschillende ltereecten doorgaans met elkaar

overeenkomen, zullen we ons hierna beperken tot een overzicht van het eect dat u kunt

verkrijgen met elk ltereect.

2D-bumpmap

Dit eect wekt de indruk dat het oppervlak van het object met een textuur is bekleed door

diepte-informatie toe te voegen op basis van een grijswaardenbitmap. U kunt dit eect met

een of meer andere 3D-eecten combineren, maar niet met een 3D-bumpmap.

3D-patroon

Dit eect wekt de indruk dat het oppervlak van het object met een textuur is bekleed door

kleurvariaties te introduceren op basis van een wiskundige functie. U kunt dit eect met een

of meer andere 3D-eecten combineren.

2D-patroon

Dit eect wekt de indruk dat het oppervlak van het object met een textuur is bekleed door

kleurvariaties te introduceren op basis van een grijswaardenbitmap. U kunt dit eect met een

of meer andere 3D-eecten combineren.

Transparantie

Via het tabblad Transparantie in de studio kunt u de algemene transparantie wijzigen van

een object waarop 3D-ltereecten zijn toegepast (zie linkerguur hieronder). Als u echter

150 Studio Webdesign 4 Pro

meer controle wilt over de transparantie van het object, in het bijzonder om reecterende

belichtingseecten na te bootsen bij glazen objecten, kunt u het ltereect Transparantie ge-

bruiken om de gewenste transparantie in te stellen. Merk op dat u de transparantie van zowel

niet-reecterende oppervlakken (doorgaans gaat het hierbij om de schaduw die aan de rand

van een object ontstaat wanneer het object vanaf de zijkant wordt belicht) als oppervlakken

die van boven uit worden belicht (zie rechterguur hieronder) apart kunt instellen.

3D-belichting

Dit eect bepaalt samen met andere 3D-eecten in welke mate het oppervlak wordt belicht en

wat de reecterende eigenschappen ervan zijn. Het selectievakje 3D-belichting uitschakelen,

komt op hetzelfde neer als het oppervlak uitsluitend met 100% omgevingslicht belichten.

DIEPTE TOEVOEGEN (INSTANT 3D)

Met de voorziening Instant 3D kunt u vlakke vormen en tekst in een oogwenk in driedimen-

sionale objecten omtoveren.

Hierbij kunt u allerlei parameters instellen, zoals:

* Schuine randen: maak een keuze uit verschillende vooraf gedenieerde holle of bolle

schuine randen of ontwerp aangepaste schuine randen met behulp van de ingebouwde

editor.

* Lichtbronnen: in Studio Webdesign kunt u maar liefst acht gekleurde lichtbronnen toe-

voegen die u naar behoee kunt bewerken om prachtige belichtingseecten te creëren.

* Draaibankeecten: ontwerp realistische 3D-objecten door een object (bijvoorbeeld een

kurk) rond zijn eigen as te draaien en te extruderen.

* Texturen: bepaal hoe de textuur wordt geëxtrudeerd van objecten waarvoor een kleur- of

bitmapverloop is ingesteld.

* Aanzichten: roteer uw object in drie dimensies om unieke aanzichten te creëren.

* Materialen: bepaal in welke mate de belichting een eect hee op het oppervlak van ob-

jecten (ideaal voor driedimensionale artistieke tekst!).

Studio Webdesign 4 Pro 151

Via de optiebalk boven in de werkomgeving kunt u eenvoudig de gewenste instellingen kie-

zen voor elk van deze parameters. Onthoud in dit verband dat elke parameter het 3D-eect

bepaalt dat uiteindelijk op het geselecteerde object wordt toegepast. Uniek is ongetwijfeld dat

u het object rechtstreeks op de pagina kunt transformeren (in 3D!) aan de hand van een rode

cirkel die als as fungeert van waaruit u het object naar behoee rond de X-, Y- en Z-as kunt

draaien in verhouding tot de pagina. Let erop hoe de muisaanwijzer een andere vorm krijgt

naarmate u deze over de verschillende nodes van de rode cirkel beweegt:

Roteren rond X-as Roteren rond Y-as Roteren rond Z-as Roteren rondX- en

Y-as

Roteer uw 3D-objecten rond hun eigen as in plaats van rond de assen van de

pagina door de Ctrl-toets ingedrukt te houden tijdens het roteren.

Merk op dat u rechtstreeks op de pagina de hoek en elevatie van elke ‘actieve’ lichtbron kunt

wijzigen door deze naar een andere positie te slepen.

U kunt het onderliggende basisobject op elk gewenst moment bewerken, ook

nadat u een van de bovengenoemde transformaties hebt uitgevoerd.

Zo voegt u diepte toe:

1. Selecteer een object en klik op Instant 3D in het vervolgmenu Eecten bewerken in

de gereedschapset (of kies Instant 3D in het menu Opmaak). Let erop dat het geselec-

teerde object onmiddellijk driedimensionaal wordt gemaakt en dat er vóór het object een

rode cirkel verschijnt waarmee u het object naar behoee kunt aanpassen.

2. Selecteer in de eerste vervolgkeuzelijst op de optiebalk een categorie 3D-eecten. De ove-

rige opties op de optiebalk worden automatisch bijgewerkt naargelang de categorie die

momenteel is geselecteerd. Raadpleeg het Help-bestand van het programma voor meer

informatie.

Mocht u niet tevreden zijn over de gekozen instellingen, kunt u het object altijd weer in zijn

oorspronkelijke staat herstellen door op de knop Standaardwaarden te klikken op de optie-

balk.

152 Studio Webdesign 4 Pro

Zo schakelt u het 3D-effect uit:

* Klik op 3D-eect verwijderen op de optiebalk. Als u het eect achteraf opnieuw wilt

inschakelen, activeert u gewoon het gereedschap Instant 3D in de gereedschapset.

Zo bewerkt u de basiseigenschappen van een 3D-object:

* Selecteer het 3D-object en klik op de knop Bewerken in de rechterbenedenhoek van het

geselecteerde object.

Let erop dat het object nu zonder toegepast 3D-eect wordt weergegeven, zodat u het naar

behoee kunt schalen en roteren met behulp van de selectiegrepen.

RANDEN TOEVOEGEN

In Studio Webdesign is een rand of kader een element dat voortdurend wordt herhaald en dat

kan worden gebruikt om een object in te sluiten, zodat het net lijkt alsof het object is ingelijst.

Dergelijke kaders ogen vooral mooi bij geïmporteerde aeeldingen.

Zo voegt u een kader toe aan een object:

1. Klik op Lijnen en randen in het vervolgmenu met vulgereedschappen in de gereed-

schapset.

Studio Webdesign 4 Pro 153

2. Als u het kader op specieke randen van het object wilt toepassen, activeert u het tabblad

Randcontouren. In het voorbeeld aan de linkerkant wordt met behulp van vette lijnen

aangeduid op welke randen van het geselecteerde object de huidige instellingen op het

tabblad Rand zullen worden toegepast als u op OK klikt.

* Klik op het overeenkomstige pictogram in de bovenste rij knoppen aan de rechterkant

om respectievelijk alle randen dan wel geen enkele rand van het object te selecteren.

* Gebruik de pictogrammen in de onderste rij knoppen om afzonderlijke randen van het

object te selecteren.

3. Activeer het tabblad Rand om de gewenste instellingen te kiezen voor de geselecteerde

rand(en) van het object. Selecteer in de vervolgkeuzelijst Zijden een van de vooraf gede-

nieerde patronen voor het kader. Selecteer Geen als u het patroon weer wilt verwijderen.

4. Activeer het selectievakje Uniforme zijden en hoeken als u voor de hoeken hetzelfde

patroon wilt gebruiken als voor de zijden. Schakel dit selectievakje uit en selecteer een

patroon in de vervolgkeuzelijst Hoeken als u verschillende patronen wilt combineren.

5. Geef in het groepsvak Uitlijnen aan of u het kader aan de buitenkant, de binnenkant of

exact in het midden van het begrenzingskader rond het object wilt plaatsen.

6. Stel zo nodig ook de andere eigenschappen van het kader in:

• StelviahetkringveldDikte de gewenste dikte in voor het kader.

• ActiveerhetselectievakjeAchter inhoud als u de binnenste hel van het kader achter

het object wilt verbergen. Als u dit selectievakje uitschakelt, verschijnt het volledige

kader vóór het object.

• AlsuhetselectievakjeSchalen met object activeert, worden zowel het kader als het

object gewijzigd als u het object schaalt. Wanneer u dit selectievakje uitschakelt, blij

de dikte van het kader ongewijzigd tijdens het schalen van het object.

7. Klik op OK nadat u de gewenste instellingen hebt gekozen.

OBJECTSTIJLEN GEBRUIKEN

Objectstijlen bieden ongeveer dezelfde voordelen als opmaakproelen en kleurenschema’s.

Nadat u een reeks opmaakkenmerken hebt ingesteld die precies het gewenste resultaat ople-

veren (bijvoorbeeld een bepaalde combinatie van lijnkleur, vulkleur en rand), kunt u die als

benoemde stijl opslaan. Het programma onthoudt voor welke objecten deze stijl is ingesteld

en voegt de nieuwe stijl automatisch aan de lijst toe op het tabblad Objectstijlen.

Objectstijlen zijn om verschillende redenen handig:

* Telkens als u een bepaald aspect van de stijl wilt wijzigen (bijvoorbeeld de lijnkleur), hoe

u alleen de stijldenitie te bewerken. Alle objecten waarop deze stijl is toegepast in de site

worden automatisch bijgewerkt op basis van de nieuwe instellingen!

154 Studio Webdesign 4 Pro

* Objectstijlen die u globaal hebt opgeslagen, zijn niet alleen beschikbaar in de huidige site,

maar ook in elke nieuwe site die u maakt, zodat u een geschikte combinatie van opmaak-

kenmerken naar behoee kunt hergebruiken.

Daar komt nog bij dat u op het tabblad Objectstijlen uit verschillende galerieën met vooraf

gedenieerde stijlen kunt kiezen, die u rechtstreeks kunt toepassen op een object of naar wens

kunt aanpassen!

Elke objectstijl bevat specieke instellingen voor diverse objectkenmerken, zoals de lijnkleur

en lijnstijl, de vulkleur en transparantie, ltereecten, het lettertype, enzovoort. Precies het

feit dat u specieke kenmerken kunt instellen of uitsluiten en voor elk kenmerk uit een vrijwel

onbeperkt aantal opties kunt kiezen, maakt van deze voorziening een onmisbaar gereedschap

in uw designarsenaal.

Zo past u een objectstijl toe op objecten:

1. Selecteer een object op de pagina en activeer het tabblad Objectstijlen in de studio.

2. Selecteer via de vervolgkeuzelijst boven aan het tabblad een categorie. In de galerie onder

aan het tabblad verschijnt een overzicht van de beschikbare stijlen in de gekozen catego-

rie.

3. Klik op de miniatuur van de objectstijl die u op het geselecteerde object wilt toepassen.

Studio Webdesign 4 Pro 155

9 afbeeldingen,

animatieS en

multimedia-elementen

toevoegen

AFBEELDINGEN IMPORTEREN

Studio Webdesign biedt u de mogelijkheid aeeldingen in de meest uiteenlopende bestands-

indelingen in te voegen in uw site:

* Bitmapaeeldingen, ook wel bitmaps of rasteraeeldingen genoemd, bestaan uit een

matrix van punten (‘pixels’). U kunt dit enigszins vergelijken met de ruitjes op een blad

millimeterpapier. Het kan hierbij om foto’s van een digitale camera of gescande aeeldin-

gen gaan, maar net zo goed om aeeldingen die met een ‘tekenprogramma’ of beeldbe-

werkingssoware zijn gemaakt.

* Vectorgeoriënteerde aeeldingen zijn resolutieonaankelijk en bevatten tekenopdrach-

ten zoals ‘Teken een lijn van A naar B.’

* Metabestanden zijn bestanden die in de standaardindeling voor grasche bestanden van

Windows zijn opgeslagen. Kenmerkend voor dit type bestanden is dat ze zowel bitmapge-

gevens als vectorgeoriënteerde gegevens bevatten.

U kunt aeeldingen ook rechtstreeks importeren van een Photo-cd of via TWAIN-apparaten

zoals een scanner of digitale camera.

Afbeeldingen invoegen

U kunt op verschillende manieren een aeelding invoegen in uw site. U kunt aeeldingen

bijvoorbeeld rechtstreeks naar de pagina slepen vanuit Windows Verkenner of ze invoegen

vanaf het Klembord. U kunt ook gebruikmaken van een dialoogvenster om een aeelding te

importeren of een miniatuur van de aeelding naar de pagina slepen vanuit de mediabalk.

* Stand-alone aeeldingen zweven vrij over de pagina, terwijl inline aeeldingen netjes in

een tekstobject zijn geïntegreerd.

* Ingesloten aeeldingen worden samen met het projectbestand opgeslagen en zijn een

vast onderdeel ervan. Als u aeeldingen koppelt, wordt een verwijzing naar het bron-

bestand ingevoegd in uw webproject. Elke methode hee zo zijn voor- en nadelen (zie

‘Insluiten versus koppelen’ verderop in deze paragraaf).

156 Studio Webdesign 4 Pro

Standaard wordt een aeelding niet bijgesneden wanneer u deze op de pagina plaatst. Studio

Webdesign gebruikt dus automatisch de oorspronkelijke afmetingen bij het invoegen van een

aeelding. Mocht de aeelding echter te groot zijn, dan kunt u deze altijd bijsnijden. Desge-

wenst kunt u ook de eigenschappen van het aeeldingskader (het denkbeeldige kader waarin

de aeelding wordt geplaatst) aanpassen om de grootte en uitlijning van de aeelding in het

kader te bepalen.

Zo voegt u een afbeelding toe vanuit de mediabalk:

* Klik op de miniatuur van de aeelding die u wilt gebruiken in het huidige album en sleep

deze terwijl u de linkermuisknop ingedrukt houdt naar de pagina. (Mocht de mediabalk

momenteel niet zichtbaar zijn, klikt u op de pijlknop onder in de werkomgeving om deze

uit te vouwen.) Merk op dat u de miniatuur ook naar een bestaande aeelding op de pa-

gina kunt slepen om deze te vervangen.

Zo importeert u een afbeelding:

1. (Facultatief) Als u de aeelding ‘inline’ wilt invoegen, klikt u in een tekstobject om de

invoegpositie in de tekst te plaatsen. Als u een aeelding als stand-alone aeelding wilt

invoegen, mag er geen enkel tekstobject zijn geselecteerd.

2. Doe in het hoofdvenster het volgende:

• Klikop

Aeelding invoegen op de werkbalk Standaardobjecten..

Doe in Studio Write het volgende:

• KiesInvoegen > Aeelding in de menubalk.

3. Navigeer in het dialoogvenster naar de map waarin de aeelding is opgeslagen en selec-

teer deze.

4. Geef aan of u de aeelding wilt insluiten of deze aan uw site wilt koppelen (zie ‘Insluiten

versus koppelen’ verderop in deze paragraaf).

5. Klik op Openen.

6. Als de invoegpositie zich in tekst bevindt in het hoofdvenster, wordt gevraagd of u de af-

beelding op de huidige positie wilt invoegen en deze zo nodig wilt verkleinen. Klik op Ja

als u de aeelding automatisch wilt schalen, zodat deze in het frame past.

Als er geen invoegpositie is (of als u ‘Nee’ antwoordt op de vraag), verschijnt de aanwijzer

Aeelding plakken

. De handeling die u nu uitvoert, bepaalt de aanvankelijke grootte

en positie van de ingevoegde aeelding.

7. Klik op de pagina als u de oorspronkelijke afmetingen wilt gebruiken om de aeelding in

te voegen.

Sleep een selectiekader met de muis als u aangepaste afmetingen wilt instellen voor de

aeelding. Houd de Shi-toets ingedrukt tijdens het slepen als u de aeelding niet-pro-

portioneel wilt schalen. (Standaard wordt de oorspronkelijke breedte-/hoogteverhouding

van de aeelding behouden wanneer u aangepaste afmetingen instelt.)

Studio Webdesign 4 Pro 157

Als u meerdere aeeldingen tegelijk wilt invoegen, selecteert u verschillende

aeeldingen in het dialoogvenster Openen en voegt u die een voor een aan de

pagina toe door te klikken en/of te slepen.

Afbeeldingen vervangen

U kunt een aeelding op elk moment door een andere aeelding vervangen. Dit is vooral

handig wanneer u de ingestelde grootte en positie van een aeelding wilt behouden, maar de

aeelding zelf wilt bijwerken. Merk op dat u de techniek die hierna wordt beschreven voor

elke aeelding kunt gebruiken, ongeacht of deze al dan niet is bijgesneden.

Zo vervangt u een afbeelding:

* Klik op de knop Aeelding vervangen vlak onder de geselecteerde aeelding. Navi-

geer in het dialoogvenster naar de map waarin de nieuwe aeelding is opgeslagen, selec-

teer deze en klik op Openen in het snelmenu.

Zo vervangt u een afbeelding via de mediabalk:

* Sleep de miniatuur van de aeelding die u wilt gebruiken naar een bestaande aeelding

vanuit het huidige album in de mediabalk. (Als de mediabalk momenteel niet zichtbaar is,

klikt u op de pijlknop onder in de werkomgeving om deze uit te vouwen.)

Bijgesneden afbeeldingen aanpassen

Studio Webdesign ondersteunt een aantal extra opties om met bijgesneden aeeldingen te

werken, hetzij aeeldingen die u hebt bijgesneden met behulp van de gereedschappen Re-

gelmatig bijsnijden en Onregelmatig bijsnijden in de gereedschapset, hetzij vooraf gede-

nieerde aeeldingen in de designsjablonen die u naar behoee door uw eigen aeeldingen

kunt vervangen. Zo kunt u bijvoorbeeld naar behoee in- of uitzoomen op een bijgesneden

aeelding en deze verplaatsen binnen het ‘aeeldingskader’ om te bepalen welk deel ervan

precies zichtbaar is, of de instellingen voor het schalen en uitlijnen van de aeelding wijzigen

door de eigenschappen van het kader aan te passen.

Wanneer u een bijgesneden aeelding selecteert met het selectiegereedschap, verschijnt vlak

onder de aeelding een besturingsbalk met opties om de aeelding te verplaatsen in het ka-

der, deze te roteren, in of uit te zoomen op de aeelding, en deze door een andere aeelding

te vervangen.

* Als u een bijgesneden aeelding wilt verplaatsen binnen het aeeldingskader, klikt u op

en sleept u terwijl u de linkermuisknop ingedrukt houdt over de aeelding totdat het

gewenste gedeelte ervan wordt weergegeven in het kader.

158 Studio Webdesign 4 Pro

* Om een aeelding in stappen van 90° naar links te roteren, klikt u op .

* Om in of uit te zoomen op een bijgesneden aeelding, klikt u op een van de zoomgereed-

schappen

* Als u de aeelding door een andere aeelding wilt vervangen, klikt u op

, bladert u

naar de map waarin de nieuwe aeelding is opgeslagen, selecteert u deze en klikt u op

Openen.

Zo wijzigt u de eigenschappen van het afbeeldingskader:

1. Klik met de rechtermuisknop op een bijgesneden aeelding en kies Eigenschappen van

frame in het snelmenu.

Selecteer de aeelding en klik op Eigenschappen van frame op de optiebalk.

2. Geef in het dialoogvenster aan of u de aeelding optimaal of minimaal wilt schalen,

of als u deze wilt uitrekken. Als u de oorspronkelijke afmetingen van de aeelding wilt

gebruiken, klikt u op Niet schalen.

3. Geef aan hoe u de aeelding verticaal wilt uitlijnen in het kader. U hebt de keuze uit Bo-

ven, Midden en Onder.

4. Kies tot slot de gewenste horizontale uitlijning voor de aeelding.

Als u een aeelding selecteert die niet is bijgesneden, is alleen de knop Aeel-

ding vervangen beschikbaar.

Insluiten versus koppelen

Als u een aeelding in uw site insluit, staat de aeelding in uw projectbestand volledig los

van het oorspronkelijke bestand op de harde schijf. Een nadeel van deze methode is dat de

bestandsomvang van uw projectbestand hierdoor aanzienlijk toeneemt. Bovendien moet u de

aeelding opnieuw importeren nadat u deze hebt bewerkt als u de ingesloten aeelding later

wilt wijzigen. Hoe dan ook, dit is de beste keuze als de bestandsomvang geen rol speelt en u

zeker weet dat u een aeelding achteraf niet meer hoe te bewerken.

Als u een aeelding aan uw site koppelt, wordt een kopie van het oorspronkelijke bestand in

uw project ingevoegd. Deze kopie is aan het bronbestand gekoppeld, zodat alle wijzigingen

die u aanbrengt in het bronbestand ook zichtbaar zijn in uw project. Het voordeel van deze

methode is dat u de bestandsomvang van de uiteindelijke site op deze manier aanzienlijk kunt

beperken. Het nadeel is echter dat u de externe bronbestanden en de koppelingen met deze

bestanden zorgvuldig moet beheren. Als u het projectbestand bijvoorbeeld naar een andere

map of een andere schijf verplaatst, moet u ook alle koppelingen bijwerken.

Als u aeeldingen importeert die kleiner zijn dan 256 kB, activeert Studio Webdesign stan-

daard de optie Aeelding insluiten in het dialoogvenster Aeelding invoegen. (U kunt in

plaats daarvan echter altijd de optie Aeelding koppelen selecteren.) U kunt deze drempel-

waarde overigens wijzigen. Desgewenst kunt u deze voorziening zelfs volledig uitschakelen.

Studio Webdesign 4 Pro 159

Merk op dat u de OLE-status van aeeldingen (koppelen of insluiten) achteraf op elk mo-

ment kunt wijzigen via de voorziening Bronnen beheren in Sitebeheer.

Wat aeeldingen betre die u vanuit de mediabalk toevoegt, geldt het volgende: aeeldingen

die kleiner zijn dan 256 kB worden standaard ingesloten; aeeldingen die groter zijn dan 256

kB worden gekoppeld. U kunt deze status echter altijd wijzigen door de Shi-toets ingedrukt

te houden terwijl u een aeelding vanuit de mediabalk naar de pagina sleept.

Zo bepaalt u of afbeeldingen standaard worden ingesloten dan wel aan uw site

worden gekoppeld, afhankelijk van de bestandsomvang:

1. Kies Extra > Opties en klik op Algemeen.

2. Stel via de vervolgkeuzelijst ... insluiten indien < x kB de gewenste drempelwaarde in als u

wilt dat aeeldingen die kleiner zijn dan de opgegeven bestandsomvang standaard in uw

site worden ingesloten. (Bij aeeldingen die de ingestelde drempelwaarde overschrijden,

stelt het programma standaard voor die aan uw site te koppelen.)

3. Schakel het selectievakje Insluiten/koppelen guur voorstellen uit als u bij het impor-

teren van aeeldingen zelf wilt kiezen of u ze wilt insluiten of koppelen. U kunt dan nog

altijd een van beide opties selecteren in het dialoogvenster Aeelding invoegen. Studio

Webdesign onthoudt automatisch de instelling die u de vorige keer hebt gekozen.

DE MEDIABALK GEBRUIKEN

De mediabalk is als het ware een ‘mandje’ waarin u alle foto’s kunt plaatsen die u in uw web-

site wilt gebruiken. Het hoofddoel van deze balk is ervoor zorgen dat uw foto’s altijd binnen

handbereik zijn, zonder dat u ze een voor een hoe te importeren. Vooral bij het ontwerpen

van een website met talrijke foto’s, al dan niet op basis van de ingebouwde designsjablonen, is

de mediabalk een onmisbaar gereedschap om foto’s snel en eenvoudig te kunnen vervangen

(door ze vanuit de mediabalk naar bestaande aeeldingen in uw site te slepen).

160 Studio Webdesign 4 Pro

U kunt de mediabalk naar behoee als een soort tijdelijke opslagruimte voor uw foto’s ge-

bruiken voordat u die aan uw website toevoegt, of als hulpmiddel om permanente fotoalbums

te maken waaruit u later op elk gewenst moment foto’s kunt ophalen. Standaard worden de

geselecteerde foto’s aan een tijdelijk album toegevoegd. Desgewenst kunt u dit album ech-

ter onder een specieke naam opslaan, zodat u het later kunt hergebruiken. Klik hiertoe op

Nieuw album. Dan kunt u telkens als u het programma start ofwel het opgeslagen album (of

een van de andere opgeslagen albums) openen ofwel gewoon met een tijdelijk album werken.

Aan u de keuze!

Merk op dat u een onbeperkt aantal foto’s kunt importeren in de mediabalk. Desgewenst kunt

u zelfs volledige mappen met foto’s importeren. Hierbij kunt u vooraf al aangeven of u de

foto’s in uw project wilt insluiten of ze aan uw project wilt koppelen – nog voordat u ze op de

pagina hebt geplaatst.

Als u een groot aantal foto’s hebt geïmporteerd, kunt u gebruikmaken van de ingebouwde

zoekfunctie om op bestandsnaam of EXIF-, IPTC- of XMP-metagegevens naar foto’s te zoe-

ken in uw albums, zodat u elke foto snel terugvindt. Studio Webdesign biedt u zelfs de moge-

lijkheid XMP-metagegevens rechtstreeks te bewerken.

Het huidige album in de mediabalk blij altijd zichtbaar, ongeacht het docu-

ment dat u opent.

Zo geeft u de mediabalk weer:

* Klik op de greep onder in de werkomgeving.

Zo voegt u foto’s aan een tijdelijk album toe:

1. Controleer of in de vervolgkeuzelijst rechtsboven de optie Tijdelijk album is geselecteerd

en klik in het werkgebied van de mediabalk om het dialoogvenster Aeelding invoegen te

openen.

2. Navigeer in het dialoogvenster naar de map waarin uw foto’s zijn opgeslagen en selecteer

de foto’s die u wilt importeren. Merk op dat de foto’s standaard aan uw project worden

gekoppeld.

3. Klik op Openen. In de mediabalk verschijnen nu miniaturen van de geselecteerde foto’s.

Het tijdelijke album en de foto’s die het bevat, worden niet opgeslagen wanneer

u het programma afsluit, tenzij u dit tijdelijke album onder een specieke naam

opslaat.

Studio Webdesign 4 Pro 161

U kunt foto’s ook rechtstreeks naar de mediabalk slepen vanuit Windows

Verkenner. Als u met de rechtermuisknop op een foto klikt en Zoeken in Ver-

kenner kiest in het snelmenu, wordt de inhoud van de overeenkomstige map

weergegeven met Windows Verkenner – ideaal om bestanden te beheren of via

slepen-en-neerzetten nieuwe foto’s aan de mediabalk toe te voegen!

Zo slaat u een tijdelijk album op:

1. Klik op het pijltje naast de knop om het bijbehorende vervolgmenu weer te

geven en kies Nieuw album.

2. Geef in het dialoogvenster Nieuw album een naam op voor het nieuwe album.

3. (Facultatief) U kunt de resolutie (originele resolutie of resolutie van 96 dpi) en de OLE-

status (koppelen of insluiten) van uw foto’s wijzigen voordat u ze aan uw webpagina’s toe-

voegt. Klik hiertoe in de overeenkomstige kolom voor een willekeurige foto en kies de

gewenste optie in de vervolgkeuzelijst. Merk op dat u deze instellingen ook kunt wijzigen

terwijl u een foto naar de pagina sleept.

4. Klik op OK.

Als u foto’s in een tijdelijk album in een bestaand album wilt opnemen, klikt u op de knop

Toevoegen aan en kiest u een album in het vervolgmenu.

Zo maakt u een nieuw album:

1. Klik op op de mediabalk.

2. Geef in het dialoogvenster Nieuw album een naam op voor het nieuwe album.

3. Klik op

Aeelding toevoegen of Map toevoegen.

4. Navigeer in het dialoogvenster naar de map waarin uw foto’s zijn opgeslagen en selecteer

een of meer foto’s (of selecteer meteen een volledige map met foto’s), en geef aan of u de

foto’s met de originele resolutie of met een resolutie van 96 dpi wilt invoegen en of u ze in

uw project wilt insluiten of ze aan uw project wilt koppelen. Klik vervolgens op Openen.

5. In het dialoogvenster Nieuw album verschijnt een overzicht van alle foto’s die in het al-

bum zullen worden opgenomen. Wijzig indien nodig de dpi-instellingen en/of opties voor

het insluiten/koppelen van de foto’s door in de overeenkomstige kolom te klikken en de

gewenste optie te kiezen in het vervolgmenu.

6. Klik op OK.

Zo opent u een opgeslagen album:

* Selecteer het desbetreende album in de vervolgkeuzelijst rechtsboven op de mediabalk.

U kunt een opgeslagen album selecteren (zie hiervoor) en dit album vervolgens bewerken

door op

te klikken. (Merk op dat deze knop alleen beschikbaar is voor bestaande

albums.) Via het dialoogvenster Album beheren dat daarop verschijnt, kunt u eenvoudig

nieuwe foto’s of volledige mappen met foto’s aan het album toevoegen, bestaande foto’s uit het

album verwijderen, de dpi-instellingen voor specieke foto’s wijzigen, enzovoort.

162 Studio Webdesign 4 Pro

Zo verwijdert u een album of geeft u het een andere naam:

* Klik met de rechtermuisknop op de naam van een bestaand album rechtsboven op de

mediabalk en kies Album verwijderen of Albumnaam wijzigen in het snelmenu.

Zo sorteert u foto’s in een album:

* Klik op het pijltje naast de knop Sorteren op linksboven op de mediabalk om het bijbeho-

rende vervolgmenu weer te geven en geef aan of u de foto’s op bestandsnaam, classicatie

of datum wilt sorteren.

Foto’s toevoegen aan de pagina

Zo voegt u een foto toe aan uw pagina:

1. Geef het tijdelijke album weer of open een opgeslagen album via de vervolgkeuzelijst

rechtsboven.

2. Klik op de miniatuur van de foto die u wilt toevoegen en sleep deze naar de pagina vanuit

de mediabalk.

EXPORTOPTIES INSTELLEN VOOR AFBEELDINGEN

Wanneer u uw project als website exporteert, past het programma allerlei globale instellingen

toe om te bepalen hoe elke aeelding (ongeacht het type aeelding) uiteindelijk moet wor-

den weergegeven op het web.

Aanvankelijk zijn de volgende conversieopties ingesteld voor webpublicaties:

* Elke aeelding in de site wordt als afzonderlijk bestand geëxporteerd.

* Elke aeelding die in gif-, jpeg- of png-indeling werd ingevoegd, wordt in de oorspron-

kelijke bestandsindeling geëxporteerd. Hierbij wordt de oorspronkelijke bestandsnaam

gebruikt.

* Geïmporteerde metabestanden en alle andere aeeldingen worden als png-bestanden ge-

exporteerd.

U kunt deze instellingen wijzigen. Voordat u dit echter doet, is het erg belangrijk dat u ver-

trouwd bent met de ‘logica’ die Studio Webdesign hanteert bij het publiceren van webaeel-

dingen. Studio Webdesign hee één standaardindeling waarnaar alle aeeldingen worden

geconverteerd tijdens het exporteren van de website. U kunt echter uitzonderingen deniëren

op deze regel door op te geven dat bij bepaalde typen aeeldingen de oorspronkelijke be-

standsindeling behouden moet blijven. Aanvankelijk is png de standaardindeling. Hierbij zijn

echter standaard enkele uitzonderingen gedenieerd voor gif- en jpeg-aeeldingen. Dit is de

reden waarom aeeldingen in gif- en jpeg-indeling niet worden geconverteerd, terwijl alle

andere aeeldingen in png-indeling worden omgezet.

U kunt deze instellingen controleren en/of wijzigen via het dialoogvenster Eigenschappen

van site (toegankelijk via het menu Bestand). Merk op dat de instellingen in dit dialoog-

venster globaal worden toegepast en voor alle aeeldingen in de site gelden. Zoals hiervoor

al werd gezegd, kunt u echter uitzonderingen deniëren voor afzonderlijke aeeldingen. U

Studio Webdesign 4 Pro 163

kunt hierbij op twee manieren te werk gaan:

* U kunt gebruikmaken van het dialoogvenster Exportopties of de voorziening Exportop-

ties beheren om de gewenste bestandsindeling in te stellen voor het exporteren van afzon-

derlijke aeeldingen.

U kunt bepaalde aeeldingen vooraf naar een specieke indeling converteren met de op-

dracht Extra > Naar aeelding converteren.

Aan de hand van deze globale en lokale instellingen hebt u vrijwel volledig controle over de

manier waarop uw aeeldingen uiteindelijk op het web terechtkomen! Laten we echter eerst

even nagaan hoe de globale instellingen werken…

Zo stelt u globale exportopties in voor webafbeeldingen:

1. Kies Bestand > Eigenschappen van site en klik op de tab Aeeldingen.

2. Activeer het selectievakje Aeeldingen die elkaar overlappen optimaliseren als u wilt

dat Studio Webdesign de site analyseert en aeeldingen die elkaar overlappen als één

aeelding exporteert (wanneer dit een kleinere bestandsgrootte oplevert). Of het zinvol is

deze optie in te schakelen, is aankelijk van uw lay-out. In plaats van deze globale instel-

ling te gebruiken, kunt u in specieke gevallen wellicht beter de opdracht Extra > Naar

aeelding converteren gebruiken.

3. Als u wilt dat aeeldingen in een bepaalde bestandsindeling niet worden geconverteerd

(ingevoegde jpeg-aeeldingen, gif-bestanden en/of png-bestanden), activeert u de over-

eenkomstige selectievakjes in het groepsvak Ingevoegde aeeldingen. Alle bestandsin-

delingen die u hier selecteert, blijven behouden tijdens het exporteren van de website.

4. Selecteer in het groepsvak Gegenereerde aeeldingen de indeling waarin u aeeldingen

wilt exporteren. Dit is de indeling waarnaar alle aeeldingen zullen worden geconver-

teerd tijdens het exporteren van de site, tenzij u uitzonderingen instelt.

5. Activeer het selectievakje Originele bestandsnamen van aeeldingen gebruiken als u

aeeldingen met hun oorspronkelijke bestandsnaam wilt exporteren. De aeeldingen

worden in de hoofdmap van de gepubliceerde website opgeslagen.

Exportopties, een titel en alternatieve tekst instellen voor afzonderlijke

afbeeldingen

Met de wizard Exportopties beheren kunt u de gewenste exportopties instellen voor afzon-

derlijke aeeldingen of voor objecten die automatisch naar een aeelding worden gecon-

verteerd tijdens het exporteren van de site, zoals geroteerde tekst. Deze lokale instellingen

onderdrukken de globale instellingen die u hiervoor hebt gecongureerd. U kunt met deze

voorziening naar behoee een of meer geselecteerde aeeldingen, de huidige pagina of de

volledige site controleren. Hierbij kunt u voor elke aeelding de gewenste instellingen kiezen.

U kunt op verschillende manieren te werk gaan:

* U kunt een aeelding in een specieke indeling exporteren (jpg, gif of png), of de stan-

daardinstellingen voor de site behouden. Als u voor de jpg-indeling kiest, kunt u de ge-

wenste compressieverhouding instellen.

164 Studio Webdesign 4 Pro

* U kunt een specieke map en bestandsnaam kiezen om de aeelding op te slaan. Dat is

bijvoorbeeld zinvol als u beschrijvende namen wilt gebruiken voor de aeeldingen in

plaats van de bestandsnamen die het programma automatisch genereert tijdens het expor-

teren van de site.

Aanvankelijk kunt u voor alle aeeldingen wellicht het beste de optie Standaardinstellin-

gen voor site gebruiken selecteren. Als u de oorspronkelijke globale instellingen niet hebt

gewijzigd, blijven de originele bestandsindeling en bestandsnaam behouden wanneer u gif-,

jpeg- en png-aeeldingen exporteert. Andere aeeldingen, zoals AutoVormen en gesloten

vormen, worden als png-bestanden geëxporteerd. Bekijk vervolgens een voorbeeld van uw

website en ga na of u de globale instellingen moet wijzigen of een andere bestandsindeling

moet instellen voor specieke aeeldingen.

Zelfs als u de oorspronkelijke instellingen niet wijzigt, kunt u ook een titel opgeven voor

een aeelding. Deze titel wordt als scherminfo weergegeven wanneer internetgebruikers de

muisaanwijzer op de aeelding laten rusten in een browser. Daarnaast kunt u ook een alter-

natieve tekst (ALT-tekst) opgeven die internetgebruikers kunnen lezen terwijl een aeelding

wordt gedownload. Dergelijke ‘tags’ verschijnen in het kader voor de aeelding terwijl de

aeelding in de browser van de gebruiker wordt geladen.

Zo stelt u exportopties, een titel en/of een ALT-tekst in:

1. Als u een specieke aeelding in uw site wilt controleren, selecteert u deze eerst en kiest u

vervolgens Exportopties in het menu Opmaak (of in het snelmenu voor de aeelding).

Kies Extra > Exportopties instellen als u de exportopties voor alle aeeldingen in de site

wilt controleren.

2. Geef aan of u alleen de geselecteerde aeelding, alle aeeldingen op de huidige pagina

of alle aeeldingen in uw site wilt controleren en klik op Doorgaan (als u de wizard

Exportopties beheren gebruikt). Voor elke aeelding in het ingestelde bereik wordt het

dialoogvenster Exportopties weergegeven.

3. In het groepsvak Aeelding opslaan als van het dialoogvenster kunt u aangeven hoe u de

desbetreende aeelding wilt exporteren:

* Als u de aeelding in een specieke indeling wilt opslaan en het programma de be-

standsnaam wilt laten kiezen, activeert u de optie In dit formaat opslaan... en selec-

teert u het keuzerondje GIF, JPEG of PNG. Als u de standaardindeling wilt gebruiken

die u in het dialoogvenster Eigenschappen van site hebt ingesteld, maar het programma

de aeelding automatisch een naam wilt laten geven, activeert u de optie Standaardin-

stellingen voor site gebruiken Als u voor de jpg-indeling kiest, kunt u ook de compres-

sieverhouding instellen.

* Als u de aeelding met een welbepaalde bestandsnaam wilt exporteren en deze in een

specieke map wilt opslaan, activeert u de optie Aangepaste naam en map opgeven.

en klikt u op de knop Map kiezen. In het dialoogvenster dat daarop verschijnt, kunt u

aangeven of u de originele bestandsnaam wilt gebruiken (selecteer de optie Standaard-

naam gebruiken) of een nieuwe bestandsnaam wilt opgeven (selecteer Naam kiezen

Studio Webdesign 4 Pro 165

en typ een nieuwe bestandsnaam). In beide gevallen kunt u de map selecteren waarin

u de geëxporteerde aeelding wilt opslaan. Standaard wordt de bestandsindeling ge-

bruikt die u in het dialoogvenster Eigenschappen van site hebt ingesteld. U kunt deze

standaardinstelling echter negeren door een andere bestandsextensie te typen in het

vak Naam kiezen, bijvoorbeeld door .gif als extensie in te voeren in plaats van .png.

4. Activeer het selectievakje Deze aeelding niet optimaliseren als de aeelding een an-

dere aeelding in uw project overlapt, maar u beide aeeldingen niet als één aeelding

wilt exporteren tijdens het publiceren van de site.

5. (Facultatief) In het groepsvak onderaan kunt u desgewenst nog een methode kiezen om

de resolutie van de aeelding te optimaliseren. Merk op dat de resolutie altijd wordt her-

berekend als u hiervoor een andere bestandsindeling hebt gekozen.

6. Klik op de tab Alt-tekst en titel en typ een korte beschrijving in het invoervak boven-

aan als u een titel wilt opgeven voor de aeelding. De tekst die u hier invoert, wordt in

de meeste moderne browsers als scherminfo weergegeven wanneer internetgebruikers de

muisaanwijzer boven de aeelding laten rusten.

7. Wijs op hetzelfde tabblad ook een ALT-tekst toe aan de aeelding. Dit is de tekst die in

het kader voor de aeelding wordt weergegeven terwijl deze wordt gedownload en die

hardop wordt voorgelezen door schermlezers wanneer gebruikers er de muisaanwijzer

boven laten rusten. U kunt naar behoee uw eigen tekst invoeren in het invoervak of

het selectievakje Standaard ALT-tekst gebruiken activeren. In het laatstgenoemde geval

wordt de aeelding als volgt geëxporteerd:

* Als het om een aeelding gaat die louter een decoratieve functie hee (een aeelding

die geen tekst bevat), wordt er geen ALT-tekst aan toegewezen.

* Gaat het om een aeelding waarop gebruikers kunnen klikken, zoals een knop met

een tekstlabel (Vorige, Volgende, enzovoort), dan wordt automatisch de tekst die op de

knop wordt afgebeeld als ALT-tekst geëxporteerd. Als u een titel hebt opgegeven voor

de aeelding, wordt de titeltekst als ALT-tekst gebruikt.

8. Klik op OK.

TEKORTKOMINGEN IN AFBEELDINGEN VERHELPEN

Wanneer u een aeelding selecteert in de werkomgeving, verschijnt automatisch de optie-

balk voor aeeldingen. Wellicht is het u al opgevallen dat deze balk diverse gereedschappen

bevat waarmee u allerlei tekortkomingen in uw aeeldingen kunt verhelpen. Zo kunt u een

willekeurige aeelding in uw site bijvoorbeeld snel en eenvoudig optimaliseren door recht-

streeks de helderheid en het contrast ervan te wijzigen (of door het programma automatisch

de helderheidsniveaus en het contrast van de aeelding te laten aanpassen), rode ogen te

verwijderen of door allerlei andere correcties door te voeren.

Om dergelijke correcties door te voeren, kunt u diverse aanpassingslters toepassen, zoals

Niveaus, Kleurbalans, Kanaalmixer, Stof en krassen verwijderen en Kleurtoon/verzadiging/

helderheid om er maar enkele te noemen. Daarnaast kunt u ook allerlei artistieke eecten,

166 Studio Webdesign 4 Pro

zoals Diuse gloed, en verschillende vervagingseecten op uw aeeldingen toepassen. In

totaal kunt u uit maar liefst 20 aanpassingslters kiezen, die u rechtstreeks kunt toepassen.

Desgewenst kunt u ook meerdere aanpassingslters tegelijk toepassen.

Al deze lters zijn toegankelijk vanuit het dialoogvenster Aanpassingen doorvoeren. Dit dia-

loogvenster is als het ware het zenuwcentrum om aanpassingen door te voeren. Aan de hand

van het voorbeeldvenster aan de rechterkant kunt u meteen het eect van uw instellingen

controleren!

U kunt deze aanpassingslters zowel toepassen op geïmporteerde aeeldingen

als op objecten die u naar een aeelding hebt geconverteerd in het programma.

Als u andere geavanceerde bewerkingen wilt uitvoeren en Foto- & Beeldbewerking van Easy

Computing hebt geïnstalleerd, kunt u ook op de knop Bewerken klikken op de optiebalk om

de aeelding rechtstreeks in dit programma te laden. Daar kunt u de gewenste bewerkingen

uitvoeren en de aeelding vervolgens opslaan. Ongeacht of u de aeelding in uw site hebt

ingesloten of deze hebt gekoppeld, uw wijzigingen worden automatisch bijgewerkt in Studio

Webdesign.

Een aanpassingsﬁlter toevoegen

Om een bepaalde aanpassing door te voeren in een aeelding, selecteert u gewoon de over-

eenkomstige optie in het vervolgmenu Filter toevoegen van het dialoogvenster Aanpassingen

doorvoeren. Om u te helpen bij het kiezen van het juiste aanpassingslter, is het vervolgmenu

in twee delen ingedeeld: lters om tekortkomingen te verhelpen (eerste hel van het menu)

en lters waarmee u bepaalde eecten kunt introduceren in een aeelding (tweede hel van

het menu). Het geselecteerde lter wordt meteen aan de lijst toegevoegd, waaraan u op de-

zelfde manier nog meer lters kunt toevoegen. Via deze lijst kunt u elk lter naar behoee in-

of uitschakelen, verwijderen of de volgorde van de lters wijzigen. Merk op dat de volgorde

waarin de lters worden weergegeven in de lijst een invloed hee op het eindresultaat. Maak

Studio Webdesign 4 Pro 167

u geen zorgen als de lters niet in de juiste volgorde staan. U kunt ze naar een willekeurige

andere positie slepen in de lijst.

Het lter dat u het laatst hebt toegevoegd, verschijnt altijd onder aan de lijst en wordt als

laatste toegepast op de aeelding (nadat de andere aanpassingen erboven zijn doorgevoerd).

In het bovenstaande voorbeeld wordt eerst het lter Diuse gloed en vervolgens het lter

Niveaus op de aeelding toegepast.

Zo voegt u een aanpassingsﬁlter toe:

1. Selecteer de aeelding waarop u een aanpassingslter wilt toepassen.

2. Klik op

op de optiebalk.

3. Klik in het dialoogvenster Aanpassingen doorvoeren op

Filter toevoegen.

4. Selecteer een aanpassingslter in het vervolgmenu. Het lter wordt aan de lijst toege-

voegd.

5. Aankelijk van het lter dat u hebt geselecteerd, kunt u op twee manieren te werk gaan

om de gewenste instellingen te kiezen:

Gebruik de schuifregelaars (indien aanwezig) of de invoervakken om de huidige instellingen

te veranderen.

Bij meer complexe aanpassingen kunt u een dialoogvenster gebruiken om de vereiste instel-

lingen te kiezen. Klik op de knop

Geavanceerde eigenschappen om dit dialoogvenster

weer te geven.

Opmerking: bij sommige aanpassingslters kunt u geen instellingen kiezen. Dergelijke lters

worden meteen toegepast als u ze selecteert.

6. Klik op OK.

Herhaal de bovenstaande stappen als u meerdere aanpassingslters wilt toepassen op de af-

beelding.

Zo verwijdert u een aanpassingsﬁlter:

* Selecteer het lter dat u wilt verwijderen en klik op .

Aanpassingsﬁlters in-/uitschakelen

Net zoals u in beeldbewerkingsoware de inhoud van een laag kunt weergeven of verbergen,

kunt u een aanpassingslter tijdelijk zichtbaar/onzichtbaar maken door op de knop Uit-

schakelen te klikken.

De instellingen voor een ﬁlter veranderen

U kunt de instellingen voor een aanpassingslter op twee manieren veranderen:

* Bij sommige lters worden de instellingen rechtstreeks in de lijst weergegeven. In dat geval

kunt u de beschikbare besturingselementen gebruiken om de huidige instellingen te ver-

anderen.

168 Studio Webdesign 4 Pro

* Sommige aanpassingen zijn van nature uit zo complex dat de instellingen ervoor in een

afzonderlijk dialoogvenster moeten worden gekozen. Klik in dat geval op de knop Ge-

avanceerde eigenschappen uiterst rechts om de instellingen voor het lter te verande-

ren.

De volgorde van de ﬁlters wijzigen

U kunt de volgorde waarin de ingestelde lters op de aeelding worden toegepast naar be-

hoee aanpassen door ze naar een andere positie te slepen in de lijst. De donkere lijn gee aan

waar het lter zal worden ingevoegd als u de muisknop loslaat.

Meerdere ﬁlters tegelijk toepassen

U kunt meerdere aanpassingslters tegelijk toepassen op een aeelding. Onthoud in dit ver-

band dat het eindresultaat vaak sterk aankelijk is van de volgorde waarin u de lters hebt

toegevoegd.

TWAIN-AFBEELDINGEN IMPORTEREN

Als uw scanner of digitale camera TWAIN ondersteunt, kunt u aeeldingen en foto’s recht-

streeks via de TWAIN-standaard importeren in Studio Webdesign. U kunt de gescande aeel-

ding ook eerst in ti- of pcx-indeling opslaan voordat u die in het programma importeert.

Zo importeert u een gescande afbeelding:

* Kies Invoegen > Aeelding > TWAIN > Importeren.

Als u meerdere TWAIN-apparaten hebt geïnstalleerd, moet u wellicht de bron selecteren die

u wilt gebruiken om een aeelding te importeren.

Zo selecteert u een andere TWAIN-bron:

1. Kies Invoegen > Aeelding > TWAIN > Bron selecteren.

2. Selecteer het apparaat dat u wilt gebruiken om aeeldingen te importeren.

ANIMATIE TOEVOEGEN

Studio Webdesign biedt u de mogelijkheid allerlei fraaie animatie-eecten toe te voegen aan

een webpagina: geanimeerde lichtkranten, animated GIF’s en Flash-bestanden (*.swf).

Hierbij kunt u van elke animatie een voorbeeld weergeven en/of het eect naar behoee aan-

passen. Deze animaties lijken statisch nadat u ze aan een webpagina hebt toegevoegd, maar

komen tot leven zodra de site is geëxporteerd en internetgebruikers deze bekijken in een

webbrowser.

Studio Webdesign 4 Pro 169

Houd er rekening mee dat animaties een negatieve invloed hebben op de

downloadtijd van uw webpagina’s en op het web wellicht langzamer worden

weergegeven dan op uw computer.

Geanimeerde lichtkranten toevoegen

Een geanimeerde lichtkrant is een handig hulpmiddel om een koptitel of slagzin horizontaal

over het scherm te laten schuiven. In Studio Webdesign kunt u de gewenste achtergrondkleur

instellen voor uw lichtkranten, aangeven hoeveel regels tekst ze moeten bevatten, de tekst

naar behoee opmaken, de richting instellen waarin de tekst moet bewegen, enzovoort. Des-

gewenst kunt u zelfs een hyperlink instellen voor de lichtkrant (zie ‘Hyperlinks en bladwijzers

toevoegen’ in hoofdstuk 11). Het mooiste eect verkrijgt u door twee tekstregels met sterk

contrasterende tekstkleuren te gebruiken en die in tegenovergestelde richting over het scherm

te laten schuiven.

Geanimeerde lichtkranten gedragen zich als statische aeeldingen in Studio Webdesign. U

kunt ze op dezelfde manier kopiëren, verplaatsen en schalen als elk ander type aeelding.

Merk op dat de lichtkranten pas worden geanimeerd wanneer u een voorbeeld weergee van

de site of deze in een webbrowser bekijkt.

Zo voegt u een geanimeerde lichtkrant toe:

* Klik op Geanimeerde lichtkrant invoegen in het vervolgmenu met mediagereed-

schappen op de werkbalk Webobjecten.

Zo bewerkt u een geanimeerde lichtkrant:

* Dubbelklik op de lichtkrant om het dialoogvenster Geanimeerde lichtkrant toevoegen te

openen. Wijzig de instellingen in het dialoogvenster en klik vervolgens op OK.

Animated GIF’s toevoegen

U kunt een willekeurige animated GIF aan uw webpagina’s toevoegen in Studio Webdesign.

Dergelijke animaties lenen zich uitstekend om bepaalde thema’s te verduidelijken of uw pa-

gina’s leven in te blazen. Animated GIF’s gedragen zich als statische aeeldingen in het pro-

gramma. U kunt ze op dezelfde manier kopiëren, verplaatsen en schalen als elk ander type

aeelding. Merk op dat ze pas worden geanimeerd wanneer u een voorbeeld weergee van

de site of deze in een webbrowser bekijkt.

Zo voegt u een animated GIF toe:

1. Klik op Animated GIF invoegen in het vervolgmenu met mediagereedschappen op de

werkbalk Webobjecten.

2. Navigeer in het dialoogvenster naar de map waarin de animatie is opgeslagen en selecteer

deze. Activeer het selectievakje Voorbeeld als u rechts in het dialoogvenster een voor-

beeld wilt bekijken van het geselecteerde bestand (Windows XP).

170 Studio Webdesign 4 Pro

3. Activeer de optie Aeelding koppelen als u een koppeling naar het bronbestand wilt

invoegen in plaats van de aeelding in uw project in te sluiten. Om de aeelding in te

sluiten, selecteert u de optie Aeelding insluiten.

4. Klik op Openen.

5. De muisaanwijzer krijgt de volgende vorm:

. Klik op de pagina als u de standaardaf-

metingen wilt gebruiken om de animatie in te voegen. Sleep met de muis als u aangepaste

afmetingen wilt instellen voor de animatie.

Flash-bestanden gebruiken

Een Flash-bestand (*.swf) is een animatie die u met de Flash™ Player van Macromedia kunt

weergeven. (Flash is een vectorgeoriënteerd programma om webanimaties te maken.) Merk

op dat u dergelijke bestanden rechtstreeks op de pagina kunt afspelen, zonder dat u een voor-

beeld van de site hoe weer te geven in een browser (of in een afzonderlijk venster in het

programma). U kunt ze op dezelfde manier kopiëren, verplaatsen en schalen als elk ander

type aeelding.

Bekijk de categorie Flash-banners op het tabblad Galerij als u enkele Flash-animaties in ac-

tie wilt zien. Hier vindt u een indrukwekkende collectie banners waarvoor standaard al de

vereiste parameters zijn ingesteld, die u echter naar behoee kunt aanpassen. Deze banners

zijn zo ontworpen dat u het uiterlijk ervan (dat wil zeggen de tekst, aeeldingen en gebruikte

schemakleuren) eenvoudig kunt wijzigen zonder dat hiervoor enige ervaring met Flash is

vereist.

Zo voegt u een Flash-animatie toe:

1. Klik op Flash-object invoegen in het vervolgmenu met mediagereedschappen op de

werkbalk Webobjecten.

2. Klik in het dialoogvenster Flash-object op Bladeren, blader naar de map waarin het

Flash-bestand (*.swf) is opgeslagen dat u wilt gebruiken, selecteer het en klik op Ope-

nen. Klik op de knop Exportopties vlak daarnaast als u een andere bestandsnaam en/

of bestandslocatie wilt opgeven voor het exporteren van het Flash-bestand. Schakel het

selectievakje Flash-bestand insluiten in site uit als u een koppeling naar het bronbestand

wilt invoegen in plaats van het bestand in uw project in te sluiten.

3. (Facultatief) Klik in het groepsvak Parameters op Toevoegen (of Bewerken) om de ver-

eiste parameters in te stellen voor de animatie.

4. (Facultatief) Klik indien nodig in het groepsvak Extra bestanden op Toevoegen om de

vereiste bestanden toe te voegen voor de Flash-animatie.

5. (Facultatief) Kies in het groepsvak Weergaveopties de gewenste weergave-instellingen

voor de animatie. Experimenteer een beetje met de diverse opties totdat u tevreden bent

over de gekozen instellingen.

* Starten bij laden van pagina: schakel dit selectievakje uit als u wilt voorkomen dat de

animatie automatisch wordt afgespeeld bij het laden van de webpagina.

* Herhalen: vink dit selectievakje aan als u wilt dat de animatie voortdurend wordt her-

haald.

Studio Webdesign 4 Pro 171

* Transparante achtergrond: activeer deze optie als u de achtergrond van de animatie

transparant wilt maken (in plaats van wit). Dat is bijvoorbeeld zinvol als u objecten

tegen een gekleurde achtergrond wilt animeren!

* LiveConnect inschakelen: schakel deze optie uit als u wilt voorkomen dat er verbin-

ding wordt gemaakt met aanvullende bronnen op internet (die mogelijk vereist zijn

tijdens het afspelen van de animatie).

6. Klik op OK.

7. De muisaanwijzer krijgt de volgende vorm:

. Klik op de pagina als u de standaardaf-

metingen wilt gebruiken voor de animatie. Klik en sleep als u een aangepaste grootte wilt

instellen voor de animatie.

BEELD- EN GELUIDSFRAGMENTEN TOEVOEGEN

U kunt audio- en videobestanden aan uw webpagina’s toevoegen in Studio Webdesign. Hier-

bij kunt u uit verschillende standaardindelingen kiezen, zowel voor streaming als non-strea-

ming media. Daarnaast kunt u ook YouTube-video’s in uw site insluiten.

Geluid

* U kunt geluidsbestanden naar behoee als achtergrondgeluid of gekoppeld geluid in

uw site integreren. In het eerste geval wordt het geluidsbestand automatisch geladen en

afgespeeld wanneer de desbetreende pagina voor het eerst wordt weergegeven in een

webbrowser. In het tweede geval wordt het geluidsbestand afgespeeld na een bepaalde

muisgebeurtenis (bijvoorbeeld nadat de gebruiker op een pictogram hee geklikt, of op

een object dat als hyperlink fungeert). Studio Webdesign ondersteunt de volgende be-

standsindelingen voor geluidsbestanden: ai, au, MIDI (mid en midi), mp3, RealAudio

(ra en ram) en wav.

Video

* Gekoppelde videobestanden gedragen zich op dezelfde manier als gekoppelde geluids-

bestanden. Studio Webdesign ondersteunt de volgende indelingen voor videobestanden:

avi, QuickTime (mov, qt), mpeg (mpg, mpeg, mpe, mpv) en RealVideo (ram, rv). Non-

streaming bestanden worden pas afgespeeld nadat ze volledig zijn gedownload. Voor

streaming media is een speciale speler vereist die de gegevens die al zijn gedownload in

een buergeheugen opslaat, zodat het bestand kan worden weergegeven nog voordat het

volledig is gedownload.

* U kunt in uw webpagina’s ook bestaande YouTube-video’s integreren. Merk op dat Studio

Webdesign uitsluitend de unieke id van de YouTube-video, en niet het eigenlijke videobe-

stand, in uw projectbestand insluit wanneer u een YouTube-video op een pagina plaatst.

Hierbij voegt het programma automatisch een link naar www.youtube.com toe aan de

pagina. Zo kunt u eenvoudig content toevoegen aan uw pagina’s zonder dat u grote video-

bestanden hoe te uploaden.

172 Studio Webdesign 4 Pro

Zowel bij achtergrondgeluiden als gekoppelde geluidsbestanden (of videobestanden) kunt u

instellen of u het bronbestand in het projectbestand wilt insluiten of het aan uw site wilt

koppelen. (Denk eraan dat u YouTube-video’s niet in uw project kunt insluiten.) Hoewel de

bestandsgrootte van de website aanzienlijk toeneemt als u video- en geluidsbestanden insluit,

wordt het bronbestand standaard in het document ingesloten. Het voordeel hiervan is dat u

niet met afzonderlijke bestanden hoe te werken. Bovendien verkleint u zo het risico dat een

van de bestanden per ongeluk wordt verwijderd. Studio Webdesign neemt het exporteren en

kopiëren van zowel ingesloten als niet-ingesloten bestanden voor zijn rekening tijdens het

publiceren van de website.

Zo voegt u achtergrondgeluid toe aan een pagina:

1. Klik met de rechtermuisknop op de pagina in de werkomgeving (of op de overeenkom-

stige vermelding in de boomstructuur op het tabblad Site) en kies Eigenschappen van

pagina in het snelmenu.

2. Activeer op het tabblad Achtergrond het selectievakje Geluidsbestand gebruiken, blader

in het dialoogvenster Openen naar de map waarin het geluidsbestand is opgeslagen, selec-

teer het en klik op Openen.

3. Schakel het selectievakje Geluidsbestand in site insluiten uit als u het geluidsbestand aan

uw site wilt koppelen in plaats van het in te sluiten.

4. Activeer de optie Geluid herhalen als u wilt dat het geluidsbestand voortdurend opnieuw

wordt afgespeeld. Als u dit selectievakje uitschakelt, wordt het bestand maar één keer af-

gespeeld.

5. Klik desgewenst op Exportopties om een aangepaste bestandsnaam en map in te stellen

voor het bestand (zie ‘Exportopties instellen voor aeeldingen’ eerder in dit hoofdstuk).

Het geluidsbestand wordt automatisch gedownload en afgespeeld wanneer internetgebrui-

kers de desbetreende webpagina bekijken in hun browser.

De vraag is echter op welke manier u gebruikers de mogelijkheid wilt bieden een bepaald

mediabestand weer te geven. In Studio Webdesign zijn voor beide soorten mediabestanden

dezelfde basisopties beschikbaar:

* Via een object waarvoor een hyperlink of een hotspot is ingesteld: in dit geval moet u

van een bestaand object vertrekken in de site en een hyperlink instellen naar het mediabe-

stand of een hotspot deniëren voor een aeelding.

* Via een miniatuurweergave van een video: als u voor deze methode kiest, kunnen ge-

bruikers op een ingesloten miniatuurweergave klikken om de video af te spelen (alleen

beschikbaar voor YouTube-video’s).

Studio Webdesign 4 Pro 173

* Via een pictogram: Studio Webdesign biedt een pictogram dat al aan het mediabestand is

gekoppeld. Het enige wat u hoe te doen, is dit pictogram op de juiste positie plaatsen op

de pagina.

* Via een aeelding: als u voor deze methode kiest, moet u een externe aeelding selecte-

ren, die het programma vervolgens importeert en aan het mediabestand koppelt.

* Inline: in dit geval is er een mediaspeler zichtbaar op de gepubliceerde webpagina (terwijl

de mediaspeler in andere gevallen pas verschijnt nadat gebruikers op een hyperlink, pic-

togram of aeelding hebben geklikt). Als u voor deze optie kiest, zult u op de pagina een

plaatshouder aantreen op de positie waar de mediaspeler zal verschijnen.

Als u voor de eerste twee opties kiest, kunt u het mediabestand niet in uw project insluiten.

Als u voor een van de andere opties kiest, kunt u het bestand naar keuze insluiten of het aan

de site koppelen.

Zo koppelt u een video- of geluidsbestand aan een hyperlink of hotspot:

* Kies Invoegen > Hyperlink, klik op Bestand en selecteer het gewenste mediabestand als

u wilt dat internetgebruikers het bestand kunnen weergeven door op een object waarvoor

een hyperlink is ingesteld of op een hotspot te klikken.

Zo sluit u een YouTube-video in:

1. Open uw webbrowser, ga naar www.youtube.com en selecteer de YouTube-video waar-

naar u een link wilt invoegen.

2. Kopieer de URL van de video (of de code om deze in uw site te integreren). Deze URL be-

vat een alfanumerieke id (bijvoorbeeld ySnp4YXU6JQ) die de videoclip eenduidig identi-

ceert.

3. Klik op

YouTube-video insluiten in het vervolgmenu met mediagereedschappen op de

werkbalk Webobjecten.

Kies Invoegen > Media in de menubalk en klik op YouTube-video in het submenu.

4. Plak in het dialoogvenster YouTube-video insluiten de URL die u eerder naar het Klem-

bord hebt gekopieerd en klik op OK.

5. Plaats de aanwijzer

Plakken op de positie waar u de linkerbovenhoek van de video

wilt plaatsen.

6. Klik met de linkermuisknop als u de standaardafmetingen wilt gebruiken voor de video.

Klik en sleep als u een aangepaste grootte wilt instellen voor de video. Houd de Shi-toets

ingedrukt terwijl u sleept als u de oorspronkelijke beeldverhouding van de video wilt be-

houden.

Sommige websites verlangen mogelijk dat hun YouTube-video(‘s) regelmatig door een andere

video worden vervangen. Het is bijvoorbeeld mogelijk dat de site in kwestie een top 10 bij-

houdt die regelmatig verandert of video’s aanbiedt die aan de actualiteit zijn gekoppeld. Hoe

dan ook, in Studio Webdesign kunt u video’s eenvoudig vervangen zonder dat hun oorspron-

kelijke positie op de pagina wordt gewijzigd.

174 Studio Webdesign 4 Pro

Om een bestaande YouTube-video door een andere video te vervangen, dubbelklikt u gewoon

op de desbetreende video op de pagina. Ga vervolgens naar www.youtube.com en kopieer de

URL van de video waardoor u de huidige video vervangen naar het Klembord. Plak tot slot in

het dialoogvenster YouTube-video insluiten de URL van de nieuwe video en klik op OK.

Zo koppelt u een video- of geluidsbestand aan een pictogram, afbeelding of

inline speler:

1. Klik op Geluidsfragment invoegen of Beeldfragment invoegen in het vervolg-

menu met mediagereedschappen op de werkbalk Webobjecten.

2. Blader naar de map waarin het mediabestand is opgeslagen, selecteer het en klik op Ope-

nen.

3. Selecteer de gewenste optie in het groepsvak Weergaveopties (symbool, inline of aeel-

ding).

4. Schakel het selectievakje Geluidsbestand insluiten in site of Videobestand insluiten in

site uit als u het bestand aan uw project wilt koppelen in plaats van het in te sluiten.

5. Klik op OK om het dialoogvenster te sluiten. Klik vervolgens op de positie waar u het

symbool, de aeelding of de markering wilt invoegen. Sleep met de muis als u aangepaste

afmetingen wilt instellen voor het element.

EEN FLASH™-FOTOGALERIJ MAKEN

De gelijktijdige verspreiding van digitale camera’s en breedbandverbindingen hee een fan-

tastische gelegenheid gecreëerd om hele fotocollecties op het web te publiceren. Er zijn rede-

nen te over waarom u een online fotogalerij zou maken, maar hier zijn alvast enkele van de

meest voor de hand liggende:

* Wanneer u uw familiefoto’s online plaatst, kunnen ook vrienden en familieleden aan de

andere kant van de wereld ze bekijken.

* Foto’s op het web publiceren, is goedkoper dan er een afdruk van laten maken.

* Door fotogalerijen te maken, kunt u uw fotocollecties eenvoudig overzichtelijk indelen

(dierenfoto’s, vakantiefoto’s, enzovoort).

In Studio Webdesign kunt u snel en eenvoudig een Flash™-fotogalerij aan een willekeurige

webpagina toevoegen. Hierbij kunt u uit verschillende stijlen kiezen, die elk specieke mo-

gelijkheden bieden om door uw fotogalerij te bladeren. U kunt bijvoorbeeld gebruikmaken

van een besturingsbalk boven aan of onder aan de galerij om te waarborgen dat gebruikers

eenvoudig door uw galerij kunnen navigeren. U kunt echter nog een stapje verder gaan en be-

halve een besturingsbalk nog een ander navigatiehulpmiddel voorzien dat gebruikers in staat

stelt vlot door uw foto’s te bladeren. Zo kunt u, aankelijk van de stijl die u kiest, ook een van

de volgende besturingselementen in uw fotogalerij implementeren:

* miniaturen (met of zonder weerspiegeling) die volgens een welbepaald patroon zijn geor-

dend en als rollover fungeren;

* een verticale of horizontale navigatiebalk bestaande uit miniaturen waarop gebruikers

kunnen klikken om naar een specieke foto in uw galerij te gaan;

Studio Webdesign 4 Pro 175

* een fotoraster waar gebruikers eenvoudig door kunnen schuiven;

* foto’s die boven elkaar zijn gestapeld, gecombineerd met een horizontale navigatiebalk

(zoals in de onderstaande guur).

U kunt naar keuze afzonderlijke bestanden of meteen een hele map met foto’s importeren.

Desgewenst kunt u ook rechtstreeks foto’s van een digitale camera of scanner importeren. Na-

dat u de gewenste foto’s hebt toegevoegd, kunt u er allerlei bewerkingen op uitvoeren, zoals:

* de volgorde van de foto’s wijzigen (via slepen-en-neerzetten of met behulp van de knop-

pen Omhoog, Omlaag, Boven en Onder);

* de foto’s in stappen van 90° tegen de wijzers van de klok in roteren;

* bijschrien toevoegen;

* allerlei correcties doorvoeren om eventuele tekortkomingen in uw foto’s te verhelpen.

U kunt foto’s automatisch roteren (van liggend naar staand) wanneer u die rechtstreeks van

een digitale camera importeert, op voorwaarde natuurlijk dat deze voorziening wordt onder-

steund door uw camera.

Een fotogalerij maken

Een fotogalerij kan op dezelfde manier worden toegevoegd als afzonderlijke aeeldingen.

Alle foto’s worden als jpg-aeeldingen geëxporteerd, ongeacht de bestandsin-

deling van de oorspronkelijke foto’s en de instellingen die u hebt gekozen op het

tabblad Aeeldingen van het dialoogvenster Eigenschappen van site.

Zo voegt u een fotogalerij toe aan een pagina:

1. Klik op Flash-fotogalerij toevoegen in het vervolgmenu Aeeldingen toevoegen op

de werkbalk Standaardobjecten.

2. Doe in het dialoogvenster Flash-fotogalerij het volgende:

* Afzonderlijke bestanden toevoegen

Klik op Bestanden toevoegen linksboven in het dialoogvenster, blader naar de map

waarin uw foto’s zijn opgeslagen, selecteer ze en klik op Openen. (Houd de Ctrl- of

176 Studio Webdesign 4 Pro

Shi-toets ingedrukt als u meerdere foto’s tegelijk wilt selecteren.) Activeer het selec-

tievakje Voorbeeld in het dialoogvenster Openen als u een voorbeeld wilt bekijken van

de afzonderlijke foto’s naarmate u ze aan de selectie toevoegt.

* Alle foto’s in een map toevoegen

Klik op Map toevoegen als u meteen een volledige map met foto’s wilt toevoegen.

* Foto’s van een digitale camera of scanner importeren

Klik op TWAIN en kies Importeren in het vervolgmenu als u foto’s van een digitale

camera of scanner wilt importeren. Selecteer zo nodig eerst het bronapparaat dat u wilt

gebruiken om foto’s te importeren. Gebruik hiertoe de optie Bron selecteren in het

vervolgmenu.

* Als u een foto weer uit de galerij wilt verwijderen, selecteert u deze en klikt u op Ver-

wijderen. Klik op Alle verwijderen als u alle foto’s uit de galerij wilt verwijderen.

In het dialoogvenster Flash-fotogalerij verschijnen nu miniaturen van de

geselecteerde foto’s.

U kunt een geselecteerde miniatuur naar behoee schalen door te slepen

vanuit de rechterbenedenhoek. Begin te slepen zodra de muisaanwijzer de

vorm krijgt van een diagonale dubbele pijl.

Grote foto’s worden automatisch verkleind (tot 800 x 600 pixels en 96 dpi) om

de bestandsgrootte te beperken en de uploadtijd te verbeteren.

3. (Facultatief) Selecteer een miniatuur en voer zo nodig een van de volgende bewerkingen

uit:

Gebruik de knoppen Omhoog, Omlaag, Boven en Onder onder in het

dialoogvenster om de volgorde van de foto’s te wijzigen. Merk op dat u de volgorde van

de foto’s ook via slepen-en-neerzetten kunt wijzigen.

* Klik verschillende keren op de knop Roteren als u de geselecteerde foto in stappen van

90° naar rechts wilt roteren.

* Klik op Bijschri als u een bijschri wilt toevoegen aan de foto. Typ in het dialoogven-

ster dat daarop verschijnt het bijschri dat u wilt weergeven onder de foto. Merk op dat

bijschrien alleen zichtbaar zijn wanneer u een voorbeeld bekijkt van de site of nadat u

deze op het web hebt gepubliceerd.

* Klik op de knop Aanpassingen en kies een optie in het vervolgmenu als u allerlei

aanpassingen wilt doorvoeren in de foto. Met de opties in dit vervolgmenu kunt u

veelvoorkomende tekortkomingen in foto’s verhelpen, zoals het contrast en/of de hel-

Studio Webdesign 4 Pro 177

derheid verbeteren. Selecteer Aangepast in het vervolgmenu om het dialoogvenster

Aanpassingen doorvoeren te openen, van waaruit u nog meer aanpassingslters kunt

toepassen op de foto.

4. Activeer het selectievakje Aeeldingen insluiten als u de geselecteerde foto’s in uw web-

project wilt insluiten. Standaard wordt alleen een verwijzing naar de bronbestanden in het

project ingevoegd.

5. Klik op Volgende >.

6. Selecteer in het vak Stijl voor galerij boven in het dialoogvenster een stijl voor uw fo-

togalerij. Elke stijl biedt andere mogelijkheden om door de foto’s te navigeren. Probeer

verschillende stijlen uit totdat u de stijl hebt gevonden die aan uw verwachtingen beant-

woordt. Aan de hand van het voorbeeldvenster onderaan kunt u eenvoudig het eect

van elke stijl controleren. Let erop dat in elke stijl een besturingsbalk is geïmplementeerd

waarmee gebruikers later eenvoudig door uw fotogalerij kunnen navigeren.

De laatste drie opties op de besturingsbalk zijn alleen beschikbaar wanneer er achter-

grondmuziek is ingesteld.

7. (Facultatief) Gebruik het vak Instellingen aan de rechterkant om de gewenste opties in te

stellen voor de geselecteerde stijl (achtergrondmuziek, kleur van bijschrien, enzovoort).

Sommige opties zijn alleen voor specieke stijlen beschikbaar, zoals de mogelijkheid rol-

lovers in te schakelen voor de miniaturen, het aantal foto’s per stapel in te stellen, enzo-

voort.

8. Klik op Voltooien.

9. Klik op de pagina op de positie waar u de fotogalerij wilt invoegen als u de standaardaf-

metingen wilt gebruiken voor de galerij. Als u een aangepaste grootte wilt instellen voor

de galerij, klikt en sleept u met de muis totdat de fotogalerij de gewenste grootte hee.

Een fotogalerij bewerken

U kunt een fotogalerij naar behoee bewerken nadat u deze aan de pagina hebt toegevoegd.

Zo kunt u indien nodig bijvoorbeeld foto’s toevoegen of verwijderen, er een bijschri aan toe-

voegen of allerlei aanpassingen doorvoeren om veelvoorkomende tekortkomingen te verhel-

pen. Desgewenst kunt u achteraf ook een andere galerijstijl instellen, de achtergrondmuziek

of de kleur van de bijschrien wijzigen, enzovoort.

Zo bewerkt u een fotogalerij:

1. Selecteer de fotogalerij die u wilt bewerken.

178 Studio Webdesign 4 Pro

2. Dubbelklik op de galerij of klik op Galerij bewerken op de optiebalk. (U kunt ook met de

rechtermuisknop op de galerij klikken en Fotogalerij bewerken kiezen in het snelmenu.)

3. Wijzig de huidige instellingen in het dialoogvenster Flash-fotogalerij.

Merk op dat u een fotogalerij naar behoee kunt schalen nadat u deze aan de pagina hebt toe-

gevoegd. Hiertoe selecteert u de galerij en versleept u een van de grepen in de hoeken van het

selectiekader. Houd de Ctrl-toets ingedrukt tijdens het slepen als u de galerij proportioneel

wilt schalen.

EXTERNE AFBEELDINGEN KOPPELEN

U kunt ook een koppeling invoegen naar een aeelding op internet. Houd u in dat geval aan

het auteursrecht! Gebruik altijd aeeldingen van een betrouwbare bron als u gebruikmaakt

van deze voorziening. U kunt vanzelfsprekend ook koppelingen invoegen naar aeeldingen

op de website van een vriend of collega, waar dergelijke auteursrechten wellicht niet van toe-

passing zijn. Hoe dan ook, door koppelingen naar externe aeeldingen in te voegen, kunt

u snel de visuele uitstraling van uw website verbeteren. Zo kunt u zich volledig op andere

belangrijke designaspecten concentreren, zoals de inhoud van uw pagina’s.

Zo voegt u een koppeling naar een externe afbeelding toe:

1. Kies Invoegen > Aeelding > Koppeling naar extern bestand.

2. Geef in het dialoogvenster de URL van de aeelding op.

3. Klik op OK.

4. De muisaanwijzer krijgt de volgende vorm:

. De handeling die u nu uitvoert, bepaalt de

aanvankelijke grootte en positie van de aeelding.

5. Klik op de positie waar u de koppeling wilt invoegen als u de standaardafmetingen wilt

gebruiken voor de aeelding. Sleep met de muis als u aangepaste afmetingen wilt instellen

voor de aeelding.

Studio Webdesign 4 Pro 179

10 met kleuren, verloPen

en tranSParantie

Werken

EFFEN KLEUREN INSTELLEN

In Studio Webdesign kunt u voor verschillende objecttypen een kleuren instellen:

* U kunt een een kleur instellen voor de rand (contour) van een object of als vulkleur van

het object. Zoals u wellicht al vermoedt, hebben AutoVormen en gesloten vormen (zie

‘Vormen tekenen en bewerken’ in hoofdstuk 8) zowel lijn- als vuleigenschappen, terwijl

rechte lijnen en lijnen die u met de vrije hand tekent alleen lijneigenschappen hebben.

* U kunt ook een kleur instellen voor de tekst in tekstobjecten. Bij tekstframes en tabelcellen

kunt u voor de achtergrond een andere kleur instellen dan voor de tekst.

U kunt naar behoee het tabblad Kleur of Stalen in de studio of een dialoogvenster gebruiken

om een kleuren in te stellen voor een object.

Zo stelt u een effen kleur in via het tabblad Kleur:

1. Selecteer het object of tekstfragment waarvoor u een kleur wilt instellen.

2. Klik op de tab Kleur in de studio en selecteer een kleurruimte in de vervolgkeuzelijst

rechtsboven (RGB, CMYK of HSL).

3. Klik op

Vulkleur, Lijnkleur of Tekst boven aan het tabblad om aan te geven

waarvoor u precies een een kleur wilt instellen. Uit de kleur van de lijn onder de knop

kunt u aeiden welke kleur momenteel is ingesteld voor dit onderdeel van het geselec-

teerde object.

4. Selecteer een kleur in het kleurenspectrum onder aan het tabblad of gebruik de schuifre-

gelaars om de gewenste kleur in te stellen.

Wanneer RGB als kleurruimte is ingesteld, kunt u hexadecimale waarden ge-

bruiken door de optie Hexadecimale waarden te activeren in het vervolgmenu

voor het tabblad (toegankelijk via de knop

Zo stelt u een effen kleur in via het tabblad Stalen:

1. Selecteer het object of tekstfragment waarvoor u een kleur wilt instellen.

2. Klik op de tab Stalen in de studio.

180 Studio Webdesign 4 Pro

3. Klik op de knop Vulkleur, Lijnkleur of Tekst boven aan het tabblad om aan te

geven waarvoor u precies een een kleur wilt instellen.

Selecteer een kleurstaal in het huidige palet (een palet dat naast veelgebruikte

kleuren alle kleuren bevat die u al hebt gebruikt in de site), of klik op het pijltje naast de

knop Palet om het bijbehorende vervolgmenu te openen, selecteer een van de vooraf ge-

denieerde kleurenpaletten en klik vervolgens op de gewenste kleurstaal.

U kunt ook de opdracht Vulkleur/verloop in het menu Opmaak gebruiken in plaats van de

bovengenoemde tabbladen om een een kleur in te stellen voor objecten.

Zo wijzigt u de schakering/tint (helderheid) van een effen kleur:

1. Selecteer het object en klik op de knop Vulkleur, Lijnkleur of Tekst boven aan het tabblad

Kleur.

2. Selecteer in de vervolgkeuzelijst rechtsboven de optie Tint.

3. Sleep de schuifregelaar Schakering/tint naar links of naar rechts om de huidige kleur

respectievelijk donkerder of lichter te maken (de standaardwaarde is 0%). U kunt ook

rechtstreeks een percentage instellen via het kringveld naast de schuifregelaar. (Stel 0 in

als percentage als u de standaardwaarde wilt herstellen.)

Merk op dat u ook het tabblad Stalen kunt gebruiken om de schakering/tint van een kleur te

wijzigen. Typ hiertoe rechtstreeks een percentage in het invoervak

Tint of gebruik de

bijbehorende schuifregelaar om het gewenste percentage in te stellen.

KLEURENSCHEMA’S GEBRUIKEN

In Studio Webdesign hee elke website zijn eigen kleurenschema, dat u kunt instellen en be-

werken via de opdracht Schema’s beheren in het menu Extra. Elk schema hee een specieke

naam en bestaat uit vijf complementaire basiskleuren die u voor een willekeurig designele-

ment kunt instellen. U kunt deze vijf schemakleuren vergelijken met een systeem waarbij op

basis van getallen wordt geverfd (zie hierna). Merk op dat elk schema ook enkele additieve

kleuren bevat, die de kleur bepalen waarin hyperlinks (standaard hypertekst, gevolgde en

actieve hyperlinks) en de achtergrond van de pagina worden weergegeven. Als u een ander

kleurenschema instelt, worden alle elementen die gebruikmaken van schemakleuren meteen

bijgewerkt!

Studio Webdesign 4 Pro 181

In de bovenstaande guur ziet u het

eect wanneer u het schema ’Kin-

derkamer’ door het schema ‘Atlantis’

vervangt. Dit schema kunt u vervol-

gens weer door een ander kleuren-

schema vervangen, enzovoort.

In Studio Webdesign vertonen kleurenschema’s veel

overeenkomsten met een systeem waarbij op basis

van getallen wordt geverfd. Hierbij worden verschil-

lende gebieden in de lay-out met getallen gecodeerd.

Aan elk gebied wordt (op basis van deze getallen) een

specieke kleur toegewezen (zie de bloem in de -

guur, waarvoor het kleurenschema ‘Kinderkamer’ is

ingesteld). Door de ‘verfpotten,’ die van 1 tot en met 5

zijn genummerd, met verschillende kleuren te vullen,

zonder de getallen in de bloem te wijzigen, kunt u het

uiterlijk van de bloem aanzienlijk beïnvloeden.

In Studio Webdesign heten deze verfpotten ‘Schemakleur 1,’ ‘Schemakleur 2,’ enzovoort. Als

u schemakleur 1 toepast op een object, interpreteert het programma dit als ‘Plaats de kleur uit

verfpot nummer 1 hier.’

Onthoud dat u maximaal één kleurenschema kunt instellen voor een website. Op het tabblad

Stalen in de studio worden de basiskleuren van het huidige kleurenschema weergegeven. U

kunt echter gemakkelijk een ander schema instellen, de kleuren in een bepaald schema wij-

zigen, schema’s op een willekeurige site toepassen of aangepaste kleurenschema’s deniëren.

Merk op dat kleurenschema’s altijd globaal worden opgeslagen, zodat ze in alle sites beschik-

baar zijn.

Zo stelt u een ander kleurenschema in:

1. Geef het tabblad Stalen weer. Merk op dat linksonder op het tabblad de vijf basiskleuren

van het huidige kleurenschema worden weergegeven (in de vorm van stalen die van 1 tot

en met 5 zijn genummerd). Daarnaast worden nog enkele andere stalen weergegeven.

Deze stalen duiden de kleuren aan die voor hyperlinks, gevolgde hyperlinks, actieve hy-

perlinks, rollover-hyperlinks, de achtergrond van de pagina en de paginakleur worden

gebruikt.

2. Klik op een leeg gedeelte van de pagina of het plakbord om alle selecties op te heen en

klik vervolgens op de knop op de optiebalk (of kies Extra > Schema’s behe-

ren in de menubalk). Hiermee opent u het dialoogvenster Schema’s beheren, waarin alle

kleurenschema’s worden weergegeven waaruit u kunt kiezen voor uw website. Denk eraan

dat de vijf ‘verfpotten’ in elk kleurenschema andere kleuren bevatten.

182 Studio Webdesign 4 Pro

3. Selecteer het gewenste kleurenschema in de lijst en klik op OK. Alle gebieden in de web-

site waaraan een van de vijf schemakleuren uit het schema is toegewezen, worden door de

overeenkomstige kleur uit het nieuwe schema vervangen.

Merk op dat het huidige kleurenschema samen met het projectbestand wordt opgeslagen

wanneer u de website opslaat.

Additieve kleuren

Behalve de vijf basiskleuren bevat elk kleurenschema ook zes additieve kleuren.

* De kleur voor hyperlinks (met de letter H aangeduid op het tabblad Stalen) bepaalt de

kleur van hypertekst voordat er op wordt geklikt.

* De kleur voor gevolgde hyperlinks (met de letter F aangeduid) bepaalt de kleur van hy-

pertekst nadat de gebruiker op de hyperlink hee geklikt.

* De kleur voor actieve hyperlinks (met de letter A aangeduid) bepaalt de kleur van hyper-

tekst nadat de gebruiker op de hyperlink hee geklikt maar voordat de pagina waarnaar

de hyperlink verwijst wordt weergegeven.

* De kleur voor rollover-hyperlinks (met de letter R aangeduid) bepaalt de kleur van hy-

pertekst wanneer de gebruiker de muisaanwijzer boven de hyperlink laat rusten.

* De achtergrondkleur (met de letter B aangeduid) bepaalt de kleur van het gebied dat

rond uw webpagina’s verschijnt wanneer de gebruiker het formaat van zijn browservenster

zo wijzigt dat het venster groter is dan de afmetingen van uw pagina’s. Dit kan een een

kleur, maar net zo goed een aeelding zijn.

* De paginakleur (met de letter O aangeduid) bepaalt de achtergrondkleur van de pagina

zelf. Als u deze achtergrond transparant maakt, is de onderliggende achtergrond zichtbaar

doorheen de pagina, waardoor de grenzen van de pagina onzichtbaar worden (zonder dat

de inhoud van de pagina echter de ingestelde pagina-afmetingen overschrijdt).

* Als u een achtergrondaeelding met transparante gebieden gebruikt, is de achtergrond-

kleur van de pagina zelf zichtbaar in de transparante gebieden. In het andere geval wordt

de achtergrondkleur van de pagina aan het zicht onttrokken door de achtergrondaeel-

ding.

De additieve kleuren die via het dialoogvenster Schema’s beheren zijn ingesteld, zijn normaal

gesproken op de volledige site van toepassing. Er zijn echter enkele belangrijke uitzonderin-

gen op deze regel:

* U kunt een specieke kleur instellen voor afzonderlijke hyperlinks. Schakel daartoe het

selectievakje Hyperlinkkleuren uit schema gebruiken uit in het dialoogvenster Hyper-

links. Dan is de kleur van het onderliggende object zichtbaar door de (gevolgde) hyper-

link.

* Via het tabblad Achtergrond in het eigenschappenvenster van een stramienpagina kunt

u de achtergrondkleur/-aeelding en paginakleur die u via het dialoogvenster Schema’s

beheren hebt ingesteld negeren voor een specieke stramienpagina. Merk op dat dit een

invloed hee op alle pagina’s die op deze stramienpagina zijn gebaseerd. Voor pagina’s

die niet op een stramienpagina zijn gebaseerd, worden standaard de instellingen gebruikt

die in het dialoogvenster Schema’s beheren zijn ingesteld. U kunt deze instellingen echter

negeren door de optie Instellingen van schema gebruiken uit te schakelen en een nieuwe

Studio Webdesign 4 Pro 183

achtergrondkleur/-aeelding en/of paginakleur in te stellen op het tabblad Achtergrond

van het dialoogvenster Eigenschappen van pagina.

Schemakleuren toepassen op objecten

Misschien vraagt u zich af hoe u een kleurenschema op nieuwe objecten toepast als u nieuwe

elementen toevoegt aan een website die op een sjabloon is gebaseerd of een volledig nieuwe

site maakt? Hoewel u eerst wat tijd moet uittrekken om uit te zoeken welke kleurencombi-

naties het beste resultaat opleveren, is de procedure erg eenvoudig. Het enige wat u hoe te

doen, is een van de vijf schemakleuren als lijn- en/of vulkleur instellen voor het object.

Zo wijst u een schemakleur toe aan een object:

1. Selecteer het object en klik op Vulkleur, Lijnkleur of Tekst boven aan het tab-

blad Stalen, aankelijk van het eect dat u wilt verkrijgen.

2. Klik onder aan het tabblad Stalen op de schemakleur die u als vulkleur, lijnkleur of tekst-

kleur wilt instellen. (U kunt de staal ook naar het object slepen vanaf het tabblad.)

Wanneer u een schemakleur hebt ingesteld als vulkleur voor een object, wordt de overeen-

komstige kleurstaal automatisch gemarkeerd als u het object selecteert.

Nieuwe kleurenschema’s deﬁniëren en bestaande schema’s bewerken

Als u verschillende kleurenschema’s hebt geprobeerd, maar geen enkel schema kunt vinden

dat aan uw verwachtingen beantwoordt, kunt u altijd een van de kleuren in een bestaand

schema wijzigen en het schema vervolgens bijwerken of een volledig nieuw schema denië-

ren.

Zo bewerkt u een kleurenschema:

1. Klik op een leeg gedeelte van de pagina of het plakbord om alle selecties op te heen en

klik vervolgens op de knop op de optiebalk (of kies Extra > Schema’s beheren

in de menubalk). Hiermee opent u het dialoogvenster Schema’s beheren.

2. Selecteer in de keuzelijst aan de linkerkant het kleurenschema waarop u het nieuwe sche-

ma wilt baseren en activeer het tabblad Bewerken.

3. Let erop dat voor elk van de vijf basiskleuren (en ook voor de additieve kleuren) een af-

zonderlijke vervolgkeuzelijst beschikbaar is waarin u de gewenste kleur kunt selecteren.

Als u een van deze schemakleuren of additieve kleuren wilt wijzigen, klikt u gewoon op

de kleurstaal naast de overeenkomstige optie en selecteert u een nieuwe kleur in het palet.

Klik op Meer kleuren om de kleurenkiezer weer te geven, waarin u een aangepaste kleur

kunt deniëren.

4. Als u een achtergrondaeelding wilt gebruiken voor het gebied dat eventueel rond uw

webpagina’s wordt weergegeven in een browser, activeert u het selectievakje Aeelding

gebruiken, klikt u op Bladeren en selecteert u de gewenste aeelding. Klik vervolgens op

Exportopties om de gewenste instellingen te kiezen voor het exporteren van de achter-

grondaeelding.

184 Studio Webdesign 4 Pro

5. Als u een specieke paginakleur wilt instellen, klikt u op de kleurstaal naast de optie Pa-

ginakleur en kiest u de gewenste achtergrondkleur voor de pagina in het palet.

6. Klik op Schema opslaan als u het gewijzigde schema wilt opslaan. Behoud de oorspron-

kelijke naam als u het bestaande schema wilt overschrijven.

7. Klik tot slot op OK om het schema op de huidige website toe te passen.

Om een nieuw kleurenschema te deniëren, gaat u op dezelfde manier te werk. Alleen moet

u in dat geval in stap 6 een nieuwe naam opgeven in plaats van het bestaande schema te over-

schrijven.

MET KLEUR- EN BITMAPVERLOPEN WERKEN

Kleurverlopen zijn kleurengradaties of kleurenspectra waarin kleuren geleidelijk in elkaar

overgaan tussen twee of meer basiskleuren. Een kleurverloop hee een pad met nodes die

de oorsprong aangeven van elke basiskleur. U kunt dit pad naar behoee bewerken. Bij een

bitmapverloop wordt gebruikgemaakt van een bitmap (vaak een materiaal, patroon of achter-

grondaeelding) om een object te vullen.

Lineair Ovaal Conisch Bitmap

Via het tabblad Stalen kunt u snel en eenvoudig een van de talrijke vooraf gedenieerde kleur-

en bitmapverlopen toepassen op vormen, tekstframes en tabelcellen. Merk op dat u ook een

kleur- of bitmapverloop kunt instellen voor artistieke tekst en tekst in aangepaste frames of

tabellen (maar niet voor tekst in HTML-frames of HTML-tabellen). Met het verloopgereed-

schap (of de opdracht Opmaak > Vulkleur/verloop) kunt u het pad van een verloop naar

behoee bewerken en zo allerlei unieke eecten creëren (raadpleeg het Help-bestand van het

programma voor meer informatie).

Het toepassen van verschillende transparantie-eecten (via het tabblad Trans-

parantie) hee geen invloed op het verloop dat voor een object is ingesteld,

maar kan wel het uiterlijk ervan beïnvloeden.

Een kleur- of bitmapverloop toepassen

De eenvoudigste manier om een kleur- of bitmapverloop toe te passen op een object, is via

het tabblad Stalen in de studio. U kunt hiervoor echter ook het verloopgereedschap of het

dialoogvenster Vulkleur/verloop gebruiken (hierover leest u meer in het Help-bestand van

het programma).

Studio Webdesign 4 Pro 185

Zo stelt u een kleur- of bitmapverloop in via het tabblad Stalen:

1. Klik op de tab Stalen en controleer of de optie Vulkleur is geactiveerd.

Opmerking: uit de kleur van de lijn onder de knop kunt u aeiden welke kleur

momenteel is ingesteld voor dit onderdeel van het geselecteerde object (of voor

de geselecteerde node).

Als u een kleurverloop wilt instellen, klikt u op de knop Ver loop en kiest u Lineair,

Ovaal of Conisch in het vervolgmenu.

Als u een bitmapverloop wilt instellen, klikt u op de knop Bitmap en kiest u een cate-

gorie verlopen in het vervolgmenu.

3. Klik in de galerie op de staal van het verloop dat u wilt toepassen.

Sleep een staal vanuit de galerie naar het object en laat de muisknop los.

4. Pas via de schuifregelaar Tint onder aan het tabblad eventueel de schakering/tint van het

verloop aan, of typ rechtstreeks een waarde in het bijbehorende invoervak.

MET TRANSPARANTIE WERKEN

Transparantie-eecten lenen zich uitstekend om hoge lichten, schaduw, schakeringen en ‘ge-

renderd’ realisme te simuleren. Ze kunnen het verschil uitmaken tussen alledaagse tweedi-

mensionale illustraties en aeeldingen met diepte en ‘punch.’

Transparantie lijkt misschien enigszins ingewikkeld omdat u het per denitie niet kunt ‘zien’

zoals u de vulkleur van een object ziet. Transparantie is echter altijd aanwezig in Studio Web-

design. Elk nieuw object hee een transparantie-eigenschap. Alleen is de standaardinstelling

toevallig ‘Geen’ (ondoorzichtig).

Transparantie-eecten lijken sterk op verlopen, alleen maken ze gebruik van ‘toverinkt’ in

plaats van kleuren. Hoe transparanter een bepaald gedeelte van een object is, hoe beter het

onderliggende object zichtbaar is in dit gebied. Net zoals een kleurverloop van donker naar

licht kan variëren, kan een transparantie-eect van meer naar minder doorzichtig variëren,

zoals in de volgende guur:

In Studio Webdesign werken transparantie-eecten ongeveer op dezelfde manier als verlopen

in grijswaarden.

186 Studio Webdesign 4 Pro

* Net als verlopen kunnen transparantie-eecten rechtstreeks vanuit de studio worden toe-

gepast – in dit geval via het tabblad Transparantie. (Transparantie is ook een optie voor het

ltereect 3D-patroon.)

* In de galerie op het tabblad Transparantie worden miniaturen in grijstinten weergegeven

van de beschikbare transparantie-eecten, waarbij de lichtere delen transparanter zijn dan

de donkere delen. Om een van deze eecten toe te passen, klikt u gewoon op de overeen-

komstige miniatuur of sleept u deze naar het object vanuit de galerie.

* De meeste transparantie-eecten hebben een pad dat u kunt bewerken (in dit geval met

het Transparantiegereedschap).

De beschikbare eecten op het tabblad Transparantie zijn een voor een vergelijkbaar met de

verlopen met dezelfde naam:

* Bij transparantie-eecten op basis van een een kleur wordt de transparantie gelijkmatig

gespreid over het object.

* Lineaire, radiale en conische transparantie-eecten zijn eenvoudige verlopen die geleide-

lijk van doorzichtig naar ondoorzichtig overgaan.

* In de bitmapgalerie vindt u diverse texturen die op de bitmaps op het tabblad Stalen zijn

gebaseerd.

Via het tabblad Transparantie in de studio kunt u snel en eenvoudig allerlei transparantie-

eecten die op een kleur- of bitmapverloop zijn gebaseerd toepassen op vormen, tekstframes

en tabelcellen. Merk op dat u ook transparantie-eecten kunt toepassen op artistieke tekst

of tekst in aangepaste frames en tabellen (maar niet op tekst in HTML-frames of HTML-

tabellen). U kunt ook gebruikmaken van het transparantiegereedschap in de gereedschapset

(of de opdracht Opmaak > Transparantie) om transparantie toe te passen op een object. In

dat geval kunt u het pad van een transparantie-eect bewerken en zo allerlei unieke eecten

creëren.

Zo past u een transparantie-effect toe via het tabblad Transparantie:

1. Selecteer het object waarvoor u een transparantie-eect wilt instellen en geef het tabblad

Transparantie weer in de studio.

2. Klik op de knop

Een kleur boven aan het tabblad en klik vervolgens op een minia-

tuur in de galerie als u een transparantie-eect dat op een een kleur is gebaseerd op het

object wilt toepassen. Merk op dat de helderheid van de miniaturen overeenkomt met de

transparantie die uiteindelijk op het object wordt toegepast. Hoe lichter de kleur van een

miniatuur, hoe transparanter het object waarop u het eect toepast.

Klik op de knop

Ver loo p en selecteer een miniatuur in de galerie als u een transparan-

tie-eect dat op een verloop is gebaseerd op het object wilt toepassen.

Klik op

Bitmap om een transparantie-eect dat op een bitmap is gebaseerd op het

object toe te passen.

U kunt een miniatuur ook rechtstreeks naar een object slepen vanuit de galerie als u een

transparantie-eect wilt instellen voor dit object.

Studio Webdesign 4 Pro 187

11 hyPerlinkS en

interactiviteit

toevoegen

HYPERLINKS EN BLADWIJZERS TOEVOEGEN

Wanneer u een hyperlink instelt voor een object (bijvoorbeeld een rechthoek, geselecteerde

tekst of een aeelding), kunnen internetgebruikers door op dat object te klikken een be-

paalde gebeurtenis uitlokken.

Zorgvuldig gekozen hyperlinks zijn een belangrijk onderdeel van de sitestructuur. Ze waar-

borgen dat gebruikers vlot door uw site kunnen navigeren en zijn een belangrijk hulpmiddel

om uw webpagina’s op een logische manier aan elkaar te relateren. (Denk er echter aan dat

ook het gebruik van thema-aeeldingen voor navigatie-elementen zoals navigatiebalken en

Vorige/Volgende-knoppen heel wat voordelen biedt! Door thema-aeeldingen te gebruiken

voor dergelijke navigatie-elementen, bespaart u vaak zeer veel tijd.)

U kunt hyperlinks en bladwijzers in uw site eenvoudig beheren vanuit Sitebe-

heer, dat toegankelijk is via de knop

in de statusbalk of de menuopdracht

Extra > Sitebeheer > Hyperlinks beheren in de menubalk.

Zo voegt u een hyperlink toe:

1. Activeer het selectiegereedschap en selecteer het object of de tekst waarvoor u een hyper-

link wilt instellen.

Bij tekstobjecten kunt u ook gewoon in de tekst klikken om de invoegpositie

in de tekst te plaatsen. Als u midden in een woord of vlak ervoor of erna klikt,

wordt de hyperlink automatisch voor het volledige woord ingesteld. Als zich

aan weerszijden van de huidige invoegpositie een spatie bevindt, voegt het

programma nuttige informatie in (zoals de naam van de pagina die als doel is

ingesteld voor de hyperlink).

2. Klik op

Hyperlink invoegen in de gereedschapset. Het dialoogvenster Hyperlinks ver-

schijnt.

188 Studio Webdesign 4 Pro

3. Selecteer links in het dialoogvenster het type hyperlink dat u wilt invoegen. Geef ver-

volgens aan de rechterkant de vereiste gegevens op voor de hyperlink, zoals de naam (of

het webadres) van de pagina waarheen u een hyperlink wilt instellen, of het e-mailadres,

navigatie-element, intelligente object, enzovoort dat u als doel wilt instellen voor de hy-

perlink.

4. Naargelang het type hyperlink dat u hebt geselecteerd, kunt u behalve het doel nog allerlei

andere opties instellen.

5. In het groepsvak onder in het dialoogvenster kunt u het doelvenster of -frame instellen

waarin u het doel van de hyperlink wilt weergeven (raadpleeg het Help-bestand voor meer

informatie).

6. Stel indien nodig de overige eigenschappen van de hyperlink in, zoals een sneltoets of de

scherminfo die u wilt weergeven wanneer gebruikers de muisaanwijzer boven de hyper-

link laten rusten.

Opmerking: woorden die als hyperlink fungeren, worden normaal gesproken onderstreept

en in de kleur weergegeven die als hyperlinkkleur is ingesteld in het kleurenschema voor

de site (zie ‘Kleurenschema’s’ gebruiken in hoofdstuk 10).

7. Klik op OK.

Zo bewerkt of verwijdert u een hyperlink:

1. Selecteer het object waarvoor de hyperlink is ingesteld met het selectiegereedschap, of klik

in de tekst die als hyperlink fungeert met het gereedschap om de invoegpositie in de tekst

te plaatsen. (U hoe de hypertekst niet volledig te selecteren door er over te slepen.)

2. Klik op

Hyperlink invoegen in de gereedschapset.

Het dialoogvenster Hyperlinks verschijnt, waarin standaard al het huidige doel van de hyper-

link wordt weergegeven. Als het om een hyperlink voor tekst gaat, wordt de volledige hyper-

tekst gemarkeerd op de pagina.

* Selecteer een ander type hyperlink, stel een ander doel in voor de hyperlink en/of wijzig

de overige instellingen voor de hyperlink als u deze wilt bewerken.

* Klik op Geen hyperlink in de boomstructuur aan de linkerkant als u de hyperlink wilt

verwijderen.

Zo beheert u bestaande hyperlinks in uw site:

* Kies Extra > Sitebeheer >Hyperlinks beheren. Vanuit dit dialoogvenster kunt u de instel-

lingen voor een hyperlink wijzigen, specieke hyperlinks uit uw site verwijderen of recht-

streeks naar het object gaan waarvoor een hyperlink is ingesteld in de werkomgeving.

Een bladwijzer invoegen

Een bladwijzer is een specieke locatie op een webpagina die als doel kan fungeren voor een

hyperlink. Bladwijzers zijn niet zichtbaar voor internetgebruikers. Doorgaans worden ze ge-

bruikt om een bepaald punt te markeren in tekst (bijvoorbeeld het begin van een nieuwe ru-

briek), of een aeelding die zich verder onder aan de pagina bevindt. Bladwijzers zijn vooral

handig als uw pagina voldoende informatie bevat om deze in verschillende rubrieken of pa-

Studio Webdesign 4 Pro 189

ragrafen onder te verdelen, maar te weinig informatie om de pagina in afzonderlijke pagina’s

te splitsen. Aan de hand van bladwijzers kunt u bezoekers de mogelijkheid bieden verwante

informatie weer te geven zonder dat ze de huidige pagina hoeven te verlaten. Zo verkleint u de

kans dat gebruikers ‘verdwalen’ terwijl ze de informatie op uw site doornemen.

Zo voegt u een bladwijzer in:

1. Activeer het selectiegereedschap en selecteer het object waarvoor u een bladwijzer wilt

instellen. Als u een bladwijzer wilt instellen voor tekst, klikt u in het desbetreende tekst-

object om de invoegpositie in de tekst te plaatsen.

2. Selecteer het gereedschap

Bladwijzer instellen in het vervolgmenu met hyperlinkge-

reedschappen in de gereedschapset.

3. Geef in het dialoogvenster een naam op voor de bladwijzer.

4. (Facultatief) Activeer het selectievakje Bladwijzer in navigatiestructuur opnemen als u

de bladwijzer (doorgaans een geselecteerd object) toegankelijk wilt maken via een naviga-

tiebalk in plaats van via een hyperlink. Merk op dat hiertoe de optie Inclusief bladwijzers

moet zijn ingeschakeld op het tabblad Type navigatiebalk in het eigenschappenvenster

van de navigatiebalk. Typ in het invoervak Titel van bladwijzer de naam die u wilt weer-

geven voor deze bladwijzer in de navigatiebalk van uw site.

5. Klik op OK.

Onthoud dat bladwijzers paginagebonden zijn. U kunt dus gerust dezelfde

naam gebruiken voor bladwijzers die zich op verschillende pagina’s bevinden.

Merk op dat bladwijzers standaard doorlopend worden genummerd door het

programma (‘Bladwijzer1,’ ‘Bladwijzer2,’ enzovoort). Wellicht behoudt u echter

gemakkelijker het overzicht over de bladwijzers die u hebt ingesteld doorheen

de gehele site als u elke bladwijzer een unieke naam gee.

Zo geeft u bestaande bladwijzers weer of bewerkt u ze:

* Kies Extra > Sitebeheer > Bladwijzers beheren. Vanuit dit dialoogvenster kunt u snel en

eenvoudig de naam en/of titel van een bladwijzer wijzigen, specieke bladwijzers in de

navigatiestructuur van uw site opnemen of ze eruit verwijderen, of rechtstreeks naar het

object gaan waarvoor een bladwijzer is ingesteld in de werkomgeving.

HOTSPOTS TOEVOEGEN AAN EEN PAGINA

Een hotspot is een transparant gebied dat als hyperlink fungeert op een webpagina. Hotspots

worden gewoonlijk voor aeeldingen gedenieerd, die zich dan als ‘knoppen’ gedragen waar-

op gebruikers kunnen klikken. Ze zijn vooral handig als u wilt dat bezoekers op verschillende

delen van een aeelding kunnen klikken, bijvoorbeeld bij een aeelding die als ‘menu’ of

sitemap fungeert, om naar een andere pagina in uw site te gaan. U kunt hotspots handmatig

tekenen en bewerken, of u kunt ze op een bestaande vorm afstemmen.

190 Studio Webdesign 4 Pro

Zo tekent u een hotspot:

1. Klik op Hotspot invoegen op de werkbalk Webobjecten.

2. Klik en sleep op de pagina om het gebied te deniëren dat als hotspot moet fungeren.

Zodra u de muisknop loslaat, verschijnt het dialoogvenster Hyperlinks.

3. Selecteer links in dit dialoogvenster het type hyperlink dat u wilt instellen voor de hotspot.

Geef vervolgens aan de rechterkant het doel van de hyperlink op (zie ‘Het doel van een

hyperlink instellen’ in het Help-bestand van het programma).

4. Klik op OK.

Zo stemt u een hotspot op een bestaande vorm af:

1. Teken een hotspot zoals hiervoor is beschreven en teken vervolgens een vorm (zie ‘Vor-

men tekenen en bewerken’ in hoofdstuk 8).

2. Selecteer beide objecten en kies Hotspot aan vorm aanpassen in het menu Extra.

De hotspot en de vorm worden als twee afzonderlijke objecten behandeld door

het programma. U kunt de vorm dus gerust verwijderen nadat u deze als sja-

bloon hebt gebruikt om de vorm van de hotspot te bepalen.

Zo bewerkt u de hyperlink voor een hotspot:

* Dubbelklik op de hotspot met het selectiegereedschap of selecteer de hotspot en klik ver-

volgens op Hyperlink invoegen in de gereedschapset (of kies Invoegen > Hyperlink

in de menubalk).

Het dialoogvenster Hyperlinks verschijnt, waarin het huidige doel voor de hotspot wordt

weergegeven.

* Selecteer een ander type hyperlink en/of stel een ander doel in voor de hyperlink als u deze

wilt bewerken.

* Om de hyperlink te verwijderen, klikt u op Geen hyperlink in de boomstructuur links in

het dialoogvenster.

Hotspots bewerken

U kunt hotspots naar behoee verplaatsen en schalen, net als elk ander object in uw site. Merk

op dat er rond een geselecteerde hotspot twee selectiekaders worden weergegeven, die elk een

andere functie vervullen.

Studio Webdesign 4 Pro 191

Zo verplaatst of schaalt u een hotspot:

* Klik op de hotspot om deze te selecteren. Doe daarna het volgende:

* Klik en sleep vanuit het midden van de hotspot of vanaf een van de randen van het

buitenste selectiekader als u de hotspot wilt verplaatsen. Houd de Shi-toets ingedrukt

terwijl u sleept als u de hotspot alleen in horizontale of verticale richting wilt verplaat-

sen.

* Klik op een van de formaatgrepen van het buitenste selectiekader en sleep deze naar

een andere positie als u de hotspot wilt schalen.

Door de grepen en randen van het binnenste selectiekader te verslepen, kunt u hotspots met

een aangepaste vorm maken die perfect zijn afgestemd op de contouren van de onderliggende

aeelding. Uit de vorm van de muisaanwijzer kunt u eenvoudig aeiden of deze zich momen-

teel boven een greep dan wel een rand van het selectiekader bevindt.

Zo voegt u een extra node toe aan een hotspot:

* Beweeg de muisaanwijzer boven een van de randen van het binnenste selectiekader totdat

deze de volgende vorm krijgt: . Dubbelklik vervolgens om op deze positie een nieuwe

node toe te voegen.

Zo wijzigt u de vorm van een hotspot:

* Plaats de muisaanwijzer boven een van de grepen van het selectiekader (let erop dat deze

de volgende vorm krijgt: ) en sleep de greep terwijl u de linkermuisknop ingedrukt

houdt naar een andere positie.

ROLLOVERS TOEVOEGEN

De term rollover verwijst naar de interactie tussen de muis en een object op het scherm. Als

u bijvoorbeeld met de muis een aeelding aanwijst op een webpagina (zoals een knop in een

navigatiebalk), is het mogelijk dat deze een andere kleur krijgt of dat er een andere aeelding

verschijnt. Wanneer u een object aanwijst op een webpagina, ‘betreedt’ uw muisaanwijzer fy-

siek het gebied dat door dat object wordt ingenomen op het scherm. Dit activeert een bepaal-

de gebeurtenis, een mouseover genoemd. Wanneer de onderliggende code deze mouseover

‘onderschept,’ kan die op zijn beurt weer een andere gebeurtenis activeren, zoals een andere

aeelding weergeven op dezelfde positie. Elk object dat van uiterlijk verandert na bepaalde

muisgebeurtenissen wordt een rollover-aeelding of kortweg rollover genoemd.

192 Studio Webdesign 4 Pro

Voordat u een rollover-aeelding creëert in Studio Webdesign moet u voor elke gebeurtenis

(klikken, de muisaanwijzer boven het object laten rusten, enzovoort) een afzonderlijke aeel-

ding maken. Hiervoor moet u een externe grasche toepassing gebruiken. Studio Webdesign

genereert automatisch de vereiste code om de verschillende gebeurtenissen te onderschep-

pen. U kunt overigens ook rechtstreeks rollovers importeren die met Tekenen en Ontwerpen

van Easy Computing zijn gemaakt.

OPTIES VOOR ROLLOVERS

Rollovers toevoegen aan een webpagina is in feite slechts een kwestie van beslissen welke

rollover-toestanden u wilt instellen voor een aeelding die uit meerdere lagen bestaat, en

vervolgens voor elke toestand de juiste aeelding in te stellen. In Studio Webdesign kunt u de

volgende toestanden instellen voor een rollover:

* Standaard is de toestand voordat er een rollover plaatsvindt (wanneer de aeelding ‘in

rust’ is). Deze toestand is altijd gedenieerd.

* Over is de toestand die wordt geactiveerd door een mouseover, dat wil zeggen wanneer de

muisaanwijzer zich vlak boven het object bevindt. Zo kunt u de tekst die op een knop wordt

afgebeeld bijvoorbeeld van kleur laten veranderen wanneer er een mouseover plaatsvindt

om internetgebruikers er op attent te maken dat de knop als hyperlink fungeert. Door de

muis afwisselend boven en buiten de aeelding te plaatsen voordat u klikt (zie de toestand

Ingedrukt), activeert u achtereenvolgens de toestanden Over en Standaard.

* Ingedrukt is de toestand die wordt geactiveerd wanneer u met de muis op de aeelding

klikt. Deze term verwijst naar het gedrag dat inherent is aan een knop: de status ‘omhoog’

verandert in ‘ingedrukt’ wanneer u op de knop klikt.

* Ingedrukt + over (alleen beschikbaar als de optie Ingedrukt is geactiveerd) is de toestand

die wordt geactiveerd als er een mouseover plaatsvindt terwijl de knop al is ingedrukt, met

andere woorden nadat u er op hebt geklikt. Als u deze rollover-toestand niet activeert,

blij de knop ingedrukt na een mousedown. Dit kan ertoe leiden dat de knop niet meer

reageert (zie de bovenstaande opmerking). Stel bijvoorbeeld voor de toestanden Standaard

en Ingedrukt aeelding A en voor de toestanden Over en Ingedrukt + over aeelding B

in als u dit wilt voorkomen. Dan betekent ‘Ingedrukt’ werkelijk ‘Ingedrukt + niet over’

en keert de knop naar de standaardtoestand terug als u de muisaanwijzer buiten de knop

beweegt, zelfs na een mousedown. Dit lijkt misschien ingewikkeld, maar het werkt!

Merk op dat u ook een hyperlinkgebeurtenis kunt instellen voor de rollover, zodat bijvoor-

beeld een andere webpagina wordt weergegeven als gebruikers op het object klikken. Als een

pagina verschillende rollover-objecten bevat, kunt u die zelfs groeperen, zodat ze één geheel

vormen en er maar één object tegelijkertijd ingedrukt kan zijn.

Studio Webdesign 4 Pro 193

Zo maakt u een rollover:

1. Maak met behulp van een externe grasche toepassing de vereiste bronaeeldingen voor

elke rollover-toestand die u wilt deniëren.

2. Klik op

Rollover invoegen in het vervolgmenu Navigatiehulpmiddelen toevoegen op

de werkbalk Webobjecten. of kiies Invoegen > Webobject > Rollover in de menubalk.

3. Selecteer in het dialoogvenster Rollover de toestanden die u wilt activeren voor de rollover

door de overeenkomstige selectievakjes in te schakelen. Klik hierbij telkens op Bladeren

om de bijbehorende bronaeelding te selecteren en stel de gewenste exportopties in voor

elke aeelding (zie ‘Exportopties instellen voor aeeldingen’ in hoofdstuk 9).

4. Activeer het selectievakje Bestanden insluiten in site als u de aeelding(en) in uw web-

project wilt insluiten.

5. Selecteer onder in het dialoogvenster de gewenste basistoestand voor de rollover: Stan-

daard of Ingedrukt.

Zo moet u voor de knop ‘Startpagina’ op de startpagina van een website bijvoorbeeld ‘Inge-

drukt ‘ als basistoestand instellen en/of ervoor zorgen dat deze niet op muisgebeurtenis-

sen reageert. Gebruikers bevinden zich per slot van rekening al op deze pagina! Voor

knoppen die naar andere pagina’s leiden, moet u ‘Standaard’ als basistoestand instellen.

Dergelijke knoppen moeten wel op muisgebeurtenissen reageren.

6. Klik op Instellen boven in het dialoogvenster om een hyperlink in te stellen voor de knop

(zie ‘Hyperlinks en bladwijzers toevoegen’ eerder in dit hoofdstuk).

7. Als de pagina meerdere knoppen bevat, kunt u die aan elkaar koppelen om zeker te stel-

len dat maar één knop tegelijkertijd ingedrukt kan zijn. Activeer hiertoe het selectievakje

Keuzerondje.

Zorg ervoor dat deze optie is ingeschakeld voor alle knoppen die u aan elkaar wilt kop-

pelen als u deze techniek gebruikt. Hoewel het niet echt uitmaakt hoe de knoppen zijn

gespreid over de pagina, zullen die gewoonlijk een zichtbaar geheel vormen, zoals een

navigatiebalk. Alle knoppen waarvoor deze optie niet is ingeschakeld, zijn onaankelijk

van elkaar.

8. Klik op OK.

Let erop dat in de werkomgeving alleen de aeelding voor de standaardtoestand zichtbaar

is. Als u de rollover wilt testen, moet u een voorbeeld weergeven van de pagina, waarna u in

het hoofdprogramma indien nodig de vereiste wijzigingen kunt doorvoeren. Merk op dat

het programma voor elke rollover-toestand die u hebt ingesteld een afzonderlijke aeelding

exporteert als u een voorbeeld weergee van de website of deze publiceert, en dat aan het

HTML-bestand voor de gepubliceerde pagina automatisch de vereiste JavaScript-code wordt

toegevoegd om de gedenieerde muisgebeurtenissen te onderscheppen.

Zo bewerkt u een rollover:

1. Klik met de rechtermuisknop op de aeelding en kies Rollover bewerken in het snel-

menu.

2. Breng de vereiste wijzigingen aan in het dialoogvenster en klik op OK.

194 Studio Webdesign 4 Pro

De vereiste bronafbeeldingen maken voor een rollover

Voor elk object waarvoor minstens één rollover-toestand is geactiveerd, moet u een afzonder-

lijke bronaeelding maken. Vaak gaat het slechts om subtiele verschillen tussen de aeelding

voor de standaardtoestand en de ‘varianten’ die de indruk wekken dat het object van de ene

in de andere toestand overgaat. Als u bijvoorbeeld de toestand Over hebt geactiveerd voor

een object, moet u een aeelding maken die een browser kan weergeven wanneer de muis-

aanwijzer zich boven het object bevindt. In de volgende guur ziet u twee varianten van een

knop om naar de startpagina van een site te gaan: één wanneer de knop is gemarkeerd (bij een

mouseover) en een tweede variant als de knop zich in de standaardtoestand bevindt.

U moet deze bronaeeldingen in een afzonderlijk grasch programma maken. Hier zijn en-

kele richtlijnen die u hierbij in acht moet nemen:

* De afmetingen van de verschillende aeeldingen worden zo aangepast dat ze in het ge-

bied passen dat door de aeelding voor de standaardtoestand wordt ingenomen. Alle

bronaeeldingen moeten dus dezelfde afmetingen hebben.

* Zorg ervoor dat de verschillende varianten zich op exact dezelfde positie bevinden als de

aeelding voor de standaardtoestand, zodat er geen verschuiving zichtbaar is wanneer de

aeeldingen van de ene in de andere toestand overgaan. Gebruik daarom bij voorkeur

een grasch programma dat op het concept van lagen is gebaseerd om de vereiste bron-

aeeldingen te maken. Plaats elke variant hierbij op een afzonderlijke laag vlak boven de

aeelding voor de standaardtoestand.

* Denk eraan dat Studio Webdesign alleen de aeelding voor de standaardtoestand weer-

gee. Controleer daarom altijd het eect van de verschillende aeeldingen door speci-

eke lagen weer te geven en te verbergen in het grasche programma.

* U hoe alleen bronaeeldingen te maken voor de rollover-toestanden die u hebt geacti-

veerd.

* Zodra u tevreden bent over de bronaeeldingen, exporteert u elke laag naar een afzon-

derlijk bestand, waarna u Studio Webdesign start om de rollover te maken.

* Bij het instellen van de bronaeeldingen moet u aangeven of u de aeeldingen in uw

project wilt insluiten of ze aan uw project wilt koppelen. Als u een bronaeelding aan uw

project koppelt, gebruikt Studio Webdesign altijd de meest recente versie van het bestand.

Daarom kunt u de aeeldingen over het algemeen beter aan uw project koppelen totdat u

zeker weet dat u ze niet meer hoe te bewerken. Zodra de bronaeeldingen op punt staan,

kunt u ze op dezelfde manier eenvoudig in uw project insluiten. Als u een aeelding die al

is ingesloten achteraf moet bijwerken, kunt u het gewijzigde bestand het beste onder een

andere naam opslaan en vervolgens het nieuwe bestand instellen in plaats van het oude

voor de overeenkomstige rollover-toestand.

Studio Webdesign 4 Pro 195

POP-UPROLLOVERS TOEVOEGEN

Pop-uprollovers kunnen voor allerlei doeleinden worden ingezet. Op het web worden ze ech-

ter hoofdzakelijk gebruikt om een grotere versie van een aeelding weer te geven wanneer

u de muisaanwijzer boven de overeenkomstige miniatuurweergave laat rusten. Ze werken

ongeveer op dezelfde manier als de besturingselementen die u kunt voorzien in een Flash-

fotogalerij om te waarborgen dat gebruikers vlot door uw galerij kunnen navigeren. Pop-up-

rollovers vertonen veel overeenkomsten met gewone rollovers, behalve dan dat u bij gewone

rollovers verschillende toestanden kunt deniëren, terwijl u bij pop-uprollovers maar twee

toestanden kunt instellen (de standaardtoestand en de toestand bij een mouseover). Boven-

dien moet u bij rollovers met verschillende ‘varianten’ van een bronaeelding werken die al-

lemaal dezelfde afmetingen hebben, terwijl u bij een pop-uprollover veeleer met een vergrote

versie van dezelfde aeelding zult werken.

In Studio Webdesign kunt u de grootte en positie van zowel de pop-upaeelding als de mini-

atuurweergave van de aeelding bepalen.

U kunt twee toestanden instellen voor een pop-uprollover:

* Standaard is de toestand voordat er een rollover plaatsvindt (wanneer de aeelding ‘in

rust’ is). Deze toestand is altijd gedenieerd. U kunt hiervoor een miniatuurweergave ge-

bruiken, maar desgewenst kunt u hiervoor ook pictogrammen gebruiken (bijvoorbeeld

een pictogram met een cijfer om de verschillende aeeldingen in een catalogus aan te

duiden).

* Over is de toestand die wordt geactiveerd bij een mouseover, dat wil zeggen wanneer

de muisaanwijzer zich vlak boven de miniatuurweergave bevindt. In dat geval verschijnt

automatisch de pop-upaeelding, die weer verdwijnt zodra u de muisaanwijzer buiten de

miniatuurweergave plaatst.

U kunt ook een bijschri weergeven bij uw pop-upaeelding als u dat wilt. Hierbij kunt u

allerlei opmaakkenmerken instellen, zoals het lettertype en de tekengrootte, de tekstkleur,

enzovoort.

196 Studio Webdesign 4 Pro

Zo maakt u een pop-uprollover:

1. Klik op Pop-uprollover invoegen in het vervolgmenu Navigatiehulpmiddelen toe-

voegen op de werkbalk Webobjecten.

2. Klik op Bladeren naast het vak Standaard in het dialoogvenster om de aeelding in te

stellen die u voor de standaardtoestand wilt gebruiken. Blader in het dialoogvenster dat

daarop verschijnt naar de juiste map, selecteer de aeelding en klik op Openen.

3. Let erop dat de geselecteerde aeelding standaard ook voor de toestand Over wordt in-

gesteld. U kunt voor deze toestand echter een compleet andere aeelding gebruiken als u

dat wilt. Klik hiertoe op Bladeren en selecteer de gewenste aeelding.

4. Klik eventueel op Instellen boven in het dialoogvenster als u een hyperlink wilt instellen

voor de miniatuuraeelding. Dat is bijvoorbeeld zinvol als u wilt dat gebruikers door op

de aeelding te klikken naar een andere pagina in uw site kunnen gaan.

5. Stel eventueel de gewenste exportopties in voor beide aeeldingen (zie ‘Exportopties in-

stellen voor aeeldingen’ in hoofdstuk 9).

6. Activeer het selectievakje Aeeldingen in site insluiten als u de aeelding(en) in uw

webproject wilt insluiten.

U hebt nu de vereiste aeeldingen ingesteld voor beide toestanden van de pop-uprollover.

Om de pop-uprollover op punt te stellen, moet u echter nog de positie van beide aeel-

dingen bepalen op de pagina. Dat kunt u in een afzonderlijk dialoogvenster doen, waarin u

beide aeeldingen naar behoee kunt schalen en verplaatsen (met de muis of door absolute

pixelcoördinaten op te geven in de overeenkomstige invoervakken). Let erop dat rond elke

aeelding een kader met een specieke kleur wordt weergegeven in dit dialoogvenster (groen

voor de standaardtoestand en blauw voor de toestand bij een mouseover), zodat u beide af-

beeldingen eenvoudig van elkaar kunt onderscheiden.

In het voorbeeldvenster worden ook alle andere pop-uprollovers getoond die u eerder even-

tueel hebt ingesteld, evenals de pixelcoördinaten die u daarbij hebt opgegeven, zodat u de

nieuwe pop-uprollover eenvoudig op de bestaande pop-uprollovers kunt uitlijnen.

Zo bepaalt u de positie en grootte van de afbeeldingen:

1. Klik op Positie van rollover instellen onder in het dialoogvenster Pop-uprollover.

2. Selecteer een van beide aeeldingen in het dialoogvenster Positie van rollover. Aan de

hand van de vervolgkeuzelijst onder in dit dialoogvenster kunt u eenvoudig nagaan welke

aeelding momenteel is geselecteerd:

* Standaard Selectie: gee aan dat de aeelding voor de standaardtoestand (de aeel-

ding met het groene kader er rond) is geselecteerd.

* Over Selectie: gee aan dat de aeelding voor de Over-toestand (de aeelding met het

blauwe kader) is geselecteerd.

* Bijschri Selectie: gee aan dat het bijschri is geselecteerd (met een rood kader aan-

geduid). Deze optie is alleen beschikbaar wanneer u een bijschri hebt ingesteld.

Als u de huidige selectie ophe, wordt in de vervolgkeuzelijst

Geen selectie

weergegeven.

Studio Webdesign 4 Pro 197

3. Plaats beide aeeldingen op de gewenste positie door ze een voor een te selecteren en

ze vervolgens naar een andere positie te slepen in het voorbeeldvenster (vanuit het mid-

den of vanaf de randen van het selectiekader). Gebruik de formaatgrepen in de hoeken

van het selectiekader als u de aeeldingen wilt schalen. U kunt ook rechtstreeks waarden

typen in de invoervakken Links, Boven, Breedte en Hoogte als u nauwkeurig de positie

en grootte van de aeeldingen wilt bepalen. Merk op dat in de bijbehorende vervolgkeu-

zelijsten (van boven naar onder) de coördinaten worden weergegeven van de laatste drie

pop-uprollovers die u hebt toegevoegd, zodat u de verschillende aeeldingen nauwkeurig

kunt uitlijnen.

4. Activeer het selectievakje Relatief positioneren tov aeelding voor standaardtoestand

als u automatisch ook de aeelding voor de Over-toestand wilt verplaatsen wanneer u de

aeelding voor de standaardtoestand naar een andere positie sleept.

5. Schakel het selectievakje Verhoudingen behouden uit als u beide aeeldingen niet-

proportioneel wilt kunnen schalen. (Standaard worden de aeeldingen proportioneel

geschaald wanneer u de formaatgrepen versleept.) Merk op dat u de invoervakken moet

gebruiken in plaats van de formaatgrepen te verslepen om beide aeeldingen niet-pro-

portioneel te schalen wanneer u deze optie uitschakelt.

6. Klik op OK. Let erop dat in de werkomgeving alleen de miniatuur voor de standaard-

toestand wordt getoond. Als u de pop-upaeelding wilt bekijken, moet u een voorbeeld

weergeven van de site of deze publiceren.

Door op dezelfde manier nog meer miniatuuraeeldingen aan uw webpagina toe te voegen,

kunt u eenvoudig een stijlvolle fotogalerij maken waarin gebruikers slechts op een miniatuur

hoeven te klikken om een vergrote versie van elke aeelding weer te geven.

Zo bewerkt u een pop-uprollover:

* Dubbelklik op de aeelding voor de standaardtoestand op de pagina om het dialoogven-

ster Pop-uprollover te openen en voer de vereiste wijzigingen door. in het snelmenu.

Zo voegt u een bijschrift toe aan een afbeelding:

1. Activeer het selectievakje Bijschri weergeven bij aeelding voor rollover in het dia-

loogvenster Pop-uprollover.

2. Typ de gewenste tekst in het invoervak Bijschri.

3. Stel via de vervolgkeuzelijsten Lettertype en Tekengrootte het lettertype en de tekeng-

rootte van het bijschri in. Activeer het selectievakje Ve t en/of Cursief als u de tekst vet

of cursief wilt opmaken. Klik op de kleurstaal naast de optie Tekstkleur als u een andere

kleur wilt instellen voor het bijschri.

4. Activeer het selectievakje Achtergrondkleur gebruiken en kies een kleur als u een speci-

eke achtergrondkleur wilt instellen voor het bijschri.

5. Klik op OK.

Merk op dat het ingestelde bijschri alleen wordt weergegeven bij de aeelding die voor de

Over-toestand is ingesteld. Om de positie van dit bijschri in te stellen, gaat u op dezelfde ma-

nier te werk als bij het instellen van de positie van de aeeldingen voor de standaard- en Over-

toestand. Klik hiertoe op Positie van rollover instellen in het dialoogvenster Pop-uprollover,

selecteer het bijschri in het voorbeeldvenster en sleep het naar de gewenste positie.

198 Studio Webdesign 4 Pro

NAVIGATIE-ELEMENTEN TOEVOEGEN

Bepaalde typen thema-aeeldingen in Studio Webdesign, navigatie-elementen genoemd,

zijn zo geprogrammeerd dat ze zich automatisch aan de structuur van uw site aanpassen,

zodat u eenvoudig een website kunt ontwerpen waardoor internetgebruikers vlot kunnen na-

vigeren. Het enige wat u hoe te doen, is het gewenste navigatie-element selecteren (zoals een

navigatiebalk of een Vorige- of Volg en de-knop) op het tabblad ema-aeeldingen in de

studio (of in het dialoogvenster). Het programma doet de rest!

Merk op dat Vorige/Volgende-knoppen automatisch aan aangrenzende pagina’s op hetzelfde

niveau worden gekoppeld. Navigatiebalken zijn een combinatie van knoppen en pop-upme-

nu’s die waarborgen dat gebruikers eenvoudig door de verschillende rubrieken en niveaus in

uw site kunnen navigeren. Zo fungeren de knoppen in de volgende navigatiebalk bijvoorbeeld

als hyperlinks naar de startpagina en de hoofdpagina’s van de verschillende rubrieken. De

pop-upmenu’s zijn telkens aan de onderliggende pagina’s van de desbetreende rubrieken

gekoppeld.

Navigatie-elementen kunnen op een willekeurig niveau in de site worden ingevoegd. Bij na-

vigatiebalken kunt u bovendien eenvoudig de pagina’s in uw site instellen waarheen de ver-

schillende knoppen in de balk moeten leiden, het uiterlijk van de pop-upmenu’s wijzigen en

specieke pagina’s van de navigatiestructuur uitsluiten.

Bij het instellen van een navigatie-element worden vaak termen als ‘bovenliggend niveau’

of ‘vorige/volgende’ gebruikt om de onderdelen van de site aan te duiden waaraan de ver-

schillende elementen moeten worden gekoppeld ten opzichte van de startpagina (met andere

woorden om te bepalen welke knoppen in de navigatiestructuur moeten worden opgeno-

men).

Omdat navigatie-elementen automatisch uw sitestructuur ‘weerspiegelen,’ worden ze meteen

bijgewerkt wanneer u de relaties tussen pagina’s wijzigt, bepaalde pagina’s een andere naam

gee of een navigatie-element via knippen-en-plakken naar een andere pagina kopieert! De

koppelingen zijn altijd relatief ten opzichte van de pagina waarop het element zich bevindt.

Als een navigatiebalk bijvoorbeeld aan pagina’s op een onderliggend niveau is gekoppeld,

blij dat zo wanneer u de navigatiebalk of de pagina waarop deze zich bevindt naar een ande-

re positie verplaatst in de sitestructuur – zelfs als de knoppen in de balk hiervoor aan andere

pagina’s moeten worden gekoppeld.

U kunt navigatie-elementen ook op een stramienpagina plaatsen. Zo hoe u hetzelfde ele-

ment niet handmatig naar meerdere pagina’s te kopiëren. Een navigatie-element dat op een

stramienpagina is geplaatst, gedraagt zich alsof het zich op elke pagina bevindt – in overeen-

stemming met het concept dat de verschillende knoppen en menu’s van het element aan de

locatie van de afzonderlijke pagina’s in de algemene sitestructuur zijn gerelateerd.

Desgewenst kunt u ook bladwijzers in een navigatie-element opnemen, bijvoorbeeld om ge-

bruikers in staat te stellen naar een samenvoeggebied te gaan, of naar een specieke paragraaf

op een pagina die een grote hoeveelheid tekst bevat.

Studio Webdesign 4 Pro 199

Zo voegt u een navigatie-element toe:

1. Klik op ema-aeelding invoegen in het vervolgmenu Navigatiehulpmiddelen

toevoegen op de werkbalk Webobjecten.

2. Selecteer in de vervolgkeuzelijst boven in het dialoogvenster emaset het type navigatie-

element dat u wilt invoegen en kies een thema voor het element.

Zo voegt u een navigatiebalk toe:

1. Klik op Navigatiebalk invoegen in het vervolgmenu Navigatiehulpmiddelen toevoe-

gen op de werkbalk Webobjecten of kies Invoegen > Webobject > Navigatiebalk in de

menubalk.

2. Geef op het tabblad emaset aan of u een horizontale of verticale navigatiebalk wilt in-

voegen en kies een thema voor de balk.

3. Kies de gewenste instellingen op de tabbladen Type navigatie en Eigenschappen pop-

upmenu’s (zie hierna).

4. Klik op OK.

Merk op dat u ook het tabblad ema-aeeldingen in de studio kunt gebruiken om navi-

gatie-elementen aan uw site toe te voegen. Om een willekeurig element toe te voegen, vouwt

u gewoon de lijst Sets of Typen uit via de vervolgkeuzelijst boven aan het tabblad, kiest u

een stijl of categorie en sleept u het element dat u wilt gebruiken naar de pagina vanuit de

galerie.

Omdat navigatie-elementen thema-aeeldingen zijn, kunt u via het tabblad ema-aeel-

dingen in de studio eenvoudig designelementen (knoppen, scheidingslijnen, enzovoort) met

dezelfde grasche vormgeving kiezen, zodat de navigatiestructuur doorheen de gehele web-

site uniform is. Om eigenschappen zoals het lettertype, de tekstkleur en de vulkleur bij een

mouseover te bewerken, selecteert u het object en klikt u vervolgens op de knop

Bewer-

ken vlak eronder. (U kunt ook met de rechtermuisknop op het object klikken en ema-

aeelding bewerken kiezen in het snelmenu.) Lees ema-aeeldingen toevoegen en be-

werken voor meer informatie.

Om de eigenschappen van navigatiebalken te wijzigen, is een afzonderlijk dialoogvenster be-

schikbaar.

Zo wijzigt u de eigenschappen van een navigatiebalk:

1. Dubbelklik op de navigatiebalk, of klik met de rechtermuisknop en kies Navigatiebalk

bewerken in het snelmenu.

2. Selecteer op het tabblad emaset het type navigatiebalk dat u wilt gebruiken: een hori-

zontale of verticale navigatiebalk die op een thema-aeelding is gebaseerd, een horizon-

tale/verticale balk die louter tekst bevat of een vervolgkeuzelijst. Als u voor een navigatie-

balk op basis van een thema-aeelding kiest, kunt u ook een stijl kiezen voor de balk.

3. Selecteer op het tabblad Type navigatie de knoppen die u in de navigatiebalk wilt opne-

men door op het overeenkomstige pictogram te klikken. Naargelang de optie die u selec-

teert, kunt u ook aangeven of u de startpagina, de bovenliggende pagina van de huidige

pagina en de bladwijzers die u op deze pagina hebt ingevoegd in de navigatiebalk wilt

opnemen, en/of als u de huidige pagina al dan niet wilt verbergen.

200 Studio Webdesign 4 Pro

Activeer desgewenst de optie Alle knoppen even groot maken (anders wordt de grootte

van de knoppen automatisch aan de lengte van de tekst aangepast) en/of Paginanamen

gebruiken (als deze optie is uitgeschakeld, worden functionele namen zoals ‘Vorige’ of

‘Home’ toegekend aan de knoppen).

Stel vervolgens het ankerpunt van de navigatiebalk in. Standaard is de linkerbovenhoek van

de balk als ankerpunt ingesteld. Als u deze instelling behoudt, wordt de navigatiebalk

automatisch naar rechts uitgebreid naarmate u nieuwe pagina’s aan de site toevoegt. Ont-

houd in dit verband dat het instellen van een ankerpunt vooral belangrijk is bij navigatie-

balken die voortdurend worden bijgewerkt, aankelijk van de pagina waarop de bezoeker

zich momenteel bevindt.

Stel tot slot via de vervolgkeuzelijst Doelframe/-venster het venster of frame in waarin u

nieuwe pagina’s automatisch wilt openen.

4. Gebruik de opties op het tabblad Teksteigenschappen om de gewenste tekenopmaak in

te stellen voor de tekst die op de knoppen wordt afgebeeld en de menu’s. (Deze opties zijn

alleen beschikbaar wanneer u Alleen tekst als themaset hebt geselecteerd.)

5. Als u wilt voorkomen dat er pop-upmenu’s voor de onderliggende pagina’s worden weer-

gegeven, activeert u het tabblad Eigenschappen pop-upmenu’s en schakelt u het selectie-

vakje Dit navigatie-element hee menu’s uit. Als u wel pop-upmenu’s wilt weergeven,

gebruikt u de besturingselementen aan de rechterkant om het uiterlijk van de tekst en de

pop-upmenu’s aan te passen.

Standaard worden alle pagina’s in de boomstructuur van uw site in de navigatiestructuur op-

genomen. Concreet betekent dit dat u voor al deze pagina’s navigatie-elementen kunt toevoe-

gen. Desgewenst kunt u bepaalde pagina’s echter uitsluiten van de navigatiestructuur. Derge-

lijke pagina’s worden dan genegeerd als u navigatie-elementen toevoegt. Stel dat uw site een

rubriek met referentiepagina’s bevat die u niet in de navigatiestructuur wilt opnemen, zodat

gebruikers ze niet van begin tot eind kunnen doorlopen. Door de bovenliggende pagina van

deze rubriek van de navigatiestructuur uit te sluiten, verwijdert u de overeenkomstige koppe-

ling uit de navigatiebalk. Merk op dat de pagina hierdoor niet uit de site wordt verwijderd. Ze

wordt nog altijd weergegeven in de boomstructuur op het tabblad Site en u kunt nog altijd hy-

perlinks toevoegen naar die pagina. Ze wordt alleen niet weergegeven in een navigatiebalk.

Pagina’s die in de navigatiestructuur zijn opgenomen, worden met het symbool

aangeduid

in de boomstructuur op het tabblad Site.

Zo sluit u een pagina uit van de navigatiestructuur:

* Klik met de rechtermuisknop op de desbetreende pagina in de boomstructuur op het

tabblad Site, kies Eigenschappen van pagina in het snelmenu en schakel op het tabblad

Algemeen van het dialoogvenster het selectievakje Toevoegen aan navigatiestructuur

uit.

Desgewenst kunt u voor de afzonderlijke elementen van uw navigatiebalk een andere volg-

orde of structuur instellen dan op het tabblad Site. U kunt ook nieuwe elementen toevoegen,

of bestaande elementen bewerken of verwijderen – net als op het tabblad Site.

Studio Webdesign 4 Pro 201

Zo past u een navigatiebalk aan:

1. Dubbelklik op de navigatiebalk.

2. Activeer het tabblad Type navigatie en klik op Aangepast. Merk op dat het tabblad Aan-

passen wordt toegevoegd aan het dialoogvenster.

3. Wijzig via slepen-en-neerzetten de volgorde en structuur van de afzonderlijke elementen

in de navigatiebalk. U kunt hiervoor ook de opties Omhoog, Omlaag, Naar lager niveau

en Naar hoger niveau gebruiken aan de rechterkant van het tabblad.

4. Klik op Element toevoegen als u een nieuw element wilt toevoegen onder aan de naviga-

tiebalk. Selecteer vervolgens in het dialoogvenster dat daarop verschijnt een type hyper-

link, stel het doelvenster of -frame in en geef een titel op voor het nieuwe element. Klik

daarna op OK.

5. Klik op OK om uw wijzigingen toe te passen.

EEN SITEMAP TOEVOEGEN

U kunt een sitemap aan uw website toevoegen met dit programma. Deze handige voorziening

bevordert de toegankelijkheid van uw site door te voorzien in links waarop gebruikers kun-

nen klikken om naar de verschillende onderdelen van uw site te gaan.

Desgewenst kunt u de sitemap op een pagina plaatsen die in de navigatiebalk

voor uw site is opgenomen. Dan is de sitemap vanaf alle webpagina’s in uw site

toegankelijk.

Zo voegt u een sitemap toe:

1. Klik op Sitemap invoegen in het vervolgmenu Navigatiehulpmiddelen toevoegen op

de werkbalk Webobjecten.

2. Doe in het vak Navigatie van het dialoogvenster Sitemap het volgende:

* Als u bladwijzers hebt gebruikt in uw site en die in de sitemap wilt opnemen, activeert

u het selectievakje Inclusief bladwijzers.

* Selecteer in de vervolgkeuzelijst Doelframe/-venster het venster of frame waarin u de

sitemap wilt openen. Misschien wilt u de sitemap bijvoorbeeld in een nieuw venster

openen, zodat gebruikers terwijl ze de sitemap bekijken door uw site kunnen navige-

ren.

202 Studio Webdesign 4 Pro

3. Stel in het groepsvak Kolommen het aantal kolommen in waarover u de sitemap wilt

spreiden.

Als u aangee dat u een sitemap wilt invoegen die uit meerdere kolommen bestaat, kunt

u ook de breedte van de kolommarges instellen en aangeven of u items op het tweede en

derde niveau bij de overeenkomstige items op het hoogste niveau wilt houden. (Als u deze

optie niet selecteert, worden sommige itemlijsten mogelijk gesplitst en over verscheidene

kolommen weergegeven.)

4. Klik in het groepsvak Opmaakproelen op de knop Wijzigen voor het niveau dat u wilt

aanpassen om de gewenste opmaak in te stellen voor de tekst van de sitemap. Desgewenst

kunt u ook schemakleuren toepassen op de hyperlinks in de sitemap en/of ze onderstre-

pen.

5. Klik op OK om de sitemap aan de pagina toe te voegen nadat u de gewenste instellingen

hebt gekozen.

Sitemaps worden automatisch bijgewerkt als u achteraf pagina’s toevoegt of

verwijdert, de relaties tussen pagina’s wijzigt of bepaalde pagina’s een andere

naam gee.

Studio Webdesign 4 Pro 203

12 dynamiSche content

toevoegen

HTML-PAGINA’S MAKEN

HTML is de onderliggende met tags gemarkeerde code die webbrowsers lezen om webpa-

gina’s correct weer te geven. Deze tags bepalen hoe een webpagina wordt opgemaakt in de

browser. Daarom is het van essentieel belang dat de code de juiste structuur hee en aan de

HTML-standaard beantwoordt.

U kunt met dit programma ook webpagina’s in zuivere W3C-compatibele HTML ontwik-

kelen. U kunt dergelijke pagina’s rechtstreeks vanuit de boomstructuur op het tabblad Site

toevoegen. Merk op dat ze met een ander pictogram worden aangeduid dan standaardpagina’s

in de boomstructuur.

Net als standaardpagina’s kunt u HTML-pagina’s via slepen-en-neerzetten naar een andere

positie slepen in de boomstructuur, ze een andere naam geven, er een voorbeeld van weer-

geven, osite links invoegen, de downloadtijd berekenen, enzovoort. In tegenstelling tot

standaardpagina’s zijn HTML-pagina’s echter niet op een hoofdpagina gebaseerd. Een ander

opmerkelijk verschil is dat in een afzonderlijk documentvenster de broncode van de pagina

verschijnt (in plaats van een WYSIWYG-weergave zoals bij een standaardpagina) wanneer

u op het pictogram van een HTML-pagina dubbelklikt op het tabblad Site. Als u ervaring

hebt met HTML, zullen de standaard HTML-tags die u hier aanvankelijk aantre u wellicht

meteen bekend voorkomen!

204 Studio Webdesign 4 Pro

Wanneer u rechtstreeks met HTML-code werkt, is er geen WYSIWYG-weerga-

ve beschikbaar.

Door tekst in te voeren tussen de <body> </body>-tags in dit venster, kunt u de ‘basisstruc-

tuur’ van de HTML-pagina naar behoee bewerken. Onthoud in dit verband dat elke alinea

met de tag <p> moet beginnen en met de tag </p> moet eindigen. Merk op dat u ook tokens

kunt invoegen in uw HTML-code (zie HTML-code toevoegen verderop in dit hoofdstuk).

Klik hiertoe met de rechtermuisknop in de code, kies Token invoegen in het snelmenu en

klik vervolgens in het submenu op het token dat u wilt invoegen. De rest van de HTML-code

buiten de <body> </body>-tags hoe u niet te bewerken.

Om HTML-code te bewerken, is een grondige kennis van HTML vereist. Als u

fouten maakt tijdens het bewerken van de code, wordt de pagina of de volledige

site later mogelijk niet correct weergegeven in een browser.

Als u geen ervaring hebt met HTML, kunt u het beste eerst enkele HTML-handleidingen

downloaden van internet voordat u met zuivere HTML-pagina’s aan de slag gaat.

Zo maakt u een HTML-pagina:

0. Selecteer in het vak Pagina’s (de boomstructuur van uw site) op het tabblad Site de pagina

waarna u een nieuwe pagina wilt invoegen. U hoe maar één keer te klikken om de pagina

te selecteren (de paginanaam wordt vet weergegeven). Als u dubbelklikt, wordt de pagina

ook in de werkomgeving weergegeven.

1. Klik op het pijltje naast de knop

Toevoegen vlak boven de boomstructuur om het

bijbehorende vervolgmenu te openen en kies Nieuwe HTML-pagina.

Zo bewerkt u de HTML-code:

* Dubbelklik op het pictogram van de HTML-pagina in de boomstructuur op het tabblad

Site en bewerk de weergegeven code.

Klik op

op de optiebalk vlak boven het venster met de HTML-code als u de

wijzigingen die u in de code hebt aangebracht weer ongedaan wilt maken.

Zo keert u terug naar de ontwerpweergave:

* Klik op op de optiebalk.

HTML-CODE TOEVOEGEN

U kunt in Studio Webdesign rechtstreeks pagina’s in zuivere HTML ontwikkelen (zie vorige

paragraaf). U kunt echter ook code toevoegen aan afzonderlijke objecten en standaardpa-

gina’s, hoofdzakelijk om de mogelijkheden van die objecten (of de pagina) uit te breiden en

ze interactief te maken.

Studio Webdesign 4 Pro 205

Merk op dat u de vooraf gedenieerde HTML-code niet kunt bewerken. (Dat hee overigens

ook weinig zin.) U kunt echter wel op specieke plaatsen in de weergegeven code extra code

toevoegen. Wanneer u de broncode voor een object of pagina weergee, zult u een aantal

duidelijk herkenbare plaatshouders aantreen (in het wit gemarkeerd).

Dit zijn slechts enkele van de vele plaatshouders die u kunt bewerken in de code voor een

HTML-fragment, object of pagina. (Aankelijk van het type element dat u hebt geselecteerd,

zult u diverse plaatshouders aantreen in de code.) Zo is de laatste plaatshouder in de bo-

venstaande guur bijvoorbeeld uniek voor de broncode van een pagina. In de code voor een

object of HTML-fragment zult u een dergelijke plaatshouder niet aantreen.

U kunt deze plaatshouders via knippen-en-plakken door om het even welke code vervangen,

maar doorgaans zult u hier waarschijnlijk tokens, HTML-code of scripts (zoals JavaScript)

invoegen. Zo kunt u bijvoorbeeld een handler toevoegen die een specieke functie aanroept

wanneer gebruikers op een rollover-aeelding klikken, wat alleen mogelijk is met behulp van

scripts.

HTML-code toevoegen aan een pagina

U kunt ook extra HTML-code toevoegen aan een pagina in Studio Webdesign. Zo kunt u

bijvoorbeeld HTML-fragmenten toevoegen die u van een andere webpagina hebt gekopieerd,

of misschien zelfs code die u zelf hebt geschreven.

Voorts kunt u ook opgemaakte HTML-tekst uit een browser of e-mailprogramma importeren

via het Klembord. Gebruik hiervoor bijvoorbeeld de opdrachten Alles selecteren en Kopi-

eren in uw browser, en kies vervolgens Bewerken > Plakken speciaal in Studio Webdesign.

Met de opdracht Webpagina’s importeren kunt u een of meer webpagina’s importeren in een

nieuw of bestaand Webdesign-project. Desgewenst kunt u alleen specieke elementen van

deze pagina’s importeren.

Wanneer u HTML-code importeert, voegt het programma een markering in op de positie

waar de code zal worden uitgevoerd in de site. Omdat u het eect van de HTML-code pas

kunt zien wanneer u een voorbeeld weergee van de site, is het van essentieel belang dat u

deze markering op de juiste plaats invoegt. Test de webpagina altijd in een webbrowser! Con-

troleer de code en de positie ervan op de pagina mochten er zich problemen voordoen. Als u

enige kennis hebt van HTML, kunt u de broncode voor de pagina regel voor regel doorlopen

in een teksteditor zoals Kladblok of via de opdracht Beeld > Bron in uw browser om eventu-

ele fouten op te sporen.

206 Studio Webdesign 4 Pro

Zo voegt u HTML-code toe aan een pagina:

1. Klik op HTML-code invoegen op de werkbalk Webobjecten of kies Invoegen > Web-

object > HTML in de menubalk.

2. Klik op de pagina of het plakbord om een nieuw HTML-fragment met standaardafmetin-

gen in te voegen op die positie. Sleep met de muis als u aangepaste afmetingen wilt instel-

len voor het HTML-fragment.

3. Gebruik de knoppen Plakken in header en Plakken in body in het dialoogvenster om

de tekst op het Klembord respectievelijk tussen de <head> </head>-tags en <body> </

body>-tags van de pagina te plaatsen. U kunt de code ook rechtstreeks in de juiste sectie

typen in het codevenster boven in het dialoogvenster.

4. Als de code externe bestanden vereist, moet u die selecteren via de knop Toevoegen. Klik

op Insluiten als u de externe bestanden in het projectbestand wilt insluiten.

5. Klik tot slot op OK om het dialoogvenster te sluiten.

ID’s gebruiken

Elk object in Studio Webdesign hee een unieke alfanumerieke id, die vereist is om naar

het desbetreende object te verwijzen in scripts. Standaard worden deze id’s automatisch ge-

genereerd voor alle objecten, tekstkolommen, tabelrijen en tabelcellen in uw site. Zo wordt

aan de eerste AutoVorm die u tekent bijvoorbeeld automatisch ‘qs_1’ als id toegewezen, aan

de tweede AutoVorm ‘qs_2,’ enzovoort. Op dezelfde manier wordt aan aeeldingen ‘pic_1,’

‘pic_2,’ enzovoort als id toegewezen.

U kunt vanzelfsprekend deze automatisch gegenereerde id’s gebruiken in uw scripts. Als u

liever met uw eigen id’s werkt, kunt u het automatisch toewijzen van id’s echter ook uitscha-

kelen voor de volledige site. Kies hiervoor Bestand > Eigenschappen van site, klik op de tab

Opties en schakel de overeenkomstige optie uit onder aan het tabblad. U kunt eenvoudig uw

eigen id’s invoegen in de beschikbare plaatshouder in plaats van de id’s die het programma

automatisch genereert:

Als u een object naar een andere positie op dezelfde pagina of naar een andere

website kopieert, wordt het id-nummer automatisch door een nieuw id-num-

mer vervangen.

U kunt de id van een object op elk moment veranderen nadat u het op een webpagina hebt

geplaatst. Zo kunt u bijvoorbeeld een andere naam gebruiken, of voorkomen dat de id van

een object wordt weergegeven in de broncode, zonder het automatisch toewijzen van id’s in

de website uit te schakelen.

Zo bewerkt u de id van een object:

1. Klik met de rechtermuisknop op het object en kies ID in het snelmenu, of selecteer het

object en kies Opmaak > HTML-id in de menubalk.

Studio Webdesign 4 Pro 207

2. Verander in het dialoogvenster de waarde voor de HTML-id.

3. Wijzig desgewenst de instelling in de vervolgkeuzelijst ID van dit object weergeven. Als

u de optie Standaardinstelling site selecteert, wordt de overeenkomstige instelling op het

tabblad Opties van het dialoogvenster Eigenschappen van site gebruikt. Selecteert u Ja of

Nee, dan wordt de id van het object altijd of nooit weergegeven, ongeacht de standaardin-

stellingen voor de site.

Tokens gebruiken

U kunt een hele reeks HTML-annotatietokens aan HTML-fragmenten, objecten of pagina’s

koppelen in Studio Webdesign. Deze tokens worden automatisch door de overeenkomstige

‘echte’ waarden vervangen wanneer u de site publiceert of er een voorbeeld van weergee.

Als u een token wilt gebruiken, typt u gewoon een tokenstring in een van de plaatshouders

in de broncode.

Raadpleeg het Help-bestand van het programma voor een volledig overzicht van de onder-

steunde tokens.

FORMULIEREN TOEVOEGEN

Met webformulieren kunt u bezoekers op een moderne en eciënte manier om allerlei in-

formatie vragen. Webformulieren zijn op hetzelfde concept gebaseerd als traditionele formu-

lieren op papier om gegevens te verzamelen (ook hier kunnen gebruikers opties ‘aankruisen’

en vakken invullen). Alleen maken webformulieren gebruik van de krachtige mogelijkheden

die internet biedt om informatie uit te wisselen. Enkele voorbeelden van veelgebruikte typen

formulieren zijn feedback- en aanvraagformulieren, gastenboeken, sollicitatieformulieren en

formulieren om persoonlijke gegevens te verzamelen.

Formuliergegevens kunnen op verschillende manieren worden verzameld: per e-mail, via lo-

kale of externe scriptbestanden of via Serif Web Resources.

Structuur van een formulier

De bouwstenen van een formulier bestaan uit een combinatie van tekst, aeeldingen en be-

sturingselementen. De besturingselementen zijn de ‘intelligente’ objecten die de gegevens ver-

zamelen die internetgebruikers hebben ingevoerd. Dergelijke elementen kunnen op dezelfde

manier worden toegevoegd, verplaatst en bewerkt als andere objecten in Studio Webdesign,

zoals aeeldingen en tabellen. Tot deze besturingselementen behoren onder andere knop-

pen, tekstvakken, invoervakken, vervolgkeuzelijsten, selectievakjes en keuzerondjes, evenals

CAPTCHA-objecten en elementen die gebruikers in staat stellen bestanden te selecteren. De

meeste formulieren bestaan uit een willekeurige combinatie van deze elementen, zoals in de

volgende guur.

208 Studio Webdesign 4 Pro

Van de gebruiker wordt verwacht dat hij de vereiste gegevens invoert in de tekstvakken of een

keuze maakt door selectievakjes of keuzerondjes te activeren, of door een optie te selecteren

in een vervolgkeuzelijst. Aankelijk van het type velden dat u gebruikt in een formulier, kan

de gebruiker tekst, numerieke waarden of een combinatie van beide invoeren. Hierbij kunt

u nauwkeurig de tabvolgorde instellen, dat wil zeggen de volgorde waarin de verschillende

velden moeten worden ingevuld. Desgewenst kunt u de ingevoerde gegevens ook valideren.

(Raadpleeg het Help-bestand van het programma voor meer informatie over het instellen van

een tabvolgorde en het valideren voor formuliergegevens.)

Elk veld hee specieke eigenschappen die het uiterlijk van het veld, de toegestane waarde(n)

voor dit veld, het type gegevensvalidatie of de actie vastleggen die van het veld wordt ver-

wacht.

In Studio Webdesign kunt u op verschillende manieren te werk gaan om een formulier te inte-

greren in uw webpagina’s. Desgewenst kunt u een volledige pagina reserveren voor één enkel

formulier en deze pagina in de navigatiebalk voor uw site opnemen (via het selectievakje

Toevoegen aan navigatiestructuur in het eigenschappenvenster van die pagina), zodat het

formulier vanaf elke pagina toegankelijk is.

Onthoud in dit verband dat formulieren pas actief zijn nadat u de website hebt gepubliceerd.

U kunt de functionaliteit van een formulier echter op elk moment testen door een voorbeeld

weer te geven van uw website (zie ‘Een voorbeeld bekijken van uw site’ in hoofdstuk 13).

Wanneer internetgebruikers het formulier verzenden, worden de ingevoerde gegevens auto-

matisch naar de opgegeven bestemming gestuurd.

Merk op dat u in Studio Webdesign ook interactieve webformulieren kunt ontwerpen door

gebruik te maken van JavaScript om de opmaak van formulieren vast te leggen, gegevens te

valideren, berekeningen uit te voeren en de vereiste acties te deniëren voor een formulier.

Waarheen worden de gegevens verzonden?

U kunt formuliergegevens op verschillende manieren verwerken:

* per e-mail;

* via een lokaal of server-side script, dat de gegevens bijvoorbeeld naar een tekstbestand of

een serverdatabase schrij;

Studio Webdesign 4 Pro 209

* via Serif Web Resources, van waaruit de gegevens automatisch naar uw e-mailadres wor-

den doorgestuurd.

Hierbij kunt u het coderingstype, het doelvenster of -frame en de overdrachtsmethode (POST

of GET) instellen die u wilt gebruiken om de formuliergegevens te verwerken.

Formulieren maken

U kunt naar behoee de ingebouwde wizard of een van de kant-en-klare standaardformulie-

ren gebruiken om een webformulier te maken, of zelf een formulier ontwerpen met behulp

van de vooraf gedenieerde formulierobjecten. Voor welke methode u precies moet kiezen, is

aankelijk van de mate waarin u het formulier wilt kunnen aanpassen. We raden u echter aan

eerst even de ingebouwde standaardformulieren te bekijken voordat u zelf formulieren begint

te ontwerpen. Vaak kunt u deze formulieren als uitgangspunt voor uw eigen formulieren ge-

bruiken en zodoende zeer veel tijd besparen.

Zo maakt u een formulier met de wizard Webformulier:

1. Klik op Wizard Webformulier in het vervolgmenu met formuliergereedschappen op

de werkbalk Webobjecten.

2. Klik in het eerste dialoogvenster van de wizard op Een formulier maken met de wizard

en klik op Volg en de.

3. In het volgende dialoogvenster kunt u de besturingselementen selecteren die u aan het

formulier wilt toevoegen. Ga daartoe als volgt te werk:

* Klik op Overige in het groepsvak Toevoegen en kies het gewenste besturingselement

in het dialoogvenster Standaard formulierobject toevoegen als u een kant-en-klaar be-

sturingselement aan het formulier wilt toevoegen.

210 Studio Webdesign 4 Pro

Dubbelklik vervolgens op dit besturingselement in de lijst bovenaan om een dialoog-

venster te openen waarin u indien nodig de instellingen en/of naam van het besturings-

element kunt wijzigen.

1. Klik op een van de overige knoppen in het groepsvak als u een aangepast besturingsele-

ment aan het formulier wilt toevoegen. Lees ‘Besturingselementen bewerken’ verderop

in dit hoofdstuk voor een beschrijving van de verschillende besturingselementen.

2. Geef in het dialoogvenster Nieuw besturingselement toevoegen de interne naam van

het besturingselement op (om het eenduidig te identiceren). U kunt de vooraf gede-

nieerde naam behouden of een andere naam kiezen. Geef vervolgens het label op dat

u naast dit besturingselement wilt weergeven. (Dit label is zichtbaar op het formulier.)

Klik op Besturingselement bewerken als u de eigenschappen van het besturingsele-

ment wilt wijzigen. In het eigenschappenvenster van het besturingselement kunt u de

gewenste validatieregels, de lengte van het element en allerlei andere eigenschappen

instellen (zie ‘Besturingselementen bewerken’ verderop in dit hoofdstuk). Klik op OK

nadat u de gewenste opties hebt ingesteld.

4. Voeg op dezelfde manier de andere vereiste besturingselementen aan het formulier toe.

Merk op dat de besturingselementen in de lijst boven in het dialoogvenster in de volgorde

worden weergegeven waarin u ze hebt toegevoegd.

Voordat u verdergaat, moet u nog een besturingselement toevoegen om het formulier te

verzenden. Dit element is onmisbaar als u gebruikers in staat wilt stellen de ingevoerde

gegevens te versturen. Klik hiertoe op Verzenden-knop. Onthoud in dit verband dat een

formulier behalve een verzendknop doorgaans ook een knop bevat waarmee gebruikers

de ingevoerde gegevens weer kunnen wissen. Om deze knop aan uw formulier toe te voe-

gen, klikt u op Reset-knop.

Klik op Volg en de om verder te gaan nadat u de vereiste besturingselementen hebt toege-

voegd.

5. Geef in het volgende dialoogvenster aan of u de formuliergegevens per e-mail, via een lo-

kaal of extern scriptbestand of via Serif Web Resources wilt verwerken en geef vervolgens

een naam op voor het formulier (zie ‘Formulieren verzenden’ verderop in dit hoofdstuk).

Klik daarna op Voltooien om de wizard te beëindigen.

6. Klik op de pagina op de positie waar u het formulier wilt invoegen als u de standaardaf-

metingen wilt gebruiken voor het formulier. Klik en sleep op de pagina als u aangepaste

afmetingen wilt instellen voor het formulier.

U kunt ook een standaardformulier toevoegen in plaats van een formulier te ontwerpen met

de wizard. Het gaat hierbij om vooraf gedenieerde formulieren waarop gebruikers hun con-

tactgegevens kunnen invoeren, commentaar kunnen geven over uw site, hun mening kwijt

kunnen, enzovoort.

Studio Webdesign 4 Pro 211

Zo maakt u een standaardformulier:

1. Klik op Wizard Webformulier in het vervolgmenu met formuliergereedschappen op

de werkbalk Webobjecten.

2. Klik in het eerste dialoogvenster van de wizard op Een standaardformulier gebruiken en

aanpassen en klik op Volg en de.

3. Selecteer in de keuzelijst boven in het dialoogvenster het gewenste type formulier. Ge-

bruik het voorbeeldvenster onderaan als u een voorbeeld wilt bekijken van elk formulier.

4. Klik op Volg en de om verder te gaan.

5. In het volgende dialoogvenster kunt u het geselecteerde formulier naar behoee aanpas-

sen.

* Om een besturingselement toe te voegen aan het formulier, klikt u op de overeenkom-

stige knop in het groepsvak Toevoegen.

* Als u een van de vooraf gedenieerde besturingselementen wilt bewerken, selecteert u

het in de lijst bovenaan en klikt u op Besturingsel. bewerken (zie Besturingselementen

bewerken verderop in dit hoofdstuk).

* Om een besturingselement te verwijderen, selecteert u het en klikt u op Verwijderen

(of drukt u op Delete op het toetsenbord).

* Gebruik de knoppen

Omhoog en Omlaag als u de volgorde van de besturings-

elementen wilt wijzigen.

6. Klik op Volg en de en geef in het volgende dialoogvenster aan waarheen u de formulierge-

gevens wilt verzenden. Klik daarna op Voltooien om de wizard te beëindigen.

Klik op de pagina op de positie waar u het formulier wilt invoegen als u de standaard-

afmetingen wilt gebruiken voor het formulier. Klik en sleep op de pagina als u aangepaste

afmetingen wilt instellen voor het formulier.

Als u meer vrijheid wilt bij het ontwerpen van een formulier, voegt u gewoon een leeg for-

mulier in en voegt u vervolgens de gewenste besturingselementen en/of standaard formulie-

robjecten toe aan dit formulier. Raadpleeg het Help-bestand van het programma voor meer

informatie.

Besturingselementen voor formulieren

Besturingselementen voor formulieren zijn ‘intelligente’ objecten die zich duidelijk onder-

scheiden van andere objecten in Studio Webdesign. Ze zijn ‘intelligent’ in de zin dat ze de

invoer van gebruikers kunnen opslaan en die naar een centrale locatie kunnen doorsturen

op het moment dat het formulier wordt verzonden. Merk op dat u besturingselementen net

als elk ander object in Studio Webdesign naar behoee kunt verplaatsen, maar dat u er geen

kleuren of transparantie-eecten voor kunt instellen, noch de randen of grootte ervan kunt

aanpassen.

Om de vereiste besturingselementen toe te voegen aan een formulier, kunt u naar keuze ge-

bruikmaken van de wizard Webformulier, van de knoppen in het vervolgmenu met formu-

liergereedschappen op de werkbalk Webobjecten of van de opties in het submenu Invoegen

> Formulier op de menubalk. Hierbij moet u aan elk besturingselement een unieke interne

212 Studio Webdesign 4 Pro

naam toewijzen en vervolgens de gewenste eigenschappen instellen voor het desbetreende

element. Raadpleeg het Help-bestand van het programma voor een overzicht van de bestu-

ringselementen die u zoal aan een formulier kunt toevoegen.

Als u de wizard Webformulier gebruikt, kunt u ook verborgen objecten als besturingselemen-

ten toevoegen. Hoewel dergelijke elementen niet zichtbaar zijn voor de bezoeker, gebruiken

webdesigners ze vaak om gebruikersgegevens te identiceren aan de hand van een duidelijk

herkenbare string. U kunt dit type besturingselementen bijvoorbeeld gebruiken om de da-

tums te registreren waarop een webpagina niet beschikbaar was.

Daarnaast kunt u ook verborgen velden toevoegen aan een formulier. Klik hiertoe met de

rechtermuisknop op het formulier en kies Eigenschappen van formulier bewerken in het

snelmenu. Via het tabblad Verborgen velden in het dialoogvenster kunt u een willekeurig

aantal verborgen velden aan uw formulier toevoegen.

Besturingselementen bewerken

Elk besturingselement (knop, tekstvak, enzovoort) hee specieke eigenschappen en als dus-

danig andere waarden die u kunt bewerken. U kunt deze waarden wijzigen op het moment dat

u het formulier maakt of nadat u het besturingselement aan het formulier hebt toegevoegd.

Zo kunt u bij het ontwerpen van een formulier doorgaans:

* de interne naam en de standaardwaarde van een besturingselement (de waarde die aan-

vankelijk wordt weergegeven) instellen;

* aangeven of u de standaardwaarde van het besturingselement als script wilt behandelen

(al dan niet naar HTML wilt converteren);

* een maximumlengte instellen voor het veld (u kunt deze eigenschap ook voor validatie-

doeleinden gebruiken);

* de status van het besturingselement op Uitgeschakeld instellen, zodat het inactief blij

totdat het wordt geactiveerd door een script;

* een sneltoets instellen, zodat gebruikers via een toetsencombinatie (bestaande uit Alt en

een specieke letter op het toetsenbord) naar het besturingselement kunnen navigeren;

* aangeven of u een besturingselement geschikt wilt maken voor het invoeren van wacht-

woorden (zodat er sterretjes verschijnen tijdens het invoeren van het wachtwoord);

* het kenmerk Alleen-lezen instellen, zodat het besturingselement alleen kan worden be-

werkt als dit via een script wordt toegestaan. Desgewenst kunt u hier de voorwaarde aan

koppelen dat het element alleen kan worden bewerkt als ook andere velden zijn ingevuld.

Als u de eigenschappen van een besturingselement wilt wijzigen op het moment dat u het

formulier maakt, klikt u op de knop Besturingsel. bewerken in de wizard Webformulier. Als

u deze eigenschappen achteraf wilt bewerken, klikt u met de rechtermuisknop op het element

op de pagina en kiest u de overeenkomstige optie in het snelmenu (bijvoorbeeld Invoervak

bewerken).

Studio Webdesign 4 Pro 213

Formulieren verzenden

Alle formulieren hebben één ding met elkaar gemeen: ze moeten worden verzonden voordat

de formuliergegevens kunnen worden verwerkt. U kunt hiervoor zelf een knop Verzenden

ontwerpen, of u kunt de vooraf gedenieerde knop in de wizard Webformulier gebruiken.

Merk op dat elk formulier dat u maakt een verzendknop moet bevatten, en dat deze knop

doorgaans is vergezeld van een knop waarmee gebruikers de ingevoerde formuliergegevens

weer kunnen wissen. Raadpleeg het Help-bestand voor meer informatie.

RSS-FEEDS EN PODCASTS

Really Simple Syndication-feeds (RSS) zijn streams met nieuws en informatie die voortdu-

rend wordt bijgewerkt. RSS-feeds zijn tegenwoordig razend populair op internet. Als u regel-

matig online nieuwsservices raadpleegt, bent u ongetwijfeld al vertrouwd met dit concept.

U herkent dergelijke feeds aan het symbool op websites. Door op dit symbool te klikken,

kunt u zich (handmatig of automatisch) abonneren op de desbetreende RSS-feed via een

RSS-lezer.

Podcasts zijn net als RSS-feeds zogeheten syndicatiefeeds. Bij een podcast wordt echter ge-

bruikgemaakt van digitale media zoals audio- en videobestanden om informatie te versprei-

den.

Met Studio Webdesign kunt u snel en eenvoudig uw eigen RSS-feeds of podcasts maken

en die vervolgens regelmatig bijwerken. Door uw eigen RSS-feeds in uw site te integreren,

wordt u in essentie zelf uitgever (in plaats van lezer) van een of meer informatiediensten met

nieuwsberichten, recensies van websites of artikelen die u zelf hebt geschreven. Podcasts stel-

len u dan weer in staat allerlei mediaclips te verspreiden. Internetgebruikers kunnen zich op

twee manieren op deze feeds abonneren: handmatig of automatisch. In het laatstgenoemde

geval hoeven ze hiertoe slechts op een symbool te klikken dat aangee om welk type feed het

gaat, met name

voor RSS-feeds

voor podcasts

Door feeds te maken waarop gebruikers zich automatisch kunnen abonneren, stelt u hen

in staat de informatie via een specieke lezer toegankelijk te maken, bijvoorbeeld Google

Reader, My Yahoo! of Apple iTunes®. Als u feeds maakt waarop gebruikers zich handmatig

moeten abonneren (bijvoorbeeld via Internet Explorer of Mozilla Firefox), kunnen ze zich

eenvoudig op uw RSS-feed of podcast abonneren door op een hyperlink te klikken, zoals in

de volgende guur:

Eenmaal een gebruiker zich hee geabonneerd op een feed, kan hij deze met de gekozen lezer

bekijken.

214 Studio Webdesign 4 Pro

Om uw eigen RSS-feed of podcast te maken, dient u grotendeels op dezelfde manier te werk

te gaan in Studio Webdesign. Sterker nog, voor beide soorten feeds kan hetzelfde gereedschap

worden gebruikt, met name het gereedschap RSS-feed/podcast toevoegen.

U kunt vanzelfsprekend ook RSS-feeds of podcasts van anderen aan uw webpagina’s toevoe-

gen in plaats van zelf een RSS-feed of podcast te maken. In dat geval moet u een lezer in uw

webpagina’s integreren. Hiertoe gebruikt u het gereedschap RSS-lezer toevoegen.

Browserondersteuning voor feeds

Omdat het om een relatief nieuwe techniek gaat om informatie te verspreiden via internet,

kunnen RSS-feeds en podcasts alleen met de nieuwste versies van webbrowsers worden beke-

ken. Hier is een overzicht van enkele browsers die dergelijke feeds kunnen weergeven zonder

dat hiervoor een externe invoegtoepassing vereist is:

* Internet Explorer 7.0 (of nieuwer)

* Mozilla Firefox (alle versies)

* Opera 8.0 (of nieuwer)

* Netscape Browser 8.1 (of nieuwer)

Mocht u met een oudere versie van de bovengenoemde browsers werken, kunnen we u meteen

geruststellen! Op internet zijn tientallen lezers beschikbaar voor RSS-feeds en podcasts. Geef

bijvoorbeeld ‘RSS-reader’ als zoekterm op in uw favoriete zoekmachine om dergelijke readers

te vinden. Enkele voorbeelden van goede lezers zijn Newz Crawler, FeedDemon en Awasu.

Een RSS-feed of podcast maken

Met het gereedschap RSS-feed/podcast toevoegen kunt u snel en eenvoudig een of meer

RSS-feeds/podcasts maken waarop internetgebruikers zich kunnen abonneren, ofwel via hun

stand-alone lezer of hun browser ofwel via Apple iTunes®.

Zo voegt u een RSS-feed of podcast toe aan uw site:

1. Klik op RSS-feed/podcast toevoegen in het vervolgmenu met syndicatiegereedschap-

pen op de werkbalk Webobjecten.

2. Klik op RSS-feed toevoegen of Podcast toevoegen naargelang u een RSS-feed of podcast

wilt maken. Let erop dat in de lijst links in het dialoogvenster een nieuwe feed verschijnt.

(Het programma kent standaard de naam Nieuwe RSS-feed of Nieuwe podcast toe aan de

feed.) Selecteer de nieuwe feed in de lijst aan de linkerkant en kies vervolgens in het deel-

venster vlak daarnaast de gewenste instellingen voor de feed. Om de huidige instellingen

te wijzigen, klikt u gewoon op de overeenkomstige cel in de kolom Waarde. Naargelang

de instelling die u wilt wijzigen, kunt u hiertoe gebruikmaken van een vervolgkeuzelijst,

invoervak of dialoogvenster.

3. Klik op OK.

4. Bij podcasts kunt u in het dialoogvenster RSS-feed aangeven of gebruikers zich automa-

tisch op de podcast kunnen abonneren vanuit een specieke lezer. Selecteer hiertoe de op-

tie Google Reader, My Yahoo! of iTunes in de vervolgkeuzelijst Podcast openen met. Als

u wilt dat gebruikers zich handmatig abonneren, selecteert u de optie RSS-standaard.

Studio Webdesign 4 Pro 215

5. Klik op OK.

Klik op de pagina op de positie waar u de feed wilt invoegen.

Let erop dat op de positie waar u hebt geklikt de knop

of verschijnt (naargelang u een

RSS-feed dan wel een podcast hebt ingevoegd).

Voeg bij podcasts waarop gebruikers zich automatisch kunnen abonneren een

label toe aan deze knop om aan te geven via welke toepassing de podcast toe-

gankelijk zal worden gemaakt.

Zo vervangt u een feed door een andere feed:

* Nadat u een RSS-feed of podcast hebt toegevoegd aan uw site, verschijnt automatisch een

dialoogvenster waarin u de bovengenoemde knop desgewenst aan een andere RSS-feed

of podcast kunt koppelen wanneer u het gereedschap RSS-feed/podcast toevoegen

selecteert. Kies in dit dialoogvenster gewoon de feed waaraan u de knop wilt koppelen en

klik vervolgens op OK.

Nadat u een RSS-feed of podcast hebt gemaakt, kunt u er respectievelijk artikelen of aeverin-

gen aan toevoegen. Merk op dat u uw site opnieuw moet publiceren nadat u een RSS-feed of

podcast hebt bijgewerkt (zie ‘Uw site op het web publiceren’ in hoofdstuk 13).

Podcasts naar iTunes doorsturen

Als u uw podcast toegankelijk wilt maken via iTunes, moet u deze ter goedkeuring aan iTunes

voorleggen. Als uw podcast wordt goedgekeurd door de medewerkers van iTunes, kunnen

iTunes-gebruikers zich via iTunes op uw podcast abonneren.

Zo legt u een podcast ter goedkeuring aan iTunes voor:

1. Start iTunes.

2. Klik op Podcasts in het vak LIBRARY.

3. Klik onder in de werkomgeving op de knop Podcast Directory.

4. Klik in het vak FOR PODCASTERS onder in het venster op Submit a Podcast.

5. Geef in het volgende venster in het vak Podcast Feed URL het webadres van uw podcast

op.

6. Klik op Continue.

216 Studio Webdesign 4 Pro

E-COMMERCE

Over e-commerce

‘E-commerce’ is een overkoepelende term voor het kopen en verkopen van goederen via

internet. Online winkels zijn tegenwoordig een vast onderdeel van internet. Elk bedrijf dat

zichzelf respecteert, probeert zijn producten tegenwoordig ook rechtstreeks via internet aan

de man te brengen. Hoogstwaarschijnlijk hebt u zelf ook al eens boeken, cd’s, vliegtuigtickets,

enzovoort via internet besteld. Elke e-commercesite maakt gebruik van winkelwagentjes en

een systeem om betalingen te verwerken. Een winkelwagentje is een virtueel mandje (verge-

lijkbaar met het winkelmandje in een warenhuis) waarin alle artikelen worden geplaatst die

u hebt gekozen in een online winkel. Met dit winkelmandje begee u zich vervolgens naar de

virtuele kassa, waar aan de hand van een of ander systeem om betalingen te verwerken het

nanciële gedeelte van uw aankoop wordt afgehandeld.

Grote bedrijven ontwikkelen doorgaans een eigen mandjessysteem dat speciek op hun

producten is afgestemd. (Om betalingen te verwerken, wordt meestal een beroep gedaan op

externe bedrijven.) Kleinere bedrijven of organisaties nemen vaak hun toevlucht tot kant-

en-klare oplossingen van externe leveranciers, omdat het ontwikkelen van een dergelijk

mandjessysteem zeer veel tijd en geld kost. Op internet vindt u tientallen bedrijven die der-

gelijke e-commercefuncties aanbieden. Het basisconcept is telkens hetzelfde: om gebruik te

kunnen maken van de diensten die ze aanbieden, hebt u een gebruikersaccount nodig. De

meeste van deze online betaalservices aanvaarden verschillende soorten creditcards om be-

talingen te verwerken.

Wellicht vraagt u zich nu af wat de rol van Studio Webdesign is in dit alles. Het unieke aan dit

programma is dat het u de mogelijkheid biedt een online betaalservice te kiezen en vervol-

gens door een formulier of link (dat wil zeggen een eenvoudige knop of een hyperlink voor

een willekeurig object) op uw pagina te plaatsen verbinding te maken met die service. Als u

gebruikmaakt van formulieren, kunt u verschillende aankoopopties instellen en ook automa-

tisch de BTW op de producten, de verzendkosten, eventuele kortingen bij het bestellen van

grote hoeveelheden, enzovoort berekenen. Als u links gebruikt, hoeven gebruikers slechts

met de muis te klikken om de goederen te bestellen. In dat geval kunnen ze echter niet uit

verschillende aankoopopties kiezen. Welke functies precies worden ondersteund, hangt af

van de gekozen betaalservice.

Een online betaalservice instellen

In Studio Webdesign kunt u snel en eenvoudig de gewenste opties instellen om betalingen te

verwerken voor de producten of diensten die u aanbiedt. In het programma zijn de vereiste

functies geïmplementeerd voor een van de meest gebruikte online betaalservices. Als u regel-

matig producten bestelt op eBay, bent u wellicht al vertrouwd met het PayPal-systeem. Tij-

dens het congureren van uw account wordt u automatisch naar de website van deze online

betaalservice geleid, waar u zich als geregistreerde gebruiker kunt aanmelden.

Raadpleeg de website van uw provider voor meer informatie over de onder-

steunde e-commercefuncties.

Studio Webdesign 4 Pro 217

Zo stelt u een online betaalservice in:

1. Klik op Online betaalservice instellen in het vervolgmenu met e-commercegereed-

schappen op de werkbalk Webobjecten.

2. U kunt uit twee opties kiezen in het dialoogvenster Online betaalservice instellen, naarge-

lang u een nieuwe gebruiker bent of al een account hebt:

* Als u een nieuwe gebruiker bent, selecteert u een online betaalservice en klikt u op Nu

aanmelden. Dan wordt automatisch een nieuw browservenster geopend en de website

van de gekozen betaalservice geladen, waar u zich kunt registreren.

* Als u al een account hebt bij de online betaalservice, activeert u het keuzerondje naast

deze service en klikt u op Vol ge nd e. Met deze optie stelt u de gekozen betaalservice als

standaardservice in voor uw site. (Omdat al klant bent, hoe u geen nieuwe gebruikers-

account in te stellen.)

3. Kies in het volgende dialoogvenster de gewenste instellingen voor de online betaalser-

vice.

4. Klik op Voltooien.

Als u PayPal gebruikt, kunt u het e-mailadres opgeven dat u wilt gebruiken om betalingen te

ontvangen. U kunt ook aangeven of u de ‘sandbox’ van PayPal wilt gebruiken. Het gaat hierbij

om een hulpmiddel waarmee u de e-commercefunctionaliteit van uw site kunt testen voordat

u ‘live’ gaat. Merk op dat u een afzonderlijke testaccount nodig hebt om gebruik te kunnen

maken van deze voorziening. Klik op Meer info om een afzonderlijke sandbox-account in te

stellen naast uw standaard PayPal-account.

Zodra u een online betaalservice hebt ingesteld, kunt u een e-commerceobject toevoegen.

Een e-commerceobject toevoegen (PayPal)

Studio Webdesign bevat ingebouwde wizards om e-commerceobjecten toe te voegen aan uw

webpagina’s. Onthoud in dit verband dat u e-commerceobjecten naar keuze als formulier of

als link kunt toevoegen, aankelijk van de producten die u verkoopt en hoe u die wilt ver-

kopen.

Stel dat u handelaar bent en dat u een partij bakstenen wilt verkopen op uw site. In dat geval

kunt u een e-commerceknop (in de vorm van een ‘Nu kopen’-link). Dat is bijvoorbeeld zinvol

als alle bakstenen dezelfde vorm/kleur hebben en als u potentiële kopers wilt verplichten om

een vaste hoeveelheid bakstenen te kopen.

Omdat deze link slechts een eenvoudige knop is, zijn de ‘interactieve’ aankoopopties (bijvoor-

beeld kleur, grootte en aantal) die doorgaans vereist zijn voor complexe transacties niet be-

schikbaar. Door op de link te klikken, kan de koper alleen de vooraf gedenieerde standaard-

hoeveelheid kopen – niet meer en niet minder. In bepaalde situaties volstaat een dergelijke

link, in andere situaties is ze echter volstrekt ontoereikend!

218 Studio Webdesign 4 Pro

Als u gebruikmaakt van een e-commerceformulier, kunt u verschillende interactieve ele-

menten in uw formulier integreren en potentiële kopers zodoende meer mogelijkheden aan-

reiken. Zo kunt u de klant in het bovenstaande voorbeeld bijvoorbeeld de grootte en kleur

van de bakstenen en het gewenste aantal bakstenen laten kiezen, zodat hij exact kan bestellen

wat hij nodig hee.

In dit voorbeeld hee de koper bijvoorbeeld 2600 bakstenen van het type ‘Kram - Oranje’

besteld.

Als u talrijke artikelen wilt aanbieden, kunt u gebruikmaken van een Serif-database (*.sdb)

om de vereiste gegevens op te slaan. Het gaat hierbij om een database met een speciale struc-

tuur die speciaal is afgestemd op e-commercetoepassingen. Lees ‘E-commercegegevens sa-

menvoegen’ verderop in dit hoofdstuk voor meer informatie.

De verschillende formulieren en links zijn vanuit één dialoogvenster toegankelijk. Het enige

wat u hoe te doen om een formulier of link te selecteren, is het overeenkomstige keuzerondje

activeren in dit dialoogvenster. We hebben overigens doelbewust voor de term ‘links’ geko-

zen omdat u deze e-commercelinks op dezelfde manier als gewone hyperlinks kunt instellen

voor een vectorobject, aeelding, vorm of tekst. Klik hiervoor met de rechtermuisknop op

het desbetreende element en kies Hyperlink in het snelmenu (zie ‘Hyperlinks en bladwij-

zers toevoegen’ in hoofdstuk 11). U kunt deze links in plaats van een standaard PayPal-knop

gebruiken.

Welk dialoogvenster wordt weergegeven wanneer u een e-commerceobject toevoegt, is aan-

kelijk van de gekozen online betaalservice (zie ‘Een online betaalservice instellen’ hiervoor).

Hierna gaan we ervan uit dat u PayPal als online betaalservice gebruikt.

Zo voegt u een e-commerceobject toe aan een pagina:

1. Klik op E-commerceobject invoegen in het vervolgmenu met e-commercegereed-

schappen op de werkbalk Webobjecten.

2. Kies in het dialoogvenster PayPal-object toevoegen het e-mailadres dat u wilt gebruiken

om betalingsinformatie te ontvangen. Standaard wordt het e-mailadres gebruikt dat u tij-

dens het instellen van de online betaalservice hebt opgegeven. Als u een ander e-mailadres

wilt gebruiken, schakelt u het selectievakje Standaardadres van site gebruiken uit en se-

lecteert u het gewenste e-mailadres in de vervolgkeuzelijst of typt u een nieuw e-mailadres

in het invoervak.

3. Selecteer het gewenste type object. Selecteer een van de formuliertypen als u een e-com-

merceformulier wilt maken waarop klanten uit verscheidene betaalopties kunnen kiezen

Studio Webdesign 4 Pro 219

(bijvoorbeeld kleur en hoeveelheid). Als u geen aankoopopties wilt aanbieden voor het

product dat u verkoopt, selecteert u een van de verschillende soorten links om een e-

commerceknop te maken. Kies voor een samenvoegformulier of samenvoeggebied als u

gegevens wilt ophalen uit een database in plaats van die handmatig toe te voegen in het

dialoogvenster Artikelgegevens (zie ‘E-commercegegevens samenvoegen’ verderop in dit

hoofdstuk).

4. (Facultatief) Als u geen formulier of knop wilt gebruiken, selecteert u de laatste optie.

Dan kunt u in het volgende dialoogvenster de code plakken van een gecodeerde knop die

met de PayPal Button Generator is gemaakt (raadpleeg de website van PayPal voor meer

informatie). Klik op Volg en de nadat u de gewenste optie hebt geselecteerd.

5. Selecteer in het volgende dialoogvenster de knop die u wilt gebruiken voor het e-com-

merceobject. Activeer de optie Standaard tekstknop gebruiken en typ in het invoervak

ernaast de gewenste tekst als u een tekstknop wilt gebruiken. U kunt ook een standaardaf-

beelding gebruiken. Selecteer in dat geval de gewenste aeelding in de keuzelijst. Activeer

de optie Eigen aeelding gebruiken en selecteer een aeelding als u een aangepaste af-

beelding wilt gebruiken voor de knop. Merk op dat de aeelding standaard wordt ingeslo-

ten in uw site. Schakel het selectievakje onder in het dialoogvenster uit als u de aeelding

aan de site wilt koppelen. Klik daarna op Volg en de.

6. In het dialoogvenster Artikelgegevens kunt u de naam, id en prijs van het artikel opgeven,

aangeven of u het standaard btw-tarief of een aangepast tarief wilt hanteren, enzovoort.

Hier is een overzicht van de opties die u kunt instellen in dit dialoogvenster:

* Naam van artikel: typ hier de naam van het artikel dat u verkoopt. Deze naam wordt

op het formulier en in het mandje weergegeven.

* Klant de mogelijkheid bieden de artikelnaam op te geven: activeer dit selectievakje

om de bovengenoemde artikelnaam te vervangen door een invoervak waarin de klant

zelf een naam kan typen. Deze optie is bijvoorbeeld ook handig als u bezoekers in staat

wilt stellen aanvullende informatie op te geven met betrekking tot een donatie.

* Artikel-id: typ hier een tekenreeks die PayPal kan gebruiken tijdens het verwerken van

de transactie.

* Valuta: selecteer via deze vervolgkeuzelijst de gewenste valuta voor de transactie.

* Prijs: typ hier de prijs van het artikel. Deze prijs wordt standaard weergegeven op het

scherm.

* Klant de mogelijkheid bieden het bedrag in te voeren: activeer dit selectievakje om

de bovengenoemde prijs te vervangen door een invoervak waarin de klant zelf de prijs

kan invoeren. Gebruik deze optie bijvoorbeeld voor donatieformulieren, zodat gebrui-

kers het bedrag kunnen opgeven dat ze willen schenken.

* Standaard btw-tarief in mijn proel negeren voor dit artikel: activeer dit selectievak-

je als u een aangepast btw-tarief wilt hanteren in plaats van het btw-tarief dat standaard

is gedenieerd in uw PayPal-proel.

Klik op Volg en de nadat u de gewenste instellingen hebt gekozen.

Als u voor een van de vooraf gedenieerde samenvoegformulieren of een samenvoeggebied

hebt gekozen om gegevens op te halen uit een e-commercedatabase, kunt u hier de gegevens-

bron selecteren waaruit u gegevens wilt ophalen. Vergeet niet de juiste valuta in te stellen!

220 Studio Webdesign 4 Pro

7. Als u in stap 3 voor een e-commerceformulier hebt gekozen, kunt u in dit dialoogvenster

zo nodig de opties instellen waaruit klanten kunnen kiezen. (Als u PayPal gebruikt, kunt

u per formulier slechts twee opties instellen.) Activeer hiervoor het selectievakje Optie-

veld toevoegen en voeg vervolgens, aankelijk van uw behoeen, een veld met een vaste

naam, een invoervak, keuzerondjes of een vervolgkeuzelijst toe. Merk op dat u een nieuw

optieveld kunt maken of een optieveld kunt selecteren dat u eerder hebt opgeslagen. Klik

op Volg en de nadat u de gewenste optievelden hebt ingesteld. Merk op dat dit dialoogven-

ster niet wordt weergegeven voor samenvoegformulieren.

8. Geef in het invoervak boven in het dialoogvenster een standaardhoeveelheid op voor het

artikel, of activeer het selectievakje als u de klant in staat wilt stellen de hoeveelheid te

kiezen aan de kassa. (Dit dialoogvenster wordt niet weergegeven voor samenvoegformu-

lieren.)

Activeer de optie Invoervak toevoegen, zodat de klant bij het selecteren van het artikel

meteen ook het aantal exemplaren kan opgeven dat hij wil kopen.

9. Stel via de invoervakken onder in het dialoogvenster de verzend- en verpakkingskosten

in voor de bestelling (per bestelling, voor het eerste artikel en/of voor elk extra artikel dat

wordt besteld).

Als u deze velden niet invult, worden de standaardwaarden in uw PayPal-proel gebruikt.

Klik op Volg en de nadat u de gewenste instellingen hebt gekozen.

10. In het dialoogvenster Klantgegevens kunt u aangeven of u de klant al dan niet om een

adres wilt vragen, of als u hem wilt verplichten om een adres in te voeren. Desgewenst

kunt u de klant om aanvullende informatie vragen voordat hij zijn bestelling bevestigt.

Klik op Volg en de om verder te gaan.

11. In het dialoogvenster Betalingspagina’s kunt u betaalopties instellen:

* Selecteer in de vervolgkeuzelijst bovenaan de gewenste stijl voor de betalingspagina (als

u vooraf een paginastijl hebt ingesteld via uw PayPal-account).

* Selecteer in de vervolgkeuzelijst eronder een taal voor de inlogpagina.

* Wijzig desgewenst de tekst voor de knop Doorgaan op de betalingspagina als de beta-

ling is goedgekeurd.

* Geef zo nodig de URL op van de pagina’s die moeten worden weergegeven als de beta-

ling is goedgekeurd dan wel werd geannuleerd.

Klik op Vol ge nd e nadat u de gewenste instellingen hebt gekozen.

12. Kies in het dialoogvenster Lay-out van formulier (alleen beschikbaar voor e-commerce-

formulieren) de gewenste lay-outopties voor uw formulier. Aan de hand van de selectie-

vakjes in dit dialoogvenster kunt u nauwkeurig aangeven wat voor informatie u precies

wilt weergeven op het formulier. Zo kunt u bijvoorbeeld instellen of u de naam en/of prijs

van de artikelen wilt tonen op het formulier. Bij het ontwerpen van een samenvoegformu-

lier kunt u ook aangeven of u een aeelding en een gedetailleerde en/of korte beschrijving

van elk artikel wilt weergeven op het formulier, de waarden van vaste opties wilt tonen,

enzovoort. Desgewenst kunt u het formulier ook opnieuw opmaken nadat de gegevens

zijn samengevoegd.

Studio Webdesign 4 Pro 221

13. Klik op Voltooien.

14.

Plaats de muisaanwijzer op de positie waar u het formulier of de knop wilt invoegen

op de pagina en klik met de linkermuisknop.

Zo bewerkt u een e-commerceformulier of -knop:

1. Klik met de rechtermuisknop op het formulier en kies E-commerceformulier bewerken,

of klik met de rechtermuisknop op de knop en kies E-commerceknop bewerken.

2. Doorloop de verschillende dialoogvensters een voor een en kies telkens de gewenste in-

stellingen.

GEGEVENS SAMENVOEGEN

Databasegegevens samenvoegen

U kunt gegevens uit een bestaande Serif-database of een externe gegevensbron zoals een Mi-

croso Access-database, dBASE-bestand, HTML-document, Excel-bestand, ODBC-gege-

vensbron of tekstbestand met scheidingstekens ophalen in Studio Webdesign en die vervol-

gens naar behoee repliceren door gebruik te maken van een zogeheten samenvoeggebied.

Het kan hierbij om een verzendlijst, personeelslijst, inventaris, productlijst of willekeurige

andere gegevens gaan, zolang die gegevens maar in een database (de gegevensbron genoemd)

kunnen worden opgeslagen.

Merk op dat u behalve tekst ook aeeldingen (bijvoorbeeld een digitale fotocollectie) kunt

samenvoegen met Studio Webdesign. U kunt het programma zelfs automatisch een fotodata-

base (een eenvoudige database in sdb-formaat) laten genereren van alle aeeldingen in een

bepaalde map en aan de hand van deze database vervolgens een terugkerende lay-out met

rijen en kolommen genereren die u als basis kunt gebruiken voor productcatalogi of fotoal-

bums.

Overzicht

Voor eenvoudige samenvoegbewerkingen kunt u gebruikmaken van een Serif-database

(*.sdb). Dit databaseformaat leent zich uitstekend voor het opslaan van niet-opgemaakte

platte tekst, bijvoorbeeld voor een productlijst, maar is ook geschikt voor andere taken. Zo

kunt u bijvoorbeeld een nieuwe lijst maken door een sdb-bestand met de vereiste velden te

creëren en deze velden vervolgens met gegevens te vullen. Het grote voordeel van een Serif-

database is ongetwijfeld dat u uw gegevens rechtstreeks vanuit het programma kunt bewerken

en indien nodig snel en eenvoudig nieuwe velden of gegevens aan uw database kunt toevoe-

gen. U kunt met dit programma echter ook gegevens uit externe gegevensbronnen samen-

voegen. Zo kunt u bijvoorbeeld niet-opgemaakte tekstbestanden importeren die u vanuit een

e-mailprogramma hebt geëxporteerd, of gegevens ophalen uit databasebestanden die met een

programma als Access, Outlook, Excel, enzovoort zijn gemaakt. U kunt zelfs tabellen op be-

staande webpagina’s en gegevens uit ODBC-gegevensbronnen importeren!

222 Studio Webdesign 4 Pro

Zodra u een gegevensbron hebt ingesteld, kunt u de samenvoeglijst (de lijst met gegevens

die zullen worden samengevoegd) bewerken door de records te selecteren waaruit u gege-

vens wilt ophalen en er allerlei geavanceerde lter- en sorteercriteria voor in te stellen om de

gegevens verder te verjnen. Hiertoe moet u velden toevoegen aan een samenvoeggebied dat

u eerder op uw webpagina hebt geplaatst. Dit samenvoeggebied is als het ware de container

waarin de gegevens later zullen worden samengevoegd. Zo beschikt u binnen de kortste keren

over een basislay-out die u naar een nieuwe website kunt samenvoegen, waarbij het gede-

nieerde samenvoeggebied automatisch evenveel keer wordt gerepliceerd als er records zijn in

de gegevensbron.

Het programma ondersteunt ook geavanceerde samenvoegfuncties. Zo kunt u bijvoorbeeld

gebruikmaken van bladwijzers om hyperlinks in te stellen tussen pagina’s met een beknopte

beschrijving en een volledige beschrijving van elke record. U kunt ook samenvoegvelden in-

voegen in gegenereerde paginatitels, zodat gebruikers vanuit de lijst met een beknopt over-

zicht van elk item eenvoudig naar de bijbehorende pagina met een volledige beschrijving

kunnen navigeren (zie Overige samenvoegfuncties verderop in deze handleiding).

Voor e-commercetoepassingen kunt u gebruikmaken van een e-commercedatabase en terug-

kerende ‘Nu kopen’- of ‘Toevoegen aan mandje’-formulieren om de vereiste gegevens samen

te voegen. U kunt hiervoor ook samenvoeggebieden gebruiken. Het voordeel van samen-

voegformulieren voor e-commercegegevens is echter dat dergelijke formulieren rechtstreeks

transacties met een online betaalservice (bijvoorbeeld PayPal) mogelijk maken in de vorm

van ‘Nu kopen’- of ‘Toevoegen aan mandje’-knoppen. Hierover leest u meer in ‘E-commerce-

gegevens samenvoegen’ verderop in deze handleiding.

Een gegevensbron maken

U kunt eenvoudig een nieuwe Serif-database (*.sdb) maken vanuit het programma. Nadat u

de vereiste gegevens hebt toegevoegd aan deze database, kunt u die als gegevensbron gebrui-

ken om gegevens samen te voegen.

Zo maakt u een nieuwe gegevensbron:

1. Klik op Database maken op de werkbalk Gegevens samenvoegen (geef deze werkbalk

indien nodig eerst weer via Beeld > Werkbalken > Gegevens samenvoegen).

2. Navigeer in het dialoogvenster Nieuwe gegevensbron maken naar de map waarin u de

database wilt opslaan, geef een bestandsnaam op voor de nieuwe database en klik op Op-

slaan.

3. Klik in het dialoogvenster Database aanpassen op Invoegen om de vereiste velden toe te

voegen aan uw database.

4. Geef in het dialoogvenster Veldnaam een naam op voor het eerste veld dat u in de data-

base wilt opnemen en klik op OK. Herhaal dit voor alle andere velden die u aan de data-

base wilt toevoegen. Bevestig het dialoogvenster Database aanpassen tot slot met OK.

5. Het dialoogvenster Database bewerken verschijnt, waarin de velden worden weergegeven

die u hiervoor hebt gedenieerd. Standaard worden in dit dialoogvenster de eerste zes

velden in de database weergegeven. Gebruik indien nodig de schuialk aan de rechter-

kant om de overige velden weer te geven als u meer velden hebt gedenieerd. Omdat het

om een nieuwe database gaat, zijn de velden aanvankelijk nog leeg. U kunt nu naar keuze

Studio Webdesign 4 Pro 223

ofwel meteen gegevens beginnen in te voeren (dat wil zeggen records beginnen toe te

voegen aan de database), of u kunt dit later doen. Om een record toe te voegen aan de

database, typt u gewoon de vereiste gegevens in de verschillende velden. Klik vervolgens

op Toevoegen om de record toe te voegen. Herhaal dit totdat de vereiste records aan de

database zijn toegevoegd en klik tot slot op OK.

6. Het dialoogvenster Lijst met samen te voegen gegevens verschijnt, waarin alle records

worden weergegeven die u in de vorige stap hebt toegevoegd. Klik op OK om dit dialoog-

venster te sluiten en naar de werkomgeving te gaan.

U kunt met Studio Webdesign ook uw eigen fotodatabases maken. Merk op dat

u in een dergelijke database behalve uw foto’s ook alle EXIF-gegevens kunt op-

slaan die automatisch zijn vastgelegd tijdens het maken van de foto’s. Raadpleeg

het Help-bestand van het programma voor meer informatie.

Samenvoeggebieden invoegen voor uw gegevens

U kunt de gegevens in een gegevensbron pas samenvoegen nadat u die in een webpagina hebt

opgenomen. Studio Webdesign steekt u op dit gebied een handje toe door u de mogelijkheid

te bieden snel een terugkerende lay-out te deniëren die de vereiste plaatshouders (velden)

bevat om een nieuw document te genereren dat evenveel pagina’s bevat als er records zijn in

de gegevensbron en de vooraf gedenieerde velden met tekst of aeeldingen uit de opgegeven

gegevensbron te vullen. Onthoud in dit verband dat u een onbeperkt aantal gegevensbronnen

kunt maken, maar dat er per samenvoeggebied maar één gegevensbron geopend kan zijn.

Merk op dat elk samenvoeggebied zijn eigen gegevensbron hee en dat u op

elke webpagina maar één samenvoeggebied kunt plaatsen.

Een terugkerende lay-out begint met een samenvoeggebied, dat wil zeggen één enkele cel

waarvan de grootte het aantal databaserecords bepaalt dat horizontaal en verticaal kan wor-

den weergegeven op een pagina. Binnen dit samenvoeggebied kunt u verschillende elementen

plaatsen, zoals:

224 Studio Webdesign 4 Pro

* een of meer tekstvelden die gegevens bevatten die uit dezelfde record zijn opgehaald;

* een of meer velden voor aeeldingen waarin u samengevoegde aeeldingen uit een wel-

bepaalde gegevensrecord kunt weergeven;

* allerlei andere elementen, zoals artistieke tekst, AutoVormen, enzovoort.

Nadat u een samenvoeggebied hebt gemaakt en er de vereiste velden (of andere elementen)

hebt aan toegevoegd, kunt u dit gebied en de velden die het bevat automatisch volgens een

welbepaald patroon repliceren en de tekst of aeeldingen uit uw gegevensbron naar een nieu-

we website samenvoegen. Het samenvoeggebied wordt automatisch evenveel keer gerepli-

ceerd als er records zijn in de gegevensbron, waarbij in elk gebied de gegevens uit een andere

record worden weergegeven.

Zo voegt u een samenvoeggebied in:

1. Selecteer een geschikte gegevensbron.

2. Klik op

Samenvoeggebied invoegen op de werkbalk Gegevens samenvoegen.

3. Klik in het dialoogvenster Database kiezen op Bladeren, selecteer de database die u als

gegevensbron wilt gebruiken en klik op Openen. Klik vervolgens op OK. Let erop dat u

vanuit dit dialoogvenster ook een nieuwe database kunt maken (zie ‘Een gegevensbron

maken’ hiervoor).

4. Het dialoogvenster Instellingen voor herhalen van samenvoeggebied verschijnt, waarin

een paginalay-out wordt weergegeven die aanvankelijk uit een raster van 1x4 cellen be-

staat: één samenvoeggebied horizontaal en vier verticaal. Via het voorbeeldvenster aan de

linkerkant kunt u eenvoudig het resultaat van de huidige instellingen controleren

5. U kunt ofwel rechtstreeks specieke eigenschappen voor het samenvoeggebied (de ba-

siseenheid) instellen in het dialoogvenster, of u kunt het dialoogvenster sluiten en via

slepen-en-neerzetten de grootte en positie van het gebied instellen. U kunt ook een com-

binatie van beide methoden gebruiken door het dialoogvenster indien nodig opnieuw te

openen.

* Geef in het groepsvak Lay-out aan hoeveel keer u het samenvoeggebied horizontaal en

verticaal wilt herhalen op de pagina. Merk op dat u ook de afstand tot de linker- en bo-

venrand van de pagina, de breedte en hoogte van het samenvoeggebied, en eventueel ook

de horizontale of verticale afstand tussen de afzonderlijke samenvoeggebieden kunt in-

stellen. Activeer het selectievakje Alle records op één pagina weergeven als u de grootte

van de pagina automatisch wilt aanpassen, zodat alle records uit de gegevensbron op één

enkele pagina kunnen worden weergegeven.

* Klik en sleep op de pagina om de grootte en positie van het samenvoeggebied in te stel-

len.

Studio Webdesign ‘onthoudt’ welke gegevensbron is ingesteld voor de pagina wanneer u de

website opslaat. De volgende keer dat u uw project opent, wordt op de achtergrond auto-

matisch ook de ingestelde gegevensbron geopend. Zolang u dezelfde gegevensbron gebruikt,

hoe u deze dus niet handmatig opnieuw te openen.

Studio Webdesign 4 Pro 225

E-commercegegevens samenvoegen

De standaard samenvoegfuncties in Studio Webdesign zijn geschikt als u tekst, aeeldingen

of een combinatie van beide alleen maar wilt weergeven, bijvoorbeeld om een lijst of een

galerij toe te voegen aan uw webpagina’s. Door de ingebouwde samenvoegfuncties echter in

combinatie met een meer interactieve voorziening zoals formulieren voor het samenvoegen

van e-commercegegevens te gebruiken, kunt u krachtige databasegestuurde e-commerceop-

lossingen maken die u in staat stellen artikelen rechtstreeks online te verkopen. Om dergelijke

oplossingen te implementeren, moet u gebruikmaken van een e-commercedatabase. Deze

database, die overigens een Serif-database (sdb-bestand) dient te zijn, moet een veldstructuur

hebben die speciek is voor de online betaalservice die u gebruikt om online transacties te

verwerken (bijvoorbeeld PayPal).

Om e-commercetransacties mogelijk te maken, moet u doorgaans een speciek type e-com-

merceformulieren aan uw pagina’s toevoegen. Als internetgebruikers maar één artikel kun-

nen kopen op uw site, kunt u gebruikmaken van een terugkerend ‘Nu kopen’-formulier

om ze rechtstreeks naar de kassa te leiden. Als gebruikers meerdere artikelen kunnen kopen,

gebruikt u een terugkerend ‘Toevoegen aan mandje’-formulier. Omdat beide formulieren

automatisch worden herhaald, wordt het desbetreende formulier evenveel keer ‘opnieuw

gegenereerd’ als er records zijn in uw gegevensbron bij het samenvoegen van de e-commerce-

gegevens naar een nieuwe site. Hierbij worden op elk formulier gegevens uit één enkele record

in de gegevensbron weergegeven. Lees ‘Een e-commerceobject invoegen (PayPal)’ eerder in

dit hoofdstuk voor meer informatie.

226 Studio Webdesign 4 Pro

In plaats van een formulier dat automatisch wordt herhaald, kunt u ook een samenvoegge-

bied voor e-commercegegevens op uw webpagina plaatsen. Het gaat hierbij in wezen om een

‘Alleen-weergeven’ versie van de bovengenoemde formulieren, zonder ‘Nu kopen’- of ‘Toe-

voegen aan mandje’-knoppen. Als u een dergelijk samenvoeggebied gebruikt, kunnen inter-

netgebruikers uw artikelen dus wel bekijken, maar kunnen ze die niet kopen.

Net als bij het samenvoegen van gewone databasegegevens kunt u bij het samenvoegen van

e-commercegegevens gebruikmaken van samenvoeglijsten voor het selecteren, lteren en/of

sorteren van de gegevens die u wilt samenvoegen. Nadat u een samenvoeglijst hebt gemaakt,

kunt u de e-commercegegevens naar een nieuwe site samenvoegen en deze vervolgens publi-

ceren (zie ‘De gegevens naar een nieuwe site samenvoegen en deze publiceren’ in het Help-

bestand).

Een e-commercedatabase maken

U kunt rechtstreeks vanuit dit programma een e-commercedatabase maken door een online

betaalservice te kiezen en de databasevelden te selecteren die speciek zijn voor uw e-com-

merceprovider. Nadat u de vereiste records (dat wil zeggen de artikelen die u wilt verkopen)

hebt toegevoegd aan deze database, kunt u deze als gegevensbron gebruiken om uw e-com-

mercegegevens naar een nieuwe website samen te voegen.

Zo maakt u een nieuwe e-commercedatabase:

1. Klik op E-commercedatabase maken op de werkbalk Gegevens samenvoegen. (Geef

deze werkbalk indien nodig eerst weer via Beeld > Werkbalken > Gegevens samenvoe-

gen.)

2. Kies de gewenste online betaalservice (bijvoorbeeld PayPal) in het dialoogvenster en klik

op Vol gen de . Als u tot nu toe geen account hebt bij een online betaalservice, klikt u op Nu

aanmelden en volgt u de aanwijzingen op het scherm.

3. Geef in het dialoogvenster Nieuwe gegevensbron maken een naam op voor de nieuwe

database, blader naar de map waarin u de database wilt opslaan en klik op Opslaan.

4. In het dialoogvenster Database aanpassen vindt u een lijst met vooraf gedenieerde vel-

den voor de database. Welke velden dat zijn, is aankelijk van de online betaalservice die

u hebt gekozen. Gebruik dit dialoogvenster om velden toe te voegen, te verwijderen, te

hernoemen en/of de volgorde ervan aan te passen. Klik daarna op OK.

5. Klik in het dialoogvenster Lijst met samen te voegen e-commercegegevens op Toevoe-

gen.

6. Voeg in het dialoogvenster Artikelgegevens de vereiste records toe aan uw database. Ga

hiertoe op dezelfde manier te werk als bij het invoegen van een e-commerceobject.

7. Klik op OK om het dialoogvenster te sluiten.

Lees ‘Een Serif-database bewerken’ in het Help-bestand van het programma voor meer infor-

matie over hoe u een e-commercedatabase bewerkt.

Studio Webdesign 4 Pro 227

Samenvoegformulieren en -gebieden voor e-commercegegevens invoegen

U kunt op twee manieren te werk gaan als u met e-commercegegevens wilt werken. Ofwel

maakt u gebruik van samenvoegformulieren voor uw e-commercegegevens ofwel gebruikt

u hiervoor samenvoeggebieden. Het voordeel van samenvoegformulieren is dat ze interactie

met uw online betaalservice mogelijk maken. In dat geval kan de gebruiker met andere woor-

den toegang krijgen tot PayPal om de transactie te voltooien. Samenvoeggebieden daarente-

gen kunnen alleen voor het weergeven van artikelen worden gebruikt.

Zo voegt u een samenvoegformulier voor e-commercegegevens in:

1. Klik op E-commerceobject invoegen in het vervolgmenu met e-commercegereed-

schappen op de werkbalk Webobjecten, of klik op Samenvoegformulier voor e-com-

mercegegevens invoegen op de werkbalk Gegevens samenvoegen.

2. Kies de gewenste online betaalservice (bijvoorbeeld PayPal) in het dialoogvenster en klik

op Vol gen de . Als u tot nu toe geen account hebt bij een online betaalservice, klikt u op Nu

aanmelden en volgt u de aanwijzingen op het scherm.

3. Kies het e-mailadres dat u wilt gebruiken om betalingsinformatie te ontvangen (alleen

voor nieuwe sites) en klik op Vol ge nd e.

4. (Facultatief) Schakel in het volgende dialoogvenster het selectievakje Standaardadres van

site gebruiken uit en selecteer het gewenste e-mailadres in de vervolgkeuzelijst of typ een

nieuw e-mailadres in het invoervak als u een ander e-mailadres wilt gebruiken.

5. Kies het gewenste type formulier in het groepsvak PayPal-formulier. U hebt de keuze

uit:

* Terugkerend ‘Nu kopen’-formulier: gebruik dit formulier als internetgebruikers maar

één artikel kunnen kopen. Dit type formulier bevat ‘Nu kopen’-knoppen om gebruikers

rechtstreeks naar de kassa te leiden. De vereiste gegevens worden opgehaald uit een

e-commercedatabase die speciek is voor uw online betaalservice en het samenvoeg-

formulier wordt automatisch herhaald in samengevoegde webpagina’s.

* Terugkerend ‘Toevoegen aan mandje’-formulier: gebruik dit formulier als internet-

gebruikers meerdere artikelen kunnen kopen op uw site. Dit type formulier vervult

dezelfde functie als een ‘Nu kopen’-formulier, alleen wordt de gebruiker bij een ‘Toe-

voegen aan mandje’-formulier naar een winkelmandje geleid.

* Samenvoeggebied: hiermee kunt u artikelen alleen weergeven. Een samenvoeggebied

voor e-commercegegevens bevat geen ‘Nu kopen’- of ‘Toevoegen aan mandje’-knop-

pen.

6. Selecteer in het volgende dialoogvenster de knop die u wilt gebruiken. Merk op dat dit

dialoogvenster alleen verschijnt wanneer u hiervoor voor een van beide typen samen-

voegformulieren hebt gekozen.

7. Selecteer in het dialoogvenster Artikelgegevens een bestaande e-commercedatabase of

maak een nieuwe database, en stel een valuta in voor velden waarin de prijs van een artikel

wordt vermeld in uw database.

8. In het dialoogvenster Klantgegevens kunt u aangeven of u de klant al dan niet om een

adres wilt vragen, of als u hem wilt verplichten om een adres in te voeren. Desgewenst

kunt u de klant om aanvullende informatie vragen voordat hij zijn bestelling bevestigt.

228 Studio Webdesign 4 Pro

Klik op Volg en de om verder te gaan.

9. In het dialoogvenster Betalingspagina’s kunt u de gewenste betaalopties instellen.

10. Kies in het volgende dialoogvenster de gewenste lay-outopties voor uw formulier. Aan de

hand van de selectievakjes in dit dialoogvenster kunt u nauwkeurig aangeven wat voor

informatie u precies wilt weergeven op het formulier. Zo kunt u bijvoorbeeld instellen of

u de naam en/of prijs van de artikelen wilt tonen op het formulier. Bij het ontwerpen van

een samenvoegformulier kunt u ook aangeven of u een aeelding en een gedetailleerde

en/of korte beschrijving van elk artikel wilt weergeven op het formulier, de waarden van

vaste opties wilt tonen, enzovoort. Desgewenst kunt u het formulier ook opnieuw opma-

ken nadat de gegevens zijn samengevoegd.

11. Klik op Voltooien.

12.

Plaats de muisaanwijzer op de positie waar u het formulier wilt invoegen op de pagina

en klik met de linkermuisknop. Let erop dat de velden in het formulier zich aanvankelijk

op de standaardpositie bevinden (aankelijk van de lay-out die u hiervoor hebt gekozen

voor het formulier).

Studio Webdesign ‘onthoudt’ welke gegevensbron is ingesteld voor de pagina

wanneer u de website opslaat. De volgende keer dat u uw project opent, wordt

op de achtergrond automatisch ook de ingestelde gegevensbron geopend.

Zolang u dezelfde gegevensbron gebruikt, hoe u deze dus niet handmatig

opnieuw te openen.

Zo voegt u een samenvoeggebied voor e-commercegegevens in:

1. Selecteer een geschikte gegevensbron.

2. Klik op

Samenvoeggebied voor e-commercegegevens invoegen op de werkbalk Ge-

gevens samenvoegen.

3. Kies de gewenste online betaalservice (bijvoorbeeld PayPal) in het dialoogvenster en klik

op Vol gen de . Als u tot nu toe geen account hebt bij een online betaalservice, klikt u op Nu

aanmelden en volgt u de aanwijzingen op het scherm.

4. Klik in het dialoogvenster E-commercedatabase kiezen op Bladeren, selecteer de data-

base die u als gegevensbron wilt gebruiken en klik op Openen. Klik vervolgens op OK. Let

erop dat u vanuit dit dialoogvenster ook een nieuwe database kunt maken . Vergeet niet de

juiste valuta in te stellen.

5. Het dialoogvenster Instellingen voor herhalen van samenvoeggebied verschijnt, waarin u

de grootte en/of positie van het gebied kunt instellen.

6. Klik op OK.

Studio Webdesign 4 Pro 229

Overige samenvoegfuncties

Studio Webdesign biedt enkele extra functies voor het samenvoegen van databasegegevens,

ongeacht of u nu met gewone databases dan wel met e-commercedatabases werkt. Deze voor-

zieningen stellen u mogelijk in staat recordgegevens op diverse manieren weer te geven of

ervoor te zorgen dat gebruikers vlotter door samengevoegde pagina’s kunnen navigeren, in

het bijzonder tussen pagina’s met een beknopte beschrijving en een volledige beschrijving van

artikelen.

Samenvoeggebieden voor HTML-code toevoegen

U kunt eenvoudige vervolgkeuzelijsten maken met behulp van samenvoeggebieden, bijvoor-

beeld vervolgkeuzelijsten waarin gebruikers producten, opties of e-mailadressen kunnen se-

lecteren die uit een database zijn opgehaald. Desgewenst kunt u hierbij gebruikmaken van

een script, zodat automatisch een bepaalde actie wordt uitgevoerd wanneer de gebruiker een

specieke optie selecteert in de vervolgkeuzelijst.

Denk eraan dat u ook formulieren kunt gebruiken om vervolgkeuzelijsten met een beperkt

aantal opties te maken.

Zo voegt u een samenvoeggebied voor HTML-code toe:

1. Klik op Samenvoeggebied voor HTML-code invoegen op de werkbalk Gegevens sa-

menvoegen.

2. De muisaanwijzer krijgt de volgende vorm:

. De handeling die u nu uitvoert, bepaalt de

aanvankelijke grootte en positie van het samenvoeggebied.

Klik met de muis op de positie waar u het samenvoeggebied wilt invoegen als u de stan-

daardafmetingen wilt gebruiken voor het gebied. Klik en sleep op de pagina als u aange-

paste afmetingen wilt instellen voor het gebied.

3. Klik terwijl het samenvoeggebied is geselecteerd op

op de optiebalk als u het

gebied aan een database wilt koppelen.

4. Dubbelklik op het samenvoeggebied als u de onderliggende HTML-code wilt weergeven

en bewerken, of klik op HTML-code toevoegen op de optiebalk terwijl het gebied is gese-

lecteerd.

5. Voeg de vereiste HTML-tags en databasevelden in tussen de Body Preamble-tags: SELECT

om het object te maken en OPTION om de naam van het databaseveld in het samenvoeg-

gebied te kunnen plaatsen. Typ vervolgens tussen de OPTION-tags het databaseveld dat u

aan het samenvoeggebied wilt toevoegen. Gebruik de onderstaande guur als leidraad.

6. Voeg de site samen en bekijk een voorbeeld van de webpagina.

230 Studio Webdesign 4 Pro

Lees ‘HTML-code toevoegen’ eerder in dit hoofdstuk voor meer informatie over het bewer-

ken van HTML-code.

Bladwijzers toevoegen

U kunt bladwijzers gebruiken om een hyperlink in te stellen tussen de naam van een artikel in

een eenvoudige overzichtslijst en de bijbehorende pagina met een volledige beschrijving van

het artikel. Merk op dat u de bladwijzer moet instellen in het samenvoeggebied/-formulier op

de pagina met de volledige beschrijving. Nadat u de bladwijzer hebt ingesteld, kunt u via het

dialoogvenster Hyperlinks een hyperlink naar deze bladwijzer deniëren (zie ‘Hyperlinks en

bladwijzers toevoegen’ in hoofdstuk 11).

Samenvoegvelden toevoegen

U kunt een samenvoegveld invoegen in de paginanaam van pagina’s die een volledige be-

schrijving van een artikel bevatten om correct naar de naam van het artikel te kunnen ver-

wijzen in de paginatitel. U kunt samenvoegvelden ook gebruiken om velden te declareren in

samenvoeggebieden voor HTML-code.

Zo voegt u een samenvoegveld toe:

1. Klik met de rechtermuisknop op de pagina en kies Eigenschappen van pagina in het

snelmenu.

2. Klik op de positie waar u het veld wilt invoegen in het vak Paginanaam en klik vervolgens

Samenvoegveld invoegen vlak naast het invoervak.

3. Selecteer in het dialoogvenster het veld dat u wilt invoegen en klik op Invoegen.

4. Klik op OK.

MET INTELLIGENTE OBJECTEN WERKEN

Webdesigners nemen soms elementen van bestaande websites over om tijd te besparen. (Hier-

bij nemen ze vanzelfsprekend de auteursrechten op het desbetreende materiaal in acht.) Als

het om eenvoudige aeeldingen of tekst gaat, doen zich op dit gebied geen problemen voor.

Voor complexere interactieve objecten zoals tellers, chatvensters, blogs, enzovoort is zoiets

echter niet mogelijk, omdat dergelijke objecten worden gebruikt om gegevens te verzamelen.

Zo is de grote kracht van tellers die het aantal hits registreren bijvoorbeeld dat ze toelaten na te

gaan hoeveel gebruikers een webpagina hebben bekeken. Deze waarde moet natuurlijk ergens

worden opgeslagen, en dat is nu net waar het schoentje wringt. Bij veel ISP’s wordt het opslaan

van objectgegevens zoals het aantal hits, chattekst, blogtekst, enzovoort niet aangemoedigd,

omdat dit beveiligingsrisico’s inhoudt en omdat dergelijke gegevens veel schijfruimte vergen.

Bij sommige ISP’s is dit zelfs niet toegestaan! Waar kunt u deze gegevens dan wel opslaan?

In Studio Webdesign kunt u dergelijke server-side objecten (intelligente objecten genoemd

in het programma) op uw eigen webpagina’s plaatsen en de gegevens die deze objecten ge-

nereren op de beveiligde server van Serif opslaan. Alle intelligente objecten zijn toegankelijk

via Serif Web Resources, een beveiligde online service waar u de objecten kunt ophalen en

tegelijkertijd de gegevens kunt opslaan die deze objecten verzamelen.

Studio Webdesign 4 Pro 231

Een ander voordeel van de intelligente objecten is dat ze grondig zijn getest en een voor een

voor Studio Webdesign zijn geoptimaliseerd. Daar komt nog bij dat de objecten online wor-

den aangeboden, zodat er mogelijk regelmatig nieuwe updates beschikbaar zijn. In dat geval

worden automatisch ook de objecten in uw site bijgewerkt, zonder dat u Studio Webdesign

hoe te starten en delen van uw site opnieuw hoe te publiceren.

Laten we even nagaan wat voor objecten er zoal beschikbaar zijn en wat u ermee kunt doen.

Naam Functie

Toegangscontrole Hiermee kunt u de toegang beperken tot bepaalde delen van uw

site door gebruikerslijsten of -groepen in te stellen.

Lees ‘Toegangscontrole’ in hoofdstuk 3 voor meer informatie.

Huidig aantal bezoekers Dit intelligente object toont bezoekers hoeveel andere internetge-

bruikers uw site op dit moment ook aan het bekijken zijn.

Blog Een blog (of voluit weblog) is een soort persoonlijk dagboek op

uw webpagina’s dat u regelmatig kunt bijwerken en waarmee u

andere internetgebruikers op de hoogte kunt stellen van wat er

zoal gebeurt in uw leven. Kenmerkend voor een blog is dat be-

zoekers commentaar kunnen geven op uw berichten (ook wel

‘posts’ genoemd).

Forum Hiermee voegt u een op threads gebaseerd discussieforum toe

aan uw site.

Gebruikers kunnen nagaan hoeveel onderwerpen er worden be-

handeld in uw forum, wat voor berichten andere gebruikers zoal

hebben achtergelaten en wanneer het laatste bericht werd gepost.

Vanzelfsprekend kunnen ze ook zelf berichten posten in het fo-

rum.

Aantal hits

Met dit object kunt u eenvoudig nagaan hoeveel keren de huidige

webpagina al is bekeken. U kunt uit verschillende stijlen kiezen

voor de teller en deze indien nodig op elk moment weer op nul

zetten.

Mailinglijst Met dit intelligente object kunnen internetgebruikers zich op een

nieuwsbrief abonneren, een uitnodiging bevestigen, informatie

aanvragen, enzovoort. Nadat een bezoeker hee bevestigd dat hij

aan de mailinglijst wil worden toegevoegd door zijn e-mailadres

te registreren, wordt zijn adres samen met dat van andere abon-

nees opgeslagen, zodat u hem in de toekomst bijvoorbeeld regel-

matig nieuwsbrieven kunt sturen.

Nieuws Hiermee voegt u een venster waarin u allerlei actuele informatie

kunt weergeven toe aan uw webpagina’s. Het object ondersteunt

het gebruik van alineaopmaakproelen, hyperlinks en mediabe-

standen.

232 Studio Webdesign 4 Pro

Opiniepeiling Gebruik dit intelligente object om uw bezoekers naar hun me-

ning te vragen over een bepaald onderwerp.

Chatbox Een chatbox is een interactief chatvenster dat op dat van Win-

dows Messenger lijkt. Door een chatbox aan uw pagina’s toe te

voegen, stelt u bezoekers in staat real-time berichten met elkaar

uit te wisselen.

Analyse van site Hiermee kunt u allerlei gebruikersstatistieken verzamelen en die

vervolgens analyseren. Merk op dat u deze voorziening via het

dialoogvenster Eigenschappen van site moet inschakelen (zie

hoofdstuk 3) en dat u die niet aan de pagina kunt toevoegen.

Om beveiligingsredenen moet u zich aanmelden bij Serif Web Resources om toegang te krij-

gen tot de intelligente objecten. U kunt dit rechtstreeks vanuit het programma doen. Mocht u

hiertoe niet over een geldige gebruikersnaam en een geldig wachtwoord beschikken, moet u

eerst een Serif Web Resources-account aanmaken.

Zo maakt u een account aan:

1. Klik op Intelligent object toevoegen op de werkbalk Webobjecten.

2. Klik in het aanmeldingsvenster op Account maken.

3. Voer in het volgende dialoogvenster uw e-mailadres in. Kies vervolgens een wachtwoord

en bevestig het. Merk op dat u moet aangeven dat u akkoord gaat met de gebruiksvoor-

waarden voordat u verder kunt gaan. Activeer daartoe het overeenkomstige selectievakje.

4. Klik op Registratie.

5. Geef in het dialoogvenster dat daarop verschijnt de vereiste persoonlijke gegevens op.

Activeer de overeenkomstige selectievakjes als u de nieuwsbrief van Serif, informatie over

speciale aanbiedingen en/of speciale aanbiedingen van handelspartners van Serif wenst te

ontvangen.

6. Enige tijd later wordt u per e-mail een bevestiging toegestuurd. Klik op de link in dit e-

mailbericht om uw account te activeren.

Zo wist u uw accountgegevens:

* Kies Extra > Opties > Algemeen en klik op Accountgegevens wissen. Hiermee wist u de

opgeslagen aanmeldingsgegevens voor de online resources, zodat u zich niet meer auto-

matisch kunt aanmelden bij de service. De volgende keer dat u zich aanmeldt, moet u dus

opnieuw uw gebruikersnaam en wachtwoord invoeren.

Zo krijgt u toegang tot de webresources:

1. Klik op Intelligent object toevoegen op de werkbalk Webobjecten.

2. Voer in het aanmeldingsvenster uw gebruikersnaam en wachtwoord in. Activeer het se-

lectievakje Accountgegevens opslaan als u voortaan rechtstreeks toegang wilt krijgen tot

de webresources, zonder dat u telkens uw gebruikersnaam en wachtwoord hoe in te voe-

ren.

3. Klik op Aanmelden. Het dialoogvenster Intelligente objecten verschijnt.

Studio Webdesign 4 Pro 233

Intelligente objecten maken

U beschouwt het begrip ‘intelligente objecten’ het beste als een algemene term voor de dyna-

mische elementen die u zult gebruiken op uw pagina’s. Merk op dat intelligente objecten niet

rechtstreeks aan de pagina worden toegevoegd vanaf Serif Web Resources, maar dat ze eerst

aan uw persoonlijke lijst met intelligente objecten worden toegevoegd. Via deze lijst kunt u

uw intelligente objecten eenvoudig beheren en bewerken, waarna u ze naar keuze ofwel on-

middellijk ofwel later aan uw webpagina’s kunt toevoegen.

Sommige intelligente objecten zijn van andere intelligente objecten aankelijk.

Zo kunt u bijvoorbeeld pas een forum toevoegen aan uw site nadat u eerst een

intelligent object voor toegangscontrole hebt gemaakt.

Zo voegt u een intelligent object toe aan uw persoonlijke lijst:

1. Klik op Nieuw onder het deelvenster Mijn lijst met intelligente objecten.

2. Blader in het dialoogvenster Intelligent object maken door de lijst met beschikbare ob-

jecten en klik op het object dat u wilt maken om het te selecteren.

3. Selecteer in de vervolgkeuzelijst Taal eventueel de juiste taal als u liever met een object in

uw eigen taal werkt in plaats van met een Engelstalig object.

4. Klik op OK. Aankelijk van het type object dat u hebt geselecteerd, verschijnt er een

dialoogvenster waarin u opties kunt instellen die speciek zijn voor dat type intelligent

object.

Klik op Help in het dialoogvenster Intelligente objecten voor aanvullende

informatie over de opties die u zoal kunt instellen voor de verschillende soorten

intelligente objecten.

5. Wijzig de naam van het object en typ eventueel een tekenreeks in het invoervak O-site

lteren (om te voorkomen dat de URL wordt gekopieerd). Wijzig desgewenst ook de ove-

rige eigenschappen van het object. Zo kunt u bij sommige intelligente objecten bijvoor-

beeld de kleur, het lettertype en de tekengrootte van de titel aanpassen, een aangepaste

kleur instellen voor de tekst, en de randkleur en randdikte wijzigen. (toegankelijk via de

knop Help in het dialoogvenster Intelligente objecten) voor meer informatie.

6. Klik op OK.

Het nieuwe object wordt aan uw persoonlijke lijst met intelligente objecten toegevoegd. Hier

is een voorbeeld van de intelligente objecten die u zoal kunt maken:

234 Studio Webdesign 4 Pro

Als u meerdere websites ontwikkelt, kunt u wellicht beter de naam van de site

waarvoor u een nieuw object maakt in de naam van het intelligente object op-

nemen. Zo kunt u de intelligente objecten voor de afzonderlijke sites eenvoudi-

ger van elkaar onderscheiden.

Op het intelligente object Analyse van site na, kunt u alle intelligente objecten rechtstreeks op

uw eigen webpagina’s plaatsen. Bij sommige intelligente objecten is het soms echter zinvoller

het desbetreende object rechtstreeks via Serif Web Resources toegankelijk te maken (aan de

hand van een osite link of hyperlink) in plaats van het op uw eigen pagina’s te plaatsen. Dat

geldt bijvoorbeeld voor forums en blogs. Door dergelijke intelligente objecten rechtstreeks

vanaf de server van Serif toegankelijk te maken, voorkomt u dat internetgebruikers door het

venster moeten schuiven wanneer de objecten de ingestelde pagina-afmetingen overschrij-

den.

Zo voegt u een intelligent object toe aan een webpagina:

1. Selecteer het object dat u wilt toevoegen in uw persoonlijke lijst met intelligente objecten

links in het dialoogvenster Intelligente objecten en klik op Invoegen.

Plaats de muisaanwijzer op de positie waar het intelligente object moet verschijnen op

de pagina en klik met de linkermuisknop als u de vooraf gedenieerde afmetingen wilt

gebruiken voor het object. Klik en sleep op de pagina als u aangepaste afmetingen wilt

instellen voor het object.

Er wordt automatisch een voorbeeld van het object weergegeven op de pagina, zodat u met-

een een idee hebt van hoe het er op uw uiteindelijke website zal uitzien.

Intelligente objecten bewerken

U kunt een intelligent object naar behoee bewerken nadat u het hebt gemaakt. U kunt dit

ofwel rechtstreeks op de pagina doen ofwel vanuit uw persoonlijke lijst met intelligente objec-

ten. Zo kunt u bijvoorbeeld het uiterlijk van een intelligent object wijzigen, een andere vraag

stellen in een opiniepeiling of een teller weer op nul zetten.

Merk op dat het bewerken van een intelligent object alleen een invloed hee op het object zelf

en niet op de gegevens die met dit object zijn verzameld.

De opties om intelligente objecten te bewerken, zijn dezelfde als die om ze te maken. Het

enige verschil is dat de naam van de objecten Alleen-lezen is (een lichtgrijze kleur hee) in de

dialoogvensters om intelligente objecten te bewerken.

Studio Webdesign 4 Pro 235

Zo bewerkt u een intelligent object in uw persoonlijke lijst:

1. Klik op Intelligent object toevoegen op de werkbalk Webobjecten (meld u zo nodig

aan bij Serif Web Resources).

2. Selecteer het object dat u wilt bewerken in het deelvenster Mijn lijst met intelligente

objecten links in het dialoogvenster.

3. Klik in het deelvenster aan de rechterkant op

4. Het eigenschappenvenster van het object verschijnt. Breng de gewenste wijzigingen aan in

dit venster en klik vervolgens op Opslaan. Klik op Help in het dialoogvenster Intelligente

objecten voor aanvullende informatie over de opties die u zoal kunt instellen voor de ver-

schillende soorten intelligente objecten.

Zo bewerkt u een intelligent object rechtstreeks op de pagina:

* Dubbelklik op het object om het eigenschappenvenster weer te geven..

Als u een intelligent object rechtstreeks op de pagina bewerkt, worden de

wijzigingen die u aanbrengt ook doorgevoerd in uw persoonlijke lijst met intel-

ligente objecten en omgekeerd.

Intelligente objecten beheren

Met de functie om intelligente objecten te beheren, kunt u de gegevens beheren die door een

intelligent object worden verzameld nadat u uw site hebt gepubliceerd. Merk op dat u som-

mige intelligente objecten (zoals tellers) niet hoe te beheren, omdat de waarde automatisch

wordt verhoogd telkens als iemand uw website bezoekt. (Desgewenst kunt u een teller ech-

ter wel opnieuw op nul zetten.) Bij andere intelligente objecten, zoals blogs, mailinglijsten,

opiniepeilingen en chatvensters, worden echter respectievelijk artikelen, e-mailadressen, de

resultaten van een onderzoek en chatberichten verzameld en opgeslagen. Dergelijke objecten

wilt u waarschijnlijk wel beheren.

Raadpleeg de contextgevoelige hulp (toegankelijk via de knop Help in het

dialoogvenster Intelligente objecten) voor meer informatie over de opties die

zoal beschikbaar zijn voor het beheren van de verschillende soorten intelligente

objecten.

Zo beheert u een intelligent object vanuit uw persoonlijke lijst:

1. Klik op Intelligent object toevoegen op de werkbalk Webobjecten (meld u zo nodig

aan bij Serif Web Resources).

2. Selecteer het object dat u wilt beheren in het deelvenster Mijn lijst met intelligente objec-

ten aan de linkerkant.

236 Studio Webdesign 4 Pro

3. Klik in het deelvenster aan de rechterkant op . Welke opties precies beschikbaar

zijn, is aankelijk van het type object dat u hebt geselecteerd. Hier is een overzicht.

Objecttype Reden om het object te beheren Hoe?

To eg an gs -

controle

De toegang beperken tot bepaalde

delen van uw site door gebruikers-

lijsten of -groepen in te stellen.

* CAPTCHA-beveiliging inschake-

len om spam te voorkomen.

* Gebruikersgroepen maken (met

de mogelijkheid gebruikers in

staat te stellen zich automatisch

aan te melden en/of te registre-

ren).

* Gebruikers toevoegen, verwij-

deren, bannen of blokkeren in

gebruikersgroepen.

• Zie‘Toegangscontrole’inhoofd-

stuk 3.

Blog Artikelen toevoegen, bewerken of

verwijderen, de opmerkingen bij een

artikel beheren, en een auteursgroep

kiezen.

Bij het aanmaken en bewerken van

artikelen kunt u gebruikmaken van

de ingebouwde RTF-editor. Hierbij

kunt u tags toevoegen, instellen wie

de auteur van een artikel is, aange-

ven of trackbacks zijn toegestaan en

opmerkingen toevoegen.

• Klik op Nieuw als u een artikel

wilt toevoegen.

• Om een bestaand artikel in uw

blog te bewerken, klikt u op Be-

werken.

• KlikopVerwijderen als u een be-

staand artikel wilt verwijderen.

• Klik op Opmerkingen als u de

opmerkingen bij een artikel wilt

beheren. Als u een bepaalde op-

merking wilt verwijderen, selec-

teert u deze en klikt u op Wissen.

• Selecteer via de vervolgkeuzelijst

Auteursgroep bovenaan een ge-

bruikersgroep waaraan u eerder

meerdere auteurs hebt toegevoegd

als u meerdere gebruikers in staat

wilt stellen artikelen te posten in

de blog.

Studio Webdesign 4 Pro 237

Objecttype Reden om het object te beheren Hoe?

Forum Bepalen of niet-geregistreerde

gebruikers toegang hebben tot het

forum, categorieën toevoegen of ze

een andere naam geven, een thema

kiezen voor het forum, gebruikers

classiceren, enzovoort.

• Stel via het vak Privacy machti-

gingen in voor niet-geregistreerde

gebruikers.

• Gebruik de knoppen Categorie

toevoegen en Forum toevoegen

in het vak Beheer van forum als u

nieuwe categorieën of subforums

wilt toevoegen. Klik op Categorie

bijwerken of Forum bijwerken

om een categorie of subforum bij

te werken nadat u de naam ervan

hebt gewijzigd.

• Stel via de vervolgkeuzelijst in

het vak ema een andere stijl in

voor uw forum als u de look-and-

feel ervan wilt wijzigen.

• Klik op Classicatie toevoegen

in het vak Gebruikers classice-

ren als u een nieuwe classicatie

wilt toevoegen om gebruikers te

classiceren. Selecteer vervolgens

in de vervolgkeuzelijst boven aan

het vak de gebruiker aan wie u

deze classicatie wilt toekennen.

Gebruik de opties onder Classi-

caties bewerken om de ingestelde

classicaties te bewerken.

Mailinglijst Het e-mailadres van een gebruiker

(of alle e-mailadressen) verwijde-

ren, de mailinglijst als bestand met

lijstscheidingstekens (*.csv) opslaan,

of de verzamelde e-mailadressen met

een intelligent object voor toegangs-

controle synchroniseren.

• Alsueene-mailadreswiltverwij-

deren uit de lijst, selecteert u het

en drukt u op Delete. Klik op Al-

les wissen als u alle e-mailadres-

sen wilt verwijderen.

• Om de mailinglijst als bestand

met lijstscheidingstekens op te

slaan, kiest u de gewenste indeling

in de vervolgkeuzelijst Opslaan

als en klikt u op Opslaan.

• Omdemailinglijstmeteenintel-

ligent object voor toegangscon-

trole te synchroniseren, klikt u op

Synchroniseren met account.

238 Studio Webdesign 4 Pro

Objecttype Reden om het object te beheren Hoe?

Nieuws Nieuwsberichten bijwerken. • Bewerkdetekstviadeingebouw-

de RTF-editor en klik vervolgens

op Opslaan.

Opiniepei-

ling

Het aantal uitgebrachte stemmen

voor een specieke vraag of het

aantal stemmen voor de volledige

opiniepeiling weer op nul instellen.

• KlikopdelinkKlik hier om het

aantal uitgebrachte stemmen

voor deze vraag weer op nul in te

stellen of klik op de knop Begin-

waarden.

Chatbox Ongewenste regels verwijderen. • Selecteereenvermeldingendruk

op Delete als u deze wilt verwij-

deren. Als u alle vermeldingen

wilt verwijderen, klikt u op Alles

wissen.

Analyse van

site

Gebruikersstatistieken zoals het

aantal keren dat uw site is bekeken,

de browser die internetgebruikers

gebruiken, enzovoort weergeven.

• Selecteer een categorie gegevens

in de vervolgkeuzelijst.

• Selecteer de periode waarvoor u

de verzamelde statistieken wilt

weergeven.

Zo beheert u intelligente objecten rechtstreeks via internet:

* Ga naar www.serifwebresources.com als u al uw intelligente objecten wilt beheren zonder

dat dit een invloed hee op uw project. Meld u op de gebruikelijke manier aan bij Serif

Web Resources.

Intelligente objecten verwijderen

Zo verwijdert u een intelligent object uit uw persoonlijke lijst:

* Selecteer het object dat u wilt verwijderen in het deelvenster Mijn lijst met intelligente

objecten aan de linkerkant en klik op Verwijderen. Beantwoord de vraag om bevestiging

met Verwijderen.

Als u een intelligent object verwijdert, wordt op elke pagina waarop u dit object hebt gebruikt

en die u naar de server hebt geüpload een leeg gebied weergegeven, totdat u het object hebt

verwijderd uit het overeenkomstige Webdesign-document en de website opnieuw hebt geüp-

load.

Zo verwijdert u een intelligent object op de pagina:

* Selecteer het intelligente object op uw webpagina en druk op Delete op het toetsenbord.

Studio Webdesign 4 Pro 239

13 een voorbeeld bekijken

en de Site Publiceren

EEN VOORBEELD BEKIJKEN VAN UW WEBSITE

Een voorbeeld bekijken van uw site is een belangrijke stap voordat u deze op het web publi-

ceert. Alleen zo kunt u nagaan wat internetgebruikers uiteindelijk te zien zullen krijgen wan-

neer ze uw website bekijken. U kunt zowel een voorbeeld bekijken van afzonderlijke pagina’s

als van de volledige website, hetzij rechtstreeks in het programma (in een venster dat op het

browservenster van Internet Explorer is gebaseerd) hetzij met een willekeurige browser die

op uw systeem is geïnstalleerd.

Zo geeft u een voorbeeld weer van uw website:

1. Klik op het pijltje naast de knop Voorbeeld bekijken op de standaardwerkbalk.

2. Kies de gewenste optie in het vervolgmenu:

* Kies Voorbeeld in venster (of druk op Alt+P) als u de site in een nieuw documentven-

ster wilt openen. Met de bijbehorende venstertab boven in het programmavenster kunt

u eenvoudig tussen het projectbestand en het voorbeeld wisselen. (Lees ‘Met meerdere

sites werken’ in hoofdstuk 2 voor meer informatie over het werken met meerdere docu-

mentvensters.)

* Kies Pagina in <browser> bekijken of Website in <browser> bekijken als u een ex-

terne browser wilt gebruiken om een voorbeeld te bekijken. Welke opties precies be-

schikbaar zijn, is aankelijk van de browsers die op uw systeem zijn geïnstalleerd. Als

u bijvoorbeeld Microso Internet Explorer hebt geïnstalleerd, wordt hier Pagina in

Internet Explorer bekijken weergegeven. Als u meerdere browsers hebt geïnstalleerd,

kunt u via de opdracht Lijst met browsers de browsers selecteren die u wilt gebruiken

om een voorbeeld te bekijken van uw site. Merk op dat de pagina of site naar een tijde-

lijke map wordt geëxporteerd wanneer u er een voorbeeld van weergee.

Als u rechtstreeks in het programma een voorbeeld bekijkt, kunt u de knoppen op de op-

tiebalk gebruiken om naar de vorige of volgende pagina te gaan, de weergave te vernieuwen

of het voorbeeld te sluiten. Via de vervolgkeuzelijst uiterst rechts op de optiebalk kunt u de

huidige pagina in diverse standaardresoluties of in een aangepaste beeldschermresolutie be-

kijken.

Zo bewerkt u de lijst met beschikbare browsers in het vervolgmenu:

1. Kies Bestand > Voorbeeld bekijken van site (of open het vervolgmenu met voorver-

toningsopties op de standaardwerkbalk) en klik op Lijst met browsers. In het dialoog-

venster dat daarop verschijnt, worden alle browsers weergegeven die op uw systeem zijn

240 Studio Webdesign 4 Pro

geïnstalleerd. Merk op dat de volgorde waarin de browsers hier worden weergegeven,

overeenkomt met de volgorde van de overeenkomstige menuopties in het vervolgmenu

met voorvertoningsopties.

2. Breng de gewenste wijzigingen aan:

* Klik op Auto detect. om de lijst automatisch te vernieuwen. Als u handmatig een brow-

ser wilt toevoegen aan de lijst, klikt u op Toevoegen.

* Als u een browser wilt verwijderen uit de lijst, selecteert u deze en klikt u op Verwijde-

ren.

* Gebruik de knoppen Omhoog en Omlaag om de volgorde van de browsers te wijzi-

gen.

* Als u het pad naar een browser wilt aanpassen of de naam die voor deze browser wordt

weergegeven in het vervolgmenu, selecteert u deze en klikt u op Bewerken. Zo kunt u

bijvoorbeeld gewoon ‘IE7’ in plaats van ‘Internet Explorer’ weergeven in het vervolg-

menu.

3. Klik op OK om uw wijzigingen te bevestigen.

Test uw site bij voorkeur in verschillende veelgebruikte browsers om zeker te

stellen dat deze in elke browser op exact dezelfde manier wordt weergegeven.

UW SITE OP HET WEB PUBLICEREN

Zodra uw webproject af is, kunt u het rechtstreeks vanuit het programma naar een ‘live’ web-

site converteren en naar de server van uw webhost of internetaanbieder uploaden, zodat de

hele wereld uw site kan bekijken! Hierbij kunt u aangeven of u alle webpagina’s in uw site wilt

publiceren of (bij het uitvoeren van een update) alleen pagina’s die gewijzigd zijn sinds u de

site voor het laatst hebt geüpload.

Voordat u uw website op het web publiceert, kunt u deze echter beter eerst op fouten con-

troleren met de ingebouwde voorziening Site op fouten controleren (toegankelijk via Extra

> Sitebeheer).

Denk eraan dat u de website op elk moment naar een lokale map kunt publice-

ren. Zo kunt u uw website oine testen voordat u deze op het web publiceert.

Hoe u dit doet, leest u in het Help-bestand van het programma.

Zo publiceert u de website op het web:

1. Kies Eigenschappen van site in het menu Bestand en controleer voor alle zekerheid nog

een keer de gekozen exportinstellingen, vooral die op het tabblad Aeeldingen.

Studio Webdesign 4 Pro 241

2. Klik op Op het web publiceren op de standaardwerkbalk of kies Website publiceren >

Op het web publiceren in het menu Bestand

Als dit de eerste keer is dat u een website publiceert, moet u eerst een account instellen. U

dient minstens één account in te stellen voordat u verder kunt gaan.

1. Klik op Accounts om het dialoogvenster Accountgegevens weer te geven.

2. Geef in dit dialoogvenster de vereiste accountgegevens op:

* Accountnaam: hier kunt u een willekeurige naam invoeren. Aan de hand van deze

naam vindt u de account later gemakkelijker terug (als u meerdere accounts hebt inge-

steld).

* FTP-adres: typ hier de URL (bijvoorbeeld “p://mijn.webserver.com”) van de webser-

ver waarnaar u de bestanden wilt uploaden. Deze URL wordt door uw ISP meege-

deeld.

* Poortnummer: behoud hier de standaardinstelling (poort 21), tenzij uw ISP u uitdruk-

kelijk hee verzocht een andere poort te gebruiken.

* Map: dit vak kunt u leeg laten, tenzij u websites bij uw ISP naar een welbepaalde map

moet uploaden of uw site naar een specieke submap van uw hoofddirectory wilt up-

loaden.

* Verder hebt u ook een gebruikersnaam en wachtwoord nodig. Ook deze informatie

hebt u normaal gesproken van uw ISP gekregen. Doorgaans kunt u de gegevens gebrui-

ken die u ook nodig hebt om verbinding te maken met de e-mailserver van uw ISP. Let

op het onderscheid tussen hoofdletters en kleine letters wanneer u het wachtwoord

invoert. Als u het verkeerde wachtwoord opgee, kunt u zich niet aanmelden bij de ser-

ver! Activeer het selectievakje Wachtwoord opslaan als u wilt voorkomen dat u iedere

keer het wachtwoord moet invoeren telkens als u bestanden wilt uploaden.

* Passieve modus: schakel deze optie alleen uit als u geen verbinding kunt maken met

de FTP-server van uw internetaanbieder. Bij sommige ISP’s moet u de actieve modus

gebruiken om bestanden over te dragen via FTP, bij andere de passieve modus.

* URL van website: typ hier de URL van uw website. Dan kunt u de website rechtstreeks

vanuit het programma online bekijken nadat deze is geüpload.

* Klik op OK nadat u de vereiste gegevens hebt ingevoerd.

Met de knoppen Toevoegen, Kopiëren, Bewerken en Verwijderen kunt u respectievelijk een

nieuwe account toevoegen en een bestaande account kopiëren, bewerken of verwijderen. Test

de nieuwe of gewijzigde account door op Te s te n te klikken voordat u verdergaat!

3. Nadat u minstens één account hebt ingesteld en op Uploaden hebt geklikt, keert u terug

naar het dialoogvenster Website op het web publiceren. Let erop in de vervolgkeuzelijst

bovenaan automatisch de account is geselecteerd die u het laatst hebt gebruikt om be-

standen te uploaden. Daaronder worden de instellingen voor de account weergegeven.

Via deze vervolgkeuzelijst kunt u eenvoudig een andere account selecteren. Selecteer de

account die u wilt gebruiken om de website te uploaden (als u meerdere accounts hebt

ingesteld).

4. Als uw site aan een database is gekoppeld, is de optie Samenvoegen voor exporteren in-

geschakeld. Schakel deze optie uit als u gewijzigde databasegegevens niet wilt samenvoe-

242 Studio Webdesign 4 Pro

gen bij het exporteren van de site. (Als het programma geen wijzigingen hee aangetrof-

fen of als uw site niet aan een database is gekoppeld, is deze optie niet beschikbaar.) Lees

‘Databasegegevens samenvoegen’ in hoofdstuk 12 voor meer informatie.

5. Zorg ervoor dat de optie Automatisch uploaden is uitgeschakeld als u enige controle wilt

over het publicatieproces. Zo kunt u de wijzigingen die zullen worden doorgevoerd tijdens

het publiceren van de site eerst controleren voordat die daadwerkelijk worden doorge-

voerd. Bovendien kunt u het uploadproces dan op elk moment annuleren mocht u plots

een probleem ontdekken. (Lees ‘Een website automatisch uploaden’ verderop in deze pa-

ragraaf voor meer informatie over deze voorziening.)

6. Selecteer in het groepsvak Paginabereik de pagina’s die u wilt uploaden. Activeer het se-

lectievakje Alle pagina’s publiceren als u alle pagina’s in de site wilt publiceren. Als u

alleen specieke pagina’s wilt publiceren, activeert u het selectievakje naast die pagina’s in

de boomstructuur. Gebruik de knoppen Pagina selecteren, Niveau selecteren en Alles

selecteren om eenvoudig de gewenste pagina’s te selecteren. Met deze knoppen kunt u

een pagina selecteren/deselecteren, alle pagina’s op een speciek niveau selecteren en alle

pagina’s in de site selecteren.

7. Activeer het selectievakje Back-up maken van projectbestand op externe server als u

behalve uw website zelf ook het projectbestand naar de server wilt uploaden, zodat u in

noodgevallen over een reservekopie van dit bestand beschikt. Als u het project tot nu toe

niet hebt opgeslagen, wordt gevraagd of u het wilt opslaan voordat u verdergaat.

8. Klik op OK. Het programma maakt nu verbinding met de webserver.

9. Als dit de eerste keer is dat u de website uploadt, worden de geselecteerde pagina’s recht-

streeks naar de server overgedragen.

Als u de pagina’s naar een bestaande site uploadt, verschijnt het dialoogvenster Bestanden

uploaden. In de kolom Actie van dit dialoogvenster kunt u controleren of de geselecteerde

pagina’s zullen worden toegevoegd (Toevoegen), zullen worden vervangen (Vervangen) of

niet zullen worden bijgewerkt (Behouden).

Activeer het selectievakje Ongebruikte bestanden verwijderen op server als u bestanden

en aeeldingen die niet worden gebruikt automatisch van de server wilt verwijderen.

Geef vervolgens aan of u een incrementele of volledige update wilt uitvoeren. Klik op

Incrementele update als u alleen bestanden wilt uploaden die gewijzigd zijn sinds u de

site voor het laatst hebt geüpload. Desgewenst kunt u het programma hierbij automatisch

naar ontbrekende bestanden laten zoeken. Activeer hiertoe de optie Op ontbrekende be-

standen controleren. Omdat deze optie het uploadproces aanzienlijk kan vertragen, is ze

standaard uitgeschakeld.

Zodra alle bestanden zijn geüpload, wordt u daar via een berichtvenster op attent ge-

maakt. Klik op Sluiten om dit berichtvenster te sluiten.

10. U kunt uw website meteen ‘live’ bekijken nadat de vereiste bestanden zijn geüpload. Klik

hiertoe op Deze URL weergeven in het dialoogvenster Website publiceren.

Als u bestanden een andere naam gee of ze verwijdert en een of meer pagina’s van uw site

vervolgens opnieuw naar het web uploadt, worden de oude bestanden niet automatisch ver-

wijderd. U moet deze bestanden handmatig verwijderen. Kies hiertoe Website publiceren >

Studio Webdesign 4 Pro 243

Website onderhouden in het menu Bestand. Wanneer u de volledige site echter automatisch

opnieuw uploadt, kunt u wel aangeven dat u verouderde bestanden wilt verwijderen. Activeer

hiertoe het selectievakje Overbodige bestanden wissen.

Een website automatisch uploaden

Als uw site bijzonder groot is, kunt u wellicht beter gebruikmaken van de ingebouwde functie

om deze automatisch te uploaden. Dan kunt u de site uploaden zonder dat u elk dialoogven-

ster dat mogelijk verschijnt met OK hoe te bevestigen. Dat is vooral handig bij het bijwerken

van een site die een uitgebreide fotodatabase of honderden aeeldingen bevat.

1. Schakel het selectievakje Samenvoegen voor exporteren uit als u gewijzigde database-

gegevens niet wilt samenvoegen bij het exporteren van de site. (Als er geen database is

gekoppeld aan de pagina’s die u publiceert of als de gegevens in de database eerder al zijn

samengevoegd, is deze optie niet beschikbaar.)

2. Selecteer in het groepsvak Paginabereik de pagina’s die u wilt uploaden. Activeer het se-

lectievakje Alle pagina’s publiceren als u alle pagina’s in de site wilt publiceren. Als u

alleen specieke pagina’s wilt publiceren, activeert u het selectievakje naast die pagina’s in

de boomstructuur. Gebruik de knoppen Pagina selecteren, Niveau selecteren en Alles

selecteren om eenvoudig de gewenste pagina’s te selecteren. Met deze knoppen kunt u

een pagina selecteren/deselecteren, alle pagina’s op een speciek niveau selecteren en alle

pagina’s in de site selecteren.

3. Activeer het selectievakje Back-up maken van projectbestand op externe server als u

behalve uw website zelf ook het projectbestand naar de server wilt uploaden, zodat u in

noodgevallen over een reservekopie van dit bestand beschikt. Als u het project tot nu toe

niet hebt opgeslagen, wordt gevraagd of u het wilt opslaan voordat u verdergaat.

4. Klik op OK om het uploadproces te starten.

5. Zodra alle bestanden zijn geüpload, wordt u daar via een berichtvenster op attent ge-

maakt. Klik op Sluiten om dit berichtvenster te sluiten. Desgewenst kunt u de site nu

rechtstreeks online bekijken. Klik hiertoe op Deze URL weergeven in het dialoogvenster

Website publiceren.

Probleemoplossing

Nadat u de website hebt gepubliceerd, zult u misschien vaststellen dat bepaalde wijzigingen

niet zijn doorgevoerd op de server. Maak in dat geval eerst de cache van uw browser leeg door

op Ctrl+F5 te drukken voordat u de website opnieuw probeert te uploaden. Weergavepro-

blemen met aeeldingen en andere media kunnen vaak eenvoudig worden opgelost door

de huidige webpagina te vernieuwen, zodat de tijdstempels voor de webversie en de lokaal

opgeslagen versie weer gelijk zijn.

Als u het probleem niet kunt oplossen door de cache leeg te maken, moet u verouderde af-

beeldingen of media op de server mogelijk handmatig verwijderen. Lees ‘Uw website onder-

houden’ in het Help-bestand van het programma voor meer informatie.

244 Studio Webdesign 4 Pro

De gepubliceerde site bekijken

Nadat u uw website hebt gepubliceerd, kunt u deze via de optie Site online bekijken op

de standaardwerkbalk rechtstreeks op het web bekijken. De eerste keer als u deze opdracht

gebruikt, verschijnt er een dialoogvenster waarin u de basis-URL van de site moet opgeven.

(U kunt deze URL achteraf op elk moment wijzigen via het dialoogvenster Eigenschappen

van site.)

Merk op dat wijzigingen die u hebt doorgevoerd sinds u de site voor het laatst hebt gepu-

bliceerd niet zichtbaar zijn wanneer u deze rechtstreeks op het web bekijkt. Als u dergelijke

wijzigingen wilt zien, opent u het projectbestand voor uw site (dat wel de meest recente wij-

zigingen bevat) en gebruikt u de knop Voorbeeld bekijken op de standaardwerkbalk om een

voorbeeld weer te geven van uw site (zie ‘Een voorbeeld bekijken van uw website’ eerder in

dit hoofdstuk).

Ik heb Studio Webdesign geïnstalleerd op mijn nieuwe PC. Als ik echter mijn website open, via Bestand Openen sluit het programma. Als ik het via de Verkenner open dan flitst het even maar er is niets geopend.
Iemand een oplossing? Gesteld op 27-6-2024 om 14:10
Reageer op deze vraag Misbruik melden
Hoe kun je nu een foto galerij aanmaken nu dat dit niet meer ondersteunt wordt door flash player Gesteld op 2-3-2021 om 16:50
Reageer op deze vraag Misbruik melden
Hi, is het mogelijk om van de website niet alleen een computer versie te maken maar ook een telefoon versie? Gesteld op 20-11-2020 om 21:33
Reageer op deze vraag Misbruik melden
Ik heb ooit studio webdesign gekocht en ik heb dus een serienr. Hoe kan ik die cd kopieren naar een alptop zonder cd speler.?
Gesteld op 30-9-2020 om 10:44
Reageer op deze vraag Misbruik melden
Ik krijg steeds de melding: Error opening.../Getting started/01 Introducing Webplus.pdf Gesteld op 13-2-2018 om 10:07
Reageer op deze vraag Misbruik melden
- Ik krijg dezelfde foutmelding bij de link: Workshops. Ik kan deze workshops dus niet doen.
  Ik denk dat het iets met Java te maken heeft, maar weet geen oplossing. Geantwoord op 15-7-2019 om 13:00
  Waardeer dit antwoord Misbruik melden
Hallo, ik heb een website gemaakt in Webdesign 4 pro.
Op Ipads en Iphones is de foto slideshow niet zichtbaar. Hoe kan dat, weet iemand wat ik hieraan moet doen? Bedankt Marije Gesteld op 4-2-2014 om 21:48
Reageer op deze vraag Misbruik melden
- Ipad en Iphone gebruiken geen java Geantwoord op 11-11-2014 om 12:25
  Waardeer dit antwoord (1) Misbruik melden

Ik ben mijn gemaakte site kwijt op de PC, Kan ik deze terug halen van het net?
Gesteld op 22-1-2014 om 11:58
Reageer op deze vraag Misbruik melden
- Gewoon importeren van het web Geantwoord op 1-3-2015 om 23:21
  Waardeer dit antwoord Misbruik melden
Hallo Mijn probleem ik heb Webdisign 4 pro en de website runt er al jaren prima op ,maar sinds een paar weken kan ik niets meer uploaden naar het web [op het web publiceren] krijg de fout melding 220 Type set to I
226 Transfer complete
Heb contact gehad met m,n server your hosting maar de fout zit dus niet bij hen maar in mijn programma
Wat er ook gebeurt als ik iets wil uploaden dat hij wel iets doet hij is even aan het draaien en breekt dan af mert als gevolg dat foto,s op Home page weg zijn en m,n agenda niet meer is te lezen aah help.
Ik heb de site nodig voor onze band misschien kan je daar gaan kijken en dan zie je wat ik bedoel Alleen de Home en Agenda pagina,s daar was ik mee bezig .
www,countryband-sidewinder.com
Alvast Bedankt voor je hulp groetjes Wilma [singer of the band] Gesteld op 14-1-2014 om 10:32
Reageer op deze vraag Misbruik melden
- Ik kan je niet helpen met een oplossing, alleen melden dat ik hetzelfde probleem heb.
  Echter bij mij ontstond dit op een nieuw ingerichte PC met Windows 7. Wat ik ook probeer, bij het uploaden krijg ik exact dezelfde foutmeldingen. Ik heb wel twee dingen ontdekt. (1) Op mijn oude PC met XP gaat het uploaden van het WPP bestand foutloos, maar met de W7-PC niet, het probleem zit dus in het gebruik van de nieuwere PC. (2) Als ik op de nieuwe PC bij het uploaden kies voor doorgaan, moet ik wel 201 maal in mijn geval kiezen voor doorgaan, maar de site wordt wel geüpload. Misschien heb je hier iets aan. Geantwoord op 26-1-2014 om 15:06
  Waardeer dit antwoord Misbruik melden
Ik heb dit probleem ook sinds begin januari zonder iets van software aangepast te hebben. Ik gebruik nog steeds Windows XP. Al veel antwoorden gezocht maar nog geen gevonden. Hier dus blijkbaar ook nog niet. Geantwoord op 26-1-2014 om 16:31
Waardeer dit antwoord Misbruik melden
Hallo. Sinds een paar weken heb ik exact dezelfde foutmelding. Ik werk in windows 7. Studio0webdesign 4 werkte tot nu toe perfect. Met deze foutmelding moet ik alle bestandsjes van een pagina die iki wil uploaden apart aanklikken. Het lukt allemaal wel, maar het is wel erg omslachtig. Ik heb alle "deskundigen"in mijn omgeving geraadpleegd, maar een oplossing is niet gevonden! Helaas. www.larsheimbridgeleersum.nl Geantwoord op 27-1-2014 om 17:29
Waardeer dit antwoord Misbruik melden
Hoi hoi, ook ik heb last van het zelfde probleem. Wat ik wel raar vind is da niemand voorheen dit probleem had en zonder dingen te veranderen op de pc, nu ineens wel deze foutmeldingen hebben. En Wilma niet de enige is maar meerdere met hetzelfde probleem.

Heeft Webdesign misschien iets verkeerds geüpdatet in de programma's??? Geantwoord op 2-2-2014 om 14:51
Waardeer dit antwoord Misbruik melden
Hallo allemaal,
Sinds enige tijd ervaar ik precies dezelfde problemen. Hiervoor werkte het programma perfect, nu is het een ramp!
Heeft iemand al een oplossing???
Rob Geantwoord op 23-3-2014 om 19:20
Waardeer dit antwoord (1) Misbruik melden
Ik heb studio webdesign 4 pro, ik wil in de website, dat je kan kiezen tussen nederlands en engels. hoe doe ik dit? Gesteld op 8-9-2013 om 16:06
Reageer op deze vraag Misbruik melden
- Niemand reageert????? Geantwoord op 22-10-2013 om 05:13
  Waardeer dit antwoord (1) Misbruik melden
Ik gebruik al geruime tijd de versie studio webdesign 4 pro op een pc met windows 7. Ik overweeg een nieuwe pc aan te kopen met windows 8. Kan studio webdisign 4 pro draaien onder windows 8 of moet er een nieuwe verse (webplus X5) aangekocht worden. Gesteld op 10-6-2013 om 14:40
Reageer op deze vraag Misbruik melden
- Dit is een raar forum je kan alleen maar een vraag stellen maar er komt geen antwoord vanuit easy computing DAT IS TOCH RAAR!!!!!!!!!!!!!!!!!!!!
  WAAR BLIJFT DE SERVICE???????????????????????? Geantwoord op 7-7-2014 om 07:18
  Waardeer dit antwoord Misbruik melden
hallo, als ik mijn website op wil slaan ontbreken elke keer de foto's of dan weer iets anders heb jaren ermee gewerkt maar plots zonder aanleiding een foutmelding van beiendigen op een ongebruikelijke manier? Gesteld op 21-12-2012 om 22:00
Reageer op deze vraag Misbruik melden
- Hallo' ik heb hetzelfde probleem. Heeft u al een oplossing gevonden? Geantwoord op 14-8-2013 om 02:19
  Waardeer dit antwoord Misbruik melden

Misbruik melden

Gebruikershandleiding.com neemt misbruik van zijn services uitermate serieus. U kunt hieronder aangeven waarom deze vraag ongepast is. Wij controleren de vraag en zonodig wordt deze verwijderd.

Product:

Spelregels forum

Om tot zinvolle vragen te komen hanteren wij de volgende spelregels:

lees eerst de handleiding door;
controleer of uw vraag al eerder door iemand anders is gesteld;
probeer uw vraag zo duidelijk mogelijk te stellen;
heeft u een probleem en al geprobeerd om dit op te lossen, vermeld dit erbij aub;
heeft u een oplossing gekregen van een bezoeker dan horen wij dat graag in dit forum;
wilt u een reactie geven op een vraag of antwoord, gebruik dan niet dit formulier maar klik op de knop 'reageer op deze vraag';
uw vraag wordt direct op de website gezet; vermijd daarom persoonlijke gegevens in te vullen;

Belangrijk! Als er een antwoord wordt gegeven op uw vraag, dan is het voor de gever van het antwoord nuttig om te weten als u er wel (of niet) mee geholpen bent! Wij vragen u dus ook te reageren op een antwoord.

Belangrijk! Antwoorden worden ook per e-mail naar abonnees gestuurd. Laat uw emailadres achter op deze site, zodat u op de hoogte blijft. U krijgt dan ook andere vragen en antwoorden te zien.

Abonneren

Abonneer u voor het ontvangen van emails voor uw Easy computing studio webdesign 4 pro bij:

nieuwe vragen en antwoorden
nieuwe handleidingen

U ontvangt een email met instructies om u voor één of beide opties in te schrijven.

Ontvang uw handleiding per email

Vul uw emailadres in en ontvang de handleiding van Easy computing studio webdesign 4 pro in de taal/talen: Nederlands als bijlage per email.

De handleiding is 3,2 mb groot.

U ontvangt de handleiding per email binnen enkele minuten. Als u geen email heeft ontvangen, dan heeft u waarschijnlijk een verkeerd emailadres ingevuld of is uw mailbox te vol. Daarnaast kan het zijn dat uw internetprovider een maximum heeft aan de grootte per email. Omdat hier een handleiding wordt meegestuurd, kan het voorkomen dat de email groter is dan toegestaan bij uw provider.

Stel vragen via chat aan uw handleiding

Stel uw vraag over deze PDF

Uw handleiding is per email verstuurd. Controleer uw email

Als u niet binnen een kwartier uw email met handleiding ontvangen heeft, kan het zijn dat u een verkeerd emailadres heeft ingevuld of dat uw emailprovider een maximum grootte per email heeft ingesteld die kleiner is dan de grootte van de handleiding.

Er is een email naar u verstuurd om uw inschrijving definitief te maken.

Controleer uw email en volg de aanwijzingen op om uw inschrijving definitief te maken

U heeft geen emailadres opgegeven

Als u de handleiding per email wilt ontvangen, vul dan een geldig emailadres in.

Uw vraag is op deze pagina toegevoegd

Wilt u een email ontvangen bij een antwoord en/of nieuwe vragen? Vul dan hier uw emailadres in.

Easy computing studio webdesign 4 pro Handleiding

Hulp nodig? Stel uw vraag in het forum

Misbruik melden

Product:

Spelregels forum

Abonneren

Ontvang uw handleiding per email

Stel vragen via chat aan uw handleiding

Uw handleiding is per email verstuurd. Controleer uw email

Er is een email naar u verstuurd om uw inschrijving definitief te maken.

U heeft geen emailadres opgegeven

Uw vraag is op deze pagina toegevoegd

Info