Handleiding Studio Webdesign 4 Pro
Copyrights © Copyrights 2008 Serif (Europe) Ltd, alle Serif-producten en afgeleiden zijn eigendom van Serif (Europe) Ltd. Microsoft, Windows, en het Windows logo zijn geregistreerde handelsmerken van Microsoft Corporation. Alle rechten voorbehouden. © 2008 Easy Computing 1ste druk 2008 Uitgever Website Productmanagement Vormgeving Easy Computing Publishing n.v. Horzelstraat 100 1180 Brussel Easy Computing b.v. Jansweg 40 2011 KN Haarlem www.easycomputing.
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.
inhoud 1 Welkom bij Studio Webdesign 4 Pro! 13 Nieuw in Studio Webdesign...
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 Pagina-eigenschappe
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 Tekst zoeken en vervangen 5 Tekens en alinea’s opmaken 99 99 101 Tekst opmaken 101 Met lettertypen werken 102 Met opmaakprofielen werken 103 Alineaopmaakprofielen versus tekenopmaakprofielen Met benoemde opmaakprofielen werken 103 104 Genummerde of niet-
Objecten schalen 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 Lijnen en vormen samenvoegen 128 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 8 Met lijnen, vo
Afbeeldingen, animaties en multimedia-elementen toevoegen 155 Afbeeldingen importeren 155 Afbeeldingen invoegen 155 Afbeeldingen vervangen 157 Bijgesneden afbeeldingen aanpassen 157 Insluiten versus koppelen De mediabalk gebruiken 158 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 aanpassingsfilter toevoegen 16
11 Hyperlinks en Interactiviteit toevoegen Hyperlinks en bladwijzers toevoegen Een bladwijzer invoegen Hotspots toevoegen aan een pagina Hotspots bewerken 187 188 189 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
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 Studio Webdesign 4 Pro 11
Studio Webdesign 4 Pro
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.
Krachtige aanpassingsfilters Gebruik de talrijke ingebouwde aanpassingsfilters om afbeeldingen snel en eenvoudig te corrigeren en/of de kwaliteit ervan te verbeteren.
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 onafhankelijk van elkaar kunt beheren en door een moderator kunt laten leiden. * Toegangscontrole: beperk de toegang tot uw site of specifieke pagina’s door gebruikerslijsten te beheren.
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 specifieke pagina in uw site ook in een documentframe op een andere pagina openen. Maak gebruik van absolute URL’s, zodat gebruikers doelgericht van frame naar frame kunnen navigeren.
* Lay-outhulpmiddelen Maak gebruik van ‘magnetische’ hulplijnen – ideaal als u alle objecten die op uw liniaalhulplijnen 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 toegankelijk waarin u stap voor stap met belangrijke programmafuncties leert werken en doelgericht de structuur van uw site leert plannen en ontwerpen. ...
* naar onze supportpagina’s gaan * de cd-rom verkennen Om het programma te installeren, dubbelklikt u op de desbetreffende 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 Computing > Studio Webdesign 4 Pro te kiezen en op de naam van het programma te klikken in het vervolgmenu.
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 hoeft 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.
gedachten had. Elke website heeft 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.
1. Denk eraan dat de downloadtijd van uw webpagina’s rechtstreeks afhankelijk is van de bestandsgrootte van de HTML-bestanden en van de bijbehorende afbeeldingen of multimediabestanden. Omdat dergelijke bestanden veel meer schijfruimte innemen dan HTMLbestanden, 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 afbeeldingen geëxporteerd wanneer u de website publiceert.
Hier kunt u aangeven of u een nieuwe website wilt maken (al dan niet op basis van een sjabloon), 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.
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 Modern); * het kleurenschema dat u wilt gebruiken om de website een specifieke ‘look-and-feel’ te geven (bijvoorbeeld Atlantis); * de sjabloonpagina’s die u wilt gebruiken om een nieuwe site te bouwen (bijvoorbeeld alleen de startpagina en de pagina’s Producten, Downloads, en Contact).
Zo maakt u een nieuwe website op basis van een sjabloon: 1. Start Studio Webdesign of kies Bestand > Startpagina om de startpagina van het programma 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 schuifbalk of vouw een categorie samen door op het symbool naast de naam van die categorie te klikken om de overige sjablonen te bekijken.
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 opgeslagen 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.
Zo sluit u het actieve venster: * Kies Sluiten in het menu Bestand of klik op de knop Sluiten uiterst rechts in de titelbalk 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 documentvensters die momenteel zijn geopend. Het actieve venster is met een vinkje gemarkeerd.
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 afhankelijk van de hyperlinks die u hebt voorzien.
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.
echter wel de belangrijkste ‘paden’ vast om in uw website rond te kuieren. Als u voor een logische 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 bezoekers automatisch langs de ‘hoofdwegen’ leiden.
* U kunt op een willekeurig niveau in de site navigatie-elementen invoegen. Bij navigatiebalken 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.
alle achtergrondelementen plaatsen die op meerdere pagina’s in uw site moeten verschijnen, zoals een logo, achtergrondafbeelding, kop-/voettekst of zelfs een navigatie-element. Zoals u in de onderstaande figuur ziet, wordt een stramienpagina doorgaans voor meerdere pagina’s in de site gebruikt. Door een specifiek 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.
voor uw site. In het vak Pagina’s onder aan het tabblad wordt een boomstructuur van de pagina’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, afbeeldingen en alle andere elementen plaatst die op de uiteindelijke webpagina moeten verschijnen.
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 gewoon aan het muiswieltje. Als u in horizontale richting wilt bladeren, houdt u de Shift-toets ingedrukt terwijl u het muiswieltje gebruikt. Houd de Ctrl-toets ingedrukt terwijl u aan het muiswieltje draait om in of uit te zoomen.
Een stramienpagina die momenteel wordt weergegeven (zodat u deze kunt bewerken in de werkomgeving), is met een oogpictogram gemarkeerd. In dit voorbeeld wordt de stramienpagina wel weergegeven, maar is deze niet geselecteerd. Zo geeft u een specifieke pagina/stramienpagina weer: U kunt op verschillende manieren te werk gaan als u een welbepaalde pagina wilt weergeven in de werkomgeving: * Gebruik de knoppen geren.
* 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 toevoegen en verwijderen op een willekeurig niveau in de sitestructuur, of via slepen-en-neerzetten de volgorde van de pagina’s wijzigen.
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.
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 offsite 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 Resources).
Zo maakt u een kopie van een pagina: * Klik met de rechtermuisknop op een geselecteerde pagina op het tabblad Site en kies Pagina 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.
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 geeft 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 is gebaseerd als de pagina waarop het frame zich bevindt wanneer u een iFrame op een stramienpagina plaatst. (Zo voorkomt u ongewenste pagina-in-pagina effecten.) Om een iFrame aan uw site toe te voegen, gebruikt u het gereedschap Frame met gekoppeld document.
OF 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 instellen 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 bestand, een bladwijzer, RSS-feed of gebruikersgegevens wilt weergeven in het frame. 5.
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 magnetische 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.
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 ‘Hulplijnen 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.
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 Shift-toets ingedrukt houdt. Merk op dat het nulpunt hierdoor ongewijzigd blijft. OF * Dubbelklik op het snijpunt van beide linialen om de linialen en het nulpunt naar de linkerbovenhoek van de pagina te verplaatsen.
1. Klik op de horizontale of verticale liniaal op de positie waar de hulplijn moet verschijnen 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 hulplijn wilt toevoegen in het werkgebied.
Klik op het rode driehoekje om het object Het driehoekje wordt zwart en het object is niet van de hulplijn los te maken langer aan de hulplijn verankerd 3. Als u de rode hulplijn nu naar een andere positie sleept, blijft het object niet meer aan de hulplijn kleven. U kunt het object weer aan een hulplijn doen kleven door het tegen de desbetreffende hulplijn te plaatsen. Zo schakelt u deze voorziening in en uit: * Kies Extra > Opties > Lay-out en schakel het selectievakje Kleverige hulplijnen uit.
Thema-afbeeldingen toevoegen en bewerken Het tabblad Thema-afbeeldingen 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 dialoogvenster gebruiken om deze objecten toe te voegen.
OF Selecteer Thema-afbeeldingen 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-afbeeldingen 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-afbeelding in het midden van de pagina in te voegen in de werkomgeving.
* Een bepaald type elementen bijwerken: selecteer een thema-afbeelding die representatief 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-afbeeldingen in uw site bijwerken: klik op de miniatuur toepassen in de galerie onder aan het tabblad. Hiermee werkt u alle thema-afbeeldingen in de site bij, ongeacht hun type.
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.
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 specifieke 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. Standaard worden de items uit de eerste categorie in de geselecteerde map weergegeven.
Site-eigenschappen instellen Site-eigenschappen zijn globale instellingen die doorheen de gehele website worden toegepast. Tot deze eigenschappen behoren onder andere de pagina-instellingen, de gekozen instellingen voor de HTML-uitvoer en het bijhouden van gebruikersstatistieken, identificatiegegevens zoals de naam van de auteur en een copyrightvermelding, en de gekozen instellingen om uw site te optimaliseren voor zoekmachines.
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 webpagina’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.
De paginagrootte en het type uitlijning instellen De standaardafmetingen die u op het tabblad Opties van het dialoogvenster Eigenschappen 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 standaarduitlijning 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.
Auteurs- en copyrightinformatie opgeven * Gebruik het tabblad Identificatie als u de content van uw site auteursrechtelijk wilt beschermen. Typ de naam van de auteur en een copyrightvermelding in de overeenkomstige invoervakken. Merk op dat deze informatie niet rechtstreeks op de pagina wordt weergegeven, maar naar de header van elke pagina wordt geschreven.
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.
breekstreepje. Als dit geen vereiste is, kunt u de tekst gewoon ongewijzigd exporteren (zonder na elk afbrekingsteken een -tag in te voegen). Zo voorkomt u veelvoorkomende fouten bij het valideren van de HTML-code (aangezien WBR-tags een extensie van Microsoft zijn), maar kan het wel gebeuren dat tekst waarop woordafbreking 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.
Daarnaast kunt u ook informatie verzamelen over de meest bekeken pagina’s, de top vijf landing-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.
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.
Pagina-eigenschappen instellen Elke website die u maakt, heeft 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 geraamte heeft bepaalde eigenschappen die samen het uiterlijk van de uiteindelijke site bepalen. U kunt deze standaardeigenschappen behouden of ze naar behoefte aanpassen, ongeacht of u een van de ingebouwde designsjablonen als uitgangspunt gebruikt of een volledig nieuwe site ontwerpt.
Tabblad Eigenschap Stramienpagina Via deze vervolgkeuzelijst kunt u een specifieke 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.
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 sitemapbestand, 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.
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 behoefte de eigenschappen van afzonderlijke pagina’s of die van meerdere pagina’s tegelijk wijzigen. * Als u de eigenschappen van een specifieke pagina wilt wijzigen, klikt u gewoon in de relevante kolom voor de desbetreffende pagina.
* de mogelijkheid de weergegeven informatie snel opnieuw te ordenen door kolommen oplopend of aflopend te sorteren; * de mogelijkheid naar specifieke tekst te zoeken en deze meteen op alle pagina’s in uw site door andere tekst te vervangen.
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 (specifieke pagina’s een andere bestandsnaam geven, mappen toevoegen of verwijderen, bestanden naar een andere map verplaatsen, enzovoort). Site op fouten contro- Veelvoorkomende lay-outproblemen opsporen in uw site en die leren indien mogelijk automatisch of handmatig verhelpen.
Wellicht kunnen we dit concept het beste verduidelijken aan de hand van een figuur. In de volgende figuur ziet u de relaties tussen gebruikers, webpagina’s, gebruikerslijsten en gebruikersgroepen. Geavanceerde vormen van toegangscontrole worden afgehandeld via Serif Web Resources.
bijvoorbeeld alleen toegankelijk maken voor uw familieleden, maar niet voor andere internetgebruikers door deze met een wachtwoord te beveiligen. Hierbij kunt u tijdens het instellen van de paginabeveiliging een gebruikerslijst aanmaken. Het enige wat u hoeft te doen, is de toegangscontrole inschakelen en vervolgens een nieuwe gebruikerslijst aanmaken en daar de vereiste gebruikersnamen en wachtwoorden aan toevoegen.
3. Maak in het dialoogvenster dat daarop verschijnt een nieuwe gebruikerslijst aan door een naam (bijvoorbeeld ‘Aanmelding fotogalerij’) en beschrijving (bijvoorbeeld ‘Toegangscontrole voor fotogalerij’) in te voeren in de overeenkomstige invoervakken en klik vervolgens 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 toegankelijk wilt maken.
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 gebruikersgroep een aantal gebruikers toegewezen, die allemaal dezelfde machtigingen hebben om toegang te krijgen tot de pagina’s die aan de desbetreffende gebruikersgroep zijn gekoppeld.
* 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.
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 automatisch 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.
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 gebruikers blokkeren. Mocht ook dat niet volstaan, dan kunt u als laatste redmiddel zelfs de ISP of organisatie blokkeren bij wie de desbetreffende gebruiker een abonnement heeft.
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-mailadressen naar dit intelligente object. Zo verwijdert u een gebruiker: 1.
Zo geeft u geblokkeerde gebruikers opnieuw toegang: * Selecteer een specifiek IP-adres (voor afzonderlijke gebruikers) of netwerkadres (voor ISP’s/organisaties) in de vervolgkeuzelijst Accepteren. Onthoud dat het IP-adres van afzonderlijke gebruikers op een ander cijfer dan nul eindigt (bijvoorbeeld 80.6.91.234), terwijl een netwerkadres van een ISP/organisatie altijd op nul eindigt (bijvoorbeeld 80.6.91.0). Merk op dat ook wordt aangegeven wanneer het desbetreffende adres werd geblokkeerd.
Omdat gebruikers zich zonder uw tussenkomst kunnen registreren, hoeft 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 ingeschakeld (zie eerder).
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ïndexeerd 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.
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 reigersoorten Trefwoorden Vogels, Reiger, Ardeidae Blauwe reiger, zilverreiger, withalsreiger, keizerreiger Overweeg vooraf welke beschrijving en trefwoorden u zult gebruiken voor de site en de verschillende pagina’s in uw site.
Zo genereert u Robots-metatags: 1. Kies Eigenschappen van site in het menu Bestand als u voor de volledige site Robotsmetatags wilt genereren. Om een Robots-metatag te genereren voor een specifieke 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.
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.
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 pagina 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, wekelijks, jaarlijks of nooit).
Het zoekvak is het tekstvak waarin gebruikers het woord of de zin kunnen typen waar ze willen naar zoeken. Dit tekstvak wordt doorgaans op een stramienpagina 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.
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 gereedschap Veld voor zoekresultaten toevoegen gebruiken. Merk op dat u een willekeurige grootte kunt instellen voor het veld voor zoekresultaten.
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 effecten kunt toepassen, of tabeltekst (zie ‘Teksttabellen maken’ in hoofdstuk 6) om een tekst in rijen en kolommen in te delen.
Wanneer u een tekstframe selecteert, verschijnt er een begrenzingskader rond dit frame (zie frame 1 in de bovenstaande figuur). 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 selectiegereedschap hebt geselecteerd, verschijnt er bovendien een knipperende cursor in de tekst, de zogeheten invoegpositie. Als deze modus actief is, kunt u de tekst naar behoefte bewerken.
De informatie in de bovenstaande tabel heeft 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 gemakkelijk afleiden uit de kleur van de formaatgrepen wanneer u het frame selecteert. HTMLframes hebben donkerblauwe grepen, terwijl aangepaste frames grijze grepen hebben.
Zo verwijdert u een tekstframe: * Selecteer het frame en druk op Delete. (Als de invoegpositie zich in de tekst bevindt, worden de tekens rechts van de cursor gewist wanneer u op Delete drukt.) OF 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.
Merk op dat de kolommen die u instelt voor een tekstframe bepalen hoe de tekst wordt weergegeven in het frame. Om te voorkomen dat de tekst de ingestelde marges overschrijdt, wordt automatisch regelterugloop toegepast. Deze marges vervullen met andere woorden een andere functie dan de paginamarges en rij-/kolomhulplijnen, die veeleer lay-outhulpmiddelen zijn om de positie van elementen te bepalen op de pagina.
Als het tekstframe meerdere kolommen bevat, hoeft u alleen de boven- en ondermarge 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.
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).
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 overvloeigebied bevat tekst die nog niet werd ingevoegd. Voortgezet Het frame is aan een volgend frame gekoppeld. Ofwel is het einde van de tekst zichtbaar, ofwel wordt de tekst in het volgende frame voortgezet. Opmerking: als het overvloeigebied van het laatste frame nog tekst bevat, heeft het pictogram een rode kleur.
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. Grafische eigenschappen van frames Net als afbeeldingen hebben ook frames een lijndikte/-kleur en een vulkleur (aanvankelijk is een lijndikte van nul pixels en transparant als vulkleur ingesteld voor een frame).
* Vaste schuifbalk: als u deze optie selecteert, wordt er altijd een schuifbalk weergegeven in het frame. Als alle tekst in het frame zichtbaar is, heeft deze schuifbalk echter een grijze kleur (is hij niet beschikbaar). * Automatisch schuifbalk weergeven: selecteer deze optie als u alleen een schuifbalk wilt toevoegen wanneer niet alle tekst kan worden weergegeven.
* 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 ten aan de linkerkant. Artistieke tekst toevoegen op de werkbalk Standaardobjec- 2. Klik op een willekeurige positie op de pagina als u de standaardtekengrootte wilt gebruiken voor de tekst.
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, heeft dezelfde eigenschappen als artistieke tekst.
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 > Ongedaan 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.
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 invoeren, de eerste regel van een alinea laten inspringen, tabstops instellen, de teken- en alineaopmaak wijzigen, allerlei opmaakprofielen toepassen, en tekst zoeken en vervangen (zie verderop in dit hoofdstuk).
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 Shift+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 gebruiken om een kolom- of frame-einde in te voegen.
Zo verplaatst u tekst via slepen-en-neerzetten (alleen van toepassing op tekstframes): 1. Selecteer de tekst die u wilt verplaatsen. 2. Plaats de muisaanwijzer boven de geselecteerde tekst en houd de linkermuisknop ingedrukt. 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.
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 afhankelijk van de standaardwaarde die is ingesteld voor tabstops. OF Kies Tekst > Alineaopmaak in de menubalk (of Tekst opmaken > Alineaopmaak in het snelmenu) als u de huidige instellingen via een dialoogvenster wilt veranderen. Stel vervolgens via de kringvelden in het groepsvak Inspringen de gewenste waarden in.
3. Geef in het groepsvak Zoeken in aan of u alleen in de huidige tekst (de tekst die momenteel 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 alleen 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.
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 tekengrootte, de tekenstijl en het type uitlijning te wijzigen, of de tekst verder naar links te laten inspringen.
2. Klik op Opmaak wissen in de vervolgkeuzelijst Opmaakprofiel op de optiebalk (of op het tabblad Opmaakprofielen) Met lettertypen werken Het lettertype wijzigen, is ongetwijfeld een van de meest ingrijpende manieren om het uiterlijk 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.
Doorgaans kunt u het beste de vooraf gedefinieerde 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 categorie Webveilig op het tabblad (in de vervolgkeuzelijst Lettertype op de optiebalk voor tekst is dezelfde categorie beschikbaar).
* Als u een alineaopmaakprofiel toepast op tekst, worden automatisch alle alinea’s in de tekst bijgewerkt, behalve die delen van de tekst waarvoor een specifieke tekenopmaak is ingesteld. Als u een woord bijvoorbeeld vet hebt opgemaakt, blijft dit woord vet nadat u het alineaopmaakprofiel hebt toegepast. Een tekenopmaakprofiel bevat alleen opmaakkenmerken voor afzonderlijke tekens (zoals het lettertype, de tekengrootte, vet, cursief, enzovoort).
Zo past u een vooraf gedefinieerd opmaakprofiel toe: 1. Klik met het selectiegereedschap in een alinea (als u een alineaopmaakprofiel wilt toepassen), of selecteer een of meer woorden of tekens (als u een tekenopmaakprofiel wilt toepassen). Als u een alineaopmaakprofiel 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 opmaakprofiel op al deze alinea’s toegepast. 2.
In HTML-tekstframes kunt u naar behoefte 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 gedefinieerde lijsten te gebruiken (zie hierna) ofwel door uw eigen lijsten met aangepaste symbolen, letters of cijfers te maken.
Telkens als u op Enter drukt, wordt een nieuwe regel begonnen die door het opgegeven symbool 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.
Via de vervolgkeuzelijst rechtsboven kunt u desgewenst een specifieke 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 desbetreffende teken weer te geven.
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 Werk, 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 definiëren voor gegevens die u vaak nodig hebt in uw site. Zo voegt u een veld met persoonlijke gegevens in: 1.
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.
HTMLtabellen Aangepaste tabellen Gegevens sorteren Een lijn- en vulkleur instellen Een kleur- of bitmapverloop instellen HTML-compatibele opmaakprofielen gebruiken Transparantie instellen 1 Een randstijl instellen 1 Tabel vervormen 1 2D/3D-filtereffecten toepassen 1 Instant 3D 1 AutoWissen/AutoVullen/AutoOpmaak Celtekst bewerken met Studio Write Celtekst weergeven in Sitebeheer Excel- en tekstbestanden importeren 1 Als u
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.
* 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.
* 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 specifieke cel in de tabel te selecteren, klikt u op de rand van de desbetreffende cel.
wijderen, klikt u op de knop deren. voor de desbetreffende rij- of kolomkop en kiest u Verwij- * Als u kolommen wilt toevoegen of verwijderen in een bestaande tabel, klikt u op de kolomkop rechts van de laatste kolom en sleept u de muis terwijl u de linkermuisknop ingedrukt 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.
De voorziening AutoOpmaak gebruiken Zo past u een vooraf gedefinieerd opmaakprofiel toe om het uiterlijk van een tabel aan te passen: * Kies AutoOpmaak in het menu Tabel (of Tabel > AutoOpmaak in het snelmenu) om het dialoogvenster AutoOpmaak te openen.
Een kalender invoegen Met de wizard Kalender kunt u overzichtelijke maandkalenders ontwerpen voor uw webpagina’s. De kalenders worden als op tekst gebaseerde tabellen gegenereerd die u naar behoefte 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).
OF 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 Tabel in het snelmenu voor een kalender kunt u snel en eenvoudig rijen en kolommen toevoegen of verwijderen in een bestaande kalender, de rijhoogte en kolombreedte automatisch aan de celinhoud aanpassen, enzovoort.
beheren in de menubalk. De ingestelde gebeurtenissen worden automatisch onder de opgegeven 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.
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 volgende gereedschappen gebruiken in de gereedschapset: Selectiegereedschap Met dit gereedschap kunt u objecten selecteren, verplaatsen, kopiëren, schalen of roteren. Gereedschap Roteren Hiermee kunt u een object rond zijn middelpunt roteren. Hiertoe versleept u een van de grepen van het geselecteerde object.
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 heeft elke bewerking die u uitvoert op een geselecteerd groepsobject een invloed op elk lid van de groep. U kunt echter ook afzonderlijke objecten selecteren en bewerken in een groep.
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 Shift-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.
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 specifieke indeling vanaf het Klembord: * Kies Plakken speciaal in het menu Bewerken. Zo maakt u een kopie van een object: 1.
4. Stel in het groepsvak Spatiëring de gewenste afstand in tussen de afzonderlijke objecten. U hebt hierbij de keuze uit Offset (de onderlinge afstand tussen de linkerbovenhoeken van de objecten) of Afstand (de afstand tussen de rechterbenedenhoeken en linkerbovenhoeken). U kunt de objecten in horizontale en/of verticale richting verschuiven en/of ze naar behoefte roteren. Activeer het selectievakje Absoluut als u een specifieke horizontale of verticale afstand wilt instellen.
OF Druk op de Shift-toets en houd deze toets ingedrukt zodra u het object begint te verslepen. Laat de Shift-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.
Zo schaalt u een vorm, frame- of tabelobject proportioneel: * Houd de Shift-toets ingedrukt terwijl u een van de grepen in de hoeken van het selectiekader (of de greep aan het uiteinde van de lijn) versleept. Afbeeldingen schalen Afbeeldingen worden normaal gesproken automatisch proportioneel geschaald, omdat u bij het schalen van een afbeelding doorgaans de oorspronkelijke breedte-/hoogteverhouding wilt behouden.
3. Sleep de muis terwijl u de linkermuisknop ingedrukt houdt in de richting waarin u het object wilt roteren. Laat de muisknop vervolgens los. (Houd de Shift-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 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 definiëren de contouren om het object bij te snijden. 3.
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 figuur hebben we vóór het tekstframe een AutoVorm geplaatst. 2. Selecteer beide objecten (of groepeer ze) en kies Bijsnijden tot vorm in het menu Extra.
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. Gebruik 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.
* Daarnaast kunt u objecten ook horizontaal of verticaal spatiëren, of ze gelijkmatig spreiden 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 Objecten uitlijnen (toegankelijk via Schikken > Objecten uitlijnen) gebruiken om objecten uit te lijnen.
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 selectie.
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 hulplijn zijn ‘verankerd.
Merk op dat deze standaardinstellingen lokaal zijn. Alle wijzigingen die u in de standaardinstellingen 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 standaardwaarden opslaan.
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.
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 selecteer het gereedschap Potlood. 2. Klik op de positie waar de lijn moet beginnen en sleep met de muis terwijl u de linkermuisknop ingedrukt houdt. Er verschijnt een lijn die de beweging van de muisaanwijzer volgt. 3. Laat de muisknop los zodra de lijn de gewenste lengte heeft.
Een Bézier-curve is een gebogen lijnsegment met controlegrepen, zodat u nauwkeurig de buiging van het segment kunt instellen. (Sneltoets: druk op 2) Een Intelligente curve heeft geen zichtbare controlegrepen. 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 contouren wilt overtrekken van afbeeldingen en objecten die uit gebogen lijnen bestaan. (Sneltoets: druk op 3) 2.
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 behoefte 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 lijneigenschappen hebben.
Bij kalligrafische lijnen met een variabele breedte kunt u via het kringveld Kalligrafische 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 lijnen.
U kunt ook de optiebalk voor AutoVormen boven in de werkomgeving gebruiken om de eigenschappen 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.
Zo past u het uiterlijk van een AutoVorm aan: 1. Selecteer de AutoVorm met het selectiegereedschap. Er verschijnen een of meer schuifregelaars 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 proportioneel 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.
2D-filtereffecten gebruiken U kunt in Studio Webdesign talrijke filtereffecten gebruiken om objecten te transformeren. Met de 3D-effecten 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 filtereffecten die u zoal kunt toepassen op objecten. In de volgende voorbeelden hebben we elk van deze effecten op de letter A toegepast.
3. Selecteer een effect en gebruik de besturingselementen in het dialoogvenster om de eigenschappen van het effect aan te passen. Versleep de schuifregelaars of typ rechtstreeks waarden in de invoervakken om het gewenste effect 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 effect dat u hebt geselecteerd. 4.
toegepast.) Desgewenst kunt u zelfs een patroon als vulkleur instellen, dat u naar behoefte aan de binnen- of buitenkant van het object kunt toepassen of over de randen van het object kunt centreren. Zoals voor alle andere effecten geldt ook hier weer dat u het effect naar behoefte in of uit kunt schakelen. Desgewenst kunt u behalve het kader nog een willekeurige combinatie van 2D- of 3D-filtereffecten op het object toepassen. Zo geeft u een kader weer rond een geselecteerd object: 1.
Raadpleeg het Help-bestand van het programma voor meer informatie over hoe u een vervagingseffect toepast op een object. Het gereedschap Schaduw gebruiken Schaduw leent zich uitstekend om objecten diepte te geven. Dat geldt in het bijzonder voor afbeeldingen 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 schaduweffect toevoegen aan een willekeurig object.
Gebruik de vervolgkeuzelijst Vergrendelen op de optiebalk om tussen een eenvoudig schaduweffect en verschillende soorten schuingetrokken schaduweffecten te wisselen. 3D-filtereffecten gebruiken De 3D-filtereffecten gaan veel verder dan de 2D-filtereffecten (zoals schaduw, een schuine rand, gloed of reliëf) die we eerder hebben beschreven. Met behulp van deze effecten kunt u het oppervlak van objecten met texturen bekleden. Hierbij kunt u desgewenst meerdere effecten tegelijkertijd toepassen op een object.
Bumpmaps voegen diepte-informatie toe, waardoor de indruk ontstaat dat de afbeelding uit hoogtes en laagtes bestaat. Patronen voegen kleurvariaties toe op basis van specifieke overvloeimodi en transparantieinstellingen om op een realistische manier allerlei texturen te simuleren (hout, marmer, vlekken, enzovoort). Merk op dat er twee soorten bumpmaps en patronen zijn: tweedimensionale en driedimensionale. Dit zijn in feite allemaal driedimensionale effecten.
* (Facultatief) Klik indien nodig op Voorbeeld weergeven/verbergen rechtsonder in het dialoogvenster om het voorbeeldvenster uit te vouwen. Als dit deelvenster is uitgevouwen, worden de effecten die u instelt alleen in het voorbeeldvenster toegepast. Als u dit deelvenster samenvouwt (door nogmaals op de knop te klikken), worden de ingestelde effecten rechtstreeks op het object op de pagina toegepast.
* Klik op Functie om de functie te kiezen die u wilt gebruiken om de bumpmap te genereren. 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 effect. • Schaal X: hiermee kunt u het effect samenpersen of uitrekken langs de X-as of horizontale as.
meer controle wilt over de transparantie van het object, in het bijzonder om reflecterende belichtingseffecten na te bootsen bij glazen objecten, kunt u het filtereffect Transparantie gebruiken om de gewenste transparantie in te stellen.
Via de optiebalk boven in de werkomgeving kunt u eenvoudig de gewenste instellingen kiezen voor elk van deze parameters. Onthoud in dit verband dat elke parameter het 3D-effect 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 behoefte rond de X-, Y- en Z-as kunt draaien in verhouding tot de pagina.
Zo schakelt u het 3D-effect uit: * Klik op 3D-effect verwijderen op de optiebalk. Als u het effect 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.
2. Als u het kader op specifieke 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.
* 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 opmaakkenmerken naar behoefte kunt hergebruiken.
9 Afbeeldingen, animaties en multimedia-elementen toevoegen Afbeeldingen importeren Studio Webdesign biedt u de mogelijkheid afbeeldingen in de meest uiteenlopende bestandsindelingen in te voegen in uw site: * Bitmapafbeeldingen, ook wel bitmaps of rasterafbeeldingen genoemd, bestaan uit een matrix van punten (‘pixels’). U kunt dit enigszins vergelijken met de ruitjes op een blad millimeterpapier.
Standaard wordt een afbeelding niet bijgesneden wanneer u deze op de pagina plaatst. Studio Webdesign gebruikt dus automatisch de oorspronkelijke afmetingen bij het invoegen van een afbeelding. Mocht de afbeelding echter te groot zijn, dan kunt u deze altijd bijsnijden. Desgewenst kunt u ook de eigenschappen van het afbeeldingskader (het denkbeeldige kader waarin de afbeelding wordt geplaatst) aanpassen om de grootte en uitlijning van de afbeelding in het kader te bepalen.
Als u meerdere afbeeldingen tegelijk wilt invoegen, selecteert u verschillende afbeeldingen 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 afbeelding op elk moment door een andere afbeelding vervangen. Dit is vooral handig wanneer u de ingestelde grootte en positie van een afbeelding wilt behouden, maar de afbeelding zelf wilt bijwerken.
* Om een afbeelding in stappen van 90° naar links te roteren, klikt u op . * Om in of uit te zoomen op een bijgesneden afbeelding, klikt u op een van de zoomgereedschappen . * Als u de afbeelding door een andere afbeelding wilt vervangen, klikt u op , bladert u naar de map waarin de nieuwe afbeelding is opgeslagen, selecteert u deze en klikt u op Openen. Zo wijzigt u de eigenschappen van het afbeeldingskader: 1.
Merk op dat u de OLE-status van afbeeldingen (koppelen of insluiten) achteraf op elk moment kunt wijzigen via de voorziening Bronnen beheren in Sitebeheer. Wat afbeeldingen betreft die u vanuit de mediabalk toevoegt, geldt het volgende: afbeeldingen die kleiner zijn dan 256 kB worden standaard ingesloten; afbeeldingen die groter zijn dan 256 kB worden gekoppeld.
U kunt de mediabalk naar behoefte als een soort tijdelijke opslagruimte voor uw foto’s gebruiken 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 echter onder een specifieke naam opslaan, zodat u het later kunt hergebruiken. Klik hiertoe op Nieuw album.
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 Verkenner 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 geven en kies Nieuw album. om het bijbehorende vervolgmenu weer te 2.
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 bijbehorende vervolgmenu weer te geven en geef aan of u de foto’s op bestandsnaam, classificatie of datum wilt sorteren.
kunt hierbij op twee manieren te werk gaan: * U kunt gebruikmaken van het dialoogvenster Exportopties of de voorziening Exportopties beheren om de gewenste bestandsindeling in te stellen voor het exporteren van afzonderlijke afbeeldingen. OF U kunt bepaalde afbeeldingen vooraf naar een specifieke indeling converteren met de opdracht Extra > Naar afbeelding converteren.
OF * U kunt een specifieke map en bestandsnaam kiezen om de afbeelding op te slaan. Dat is bijvoorbeeld zinvol als u beschrijvende namen wilt gebruiken voor de afbeeldingen in plaats van de bestandsnamen die het programma automatisch genereert tijdens het exporteren van de site. Aanvankelijk kunt u voor alle afbeeldingen wellicht het beste de optie Standaardinstellingen voor site gebruiken selecteren.
en typ een nieuwe bestandsnaam). In beide gevallen kunt u de map selecteren waarin u de geëxporteerde afbeelding wilt opslaan. Standaard wordt de bestandsindeling gebruikt 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.
zoals Diffuse gloed, en verschillende vervagingseffecten op uw afbeeldingen toepassen. In totaal kunt u uit maar liefst 20 aanpassingsfilters kiezen, die u rechtstreeks kunt toepassen. Desgewenst kunt u ook meerdere aanpassingsfilters tegelijk toepassen. Al deze filters zijn toegankelijk vanuit het dialoogvenster Aanpassingen doorvoeren. Dit dialoogvenster is als het ware het zenuwcentrum om aanpassingen door te voeren.
u geen zorgen als de filters niet in de juiste volgorde staan. U kunt ze naar een willekeurige andere positie slepen in de lijst. Het filter dat u het laatst hebt toegevoegd, verschijnt altijd onder aan de lijst en wordt als laatste toegepast op de afbeelding (nadat de andere aanpassingen erboven zijn doorgevoerd). In het bovenstaande voorbeeld wordt eerst het filter Diffuse gloed en vervolgens het filter Niveaus op de afbeelding toegepast. Zo voegt u een aanpassingsfilter toe: 1.
* 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 Geavanceerde eigenschappen uiterst rechts om de instellingen voor het filter te veranderen. De volgorde van de filters wijzigen U kunt de volgorde waarin de ingestelde filters op de afbeelding worden toegepast naar behoefte aanpassen door ze naar een andere positie te slepen in de lijst.
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.
3. Activeer de optie Afbeelding koppelen als u een koppeling naar het bronbestand wilt invoegen in plaats van de afbeelding in uw project in te sluiten. Om de afbeelding in te sluiten, selecteert u de optie Afbeelding insluiten. 4. Klik op Openen. 5. De muisaanwijzer krijgt de volgende vorm: . Klik op de pagina als u de standaardafmetingen wilt gebruiken om de animatie in te voegen. Sleep met de muis als u aangepaste afmetingen wilt instellen voor de animatie.
* 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 verbinding 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: .
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 hoeft te werken.
* Via een pictogram: Studio Webdesign biedt een pictogram dat al aan het mediabestand is gekoppeld. Het enige wat u hoeft te doen, is dit pictogram op de juiste positie plaatsen op de pagina. * Via een afbeelding: als u voor deze methode kiest, moet u een externe afbeelding selecteren, die het programma vervolgens importeert en aan het mediabestand koppelt.
Om een bestaande YouTube-video door een andere video te vervangen, dubbelklikt u gewoon op de desbetreffende 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.
* een fotoraster waar gebruikers eenvoudig door kunnen schuiven; * foto’s die boven elkaar zijn gestapeld, gecombineerd met een horizontale navigatiebalk (zoals in de onderstaande figuur). 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.
Shift-toets ingedrukt als u meerdere foto’s tegelijk wilt selecteren.) Activeer het selectievakje Voorbeeld in het dialoogvenster Openen als u een voorbeeld wilt bekijken van de afzonderlijke foto’s naarmate u ze aan de selectie toevoegt. OF * Alle foto’s in een map toevoegen Klik op Map toevoegen als u meteen een volledige map met foto’s wilt toevoegen.
derheid verbeteren. Selecteer Aangepast in het vervolgmenu om het dialoogvenster Aanpassingen doorvoeren te openen, van waaruit u nog meer aanpassingsfilters kunt toepassen op de foto. 4. Activeer het selectievakje Afbeeldingen insluiten als u de geselecteerde foto’s in uw webproject 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 fotogalerij.
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 behoefte kunt schalen nadat u deze aan de pagina hebt toegevoegd. Hiertoe selecteert u de galerij en versleept u een van de grepen in de hoeken van het selectiekader.
10 Met kleuren, verlopen en transparantie werken Effen kleuren instellen In Studio Webdesign kunt u voor verschillende objecttypen effen kleuren instellen: * U kunt een effen 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.
3. Klik op de knop Vulkleur, Lijnkleur of Tekst boven aan het tabblad om aan te geven waarvoor u precies een effen kleur wilt instellen. 4. 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 gedefinieerde kleurenpaletten en klik vervolgens op de gewenste kleurstaal.
In Studio Webdesign vertonen kleurenschema’s veel overeenkomsten met een systeem waarbij op basis van getallen wordt geverfd. Hierbij worden verschillende gebieden in de lay-out met getallen gecodeerd. Aan elk gebied wordt (op basis van deze getallen) een specifieke kleur toegewezen (zie de bloem in de figuur, waarvoor het kleurenschema ‘Kinderkamer’ is ingesteld).
3. Selecteer het gewenste kleurenschema in de lijst en klik op OK. Alle gebieden in de website 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.
achtergrondkleur/-afbeelding 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 kleurencombinaties het beste resultaat opleveren, is de procedure erg eenvoudig.
5. Als u een specifieke paginakleur wilt instellen, klikt u op de kleurstaal naast de optie Paginakleur 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 oorspronkelijke 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 definiëren, gaat u op dezelfde manier te werk.
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 afleiden welke kleur momenteel is ingesteld voor dit onderdeel van het geselecteerde object (of voor de geselecteerde node). 2. Als u een kleurverloop wilt instellen, klikt u op de knop Verloop en kiest u Lineair, Ovaal of Conisch in het vervolgmenu.
* Net als verlopen kunnen transparantie-effecten rechtstreeks vanuit de studio worden toegepast – in dit geval via het tabblad Transparantie. (Transparantie is ook een optie voor het filtereffect 3D-patroon.) * In de galerie op het tabblad Transparantie worden miniaturen in grijstinten weergegeven van de beschikbare transparantie-effecten, waarbij de lichtere delen transparanter zijn dan de donkere delen.
11 Hyperlinks en Interactiviteit toevoegen Hyperlinks en bladwijzers toevoegen Wanneer u een hyperlink instelt voor een object (bijvoorbeeld een rechthoek, geselecteerde tekst of een afbeelding), kunnen internetgebruikers door op dat object te klikken een bepaalde gebeurtenis uitlokken. Zorgvuldig gekozen hyperlinks zijn een belangrijk onderdeel van de sitestructuur.
3. Selecteer links in het dialoogvenster het type hyperlink dat u wilt invoegen. Geef vervolgens 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 hyperlink. 4. Naargelang het type hyperlink dat u hebt geselecteerd, kunt u behalve het doel nog allerlei andere opties instellen. 5.
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.
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 definië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 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 Shift-toets ingedrukt terwijl u sleept als u de hotspot alleen in horizontale of verticale richting wilt verplaatsen.
Voordat u een rollover-afbeelding creëert in Studio Webdesign moet u voor elke gebeurtenis (klikken, de muisaanwijzer boven het object laten rusten, enzovoort) een afzonderlijke afbeelding maken. Hiervoor moet u een externe grafische toepassing gebruiken. Studio Webdesign genereert automatisch de vereiste code om de verschillende gebeurtenissen te onderscheppen. U kunt overigens ook rechtstreeks rollovers importeren die met Tekenen en Ontwerpen van Easy Computing zijn gemaakt.
Zo maakt u een rollover: 1. Maak met behulp van een externe grafische toepassing de vereiste bronafbeeldingen voor elke rollover-toestand die u wilt definië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.
De vereiste bronafbeeldingen maken voor een rollover Voor elk object waarvoor minstens één rollover-toestand is geactiveerd, moet u een afzonderlijke bronafbeelding maken. Vaak gaat het slechts om subtiele verschillen tussen de afbeelding voor de standaardtoestand en de ‘varianten’ die de indruk wekken dat het object van de ene in de andere toestand overgaat.
Pop-uprollovers toevoegen Pop-uprollovers kunnen voor allerlei doeleinden worden ingezet. Op het web worden ze echter hoofdzakelijk gebruikt om een grotere versie van een afbeelding 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 Flashfotogalerij om te waarborgen dat gebruikers vlot door uw galerij kunnen navigeren.
Zo maakt u een pop-uprollover: 1. Klik op Pop-uprollover invoegen in het vervolgmenu Navigatiehulpmiddelen toevoegen op de werkbalk Webobjecten. 2. Klik op Bladeren naast het vak Standaard in het dialoogvenster om de afbeelding in te stellen die u voor de standaardtoestand wilt gebruiken. Blader in het dialoogvenster dat daarop verschijnt naar de juiste map, selecteer de afbeelding en klik op Openen. 3. Let erop dat de geselecteerde afbeelding standaard ook voor de toestand Over wordt ingesteld.
3. Plaats beide afbeeldingen 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 midden of vanaf de randen van het selectiekader). Gebruik de formaatgrepen in de hoeken van het selectiekader als u de afbeeldingen 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 afbeeldingen wilt bepalen.
Navigatie-elementen toevoegen Bepaalde typen thema-afbeeldingen 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 navigeren. Het enige wat u hoeft te doen, is het gewenste navigatie-element selecteren (zoals een navigatiebalk of een Vorige- of Volgende-knop) op het tabblad Thema-afbeeldingen in de studio (of in het dialoogvenster).
Zo voegt u een navigatie-element toe: 1. Klik op Thema-afbeelding invoegen in het vervolgmenu Navigatiehulpmiddelen toevoegen op de werkbalk Webobjecten. 2. Selecteer in de vervolgkeuzelijst boven in het dialoogvenster Themaset het type navigatieelement dat u wilt invoegen en kies een thema voor het element. Zo voegt u een navigatiebalk toe: 1.
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.
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 Aanpassen 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.
3. Stel in het groepsvak Kolommen het aantal kolommen in waarover u de sitemap wilt spreiden. Als u aangeeft 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.
12 Dynamische content toevoegen HTML-pagina’s maken HTML is de onderliggende met tags gemarkeerde code die webbrowsers lezen om webpagina’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 heeft en aan de HTML-standaard beantwoordt. U kunt met dit programma ook webpagina’s in zuivere W3C-compatibele HTML ontwikkelen.
Wanneer u rechtstreeks met HTML-code werkt, is er geen WYSIWYG-weergave beschikbaar. Door tekst in te voeren tussen de
-tags in dit venster, kunt u de ‘basisstructuur’ van de HTML-pagina naar behoefte bewerken. Onthoud in dit verband dat elke alinea met de tag moet beginnen en met de tag
moet eindigen. Merk op dat u ook tokens kunt invoegen in uw HTML-code (zie HTML-code toevoegen verderop in dit hoofdstuk).Merk op dat u de vooraf gedefinieerde HTML-code niet kunt bewerken. (Dat heeft overigens ook weinig zin.) U kunt echter wel op specifieke plaatsen in de weergegeven code extra code toevoegen. Wanneer u de broncode voor een object of pagina weergeeft, zult u een aantal duidelijk herkenbare plaatshouders aantreffen (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.
Zo voegt u HTML-code toe aan een pagina: 1. Klik op HTML-code invoegen op de werkbalk Webobjecten of kies Invoegen > Webobject > HTML in de menubalk. 2. Klik op de pagina of het plakbord om een nieuw HTML-fragment met standaardafmetingen in te voegen op die positie. Sleep met de muis als u aangepaste afmetingen wilt instellen voor het HTML-fragment. 3.
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 standaardinstellingen voor de site.
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. Afhankelijk 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.
* via Serif Web Resources, van waaruit de gegevens automatisch naar uw e-mailadres worden 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 behoefte de ingebouwde wizard of een van de kant-en-klare standaardformulieren gebruiken om een webformulier te maken, of zelf een formulier ontwerpen met behulp van de vooraf gedefinieerde formulierobjecten.
Dubbelklik vervolgens op dit besturingselement in de lijst bovenaan om een dialoogvenster te openen waarin u indien nodig de instellingen en/of naam van het besturingselement kunt wijzigen. OF 1. Klik op een van de overige knoppen in het groepsvak als u een aangepast besturingselement aan het formulier wilt toevoegen. Lees ‘Besturingselementen bewerken’ verderop in dit hoofdstuk voor een beschrijving van de verschillende besturingselementen. 2.
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 Volgende. 3. Selecteer in de keuzelijst boven in het dialoogvenster het gewenste type formulier. Gebruik het voorbeeldvenster onderaan als u een voorbeeld wilt bekijken van elk formulier. 4. Klik op Volgende om verder te gaan. 5.
naam toewijzen en vervolgens de gewenste eigenschappen instellen voor het desbetreffende element. Raadpleeg het Help-bestand van het programma voor een overzicht van de besturingselementen die u zoal aan een formulier kunt toevoegen. Als u de wizard Webformulier gebruikt, kunt u ook verborgen objecten als besturingselementen toevoegen.
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 gedefinieerde 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.
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 toevoegen 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.
5. Klik op OK. 6. 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 RSS-feed dan wel een podcast hebt ingevoegd). of verschijnt (naargelang u een Voeg bij podcasts waarop gebruikers zich automatisch kunnen abonneren een label toe aan deze knop om aan te geven via welke toepassing de podcast toegankelijk zal worden gemaakt.
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.
Zo stelt u een online betaalservice in: 1. Klik op Online betaalservice instellen in het vervolgmenu met e-commercegereedschappen op de werkbalk Webobjecten. 2. U kunt uit twee opties kiezen in het dialoogvenster Online betaalservice instellen, naargelang 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.
Als u gebruikmaakt van een e-commerceformulier, kunt u verschillende interactieve elementen in uw formulier integreren en potentiële kopers zodoende meer mogelijkheden aanreiken. 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 heeft. In dit voorbeeld heeft de koper bijvoorbeeld 2600 bakstenen van het type ‘Kram - Oranje’ besteld.
(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 ecommerceknop 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.
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 Optieveld toevoegen en voeg vervolgens, afhankelijk van uw behoeften, een veld met een vaste naam, een invoervak, keuzerondjes of een vervolgkeuzelijst toe.
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 instellingen.
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 gegevens wilt ophalen en er allerlei geavanceerde filter- en sorteercriteria voor in te stellen om de gegevens verder te verfijnen. 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.
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.
* een of meer tekstvelden die gegevens bevatten die uit dezelfde record zijn opgehaald; * een of meer velden voor afbeeldingen waarin u samengevoegde afbeeldingen uit een welbepaalde gegevensrecord kunt weergeven; * allerlei andere elementen, zoals artistieke tekst, AutoVormen, enzovoort.
E-commercegegevens samenvoegen De standaard samenvoegfuncties in Studio Webdesign zijn geschikt als u tekst, afbeeldingen of een combinatie van beide alleen maar wilt weergeven, bijvoorbeeld om een lijst of een galerij toe te voegen aan uw webpagina’s.
In plaats van een formulier dat automatisch wordt herhaald, kunt u ook een samenvoeggebied 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 ‘Toevoegen aan mandje’-knoppen. Als u een dergelijk samenvoeggebied gebruikt, kunnen internetgebruikers uw artikelen dus wel bekijken, maar kunnen ze die niet kopen.
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 woorden toegang krijgen tot PayPal om de transactie te voltooien.
Klik op Volgende 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.
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 voorzieningen 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.
Lees ‘HTML-code toevoegen’ eerder in dit hoofdstuk voor meer informatie over het bewerken 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.
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 worden 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 hoeft te starten en delen van uw site opnieuw hoeft te publiceren.
Opiniepeiling Gebruik dit intelligente object om uw bezoekers naar hun mening te vragen over een bepaald onderwerp. Chatbox Een chatbox is een interactief chatvenster dat op dat van Windows 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.
Intelligente objecten maken U beschouwt het begrip ‘intelligente objecten’ het beste als een algemene term voor de dynamische 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.
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 opnemen. Zo kunt u de intelligente objecten voor de afzonderlijke sites eenvoudiger van elkaar onderscheiden. Op het intelligente object Analyse van site na, kunt u alle intelligente objecten rechtstreeks op uw eigen webpagina’s plaatsen.
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.
3. Klik in het deelvenster aan de rechterkant op . Welke opties precies beschikbaar zijn, is afhankelijk van het type object dat u hebt geselecteerd. Hier is een overzicht. Objecttype Reden om het object te beheren Hoe? Toegangscontrole De toegang beperken tot bepaalde delen van uw site door gebruikerslijsten of -groepen in te stellen. • Zie ‘Toegangscontrole’ in hoofdstuk 3. * CAPTCHA-beveiliging inschakelen om spam te voorkomen.
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 classificeren, enzovoort. • Stel via het vak Privacy machtigingen 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.
Objecttype Reden om het object te beheren Hoe? Nieuws Nieuwsberichten bijwerken. • Bewerk de tekst via de ingebouwde RTF-editor en klik vervolgens op Opslaan. Opiniepeiling Het aantal uitgebrachte stemmen voor een specifieke 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 Beginwaarden. Chatbox Ongewenste regels verwijderen.
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 publiceert. Alleen zo kunt u nagaan wat internetgebruikers uiteindelijk te zien zullen krijgen wanneer ze uw website bekijken.
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 browser 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 Verwijderen.
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.
gen bij het exporteren van de site. (Als het programma geen wijzigingen heeft aangetroffen 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.
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 dialoogvenster dat mogelijk verschijnt met OK hoeft te bevestigen.
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.
